添加金币弹窗

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

@@ -3,11 +3,25 @@
 		<uni-popup type="bottom" ref="select" :maskClick="false" :isMaskClick="false">
 			<view class="body">
 				<scroll-view scroll-y style="height: 80%;">
-					<view @click="handleClose" style="color: red;">关闭</view>
+					<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: 15rpx;"
+							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: 30rpx;color: black;">超多精彩好剧一键解锁</view>
+						<view style="display: flex;flex-direction: row;margin-top: 10rpx;">
+							<view style="font-size: 24rpx;color: #644238;margin-top: 16rpx;">账户余额: </view>
+							<view style="font-size: 40rpx;color: red;font-weight: 777;">123</view>
+							<view style="font-size: 24rpx;color: #644238;margin-top: 16rpx;"> K币</view>
+						</view>
+					</view>
 					<view class="section">
 						<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 style="display: flex;flex-direction: column;align-items: center;">
+
 									<view class="name row">
 										{{item.title}}
 									</view>
@@ -17,11 +31,22 @@
 									<view class="origin row" v-if='item.oldPrice'>
 										原价：{{item.oldPrice}}
 									</view>
+								</view>
 								<view class="cut-down" v-if='item.oldPrice-item.firstPayPrice>0'>
 									立省 {{item.oldPrice-item.firstPayPrice}} 元
 								</view>
+								<view v-if="index==selectedIndex" style="position: absolute;bottom: 0;right: 0;">
+									<image style="width: 24rpx;height: 24rpx;display: flex;align-items: right;"
+										src="@/static/index/ic_quit_white.png"></image>
+								</view>
+							</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: 8rpx;">
+							订单中如有疑问，请在个人中心联系客服</view>
 					</view>
 				</scroll-view>
 			</view>
@@ -48,6 +73,11 @@
 			};
 		},
 		methods: {
+			// 支付完成回调
+			paySuccess() {
+				this.$emit('paySuccess');
+				this.handleClose();
+			},
 			handleShow() {
 				this.$refs.select.open('bottom');
 
@@ -57,7 +87,10 @@
 					success: ({
 						data
 					}) => {
-						this.vipList = data.list
+						this.vipList = data.list;
+						if (data.list != null) {
+							this.selectedIndex = data.list[0].activityType;
+						}
 					}
 				});
 			},
@@ -67,7 +100,8 @@
 			},
 			choosePack(item, index) {
 				this.selectedIndex = index;
-				// this.handlePay();
+
+				this.handlePay();
 			},
 			handlePay() {
 				let that = this;
@@ -100,11 +134,7 @@
 					success(res) {
 						message.notify('支付成功')
 
-
-
-						// setTimeout(() => {
-						// 	navigateTo(`/pages/home`)
-						// }, 1000);
+						that.paySuccess();
 					},
 					fail(res) {
 						message.notify('取消支付')
@@ -159,7 +189,7 @@
 
 				.pack-item {
 					margin-bottom: 25rpx;
-					margin-right: 20rpx;
+					margin-right: 22rpx;
 					width: calc(44%);
 					height: 200rpx;
 					display: flex;
@@ -194,13 +224,11 @@
 					.origin {
 						font-size: 22rpx;
 						color: #333;
-						text-decoration: line-through;
 					}
 
 					.cut-down {
 						position: absolute;
 						top: 0;
-						right: 0;
 						color: #fff;
 						background: #ff502f;
 						font-size: 22rpx;

vedio/pages/my/my.vue

@@ -61,8 +61,7 @@
 			{{ versionName }}
 		</view>
 		
-		<coin-popup :show="showAnimate" @close="showAnimate = false">
-
+		<coin-popup :show="showAnimate" @close="showAnimate = false" @paySuccess="paySuccess">
 		</coin-popup>
 	</view>
 
@@ -155,6 +154,9 @@
 						})
 					}
 				});
+			},
+			paySuccess(){
+				
 			}
 		}
 	};