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="#D53533">
 		<swiper-item v-for="(item,index) in ImgList">
 			<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">高级全合成</view>
		<view class="goodsMs">可选用5W30/5W40/0W20</view>
	</view>
	<view class="timeBox">
		<view class="itemTime">套餐有效期：购买之日起18个月</view>
		<view class="sell">
			<span>已售：</span><span style="color: #FFC107;">22081</span>
		</view>
	</view>
 </view>
 
 
 <view class="buyBOx">
	 <view class="buyLine">
		 <view class="buyTitle">已选车型</view>
		 <view class="buyData">{{carInfo.carModel?carInfo.carModel:''}}
		   <image class="jtIcon" src="../../static/timg/jthei.png" mode=""></image>
		 </view>
	 </view>
	 <view class="buyLine">
	 		 <view class="buyTitle">商品规格</view>
	 		 <view class="buyData">
				 <view class="goodsGuige activeGuige" style="margin-right: 24rpx;">单次购买</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="buyLine">
	 		 <view class="buyTitle">使用方式</view>
	 		 <view class="buyData">到店使用</view>
	 </view>
	 <view class="buyLine">
	 		 <view class="buyTitle">可用门店</view>
	 		 <view class="buyData">全部门店</view>
	 </view>
 </view>
 
 <view class="mealBox">
	 <view class="fwlcTitle">套餐内容</view>
	 <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" >
 	<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" @click="submitFn">提交订单</view>
 	</view>
 
 
</view>
</template>

<script>
	export default {
		components: {
			
		},
		
		data() {
			return {
				themeColor:'',
				ext:'',
				ImgList:[
					{url:'http://dmsphoto.66km.com.cn/thFiles/339E5DB5-F727-4F0F-AD41-1A2EBAB73883.png'},
					{url:'http://dmsphoto.66km.com.cn/thFiles/53DA3E26-5FA3-42DE-95A4-10BA255290A6.png'},
				],
				goodsnum:1,
				details:'11233',
				maintainId:'',
				detail:'',
				itemDefault:'',
				carInfo:'',
				
			}
		},
		onLoad(opt) {
			this.ext = this.$common.getExtStoreId();
			this.themeColor = uni.getStorageSync("themeColor");
			this.maintainId=opt.maintainId
			this.carInfo=this.$store.state.carInfo;
			this.getdetail()
		},
		onShow() {
			
		},
		methods: {
			submitFn(){
				uni.navigateTo({
					url:'maintainSubmit'
				})
			},
			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
						}
					})
				   
				})
			},
			
			
			
		}
	}
</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: #FF0000;
	padding-top: 14rpx;
	padding-right: 14rpx;
}
.goodsPrice2{
	font-size: 28rpx;
	font-weight: 400;
	color: #FF0000;
	padding-top: 10rpx;
	
}

.goodsPrice3{
	font-size: 40rpx;
	font-weight: 500;
	color: #FF0000;
}
.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;
	justify-content: space-between;
	background: #FFFFFF;
}
.goodsMSBox{
	display: flex;padding-left: 24rpx;
}
.goodsMs{
	font-size: 16rpx;
	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: 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: 88rpx;
	height: 44rpx;
	background: #F4F5F7;
	line-height: 44rpx;
	text-align: center;
	font-weight: 500;
	color: #333333;
	font-size: 24rpx;
	margin: 0 4rpx;
}
.goodsnumInput{
	width: 88rpx;
	height: 44rpx;
	background: #F4F5F7;
	line-height: 44rpx;
	text-align: center;
	font-weight: 500;
	color: #333333;
	font-size: 24rpx;
}
.numJj{
	width: 44rpx;
	height: 44rpx;
	background: #F4F5F7;
	border-radius: 0px 6rpx 6rpx 0px;	
	text-align: center;
	line-height: 44rpx;
	font-size: 32rpx;
	color: #999999;
}
.mealBox{
	background: #FFFFFF;
	padding: 20rpx 24rpx;
	margin-top: 20rpx;
}
.fwlcTitle{
	color: #333333;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: #333333;
	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); 
}
</style>