wxThird/pages/subPack/maintainItem.vue

<template>
<view class="box">

 <view class="spwBox">
 	<swiper class="swiper" circular  :autoplay="false" :indicator-dots="true" indicator-color="#CCCCCC" indicator-active-color="#EC0F0A">
 		<swiper-item v-for="(item,index) in detail.openMaintainImgUrls">
 			<view class="swiper-item">
 				<img mode="aspectFit" :src="item.url" alt="" class="swiper-itemImg" >
 				
 			</view>
 		</swiper-item>
 		
 	</swiper>
 </view>
 <view class="shopCont">
 	<view class="shopCtop">
 		<view class="goodsPrice" >
 			<view class="goodsPrice2">￥</view>
 			<view class="goodsPrice3" >{{itemDefault.money}}</view>
 			<view class="goodsPrice4"  v-if="itemDefault.showCrossedPrice==1">原价：¥{{itemDefault.crossedPrice}}</view>
 		</view>
 		<view class="shareBox" >
			<view class="shareTxt">分享</view>
			<image class="shareIcon" src="../../static/timg/share.png" mode=""></image>
		</view>
 	</view>
 	<view class="goodsName">{{detail.title}}</view>
 	<view class="goodsMSBox" >
		<!-- <view class="goodsMs" v-if="detail.showOilType">机油类型|{{detail.showOilType}}</view>
		<view class="goodsMs" v-if="detail.showOilLevel">机油等级|{{detail.showOilLevel}}</view>
		<view class="goodsMs" v-if="detail.showFit">适配粘度|{{detail.showFit}}</view> -->
		<view class="goodsMs" v-for="(item,index) in detail.content.split(',')">{{item}}</view>
	</view>
	<view class="timeBox">
		<view class="itemTime" v-if="detail.validityType==1">套餐有效期：{{detail.validityTime}}</view>
		<view class="sell" v-if="itemDefault.showSalesCount==1">
			<span>已售：</span><span style="color: #FFC107;">{{itemDefault.dummyCount}}</span>
		</view>
	</view>
 </view>
 
 
 <view class="buyBOx">
	 <view class="buyLine" @click="ckCar">
		 <view class="buyTitle">已选车型</view>
		 <view class="buyData" style="display: flex;">
			 <view class="carModelLine">   {{carInfo.carModel?carInfo.carModel:''}}</view>
		
		   <image class="jtIcon" src="../../static/timg/jthei.png" mode=""></image>
		 </view>
	 </view>
	 <view class="carTis" v-if="isRecommend!='true'">此套餐可能与爱车不适配</view>
	 <view class="buyLine">
	 		 <view class="buyTitle">商品规格</view>
			 <view class="guigeBox">
				 <scroll-view scroll-x="true" enable-flex="true" class="buyData guigeBox2">
					 
					 				<!-- <view class="goodsGuige activeGuige" style="margin-right: 24rpx;">单次购买</view> -->
					 				 <view class="goodsGuige" @click="goodsGuige(item)"
					 				 :class="{activeGuige:item.id==itemDefault.id}" v-if="item.isShow==1"
					 				  v-for="(item,index) in detail.packageItems">{{item.title}}</view>
					
				 </scroll-view>
				 
			 </view>
	 		
	 </view>
	 <view class="buyLine">
	 		 <view class="buyTitle">商品数量</view>
	 		 <view class="buyData">
				 <view class="numJsbox">
				 	<view class="numJj" @click="calculation(1)">-</view>
				 	<view class="goodsnum">
				 	 <input type="number" value="" v-model="goodsnum" class="goodsnumInput"/>
				 	</view>
				 	<view class="numJj" @click="calculation(2)">+</view>
				 </view>
			 </view>
	 </view>
	 <view class="buyLine">
	 		 <view class="buyTitle">使用方式</view>
	 		 <view class="buyData">到店使用</view>
	 </view>
	 <view class="buyLine">
	 		 <view class="buyTitle">可用门店</view>
	 		 <view class="buyData" v-if="itemDefault.packTimeShopName=='全部'">全部门店</view>
			 <view @click="keyongFn" class="buyData " style="display: flex;" v-else>{{itemDefault.packTimeShopName.split(',').length}}个门店可用
			   <image src="../../static/img2/hjt.png" mode="" class="hjt"></image>
			 </view>
	 </view>
 </view>
 
 <view class="mealBox" v-if="itemDefault.content">
	 <view class="fwlcTitle">套餐内容</view>
	  <rich-text :nodes="itemDefault.content" style="background: #fff;"></rich-text>
<!-- 	 <view class="mealTop">
	 	<view class="mealName">套餐名称</view>
	 	<view class="mealNum">数量</view>
	 	<view class="mealexpire">有效期</view>
	 </view>
	 <view class="mealTop2">
	 	<view class="mealName">【豪华车型】全合成机油保养套餐</view>
	 	<view class="mealNum">2</view>
	 	<view class="mealexpire">18个月</view>
	 </view>
	 <view class="mealXj">
		 <view class="xjLine">
			 <view class="xjyd"></view>
			 <view class="xjTxt">20项检查</view>
		 </view>
		 <view class="xjLine">
			 <view class="xjyd"></view>
			 <view class="xjTxt">20美日韩车型专用保养套餐适配机油</view>
		 </view>
	 </view>
	 <view class="mealMs">
		 <view class="mealMsline">
			 1.本套餐不限车辆使用；
			 2.机油套餐包含：机油，机油滤，工时费
			 3.购买此套餐，共享有2次保养次数。
		 </view>
	 </view> -->
 </view>
 
 <!-- 商品详情 -->
 <view class="goodsDetail" v-if="detail.detailContent">
 	<view class="goodsDetailTitle">商品详情</view>
 	<!-- <view v-html="info.details" style="background: #fff;"></view> -->
 	 <rich-text :nodes="detail.detailContent" style="background: #fff;"></rich-text>
 </view>
 
 <view class="bottomTianc"></view>
  
  <view class="bottom">
 	 <view class="bleft">
 		<image class="kefuIcon" src="../../static/img2/kefu.png" mode=""></image>
 		<view style="text-align: center;font-size: 20rpx;color: #110B01;">客服</view>
 	</view>
 		 <view class="Btn commonBtn" @click="submitFn">立即购买</view>
 	</view>
 
 
 
 <!-- 提交订单弹框-->
 <view class="tkBox" v-if="tkShow" @click="closeTk">
 	 <view class="tkCont" @click.stop="">
 		 <view class="tkTop">
			 <image class="tkImg" v-if="detail.mainImgUrl" :src="detail.mainImgUrl" mode="" ></image>
 			 <image class="tkImg" v-else src="../../static/timg/noimg.png" mode="" ></image>
 			 <view class="tkNameBox">
 				 <view class="tkName">{{detail.title}}</view>
 				 <view class="goodsPrice">
 				 	<view class="goodsPrice2">￥</view>
 				 	<view class="goodsPrice3">{{itemDefault.money}}</view>
 				 	<view class="goodsPrice4" >原价：¥{{itemDefault.crossedPrice}}</view>
 				 </view>
 				 
 			 </view>
 			 <image class="chahao" src="../../static/img2/chahao.png" mode=""  @click="closeTk"></image>
 		 </view>
 		 <view class="buyLine">
 		 		 <view class="buyTitle">商品规格</view>
 		 		 <view class="buyData">
 		 				 <view class="goodsGuige activeGuige" style="margin-right: 24rpx;">{{itemDefault.title}}</view>
 		 				<!-- <view class="goodsGuige">保养套餐卡</view> -->
 		 			 </view>
 		 </view>
 		 <view class="buyLine">
 		 		 <view class="buyTitle">商品数量</view>
 		 		 <view class="buyData">
 		 				 <view class="numJsbox">
 		 				 	<view class="numJj" @click="calculation(1)">-</view>
 		 				 	<view class="goodsnum">
 		 				 	 <input type="number" value="" v-model="goodsnum" class="goodsnumInput"/>
 		 				 	</view>
 		 				 	<view class="numJj" @click="calculation(2)">+</view>
 		 				 </view>
 		 			 </view>
 		 </view>
 		 
 		 <view class="tkBottom">
 			 <view class="tkBottomBtn commonBtn" @click="goSubmit">立即购买</view>
 		 </view>
 		 
 	 </view>
 </view>
 
 
 
 <!-- 提交订单弹框-->
 
 <!-- 门店列表-->
 <view class="tkBox" v-if="keyongShow" @click="keyongClose">
	 <view class="tkCont2">
		 <view class="tkTOp2">
			  <view class="chahao"></view>
			  <view class="kymd">可用门店</view>
			  <image class="chahao" src="../../static/img2/chahao.png" mode=""  @click="closeTk"></image>
		 </view>
		 <view class="keyongBOx">
			 <view class="keyongLine" v-for="(item,index) in itemDefault.packTimeShopName.split(',')">
				 {{item}}
			 </view>
		 </view>
	 </view>
 </view>
 
</view>
</template>

<script>
	export default {
		components: {
			
		},
		
		data() {
			return {
				themeColor:'',
				ext:'',
				
				goodsnum:1,
				details:'11233',
				maintainId:'',
				detail:'',
				itemDefault:'',
				carInfo:'',
				userInfo:'',
				isRecommend:'',
				tkShow:false,
				keyongShow:false,
			}
		},
		onLoad(opt) {
			this.ext = this.$common.getExtStoreId();
			this.themeColor = uni.getStorageSync("themeColor");
			this.maintainId=opt.maintainId
			this.carInfo=this.$store.state.carInfo;
			this.userInfo=this.$store.state.userInfo;
			this.isRecommend=opt.isRecommend
			//console.log("this.isRecommend=="+this.isRecommend)
			if(this.userInfo){
				this.getdetail()
			}else{
				this.$common.automaticlogin().then(val => {
					this.userInfo=this.$store.state.userInfo;
					this.getdetail()
				})
			}
			
		},
		onShow() {
			var car =uni.getStorageSync("byCar")
			if(car){
				this.carInfo=car;
				this.getdetail()
				this.isRecommend=false
			}
			
		},
		methods: {
			ckCar(){
				uni.navigateTo({
					url:'../user/addCar/cailist?type=5'
				})
			},
			goodsGuige(item){
				this.itemDefault=item
			},
			goSubmit(){
				this.itemDefault.goodsnum=this.goodsnum
				this.itemDefault.goodsname=this.detail.title
				this.itemDefault.itemId=this.detail.id
				this.itemDefault.mainImgUrl=this.detail.mainImgUrl
				uni.setStorage({
					key: 'itemDefault',
					data: this.itemDefault,
					 success: function () {
					    uni.navigateTo({
					    	url:'maintainSubmit'
					    })
					 }
				}); 
			},
			closeTk(){
				this.tkShow=false
			},
			keyongClose(){
				this.keyongShow=false;
			},
			keyongFn(){
				this.keyongShow=true;
			},
			submitFn(){
				if(this.itemDefault){
					this.tkShow=true
				}else{
					uni.showToast({
						 title: '请选择商品规格',
						 icon:'none',
						 duration: 3000
					});
					/* uni.showModal({
						title: '提示',
						content:"请选择商品规格",
						success: function(resTKk) {
							
						}
					}); */
				}
				
				
				
			},
			calculation(type){
				if(type==1){
					if(this.goodsnum>1){
						this.goodsnum--
					}
				}else{
					console.log("+++")
						this.goodsnum++
				}
			},
			getdetail(){
				uni.showLoading({
					title: '加载中'
				})
				this.$http('openMaintain/detail/'+this.maintainId, {
				   /* maintainId:this.maintainId */
				}, 'GET').then(res => {
					uni.hideLoading();
					this.detail=res.data
					this.detail.packageItems.forEach(item=>{
						if(item.isDefault==1){
							 this.itemDefault=item
						}
						if(item.content){
							item.content=item.content.replace(/\<img/gi, '<img style="max-width:100% !important;height:auto" ');
						}
						
					})
					if(this.detail.detailContent){
						this.detail.detailContent=this.detail.detailContent.replace(/\<img/gi, '<img style="max-width:100% !important;height:auto" ');
					}
					
				   
				})
			},
			
			
			
		}
	}
</script>

<style scoped lang="less">
.box {
	width: 100vw;
	min-height: 100vh;
	background: #F4F4F4;
}
.swiper{
	width: 750rpx;
	height: 700rpx;
	background: #FFFFFF;
/* 	border-bottom: 1px solid #EEEEEE; */
}
.swiper-item{
	width: 750rpx;
	height: 700rpx;
}
.swiper-itemImg{
	width: 750rpx;
	height: 700rpx;
}
.goodsPrice{
		display: flex;
}
.goodsPrice1{
	font-size: 24rpx;
	font-weight: 400;
	color: #EC0F0A;
	padding-top: 14rpx;
	padding-right: 14rpx;
}
.goodsPrice2{
	font-size: 28rpx;
	font-weight: 400;
	color: #EC0F0A;
	padding-top: 10rpx;
	
}

.goodsPrice3{
	font-size: 44rpx;
	font-weight: 500;
	color: #EC0F0A;
}
.goodsPrice4{
	font-size: 24rpx;
	font-weight: 400;
	color: #999999;
	padding-top: 14rpx;
	text-decoration:line-through; 
	padding-left: 10rpx;
}
.Sold{
		font-weight: 400;
		color: #999999;
		font-size: 24rpx;
		padding-top: 18rpx;
}
.goodsName{
	font-size: 30rpx;
	line-height: 42rpx;
	font-weight: 500;
	color: #333333;
	padding: 20rpx 24rpx;
	padding-top: 0;
	padding-bottom: 16rpx;
}
.goodsMd{
	font-weight: 400;
	color: #999999;
	font-size: 26rpx;
	padding: 0 24rpx;
	padding-bottom: 20rpx;
}
.shopCont{
	background: #FFFFFF;
}
.shopCtop{
	display: flex;
	padding: 20rpx 24rpx 6rpx 20rpx;
	justify-content: space-between;
	background: #FFFFFF;
}
.goodsMSBox{
	display: flex;padding-left: 24rpx;
}
.goodsMs{
	font-size: 18rpx;
	color: #FF063A;
	padding: 4rpx 8rpx;
	border-radius: 6rpx;
	border: 1px solid #FF063A;
	margin-right: 16rpx;
}
.timeBox{
	display: flex;justify-content: space-between;
	padding: 20rpx 24rpx;
	font-size: 26rpx;
	color: #666E80;
}
.shareIcon{
	width: 33rpx;height: 33rpx;margin-left: 10rpx;
}
.shareBox{
	display: flex;font-size: 24rpx;
color: #666666;padding-top: 6rpx;
line-height: 33rpx;
}
.jtIcon{
	width: 24rpx;height: 24rpx;margin-top: 6rpx;
}
.buyLine{
	display: flex;justify-content: space-between;
	padding: 15rpx 24rpx;font-size: 26rpx;
color: #666E80;
}
.buyBOx{
	background: #FFFFFF;margin-top: 20rpx;
	
}
.buyData{
	color: #222222;display: flex;
}
.goodsGuige{
/* 	width: 150rpx; */
	height: 50rpx;line-height: 48rpx;
	background: #F6F6F6;
	border-radius: 5rpx;
	font-size: 24rpx;
	color: #222222;text-align: center;
	margin-left: 24rpx;
	padding: 0 20rpx;
	display: inline-block;
}
.activeGuige{
	width: 146rpx;
	height: 46rpx;line-height: 46rpx;
	border: 2rpx solid #FF0035;
	border-radius: 5rpx;
	font-size: 24rpx;
	color: #FF0035;text-align: center;
	background: #ffffff;
}
.numJsbox{
	display: flex;overflow: hidden;
}
.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;
}
.mealBox{
	background: #FFFFFF;
	padding: 20rpx 24rpx;
	margin-top: 20rpx;
}
.fwlcTitle{
	color: #666666;font-size: 30rpx;font-weight: 500;
}
.mealTop{
	display: flex;
	justify-content: space-between;
	height: 72rpx;
	line-height: 72rpx;
	font-weight: 500;
	font-size: 26rpx;
	color: #222222;
	font-size: 26rpx;
	padding: 0 20rpx;
}
.mealNum{
	text-align: center;
	width: 120rpx;
}
.mealexpire{
	text-align: center;	width: 120rpx;
}
.mealName{
	width: 460rpx;
}
.mealTop2{
	display: flex;
	justify-content: space-between;
	height: 72rpx;
	line-height: 72rpx;
	font-weight: 500;
	font-size: 26rpx;
	color: #222222;
	font-size: 26rpx;
	padding: 0 20rpx;
	background: #FFF6DB;
}
.mealXj{
	background: #FFFCF3;
}
.xjLine{
	display: flex;
	font-weight: 500;
	font-size: 26rpx;
	color: #222222;
	padding: 20rpx 20rpx;
}
.xjyd{
	width: 8rpx;
	height: 8rpx;
	background: #FABF1B;
	border-radius: 50rpx;
	margin-top: 12rpx;
	margin-right: 10rpx;
}
.mealMs{
	background: #FFFFFF;
	padding: 20rpx;
	font-weight: 400;
	font-size: 24rpx;
	color: #9A9A9A;
	line-height: 38rpx;
}
.goodsDetailTitle{
	color: #666666;
	font-size: 30rpx;
	font-weight: 500;
	background: #FFFFFF;
	padding: 20rpx 24rpx;
}
.goodsDetail{
	margin-top: 20rpx;
	padding-bottom: 30rpx;
	background: #FFFFFF;
}
.goodsDetail img{
	width: 750rpx;
}
.goodsDetail image{
	width: 750rpx;
}.bottom{
	background: #FFFFFF;
	display: flex;
	justify-content: space-between;
	position: fixed;
	width: 100%;
	padding:30rpx 0;
    padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom); 
	left: 0;bottom: 0;
	box-shadow: 0rpx -2rpx 16rpx 0rpx rgba(153,153,153,0.2);
}
.bleft{
	font-weight: 500;
	color: #222222;
	padding-left: 50rpx;
}
.Btn{
	width: 532rpx;text-align: center;
	height: 86rpx;line-height: 86rpx;
	/* background: #FCD903; */
	border-radius: 43rpx;
	font-size: 32rpx;
	color: #110B01;
	margin-right: 36rpx;
}
.kefuIcon{
	width: 50rpx;height: 50rpx;
}
.bottomTianc{
	height: 160rpx;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom); 
}
.carTis{
	color: #EC0F0A;font-size: 20rpx;
	text-align: right;
	padding-right: 24rpx;
}
.guigeBox{
	/* height: 50rpx; */
    height: 52rpx;
	width: 500rpx;
	overflow: hidden;
}
.guigeBox2{
	flex-wrap: nowrap;justify-content: flex-end;white-space: nowrap;
	height: 50rpx;
}
.tkBox{
	width: 100vw;height: 100vh;background: rgba(0,0,0,0.5);
	position: fixed;left: 0;top: 0;
	z-index: 11;
}
.tkCont{
	width: 750rpx;
	height: 611rpx;
	background: #FFFFFF;
	border-radius: 28rpx 28rpx 0rpx 0rpx;
	position: absolute;
	left: 0;bottom: 0;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}
.tkCont2{
	width: 750rpx;
	height:50vh;
	background: #FFFFFF;
	border-radius: 28rpx 28rpx 0rpx 0rpx;
	position: absolute;
	left: 0;bottom: 0;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	overflow-y: auto;
}
.tkTop{
	display: flex;padding: 40rpx 24rpx;
	padding-bottom: 25rpx;
}
.tkImg{
	width: 160rpx;
	height: 160rpx;border-radius: 13rpx;
}
.tkName{
	font-size: 30rpx;
	color: #222222;
	line-height: 42rpx;
}
.tkNameBox{
	padding-left: 24rpx;width: 500rpx;
}
.chahao{
	width: 22rpx;height: 22rpx;padding-top: 10rpx;
}
.buyLine{
	display: flex;justify-content: space-between;
	padding: 15rpx 24rpx;font-size: 26rpx;
color: #666E80;
}
.buyBOx{
	background: #FFFFFF;margin-top: 20rpx;
	
}
.buyData{
	color: #222222;display: flex;

	
}
.carModelLine{
		max-width: 560rpx;
	white-space: nowrap;      /* 确保文本在一行内显示 */
	  overflow: hidden;         /* 超出容器部分隐藏 */
	  text-overflow: ellipsis
}

.activeGuige{
	width: 146rpx;
	height: 46rpx;line-height: 46rpx;
	border: 2rpx solid #FF0035;
	border-radius: 5rpx;
	font-size: 24rpx;
	color: #FF0035;text-align: center;
	background: #ffffff;
	font-weight: 500;
}
.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;
}


.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;
}
.tkTOp2{
	display: flex;justify-content: space-between;
	font-size: 30rpx;
	padding: 30rpx;
}
.keyongLine{
	padding: 16rpx 24rpx;
	font-size: 26rpx;
	border-bottom: 1px solid #eaeaea;
}
.mealBox img{
	width: 100%;
}
.hjt{
	width: 12rpx;height: 24rpx;
	margin-top: 6rpx;margin-left: 10rpx;
}
</style>