wxThird/pages/subPack/maintain.vue

<template>
<view class="box">
 <view class="top" :style="{background:'#'+themeColor}">
	 <view class="inputBox">
		 <view class="ibLeft" @click="goCkcar">
			<image class="ibCarIcon" v-if="carInfo.brandLogo" :src="carInfo.brandLogo" mode=""></image>
			 <image class="ibCarIcon" v-else src="../../static/timg/nocar.png" mode=""></image>
			 <view class="ibCarBox">
				 <view class="ibCar">{{carInfo.brand?carInfo.brand:''}}&nbsp;{{carInfo.series?carInfo.series:''}}</view>
				 <image src="../../static/img2/xia.png" mode="" class="xiaIcon"></image>
			 </view>
		 </view>
		 <view class="ibRight">
			 <image src="../../static/img2/gl.png" mode="" class="glIcon"></image>
			 <input type="text" placeholder="暂无填写" class="glInput"/>
			 <image src="../../static/img2/xia.png" mode="" class="xiaIcon"></image>
		 </view>
	 </view>
	 <view class="msBox">
		 <view class="msLine">
			 <image class="msIcon" src="../../static/img2/zp.png" mode=""></image>
			 <view class="msTxt">正品保障</view>
		 </view>
		 <view class="msLine">
			 <image class="msIcon" src="../../static/img2/jp.png" mode=""></image>
			 <view class="msTxt">精准适配</view>
		 </view>
		 <view class="msLine">
			 <image class="msIcon" src="../../static/img2/shwy.png" mode=""></image>
			 <view class="msTxt">售后无忧</view>
		 </view>
		 <view class="msLine">
			 <image class="msIcon" src="../../static/img2/zyfw.png" mode=""></image>
			 <view class="msTxt">专业服务</view>
		 </view>
	 </view>
 </view>
 
 <!-- 适配推荐	-->
 <view class="spBox">
		 <view class="spTop">
		 		 <view class="spTitle">适配推荐</view>
		 		 <view class="spMs">
		 			 <span>保养记录</span>
		 			 <span style="padding: 0 10rpx;">  | </span>
		 			 <span>保养手册</span>
		 		 </view>
		 </view>
		 <view class="znBox">
			 <view class="znCont">
				 <view class="znCar">智能推荐-{{carInfo.brand?carInfo.brand:''}}&nbsp;{{carInfo.series?carInfo.series:''}}</view>
				 <view>
					 <image class="hxIcon" src="../../static/img2/hx.png" mode=""></image>
				 </view>
				 <view class="znMs">超期不保养,会影响汽车性能!</view>
			
			 </view>
		 </view>
		 <!-- 套餐-->
		 <view class="lineBox">
			 <view class="line" 
			  @click="goItem(item)" v-for="(item,index) in list">
				 <view class="lineTop">
					 <image class="lineImg" v-if="item.mainImgUrl" :src="item.mainImgUrl" mode=""></image>
					  <image class="lineImg" v-else src="../../static/timg/noimg.png" mode=""></image>
					 <view class="lineNameBox">
						 <view class="goodsName">{{item.title}}</view>
						 <view class="goodsMs">{{item.remarks}}</view>
						 <view class="goodsKbox">
						 	<view class="goosK1" v-if="item.showOilType">{{item.showOilType}}</view>
						 	<view class="goosK2" v-if="item.showOilLevel">{{item.showOilLevel}}</view>
						 	<view class="goosK2" v-if="item.showFit">{{item.showFit}}</view> 
						 </view>
						 <view class="bfb">有91.4%的车主选择本商品</view>
					 </view>
				 </view>
				 <view class="tcBox">
					
					 <view class="tcLine" :class="{lineActive:v.select}"
					 @click.stop="selectItem(v,item)" v-for="(v,i) in item.packageItems">
						 <view class="tcTitle">
							 <view class="tcName">{{v.title}}</view>
							 <view class="tcNameTs" v-if="v.count>1">{{v.count}}次更划算</view>
						 </view>
						 <view class="tcprice">
							 <span class="tcSpan1">¥</span>
							 <span class="tcSpan2">{{v.price}}</span>
							 <span class="tcSpan3">/次</span>
							 <span class="tcSpan3" style="padding-left: 10rpx;">¥{{v.money}}</span>
							<!-- <span class="tcSpan3" style="padding-left: 10rpx;">2次</span>
							 <span class="tcSpan1">¥588</span> -->
						 </view>
					 </view>
				 </view>
			 </view>
		 </view>
	 
	 <view style="height: 220rpx;"></view>
 </view>
 
 <view class="bottom">
 	<view class="kaBox">
		<view class="ka">
			<view class="kaLeft">
				<image class="vipIcon" src="../../static/img2/vip.png" mode=""></image>
				<view class="kaMS">开通权益卡 可享受更多优惠服务</view>
			</view>
			<view class="kaRight">去开卡></view>
		</view>
	</view>
	<view class="bottomView">
		<view class="bLeft" @click="qingdan">
			<view class="bLeftImgBox">
				<image class="qingdanIcon" src="../../static/img2/qingdan.png" mode=""></image>
				<view class="qdTxt">清单</view>
				<view class="qdNum" v-if="qdNum">{{qdNum}}</view>
			</view>
			<view>
				<view class="bottomprice">
					<span class="bSpan1">￥</span>
					<span class="bSpan2">{{totalPrice}}</span>
				</view>
				<view class="byh">
					<span class="bspan3">已优惠</span>
					<span class="bspan4"> ¥0</span>
				</view>
			</view>
		</view>
		<view class="bottomBtn commonBtn"  @click="goSubmit">立即购买</view>
	</view>
 </view>
 <!-- 提交订单弹框-->
 <view class="tkBox" v-if="tkShow">
	 <view class="tkCont">
		 <view class="tkTop">
			 
			 <image class="tkImg" v-if="itemDefault.mainImgUrl" :src="itemDefault.mainImgUrl" mode=""></image>
			 <image class="tkImg" v-else src="../../static/timg/noimg.png" mode=""></image>
			 <view class="tkNameBox">
				 <view class="tkName">{{itemDefault.goodsname}}</view>
				 <view class="goodsPrice">
				 	<view class="goodsPrice2">￥</view>
				 	<view class="goodsPrice3">{{itemDefault.money}}</view>
				 	<view class="goodsPrice4" >原价：¥{{itemDefault.crossedPrice}}</view>
				 </view>
				 
			 </view>
			 <image @click="qdTkclose" class="chahao" src="../../static/img2/chahao.png" mode=""></image>
		 </view>
		 <view class="buyLine">
		 		 <view class="buyTitle">商品规格</view>
		 		 <view class="buyData">
		 				 <view class="goodsGuige activeGuige" style="margin-right: 24rpx;">{{itemDefault.title}}</view>
		 				<!-- <view class="goodsGuige">保养套餐卡</view> -->
		 			 </view>
		 </view>
		 <view class="buyLine">
		 		 <view class="buyTitle">商品数量</view>
		 		 <view class="buyData">
		 				 <view class="numJsbox">
		 				 	<view class="numJj" @click="calculation(1)">-</view>
		 				 	<view class="goodsnum">
		 				 	 <input type="number" value="" v-model="goodsnum" class="goodsnumInput"/>
		 				 	</view>
		 				 	<view class="numJj" @click="calculation(2)">+</view>
		 				 </view>
		 			 </view>
		 </view>
		 
		 <view class="tkBottom">
			 <view class="tkBottomBtn commonBtn" @click="goSubmit">立即购买</view>
		 </view>
		 
	 </view>
 </view>
 
 
 
 <!-- 提交订单弹框-->
</view>
</template>

<script>
	export default {
		components: {
			
		},
		
		data() {
			return {
				themeColor:'',
				ext:'',
				goodsnum:1,
				tkShow:false,
				carInfo:'',
				list:[],
				totalPrice:0,
				itemDefault:'',
				lineItem:'',
				maintainProjectID:'',
				qdNum:'',
			}
		},
		onLoad(opt) {
			this.ext = this.$common.getExtStoreId();
			this.themeColor = uni.getStorageSync("themeColor");
			uni.setNavigationBarColor({
				frontColor: "#000000",
				backgroundColor: '#' + this.themeColor
			})
			this.carInfo=this.$store.state.carInfo;
			console.log(this.carInfo)
			this.maintainProjectID=opt.maintainProjectID
			if(this.carInfo){
				this.getRecommend()
			}else{
				uni.showToast({
					 title: '请先添加车辆',
					 icon:'none',
					 duration: 3000
				});
			}
			
			
		},
		onShow() {
			var car =uni.getStorageSync("byCar")
			if(car){
				this.carInfo=car;
				this.getRecommend()
			}
		},
		methods: {
			qingdan(){
				this.tkShow=true;
			},
			qdTkclose(){
			  this.tkShow=false	
			},
			selectItem(v,item){
				this.list.forEach(item=>{
					item.packageItems.forEach(v=>{
						v.select=false
					})
				})
			  v.select=true
			  this.totalPrice=v.money
			  this.itemDefault=v
			  this.lineItem=item
			  this.qdNum=1
			  this.itemDefault.goodsname=this.lineItem.title
			  this.itemDefault.itemId=this.lineItem.id
			  this.itemDefault.mainImgUrl=this.lineItem.mainImgUrl
			  
			},
			goCkcar(){
				uni.navigateTo({
					url:'../user/addCar/cailist?type=5'
				})
			},
			goItem(item){
			  uni.removeStorageSync('byCar');
			  uni.navigateTo({
			  	url:'maintainItem?maintainId='+item.id+'&isRecommend='+item.isRecommend
			  })	
			},
			goSubmit(){
				if(this.itemDefault){
					this.itemDefault.goodsnum=this.goodsnum
					this.itemDefault.goodsname=this.lineItem.title
					this.itemDefault.itemId=this.lineItem.id
					this.itemDefault.mainImgUrl=this.lineItem.mainImgUrl
					uni.setStorage({
						key: 'itemDefault',
						data: this.itemDefault,
						 success: function () {
						    uni.navigateTo({
						    	url:'maintainSubmit'
						    })
						 }
					}); 
				}else{
					uni.showToast({
						 title: '请选择商品规格',
						 icon:'none',
						 duration: 3000
					});
				}
				
			},
			getRecommend(){
				uni.showLoading({
					title: '加载中'
				})
				this.$http('open-apply/get-recommend', {
				    carId:this.carInfo.id,
					bizId:this.maintainProjectID
				}, 'GET').then(res => {
					uni.hideLoading();
					res.data.data.forEach(item=>{
						item.packageItems.forEach(v=>{
							v.select=false
						})
					})
					this.list=res.data.data
					//this.list=this.list.concat(this.list)
				
				})
			},
			calculation(type){
				if(type==1){
					if(this.goodsnum>1){
						this.goodsnum--
					}
				}else{
					console.log("+++")
						this.goodsnum++
				}
			},
			
			
			
		}
	}
</script>

<style scoped lang="less">
.box {
	width: 100vw;
	min-height: 100vh;
	background: #F4F4F4;
}
.tkBox{
	width: 100vw;height: 100vh;background: rgba(0,0,0,0.5);
	position: fixed;left: 0;top: 0;
}
.tkCont{
	width: 750rpx;
	height: 611rpx;
	background: #FFFFFF;
	border-radius: 28rpx 28rpx 0rpx 0rpx;
	position: absolute;
	left: 0;bottom: 0;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}
.top{
	height: 170rpx;
	padding: 40rpx 24rpx;
}
.inputBox{
	background: rgba(255,255,255,0.5);
	border-radius: 38rpx;line-height: 42rpx;
	border: 2rpx solid #FFFFFF;
	padding: 18rpx 30rpx;font-size: 26rpx;color: #222222;
	display: flex;justify-content: space-between;
}
.xiaIcon{
	width: 12rpx;height: 9rpx;margin-top: 18rpx;margin-left: 10rpx;
}
.ibCarIcon{
	height: 42rpx;width: 42rpx;
}
.glIcon{
	width: 34rpx;height: 34rpx;margin-top: 6rpx;
}
.ibLeft{
	display: flex;
}
.ibRight{
	display: flex;
}
.ibCarBox{
	display: flex;padding-left: 10rpx;
}
.glInput{
	width: 120rpx;line-height: 42rpx;height: 42rpx;
	padding-left: 10rpx;
}
.msIcon{
	width: 20rpx;height: 20rpx;margin-top: 4rpx;
}
.msTxt{
	font-weight: 500;margin-left: 12rpx;
	font-size: 20rpx;
	color: #A77102;
}
.msLine{
	display: flex;line-height: 28rpx;
}
.msBox{
	display: flex;justify-content: space-between;padding-top: 24rpx;
	padding-left: 30rpx;padding-right: 30rpx;
}
.spBox{
	background: linear-gradient( 180deg, #FFFFFF 0%, #F4F4F4 50%);
	border-radius: 23rpx;
	padding: 24rpx 20rpx 0 24rpx;
	margin-top: -50rpx;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}
.spTop{
	display: flex;justify-content: space-between;line-height: 40rpx;
	padding-bottom: 16rpx;
}
.spTitle{
	font-weight: 500;
	font-size: 28rpx;
	color: #222222;
}
.spMs{
	font-size: 24rpx;
	color: #666666;
}
.znBox{
	height: 200rpx;
	background: #FDC856;
	border-radius: 21rpx;
}
.znCont{
	background: url('http://dmsphoto.66km.com.cn/thFiles/A88B34CF-1BEB-4E0F-8C0B-E6FD2C858B73.png') no-repeat;
	background-size: 100% 100%;
	height: 148rpx;
}
.hxIcon{
	height: 4rpx;width: 360rpx;
	margin-left: 18rpx;margin-top: 20rpx;
    display: block;
}
.znMs{
	font-size: 24rpx;
	color: #FFFFFF;
	line-height: 33rpx;
	padding-left: 18rpx;padding-top: 16rpx;
}
.znCar{
	font-weight: 500;padding-left: 18rpx;
	font-size: 32rpx;padding-top: 24rpx;
	color: #8C5E24;
	line-height: 45rpx;
}
.line{
	background: #FFFFFF;padding: 24rpx;
	border-radius: 16rpx;margin-bottom: 20rpx;
	padding-bottom: 4rpx;
}
.lineImg{
	width: 162rpx;
	height: 162rpx;
	border-radius: 16rpx;
}
.lineTop{
	display: flex;
}
.lineBox{
	margin-top: -52rpx;
}
.goodsKbox{
	display: flex;flex-wrap: wrap;
}
.goosK1 {
	height: 25rpx;line-height: 25rpx;padding: 0 8rpx;
	border: 1rpx solid #EC0F0A;font-size: 18rpx;
color: #EC0F0A;margin-right: 10rpx;
}
.goosK2{
	height: 25rpx;line-height: 25rpx;padding: 0 8rpx;color: #000000;
	border: 1rpx solid #FCD903;font-size: 18rpx;
}
.goodsName{
	font-weight: 500;
	font-size: 28rpx;
	color: #222222;
	line-height: 40rpx;
}
.goodsMs{
	font-weight: 400;padding-top: 5rpx;
	font-size: 20rpx;padding-bottom: 10rpx;
	color: #8B8B8B;
	line-height: 28rpx;
}
.bfb{
	font-size: 20rpx;padding-top: 10rpx;
	color: #FFD804;
	line-height: 28rpx;
}
.lineNameBox{
	padding-left: 20rpx;    width: 500rpx;
}
.tcLine{
	background: #F5F5F5;
	border-radius: 14rpx;
	border: 1px solid #E0E0E0;
	width: 316rpx;
	height: 138rpx;
	    margin-bottom: 20rpx;
}
.tcName{
	font-weight: 500;
	font-size: 28rpx;
	color: #435B6E;
	line-height: 40rpx;
	padding-left: 25rpx;padding-top: 24rpx;
	white-space: nowrap;      /* 确保文本在一行内显示 */
	  overflow: hidden;         /* 超出容器部分隐藏 */
	  text-overflow: ellipsis;
	  max-width: 170rpx;
}
.tcTitle{
	display: flex;
}
.tcprice{
	padding-top: 4rpx;font-size: 20rpx;
color: #666666;padding-left: 25rpx;
}
.tcSpan2{
	font-size: 34rpx;
	color: #000000;
}
.tcSpan3{
	font-size: 20rpx;
	color: #000000;
}
.tcNameTs{
	width: 99rpx;margin-top: 30rpx;margin-left: 10rpx;
	height: 25rpx;
	background: #FE0200;
	text-align: center;
	line-height: 26rpx;
	font-size: 18rpx;
	color: #FFFFFF;
}
.tcBox{
	display: flex;justify-content: space-between;
	padding-top: 26rpx;flex-wrap: wrap;
}
.bottom{
	width: 100%;
	height: 186rpx;
	position: fixed;
	bottom: 0rpx;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	background: #FFFFFF;
}
.kaBox{
	height: 70rpx;
}
.bottomView{
	background: #FFFFFF;
}
.vipIcon{
	width: 47rpx;height: 45rpx;
}
.ka{
	display: flex;justify-content: space-between;
	background: #FEE0B9;
	padding: 12rpx 20rpx;
}
.kaLeft{
	display: flex;line-height: 45rpx;
}
.kaMS{
	font-size: 22rpx;
	color: #666666;padding-left: 15rpx;
}
.kaRight{
	line-height: 45rpx;font-size: 22rpx;
color: #A26D4F;
}
.bottomBtn{
	width: 223rpx;
	height: 86rpx;
	background: #FCD903;
	border-radius: 43rpx;
	line-height: 86rpx;
	text-align: center;
	font-size: 32rpx;
	color: #110B01;
}
.bottomView{
	display: flex;justify-content: space-between;
	padding: 15rpx 30rpx;
}
.qingdanIcon{
	width: 40rpx;height: 45rpx;
}
.bLeft{
	display: flex;
}
.bLeftImgBox{
	position: relative;text-align: center;padding-top: 12rpx;
}
.qdNum{
	position: absolute;
	width: 22rpx;
	height: 22rpx;
	background: #EC0F0A;
	text-align: center;line-height: 22rpx;
	font-size: 16rpx;
	color: #FFFFFF;
	top: 0rpx;
	right: -8rpx;
	border-radius: 50%;
}
.qdTxt{
	font-size: 20rpx;
	color: #666666;
	line-height: 28rpx;
}
.bottomprice{
	padding-left: 38rpx;
	font-weight: 600;
	font-size: 20rpx;padding-top: 12rpx;
	color: #EC0F0A;line-height: 45rpx;
}
.byh{
	padding-left: 38rpx;
	font-size: 20rpx;
	color: #666666;
	line-height: 28rpx;
}
.bspan4{
	color: #EC0F0A;
}
.bSpan2{
	font-weight: 500;
	font-size: 34rpx;
	color: #EC0F0A;
	line-height: 45rpx;
}
.goodsPrice{
		display: flex;
}
.goodsPrice1{
	font-size: 24rpx;
	font-weight: 400;
	color: #EC0F0A;
	padding-top: 14rpx;
	padding-right: 14rpx;
}
.goodsPrice2{
	font-size: 28rpx;
	font-weight: 400;
	color: #EC0F0A;
	padding-top: 10rpx;
	
}

.goodsPrice3{
	font-size: 40rpx;
	font-weight: 500;
	color: #EC0F0A;
}
.goodsPrice4{
	font-size: 24rpx;
	font-weight: 400;
	color: #999999;
	padding-top: 14rpx;
/* 	text-decoration:line-through; */
	padding-left: 10rpx;
}
.tkTop{
	display: flex;padding: 40rpx 24rpx;
}
.tkImg{
	width: 160rpx;
	height: 160rpx;border-radius: 13rpx;
}
.tkName{
	font-size: 30rpx;
	color: #222222;
	line-height: 42rpx;
}
.tkNameBox{
	padding-left: 24rpx;width: 500rpx;
}
.chahao{
	width: 22rpx;height: 22rpx;padding-top: 10rpx;
}
.buyLine{
	display: flex;justify-content: space-between;
	padding: 20rpx 24rpx;font-size: 26rpx;
color: #666E80;
}
.buyBOx{
	background: #FFFFFF;margin-top: 20rpx;
	
}
.buyData{
	color: #222222;display: flex;
}
.goodsGuige{
	width: 150rpx;
	height: 50rpx;line-height: 50rpx;
	background: #F6F6F6;
	border-radius: 5rpx;
	font-size: 24rpx;
	color: #222222;text-align: center;
}
.activeGuige{
	width: 146rpx;
	height: 46rpx;line-height: 46rpx;
	border: 2rpx solid #FF0035;
	border-radius: 5rpx;
	font-size: 24rpx;
	color: #FF0035;text-align: center;
}
.numJsbox{
	display: flex;
}
.buyCont{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 750rpx;
	height: 688rpx;
	background: #FFFFFF;
	border-radius: 26rpx 26rpx 0px 0px;
}
.buyNumBox{
	padding: 30rpx;
    padding-top: 10rpx;
	padding-bottom: 70rpx;
}
.buyContCh{
	position: absolute;
	top: 53rpx;
	right: 36rpx;
	width: 36rpx;
	height: 36rpx;
}
.goodsnum{
	width: 44rpx;
	height: 44rpx;
	background: #F4F5F7;
	line-height: 44rpx;
	text-align: center;
	font-weight: 500;
	color: #333333;
	font-size: 24rpx;
	margin: 0 4rpx;
	border-left:1px solid #C0C0C0;
	border-right:1px solid #C0C0C0;
}
.goodsnumInput{
	width: 44rpx;
	height: 44rpx;
	background: #FFFFFF;
	line-height: 44rpx;
	text-align: center;
	font-weight: 500;
	color: #333333;
	font-size: 24rpx;
}
.numJj{
	width: 44rpx;
	height: 44rpx;
	background: #ffffff;
	border-radius: 0px 6rpx 6rpx 0px;	
	text-align: center;
	line-height: 44rpx;
	font-size: 32rpx;
	color: #999999;
}
.numJsbox{
	border: 1px solid #C0C0C0;
	border-radius: 6rpx;
}
.tkBottomBtn{
	width: 661rpx;text-align: center;
	height: 86rpx;line-height: 86rpx;
	/* background: #FCD903; */
	border-radius: 43rpx;
	font-size: 32rpx;
	color: #110B01;
}
.tkBottom{
	width: 750rpx;
	height: 146rpx;
	background: #FFFFFF;
	box-shadow: 0rpx -2rpx 16rpx 0rpx rgba(153,153,153,0.2);
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	display: flex;justify-content: center;align-items: center;
	position: absolute;left: 0;bottom: 0;
}
.lineActive{
	border: 1px solid #FE0200;
	background: #FFF7F7;
}
</style>