Skip to content

U
uniapp_vedio
Commit 9615f61c authored by mengcuiguang's avatar mengcuiguang
Browse files
Options

添加金币弹窗

parent 61cc6aa2
Hide whitespace changes
Inline Side-by-side
Showing with 141 additions and 111 deletions
vedio/components/coin-popup/coin-popup.vue
View file @ 9615f61c
...@@ -3,26 +3,51 @@ ...@@ -3,26 +3,51 @@
<uni-popup type="bottom" ref="select" :maskClick="false" :isMaskClick="false"> <uni-popup type="bottom" ref="select" :maskClick="false" :isMaskClick="false">
<view class="body"> <view class="body">
<scroll-view scroll-y style="height: 80%;"> <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="section">
<view class="pack-box"> <view class="pack-box">
<view class="pack-item" :class="[{active: index==selectedIndex}]" <view class="pack-item" :class="[{active: index==selectedIndex}]"
v-for='(item, index) in vipList' :key='index' @click="choosePack(item, index)"> v-for='(item, index) in vipList' :key='index' @click="choosePack(item, index)">
<view class="name row"> <view style="display: flex;flex-direction: column;align-items: center;">
{{item.title}}
</view> <view class="name row">
<view class="price row"> {{item.title}}
￥{{item.firstPayPrice}} </view>
</view> <view class="price row">
<view class="origin row" v-if='item.oldPrice'> ￥{{item.firstPayPrice}}
原价：{{item.oldPrice}} </view>
<view class="origin row" v-if='item.oldPrice'>
原价：{{item.oldPrice}}
</view>
</view> </view>
<view class="cut-down" v-if='item.oldPrice-item.firstPayPrice>0'> <view class="cut-down" v-if='item.oldPrice-item.firstPayPrice>0'>
立省 {{item.oldPrice-item.firstPayPrice}} 元 立省 {{item.oldPrice-item.firstPayPrice}} 元
</view> </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>
</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> </scroll-view>
</view> </view>
</uni-popup> </uni-popup>
...@@ -48,6 +73,11 @@ ...@@ -48,6 +73,11 @@
}; };
}, },
methods: { methods: {
// 支付完成回调
paySuccess() {
this.$emit('paySuccess');
this.handleClose();
},
handleShow() { handleShow() {
this.$refs.select.open('bottom'); this.$refs.select.open('bottom');
...@@ -57,7 +87,10 @@ ...@@ -57,7 +87,10 @@
success: ({ success: ({
data data
}) => { }) => {
this.vipList = data.list this.vipList = data.list;
if (data.list != null) {
this.selectedIndex = data.list[0].activityType;
}
} }
}); });
}, },
...@@ -66,8 +99,9 @@ ...@@ -66,8 +99,9 @@
this.$emit('close'); this.$emit('close');
}, },
choosePack(item, index) { choosePack(item, index) {
this.selectedIndex = index; this.selectedIndex = index;
// this.handlePay();
this.handlePay();
}, },
handlePay() { handlePay() {
let that = this; let that = this;
...@@ -100,11 +134,7 @@ ...@@ -100,11 +134,7 @@
success(res) { success(res) {
message.notify('支付成功') message.notify('支付成功')
that.paySuccess();
// setTimeout(() => {
// navigateTo(`/pages/home`)
// }, 1000);
}, },
fail(res) { fail(res) {
message.notify('取消支付') message.notify('取消支付')
...@@ -127,98 +157,96 @@ ...@@ -127,98 +157,96 @@
<style lang="scss"> <style lang="scss">
.body { .body {
background-color: white; background-color: white;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
.section { .section {
padding: 0 20rpx; padding: 0 20rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: #fff; background: #fff;
.title { .title {
font-size: 32rpx; font-size: 32rpx;
font-weight: 700; font-weight: 700;
color: #333; color: #333;
margin-bottom: 30rpx; margin-bottom: 30rpx;
} }
.pack-box { .pack-box {
margin-top: 25rpx; margin-top: 25rpx;
margin-left: 20rpx; margin-left: 20rpx;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
.active { .active {
border: 6rpx solid #fd5350 !important; border: 6rpx solid #fd5350 !important;
} }
.pack-item { .pack-item {
margin-bottom: 25rpx; margin-bottom: 25rpx;
margin-right: 20rpx; margin-right: 22rpx;
width: calc(44%); width: calc(44%);
height: 200rpx; height: 200rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
background: #f5f5f5; background: #f5f5f5;
border: 6rpx solid #f5f5f5; border: 6rpx solid #f5f5f5;
border-radius: 10rpx; border-radius: 10rpx;
position: relative; position: relative;
.row { .row {
margin: 8rpx 15rpx; margin: 8rpx 15rpx;
marign-bottom: 0; marign-bottom: 0;
} }
.row:last-child { .row:last-child {
margin-bottom: 8rpx; margin-bottom: 8rpx;
} }
.name { .name {
font-size: 26rpx; font-size: 26rpx;
font-weight: 700; font-weight: 700;
color: #333; color: #333;
} }
.price { .price {
font-size: 30rpx; font-size: 30rpx;
color: #fd5350; color: #fd5350;
font-weight: 700; font-weight: 700;
} }
.origin { .origin {
font-size: 22rpx; font-size: 22rpx;
color: #333; color: #333;
text-decoration: line-through; }
}
.cut-down {
.cut-down { position: absolute;
position: absolute; top: 0;
top: 0; color: #fff;
right: 0; background: #ff502f;
color: #fff; font-size: 22rpx;
background: #ff502f; border-radius: 15rpx;
font-size: 22rpx; height: 30rpx;
border-radius: 15rpx; line-height: 30rpx;
height: 30rpx; padding: 0 10rpx;
line-height: 30rpx; transform: translate(0, -50%);
padding: 0 10rpx; }
transform: translate(0, -50%); }
} }
}
} .apply-button {
border-radius: 50rpx;
.apply-button { background: #e8c8ae;
border-radius: 50rpx; color: #8d5a29;
background: #e8c8ae; margin: 30rpx auto;
color: #8d5a29; }
margin: 30rpx auto;
}
} }
} }
</style> </style>
\ No newline at end of file
vedio/pages/my/my.vue
View file @ 9615f61c
...@@ -59,10 +59,9 @@ ...@@ -59,10 +59,9 @@
<view style="display: flex;justify-content: center;margin-top: 20rpx;font-size: 26rpx;color: gray;"> <view style="display: flex;justify-content: center;margin-top: 20rpx;font-size: 26rpx;color: gray;">
{{ versionName }} {{ versionName }}
</view> </view>
<coin-popup :show="showAnimate" @close="showAnimate = false"> <coin-popup :show="showAnimate" @close="showAnimate = false" @paySuccess="paySuccess">
</coin-popup> </coin-popup>
</view> </view>
...@@ -155,6 +154,9 @@ ...@@ -155,6 +154,9 @@
}) })
} }
}); });
},
paySuccess(){
} }
} }
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment