modelTwo.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598
  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 m1" 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 m2" 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. restrainList2: '',
  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. this.getYsone()
  147. } else {
  148. this.getYsDlist()
  149. }
  150. },
  151. getYsDlist() {
  152. uni.showLoading({
  153. title: '加载中'
  154. });
  155. this.$http('advancedEpc/getSubgroup', {
  156. vin: this.vin,
  157. access_time: this.access_time,
  158. param: this.param,
  159. token: this.token,
  160. epc_id:this.epc_id,
  161. }, 'GET').then(res => {
  162. uni.hideLoading();
  163. //console.log(res.data.number);
  164. if (res.data.number == 200 || res.data.number == 5212) {
  165. this.caption = res.data.result.caption;
  166. this.brand_name = res.data.result.brand_name;
  167. this.access_time = res.data.result.access_time;
  168. this.restrainShow2 = false;
  169. this.restrainShow1 = false;
  170. this.lastShow = true;
  171. this.childrenList = res.data.result.list;
  172. this.oldList = this.childrenList
  173. } else {
  174. uni.showToast({
  175. title: res.data.message,
  176. icon: 'none',
  177. duration: 3000
  178. });
  179. }
  180. });
  181. },
  182. getYsone() {
  183. uni.showLoading({
  184. title: '加载中'
  185. });
  186. this.$http('advancedEpc/getSubgroup', {
  187. vin: this.vin,
  188. access_time: this.access_time,
  189. param: this.param,
  190. token: this.token,
  191. epc_id:this.epc_id,
  192. }, 'GET').then(res => {
  193. uni.hideLoading();
  194. //console.log(res.data.number);
  195. if (res.data.number == 200 || res.data.number == 5212) {
  196. this.caption = res.data.result.caption;
  197. this.brand_name = res.data.result.brand_name;
  198. this.access_time = res.data.result.access_time;
  199. if (res.data.result.level_identify == 'group_restrain' || res.data.result.level_identify ==
  200. 'subgroup') { //约束
  201. console.log("约束2")
  202. if(res.data.result.list[0].next_restrain==1){
  203. this.restrainShow2 = true;
  204. this.restrainShow1 = false;
  205. this.restrainList2 = res.data.result.list;
  206. }else{
  207. this.lastShow = true;
  208. this.restrainShow2 = false;
  209. this.restrainShow1 = false;
  210. this.childrenList = res.data.result.list;
  211. this.oldList = this.childrenList
  212. }
  213. } else {
  214. this.lastShow = true;
  215. this.restrainShow1 = false;
  216. this.childrenList = res.data.result.list;
  217. this.oldList = this.childrenList
  218. }
  219. } else {
  220. uni.showToast({
  221. title: res.data.message,
  222. icon: 'none',
  223. duration: 3000
  224. });
  225. }
  226. });
  227. },
  228. getData() {
  229. uni.showLoading({
  230. title: '加载中'
  231. });
  232. this.$http('advancedEpc/getSubgroup', {
  233. vin: this.vin,
  234. access_time: this.zzTime,
  235. param: this.param,
  236. token: this.token,
  237. epc_id:this.epc_id,
  238. }, 'GET').then(res => {
  239. uni.hideLoading();
  240. //console.log(res.data.number);
  241. if (res.data.number == 200 || res.data.number == 5212) {
  242. this.caption = res.data.result.caption;
  243. this.brand_name = res.data.result.brand_name;
  244. this.access_time = res.data.result.access_time;
  245. if (res.data.result.level_identify == 'group_restrain' ) { //约束
  246. console.log("约束1")
  247. this.restrainShow1 = true;
  248. this.restrainList1 = res.data.result.list;
  249. } else {
  250. if(res.data.result.list[0].next_restrain==1){
  251. this.restrainShow1 = true;
  252. this.restrainList1 = res.data.result.list;
  253. }else{
  254. this.lastShow = true;
  255. this.childrenList = res.data.result.list;
  256. this.oldList = this.childrenList
  257. }
  258. }
  259. } else {
  260. uni.showToast({
  261. title: res.data.message,
  262. icon: 'none',
  263. duration: 3000
  264. });
  265. }
  266. });
  267. },
  268. goCarDetail() {
  269. uni.navigateTo({
  270. url: 'CarDetail'
  271. })
  272. },
  273. goThree(item, index) {
  274. var that = this;
  275. uni.setStorage({
  276. key: 'childrenList',
  277. data: that.childrenList,
  278. success: function() {
  279. uni.navigateTo({
  280. url: 'vinDetail?vin=' + that.vin + '&token=' + item.token + '&param=' +
  281. item.param + '&access_time=' + that.access_time + '&tabIndex=' + index+'&epc_id='+that.epc_id
  282. })
  283. }
  284. });
  285. },
  286. childrenkeyup() {
  287. this.childrenList = this.oldList;
  288. if (this.childrenss == '') {
  289. this.childrenList = this.oldList;
  290. } else {
  291. this.childrenList = this.query(this.childrenList, this.childrenss, 'caption')
  292. }
  293. },
  294. query(list, keyWord, attribute = 'caption') {
  295. const reg = new RegExp(keyWord) // 创建正则表达式
  296. const arr = []
  297. for (let i = 0; i < list.length; i++) {
  298. if (reg.test(list[i][attribute])) {
  299. arr.push(list[i])
  300. }
  301. }
  302. return arr
  303. },
  304. }
  305. }
  306. </script>
  307. <style scoped>
  308. .searchImg {
  309. width: 40rpx;
  310. height: 40rpx;
  311. margin-top: 16rpx;
  312. margin-left: 20rpx;
  313. }
  314. .searchBox {
  315. padding-top: 24rpx;
  316. width: 100vw;
  317. }
  318. .inputBox {
  319. width: 702rpx;
  320. height: 72rpx;
  321. background: #F4F5F7;
  322. border-radius: 36rpx;
  323. margin-left: 24rpx;
  324. display: flex;
  325. position: relative;
  326. }
  327. .topInput {
  328. font-size: 28rpx;
  329. height: 72rpx;
  330. line-height: 72rpx;
  331. padding-left: 16rpx;
  332. width: 500rpx;
  333. }
  334. .content {
  335. background: #F4F5F7;
  336. min-height: 100vh;
  337. width: 100vw;
  338. padding-bottom: constant(safe-area-inset-bottom);
  339. padding-bottom: env(safe-area-inset-bottom);
  340. }
  341. .zdyNavBox {
  342. width: 100vw;
  343. background: #FFFFFF;
  344. position: fixed;
  345. top: 0;
  346. left: 0;
  347. z-index: 9999999;
  348. }
  349. .zdyNav {
  350. display: flex;
  351. justify-content: space-between;
  352. align-items: center;
  353. padding: 14rpx 6rpx;
  354. }
  355. .zdyNavLeft{
  356. width: 120rpx;
  357. }
  358. .zdyNavTitle {
  359. background: #FFFFFF;
  360. text-align: center;
  361. font-size: 32rpx;
  362. font-weight: bold;
  363. }
  364. .zdyNavRight {
  365. background: #FFFFFF;
  366. text-align: center;
  367. font-size: 28rpx;
  368. color: #3F90F7;
  369. width: 120rpx;
  370. }
  371. .top {
  372. padding: 20rpx 0;
  373. }
  374. .topCont {
  375. width: 750rpx;
  376. height: 160rpx;
  377. background: #FFFFFF;
  378. }
  379. .carLogo {
  380. width: 72rpx;
  381. height: 72rpx;
  382. }
  383. .carTxt {
  384. font-size: 28rpx;
  385. font-family: PingFangSC-Medium, PingFang SC;
  386. font-weight: 500;
  387. color: #333333;
  388. line-height: 36rpx;
  389. width: 606rpx;
  390. }
  391. .carJt {
  392. width: 25rpx;
  393. height: 24rpx;
  394. margin-top: 6rpx;
  395. }
  396. .carBox {
  397. display: flex;
  398. justify-content: space-between;
  399. padding: 30rpx 24rpx 24rpx 34rpx;
  400. }
  401. .carBox2{
  402. background-color: #FFFFFF;
  403. padding: 30rpx 24rpx;
  404. }
  405. .carTxt2 {
  406. font-size: 28rpx;
  407. font-family: PingFangSC-Medium, PingFang SC;
  408. font-weight: 500;
  409. color: #333333;
  410. line-height: 36rpx;
  411. /* width: 606rpx; */
  412. height: 75rpx;
  413. /* 隐藏文字显示 ...超过2行省略 */
  414. overflow: hidden;
  415. -webkit-line-clamp: 2;
  416. text-overflow: ellipsis;
  417. display: -webkit-box;
  418. -webkit-box-orient: vertical;
  419. }
  420. .vinBox {
  421. display: flex;
  422. justify-content: space-between;
  423. padding-left: 34rpx;
  424. padding-right: 24rpx;
  425. }
  426. .vinBox2 {
  427. display: flex;
  428. align-items: center;
  429. }
  430. .detail {
  431. color: #3F90F7;
  432. font-size: 24rpx;
  433. margin-right: 10rpx;
  434. }
  435. .vinB {
  436. background: #F19D01;
  437. width: 60rpx;
  438. height: 30rpx;
  439. text-align: center;
  440. line-height: 30rpx;
  441. color: #FFFFFF;
  442. font-size: 22rpx;
  443. border-radius: 5rpx;
  444. }
  445. .vinNum {
  446. color: #999999;
  447. font-size: 24rpx;
  448. line-height: 30rpx;
  449. padding-left: 10rpx;
  450. }
  451. .mainBox {
  452. background: #FFFFFF;
  453. width: 100vw;
  454. }
  455. .maintitle {
  456. font-size: 28rpx;
  457. font-family: PingFangSC-Medium, PingFang SC;
  458. font-weight: 500;
  459. color: #333333;
  460. text-align: center;
  461. line-height: 88rpx;
  462. border-bottom: 1px solid #EEEEEE;
  463. position: relative;
  464. }
  465. .backZongImg {
  466. width: 25rpx;
  467. height: 24rpx;
  468. margin-top: 4rpx;
  469. }
  470. .backBox {
  471. display: flex;
  472. position: absolute;
  473. left: 23rpx;
  474. top: 28rpx;
  475. }
  476. .backTxt {
  477. color: #3F90F7;
  478. font-size: 24rpx;
  479. line-height: 33rpx;
  480. }
  481. .mainLineJt {
  482. width: 25rpx;
  483. height: 24rpx;
  484. margin-top: 8rpx;
  485. }
  486. .mainLine {
  487. display: flex;
  488. width: calc(100vw - 48rpx);
  489. border-bottom: 1px solid #EEEEEE;
  490. padding: 29rpx 24rpx;
  491. }
  492. .lineName {
  493. font-size: 26rpx;
  494. font-weight: bold;
  495. color: #333333;
  496. line-height: 40rpx;
  497. }
  498. .mainLine2 {
  499. display: flex;
  500. justify-content: space-between;
  501. border-bottom: 1px solid #EEEEEE;
  502. padding: 24rpx;
  503. }
  504. .lineName2 {
  505. font-size: 28rpx;
  506. font-family: PingFangSC-Regular, PingFang SC;
  507. font-weight: 400;
  508. color: #333333;
  509. line-height: 40rpx;
  510. }
  511. .lineIMg {
  512. width: 160rpx;
  513. height: 160rpx;
  514. }
  515. .lineRIght {
  516. padding-left: 20rpx;
  517. padding-right: 24rpx;
  518. }
  519. .lineBm {
  520. font-size: 24rpx;
  521. font-family: PingFangSC-Regular, PingFang SC;
  522. font-weight: 400;
  523. color: #999999;
  524. padding: 10rpx 0;
  525. }
  526. .linejs {
  527. font-size: 24rpx;
  528. font-family: PingFangSC-Regular, PingFang SC;
  529. font-weight: 400;
  530. color: #999999;
  531. }
  532. </style>