car.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610
  1. <template>
  2. <view class="content">
  3. <view class="nodataBox" v-show="nodataShow||carList.length==0">
  4. <image src="http://dmsphoto.66km.com.cn/thFiles/3C95A4C5-73F8-4B34-902B-703B8A0825C9.png" mode="widthFix" class="nodataImg"></image>
  5. <view class="noTxt">暂无数据</view>
  6. </view>
  7. <view style="margin-top: -26rpx;"></view>
  8. <view class="carLine" v-for="(item,index ) in carList" @click="carlineFn(item)">
  9. <view class="carTop" >
  10. <view class="carCont">
  11. <view class="carModel">
  12. <image :src="item.BrandLogo" v-if="item.BrandLogo" mode="" class="carLogo"></image>
  13. <image v-else src="../../static/img/nocar.png" mode="" class="carLogo"></image>
  14. <view class="carModelCont">
  15. <view class="carMcTop">
  16. <view class="plateNumber">{{item.PlateNumber}}</view>
  17. <view class="carTime" v-if="item.carDetailInfo.carAge">{{item.carDetailInfo.carAge}}</view>
  18. <view class="carA">{{item.carType}}</view>
  19. </view>
  20. <view class="carMcTxt">{{item.CarModel}}</view>
  21. <view class="carTitleBox" v-if="item.carDetailInfo.labelName">
  22. <view class="carTitle" v-for="(v,i) in item.carDetailInfo.labelName.split(',')">{{v}}</view>
  23. </view>
  24. </view>
  25. <view v-if="item.carDetailInfo.NextAuditTime||item.carDetailInfo.InsuranceExpireDate||item.remindSheetInfo.length>0">
  26. <image class="carUpimg" v-if="item.show" src="../../static/img/icon_arrow_up.png" mode=""></image>
  27. <image class="carUpimg" v-if="!item.show" src="../../static/img/icon_arrow_down.png" mode=""></image>
  28. </view>
  29. </view>
  30. <view class="carData">
  31. <view class="carDataLine" > 最新里程:
  32. <span v-if="item.Milage">{{item.Milage}}km</span>
  33. </view>
  34. <view class="carDataLine">累计消费:{{item.checkoutMoneySum}}</view>
  35. </view>
  36. <view class="carnotes">车辆备注:{{item.carDetailInfo.Comment}}</view>
  37. </view>
  38. </view>
  39. <view class="box" v-if="item.show">
  40. <view class="line">
  41. <view class="lineTop" v-show="item.carDetailInfo.NextAuditTime" @click.stop="carDfn1(item)">
  42. <view class="lineTop1">
  43. <view class="lineTopNs">
  44. <view class="nsTxt">年审日期</view>
  45. <view v-if="isDateGreater(item.carDetailInfo.NextAuditTime)">
  46. <span v-if="daysUntilDate(item.carDetailInfo.NextAuditTime)>30"></span>
  47. <view class="nsStatus" v-else>即将过期</view>
  48. </view>
  49. <view class="nsStatus" v-else>
  50. <span>已过期</span>
  51. </view>
  52. </view>
  53. <view class="lineTimeBox">
  54. <span>{{item.carDetailInfo.NextAuditTime}}</span>
  55. <image class="carUpimg" v-show="item.show2" src="../../static/img/icon_arrow_up.png" mode=""></image>
  56. <image class="carUpimg" v-show="!item.show2" src="../../static/img/icon_arrow_down.png" mode=""></image>
  57. </view>
  58. </view>
  59. <view class="lineTop2" v-show="item.show2">
  60. <view class="chaoqi" v-if="isDateGreater(item.carDetailInfo.NextAuditTime)">
  61. <span >距离天数:</span>
  62. {{daysUntilDate(item.carDetailInfo.NextAuditTime)}}天
  63. </view>
  64. <view class="chaoqi">
  65. <span v-if="!isDateGreater(item.carDetailInfo.NextAuditTime)">超期天数:{{daysUntilDate(item.carDetailInfo.NextAuditTime)}}天</span>
  66. </view>
  67. <view>
  68. <view class="lineBtn" @click.stop="sendChat(item,1)">发送提醒</view>
  69. </view>
  70. </view>
  71. </view>
  72. <view class="lineCont" v-show="item.carDetailInfo.InsuranceExpireDate" @click.stop="carDfn2(item)">
  73. <view class="lcLine">
  74. <view class="lineTop1">
  75. <view class="lineTopNs">
  76. <view class="nsTxt">保险提醒</view>
  77. <view v-if="isDateGreater(item.carDetailInfo.InsuranceExpireDate)">
  78. <span v-if="daysUntilDate(item.carDetailInfo.InsuranceExpireDate)>30"></span>
  79. <view class="nsStatus" v-else>即将过期</view>
  80. </view>
  81. <view class="nsStatus" v-else>
  82. <span>已过期</span>
  83. </view>
  84. </view>
  85. <view class="lineTimeBox" v-if="item.carDetailInfo.InsuranceExpireDate">
  86. <span>{{item.carDetailInfo.InsuranceExpireDate.slice(0,10)}}</span>
  87. <image class="carUpimg" v-show="item.show3" src="../../static/img/icon_arrow_up.png" mode=""></image>
  88. <image class="carUpimg" v-show="!item.show3" src="../../static/img/icon_arrow_down.png" mode=""></image>
  89. </view>
  90. </view>
  91. <view v-show="item.show3">
  92. <view class="carData">
  93. <view class="carDataLine">交强险到期:{{item.carDetailInfo.CompulsoryInsuranceTime}}</view>
  94. <view class="carDataLine">商业险到期:{{item.carDetailInfo.CommercialInsuranceTime}}</view>
  95. </view>
  96. <view class="carnotes">保险公司:{{item.carDetailInfo.inscName}}</view>
  97. <view class="lineTop2">
  98. <view class="chaoqi" v-if="isDateGreater(item.carDetailInfo.InsuranceExpireDate)">
  99. <span >距离天数:</span>
  100. {{daysUntilDate(item.carDetailInfo.InsuranceExpireDate)}}天
  101. </view>
  102. <view class="chaoqi" v-if="!isDateGreater(item.carDetailInfo.InsuranceExpireDate)">
  103. <span >超期天数:</span>
  104. {{daysUntilDate(item.carDetailInfo.InsuranceExpireDate)}}天
  105. </view>
  106. <view>
  107. <view class="lineBtn" @click.stop="sendChat(item,2)">发送提醒</view>
  108. </view>
  109. </view>
  110. </view>
  111. </view>
  112. </view>
  113. </view>
  114. <!-- 提醒商机 -->
  115. <view class="line" v-if="false">
  116. <view class="lineTop">
  117. <view class="lineTop1">
  118. <view class="lineTopNs">
  119. <view class="nsTxt">提醒商机</view>
  120. </view>
  121. <view class="lineTimeBox">
  122. <span style="color: #FF0000;">2条</span>
  123. <image class="carUpimg" src="../../static/img/icon_arrow_up.png" mode=""></image>
  124. </view>
  125. </view>
  126. </view>
  127. <view class="lineCont">
  128. <view class="lcLine">
  129. <view class="lineTop1">
  130. <view class="lineTopNs">
  131. <view class="nsTxt">提醒类别:机油滤清器</view>
  132. </view>
  133. </view>
  134. <view class="carData">
  135. <view class="carDataLine">下次服务日期:2024-02-12</view>
  136. <view class="carDataLine">下次服务里程:93843km</view>
  137. </view>
  138. <view class="carnotes">上次到店:2022-01-21</view>
  139. <view class="lineTop2">
  140. <view class="chaoqi">超期天数:</view>
  141. <view>
  142. <view class="lineBtn">发送提醒</view>
  143. </view>
  144. </view>
  145. </view>
  146. <view class="lcLine">
  147. <view class="lineTop1">
  148. <view class="lineTopNs">
  149. <view class="nsTxt">保养提醒</view>
  150. </view>
  151. </view>
  152. <view class="carData">
  153. <view class="carDataLine">下次服务日期:2024-02-12</view>
  154. <view class="carDataLine">下次服务里程:93843km</view>
  155. </view>
  156. <view class="carnotes">上次到店:2022-01-21</view>
  157. <view class="lineTop2">
  158. <view class="chaoqi">超期天数:10</view>
  159. <view>
  160. <view class="lineBtn">发送提醒</view>
  161. </view>
  162. </view>
  163. </view>
  164. </view>
  165. </view>
  166. <!-- 提醒商机 -->
  167. <!-- 检测异常商机 -->
  168. <view class="line" v-if="item.remindSheetInfo.length" @click.stop="">
  169. <view class="lineTop" @click.stop="carDfn4(item)">
  170. <view class="lineTop1">
  171. <view class="lineTopNs">
  172. <view class="nsTxt">检测异常商机</view>
  173. </view>
  174. <view class="lineTimeBox">
  175. <span style="color: #FF0000;">{{item.remindSheetInfo.length}}条</span>
  176. <image class="carUpimg" v-show="item.show4" src="../../static/img/icon_arrow_up.png" mode=""></image>
  177. <image class="carUpimg" v-show="!item.show4" src="../../static/img/icon_arrow_down.png" mode=""></image>
  178. </view>
  179. </view>
  180. </view>
  181. <view class="lineCont" v-show="item.show4">
  182. <view class="lcLine" v-for="(v,i) in item.remindSheetInfo">
  183. <view class="lineTop1">
  184. <view class="lineTopNs">
  185. <view class="nsTxt">{{v.CategoryName}}</view>
  186. </view>
  187. </view>
  188. <view class="carData">
  189. <view class="carDataLine">下次服务日期:{{v.NextServerDate}}</view>
  190. <view class="carDataLine" style="color: #FF0000;" v-if="!isDateGreater(v.NextServerDate)">超期天数:{{daysUntilDate(v.NextServerDate)}}</view>
  191. <view class="carDataLine" style="color: #FF0000;" v-if="isDateGreater(v.NextServerDate)">距离天数:{{daysUntilDate(v.NextServerDate)}}</view>
  192. </view>
  193. <view class="carnotes">检测结果:{{v.CheckResult}}</view>
  194. <view class="carData" style="padding-top: 16rpx;">
  195. <view class="carDataLine">检测日期:{{v.LastInTime.slice(0,10)}}</view>
  196. <view class="carDataLine" >检测里程: <span v-if="v.NextServerKm">{{v.NextServerKm}}km</span> </view>
  197. </view>
  198. <view class="carnotes">检测门店:{{v.LastShopName}}</view>
  199. <view class="lineTop2">
  200. <view class="chaoqi"></view>
  201. <view class="lineBtn" @click.stop="sendChat(v,4)">发送提醒</view>
  202. </view>
  203. </view>
  204. </view>
  205. </view>
  206. <!-- 检测异常商机 -->
  207. </view>
  208. </view>
  209. <view style="height: 40rpx;background-color: #fff;"></view>
  210. </view>
  211. </template>
  212. <script>
  213. export default {
  214. props:['token'],
  215. data() {
  216. return {
  217. carList:[],
  218. carInfo:'',
  219. nodataShow:false
  220. }
  221. },
  222. onLoad() {
  223. },
  224. computed: {
  225. // 计算属性来判断日期是否大于当前日期
  226. isDateGreater() {
  227. return (val)=>{
  228. const currentDate = new Date();
  229. const compareDate = new Date(val);
  230. return compareDate > currentDate;
  231. }
  232. },
  233. daysUntilDate() {
  234. return (val)=>{
  235. const today = new Date();
  236. const specificDate = new Date(val);
  237. const diffTime = Math.abs(today - specificDate);
  238. var time=diffTime / (1000 * 60 * 60 * 24);
  239. return parseInt(time);
  240. }
  241. }
  242. },
  243. methods: {
  244. sendChat(item,num){
  245. /* 保险:InsuranceExpireDate
  246. 未过期:您的爱车桂A2AQ02车险到期时间为2022-12-04,还有26天即将到期,请及时续保~
  247. 过期:您的爱车桂A2AQ02车险已于2022-11-05到期了,为了不影响车辆使用,请及时续保~
  248. 年审:NextAuditTime
  249. 未过期:您的爱车桂A2AQ02年审到期时间为2022-12-04,还有26天即将到期,请及时处理~
  250. 过期:您的爱车桂A2AQ02年审已于2022-11-05到期了,为了不影响车辆使用,请及时处理~*/
  251. var txt='';
  252. if(num==1){
  253. var state= this.isDateGreater(item.carDetailInfo.NextAuditTime)
  254. var day= this.daysUntilDate(item.carDetailInfo.NextAuditTime)
  255. if(state){
  256. if(day>30){
  257. txt='您的爱车'+item.PlateNumber+'年审到期时间为'+item.carDetailInfo.NextAuditTime+',还有'+day+'天到期,请及时续保~'
  258. }else{
  259. txt='您的爱车'+item.PlateNumber+'年审到期时间为'+item.carDetailInfo.NextAuditTime+',还有'+day+'天即将到期,请及时续保~'
  260. }
  261. }else{
  262. txt='您的爱车'+item.PlateNumber+'年审已于'+item.carDetailInfo.NextAuditTime+'过期,为了不影响车辆使用,请及时续保~'
  263. }
  264. }
  265. if(num==2){ //保险
  266. var state= this.isDateGreater(item.carDetailInfo.InsuranceExpireDate)
  267. var day= this.daysUntilDate(item.carDetailInfo.InsuranceExpireDate)
  268. if(state){
  269. if(day>30){
  270. txt='您的爱车'+item.PlateNumber+'车险到期时间为'+item.carDetailInfo.InsuranceExpireDate.slice(0,10)+',还有'+day+'天到期,请及时续保~'
  271. }else{
  272. txt='您的爱车'+item.PlateNumber+'车险到期时间为'+item.carDetailInfo.InsuranceExpireDate.slice(0,10)+',还有'+day+'天即将到期,请及时续保~'
  273. }
  274. }else{
  275. txt='您的爱车'+item.PlateNumber+'车险已于'+item.carDetailInfo.InsuranceExpireDate.slice(0,10)+'过期,为了不影响车辆使用,请及时续保~'
  276. }
  277. }
  278. if(num==4){ //检测异常
  279. var state= this.isDateGreater(item.NextServerDate)
  280. var day= this.daysUntilDate(item.NextServerDate)
  281. if(state){
  282. txt='您好,您的爱车'+item.PlateNumber+'距离下次'+item.CategoryName+'维修保养,还剩下'+day+'天了,请及时到店保养~'
  283. }else{
  284. //您好,您的爱车桂AXD021#检测部位#维修保养服务已超过预计下次服务日5天了,请及时到店保养~
  285. txt='您好,您的爱车'+item.PlateNumber+item.CategoryName+'维修保养服务已超过预计下次服务日'+day+'5天了,请及时到店保养~'
  286. }
  287. }
  288. console.log(txt)
  289. /* uni.showToast({
  290. title: txt,
  291. icon: 'none',
  292. duration: 3000
  293. }); */
  294. //console.log(this.isDateGreater(item.NextAuditTime))
  295. // if(item.)
  296. this.$wx.invoke('sendChatMessage', {
  297. msgtype:"text", //消息类型,必填
  298. enterChat: true, //为true时表示发送完成之后顺便进入会话,仅移动端3.1.10及以上版本支持该字段
  299. text: {
  300. content:txt, //文本内容
  301. },
  302. /* news:
  303. {
  304. link: "http://qw.66km.com.cn", //H5消息页面url 必填
  305. title: "2", //H5消息标题
  306. desc: "23", //H5消息摘要
  307. imgUrl: "", //H5消息封面图片URL
  308. }, */
  309. }, function(res) {
  310. if (res.err_msg == 'sendChatMessage:ok') {
  311. //发送成功
  312. }else{
  313. /* uni.showToast({
  314. title: '发送失败',
  315. icon: 'none',
  316. duration: 3000
  317. }); */
  318. }
  319. })
  320. },
  321. carlineFn(item){
  322. item.show=!item.show
  323. },
  324. carDfn2(item){
  325. item.show3=!item.show3
  326. },
  327. carDfn1(item){
  328. item.show2=!item.show2
  329. },
  330. carDfn4(item){
  331. item.show4=!item.show4
  332. },
  333. getdata(){
  334. this.extCarInfo()
  335. /* var that=this;
  336. this.$http('enterprise/wechat/extCustomerInfo', {
  337. corpID:'wpMGjbBgAA_zIu6wbKy48zFSbGiGeP8g',
  338. extUserId:'wmMGjbBgAA0JAbGD5Vu8BzEuYgZhvhOA',
  339. token:this.token
  340. }, 'GET').then(res => {
  341. this.carList=res.data.data.map
  342. }) */
  343. },
  344. extCarInfo(item){
  345. var that=this;
  346. this.customerId=uni.getStorageSync('customerId')
  347. if(!this.customerId){
  348. this.nodataShow=true
  349. }else{
  350. uni.showLoading({
  351. title: '加载中'
  352. });
  353. this.$http('enterprise/wechat/extCarInfo', {
  354. id:this.customerId,
  355. //token:this.token
  356. }, 'GET').then(res => {
  357. uni.hideLoading();
  358. res.data.forEach(item=>{
  359. item.show=false
  360. item.show2=false
  361. item.show3=false
  362. item.show4=false
  363. })
  364. this.carList=res.data
  365. })
  366. }
  367. }
  368. }
  369. }
  370. </script>
  371. <style scoped>
  372. .carTop{
  373. background: #fff;
  374. padding: 24rpx;
  375. /* padding-top: 0; */
  376. }
  377. .carCont{
  378. /* height: 305rpx; */
  379. background: linear-gradient( 180deg, #FFE9DB 0%, #FFF2EB 48%, #FFF8F4 100%);
  380. border-radius: 10rpx;
  381. padding-bottom: 20rpx;
  382. /* opacity: 0.7; */
  383. }
  384. .carCont .carData{
  385. padding-top: 20rpx;
  386. }
  387. .carLogo{
  388. width: 72rpx;
  389. height: 72rpx;
  390. border-radius: 50%;
  391. }
  392. .carUpimg{
  393. width: 26rpx;height: 16rpx;
  394. }
  395. .carModel{
  396. display: flex;
  397. padding-top: 24rpx;
  398. padding-left: 24rpx;
  399. }
  400. .carModelCont{
  401. width: 540rpx;
  402. padding-left: 12rpx;
  403. }
  404. .carMcTop{
  405. display: flex;
  406. }
  407. .plateNumber{
  408. font-weight: 500;
  409. font-size: 30rpx;
  410. color: #3C3C3C;
  411. line-height: 42rpx;
  412. }
  413. .carTime{
  414. height: 36rpx;
  415. background: #FF842D;
  416. border-radius: 4rpx;
  417. font-size: 24rpx;
  418. color: #FFFFFF;
  419. line-height: 38rpx;
  420. padding: 0 10rpx;
  421. margin-left: 10rpx;
  422. }
  423. .carA{
  424. height: 36rpx;
  425. background: #FFE26C;
  426. border-radius: 4rpx;
  427. font-size: 24rpx;
  428. color: #2A2623;
  429. line-height: 38rpx;
  430. padding: 0 10rpx;
  431. margin-left: 10rpx;
  432. }
  433. .carMcTxt{
  434. font-size: 24rpx;
  435. color: #666666;
  436. padding-top: 12rpx;
  437. white-space: nowrap; /* 不换行 */
  438. overflow: hidden; /* 隐藏超出的内容 */
  439. text-overflow: ellipsis; /* 用省略号表示被隐藏的部分 */
  440. width: 560rpx; /* 设置最大宽度以限制文本的显示长度 */
  441. }
  442. .carTitleBox{
  443. display: flex;padding-top: 12rpx;flex-wrap: wrap;
  444. }
  445. .carTitle{
  446. /* height: 36rpx; */
  447. border-radius: 4rpx;
  448. border: 1px solid #FF8113;
  449. /* line-height: 34rpx; */
  450. font-size: 24rpx;
  451. color: #FF8113;
  452. padding: 2rpx 8rpx;
  453. margin-right: 10rpx;
  454. margin-bottom: 10rpx;
  455. }
  456. .carModel{
  457. border-bottom: 1px solid #EFDFD6;
  458. padding-bottom: 20rpx;
  459. }
  460. .carData{
  461. display: flex;
  462. justify-content: space-between;
  463. font-size: 26rpx;
  464. color: #666666;
  465. /* padding-top: 18rpx; */
  466. line-height: 33rpx;
  467. padding-left: 20rpx;
  468. padding-right: 20rpx;
  469. }
  470. .carnotes{
  471. font-size: 26rpx;
  472. color: #666666;
  473. padding-top: 18rpx;
  474. line-height: 33rpx;
  475. padding-left: 20rpx;
  476. padding-right: 20rpx;
  477. }
  478. .box{
  479. padding: 0 24rpx;
  480. }
  481. .line{
  482. background: #fff;margin-top: 20rpx;
  483. border-radius: 10rpx;
  484. }
  485. .lineTop{
  486. padding: 30rpx 22rpx 0rpx 22rpx;
  487. }
  488. .lineTop1{
  489. display: flex;justify-content: space-between;
  490. padding-bottom: 20rpx;
  491. }
  492. .lineTopNs{
  493. display: flex;
  494. }
  495. .nsTxt{
  496. font-size: 30rpx;
  497. color: #3C3C3C;
  498. line-height: 36rpx;
  499. font-weight: 600;
  500. }
  501. .nsStatus{
  502. font-size: 24rpx;
  503. color: #FF0000;
  504. height: 36rpx;
  505. background: #FFF1F1;
  506. border-radius: 4rpx;
  507. line-height: 38rpx;
  508. padding: 0 10rpx;
  509. margin-left: 20rpx;
  510. }
  511. .lineTimeBox{
  512. line-height: 36rpx;color: #3C3C3C;display: flex;
  513. }
  514. .carUpimg{
  515. margin-left: 20rpx;margin-top: 8rpx;
  516. }
  517. .lineTop2{
  518. display: flex;justify-content: space-between;
  519. padding-bottom: 20rpx;
  520. margin-top: 4rpx;
  521. }
  522. .lineBtn{
  523. /* height: 52rpx; */
  524. border-radius: 28rpx;
  525. border: 1px solid #DDDDDD;
  526. /* line-height: 56rpx; */
  527. padding: 10rpx 20rpx;
  528. font-size: 26rpx;
  529. color: #3C3C3C;
  530. }
  531. .chaoqi{
  532. line-height: 56rpx;font-size: 26rpx;
  533. color: #FF0000;
  534. }
  535. .lineCont{
  536. }
  537. .lcLine{
  538. padding: 24rpx 20rpx 0 20rpx;
  539. border-top: 1px solid #EEEEEE;
  540. /* padding-bottom: 20rpx; */
  541. }
  542. .lcLine .carData{
  543. padding-left: 0;padding-right: 0;
  544. }
  545. .lcLine .carnotes{
  546. padding-left: 0;padding-right: 0;
  547. }
  548. .nodataImg{
  549. width: 400rpx;
  550. padding-top: 100rpx;
  551. }
  552. .noTxt{
  553. font-size: 32rpx;
  554. color: #999999;
  555. padding-top: 50rpx;
  556. }
  557. .nodataBox{
  558. text-align: center;
  559. background: #fff;
  560. }
  561. .carLine{
  562. margin-bottom: 20rpx;
  563. }
  564. </style>