代码优化

vedio/components/coin-popup/coin-popup.vue

@@ -37,7 +37,7 @@
 									v-for='(item, index) in vipList' :key='index' @click="choosePack(item, index)">
 									<view style="display: flex;flex-direction: column;align-items: center;">
 
-										<view class="price row">
+										<view class="price row">
 											{{item.firstPayPrice<=0 ? '免费试用' : item.firstPayPrice+'元'}}
 										</view>
 
@@ -63,6 +63,10 @@
 							</view>
 						</view>
 
+						<text class="trialStyle" v-show="hintText!=null&&hintText!=''">
+							{{hintText}}
+						</text>
+
 						<view style="display: flex;flex-direction: column;align-items: center;">
 							<view style="font-size: 24rpx;color: gray;margin-top: 16rpx;margin-bottom: 18rpx;">
 								订单中如有疑问，请在个人中心联系客服</view>
@@ -107,6 +111,7 @@
 				agreeFlag: false,
 				userBean: {},
 				agreementDto: null,
+				hintText: '',
 				os: 'android',
 				titleText: '超多精彩小说一键解锁',
 				showClone: false
@@ -152,15 +157,15 @@
 					showLoading: false,
 					success: ({
 						data
-					}) => {
-						console.log("agreement=",data.agreement);
-						if(data.agreement==undefined){
-							console.log("agreement=22222");
-							this.agreementDto = null;
-						}else{
-							this.agreementDto = data.agreement;
+					}) => {
+						console.log("agreement=", data.agreement);
+						if (data.agreement == undefined) {
+							console.log("agreement=22222");
+							this.agreementDto = null;
+						} else {
+							this.agreementDto = data.agreement;
 						}
-						
+
 					}
 				});
 			},
@@ -184,7 +189,7 @@
 			},
 			choosePack(item, index) {
 				this.selectedIndex = index;
-
+				this.hintText = this.vipList[this.selectedIndex].trailRemark;
 				this.handlePay();
 			},
 			handlePay() {
@@ -236,7 +241,7 @@
 				let that = this;
 				// 发起微信签约
 				wx.navigateToMiniProgram({
-					appId: "wxbd687630cd02ce1d",
+					appId: "wxbd687630cd02ce1d",
 					path: 'pages/index/index',
 					extraData: wxData.params,
 					success(res) {
@@ -380,4 +385,15 @@
 			}
 		}
 	}
+
+	.trialStyle {
+		display: flex;
+		align-items: center;
+		font-size: 30rpx;
+		color: gainsboro;
+		margin: 20rpx;
+		word-wrap: break-word;
+		word-break: break-all;
+		white-space: pre-line;
+	}
 </style>
\ No newline at end of file

vedio/pagesA/vipPay/vipPay.vue

@@ -20,8 +20,9 @@
 							<view class="name row" :class="[{active2: index==selectedIndex}]">
 								{{item.title}}
 							</view>
-							<view class="price row" :class="[{active1: index==selectedIndex},{price2:item.firstPayPrice<=0}]">
-								<view style="font-size: 50rpx;">{{item.firstPayPrice<=0 ? '' : '￥'}}</view>
+							<view class="price row"
+								:class="[{active1: index==selectedIndex},{price2:item.firstPayPrice<=0}]">
+								<view style="font-size: 50rpx;">{{item.firstPayPrice<=0 ? '' : '￥'}}</view>
 								{{item.firstPayPrice<=0 ? '免费试用' : item.firstPayPrice}}
 							</view>
 							<view class="origin row" v-if='item.oldPrice'>
@@ -41,6 +42,10 @@
 			</view>
 		</view>
 
+		<text class="trialStyle" v-show="hintText!=null&&hintText!=''">
+			{{hintText}}
+		</text>
+
 
 		<view class="agreementWrp">
 			<checkbox-group @change="checkboxChange" style="width: 50rpx;">
@@ -82,6 +87,7 @@
 				os: 'android',
 				checked: false,
 				agreementDto: null,
+				hintText: ''
 			}
 		},
 		methods: {
@@ -117,6 +123,7 @@
 			},
 			choosePack(item, index) {
 				this.selectedIndex = index;
+				this.hintText = this.vipList[this.selectedIndex].trailRemark;
 			},
 			handleUnsign() {
 				if (this.agreementDto) {
@@ -274,7 +281,7 @@
 					display: inline-block;
 
 					.active {
-						background-color: #FEF8F5;
+						background-color: #FEEDD0;
 						border: 4rpx solid #FDEADC !important;
 					}
 
@@ -311,10 +318,10 @@
 							font-size: 60rpx;
 							color: #000000;
 							font-weight: 700;
-						}
-						
-						.price2 {
-							font-size: 40rpx;
+						}
+
+						.price2 {
+							font-size: 40rpx;
 						}
 
 						.active1 {
@@ -406,4 +413,15 @@
 			}
 		}
 	}
+
+	.trialStyle {
+		display: flex;
+		align-items: center;
+		font-size: 30rpx;
+		color: gainsboro;
+		margin: 20rpx;
+		word-wrap: break-word;
+		word-break: break-all;
+		white-space: pre-line;
+	}
 </style>
\ No newline at end of file