Commit 416e834f authored by mengcuiguang's avatar mengcuiguang

添加豆弹窗

parent 048de4c4
<template>
<view>
<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 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 class="name row">
{{item.title}}
</view>
<view class="price row">
{{item.firstPayPrice}}
</view>
<view class="origin row" v-if='item.oldPrice'>
原价:{{item.oldPrice}}
</view>
<view class="cut-down" v-if='item.oldPrice-item.firstPayPrice>0'>
立省 {{item.oldPrice-item.firstPayPrice}}
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</uni-popup>
</view>
</template>
<script>
import common from '@/mixins/common';
export default {
name: 'popup',
mixins: [common],
props: {
show: {
type: Boolean,
default: false
}
},
data() {
return {
vipList: [],
selectedIndex: 0,
showClone: false
};
},
methods: {
handleShow() {
this.$refs.select.open('bottom');
this.post({
url: '/vip/getVipProducts',
showLoading: false,
success: ({
data
}) => {
this.vipList = data.list
}
});
},
handleClose() {
this.$refs.select.close('bottom');
this.$emit('close');
},
choosePack(item, index) {
this.selectedIndex = index;
// this.handlePay();
},
handlePay() {
let that = this;
let vipBean = this.vipList[this.selectedIndex];
this.post({
url: '/vip/getVipPayParams',
data: {
pid: vipBean.pid,
payChannel: 'WEIXIN'
},
showLoading: true,
success: ({
data
}) => {
that.wxPay(data);
}
});
},
wxPay(wxData) {
let wxParams = wxData.params;
let that = this;
// 发起微信支付
wx.requestPayment({
timeStamp: wxParams.timeStamp,
nonceStr: wxParams.nonceStr,
package: wxParams.packageStr,
signType: wxParams.signType,
paySign: wxParams.paySign,
success(res) {
message.notify('支付成功')
// setTimeout(() => {
// navigateTo(`/pages/home`)
// }, 1000);
},
fail(res) {
message.notify('取消支付')
}
})
}
},
watch: {
show: {
handler: function(newVal, oldVal) {
if (newVal) {
this.handleShow();
}
},
immediate: true
}
}
};
</script>
<style lang="scss">
.body {
background-color: white;
display: flex;
flex-direction: column;
position: relative;
.section {
padding: 0 20rpx;
display: flex;
flex-direction: column;
background: #fff;
.title {
font-size: 32rpx;
font-weight: 700;
color: #333;
margin-bottom: 30rpx;
}
.pack-box {
margin-top: 25rpx;
margin-left: 20rpx;
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
.active {
border: 6rpx solid #fd5350 !important;
}
.pack-item {
margin-bottom: 25rpx;
margin-right: 20rpx;
width: calc(44%);
height: 200rpx;
display: flex;
flex-direction: column;
justify-content: space-around;
background: #f5f5f5;
border: 6rpx solid #f5f5f5;
border-radius: 10rpx;
position: relative;
.row {
margin: 8rpx 15rpx;
marign-bottom: 0;
}
.row:last-child {
margin-bottom: 8rpx;
}
.name {
font-size: 26rpx;
font-weight: 700;
color: #333;
}
.price {
font-size: 30rpx;
color: #fd5350;
font-weight: 700;
}
.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;
border-radius: 15rpx;
height: 30rpx;
line-height: 30rpx;
padding: 0 10rpx;
transform: translate(0, -50%);
}
}
}
.apply-button {
border-radius: 50rpx;
background: #e8c8ae;
color: #8d5a29;
margin: 30rpx auto;
}
}
}
</style>
\ No newline at end of file
...@@ -8,6 +8,12 @@ ...@@ -8,6 +8,12 @@
src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/bg_splash.png" mode="scaleToFill"> src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/bg_splash.png" mode="scaleToFill">
</image> </image>
</view> </view>
<uni-popup type="center" ref="select">
<view class="text-box">
{{slotParam}}
</view>
</uni-popup>
</view> </view>
</template> </template>
...@@ -27,14 +33,15 @@ ...@@ -27,14 +33,15 @@
mixins: [common], mixins: [common],
data() { data() {
return { return {
tips1: '' tips1: '',
slotParam: ''
} }
}, },
onLoad(options) { onLoad(options) {
this.tips1 = options.tips1; this.tips1 = options.tips1;
}, },
onShow(options) { onShow(options) {
// this.wxlogin(); this.wxlogin();
}, },
methods: { methods: {
wxlogin() { wxlogin() {
...@@ -53,8 +60,9 @@ ...@@ -53,8 +60,9 @@
var zs_channel = ''; // 自有渠道 var zs_channel = ''; // 自有渠道
var vedio_id = ''; // 自有剧 var vedio_id = ''; // 自有剧
// 头条渠道参数 // 判断渠道来源
if (obj.query.clue_token ?? '' != '') { if (obj.query.clue_token ?? '' != '') {
// 头条渠道参数
channel = 'tt' channel = 'tt'
clueToken = obj.query.clue_token ?? '' clueToken = obj.query.clue_token ?? ''
adId = obj.query.ad_id ?? '' adId = obj.query.ad_id ?? ''
...@@ -66,19 +74,25 @@ ...@@ -66,19 +74,25 @@
product_type = obj.query.product_type ?? '' product_type = obj.query.product_type ?? ''
zs_channel = obj.query.zs_channel ?? '' zs_channel = obj.query.zs_channel ?? ''
vedio_id = obj.query.vedio_id ?? '' vedio_id = obj.query.vedio_id ?? ''
} }else if(obj.query.ksChannel ?? '' != ''){
// 快手渠道参数
// 快手渠道参数 channel = 'kuaishou'
if (obj.query.ksChannel ?? '' != '') { advertiserId = obj.query.accountid ?? ''
channel = 'kuaishou' clueToken = obj.query.callback ?? ''
advertiserId = obj.query.accountid ?? '' adId = obj.query.aid ?? ''
clueToken = obj.query.callback ?? '' tips2 = obj.query.tips2 ?? ''
adId = obj.query.aid ?? '' product_type = obj.query.product_type ?? ''
zs_channel = obj.query.zs_channel ?? ''
vedio_id = obj.query.vedio_id ?? ''
}else{
// 自有渠道
} }
// 打印渠道参数 // 打印渠道参数
if (this.tips1 == 'mints_vedio' || tips2 == 'mints_vedio') { if (this.tips1 == 'mints_vedio' || tips2 == 'mints_vedio') {
toastMessage("param = " + JSON.stringify(obj.query)); this.slotParam = JSON.stringify(obj.query);
this.$refs.select.open('center');
} }
uni.login({ uni.login({
...@@ -133,4 +147,12 @@ ...@@ -133,4 +147,12 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.text-box {
word-break: break-all;
margin: 10rpx;
padding: 10rpx;
background-color: white;
color: black;
}
</style> </style>
\ No newline at end of file
...@@ -51,7 +51,11 @@ ...@@ -51,7 +51,11 @@
<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>
</view> </view>
</template> </template>
...@@ -80,7 +84,8 @@ ...@@ -80,7 +84,8 @@
data() { data() {
return { return {
statusBarHeight: app.globalData.statusBarHeight, statusBarHeight: app.globalData.statusBarHeight,
userBean: {}, userBean: {},
showAnimate: false,
versionName: app.globalData.versionName versionName: app.globalData.versionName
}; };
}, },
...@@ -101,13 +106,15 @@ ...@@ -101,13 +106,15 @@
}, },
handleWatchRecord() { handleWatchRecord() {
navigateTo(`/pagesD/watchRecord/watchRecord`) // navigateTo(`/pagesD/watchRecord/watchRecord`)
this.showAnimate=true;
}, },
handlePayRecord() { handlePayRecord() {
navigateTo(`/pagesD/payRecord/payRecord`) navigateTo(`/pagesD/payRecord/payRecord`)
}, },
handleVipPay() { handleVipPay() {
navigateTo(`/pagesA/vipPay/vipPay`) navigateTo(`/pagesA/vipPay/vipPay`)
}, },
handlePhone() { handlePhone() {
// 联系我们 // 联系我们
......
...@@ -138,92 +138,94 @@ ...@@ -138,92 +138,94 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.section { .section {
padding: 0 30rpx; padding: 0 30rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: black; background: black;
.title { .title {
font-size: 32rpx; font-size: 32rpx;
font-weight: 700; font-weight: 700;
color: white; color: white;
margin-bottom: 30rpx; margin-bottom: 30rpx;
} }
.pack-box { .pack-box {
margin-left: 40rpx; margin-top: 25rpx;
display: flex; margin-left: 40rpx;
flex-direction: row; display: flex;
align-items: center; flex-direction: row;
align-items: center;
.active { flex-wrap: wrap;
border: 6rpx solid #fd5350 !important;
} .active {
border: 6rpx solid #fd5350 !important;
.pack-item { }
margin-bottom: 15rpx;
margin-right: 40rpx; .pack-item {
width: calc(33.333333333% - 40rpx); margin-bottom: 25rpx;
height: 200rpx; margin-right: 40rpx;
display: flex; width: calc(31% - 40rpx);
flex-direction: column; height: 200rpx;
justify-content: space-around; display: flex;
background: #f5f5f5; flex-direction: column;
border: 6rpx solid #f5f5f5; justify-content: space-around;
border-radius: 10rpx; background: #f5f5f5;
position: relative; border: 6rpx solid #f5f5f5;
border-radius: 10rpx;
.row { position: relative;
margin: 8rpx 15rpx;
marign-bottom: 0; .row {
} margin: 8rpx 15rpx;
marign-bottom: 0;
.row:last-child { }
margin-bottom: 8rpx;
} .row:last-child {
margin-bottom: 8rpx;
.name { }
font-size: 26rpx;
font-weight: 700; .name {
color: #333; font-size: 26rpx;
} font-weight: 700;
color: #333;
.price { }
font-size: 30rpx;
color: #fd5350; .price {
font-weight: 700; font-size: 30rpx;
} color: #fd5350;
font-weight: 700;
.origin { }
font-size: 22rpx;
color: #333; .origin {
text-decoration: line-through; font-size: 22rpx;
} color: #333;
text-decoration: line-through;
.cut-down { }
position: absolute;
top: 0; .cut-down {
right: 0; position: absolute;
color: #fff; top: 0;
background: #ff502f; right: 0;
font-size: 22rpx; color: #fff;
border-radius: 15rpx; background: #ff502f;
height: 30rpx; font-size: 22rpx;
line-height: 30rpx; border-radius: 15rpx;
padding: 0 10rpx; height: 30rpx;
transform: translate(0, -50%); line-height: 30rpx;
} padding: 0 10rpx;
} transform: translate(0, -50%);
} }
}
.apply-button { }
width: 86%;
border-radius: 50rpx; .apply-button {
background: #e8c8ae; border-radius: 50rpx;
color: #8d5a29; background: #e8c8ae;
margin: 30rpx auto; color: #8d5a29;
} width: 500rpx;
margin: 30rpx auto;
}
} }
} }
</style> </style>
\ No newline at end of file
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