modelTwo.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587
  1. <template>
  2. <view class="content">
  3. <!-- 自定义导航 -->
  4. <view class="zdyNavBox">
  5. <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
  6. <view class="zdyNav">
  7. <view class="zdyNavLeft">
  8. <div @click="goback" class="uni-page-head-btn"><i class="uni-btn-icon"
  9. style="color: rgb(0, 0, 0); font-size: 27px;"></i></div>
  10. </view>
  11. <view class="zdyNavTitle">车型件</view>
  12. <view v-if="param.length != 0" class="zdyNavRight" @click="goOemSearch()">OEM搜索</view>
  13. <view v-else style="width: 120rpx;"></view>
  14. </view>
  15. </view>
  16. <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
  17. <view style="height: 44px;"></view>
  18. <view v-if="type != 2" class="top">
  19. <view class="topCont">
  20. <view class="carBox">
  21. <!-- <image src="../../static/img/nocar.png" mode="" class="carLogo"></image> -->
  22. <view class="carTxt">{{description}}</view>
  23. <!-- <image src="../../static/img/jt.png" mode="" class="carJt"></image> -->
  24. </view>
  25. <view class="vinBox">
  26. <view class="vinBox2">
  27. <view class="vinB">VIN</view>
  28. <view class="vinNum">{{vin}}</view>
  29. </view>
  30. <view class="vinBox2" v-if="chexingMesList.length != 0">
  31. <view class="detail" @click="goCarDetail()">车型详情</view>
  32. <image src="../../static/img/icon_arrow_blue_r@2x.png" mode="" style="width: 24rpx; height: 24rpx"></image>
  33. </view>
  34. </view>
  35. </view>
  36. </view>
  37. <view v-else class="top">
  38. <view class="carBox2">
  39. <view class="carTxt2">{{description}}</view>
  40. </view>
  41. </view>
  42. <view class="mainBox">
  43. <view class="maintitle">{{caption}}
  44. <view @click="goback" class="backBox">
  45. <image src="../../static/img/icon_arrow_blue_l@2x.png" mode="" class="backZongImg"></image>
  46. <view class="backTxt">返回总组</view>
  47. </view>
  48. </view>
  49. <view class="searchBox" v-if="lastShow">
  50. <view class="inputBox">
  51. <img src="../../static/img/icon_search.png" alt="" class="searchImg">
  52. <input type="text" placeholder="快速查找子组" class="topInput" v-model="childrenss"
  53. @confirm="childrenkeyup">
  54. </view>
  55. </view>
  56. <view class="mainLine" v-for="(item,index) in childrenList" @click="goThree(item,index)" v-if="lastShow">
  57. <view class="lineLeft">
  58. <image class="lineIMg" :src="item.image_url" v-if="item.image_url" mode="aspectFit"></image>
  59. <image class="lineIMg" src="../../static/img/noimg.png" v-else mode="aspectFit"></image>
  60. </view>
  61. <view class="lineRIght">
  62. <view class="lineName">{{item.caption}}</view>
  63. <view class="lineBm">{{item.code}}</view>
  64. <view class="linejs" v-html="item.remark"></view>
  65. </view>
  66. </view>
  67. <view class="mainBox" v-if="restrainShow1">
  68. <view class="mainLine2" v-for="(item,index) in restrainList1" @click="restrainClickOne(item)">
  69. <view class="lineName2">{{item.caption}}</view>
  70. <image src="../../static/img/jt.png" mode="" class="mainLineJt"></image>
  71. </view>
  72. </view>
  73. <view class="mainBox" v-if="restrainShow2">
  74. <view class="mainLine2" v-for="(item,index) in restrainList2" @click="restrainClickTwo(item)">
  75. <view class="lineName2">{{item.caption}}</view>
  76. <image src="../../static/img/jt.png" mode="" class="mainLineJt"></image>
  77. </view>
  78. </view>
  79. </view>
  80. </view>
  81. </template>
  82. <script>
  83. export default {
  84. data() {
  85. return {
  86. vin: '',
  87. brand_name: '',
  88. access_time: '',
  89. zzTime: '',
  90. caption: '',
  91. param: '',
  92. token: '',
  93. list: '',
  94. restrainShow1: false,
  95. restrainList1: '',
  96. restrainShow2: false,
  97. restrainList1: '',
  98. lastShow: false,
  99. childrenList: '',
  100. oldList: '',
  101. childrenss: '',
  102. iStatusBarHeight: '',
  103. epc_id:'',
  104. description:'',
  105. chexingMesList:[],
  106. type:'',
  107. }
  108. },
  109. onLoad(opt) {
  110. this.vin = opt.vin;
  111. this.zzTime = opt.zzTime;
  112. this.param = opt.param;
  113. this.token = opt.token;
  114. this.epc_id = opt.epc_id;
  115. this.description=opt.description;
  116. this.type = opt.type;
  117. this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
  118. this.getData()
  119. this.chexingMesList = uni.getStorageSync('chexingMesList');
  120. },
  121. methods: {
  122. goOemSearch(){
  123. uni.navigateTo({
  124. url:'OemSearch?brand='+ this.brand_name + '&epc_id=' + this.epc_id + '&vin=' + this.vin + '&param=' + this.param +
  125. '&token=' + this.token + '&access_time=' + this.access_time
  126. })
  127. },
  128. goback() {
  129. console.log('返回');
  130. uni.navigateBack({})
  131. },
  132. restrainClickOne(item) {
  133. this.param = item.param;
  134. this.token = item.token;
  135. if (item.next_restrain == 1) {
  136. this.getYsone()
  137. } else {
  138. this.getYsDlist()
  139. }
  140. },
  141. restrainClickTwo(item) {
  142. this.param = item.param;
  143. this.token = item.token;
  144. if (item.next_restrain == 1) {
  145. this.getYsDlist()
  146. } else {
  147. this.getYsDlist()
  148. }
  149. },
  150. getYsDlist() {
  151. uni.showLoading({
  152. title: '加载中'
  153. });
  154. this.$http('advancedEpc/getSubgroup', {
  155. vin: this.vin,
  156. access_time: this.access_time,
  157. param: this.param,
  158. token: this.token,
  159. epc_id:this.epc_id,
  160. }, 'GET').then(res => {
  161. uni.hideLoading();
  162. //console.log(res.data.number);
  163. if (res.data.number == 200 || res.data.number == 5212) {
  164. this.caption = res.data.result.caption;
  165. this.brand_name = res.data.result.brand_name;
  166. this.access_time = res.data.result.access_time;
  167. this.restrainShow2 = false;
  168. this.restrainShow1 = false;
  169. this.lastShow = true;
  170. this.childrenList = res.data.result.list;
  171. this.oldList = this.childrenList
  172. } else {
  173. uni.showToast({
  174. title: res.data.message,
  175. icon: 'none',
  176. duration: 3000
  177. });
  178. }
  179. });
  180. },
  181. getYsone() {
  182. uni.showLoading({
  183. title: '加载中'
  184. });
  185. this.$http('advancedEpc/getSubgroup', {
  186. vin: this.vin,
  187. access_time: this.access_time,
  188. param: this.param,
  189. token: this.token,
  190. epc_id:this.epc_id,
  191. }, 'GET').then(res => {
  192. uni.hideLoading();
  193. //console.log(res.data.number);
  194. if (res.data.number == 200 || res.data.number == 5212) {
  195. this.caption = res.data.result.caption;
  196. this.brand_name = res.data.result.brand_name;
  197. this.access_time = res.data.result.access_time;
  198. if (res.data.result.level_identify == 'group_restrain' || res.data.result.level_identify ==
  199. 'subgroup') { //约束
  200. console.log("约束2")
  201. this.restrainShow2 = true;
  202. this.restrainShow1 = false;
  203. this.restrainList2 = res.data.result.list;
  204. } else {
  205. this.lastShow = true;
  206. this.childrenList = res.data.result.list;
  207. this.oldList = this.childrenList
  208. }
  209. } else {
  210. uni.showToast({
  211. title: res.data.message,
  212. icon: 'none',
  213. duration: 3000
  214. });
  215. }
  216. });
  217. },
  218. getData() {
  219. uni.showLoading({
  220. title: '加载中'
  221. });
  222. this.$http('advancedEpc/getSubgroup', {
  223. vin: this.vin,
  224. access_time: this.zzTime,
  225. param: this.param,
  226. token: this.token,
  227. epc_id:this.epc_id,
  228. }, 'GET').then(res => {
  229. uni.hideLoading();
  230. //console.log(res.data.number);
  231. if (res.data.number == 200 || res.data.number == 5212) {
  232. this.caption = res.data.result.caption;
  233. this.brand_name = res.data.result.brand_name;
  234. this.access_time = res.data.result.access_time;
  235. if (res.data.result.level_identify == 'group_restrain' ) { //约束
  236. console.log("约束1")
  237. this.restrainShow1 = true;
  238. this.restrainList1 = res.data.result.list;
  239. } else {
  240. if(res.data.result.list[0].next_restrain==1){
  241. this.restrainShow1 = true;
  242. this.restrainList1 = res.data.result.list;
  243. }else{
  244. this.lastShow = true;
  245. this.childrenList = res.data.result.list;
  246. this.oldList = this.childrenList
  247. }
  248. }
  249. } else {
  250. uni.showToast({
  251. title: res.data.message,
  252. icon: 'none',
  253. duration: 3000
  254. });
  255. }
  256. });
  257. },
  258. goCarDetail() {
  259. uni.navigateTo({
  260. url: 'CarDetail'
  261. })
  262. },
  263. goThree(item, index) {
  264. var that = this;
  265. uni.setStorage({
  266. key: 'childrenList',
  267. data: that.childrenList,
  268. success: function() {
  269. uni.navigateTo({
  270. url: 'vinDetail?vin=' + that.vin + '&token=' + item.token + '&param=' +
  271. item.param + '&access_time=' + that.access_time + '&tabIndex=' + index+'&epc_id='+that.epc_id
  272. })
  273. }
  274. });
  275. },
  276. childrenkeyup() {
  277. this.childrenList = this.oldList;
  278. if (this.childrenss == '') {
  279. this.childrenList = this.oldList;
  280. } else {
  281. this.childrenList = this.query(this.childrenList, this.childrenss, 'caption')
  282. }
  283. },
  284. query(list, keyWord, attribute = 'caption') {
  285. const reg = new RegExp(keyWord) // 创建正则表达式
  286. const arr = []
  287. for (let i = 0; i < list.length; i++) {
  288. if (reg.test(list[i][attribute])) {
  289. arr.push(list[i])
  290. }
  291. }
  292. return arr
  293. },
  294. }
  295. }
  296. </script>
  297. <style scoped>
  298. .searchImg {
  299. width: 40rpx;
  300. height: 40rpx;
  301. margin-top: 16rpx;
  302. margin-left: 20rpx;
  303. }
  304. .searchBox {
  305. padding-top: 24rpx;
  306. width: 100vw;
  307. }
  308. .inputBox {
  309. width: 702rpx;
  310. height: 72rpx;
  311. background: #F4F5F7;
  312. border-radius: 36rpx;
  313. margin-left: 24rpx;
  314. display: flex;
  315. position: relative;
  316. }
  317. .topInput {
  318. font-size: 28rpx;
  319. height: 72rpx;
  320. line-height: 72rpx;
  321. padding-left: 16rpx;
  322. width: 500rpx;
  323. }
  324. .content {
  325. background: #F4F5F7;
  326. min-height: 100vh;
  327. width: 100vw;
  328. padding-bottom: constant(safe-area-inset-bottom);
  329. padding-bottom: env(safe-area-inset-bottom);
  330. }
  331. .zdyNavBox {
  332. width: 100vw;
  333. background: #FFFFFF;
  334. position: fixed;
  335. top: 0;
  336. left: 0;
  337. z-index: 9999999;
  338. }
  339. .zdyNav {
  340. display: flex;
  341. justify-content: space-between;
  342. align-items: center;
  343. padding: 14rpx 6rpx;
  344. }
  345. .zdyNavLeft{
  346. width: 120rpx;
  347. }
  348. .zdyNavTitle {
  349. background: #FFFFFF;
  350. text-align: center;
  351. font-size: 32rpx;
  352. font-weight: bold;
  353. }
  354. .zdyNavRight {
  355. background: #FFFFFF;
  356. text-align: center;
  357. font-size: 28rpx;
  358. color: #3F90F7;
  359. width: 120rpx;
  360. }
  361. .top {
  362. padding: 20rpx 0;
  363. }
  364. .topCont {
  365. width: 750rpx;
  366. height: 160rpx;
  367. background: #FFFFFF;
  368. }
  369. .carLogo {
  370. width: 72rpx;
  371. height: 72rpx;
  372. }
  373. .carTxt {
  374. font-size: 28rpx;
  375. font-family: PingFangSC-Medium, PingFang SC;
  376. font-weight: 500;
  377. color: #333333;
  378. line-height: 36rpx;
  379. width: 606rpx;
  380. }
  381. .carJt {
  382. width: 25rpx;
  383. height: 24rpx;
  384. margin-top: 6rpx;
  385. }
  386. .carBox {
  387. display: flex;
  388. justify-content: space-between;
  389. padding: 30rpx 24rpx 24rpx 34rpx;
  390. }
  391. .carBox2{
  392. background-color: #FFFFFF;
  393. padding: 30rpx 24rpx;
  394. }
  395. .carTxt2 {
  396. font-size: 28rpx;
  397. font-family: PingFangSC-Medium, PingFang SC;
  398. font-weight: 500;
  399. color: #333333;
  400. line-height: 36rpx;
  401. /* width: 606rpx; */
  402. height: 75rpx;
  403. /* 隐藏文字显示 ...超过2行省略 */
  404. overflow: hidden;
  405. -webkit-line-clamp: 2;
  406. text-overflow: ellipsis;
  407. display: -webkit-box;
  408. -webkit-box-orient: vertical;
  409. }
  410. .vinBox {
  411. display: flex;
  412. justify-content: space-between;
  413. padding-left: 34rpx;
  414. padding-right: 24rpx;
  415. }
  416. .vinBox2 {
  417. display: flex;
  418. align-items: center;
  419. }
  420. .detail {
  421. color: #3F90F7;
  422. font-size: 24rpx;
  423. margin-right: 10rpx;
  424. }
  425. .vinB {
  426. background: #F19D01;
  427. width: 60rpx;
  428. height: 30rpx;
  429. text-align: center;
  430. line-height: 30rpx;
  431. color: #FFFFFF;
  432. font-size: 22rpx;
  433. border-radius: 5rpx;
  434. }
  435. .vinNum {
  436. color: #999999;
  437. font-size: 24rpx;
  438. line-height: 30rpx;
  439. padding-left: 10rpx;
  440. }
  441. .mainBox {
  442. background: #FFFFFF;
  443. width: 100vw;
  444. }
  445. .maintitle {
  446. font-size: 28rpx;
  447. font-family: PingFangSC-Medium, PingFang SC;
  448. font-weight: 500;
  449. color: #333333;
  450. text-align: center;
  451. line-height: 88rpx;
  452. border-bottom: 1px solid #EEEEEE;
  453. position: relative;
  454. }
  455. .backZongImg {
  456. width: 25rpx;
  457. height: 24rpx;
  458. margin-top: 4rpx;
  459. }
  460. .backBox {
  461. display: flex;
  462. position: absolute;
  463. left: 23rpx;
  464. top: 28rpx;
  465. }
  466. .backTxt {
  467. color: #3F90F7;
  468. font-size: 24rpx;
  469. line-height: 33rpx;
  470. }
  471. .mainLineJt {
  472. width: 25rpx;
  473. height: 24rpx;
  474. margin-top: 8rpx;
  475. }
  476. .mainLine {
  477. display: flex;
  478. width: calc(100vw - 48rpx);
  479. border-bottom: 1px solid #EEEEEE;
  480. padding: 29rpx 24rpx;
  481. }
  482. .lineName {
  483. font-size: 26rpx;
  484. font-weight: bold;
  485. color: #333333;
  486. line-height: 40rpx;
  487. }
  488. .mainLine2 {
  489. display: flex;
  490. justify-content: space-between;
  491. border-bottom: 1px solid #EEEEEE;
  492. padding: 24rpx;
  493. }
  494. .lineName2 {
  495. font-size: 28rpx;
  496. font-family: PingFangSC-Regular, PingFang SC;
  497. font-weight: 400;
  498. color: #333333;
  499. line-height: 40rpx;
  500. }
  501. .lineIMg {
  502. width: 160rpx;
  503. height: 160rpx;
  504. }
  505. .lineRIght {
  506. padding-left: 20rpx;
  507. padding-right: 24rpx;
  508. }
  509. .lineBm {
  510. font-size: 24rpx;
  511. font-family: PingFangSC-Regular, PingFang SC;
  512. font-weight: 400;
  513. color: #999999;
  514. padding: 10rpx 0;
  515. }
  516. .linejs {
  517. font-size: 24rpx;
  518. font-family: PingFangSC-Regular, PingFang SC;
  519. font-weight: 400;
  520. color: #999999;
  521. }
  522. </style>