txCar/pages/module/maintain.vue

<template>
	<view>
		<view class="top">
			<view class="topLeft">
				<image :src="maintainCarData.brandLogo" mode="" class="brandLogo"></image>
				<view class="carName">{{maintainCarData.brand}}-{{maintainCarData.series}}</view>
				<image src="../../static/img/icon_edit.png" mode="" class="topEdit" @click="carEdit"></image>
			</view>
			<view class="topRight">
				<input type="number" v-model="maintainCarData.milage" @confirm="milageEditconfirm" value="" placeholder="请输入当前里程" class="topInput" placeholder-style="color:#ffffff;"/>
				<image src="../../static/img/icon_edit.png" mode="" class="topEdit" @click="milageEdit"></image>
			</view>
		</view>
		<!-- 保养推荐 -->
		<view class="maintainrecommend">
			<view class="recommendTxt">保养推荐</view>
			<view class="manual" @click="handbook">保养手册</view>
		</view>
		<!--主体  -->
		<view class="main">
			<view class="mainLeft">
				<scroll-view scroll-y="true" class="mainscrollView">
					<view class="mainLeftLine" v-for="(item,index) in mealData" :class="{lineLeftActive:leftIndex==index}"
					 @click="leftClick(item,index)">
						<span>{{item.name}}</span> 
						<view class="lineNum" v-show="item.num!=0">{{item.num}}</view>
					</view>
				</scroll-view>
			</view>
			<view class="mainRight">
				<scroll-view scroll-y="true" class="mainscrollView">
					<view v-show="mealData[leftIndex].listPackage.length==0">
						<view  class="nodataBox">
							<image src="../../static/img/nodata.png" mode="widthFix" class="nodataImg"></image>
							<view class="noTxt">暂无数据</view>
						</view>
					</view>
					<view class="mainRightLine" v-for="(item,index) in mealData[leftIndex].listPackage">
						<view class="contTop">
							<view class="contTopLeft">
								<view class="listPackgeName"> {{item.name}} </view>
								<view class="listPackgeMs">10000公里(或6个月)/次 | 机油参考用量4L</view>
							</view>
							<view class="contTopRight" @click="listcheck(item)">
								<image src="../../static/img/login_icon_checked.png" mode="" class="imgPrivacy" v-show="item.planItem"></image>
								<image src="../../static/img/login_icon_uncheck.png" mode="" class="imgPrivacy" v-show="!item.planItem"></image>
								<!-- <view class="nock" v-show="!item.check"></view> -->
							</view>
						</view>
						<view class="contZk">
							<view class="contZkMain" v-show="item.planItem">
								<view  v-for="(vf,findex) in item.listGoodsAll">
									<view class="goodsItemLIne" v-for="(v,i) in vf" v-if="i==0" @click="goGoods(v)">
										<image :src="v.picUrl" mode="" class="goodsImg" v-if="v.picUrl"></image>
										<image src="../../static/img/noimg.png" mode="" class="goodsImg sm" v-else></image> 
										<view class="goodsCont">
											<view class="goodsContTop">
												<view class="goodsItemName">{{v.goodsName}}</view>
												<view class="replace" @click.stop="replace(vf,index,findex,i)" v-if="vf.length>1">更换</view>
											</view>
											<view class="goodsCOntBOttom">
												<view class="salePrice">￥{{v.salePrice}}</view>
												<view class="as">
													<view class="asa" @click.stop="reduce(v)">-</view>
													<view class="asNum">{{v.qty}}</view>
													<view class="asa" @click.stop="plus(v)">+</view>
												</view>
											</view>
										</view>
										
									</view>
								
								</view>
								<view class="goodsItemLIne" v-for="(v,i) in item.listItem">
									 <image :src="v.picUrl" mode="" class="goodsImg" v-if="v.picUrl"></image>
									 <image src="../../static/img/noimg.png" mode="" class="goodsImg sm" v-else></image>
									<view class="goodsCont">
										<view class="goodsContTop">
											<view class="goodsItemName">{{v.itemName}}</view>
										</view>
										<view class="goodsCOntBOttom">
											<view class="salePrice">￥{{v.salePrice}}</view>
											<view class="itemNum">x1</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					
				</scroll-view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="bottom">
			<view class="bottomLeft">
				<view class="caidan" @click="caidanClick">
					<image src="../../static/img/caidan.png" mode="" class="caidanImg"></image>
					<view class="total" v-show="total>0">{{total}}</view>
				</view>
				<view>
					<view class="heji"> <span class="heji1">合计</span> <span class="hejiNum">￥{{totalhj}}</span> </view>
					<view class="hejiMs">商品￥{{goodsTotal}}+工时费￥{{salePriceTotal}}</view>
				</view>
			</view>
			<view class="settlement" @click="settlement">去结算</view>
		</view>
		
		<view class="caidanTk" v-show="qingdanShow" @click="qingdanShow=false">
			<view class="tkCont">
				<view class="caidanTkTop">
					<view class="tkTopTitle">清单</view>
					<view class="topTopright">
						<view class="empty" @click.stop="empty">清空</view>
						<view class="close" @click="qingdanShow=false">X</view>
					</view>
				</view>
				
				<view class="tkMain">
					<scroll-view scroll-y="true" class="tkMainSv">
						<view class="qingdanLine" v-for="(item,index) in orderData">
							<view class="mainTitle">{{item.name}}</view>
							
							<view class="goodsItem" v-for="(v,i) in item.listGoodsAll">
								<view>
									<image :src="v.picUrl" mode="" class="goodsImg" v-if="v.picUrl"></image>
									<image src="../../static/img/noimg.png" mode="" class="goodsImg " v-else></image>
								</view>
								<view class="goodsItemRight" >
									<view class="goodsItemName">{{v.goodsName}}</view>
									<view class="goodsItemBottom">
										<view class="goodssalePrice">￥{{v.salePrice}}</view>
										<view class="goodsNum">x{{v.qty}}</view>
									</view>
								</view>
							</view>
							<view class="goodsItem" v-for="(v,i) in item.listItem">
								<view>
									<image :src="v.picUrl" mode="" class="goodsImg" v-if="v.picUrl"></image>
									<image src="../../static/img/noimg.png" mode="" class="goodsImg " v-else></image>
								</view>
								<view class="goodsItemRight" >
									<view class="goodsItemName">{{v.itemName}}</view>
									<view class="goodsItemBottom">
										<view class="goodssalePrice">￥{{v.salePrice}}</view>
										<view class="goodsNum">x{{v.qty}}</view>
									</view>
								</view>
							</view>
						</view>
				
					</scroll-view>
				</view>
				
			</view>
			
			
		</view>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			maintainCarData:'',
			shopData:'',
			mealData:'',
			leftIndex:0,
			total:0,
			qingdanShow:false,
			totalhj:0,
			goodsTotal:0,
			salePriceTotal:0,
			orderData:[],
			replaceIndex1:'',
			replaceIndex2:'',
		}
	},
	onLoad() {
		this.$common.isUserId()
        this.maintainCarData=uni.getStorageSync("maintainCarData");
		//console.log(this.maintainCarData)
        this.shopData=uni.getStorageSync("shopData");
		if(this.maintainCarData.milage==0){
			this.maintainCarData.milage='';
		}
        this.getData();
	},
	onShow() {
		var maintainCarData2=uni.getStorageSync("maintainCarData");
		if(this.maintainCarData.id!=maintainCarData2.id){
			this.maintainCarData=maintainCarData2;
			if(this.maintainCarData.milage==0){
				this.maintainCarData.milage='';
			}
			 this.getData();
		}
		var replaceData=uni.getStorageSync("replaceData");
		
		if(replaceData){
			replaceData.qty=1;
			console.log(replaceData)
			this.mealData[this.leftIndex].listPackage[this.replaceIndex1].listGoodsAll[this.replaceIndex2].unshift(replaceData)
			console.log(this.mealData[this.leftIndex].listPackage[this.replaceIndex1].listGoodsAll[this.replaceIndex2])
			
			this.mealData[this.leftIndex].listPackage[this.replaceIndex1].listGoodsAll[this.replaceIndex2]=this.unique(this.mealData[this.leftIndex].listPackage[this.replaceIndex1].listGoodsAll[this.replaceIndex2])
			
			//this.mealData[this.leftIndex].listPackage[this.replaceIndex1].listGoodsAll[this.replaceIndex2]=replaceData
			//this.mealData[this.leftIndex].listPackage[this.replaceIndex1].listGoodsAll[this.replaceIndex2].goodsName='666'
			//console.log(this.mealData[this.leftIndex].listPackage[this.replaceIndex1].listGoodsAll[this.replaceIndex2])
			this.$forceUpdate()
		}
		
	},
	methods: {
		 unique(arr1) {
		  const res = new Map();
		  return arr1.filter((a) => !res.has(a.goodsID) && res.set(a.goodsID, 1))
		},
		milageEditconfirm(){
			this.getData();
			var that=this;
			for(let k in this.maintainCarData){this.maintainCarData[k] = this.maintainCarData[k]==null?'':this.maintainCarData[k]}
			this.$http('miniAppMyBMemberCar/updateMemberCar',this.maintainCarData,'POST').then(res => {
				uni.hideLoading();
					uni.setStorage({
						key: 'maintainCarData',
						data: that.maintainCarData,
						success: function () {
								/* uni.navigateBack({
									delta:1
								}) */
								
					     }
					}); 
				
			})
		},
		leftClick(item,index){
			this.leftIndex=index
		},
		listcheck(item){
			item.planItem=!item.planItem;
			//var 
			this.calculation();
			if(item.planItem){
				/* this.orderData.push(item) */
			}
		},
		goGoods(item){
			uni.navigateTo({
				url:'../goods/goodsDetail?goodsId='+item.mGoodsID+'&type=1'+'&typeIndex=2&maintain=1'
			})
		},
		empty(){
			var that=this;
			uni.showModal({
			    title: '提示',
			    content: '确定要清空清单吗',
			    success: function (res) {
					 if (res.confirm) {
						 that.orderData=[];
						 that.mealData.forEach(item=>{
						 	item.num=0;
						 	if(item.listPackage){
						 		item.listPackage.forEach(v=>{
						 			v.planItem=false
						 		})
						 	}
						 	
						 })
						 console.log(that.mealData)
						 that.calculation();
						  that.qingdanShow=false;
					 }
			       
			    }
			});
			
		},
		calculation(){
			this.total=0;
			this.totalhj=0;
			this.goodsTotal=0;
			this.salePriceTotal=0;
			this.orderData=[]
			this.mealData.forEach(v=>{
				v.num=0;
				if(v.listPackage){
					v.listPackage.forEach(i=>{
						if(i.planItem){
							var obj={
								listGoodsAll:[],
								listItem:'',
								id:i.id
							}
							if(i.listGoodsAll.length>0){
								i.listGoodsAll.forEach((goods,goodsIndex)=>{
									 goods.forEach(sp=>{
									    this.goodsTotal=Number(this.goodsTotal)
										this.goodsTotal+=sp.salePrice*sp.qty
										this.goodsTotal=this.goodsTotal.toFixed(2) 
									}) 
									//goods[0].salePrice=1;
									this.goodsTotal=Number(this.goodsTotal)
									this.goodsTotal+=goods[0].salePrice*goods[0].qty
									this.goodsTotal=this.goodsTotal.toFixed(2)
										obj.listGoodsAll.push(goods[0])
									
								
								})
								
							}
							if(i.listItem.length>0){
								obj.listItem=i.listItem
							}
							this.orderData.push(obj)
							v.num++;
							this.total++;
							
							i.listItem.forEach(xm=>{
								xm.qty=1;
								//xm.salePrice=1;
								this.salePriceTotal=Number(this.salePriceTotal)
								this.salePriceTotal+=xm.salePrice
								this.salePriceTotal=this.salePriceTotal.toFixed(2)
							})
							//this.totalhj
						}
					})
				}
				
				//if(v.listPackage)
			})
			this.totalhj=Number(this.goodsTotal)+Number(this.salePriceTotal)
			this.totalhj=this.totalhj.toFixed(2)
			console.log(this.orderData)
		},
		reduce(v){
			if(v.qty>1){
				v.qty--;
				this.calculation()
			}
		},
		plus(v){
			v.qty++;
			this.calculation()
		},
		getData(){
			uni.showLoading({ });
			var location = uni.getStorageSync("location");
			this.$http('miniApp/tPackageMiniAppController/queryPackageList', {
			   mileage:this.maintainCarData.milage,
			   liyangId:this.maintainCarData.nLevelID,
			   cityCode:location.cityCode,
			   guidePrice:this.maintainCarData.guidePrice,
			 },'GET').then(res => {
				uni.hideLoading();
				this.mealData=res.data;
				this.calculation();
			})
		},
        handbook(){
			uni.navigateTo({
				url:'../car/handbook?mileage'+this.maintainCarData.milage+'&liyangId='+this.maintainCarData.nLevelID
			})
		},
		settlement(){
			console.log(this.orderData)
			//return false;
			 uni.removeStorageSync('couponData');
			if(this.orderData.length>0){
				/* uni.navigateTo({
					url:'confirmOrder?orderData='+JSON.stringify(this.orderData)+'&currentMileage='+this.maintainCarData.milage
				}) */
				uni.navigateTo({
					url:'orderShop?orderData='+JSON.stringify(this.orderData)+'&currentMileage='+this.maintainCarData.milage
				}) 
			}
			
		},
		replace(v,index,i,replaceIndex){
			//v.splice(replaceIndex, 1)
			console.log(v)
			console.log(replaceIndex)
			v.forEach((item,vindex)=>{
				if(replaceIndex==vindex){
					item.showr=false
				}else{
					item.showr=true
				}
			})
			uni.removeStorageSync('replaceData');
			this.replaceIndex1=index;
			this.replaceIndex2=i;
			uni.setStorage({
				key: 'replaceDataList',
				data: v,
				success: function () {
					uni.navigateTo({
						url:'replaceGoods'
					})
				}
			}); 
			
		},
		caidanClick(){
			this.qingdanShow=!this.qingdanShow
		},
		milageEdit(){
			this.maintainCarData.milage=''
		},
		carEdit(){
			uni.navigateTo({
				url:'../car/cailist?type=2'
			})
		}
	}
}
</script>

<style scoped>
	
	.caidanTk{
		height: calc(100vh - 120rpx);
		width: 100vw;
		background: rgba(0,0,0,0.6);
		position:fixed;
		left: 0;
		top: 0;
	}
	.tkCont{
		height: 60vh;
		margin-top: calc(40vh - 120rpx);
	}
	.caidanTkTop{
		width: 750rpx;
		height: 90rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0px 0px;
	}
	.caidanTkTop{
		display: flex;justify-content: space-between;
	}
	.topTopright{
		display: flex;
		padding-top: 29rpx;
		
	}
	.tkTopTitle{
		line-height: 90rpx;
		font-size: 30rpx;
		font-weight: 600;
		color: #3C3C3C;
		padding-left: 24rpx;
	}
	.empty{
		width: 86rpx;
		height: 42rpx;
		background: #EEEEEE;
		border-radius: 21rpx;
		text-align: center;
		color: #666666;
		font-size: 24rpx;
		line-height: 42rpx;
		
	}
	.close{
		color: #999999;
		font-size: 30rpx;
		padding-right: 30rpx;
		padding-left: 24rpx;
	}
	.tkMain{
		
		background: #F0F0F0;
		height: calc(60vh - 90rpx);
	}
	.tkMainSv{
		padding: 0 24rpx;
		width: 702rpx;
		height: calc(60vh - 90rpx);
	}
	.goodsItemRight{
		width: 520rpx;
		padding-left: 20rpx;
		display: flex;
		flex-direction:column;
		justify-content: space-between;
	}
	.goodsItemBottom{
		display: flex;
		justify-content: space-between;
	}
	
	.goodssalePrice{
		font-size: 32rpx;font-weight: 500;color: #FF4F00;
	}
	.goodsNum{
		font-size: 24rpx;font-weight: 400;color: #999999;
	}
	.top{
		background: #FF4F00;
		display: flex;
		justify-content: space-between;
		padding: 30rpx 25rpx;
		font-size: 28rpx;
		color: #FFFFFF;
	}
	.goodsItem{
		display: flex;
		padding: 15rpx 0;
	}
	.qingdanLine{
		background: #FFFFFF;
		margin-top: 20rpx;
		padding: 24rpx 20rpx;
		border-radius: 10rpx;
	}
	.brandLogo{
		width: 42rpx;
		height: 42rpx;
	}
	.topLeft{
     display: flex;
	}
	.carName{
		padding-left: 10rpx;
	}
	.topEdit{
		width: 30rpx;
		height: 30rpx;
		padding-top: 3px;
		padding-left: 12rpx;
		padding-right: 5px;
		padding-bottom: 5px;
	}
	.topRight{
		display: flex;
	}
	.topInput{
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: right;
		padding-top: 3rpx;
	}
	.maintainrecommend{
		padding: 30rpx 24rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid #EEEEEE;
	}
	.recommendTxt{
		color: #3C3C3C;
		font-size: 30rpx;
		font-weight: 600;
	}
	.manual{
		width: 119rpx;
		height: 40rpx;
		border-radius: 20rpx;
		border: 2rpx solid #F19D01;
		text-align: center;
		line-height: 40rpx;
		font-size: 22rpx;
		color: #F19D01;
	}
	.bottom{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100vw;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0px -2px 20px 0px rgba(153, 153, 153, 0.2);
	}
	.main{
		display: flex;
		height: calc(100vh - 410rpx);
	}
	.mainscrollView{
		height: calc(100vh - 410rpx);
	}
	/*  #ifdef MP-WEIXIN  */
	.main{
		display: flex;
		height: calc(100vh - 310rpx);
	}
	.mainscrollView{
		height: calc(100vh - 310rpx);
	}
	/*  #endif  */
	.mainLeft{
		width: 146rpx;
		background: #F5F5F5;
	}
	.mainRight{
		width: 604rpx;
	}
	.mainLeftLine{
		color: #3C3C3C;
		padding: 30rpx 20rpx;
		font-size: 24rpx;
		text-align: center;
		position: relative;
	}
	.lineNum{
		position: absolute;
		background: #FF270A;
		width: 40rpx;
		height: 26rpx;
		text-align: center;
		line-height: 26rpx;
		font-size: 20rpx;
		color: #FFFFFF;
		border-radius: 13rpx;
		top: 10rpx;
		right: 10rpx;
	}
	.lineLeftActive{
		background: #FFFFFF;
	}
	.nock{
		width: 22rpx;
		height: 22rpx;
		border-radius: 50%;
		border:2px solid #AEAEAE;
		margin-top: 2rpx;
		margin-right: 10rpx;
	}
	.imgPrivacy{
		width: 36rpx;
		height: 36rpx;
		/* margin-top: 2rpx; */
		margin-right: 10rpx;
	}
	.contTopRight{
		display: flex;
		align-items: center;
	}
	.mainRightLine{
		padding: 20rpx 20rpx 0 20rpx;
	
	}
	.contTop{
		display: flex;
		justify-content: space-between;	
	}
	.listPackgeName{
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 600;
		color: #3C3C3C;
	}
	.listPackgeMs{
		font-size: 22rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		padding-top: 5rpx;
	}
	.contZk{
		border-bottom: 1px solid #EEEEEE;
		padding-bottom: 20rpx;
	}
	.goodsImg{
		width: 120rpx;
		height: 120rpx;
		
		border-radius: 11rpx;
	}
	.goodsItemLIne{
		display: flex;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}
	.goodsCont{
		display: flex;
		flex-direction:column;
		justify-content: space-between;
		padding-left: 20rpx;
	}
	.goodsContTop{
		display: flex;
		justify-content: space-between;
		width: 400rpx;
	}
	.goodsItemName{
		font-size: 26rpx;
		font-weight: 400;
		color: #3C3C3C;
		width: 300rpx;
	}
	.salePrice{
		font-size: 32rpx;
		font-weight: 500;
		color: #FF4F00;
	}
	.replace{
		width: 75rpx;
		height: 37rpx;
		border-radius: 19rpx;
		border: 2rpx solid #B9B9B9;
		text-align: center;
		line-height: 35rpx;
		color: #707070;
		font-size: 22rpx;
	}
	.contZkMain{
		padding-top: 20rpx;
	}
	.asa{
		width: 44rpx;
		height: 44rpx;
		line-height: 44rpx;
		text-align: center;
		background: #F4F5F7;
		font-size: 30rpx;
	}
	.goodsCOntBOttom{
		display: flex;
		justify-content: space-between;
	}
	.as{
		display: flex;
		
	}
	.goodsPrice{
		display: flex;justify-content: space-between;
		padding-top: 10rpx;
	}
	.goodsPriceNum{
		color: #F8F8F8;
		font-size: 28rpx;
	}
	.asNum{
		font-size: 24rpx;color: #333333;
		padding: 0 18rpx;
		height: 44rpx;
		line-height: 44rpx;
		background: #F4F5F7;
		margin-left: 1px;
		margin-right: 1px;
	}
	.itemNum{
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
	}
	.bottom{
		display: flex;
		justify-content: space-between;
	}
	.caidanImg{
		width: 50rpx;
		height: 50rpx;
	}
	.bottomLeft{
		display: flex;
	}
	.caidan{
		padding-left: 33rpx;
		padding-top: 35rpx;
		padding-right: 33rpx;
		position: relative;
	}
	.total{
		position: absolute;
		width: 40rpx;
		height: 26rpx;
		background: #FF270A;
		line-height: 26rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 20rpx;
		top: 25rpx;
		right: 15rpx;
		border-radius: 13rpx;
	}
	.heji1{
		font-size: 24rpx;
		font-weight: 500;
		color: #666666;
	}
	.hejiNum{
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF4F00;
	}
	.hejiMs{
		font-size: 24rpx;
        padding-top: 5rpx;
		color: #999999;
	}
	.heji{
		padding-top: 23rpx;
	}
	.settlement{
		width: 203rpx;
		height: 74rpx;
		background: #FF4F00;
		border-radius: 37rpx;
		text-align: center;
		line-height: 74rpx;
		font-size: 30rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FEFFFE;
		margin-top: 23rpx;
		margin-right: 32rpx;
	}
	.nodataImg{
	  width: 400rpx;
	  padding-top: 100rpx;
	}
	.noTxt{
		font-size: 36rpx;
		color: #999999;
		padding-top: 50rpx;
	}
	.nodataBox{
		text-align: center;
	}
</style>