代码优化

vedio/pages.json

@@ -41,6 +41,7 @@
 		"pages": [{
 				"path": "vipPay/vipPay",
 				"style": {
+					"navigationBarTitleText": "会员中心",
 					"navigationStyle": "default",
 					"navigationBarBackgroundColor": "#ffffff",
 					"navigationBarTextStyle": "black"

vedio/pages/loading.vue

@@ -90,8 +90,10 @@
 								app.globalData.userId = data.idcode;
 								saveToken(data.token)
 								setTimeout(() => {
-									redirectTo('home?activiteFlag='+data.activiteFlag+"&idcode="+data.idcode);									
+									// redirectTo('home?activiteFlag='+data.activiteFlag+"&idcode="+data.idcode);									
+									redirectTo('/pagesA/vipPay/vipPay');									
 								}, 1000);
+								
 							}
 						});
 					},

vedio/pagesA/vipPay/vipPay.vue

 <template>
 	<view class="body">
-		<status-title :showBack="true" icon-color="white" font-color="white">会员支付</status-title>
 		<scroll-view scroll-y style="height: 100%;">
 
-			<image style="width: 100%;" src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/bg_vip_2.png" mode="widthFix" />
+			<image style="width: 100%;" src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/bg_heli_vip.png"
+				mode="widthFix" />
 
 			<view class="section">
 				<view class="title">
-					选择套餐
+					自动续费管理
 				</view>
 				<view class="pack-box">
 					<view class="pack-item" :class="[{active: index==selectedIndex}]" v-for='(item, index) in vipList'
 						:key='index' @click="choosePack(item, index)">
+						<view class="label" v-if="index==selectedIndex">
+							{{ '限时减10元' }}
+						</view>
 						<view class="name row">
 							{{item.title}}
 						</view>
-						<view class="price row">
-							￥{{item.firstPayPrice}}
+						<view class="price row" :class="[{active1: index==selectedIndex}]">
+							<view style="font-size: 22rpx;">￥</view>
+							{{item.firstPayPrice}}
 						</view>
 						<view class="origin row" v-if='item.oldPrice'>
-							原价：{{item.oldPrice}}
+							￥{{item.oldPrice}}
 						</view>
 						<view class="cut-down" v-if='item.oldPrice-item.firstPayPrice>0'>
 							立省 {{item.oldPrice-item.firstPayPrice}} 元
 						</view>
+
+						<view class="label2" v-if="index==selectedIndex">
+							{{ '仅需0.19元/天' }}
+						</view>
 					</view>
 				</view>
 			</view>
 
+
+			<view class="agreementWrp">
+				<checkbox-group @change="checkboxChange" style="width: 50rpx;">
+					<checkbox :checked="checked" style="transform:scale(0.6)"> </checkbox>
+				</checkbox-group>
+				<text>您已阅读并同意
+					<text class="agreementText" @click.stop="goAgreement">《连续订阅服务协议》</text>
+					与<text class="agreementText" @click.stop="goAgreement">《支付协议》</text>
+				</text>
+			</view>
+
+
 			<view class="section">
 				<button class="apply-button" @click="handlePay">立即开通</button>
 			</view>
 
-			<image style="width: 100%;" src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/bg_vip_0.png" mode="widthFix" />
-
-			<image style="width: 100%;margin-bottom: 80rpx;" src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/bg_vip_1.png" mode="widthFix" />
 		</scroll-view>
 	</view>
 </template>
@@ -58,6 +75,7 @@
 			return {
 				vipList: [],
 				selectedIndex: 0,
+				checked: false
 			}
 		},
 		methods: {
@@ -76,7 +94,12 @@
 				this.selectedIndex = index;
 			},
 			handlePay() {
-				let that=this;
+				if (!this.checked) {
+					message.notify("请阅读《连续订阅服务协议》与《支付协议》后勾选同意")
+					return
+				}
+
+				let that = this;
 				let vipBean = this.vipList[this.selectedIndex];
 
 				this.post({
@@ -93,9 +116,9 @@
 					}
 				});
 			},
-			wxPay(wxData){
+			wxPay(wxData) {
 				let wxParams = wxData.params;
-				let that=this;
+				let that = this;
 				// 发起微信支付
 				wx.requestPayment({
 					timeStamp: wxParams.timeStamp,
@@ -127,6 +150,16 @@
 						message.notify('取消支付')
 					}
 				})
+			},
+			checkboxChange(e) {
+				if (e.detail.value.length > 0) {
+					this.checked = true
+				} else {
+					this.checked = false
+				}
+			},
+			goAgreement() {
+
 			}
 		}
 	}
@@ -134,15 +167,13 @@
 
 <style lang="scss">
 	.body {
-		background-color: black;
+		background-color: white;
 		display: flex;
 		flex-direction: column;
 
 		.section {
-			padding: 0 30rpx;
 			display: flex;
 			flex-direction: column;
-			background: black;
 
 			.title {
 				font-size: 32rpx;
@@ -153,30 +184,34 @@
 
 			.pack-box {
 				margin-top: 25rpx;
-				margin-left: 40rpx;
 				display: flex;
+				margin-left: 30rpx;
 				flex-direction: row;
 				align-items: center;
 				flex-wrap: wrap;
 
 				.active {
-					border: 6rpx solid #fd5350 !important;
+					background-color: #FEF8F5;
+					border: 4rpx solid #FDEADC !important;
 				}
 
 				.pack-item {
 					margin-bottom: 25rpx;
-					margin-right: 40rpx;
-					width: calc(31% - 40rpx);
-					height: 200rpx;
+					margin-right: 30rpx;
+					width: calc(31% - 30rpx);
+					height: 260rpx;
 					display: flex;
 					flex-direction: column;
-					justify-content: space-around;
-					background: #f5f5f5;
-					border: 6rpx solid #f5f5f5;
-					border-radius: 10rpx;
+					align-items: center;
+					background: white;
+					border: 4rpx solid #EAECEC;
+					border-radius: 20rpx;
 					position: relative;
+					padding-top: 60rpx;
 
 					.row {
+						display: flex;
+						align-items: center;
 						margin: 8rpx 15rpx;
 						marign-bottom: 0;
 					}
@@ -191,18 +226,51 @@
 						color: #333;
 					}
 
+
 					.price {
-						font-size: 30rpx;
-						color: #fd5350;
+						font-size: 40rpx;
+						color: #000000;
 						font-weight: 700;
 					}
 
+					.active1 {
+						color: #fd5350;
+					}
+
 					.origin {
 						font-size: 22rpx;
 						color: #333;
 						text-decoration: line-through;
 					}
 
+					.label {
+						border-radius: 20rpx 0 20rpx 0;
+						width: 70%;
+						background: linear-gradient(90deg, #FC4F3B, #FBCB7A);
+						color: white;
+						font-size: 24rpx;
+						height: 50rpx;
+						line-height: 50rpx;
+						margin-right: 20rpx;
+						text-align: center;
+						position: absolute;
+						top: 0;
+						left: 0;
+					}
+
+					.label2 {
+						width: 100%;
+						border-radius: 0 0 20rpx 20rpx;
+						background-color: #FC4F3B;
+						color: white;
+						font-size: 24rpx;
+						height: 50rpx;
+						line-height: 50rpx;
+						text-align: center;
+						position: absolute;
+						bottom: 0;
+					}
+
 					.cut-down {
 						position: absolute;
 						top: 0;
@@ -227,5 +295,17 @@
 				margin: 30rpx auto;
 			}
 		}
+
+		.agreementWrp {
+			display: flex;
+			align-items: center;
+			color: darkgray;
+			font-size: 26rpx;
+			padding-left: 30rpx;
+
+			.agreementText {
+				color: #387EF4;
+			}
+		}
 	}
 </style>
\ No newline at end of file