wxThird/pages/subPack/maintainSubmit.vue

<template>
<view class="box">
 <view class="cont">
	 <view class="itemBox flex">
		 <image class="itemIMg" src="../../static/timg/noimg.png" mode=""></image>
		 <view class="itemRight">
		 	<view class="itemName">【经济车型】全合成机油保养套餐全合成机油</view>
			<view class="buyType">单次购买</view>
			<view class="priceBox">
				<view class="price">¥365</view>
				<view class="itemNum">X1</view>
			</view>
			<view class="itemnotes">注：该商品购买后不支持线上退款</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="goodsBox">
	 	 <view class="goodsline flex" style="border-bottom: 1px solid #EEEEEE;">
	 		 <view class="goodsLeft">商品总价</view>
	 		 <view class="goodRight">¥2084.00</view>
	 	 </view>
	 	 <view class="goodsline flex" >
	 	 		 <view class="goodsLeft"></view>
	 	 		 <view class="goodRight" style="font-size: 26rpx;font-weight: 500;">合计 <span style="color: #EC0F0A;"> ¥1085.00</span></view>
	 	 </view>
	 </view>
	 <view class="goodsBox">
	 	 <view class="goodsline flex" style="border-bottom: 1px solid #EEEEEE;">
	 		 <view class="goodsLeft">支付方式</view>
	 		 <view class="goodRight">线上支付</view>
	 	 </view>
	 	 <view class="goodsline flex" >
	 	 		 <view class="goodsLeft">使用方式</view>
	 	 		 <view class="goodRight" >到店使用</view>
	 	 </view>
	 </view>
	 
 </view>
 
<view style="height: 150rpx;"></view>
 
 <view class="bottom">
	 <view class="bleft">
		 <span>合计</span>
		 <span>¥</span>
		 <span style="font-weight: 500;font-size: 34rpx;color: #EC0F0A;">294</span>
	 </view>
	 <view class="Btn">提交订单</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");
			
		},
		onShow() {
			
		},
		methods: {
			
			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;
}
.cont{
	padding: 20rpx 24rpx;
}
.itemBox{
	background: #FFFFFF;
	border-radius: 16rpx;padding: 24rpx;
}
.itemIMg{
	width: 180rpx;
	height: 180rpx;border-radius: 10rpx;
}
.flex{
	display: flex;
}
.itemRight{
	width: 450rpx;padding-left: 24rpx;
}
.itemName{
	font-weight: 500;
	font-size: 28rpx;
	color: #222222;
	line-height: 40rpx;
}
.buyType{
	width: 106rpx;text-align: center;
	height: 32rpx;line-height: 32rpx;
	border-radius: 5rpx;
	border: 1px solid #FF0035;font-size: 22rpx;
color: #FF0035;
margin-top: 10rpx;
}
.priceBox{
	display: flex;justify-content: space-between;padding-top: 10rpx;
}
.price{
	font-weight: 500;
	font-size: 36rpx;
	color: #222222;
	line-height: 50rpx;
}
.itemNum{
	font-size: 34rpx;line-height: 50rpx;
	color: #686868;
}
.itemnotes{
	font-size: 24rpx;padding-top: 12rpx;
	color: #FFC107;
}
.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;
}
.goodsBox{
	padding: 10rpx 18rpx;font-size: 26rpx;
color: #222222;background: #FFFFFF;margin-top: 20rpx;
border-radius: 16rpx;
}
.goodsline{
	justify-content: space-between;
	padding: 18rpx 0;
}
.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;
}
.bleft{
	font-weight: 500;
	font-size: 26rpx;
	color: #222222;
	line-height: 86rpx;
	padding-left: 50rpx;
}
.Btn{
	width: 223rpx;text-align: center;
	height: 86rpx;line-height: 86rpx;
	background: #FCD903;
	border-radius: 43rpx;
	font-size: 32rpx;
	color: #110B01;
	margin-right: 36rpx;
}

</style>