wxThird/pages/subPack/maintain.vue

<template>
<view class="box">
 <view class="top" :style="{background:'#'+themeColor}">
	 <view class="inputBox">
		 <view class="ibLeft">
			 <image class="ibCarIcon" src="../../static/timg/nocar.png" mode=""></image>
			 <view class="ibCarBox">
				 <view class="ibCar">大众 捷达</view>
				 <image src="../../static/img2/xia.png" mode="" class="xiaIcon"></image>
			 </view>
		 </view>
		 <view class="ibRight">
			 <image src="../../static/img2/gl.png" mode="" class="glIcon"></image>
			 <input type="text" 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">正品保障</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>保养记录</span>
		 			 <span>  | </span>
		 			 <span>保养手册</span>
		 		 </view>
		 </view>
		 <view class="znBox">
			 <view class="znCont">
				 <view class="znCar">智能推荐-大众 捷达</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">
				 <view class="lineTop">
					 <image class="lineImg" src="../../static/timg/noimg.png" mode=""></image>
					 <view class="lineNameBox">
						 <view class="goodsName">全合成机油保养2次</view>
						 <view class="goodsMs">含:发动机机油、机油滤芯、雾化杀菌等</view>
						 <view class="goodsKbox">
						 	<view class="goosK1">增效全合成</view>
						 	<view class="goosK2">粘度级别</view>
						 	<!-- <view class="goosK2">0W-20/5W-40/5W-30</view> -->
						 </view>
						 <view class="bfb">有91.4%的车主选择本商品</view>
					 </view>
				 </view>
				 <view class="tcBox">
					 <view class="tcLine">
						 <view class="tcTitle">
							 <view class="tcName">单次购买</view>
							 
						 </view>
						 <view class="tcprice">
							 <span class="tcSpan1">¥</span>
							 <span class="tcSpan2">294</span>
							 <span class="tcSpan3">/次</span>
						 </view>
					 </view>
					 <view class="tcLine">
						 <view class="tcTitle">
							 <view class="tcName">保养超值卡</view>
							 <view class="tcNameTs">2次更划算</view>
						 </view>
						 <view class="tcprice">
							 <span class="tcSpan1">¥</span>
							 <span class="tcSpan2">294</span>
							 <span class="tcSpan3">/次</span>
							 <span class="tcSpan3" style="padding-left: 10rpx;">2次</span>
							 <span class="tcSpan1">¥588</span>
						 </view>
					 </view>
				 </view>
			 </view>
		 </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">
			<view class="bLeftImgBox">
				<image class="qingdanIcon" src="../../static/img2/qingdan.png" mode=""></image>
				<view class="qdTxt">清单</view>
				<view class="qdNum">1</view>
			</view>
			<view>
				<view class="bottomprice">
					<span class="bSpan1">￥</span>
					<span class="bSpan2">298</span>
				</view>
				<view class="byh">
					<span class="bspan3">已优惠</span>
					<span class="bspan4"> ¥0</span>
				</view>
			</view>
		</view>
		<view class="bottomBtn">立即购买</view>
	</view>
 </view>
 <!-- 提交订单弹框-->
 <view class="tkBox">
	 <view class="tkCont">
		 <view class="tkTop">
			 <image class="tkImg" src="../../static/timg/noimg.png" mode=""></image>
			 <view class="tkNameBox">
				 <view class="tkName">【豪华车型】全合成机油保养套餐</view>
				 <view class="goodsPrice">
				 	<view class="goodsPrice2">￥</view>
				 	<view class="goodsPrice3">294</view>
				 	<view class="goodsPrice4" >原价：¥1998</view>
				 </view>
				 
			 </view>
			 <image class="chahao" src="../../static/img2/chahao.png" mode=""></image>
		 </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="tkBottom">
			 <view class="tkBottomBtn" @click="goSubmit">立即购买</view>
		 </view>
		 
	 </view>
 </view>
 
 
 
 <!-- 提交订单弹框-->
</view>
</template>

<script>
	export default {
		components: {
			
		},
		
		data() {
			return {
				themeColor:'',
				ext:'',
				goodsnum:1,
			}
		},
		onLoad(opt) {
			this.ext = this.$common.getExtStoreId();
			this.themeColor = uni.getStorageSync("themeColor");
			uni.setNavigationBarColor({
				frontColor: "#000000",
				backgroundColor: '#' + this.themeColor
			})
		},
		onShow() {
			
		},
		methods: {
			goItem(){
			  uni.navigateTo({
			  	url:'maintainItem'
			  })	
			},
			goSubmit(){
				uni.navigateTo({
					url:'maintainSubmit'
				})
			},
			getAboutMember(){
				uni.showLoading({
					title: '加载中'
				})
				this.$http('miniApp2/sys/getAboutMember', {
				    unionID:this.unionID
				}, 'GET').then(res => {
					uni.hideLoading();
					
				
				})
			},
			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: 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);
}
.top{
	height: 170rpx;
	padding: 40rpx 24rpx;
}
.inputBox{
	background: rgba(255,255,255,0.5);
	border-radius: 38rpx;line-height: 42rpx;
	border: 2rpx solid #FFFFFF;
	padding: 18rpx 30rpx;font-size: 26rpx;color: #222222;
	display: flex;justify-content: space-between;
}
.xiaIcon{
	width: 12rpx;height: 9rpx;margin-top: 18rpx;
}
.ibCarIcon{
	height: 42rpx;width: 42rpx;
}
.glIcon{
	width: 34rpx;height: 34rpx;margin-top: 6rpx;
}
.ibLeft{
	display: flex;
}
.ibRight{
	display: flex;
}
.ibCarBox{
	display: flex;
}
.glInput{
	width: 160rpx;line-height: 42rpx;height: 42rpx;
	padding-left: 10rpx;
}
.msIcon{
	width: 20rpx;height: 20rpx;margin-top: 4rpx;
}
.msTxt{
	font-weight: 500;margin-left: 12rpx;
	font-size: 20rpx;
	color: #A77102;
}
.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 100%);
	border-radius: 23rpx;
	padding: 24rpx 20rpx 0 24rpx;
	margin-top: -50rpx;
}
.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://dmsphoto.66km.com.cn/thFiles/A88B34CF-1BEB-4E0F-8C0B-E6FD2C858B73.png') no-repeat;
	background-size: 100% 100%;
	height: 148rpx;
}
.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;
}
.lineImg{
	width: 162rpx;
	height: 162rpx;
	border-radius: 10rpx;
}
.lineTop{
	display: flex;
}
.lineBox{
	margin-top: -52rpx;
}
.goodsKbox{
	display: flex;flex-wrap: wrap;
}
.goosK1 {
	height: 25rpx;line-height: 25rpx;padding: 0 8rpx;
	border: 1rpx solid #EC0F0A;font-size: 18rpx;
color: #EC0F0A;margin-right: 10rpx;
}
.goosK2{
	height: 25rpx;line-height: 25rpx;padding: 0 8rpx;color: #000000;
	border: 1rpx solid #FCD903;font-size: 18rpx;
}
.goodsName{
	font-weight: 500;
	font-size: 28rpx;
	color: #222222;
	line-height: 40rpx;
}
.goodsMs{
	font-weight: 400;padding-top: 5rpx;
	font-size: 20rpx;padding-bottom: 10rpx;
	color: #8B8B8B;
	line-height: 28rpx;
}
.bfb{
	font-size: 20rpx;padding-top: 10rpx;
	color: #FFD804;
	line-height: 28rpx;
}
.lineNameBox{
	padding-left: 20rpx;    width: 500rpx;
}
.tcLine{
	background: #F5F5F5;
	border-radius: 14rpx;
	border: 1px solid #E0E0E0;
	width: 316rpx;
	height: 138rpx;
}
.tcName{
	font-weight: 500;
	font-size: 28rpx;
	color: #435B6E;
	line-height: 40rpx;
	padding-left: 25rpx;padding-top: 24rpx;
}
.tcTitle{
	display: flex;
}
.tcprice{
	padding-top: 4rpx;font-size: 20rpx;
color: #666666;padding-left: 25rpx;
}
.tcSpan2{
	font-size: 34rpx;
	color: #000000;
}
.tcSpan2{
	font-size: 20rpx;
	color: #000000;
}
.tcNameTs{
	width: 99rpx;margin-top: 30rpx;margin-left: 10rpx;
	height: 25rpx;
	background: #FE0200;
	text-align: center;
	line-height: 26rpx;
	font-size: 18rpx;
	color: #FFFFFF;
}
.tcBox{
	display: flex;justify-content: space-between;
	padding-top: 26rpx;
}
.bottom{
	width: 100%;
	height: 186rpx;
	position: fixed;
	bottom: 0rpx;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}
.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;
}
.qingdanIcon{
	width: 40rpx;height: 45rpx;
}
.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: -2rpx;
	right: -4rpx;
	border-radius: 50%;
}
.qdTxt{
	font-size: 20rpx;
	color: #666666;
	line-height: 28rpx;
}
.bottomprice{
	padding-left: 38rpx;
	font-weight: 600;
	font-size: 20rpx;padding-top: 12rpx;
	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: #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;
}
.tkTop{
	display: flex;padding: 40rpx 24rpx;
}
.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: 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;
}
.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;
}
</style>