txCar/pages/shop/shopDetail.vue

<template>
	<view class="cont">
		<view v-if="shopdata">
			<view class="top" >
				<swiper class="swiper" :circular="true"
				:indicator-dots="true"  indicator-active-color="#FF4F00"
				v-if="shopImg.length>0"
				>
					<swiper-item v-for="(item,index) in shopImg">
						<view class="swiper-item">
							<image :src="item" mode="widthFix" class="swpImg"></image>
						</view>
					</swiper-item>
					
				</swiper>
				 <image src="../../static/img/750500.png" mode="" class="swpImg" v-else></image>
				 <view class="Member" @click="deleteMember" v-if="shopdata.isAttention">取消关注</view>
				  <view class="Member" @click="Member" v-if="!shopdata.isAttention">关注</view>
			</view>
			<!-- 店铺主体 -->
			<view class="shopMain">
				<view class="shopName">{{shopdata.shopName}}</view>
				<view class="pingfenBox"  @click="goAppraise(shopdata.shopId)">
					<view class="fenshuBox" v-if="shopdata.shopScore"><span class="fenshuNum">{{shopdata.shopScore}}</span> <span class="fenshuTxt">分</span></view>
					<view class="fenshuBox" v-if="!shopdata.shopScore"> <span class="fenshuTxt2">暂无评分</span></view>
					<view class="shuxian"></view>
					<span class="cishu">服务次数 {{shopdata.sheetSum}}</span>
					<view class="shuxian"></view>
					<span class="cishu">评价数 {{shopdata.evaluateSum}}</span>
					<image src="../../static/img/jt.png" mode="" class="pingfenImg"></image>
				</view>
				<!-- 是否营业 -->
				<view class="business">
					<view class="businessTitle">营业时间：</view>
					<view class="businessTitme"> <span v-if="shopdata.startTime">{{shopdata.startTime}}</span>  -- <span v-if="shopdata.endTime">{{shopdata.endTime}}</span> </view>
				</view>
				<!-- 品牌 -->
				<view class="brandsBox">
					<view class="brandsLine" v-if="shopdata.levelName">{{shopdata.levelName}}</view>
					<view v-for="(item,index) in brandsList" class="brandsLine2">{{item}}</view>
				</view>
			
			</view>
			<!-- 地图 -->
			<view class="mapBox">
				<view class="mapLeft">
					<view class="dingwBox"><image src="../../static/img/icon_zuob.png" mode="" class="mapdwImg"></image>
					    <view class="distance" v-if="shopdata.distance&&shopdata.distance!= '0.00'">距离 {{shopdata.distance}}km</view>
					     <view class="distance" v-else>距离 --km</view>
					</view>
					<view class="mapaddress">{{shopdata.provinceName}}{{shopdata.cityName}}{{shopdata.areaName}}
					  <span v-if="shopdata.address">{{shopdata.address}}</span>
					</view>
				</view>
				<view class="shopsx"></view>
				<view class="shopRightBox" @click="map">
					   <view> <image src="../../static/img/icon_ditu.png" mode="" class="shopRightImg"></image> </view>
					   <view class="shopRihgtTxt">地图</view>
				</view>
				<view class="shopsx"></view>
				<view class="shopRightBox" @click="call">
					   <view> <image src="../../static/img/icon_phone.png" mode="" class="shopRightImg"></image> </view>
					   <view class="shopRihgtTxt">电话</view>
				</view>
			</view>
			<!-- 车型里程 -->
			<view class="Cartop">
				<view class="CartopLeft">
					<image :src="maintainCarData.brandLogo" mode="" class="CarbrandLogo"  @click="carEdit"></image>
					<view class="carName"  @click="carEdit">
							<span v-if="maintainCarData.brand">	{{maintainCarData.brand}}</span>
							<span v-if="maintainCarData.series">-{{maintainCarData.series}}</span>
							<span v-if="!maintainCarData.brand">添加我的爱车</span>
				    </view>
					<image src="../../static/img/icon_edit.png" mode="" class="CartopEdit" @click="carEdit"></image>
				</view>
				<view class="CartopRight">
					<input type="text" v-model="maintainCarData.milage" @confirm="getData" value="" placeholder="请输入当前里程" class="CartopInput" placeholder-style="color:#999999;"/>
					<view>
						<image src="../../static/img/icon_edit.png" mode="" class="CartopEdit" @click="milageEdit"></image>
					</view>
					
				</view>
			</view>
			<!-- 车型里程 -->
			
			<!-- 保养 -->
			<view class="main"  style="margin-top: 20rpx;">
				<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||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.showName}}</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.showName}}</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" @click.stop="">
					<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>
	
	</view>
</template>

<script>
export default {
	data() {
		return {
			shopId:'',
			location:'',
			shopdata:'',
			shopImg:[],
			indicatorcolor:'rgba(255, 79, 0)',
			brandsList:[],
			maintainCarData:'',
			mealData:'',
			leftIndex:0,
			total:0,
			qingdanShow:false,
			totalhj:0,
			goodsTotal:0,
			salePriceTotal:0,
			orderData:[],
			replaceIndex1:'',
			replaceIndex2:'',
		}
	},
	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.$forceUpdate()
	}
		
	},
	onLoad(opt) {
		this.$common.isUserId()
       this.shopId=opt.id;
	   this.location=uni.getStorageSync("location");
	   this.maintainCarData=uni.getStorageSync("maintainCarData");
	   this.getData();
	   this.addBMemberShopFootprint();
	   this.getmainData()
	},
	methods: {
		goGoods(item){
			uni.navigateTo({
				url:'../goods/goodsDetail?goodsId='+item.mGoodsID+'&type=1'+'&typeIndex=2&maintain=1'
			})
		},
		unique(arr1) {
		  const res = new Map();
		  return arr1.filter((a) => !res.has(a.goodsID) && res.set(a.goodsID, 1))
		},
		goAppraise(shopId){
			console.log(shopId);
			uni.navigateTo({
				url:'shopAppraise?shopId=' + shopId
			})
		},
		getmainData(){
			uni.showLoading({ });
			this.$http('miniApp/packageMiniAppController/queryPackageList', {
			   mileage:this.maintainCarData.milage,
			   liyangId:this.maintainCarData.nLevelID,
			   shopId:this.shopId
			 },'GET').then(res => {
				uni.hideLoading();
				this.mealData=res.data;
				this.calculation();
			})
		},
		carEdit(){
			uni.navigateTo({
				url:'../car/cailist?type=2'
			})
		},
		milageEdit(){
			this.maintainCarData.milage=''
		},
		map(){
			console.log("打开地图")
			var that=this;
			if(!that.shopdata.lat||!that.shopdata.lng){
				uni.showToast({
				     title: '该店铺未设置定位',
				 	 icon:'none',
				     duration: 3000
				 });
			}else{
				uni.openLocation({
						latitude:Number(that.shopdata.lat)  ,
						longitude:Number( that.shopdata.lng),
						name:that.shopdata.shopName,
						address:that.shopdata.address,
						success: function () {
							console.log('success');
						},
						fail(err) {
						  console.log(err)	
						}
				});
			}
		
		},
		call(){
			uni.makePhoneCall({
			    phoneNumber: this.shopdata.mobilePhone
			}); 
		},
        getData(){
			uni.showLoading({ });
			this.shopImg=[];
			this.$http('miniAppShopInfoController/queryShopDetail', {
			  id:this.shopId,
			  lat:this.location.lat,
			  lng:this.location.lng,
			
			 },'GET').then(res => {
				uni.hideLoading();
				this.shopdata=res.data;
				if(this.shopdata.photoPath){
						this.shopImg.push(this.shopdata.photoPath)
				}
			
				this.shopImg=this.shopImg.concat(this.shopdata.imgList)
			    console.log(this.shopImg)
				if(this.shopdata.brands){
					this.brandsList=this.shopdata.brands.split(',');
				}
				uni.setNavigationBarTitle({
				     title: res.data.shopName
				})
			})
		},
		addBMemberShopFootprint(){
			this.$http('miniAppShopInfoController/addBMemberShopFootprint', {
			    shopId:this.shopId
			 },'POST').then(res => {
				
			})
		},
		Member(){
			uni.showLoading({ });
			this.$http('miniAppShopInfoController/addBMemberShop', {
			  shopID:this.shopId,
			 },'POST').then(res => {
				uni.hideLoading();
				if(res.code==0){
					uni.showToast({
					     title: '关注成功',
					 	 icon:'none',
					     duration: 3000
					 });
					 this.shopdata.isAttention=1
				}else{
					uni.showToast({
					     title: res.msg,
					 	 icon:'none',
					     duration: 3000
					 });
				}
			})
		},
		deleteMember(){
			uni.showLoading({ });
			this.$http('miniAppMyBMemberCar/deleteBMemberShop', {
			  shopId:this.shopId,
			 },'POST').then(res => {
				uni.hideLoading();
				if(res.code==0){
					uni.showToast({
					     title: '取消成功',
					 	 icon:'none',
					     duration: 3000
					 });
					  this.shopdata.isAttention=0
				}else{
					uni.showToast({
					     title: res.msg,
					 	 icon:'none',
					     duration: 3000
					 });
				}
			})
		},
		settlement(){
			console.log(this.orderData)
			var that=this;
			if(this.orderData.length>0){
				uni.setStorage({
					key: 'cfshopInfo',
					data: that.shopdata,
					success: function () {
						 uni.removeStorageSync('couponData');
						uni.navigateTo({
							url:'../module/confirmOrder?orderData='+JSON.stringify(that.orderData)+'&currentMileage='+that.maintainCarData.milage+'&type=2'
						})
					}
				}); 
			}
		   
			
		},
		replace(v,index,i,replaceIndex){
			console.log(v)
			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:'../module/replaceGoods'
					})
				}
			}); 
			
		},
		caidanClick(){
			this.qingdanShow=!this.qingdanShow
		},
		leftClick(item,index){
			this.leftIndex=index
		},
		listcheck(item){
			item.planItem=!item.planItem;
			//var 
			this.calculation();
			if(item.planItem){
				/* this.orderData.push(item) */
			}
		},
		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
						  		})
						  	}
						  })
						  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:'',
							}
							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) 
									})
									 */
									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;
								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()
		},
	}
}
</script>

<style scoped>
	.cont{
		min-height: 100vh;
		background:#F4F5F7 ;
	}
	/deep/.uni-swiper-wrapper .uni-swiper-dots {
	        bottom: 60rpx;
	 }
	.swiper-item{
		width: 100vw;
		height: 500rpx;
		
	}
	.swiper{
		width: 100vw;
		height: 500rpx;
	}
	.swpImg{
		width: 100vw;
		height: 500rpx;
	}
	.top{
		position: relative;
	}
	.Member{
		width: 140rpx;
		height: 42rpx;
		line-height: 42rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 24rpx;
		background: rgba(0,0,0,0.4);
		border-radius: 21rpx;
		position: absolute;
		bottom: 60rpx;
		right: 32rpx;
	}
	.shopMain{
		width: 702rpx;
		height: 368rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-left: 24rpx;
		margin-top: -50rpx;
		z-index: 111;
		position: relative;
	}
	.shopName{
		padding-top: 30rpx;
		padding-left: 20rpx;
		color: #333333;
		font-size: 32rpx;
		font-weight: 600;
	}
	.pingfenBox{
		width: 559rpx;
		height: 62rpx;
		background: rgba(255, 79, 0, 0.08);
		border-radius: 0px 15rpx 14rpx 0px;
		margin-top: 10rpx;
	}
	.pingfenImg{
		width: 14rpx;
		height: 26rpx;
		margin-right: 30rpx;
		margin-top: 20rpx;
	}
	.fenshuNum{
		font-size: 38rpx;
		font-weight: 600;
		color: #FF4F00;
	}
	.pingfenBox{
		display: flex;
		line-height: 62rpx;
		justify-content: space-between;
		
	}
	.fenshuTxt{
		font-size: 26rpx;
		font-weight: 600;
		color: #FF4F00;
		padding-left: 5rpx;
		padding-top: 2rpx;
	}
	.fenshuTxt2{
		font-size: 26rpx;
		color: #FF4F00;
		padding-left: 5rpx;
		
	}
	.cishu{
		font-size: 24rpx;
		color: #666666;
	}
	.shuxian{
		width: 2px;
		height: 30rpx;
		background:#E9E8E8;
		margin-top: 16rpx;
	}
	.fenshuBox{
		padding-left: 20rpx;
	}
	.business{
		display: flex;font-size: 26rpx;
		padding-left: 20rpx;padding-top: 20rpx;
		color: #999999;
	}
	.businessTitme{
		color: #666666;
	}
	.brandsBox{
		display: flex;
		padding: 20rpx;
		font-size: 24rpx;
		flex-wrap: wrap;
	}
	.brandsLine{
		height: 34rpx;
		background: linear-gradient(138deg, #FF630F 0%, #FF450F 100%);
		border-radius: 4rpx;
		line-height: 34rpx;
		padding: 0 8rpx;
		color: #FFFFFF;
		margin-right: 14rpx;
		margin-bottom: 15rpx;
	}
	.brandsLine2{
		border-radius: 4rpx;
		line-height: 30rpx;
		padding: 0 8rpx;
		color: #FF5800;
		height: 30rpx;
		border:1px solid #FF5800;
		margin-right: 14rpx;
		margin-bottom: 15rpx;
	}
	.mapBox{
		width: 702rpx;
		height: 150rpx;
		background: url('http://phone.66km.cn:8088/thFiles/184C909A-0A58-4E60-92F1-4AF80BF071F1.png') no-repeat;
		background-size: 100% 100;
		display: flex;
		margin-left: 24rpx;
		margin-top: 20rpx;
	}
	.mapdwImg{
		width: 22rpx;
		height: 30rpx;
	}
	.dingwBox{
		display: flex;
	}
	.mapLeft{
		padding-top: 30rpx;
		padding-left: 20rpx;
		font-size: 24rpx;
		width: 450rpx;
	}
	.distance{
		padding-left: 16rpx;
		color: #3C3C3C;
		font-weight: 600;
	}
	.mapaddress{
	   color: #999999;padding-top: 15rpx;
	}
	.shopsx{
		width: 1px;
		height: 61rpx;
		background: #EEEEEE;
		margin-top: 30rpx;
		margin-left: 28rpx;
	}
	.shopRihgtTxt{
		color: #999999;font-size: 22rpx;
	}
	.shopRightBox{
		padding-top: 30rpx;
		padding-left: 28rpx;
	}
	.shopRightImg{
		width: 52rpx;height: 38rpx;
	}
	.Cartop{
		background: #FFFFFF;
		display: flex;
		justify-content: space-between;
		padding: 30rpx 25rpx;
		font-size: 28rpx;
		width: 654rpx;
		margin-top: 20rpx;
		margin-left: 24rpx;
	}
	.CarbrandLogo{
		width: 42rpx;
		height: 42rpx;
	}
	.CartopLeft{
	 display: flex;
	 width: 500rpx;
	}
	.carName{
		padding-left: 10rpx;
		color: #3C3C3C;
		padding-top: 2rpx;
	}
	.CartopEdit{
		width: 30rpx;
		height: 30rpx;
		padding-top: 3px;
		padding-left: 12rpx;
		padding-right: 5px;
		padding-bottom: 5px;
	}
	.CartopRight{
		display: flex;
	}
	.CartopInput{
		font-size: 28rpx;
	
		text-align: right;
		padding-top: 3rpx;
	}
	.caidanTk{
		height: calc(100vh - 120rpx);
		width: 100vw;
		background: rgba(0,0,0,0.6);
		position:fixed;
		left: 0;
		top: 0;
		z-index: 111;
	}
	.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;
		width: 280rpx;
	}
	.topEdit{
		width: 22rpx;
		height: 22rpx;
		padding-top: 5px;
		padding-left: 10rpx;
	}
	.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;background: #FFFFFF;
	}
	.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: 28rpx;
		height: 28rpx;
		margin-top: 2rpx;
		margin-right: 10rpx;
	}
	.mainRightLine{
		padding: 20rpx 20rpx 0 20rpx;
		background: #FFFFFF;
	
	}
	.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;
		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>