Skip to content

U
uniapp_vedio
Commit 8f57389e authored by jyx's avatar jyx
Browse files
Options

代码优化

parent 09bb5093
Hide whitespace changes
Inline Side-by-side
Showing with 221 additions and 138 deletions
vedio/pages.json
View file @ 8f57389e
...@@ -41,8 +41,9 @@ ...@@ -41,8 +41,9 @@
"pages": [{ "pages": [{
"path": "vipPay/vipPay", "path": "vipPay/vipPay",
"style": { "style": {
"navigationStyle": "default", "navigationBarTitleText": "会员中心",
"navigationBarBackgroundColor": "#ffffff", "navigationStyle": "default",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black" "navigationBarTextStyle": "black"
} }
}, { }, {
......
vedio/pages/loading.vue
View file @ 8f57389e
...@@ -90,8 +90,10 @@ ...@@ -90,8 +90,10 @@
app.globalData.userId = data.idcode; app.globalData.userId = data.idcode;
saveToken(data.token) saveToken(data.token)
setTimeout(() => { setTimeout(() => {
redirectTo('home?activiteFlag='+data.activiteFlag+"&idcode="+data.idcode); // redirectTo('home?activiteFlag='+data.activiteFlag+"&idcode="+data.idcode);
}, 1000); redirectTo('/pagesA/vipPay/vipPay');
}, 1000);
} }
}); });
}, },
......
vedio/pagesA/vipPay/vipPay.vue
View file @ 8f57389e
<template> <template>
<view class="body"> <view class="body">
<status-title :showBack="true" icon-color="white" font-color="white">会员支付</status-title>
<scroll-view scroll-y style="height: 100%;"> <scroll-view scroll-y style="height: 100%;">
<image style="width: 100%;" src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/bg_vip_2.png" mode="widthFix" /> <image style="width: 100%;" src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/bg_heli_vip.png"
mode="widthFix" />
<view class="section"> <view class="section">
<view class="title"> <view class="title">
选择套餐 自动续费管理
</view> </view>
<view class="pack-box"> <view class="pack-box">
<view class="pack-item" :class="[{active: index==selectedIndex}]" v-for='(item, index) in vipList' <view class="pack-item" :class="[{active: index==selectedIndex}]" v-for='(item, index) in vipList'
:key='index' @click="choosePack(item, index)"> :key='index' @click="choosePack(item, index)">
<view class="label" v-if="index==selectedIndex">
{{ '限时减10元' }}
</view>
<view class="name row"> <view class="name row">
{{item.title}} {{item.title}}
</view> </view>
<view class="price row"> <view class="price row" :class="[{active1: index==selectedIndex}]">
￥{{item.firstPayPrice}} <view style="font-size: 22rpx;">￥</view>
{{item.firstPayPrice}}
</view> </view>
<view class="origin row" v-if='item.oldPrice'> <view class="origin row" v-if='item.oldPrice'>
原价：{{item.oldPrice}} ￥{{item.oldPrice}}
</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 class="label2" v-if="index==selectedIndex">
{{ '仅需0.19元/天' }}
</view>
</view> </view>
</view> </view>
</view> </view>
<view class="agreementWrp">
<checkbox-group @change="checkboxChange" style="width: 50rpx;">
<checkbox :checked="checked" style="transform:scale(0.6)"> </checkbox>
</checkbox-group>
<text>您已阅读并同意
<text class="agreementText" @click.stop="goAgreement">《连续订阅服务协议》</text>
与<text class="agreementText" @click.stop="goAgreement">《支付协议》</text>
</text>
</view>
<view class="section"> <view class="section">
<button class="apply-button" @click="handlePay">立即开通</button> <button class="apply-button" @click="handlePay">立即开通</button>
</view> </view>
<image style="width: 100%;" src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/bg_vip_0.png" mode="widthFix" />
<image style="width: 100%;margin-bottom: 80rpx;" src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/bg_vip_1.png" mode="widthFix" />
</scroll-view> </scroll-view>
</view> </view>
</template> </template>
...@@ -58,6 +75,7 @@ ...@@ -58,6 +75,7 @@
return { return {
vipList: [], vipList: [],
selectedIndex: 0, selectedIndex: 0,
checked: false
} }
}, },
methods: { methods: {
...@@ -75,8 +93,13 @@ ...@@ -75,8 +93,13 @@
choosePack(item, index) { choosePack(item, index) {
this.selectedIndex = index; this.selectedIndex = index;
}, },
handlePay() { handlePay() {
let that=this; if (!this.checked) {
message.notify("请阅读《连续订阅服务协议》与《支付协议》后勾选同意")
return
}
let that = this;
let vipBean = this.vipList[this.selectedIndex]; let vipBean = this.vipList[this.selectedIndex];
this.post({ this.post({
...@@ -92,41 +115,51 @@ ...@@ -92,41 +115,51 @@
that.wxPay(data); that.wxPay(data);
} }
}); });
}, },
wxPay(wxData){ wxPay(wxData) {
let wxParams = wxData.params; let wxParams = wxData.params;
let that=this; let that = this;
// 发起微信支付 // 发起微信支付
wx.requestPayment({ wx.requestPayment({
timeStamp: wxParams.timeStamp, timeStamp: wxParams.timeStamp,
nonceStr: wxParams.nonceStr, nonceStr: wxParams.nonceStr,
package: wxParams.packageStr, package: wxParams.packageStr,
signType: wxParams.signType, signType: wxParams.signType,
paySign: wxParams.paySign, paySign: wxParams.paySign,
success(res) { success(res) {
message.notify('支付成功') message.notify('支付成功')
// that.post({ // that.post({
// url: '/vip/queryVipOrder', // url: '/vip/queryVipOrder',
// data: { // data: {
// tid: wxData.tid // tid: wxData.tid
// }, // },
// showLoading: false, // showLoading: false,
// success: ({ // success: ({
// data // data
// }) => { // }) => {
// } // }
// }); // });
setTimeout(() => { setTimeout(() => {
navigateTo(`/pages/home`) navigateTo(`/pages/home`)
}, 1000); }, 1000);
}, },
fail(res) { fail(res) {
message.notify('取消支付') message.notify('取消支付')
} }
}) })
},
checkboxChange(e) {
if (e.detail.value.length > 0) {
this.checked = true
} else {
this.checked = false
}
},
goAgreement() {
} }
} }
} }
...@@ -134,98 +167,145 @@ ...@@ -134,98 +167,145 @@
<style lang="scss"> <style lang="scss">
.body { .body {
background-color: black; background-color: white;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.section { .section {
padding: 0 30rpx; display: flex;
flex-direction: column;
.title {
font-size: 32rpx;
font-weight: 700;
color: white;
margin-bottom: 30rpx;
}
.pack-box {
margin-top: 25rpx;
display: flex;
margin-left: 30rpx;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
.active {
background-color: #FEF8F5;
border: 4rpx solid #FDEADC !important;
}
.pack-item {
margin-bottom: 25rpx;
margin-right: 30rpx;
width: calc(31% - 30rpx);
height: 260rpx;
display: flex;
flex-direction: column;
align-items: center;
background: white;
border: 4rpx solid #EAECEC;
border-radius: 20rpx;
position: relative;
padding-top: 60rpx;
.row {
display: flex;
align-items: center;
margin: 8rpx 15rpx;
marign-bottom: 0;
}
.row:last-child {
margin-bottom: 8rpx;
}
.name {
font-size: 26rpx;
font-weight: 700;
color: #333;
}
.price {
font-size: 40rpx;
color: #000000;
font-weight: 700;
}
.active1 {
color: #fd5350;
}
.origin {
font-size: 22rpx;
color: #333;
text-decoration: line-through;
}
.label {
border-radius: 20rpx 0 20rpx 0;
width: 70%;
background: linear-gradient(90deg, #FC4F3B, #FBCB7A);
color: white;
font-size: 24rpx;
height: 50rpx;
line-height: 50rpx;
margin-right: 20rpx;
text-align: center;
position: absolute;
top: 0;
left: 0;
}
.label2 {
width: 100%;
border-radius: 0 0 20rpx 20rpx;
background-color: #FC4F3B;
color: white;
font-size: 24rpx;
height: 50rpx;
line-height: 50rpx;
text-align: center;
position: absolute;
bottom: 0;
}
.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;
width: 500rpx;
margin: 30rpx auto;
}
}
.agreementWrp {
display: flex; display: flex;
flex-direction: column; align-items: center;
background: black; color: darkgray;
font-size: 26rpx;
.title { padding-left: 30rpx;
font-size: 32rpx;
font-weight: 700; .agreementText {
color: white; color: #387EF4;
margin-bottom: 30rpx; }
}
.pack-box {
margin-top: 25rpx;
margin-left: 40rpx;
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
.active {
border: 6rpx solid #fd5350 !important;
}
.pack-item {
margin-bottom: 25rpx;
margin-right: 40rpx;
width: calc(31% - 40rpx);
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;
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