weCom/pages/index/car.vue

<template>
	<view class="content">
		
		<view  class="nodataBox" v-show="nodataShow||carList.length==0">
			<image src="http://dmsphoto.66km.com.cn/thFiles/3C95A4C5-73F8-4B34-902B-703B8A0825C9.png" mode="widthFix" class="nodataImg"></image>
			<view class="noTxt">暂无数据</view>
		</view>
		<view style="margin-top: -26rpx;"></view>
		<view class="carLine" v-for="(item,index ) in carList" @click="carlineFn(item)">
			<view class="carTop" >
				<view class="carCont">
					<view class="carModel">
						<image :src="item.BrandLogo" v-if="item.BrandLogo" mode="" class="carLogo"></image>
						<image v-else src="../../static/img/nocar.png" mode="" class="carLogo"></image>
						<view class="carModelCont">
							<view class="carMcTop">
								<view class="plateNumber">{{item.PlateNumber}}</view>
								<view class="carTime" v-if="item.carDetailInfo.carAge">{{item.carDetailInfo.carAge}}</view>
								<view class="carA">{{item.carType}}</view>
							</view>
							<view class="carMcTxt">{{item.CarModel}}</view>
						    <view class="carTitleBox" v-if="item.carDetailInfo.labelName">
								<view class="carTitle" v-for="(v,i) in item.carDetailInfo.labelName.split(',')">{{v}}</view>
								
							</view>
						</view>
						<view v-if="item.carDetailInfo.NextAuditTime||item.carDetailInfo.InsuranceExpireDate">
							<image class="carUpimg" v-if="item.show" src="../../static/img/icon_arrow_up.png" mode=""></image>
							<image class="carUpimg" v-if="!item.show" src="../../static/img/icon_arrow_down.png" mode=""></image>
						</view>
					</view>
					<view class="carData">
						<view class="carDataLine" > 最新里程：
						  <span v-if="item.Milage">{{item.Milage}}km</span>
						</view>
						<view class="carDataLine">累计消费：{{item.checkoutMoneySum}}</view>
						
					</view>
					<view class="carnotes">车辆备注：{{item.carDetailInfo.Comment}}</view>
				</view>
			</view>
			
			<view class="box" v-if="item.show">
				<view class="line">
					<view class="lineTop" v-show="item.carDetailInfo.NextAuditTime" @click.stop="carDfn1(item)">
						<view class="lineTop1">
							<view class="lineTopNs">
								<view class="nsTxt">年审日期</view>
								<view  v-if="isDateGreater(item.carDetailInfo.NextAuditTime)">
								  <span  v-if="daysUntilDate(item.carDetailInfo.NextAuditTime)>30"></span>
								  <view class="nsStatus" v-else>即将过期</view>
								</view>
								<view class="nsStatus" v-else>
									<span>已过期</span>
								</view>
							</view>
							<view class="lineTimeBox">
								<span>{{item.carDetailInfo.NextAuditTime}}</span>
								<image class="carUpimg" v-show="item.show2" src="../../static/img/icon_arrow_up.png" mode=""></image>
								<image class="carUpimg" v-show="!item.show2" src="../../static/img/icon_arrow_down.png" mode=""></image>
							</view>
						</view>
						<view class="lineTop2" v-show="item.show2">
							<view class="chaoqi"  v-if="isDateGreater(item.carDetailInfo.NextAuditTime)">
								<span >距离天数：</span>
								{{daysUntilDate(item.carDetailInfo.NextAuditTime)}}天
							</view>
							
							<view class="chaoqi">
								<span v-if="!isDateGreater(item.carDetailInfo.NextAuditTime)">超期天数：{{daysUntilDate(item.carDetailInfo.NextAuditTime)}}天</span>
								
								</view>
								<view>
									<view class="lineBtn" @click.stop="sendChat(item,1)">发送提醒</view>
								</view>
							
						</view>
					</view>
					<view class="lineCont" v-show="item.carDetailInfo.InsuranceExpireDate" @click.stop="carDfn2(item)">
						<view class="lcLine">
							<view class="lineTop1">
								<view class="lineTopNs">
									<view class="nsTxt">保险提醒</view>
									<view   v-if="isDateGreater(item.carDetailInfo.InsuranceExpireDate)">
										<span v-if="daysUntilDate(item.carDetailInfo.InsuranceExpireDate)>30"></span>
										<view class="nsStatus" v-else>即将过期</view>
									</view>
									<view class="nsStatus" v-else>
										<span>已过期</span>
									</view>
								</view>
								<view class="lineTimeBox" v-if="item.carDetailInfo.InsuranceExpireDate">
									<span>{{item.carDetailInfo.InsuranceExpireDate.slice(0,10)}}</span>
									<image class="carUpimg" v-show="item.show3" src="../../static/img/icon_arrow_up.png" mode=""></image>
									<image class="carUpimg" v-show="!item.show3" src="../../static/img/icon_arrow_down.png" mode=""></image>
								</view>
							</view>
							<view v-show="item.show3">
								<view class="carData">
									<view class="carDataLine">交强险到期：{{item.carDetailInfo.CompulsoryInsuranceTime}}</view>
									<view class="carDataLine">商业险到期：{{item.carDetailInfo.CommercialInsuranceTime}}</view>
								</view>
								<view class="carnotes">保险公司：{{item.carDetailInfo.inscName}}</view>
								<view class="lineTop2">
									<view class="chaoqi"  v-if="isDateGreater(item.carDetailInfo.InsuranceExpireDate)">
										<span >距离天数：</span>
										{{daysUntilDate(item.carDetailInfo.InsuranceExpireDate)}}天
									</view>
									<view class="chaoqi"  v-if="!isDateGreater(item.carDetailInfo.InsuranceExpireDate)">
										<span >超期天数：</span>
										{{daysUntilDate(item.carDetailInfo.InsuranceExpireDate)}}天
									</view>
									<view>
										<view class="lineBtn" @click.stop="sendChat(item,2)">发送提醒</view>
									</view>
								</view>
							</view>
							
						</view>
						
					</view>
				</view>
				
				<!-- 提醒商机 -->
				<view class="line" v-if="false">
					<view class="lineTop">
						<view class="lineTop1">
							<view class="lineTopNs">
								<view class="nsTxt">提醒商机</view>
								
							</view>
							<view class="lineTimeBox">
								<span style="color: #FF0000;">2条</span>
								<image class="carUpimg" src="../../static/img/icon_arrow_up.png" mode=""></image>
							</view>
						</view>
					
					</view>
					<view class="lineCont">
						<view class="lcLine">
							<view class="lineTop1">
								<view class="lineTopNs">
									<view class="nsTxt">提醒类别：机油滤清器</view>
								</view>
							</view>
							<view class="carData">
								<view class="carDataLine">下次服务日期：2024-02-12</view>
								<view class="carDataLine">下次服务里程：93843km</view>
							</view>
							<view class="carnotes">上次到店：2022-01-21</view>
							<view class="lineTop2">
								<view class="chaoqi">超期天数：</view>
								<view>
									<view class="lineBtn">发送提醒</view>
								</view>
							</view>
						</view>
						<view class="lcLine">
							<view class="lineTop1">
								<view class="lineTopNs">
									<view class="nsTxt">保养提醒</view>
								</view>
							</view>
							<view class="carData">
								<view class="carDataLine">下次服务日期：2024-02-12</view>
								<view class="carDataLine">下次服务里程：93843km</view>
							</view>
							<view class="carnotes">上次到店：2022-01-21</view>
							<view class="lineTop2">
								<view class="chaoqi">超期天数：10</view>
								<view>
									<view class="lineBtn">发送提醒</view>
								</view>
							</view>
						</view>
						
					</view>
				</view>
				<!-- 提醒商机 -->
				<!-- 检测异常商机 -->
				<view class="line" v-if="false">
					<view class="lineTop">
						<view class="lineTop1">
							<view class="lineTopNs">
								<view class="nsTxt">检测异常商机</view>
								
							</view>
							<view class="lineTimeBox">
								<span style="color: #FF0000;">2条</span>
								<image class="carUpimg" src="../../static/img/icon_arrow_up.png" mode=""></image>
							</view>
						</view>
					
					</view>
					<view class="lineCont">
						<view class="lcLine">
							<view class="lineTop1">
								<view class="lineTopNs">
									<view class="nsTxt">检测异常商机</view>
								</view>
							</view>
							
							<view class="carData">
								<view class="carDataLine">下次服务日期：2024-02-12</view>
								<view class="carDataLine" style="color: #FF0000;">距离天数：10</view>
							</view>
							<view class="carnotes">检测结果：长了换行1</view>
							<view class="carData" style="padding-top: 16rpx;">
								<view class="carDataLine">检测日期：2024-02-12</view>
								<view class="carDataLine" >检测里程：9383km</view>
							</view>
							<view class="carnotes">检测门店：这是门店名称长了换行展示1</view>
							<view class="lineTop2">
								<view class="chaoqi"></view>
								<view class="lineBtn">发送提醒</view>
							</view>
						</view>
					
						
					</view>
				</view>
				<!-- 检测异常商机 -->
			</view>
			
		</view>
	
		
		<view style="height: 40rpx;background-color: #fff;"></view>
		
	</view>
</template>

<script>
	export default {
		props:['token'],
		data() {
			return {
				carList:[],
				carInfo:'',
				nodataShow:false
			}
		},
		onLoad() {

		},
		computed: {
		    // 计算属性来判断日期是否大于当前日期
		    isDateGreater() {
				 return (val)=>{
					 const currentDate = new Date();
					 const compareDate = new Date(val);
					 			
					 return compareDate > currentDate;
				 }
		     
		    },
			daysUntilDate() {
				 return (val)=>{
				      const today = new Date();
				      const specificDate = new Date(val);
					  
				      const diffTime = Math.abs(today - specificDate);
					  var time=diffTime / (1000 * 60 * 60 * 24);
				      return parseInt(time);
				}
				 
			}
		  },
		methods: {
		   sendChat(item,num){
			   /* 保险：InsuranceExpireDate
未过期：您的爱车桂A2AQ02车险到期时间为2022-12-04，还有26天即将到期，请及时续保~
过期：您的爱车桂A2AQ02车险已于2022-11-05到期了，为了不影响车辆使用，请及时续保~
年审：NextAuditTime
未过期：您的爱车桂A2AQ02年审到期时间为2022-12-04，还有26天即将到期，请及时处理~
过期：您的爱车桂A2AQ02年审已于2022-11-05到期了，为了不影响车辆使用，请及时处理~*/
               var txt='';
               if(num==1){
				    var state= this.isDateGreater(item.carDetailInfo.NextAuditTime)
					var day= this.daysUntilDate(item.carDetailInfo.NextAuditTime)
					if(state){
						if(day>30){
							txt='您的爱车'+item.PlateNumber+'年审到期时间为'+item.carDetailInfo.NextAuditTime+'，还有'+day+'天到期，请及时续保~'
						}else{
							txt='您的爱车'+item.PlateNumber+'年审到期时间为'+item.carDetailInfo.NextAuditTime+'，还有'+day+'天即将到期，请及时续保~'
						}
						
					}else{
						txt='您的爱车'+item.PlateNumber+'年审已于'+item.carDetailInfo.NextAuditTime+'过期，为了不影响车辆使用，请及时续保~'
					}
			   }
			   if(num==2){ //保险
			   		var state= this.isDateGreater(item.carDetailInfo.InsuranceExpireDate)
			   		var day= this.daysUntilDate(item.carDetailInfo.InsuranceExpireDate)
			   		if(state){
						if(day>30){
							txt='您的爱车'+item.PlateNumber+'车险到期时间为'+item.carDetailInfo.InsuranceExpireDate.slice(0,10)+'，还有'+day+'天到期，请及时续保~'
						}else{
							txt='您的爱车'+item.PlateNumber+'车险到期时间为'+item.carDetailInfo.InsuranceExpireDate.slice(0,10)+'，还有'+day+'天即将到期，请及时续保~'
						}
			   			
			   		}else{
			   			txt='您的爱车'+item.PlateNumber+'车险已于'+item.carDetailInfo.InsuranceExpireDate.slice(0,10)+'过期，为了不影响车辆使用，请及时续保~'
			   		}		   
			   }
			   console.log(txt)
			 /* uni.showToast({
			  	title: txt,
			  	icon: 'none',
			  	duration: 3000
			   }); */
			  
			//console.log(this.isDateGreater(item.NextAuditTime))   
			  // if(item.)
			   
			   
			   this.$wx.invoke('sendChatMessage', {
			    msgtype:"text", //消息类型，必填
			   	enterChat: true, //为true时表示发送完成之后顺便进入会话，仅移动端3.1.10及以上版本支持该字段
			   	text: {
			   		content:txt, //文本内容
			   	},
			   /* news:
			   	{
			   		link: "http://qw.66km.com.cn", //H5消息页面url 必填
			   		title: "2", //H5消息标题
			   		desc: "23", //H5消息摘要
			   		imgUrl: "", //H5消息封面图片URL
			   	}, */
			   
			   }, function(res) {
			   	if (res.err_msg == 'sendChatMessage:ok') {
			   		//发送成功
			   	}else{
					/* uni.showToast({
						title: '发送失败',
						icon: 'none',
						duration: 3000
					 }); */
				}
			   })
		   },
		   carlineFn(item){
			   item.show=!item.show
		   },
		   carDfn2(item){
			    item.show3=!item.show3
		   },
		   carDfn1(item){
		   		 item.show2=!item.show2	   
		   },
           getdata(){
			   this.extCarInfo()
			  /* var that=this;
			   	this.$http('enterprise/wechat/extCustomerInfo', {
			   	   corpID:'wpMGjbBgAA_zIu6wbKy48zFSbGiGeP8g',
			   	   extUserId:'wmMGjbBgAA0JAbGD5Vu8BzEuYgZhvhOA',
			   	   token:this.token
			   	}, 'GET').then(res => {
			   	    this.carList=res.data.data.map
			   	}) */
			   
		   },
		   extCarInfo(item){
			 
			   var that=this;
			    this.customerId=uni.getStorageSync('customerId')
				if(!this.customerId){
					this.nodataShow=true
				}else{
					uni.showLoading({
					 	title: '加载中'
					}); 
					this.$http('enterprise/wechat/extCarInfo', {
					   id:this.customerId,
					  
					   //token:this.token
					}, 'GET').then(res => {
						uni.hideLoading();
						res.data.forEach(item=>{
							item.show=false
							item.show2=false
							item.show3=false
						})
					    this.carList=res.data
					})
				}
			   
		   }
		}
	}
</script>

<style scoped>
	.carTop{
		background: #fff;
		padding: 24rpx;
		/* padding-top: 0; */
	}
	.carCont{
		/* height: 305rpx; */
		background: linear-gradient( 180deg, #FFE9DB 0%, #FFF2EB 48%, #FFF8F4 100%);
		border-radius: 10rpx;
		padding-bottom: 20rpx;
		/* opacity: 0.7; */
	}
	.carCont .carData{
		padding-top: 20rpx;
	}
	.carLogo{
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
	}
	.carUpimg{
		width: 26rpx;height: 16rpx;
	}
	.carModel{
		display: flex;
		padding-top: 24rpx;
		padding-left: 24rpx;
	}
	.carModelCont{
		width: 540rpx;
		padding-left: 12rpx;
	}
	.carMcTop{
		display: flex;
	}
	.plateNumber{
		font-weight: 500;
		font-size: 30rpx;
		color: #3C3C3C;
		line-height: 42rpx;
	}
	.carTime{
		height: 36rpx;
		background: #FF842D;
		border-radius: 4rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 38rpx;
		padding: 0 10rpx;
		margin-left: 10rpx;
	}
	.carA{
		height: 36rpx;
		background: #FFE26C;
		border-radius: 4rpx;
		font-size: 24rpx;
		color: #2A2623;
		line-height: 38rpx;
		padding: 0 10rpx;
		margin-left: 10rpx;
	}
	.carMcTxt{
		font-size: 24rpx;
		color: #666666;
		padding-top: 12rpx;
		
		  white-space: nowrap; /* 不换行 */
		  overflow: hidden; /* 隐藏超出的内容 */
		  text-overflow: ellipsis; /* 用省略号表示被隐藏的部分 */
		  width: 560rpx; /* 设置最大宽度以限制文本的显示长度 */
		

	}
	.carTitleBox{
		display: flex;padding-top: 12rpx;flex-wrap: wrap;
		
	}
	.carTitle{
		/* height: 36rpx; */
		border-radius: 4rpx;
		border: 1px solid #FF8113;
	/* 	line-height: 34rpx; */
		font-size: 24rpx;
		color: #FF8113;
		padding: 2rpx 8rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
	}
	.carModel{
		border-bottom: 1px solid #EFDFD6;
		padding-bottom: 20rpx;
	}
	.carData{
		display: flex;
		justify-content: space-between;
		font-size: 26rpx;
		color: #666666;
	/* 	padding-top: 18rpx; */
		line-height: 33rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}
	.carnotes{
		font-size: 26rpx;
		color: #666666;
		padding-top: 18rpx;
		line-height: 33rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}
	.box{
		padding: 0 24rpx;
	}
	.line{
		background: #fff;margin-top: 20rpx;
		border-radius: 10rpx;
	}
	.lineTop{
		padding: 30rpx 22rpx 0rpx 22rpx;
	}
	.lineTop1{
		display: flex;justify-content: space-between;
		padding-bottom: 20rpx;
	}
	.lineTopNs{
		display: flex;
	}
	.nsTxt{
		font-size: 30rpx;
		color: #3C3C3C;
		line-height: 36rpx;
		font-weight: 600;
	}
	.nsStatus{
		font-size: 24rpx;
		color: #FF0000;
		height: 36rpx;
		background: #FFF1F1;
		border-radius: 4rpx;
		line-height: 38rpx;
		padding: 0 10rpx;
		margin-left: 20rpx;
	}
	.lineTimeBox{
		line-height: 36rpx;color: #3C3C3C;display: flex;
	}
	.carUpimg{
		margin-left: 20rpx;margin-top: 8rpx;
	}
	.lineTop2{
		display: flex;justify-content: space-between;
	    padding-bottom: 20rpx; 
		margin-top: 4rpx;
	}
	.lineBtn{
		/* height: 52rpx; */
		border-radius: 28rpx;
		border: 1px solid #DDDDDD;
		/* line-height: 56rpx; */
		padding: 10rpx 20rpx;
		font-size: 26rpx;
		color: #3C3C3C;
	}
	.chaoqi{
		line-height: 56rpx;font-size: 26rpx;
color: #FF0000;
	}
	.lineCont{
		
	}
	.lcLine{
		padding: 24rpx 20rpx 0 20rpx;
		border-top: 1px solid #EEEEEE;
		/* padding-bottom: 20rpx; */
	}
	.lcLine .carData{
		padding-left: 0;padding-right: 0;
	}
	.lcLine .carnotes{
		padding-left: 0;padding-right: 0;
	}
	.nodataImg{
	  width: 400rpx;
	  padding-top: 100rpx;
	}
	.noTxt{
		font-size: 32rpx;
		color: #999999;
		padding-top: 50rpx;
	}
	.nodataBox{
		text-align: center;
		background: #fff;
	}
	.carLine{
		margin-bottom: 20rpx;
	}
</style>