添加支付说明

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

 <template>
 	<view>
+
 		<uni-popup type="bottom" ref="coinPop" :maskClick="false" :isMaskClick="false">
-			<view class="body" style="width: 100%;height: 100%;">
-				<scroll-view scroll-y>
-					<view style="display: flex;flex-direction: column;align-items: flex-end;">
-						<image @click="handleClose"
-							style="width: 30rpx;height: 30rpx;display: flex;align-items: right;margin-top: 20rpx;margin-right: 20rpx;margin-bottom: 10rpx;"
-							src="@/static/index/ic_quit_white.png"></image>
-					</view>
-					<view style="display: flex;flex-direction: column;align-items: center;margin-bottom: 20rpx;">
-						<view style="font-size: 38rpx;color: black;">超多精彩好剧一键解锁</view>
-						<view class="flex">
-							<view v-if="point>0" style="display: flex;flex-direction: row;margin-top: 10rpx;">
-								<view style="font-size: 28rpx;color: #644238;margin-top: 12rpx;">解锁本集：</view>
-								<view style="font-size: 42rpx;color: red;font-weight: 777;">{{point}}</view>
-								<view style="font-size: 28rpx;color: #644238;margin-top: 12rpx;margin-left: 6rpx;">看点
-								</view>
+			<view style="position: relative;">
+				<view v-if="agreeFlag"
+					style="width: 100%;height: 100%;background-color: black;opacity: 0.8;display: flex;position: absolute;z-index: 100;color: white;flex-direction: column;align-items: center;padding:40rpx 0;">
+					<text style="font-size: 30rpx;">
+						付费须知 \n
+						1、看点和会员属于虚拟商品，一经购 \n
+						2、未满18岁的未成年人需要在监护人主导、同意下进行相关付费操作;\n
+						3、充值看点一般5分钟内到账，如未到账请在“我的”页面联系客服;
+					</text>
+					<image @click="agreeFlag=false"
+						style="width: 30rpx;height: 30rpx;margin-top:150rpx;"
+						src="@/static/index/ic_quit_white.png"></image>
+					</view>
+				
+				<view class="body" style="width: 100%;height: 100%;">
+					<scroll-view scroll-y>
+						<view style="display: flex;flex-direction: column;align-items: flex-end;">
+							<view style="display: flex;flex-direction: row;">
+								<view @click="handleAgree" style="margin-top: 10rpx;margin-right: 10rpx;">付费须知></view>
+								<image @click="handleClose"
+									style="width: 30rpx;height: 30rpx;display: flex;align-items: right;margin-top: 20rpx;margin-right: 20rpx;margin-bottom: 10rpx;"
+									src="@/static/index/ic_quit_white.png"></image>
 							</view>
-							<view v-if="point>0" style="width: 60rpx;"></view>
-							<view style="display: flex;flex-direction: row;margin-top: 10rpx;">
-								<view style="font-size: 28rpx;color: #644238;margin-top: 12rpx;">账户余额：</view>
-								<view style="font-size: 42rpx;color: red;font-weight: 777;">{{userBean.point}}</view>
-								<view style="font-size: 28rpx;color: #644238;margin-top: 12rpx;margin-left: 6rpx;">看点
+						</view>
+						<view style="display: flex;flex-direction: column;align-items: center;margin-bottom: 20rpx;">
+							<view style="font-size: 38rpx;color: black;">超多精彩好剧一键解锁</view>
+							<view class="flex">
+								<view v-if="point>0" style="display: flex;flex-direction: row;margin-top: 10rpx;">
+									<view style="font-size: 28rpx;color: #644238;margin-top: 12rpx;">解锁本集：</view>
+									<view style="font-size: 42rpx;color: red;font-weight: 777;">{{point}}</view>
+									<view style="font-size: 28rpx;color: #644238;margin-top: 12rpx;margin-left: 6rpx;">
+										看点
+									</view>
+								</view>
+								<view v-if="point>0" style="width: 60rpx;"></view>
+								<view style="display: flex;flex-direction: row;margin-top: 10rpx;">
+									<view style="font-size: 28rpx;color: #644238;margin-top: 12rpx;">账户余额：</view>
+									<view style="font-size: 42rpx;color: red;font-weight: 777;">{{userBean.point}}
+									</view>
+									<view style="font-size: 28rpx;color: #644238;margin-top: 12rpx;margin-left: 6rpx;">
+										看点
+									</view>
 								</view>
 							</view>
 						</view>
-					</view>
-					<view class="section">
-						<view class="pack-box">
-							<view class="pack-item"
-								:style="item.largeType !=='vip' ?'background: #f5f5f5;':'background: #f4c98b;'"
-								:class="[{active: index==selectedIndex}]" 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">
-										{{item.firstPayPrice}}元
-									</view>
+						<view class="section">
+							<view class="pack-box">
+								<view class="pack-item"
+									:style="item.largeType !=='vip' ?'background: #f5f5f5;':'background: #f4c98b;'"
+									:class="[{active: index==selectedIndex}]" v-for='(item, index) in vipList'
+									:key='index' @click="choosePack(item, index)">
+									<view style="display: flex;flex-direction: column;align-items: center;">
 
-									<view class="name row">
-										{{item.title}}
-									</view>
+										<view class="price row">
+											{{item.firstPayPrice}}元
+										</view>
+
+										<view class="name row">
+											{{item.title}}
+										</view>
 
-									<view class="origin row" v-if="item.remarks!=null&&item.remarks!=''">
-										{{item.remarks}}
+										<view class="origin row" v-if="item.remarks!=null&&item.remarks!=''">
+											{{item.remarks}}
+										</view>
+									</view>
+									<view class="cut-down" v-if='item.topTitle!=null&&item.topTitle.length>0'>
+										{{item.topTitle}}
+									</view>
+									<view v-if="index==selectedIndex" style="position: absolute;bottom: 0;right: 0;">
+										<image mode="scaleToFill"
+											style="width: 100rpx;height: 100rpx;display: flex;align-items: right;"
+											src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/ic_loading.gif">
+										</image>
 									</view>
 								</view>
-								<view class="cut-down" v-if='item.topTitle!=null&&item.topTitle.length>0'>
-									{{item.topTitle}}
-								</view>
-								<view v-if="index==selectedIndex" style="position: absolute;bottom: 0;right: 0;">
-									<image mode="scaleToFill"
-										style="width: 100rpx;height: 100rpx;display: flex;align-items: right;"
-										src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/ic_loading.gif">
-									</image>
-								</view>
+
 							</view>
+						</view>
 
+						<view style="display: flex;flex-direction: column;align-items: center;">
+							<view style="font-size: 24rpx;color: gray;margin-top: 16rpx;margin-bottom: 18rpx;">
+								订单中如有疑问，请在个人中心联系客服</view>
 						</view>
-					</view>
+					</scroll-view>
+				</view>
+
 
-					<view style="display: flex;flex-direction: column;align-items: center;">
-						<view style="font-size: 24rpx;color: gray;margin-top: 16rpx;margin-bottom: 18rpx;">
-							订单中如有疑问，请在个人中心联系客服</view>
-					</view>
-				</scroll-view>
+				
 			</view>
 		</uni-popup>
 	</view>
@@ -96,6 +121,7 @@
 			return {
 				vipList: [],
 				selectedIndex: 0,
+				agreeFlag: false,
 				userBean: {},
 				showClone: false
 			};
@@ -142,6 +168,9 @@
 					}
 				});
 			},
+			handleAgree() {
+				this.agreeFlag = true
+			},
 			handleClose() {
 				this.$refs.coinPop.close('bottom');
 				this.$emit('close');
@@ -204,14 +233,14 @@
 						order_token: ttData.params.order_token,
 					},
 					service: 5,
-					success(res) {
+					success(res) {
 						if (res.code == 0) {
 							// 拉取服务器，是否支付成功
 							that.queryOrderStatus(largeType, ttData.tidStr)
 						}
 					},
-					fail(res) {
-						
+					fail(res) {
+
 						message.notify(res.errMsg);
 					},
 				});