VIP弹窗添加付费须知

vedio/components/charge-dialog/charge-dialog.vue

 <template>
+	<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;width: 90%;white-space:pre-wrap">
+				{{agreeText}}
+			</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="height: 60%;">
 			<scroll-view scroll-y>
 				<view style="display: flex;flex-direction: column;align-items: flex-end;">
+					<view style="display: flex;flex-direction: row;">
+						<view @click="agreeFlag=true" style="margin-top: 12rpx;margin-right: 10rpx;">付费须知></view>
 						<image @click="onClose"
 							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" />
 					</view>
+				</view>
 				<view style="display: flex;flex-direction: column;align-items: center;margin-bottom: 20rpx;">
 					<view style="font-size: 38rpx;color: black;">{{title}}</view>
 					<view class="flex">
@@ -57,6 +70,7 @@
 				</view>
 			</scroll-view>
 		</view>
+	</view>
 </template>
 
 <script>
@@ -83,6 +97,8 @@
 					playerId: this.playerId
 				},
 				point: 0,
+				agreeFlag: false,
+				agreeText: "付费须知\n\n1、看点和会员属于虚拟商品，一经购买不可退换\n\n2、未满18岁的未成年人需要在监护人主导、同意下进行相关付费操作;\n\n3、充值看点一般5分钟内到账，如未到账请在“我的”页面联系客服;"
 			};
 		},
 		props: {

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

 <template>
 	<view>
 		<uni-popup :type="popType" :animation="showAnim" ref="coinPop" :maskClick="false" :isMaskClick="false">
+			<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;width: 90%;white-space:pre-wrap">
+						{{agreeText}}
+					</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="margin-top: 500rpx;border-radius: 10rpx;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="agreeFlag=true" style="margin-top: 12rpx;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" />
 							</view>
+						</view>
 						<view style="display: flex;flex-direction: column;align-items: center;margin-bottom: 20rpx;">
 							<view style="font-size: 38rpx;color: black;">{{title}}</view>
 							<view v-if="!isFirstPayFlag" 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 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 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>
@@ -30,8 +47,8 @@
 							<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)">
+									: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}}元
@@ -64,6 +81,7 @@
 						</view>
 					</scroll-view>
 				</view>
+			</view>
 		</uni-popup>
 	</view>
 </template>
@@ -102,7 +120,9 @@
 				os: 'android',
 				isFirstPayFlag: false,
 				popType: 'bottom',
-				showAnim: true
+				showAnim: true,
+				agreeFlag: false,
+				agreeText: "付费须知\n\n1、看点和会员属于虚拟商品，一经购买不可退换\n\n2、未满18岁的未成年人需要在监护人主导、同意下进行相关付费操作;\n\n3、充值看点一般5分钟内到账，如未到账请在“我的”页面联系客服;"
 			};
 		},
 		methods: {
@@ -202,7 +222,7 @@
 					// 符合首充
 					vipBean = this.firstPayList[0];
 				}
-				if(this.os=='ios'){
+				if (this.os == 'ios') {
 					this.post({
 						url: '/vip/getVipPayParams',
 						data: {
@@ -217,7 +237,7 @@
 							that.wxPay(data, vipBean.largeType);
 						}
 					});
-				}else{
+				} else {
 					this.post({
 						url: '/vip/getVipPayParams/xpay',
 						data: {