search.vue 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339
  1. <template>
  2. <view class="content">
  3. <homenav :iStatusBarHeight="iStatusBarHeight" :title="'搜索'"></homenav>
  4. <view class="sTopBox">
  5. <view class="searchInputBox" >
  6. <image src="../../static/img/icon_search.png" mode="" class="simg"></image>
  7. <input v-model="value" type="text" placeholder="请输入车辆品牌、车系或VIN码"
  8. placeholder-class="ip" class="ssinput" @confirm="searchFn">
  9. </view>
  10. <view class="searchBtn" @click="searchFn">
  11. 搜索
  12. </view>
  13. </view>
  14. <view class="box">
  15. <view class="historyLine" v-for="(item,index) in carMlist">
  16. <!-- <image src="http://img.db.66km.cn/carbrandlogo/B - 宝马.png" mode="" class="historylinecarImg"></image> -->
  17. <view class="historylinecar" @click="carMbtn(item)">{{item.title}}</view>
  18. </view>
  19. </view>
  20. <!-- 选择车型 -->
  21. <view class="ckcarBox" v-if="ckCarShow">
  22. <view class="ckcar">
  23. <view class="ckcarTop flex">
  24. <view class="ckcarTitle">请选择车型</view>
  25. <image src="../../static/img/icon_quxiao.png" mode="" class="ckcarClose" @click="ckcarClose"></image>
  26. </view>
  27. <view class="ckcarlineBox" v-for="(item,index) in vinList" @click="goDetal(item)">
  28. <view class="ckcarline flex" >
  29. <view class="ckcarLeft">{{item.title}}</view>
  30. <image src="../../static/img/icon_arrow.png" mode="" class="ckcarJtimg"></image>
  31. </view>
  32. </view>
  33. </view>
  34. </view>
  35. <view class="popupone" @click="popupc" v-if="popuponeShow">
  36. <view class="popup-content" @click.stop="">
  37. <view style="padding: 24rpx 0;">
  38. <view class="manufactorP">{{manufactor}}</view>
  39. </view>
  40. <scroll-view class="brandList" scroll-y="true">
  41. <view class="pLine" v-for="(item,index) in popuponeList" @click="popuponeBtn(item)">{{item.title}}</view>
  42. </scroll-view>
  43. </view>
  44. </view>
  45. <view class="popupone popupTwo" @click="popupcTwo" v-if="popupTwoShow">
  46. <view class="popup-content" @click.stop="">
  47. <view style="">
  48. <!-- <view class="manufactorP">{{displacement}}</view> -->
  49. <view class="manufactorPTow"> <span>{{displacement}}</span>
  50. <span @click="poneHide">上一步</span>
  51. </view>
  52. </view>
  53. <scroll-view class="brandList" scroll-y="true">
  54. <view class="pLine" v-for="(item,index) in displacementList" @click="goDetalcx(item)">{{item.displacement}}</view>
  55. </scroll-view>
  56. </view>
  57. </view>
  58. </view>
  59. </template>
  60. <script>
  61. import homenav from "../../components/homenav/nav.vue"
  62. export default {
  63. components: {
  64. homenav
  65. },
  66. data() {
  67. return {
  68. value:'',
  69. ckCarShow:false,
  70. vinList:[],
  71. carMlist:[],
  72. carMshow:false,
  73. popuponeShow:false,
  74. popuponeList:[],
  75. manufactor:'',
  76. displacementList:'',
  77. type:'',
  78. popupTwoShow:false,
  79. displacement:'',
  80. brand:'',
  81. carSeries:'',
  82. isVin:'',
  83. vin:'',
  84. iStatusBarHeight:'',
  85. }
  86. },
  87. onLoad(opt) {
  88. this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
  89. },
  90. methods: {
  91. goDetal(e){
  92. uni.navigateTo({
  93. url:'/pages/index/byItem?nLevelID='+e.carModelInfo.nLevelID+'&logo='+e.carModelInfo.logo+'&isVin='+this.isVin+'&value='+e.value+'&id='+e.ids+'&vin='+this.vin
  94. })
  95. },
  96. goDetalcx(e){
  97. console.log(e)
  98. uni.navigateTo({
  99. url:'/pages/index/byItem?scarid='+e.id
  100. })
  101. },
  102. carMbtn(e){
  103. this.type=e.type;
  104. if(e.type==1){
  105. this.manufactor=e.manufactor;
  106. this.getpopuponeList()
  107. }else{
  108. this.brand=e.brand
  109. this.carSeries=e.carSeries
  110. this.manufactor=e.manufactor
  111. this.getpopuponeList(e)
  112. }
  113. },
  114. popuponeBtn(item){
  115. console.log(item.displacementList)
  116. this.displacementList=item.displacementList;
  117. this.displacement=item.title;
  118. this.popupTwoShow=true;
  119. },
  120. poneHide(){
  121. this.popupTwoShow=false;
  122. },
  123. popupcTwo(){
  124. this.popupTwoShow=false;
  125. },
  126. getpopuponeList(e){
  127. uni.showLoading({ title: '加载中'});
  128. if(this.type==1){
  129. var params={
  130. manufactor: this.manufactor,type:this.type
  131. }
  132. this.$http('matchingByOpen/queryCarModelGroupIiPackageSecond', params,'POST').then(res => {
  133. uni.hideLoading();
  134. this.popuponeList=res.data;
  135. this.popuponeShow=true;
  136. })
  137. }else if(this.type==2){
  138. var params={
  139. manufactor: this.manufactor,type:this.type,carSeries:this.carSeries,brand:this.brand
  140. }
  141. this.$http('matchingByOpen/queryCarModelGroupIiPackageSecond', params,'POST').then(res => {
  142. uni.hideLoading();
  143. this.popuponeList=res.data;
  144. this.popuponeShow=true;
  145. })
  146. }else{
  147. uni.hideLoading();
  148. console.log(e)
  149. this.displacementList=e.displacementList;
  150. this.popupTwoShow=true;
  151. }
  152. },
  153. popupc(){
  154. this.popuponeShow=false;
  155. },
  156. searchFn(){
  157. console.log(this.value.length)
  158. if(!this.value){
  159. uni.showToast({
  160. title: '请输入车辆品牌、车系或VIN码',
  161. icon:'none',
  162. duration: 3000,
  163. });
  164. return false
  165. }
  166. if(this.value.length==17){
  167. uni.showLoading({ title: '加载中'});
  168. this.isVin=1;
  169. this.vin=this.value;
  170. this.vinList=[];
  171. this.$http('matchingByOpen/queryCarModelGroupByVinAggregation', {
  172. vin: this.value,type:2
  173. },'POST').then(res => {
  174. uni.hideLoading();
  175. if(res.code==0){
  176. this.vinList=res.data;
  177. if(this.vinList.length==1){
  178. this.goDetal(this.vinList[0])
  179. }else{
  180. this.ckCarShow=true;
  181. this.carMshow=false;
  182. }
  183. }
  184. })
  185. }else{
  186. uni.showLoading({ title: '加载中'});
  187. this.isVin=0;
  188. this.vin='';
  189. this.$http('matchingByOpen/queryCarModelGroupIiPackage', {
  190. name: this.value,
  191. },'POST').then(res => {
  192. uni.hideLoading();
  193. this.carMlist=res.data;
  194. this.carMshow=true;
  195. this.ckCarShow=false;
  196. })
  197. }
  198. },
  199. ckcarClose(){
  200. this.ckCarShow=false;
  201. }
  202. }
  203. }
  204. </script>
  205. <style scoped>
  206. .manufactorP{
  207. line-height: 69rpx;padding-left: 24rpx;
  208. width: 504rpx;margin-left: 30rpx;
  209. height: 69rpx;
  210. background: #FF4F00 linear-gradient(132deg, #FF8635 0%, #FF4828 100%);
  211. border-radius: 16rpx;
  212. font-weight: 500;
  213. color: #FFFFFF;font-size: 28rpx;
  214. }
  215. .manufactorPTow{
  216. line-height: 69rpx;padding-left: 24rpx;
  217. padding-right: 24rpx;display: flex;
  218. justify-content: space-between;
  219. background: #FF4F00 linear-gradient(132deg, #FF8635 0%, #FF4828 100%);
  220. font-weight: 500;
  221. color: #FFFFFF;font-size: 28rpx;
  222. }
  223. .brandList{
  224. height: calc(100vh - 200rpx);
  225. /* padding-bottom:var(--status-bar-height); */
  226. }
  227. .pLine{
  228. border-bottom: 1rpx solid #EEEEEE;
  229. font-weight: 400;
  230. color: #333333;font-size: 26rpx;
  231. padding: 30rpx 24rpx;
  232. }
  233. .popupone{
  234. width: 100vw;height: 100vh;
  235. background:rgba(0, 0, 0, 0.4) ;
  236. position: fixed;top: 0;left: 0;
  237. z-index: 11;
  238. }
  239. .popupTwo{
  240. z-index: 111;
  241. }
  242. .popup-content{
  243. width: 80vw;
  244. background: #FFFFFF;
  245. height: 100vh;
  246. margin-left: 20vw;
  247. }
  248. .ckcarJtimg{
  249. width: 26rpx;height: 26rpx;margin-top: 4rpx;
  250. }
  251. .ckcarlineBox{
  252. padding:24rpx ;
  253. border-bottom: 1px solid #EEEEEE;
  254. }
  255. .ckcarLeft{
  256. font-weight: 400;line-height: 36rpx;
  257. color: #1A1A1A;font-size: 26rpx;
  258. }
  259. .ckcarBox{
  260. width: 100vw;height: 100vh;
  261. background:rgba(0, 0, 0, 0.4) ;
  262. position: fixed;top: 0;left: 0;
  263. }
  264. .ckcar{
  265. width: 750rpx;
  266. height: 772rpx;
  267. background: #FFFFFF;
  268. border-radius: 24rpx 24rpx 0rpx 0rpx;
  269. position: absolute;
  270. left: 0;
  271. bottom: 0;
  272. }
  273. .ckcarClose{
  274. width: 30rpx;height: 30rpx;
  275. }
  276. .ckcarTitle{
  277. font-weight: 500;font-size: 28rpx;
  278. color: #1A1A1A;
  279. line-height: 40rpx;
  280. }
  281. .ckcarTop{
  282. padding: 40rpx 26rpx 20rpx 24rpx;
  283. }
  284. .box{
  285. padding: 0 24rpx;
  286. }
  287. .sTopBox{
  288. display: flex;padding: 30rpx 24rpx;
  289. }
  290. .searchBtn{
  291. font-weight: 400;font-size: 28rpx;padding-left: 24rpx;
  292. color: #1A1A1A;line-height: 80rpx;
  293. }
  294. .searchInputBox{
  295. width: 622rpx;display: flex;
  296. height: 80rpx;
  297. background: #F9F9F9;
  298. border-radius: 16rpx;
  299. }
  300. .ssinput{
  301. font-size: 28rpx;font-weight: 400;padding-left: 24rpx;line-height: 80rpx;height: 80rpx;
  302. width: 600rpx;
  303. }
  304. .simg{
  305. width: 36rpx;height: 34rpx;margin-top: 23rpx;margin-left:30rpx;
  306. }
  307. .historylinecarImg{
  308. width: 46rpx;
  309. height: 46rpx;
  310. }
  311. .historylinecar{
  312. font-weight: 400;font-size: 26rpx;
  313. color: #1A1A1A;
  314. line-height: 37rpx;width: 636rpx;
  315. }
  316. .historyLine{
  317. display: flex;justify-content: space-between;
  318. padding: 30rpx 0;border-bottom: 1rpx solid #EEEEEE;
  319. }
  320. </style>