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="http://dmsphoto.66km.com.cn/thFiles/403AC6C5-CD4B-4D7A-B0D6-BA997D0AB9CE.png" mode="" class="glIcon"></image>
			<!-- <view class="glInput" v-if="milage">{{milage}}km</view>
			 <view class="glInput" v-else>暂无填写</view> -->
			<!-- <input type="text" v-else placeholder="暂无填写" class="glInput"/> -->
			 <input type="number" @blur="milageBlur" v-if="carInfo.milage" v-model="carInfo.milage" class="glInput"/>
			 <input type="number"  @blur="milageBlur" v-model="carInfo.milage"  v-else 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">正品保障1</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 @click="historySpend">保养记录</span>
		 			 <span style="padding: 0 10rpx;">  | </span>
		 			 <span @click="information">保养手册</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 src="http://dmsphoto.66km.com.cn/thFiles/F4CEDFE9-CF9F-41C5-B2BC-0EE00D9EA455.png" mode="" v-if="item.showType.indexOf(1)!=-1" class="byTj"></image>
					 <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.showContent}}</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.isDefault==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;"> <span v-if="v.count!=1"> {{v.count}}次</span> ¥{{v.money}}
							 </span>
							<!-- <span class="tcSpan3" style="padding-left: 10rpx;">2次</span>
							 <span class="tcSpan1">¥588</span> -->
						 </view>
					 </view>
				 </view>
			 </view>
			 <view v-if="list.length==0&&isLoding">
				 <view  class="nodataBox" style="margin-top: 80rpx;">
				 	<view style="text-align: center;">
				 		<image class="nodataImg" src="http://dmsphoto.66km.com.cn/thFiles/FB1CBE1D-D56F-4921-AEB9-6364E7AC96BE.png" mode=""></image>
				 	</view>
				 	<view class="nodataTxt">暂无推荐</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">
			 <view class="tkDelBox" @click="clearAll">
			 	<image v-if="itemDefault" src="../../static/img2/shanchu.png" mode="" class="tkDelIcon"></image>
			 	<view v-if="itemDefault" class="tkDelTxt">清空</view>
			 </view>
			 <view class="tkTitle">清单</view>
			
			 <image @click="qdTkclose" class="chahao" src="../../static/img2/chahao.png" mode=""></image>
		 </view>
	<view class="tkCBox">
	<view class="tkLine"  v-if="itemDefault">
		<view class="tkLineTop">
			<view class="tklineTopTitle">套餐卡</view>
			<view class="tkDelBox" @click="delitemDefault">
				<image src="../../static/img2/shanchu.png" mode="" class="tkDelIcon"></image>
				<view class="tkDelTxt">删除</view>
			</view>
		</view>
		
			<view class="tklineCont">
				<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="goodsPrice4" >￥{{itemDefault.money}}/</view>
						<view class="goodsPrice2">￥</view>
						<view class="goodsPrice3">{{itemDefault.price}}</view>
						<view class="tkcount">{{itemDefault.count}}次</view>
						<!-- <view class="goodsPrice4" >原价：¥{{itemDefault.crossedPrice}}</view> -->
					 </view>
								 
				</view>
			</view>
		
		
	</view>
	<view v-if="!itemDefault" class="nodataBox">
		<view style="text-align: center;">
			<image class="nodataImg" src="http://dmsphoto.66km.com.cn/thFiles/FB1CBE1D-D56F-4921-AEB9-6364E7AC96BE.png" mode=""></image>
		</view>
		<view class="nodataTxt">暂无添加商品</view>
	</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:0,
				milage:'',
				multiArray: [
					['亚洲', '欧洲'],
					['中国', '日本'],
					['公里']
				],
				isLoding:false,
			}
		},
		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;
			this.milage=this.carInfo.milage
			if(this.carInfo.milage==0){
				this.carInfo.milage=''
			}
			this.maintainProjectID=opt.maintainProjectID
			if(this.carInfo){
				this.getRecommend()
			}else{
				uni.showModal({
					title: '提示',
					content: '请先选择车辆',
					showCancel:false,
					success: function (res) {
						if (res.confirm) {
							uni.navigateTo({
								url:'../user/addCar/cailist?type=5'
							})
						} 
					}
				});
			}
			
			
		},
		onShow() {
			var car =uni.getStorageSync("byCar")
			if(car){
				this.carInfo=car;
				this.milage=this.carInfo.milage
				if(this.carInfo.milage==0){
					this.carInfo.milage=''
				}
				this.getRecommend()
			}
		},
		methods: {
			milageBlur(){
				
					var cardata = {
						plateNumber:this.carInfo.plateNumber,
						milage: this.carInfo.milage,
						brand: this.carInfo.brand,
						displacement: this.carInfo.displacement,
						series: this.carInfo.series,
						annualmoney: this.carInfo.productionYear,
						carModel: this.carInfo.carModel,
						saleName:this.carInfo.saleName,
						transmissionType: this.carInfo.transmissionType,
						model: this.carInfo.model,
						nLevelID:this.carInfo.nLevelID,
						engineType: this.carInfo.engineType,
						brandLogo: this.carInfo.brandLogo,
						buyDate: this.carInfo.buyDate,
						guidePrice: this.carInfo.guidePrice,
						vIN: this.carInfo.vIN,
						id: this.carInfo.id,
					}
				
				this.$http('opencarInfoOwner/addCarOwner', cardata, 'POST').then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: '修改成功',
							icon: 'none',
							duration: 3000
						});
						
					
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 3000
						});
					}
				})
			},
			information(){
				console.log('车辆信息--',this.carInfo);
				uni.navigateTo({
					url:'../index/handbook?mileage='+this.carInfo.milage+'&liyangId='+this.carInfo.nLevelID
				})
			},
			historySpend(){
				uni.navigateTo({
					url:'../user/historySpend'
				})
			},
			qingdan(){
				this.tkShow=true;
				
			},
			qdTkclose(){
			  this.tkShow=false	
			 
			},
			clearAll(){
				var that=this
				uni.showModal({
					title: '提示',
					content: '确定清空吗？',
					success: function(resTK) {
						if (resTK.confirm) {
							that.list.forEach(item=>{
								item.packageItems.forEach(v=>{
									v.select=false
								})
							})
							 that.itemDefault=''
							 that.qdNum=0
							 that.totalPrice=0
						}
						
					}
				});
				
			},
			delitemDefault(){
				var that=this
				uni.showModal({
					title: '提示',
					content: '确定删除吗？',
					success: function(resTK) {
						if (resTK.confirm) {
							that.list.forEach(item=>{
								item.packageItems.forEach(v=>{
									v.select=false
								})
							})
							 that.itemDefault=''
							 that.qdNum=0
							 that.totalPrice=0
						}
					}
				});
				
			},
			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){
					if(this.itemDefault.content){
						this.itemDefault.content=this.itemDefault.content.replace(/\<img/gi, '<img style="max-width:100% !important;height:auto" ');
					}
					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.isLoding=false;
				this.$http('open-apply/get-recommend', {
				    carId:this.carInfo.id,
					bizId:this.maintainProjectID
				}, 'GET').then(res => {
					uni.hideLoading();
				    this.isLoding=true;
					this.list=''
					this.itemDefault=''
					this.qdNum=0
					this.totalPrice=0
					if(!res.data.data){
						this.list=''
						this.itemDefault=''
						this.qdNum=0
						this.totalPrice=0
					}
					res.data.data.forEach(item=>{
						
						item.packageItems.forEach(v=>{
							v.select=false
						})
					})
					this.list=res.data.data
					this.lineItem=this.list[0]
					this.lineItem.packageItems.forEach(d=>{
						if(d.isDefault==1){
							d.select=true
							this.itemDefault=d
							this.itemDefault.goodsname=this.lineItem.title
							this.totalPrice=d.money
							this.qdNum=1
							this.itemDefault.mainImgUrl=this.lineItem.mainImgUrl
						}
					})
					
					//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: 60vh;
	background: #EFEFEF;
	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.4);
	border-radius: 38rpx;line-height: 42rpx;
	border: 1px 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: 26rpx;height: 26rpx;
}
.msTxt{
	font-weight: 500;margin-left: 12rpx;
	font-size: 22rpx;
	color: #A77102;
	padding-top: 2rpx;
}
.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 440rpx);
	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://dmsimg.66km.com/marketing/be56733ed0464993b9e71d351d82062e.jpg') no-repeat;
	background-size: 100% 100%;
	height: 160rpx;
	    border-radius: 26rpx;
}
.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;position: relative;
}
.lineImg{
	width: 162rpx;
	height: 162rpx;
	border-radius: 16rpx;
}
.lineTop{
	display: flex;
}
.lineBox{
	margin-top: -52rpx;
}
.goodsKbox{
	display: flex;flex-wrap: wrap;
}
.goosK1 {
	height: 30rpx;line-height: 32rpx;padding: 0 8rpx;
	border: 1rpx solid #EC0F0A;font-size: 20rpx;
color: #EC0F0A;margin-right: 10rpx; border-radius: 6rpx;
margin-top: 10rpx;
}
.goosK2{
	height: 30rpx;line-height: 32rpx;padding: 0 8rpx;color: #34B084;
	border: 1rpx solid #34B084;font-size: 20rpx;border-radius: 6rpx;
	margin-right: 10rpx;margin-top: 10rpx;
}
.goodsName{
	font-weight: 500;
	font-size: 28rpx;
	color: #222222;
	line-height: 40rpx;
}
.goodsMs{
	font-weight: 400;padding-top: 10rpx;
	padding-bottom: 6rpx;
	font-size: 22rpx;
	color: #8B8B8B;
	line-height: 28rpx;
	white-space: nowrap;      /* 确保文本在一行内显示 */
	  overflow: hidden;         /* 超出容器部分隐藏 */
	  text-overflow: ellipsis;
	  width: 480rpx;
}
.bfb{
	font-size: 20rpx;padding-top: 10rpx;
	color: #FFD804;
	line-height: 28rpx;
}
.lineNameBox{
	padding-left: 20rpx;    width: 500rpx;
}
.tcLine{
	background: #FBFBFB;
	border-radius: 14rpx;
	border: 1px solid #f1f1ff;
	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: #999999;
	
}
.tcNameTs{
	padding: 0 8rpx;margin-top: 30rpx;margin-left: 10rpx;
	height: 25rpx;
	background: #FE0200;
	text-align: center;
	line-height: 26rpx;
	font-size: 18rpx;
	color: #FFFFFF;
	border-radius: 4rpx;
}
.tcBox{
	display: flex;justify-content: space-between;
	padding-top: 26rpx;flex-wrap: wrap;
}
.bottom{
	width: 100%;
	position: fixed;
	bottom: 0rpx;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	background: #FFFFFF;
	z-index: 111;
	box-shadow: 0rpx -2rpx 16rpx 0rpx rgba(153,153,153,0.2);
}
.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;
	padding-top: 30rpx;
	padding-bottom: 0;
}
.qingdanIcon{
	width: 40rpx;height: 45rpx;
	display: block;
}
.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: 24rpx;
	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: 12rpx;
	
}

.goodsPrice3{
	font-size: 28rpx;
	padding-top: 12rpx;
	font-weight: 500;
	color: #EC0F0A;
}
.goodsPrice4{
	font-size: 24rpx;
	font-weight: 400;
	color: #999999;
	padding-top: 16rpx;
/* 	text-decoration:line-through; */
	padding-left: 10rpx;
}
.tkTop{
	display: flex;padding: 40rpx 24rpx;
}
.tkImg{
width: 120rpx;
height: 120rpx;
background: #DDDDDD;
border-radius: 6rpx;
}
.tkName{
	font-weight: 400;
	font-size: 24rpx;
	color: #222222;
	line-height: 33rpx;
}
.tkNameBox{
	padding-left: 24rpx;width: 515rpx;
}
.chahao{
	width: 22rpx;height: 22rpx;padding-top: 10rpx;
	padding-left: 80rpx;
}
.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;
}
.tkLine{
	background: #ffffff;
	padding: 20rpx 22rpx;
	padding-bottom: 30rpx;
	border-radius: 16rpx;
}
.tkDelIcon{
	width: 25rpx;height: 27rpx;
	margin: 6rpx;
}
.tkTitle{
	font-weight: 500;
	font-size: 30rpx;
	color: #222222;
	line-height: 42rpx;
}
.tkTop{
	justify-content: space-between;
}
.tkDelBox{
	display: flex;width: 100rpx;
}
.tkTop .tkDelTxt{
	font-weight: 500;
	font-size: 26rpx;
	color: #222222;
	line-height: 42rpx;
	padding-left: 8rpx;
}
.tkCBox{
	padding: 0 22rpx;
}
.tkLineTop{
	display: flex;justify-content: space-between;
}
.tklineTopTitle{
	font-size: 26rpx;
}
.tkCBox .tkDelTxt{
	font-weight: 400;
	font-size: 26rpx;
	color: #222222;
	line-height: 42rpx;
	padding-left: 8rpx;
}
.tklineCont{
	display: flex;
	padding-top: 24rpx;
	
}
.tkcount{
	font-weight: 400;
	font-size: 22rpx;
	color: #222222;
	padding-left: 22rpx;
	padding-top: 16rpx;
}
.tkCBox .goodsPrice{
	padding-top: 36rpx;
    justify-content: flex-end;
}
.nodataImg{
	width: 176rpx;height: 180rpx;
}
.nodataTxt{
	font-weight: 400;
	font-size: 26rpx;
	color: #999999;
	line-height: 37rpx;
	text-align: center;
	padding-top: 10rpx;
}
.nodataBox{
	padding-top: 186rpx;
	background: #fff;
    padding-bottom: 200rpx;
	border-radius: 20rpx;
}
.byTj{
		width: 70rpx;height: 70rpx;top: 0;left: 0;
		position: absolute;
	}
	.bSpan1{
	 font-size: 30rpx;
	}
</style>