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">294</view>
 			<view class="goodsPrice4" >原价：¥1998</view>
 		</view>
 		<view class="shareBox" >
			<view class="shareTxt">分享</view>
			<image class="shareIcon" src="../../static/timg/share.png" mode=""></image>
		</view>
 	</view>
 	<view class="goodsName">【豪华车型】全合成机油保养套餐</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">奥迪A42006款2.0TFSI无极 标准型(国2)
		   <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="details" style="background: #fff;"></rich-text>
 </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'
			}
		},
		onLoad(opt) {
			this.ext = this.$common.getExtStoreId();
			this.themeColor = uni.getStorageSync("themeColor");
			
		},
		onShow() {
			
		},
		methods: {
			calculation(type){
				if(type==1){
					if(this.goodsnum>1){
						this.goodsnum--
					}
				}else{
					console.log("+++")
						this.goodsnum++
				}
			},
			getAboutMember(){
				uni.showLoading({
					title: '加载中'
				})
				this.$http('miniApp2/sys/getAboutMember', {
				    unionID:this.unionID
				}, 'GET').then(res => {
					uni.hideLoading();
					
				
				})
			},
			
			
			
		}
	}
</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;
}
</style>