weCom/pages/index/car.vue

<template>
	<view class="content">
		<view  class="nodataBox" v-show="nodataShow">
			<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 class="carLine" v-for="(item,index ) in carList" @click="extCarInfo(item)">
			<view class="carTop" >
				<view class="carCont">
					<view class="carModel">
						<image :src="item.BrandLogo" 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>
							<image class="carUpimg" src="../../static/img/icon_arrow_up.png" mode=""></image>
						</view>
					</view>
					<view class="carData">
						<view class="carDataLine">最新里程：{{item.Milage}}km</view>
						<view class="carDataLine">累计消费：{{item.checkoutMoneySum}}</view>
						
					</view>
					<view class="carnotes">车辆备注：{{item.carDetailInfo.Comment}}</view>
				</view>
			</view>
			
			<view class="box">
				<view class="line">
					<view class="lineTop">
						<view class="lineTop1">
							<view class="lineTopNs">
								<view class="nsTxt">年审日期</view>
								<view class="nsStatus" v-if="!isDateGreater(item.carDetailInfo.NextAuditTime)">
								  <span v-if="daysUntilDate(item.carDetailInfo.NextAuditTime)>30">已过期</span>
								  <span v-else>即将过期</span>
								</view>
							</view>
							<view class="lineTimeBox">
								<span>{{item.carDetailInfo.NextAuditTime}}</span>
								<image class="carUpimg" src="../../static/img/icon_arrow_up.png" mode=""></image>
							</view>
						</view>
						<view class="lineTop2">
							<view class="chaoqi">
								<span v-if="!isDateGreater(item.carDetailInfo.NextAuditTime)">超期天数：{{daysUntilDate(item.carDetailInfo.NextAuditTime)}}天</span>
								
								</view>
							<view class="lineBtn">发送提醒</view>
						</view>
					</view>
					<view class="lineCont">
						<view class="lcLine">
							<view class="lineTop1">
								<view class="lineTopNs">
									<view class="nsTxt">保险提醒</view>
									<view class="nsStatus"  v-if="!isDateGreater(item.carDetailInfo.InsuranceExpireDate)">
										<span v-if="daysUntilDate(item.carDetailInfo.InsuranceExpireDate)>30">已过期</span>
										<span v-else>即将过期</span>
									</view>
								</view>
								<view class="lineTimeBox" v-if="item.carDetailInfo.InsuranceExpireDate">
									<span>{{item.carDetailInfo.InsuranceExpireDate.slice(0,10)}}</span>
									<image class="carUpimg" src="../../static/img/icon_arrow_up.png" mode=""></image>
								</view>
							</view>
							<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">距离天数：{{daysUntilDate(item.carDetailInfo.InsuranceExpireDate)}}天</view>
								<view class="lineBtn">发送提醒</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 class="lineBtn">发送提醒</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 class="lineBtn">发送提醒</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>
</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: {
           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{
					this.$http('enterprise/wechat/extCarInfo', {
					   id:this.customerId,
					  
					   //token:this.token
					}, 'GET').then(res => {
					    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;
		opacity: 0.7;
	}
	.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: 36rpx;
		padding: 0 10rpx;
		margin-left: 20rpx;
	}
	.carA{
		height: 36rpx;
		background: #FFE26C;
		border-radius: 4rpx;
		font-size: 24rpx;
		color: #2A2623;
		line-height: 36rpx;
		padding: 0 10rpx;
		margin-left: 20rpx;
	}
	.carMcTxt{
		font-size: 24rpx;
		color: #666666;
		padding-top: 16rpx;
		
		  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: 0 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: 24rpx;
		color: #666666;
	/* 	padding-top: 18rpx; */
		line-height: 33rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}
	.carnotes{
		font-size: 24rpx;
		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;
	}
	.lineTop1{
		display: flex;justify-content: space-between;
		padding-bottom: 20rpx;
	}
	.lineTopNs{
		display: flex;
	}
	.nsTxt{
		font-size: 28rpx;
		color: #3C3C3C;
		line-height: 36rpx;
	}
	.nsStatus{
		font-size: 24rpx;
		color: #FF0000;
		height: 36rpx;
		background: #FFF1F1;
		border-radius: 4rpx;
		line-height: 36rpx;
		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: 30rpx; */
	}
	.lineBtn{
		height: 52rpx;
		border-radius: 28rpx;
		border: 1rpx solid #DDDDDD;
		line-height: 52rpx;
		padding: 0 20rpx;
		font-size: 24rpx;
		color: #3C3C3C;
	}
	.chaoqi{
		line-height: 56rpx;font-size: 24rpx;
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;
	}
	.carLine{
		margin-bottom: 20rpx;
	}
</style>