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_coordinate.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_map.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_phone2.png" mode="" class="shopRightImg"></image>
					</view>
					<view class="shopRihgtTxt">电话</view>
				</view>
			</view>

			<!-- 去保养 -->
			<view class="bottom">
				<view class="care" @click="goCare">去保养</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>
							</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: '',
				brand: '',
			}
		},
		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()
				} */


			var cardata = uni.getStorageSync("maintainCarData")

			if (cardata) {
				this.brand = cardata.brand
			}
		},
		onLoad(opt) {
			// this.$common.isUserId()
			this.shopId = opt.id;
			this.location = uni.getStorageSync("locationCity");
			this.maintainCarData = uni.getStorageSync("maintainCarData");
			this.getData();
			/* this.addBMemberShopFootprint();
			 this.getmainData() */
		},
		methods: {
			goCare() {
				this.$common.isUserId()

				uni.navigateTo({
					url: '../module/maintain?brand=' + this.brand
				})
			},
			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('worldKeepCar/worldHome/queryKeepCarShopDetail', {
					id: this.shopId,
					lat: this.location.lat ? this.location.lat : '',
					lng: this.location.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: 0rpx 15rpx 14rpx 0rpx;
		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: 44rpx;
		height: 48rpx;
	}

	.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);
	}

	.care {
		width: 690rpx;
		margin: 23rpx 30rpx;
		text-align: center;
		height: 74rpx;
		background: linear-gradient(135deg, #FD5300 0%, #FF270A 100%);
		border-radius: 37rpx;

		color: #FFFFFF;
		font-size: 30rpx;
		line-height: 74rpx;
	}

	.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>