<template>
|
<view style="overflow-x: hidden;">
|
<view class="bg">
|
<image class="bg-img" src="/static/vip/bg.png" mode=""></image>
|
</view>
|
|
<view class="nav" :style="{ paddingTop: statusBarHeight + 'px' }">
|
<image class="nav-back" src="/static/vip/back.png" mode="" @click="back"></image>
|
<text class="nav-title">会员中心</text>
|
<view class="nav-space"></view>
|
</view>
|
|
<view class="info" :style="{marginTop: statusBarHeight + 44 + 'px'}">
|
<image class="info-bg" src="/static/vip/info-bg.png" mode=""></image>
|
|
<view class="info-content">
|
<view class="info-avatar">
|
<image style="border-radius: 50%;" class="info-avatar-pic" :src="userInfo.avatar" mode=""></image>
|
</view>
|
<view class="info-name">
|
<text class="info-name">{{ userInfo.nick_name }}</text>
|
<text class="info-level">开通套餐享专属特权</text>
|
</view>
|
</view>
|
|
<view class="info-asset">
|
<view class="info-asset-item">
|
<text class="iai-title">当前剩余对话次数</text>
|
<text class="iai-value">{{num}}</text>
|
</view>
|
<!-- <view class="info-asset-item">
|
<text class="iai-title">金币</text>
|
<text class="iai-value">2563</text>
|
</view>
|
<view class="info-asset-item">
|
<text class="iai-title">优惠券</text>
|
<text class="iai-value">3</text>
|
</view> -->
|
</view>
|
</view>
|
|
<view class="main-title">
|
<text>会员充值</text>
|
</view>
|
|
<scroll-view scroll-x>
|
<view class="recharge">
|
<view class="recharge-item" :class="current == index ? 'recharge-item-active': ''" v-for="(item, index) in rechargeOptions" :key="index" :style="{marginLeft: !index ? '30rpx': ''}" @click="rechargeChange(index)">
|
<view class="recharge-tag" >
|
<text class="recharge-tag-text"> {{item.type == 1 ? '按次计费' : '按时计费'}} </text>
|
</view>
|
<text class="recharge-item-duration">{{ item.title }}</text>
|
<view class="recharge-item-price">
|
<text class="rmb">￥</text>
|
<text class="recharge-item-price-text">{{ item.price }}</text>
|
</view>
|
<text v-if="item.type == 1" class="recharge-item-des">{{ '内含'+item.num+'次对话'}}</text>
|
<text v-else class="recharge-item-des"> 无限次对话 </text>
|
<text v-if="item.type == 1 && item.days != 0" class="recharge-item-des">{{ item.days+'天内有效'}}</text>
|
<text style="text-decoration: line-through;font-size: 30rpx;" class="recharge-item-des">{{ item.origin_price }}</text>
|
</view>
|
</view>
|
</scroll-view>
|
|
<view class="button update" hover-class="hover" @click="updateNow">
|
<text class="button-text">立即升级</text>
|
</view>
|
|
<text class="tip">专属AI 1秒响应</text>
|
|
<view class="main-title">
|
<text>会员特权</text>
|
</view>
|
|
<view class="privilege">
|
<view class="privilege-item" v-for="(item, index) in privilegeList" :key="index" hover-class="hover" @click="privilegeClick(index)">
|
<image class="privilege-item-pic" :src="item.pic" mode=""></image>
|
<text class="privilege-item-text">{{ item.text }}</text>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
|
import {mapState} from 'vuex'
|
import {
|
wxJsapiPay
|
} from '@/common/index';
|
|
export default {
|
data() {
|
return {
|
data_content:'123',
|
data_content2:'123',
|
data_content3:'123',
|
statusBarHeight,
|
current: 0,
|
rechargeOptions: [],
|
privilegeList: [
|
{
|
pic: '/static/vip/speed.png',
|
text: '极速响应'
|
},
|
{
|
pic: '/static/vip/coin.png',
|
text: '尽享优惠'
|
},
|
{
|
pic: '/static/vip/red-bag.png',
|
text: 'AI红利'
|
},
|
{
|
pic: '/static/vip/kefu.png',
|
text: '专属客服'
|
}
|
]
|
}
|
},
|
computed: {
|
...mapState(['userInfo','num'])
|
},
|
onLoad() {
|
this.$request('/api/Comb/index').then(res => {
|
console.log(res)
|
this.rechargeOptions = res.data.data
|
})
|
},
|
methods: {
|
rechargeChange(index) {
|
this.current = index
|
},
|
updateNow() {
|
uni.showLoading({
|
mask: true
|
})
|
let chanel = 2;
|
// #ifdef MP-WEIXIN
|
chanel = 1
|
// #endif
|
this.$request('/api/Order/add', 'POST', {
|
comb_id: this.rechargeOptions[this.current].comb_id,
|
chanel: chanel
|
}).then(async (res) => {
|
this.data_content = res
|
// #ifdef H5
|
if (/MicroMessenger/i.test(navigator.userAgent)) {
|
wxJsapiPay(res.data, (r) => {
|
this.data_content2 = r
|
var msg = r.err_msg ? r.err_msg : r.errMsg;
|
console.log(msg)
|
if (msg == 'get_brand_wcpay_request:ok') {
|
uni.showModal({
|
title: "温馨提示",
|
content: "权益已开通成功！"
|
})
|
this.$request('/api/Member/checkNum', 'POST',{
|
comb_id: this.rechargeOptions[this.current].comb_id
|
}).then(re => {
|
this.data_content3 = re
|
// 更新数量
|
this.$store.commit('syncUserNum',re.data.num)
|
})
|
}
|
console.log('pay r')
|
}, (er) => {
|
console.log(er.msg,"err.msg")
|
// uni.showModal({
|
// title: "温馨提示",
|
// content: er.msg
|
// })
|
uni.showToast({
|
title: '支付取消！',
|
icon: "error"
|
})
|
console.log('pay rr')
|
})
|
}
|
// #endif
|
// #ifdef MP-WEIXIN
|
let payParams = res.data;
|
let [err,payRes] = await uni.requestPayment({
|
provider: "wxpay",
|
...payParams,
|
timeStamp: payParams.timestamp,
|
});
|
console.log(payRes);
|
uni.hideLoading()
|
if (!err && payRes.errMsg === "requestPayment:ok") {
|
uni.showModal({
|
title: "温馨提示",
|
content: "权益已开通成功！"
|
})
|
this.$request('/api/Member/checkNum', 'POST',{
|
comb_id: this.rechargeOptions[this.current].comb_id
|
}).then(re => {
|
// 更新数量
|
this.$store.commit('syncUserNum',re.data.num)
|
})
|
}
|
// #endif
|
console.log('pay end')
|
})
|
},
|
privilegeClick(index) {
|
uni.showToast({
|
icon: "none",
|
title: `点击了「${this.privilegeList[index].text}」`
|
})
|
},
|
back() {
|
uni.navigateBack()
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.main-title {
|
padding: 30rpx 30rpx;
|
font-size: 34rpx;
|
color: #1C1C1C;
|
}
|
|
.tip {
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: center;
|
font-size: 24rpx;
|
color: #A5A3A2;
|
}
|
|
.rmb {
|
font-size: 26rpx;
|
color: #E3BE83;
|
}
|
|
.bg {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
height: 400rpx;
|
z-index: -2;
|
|
&-img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.hover {
|
opacity: 0.7;
|
}
|
|
.nav {
|
position: fixed;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: space-between;
|
width: 750rpx;
|
height: 44px;
|
padding: 0 30rpx;
|
background-image: url('~@/static/vip/nav-bg.png');
|
background-size: 100%;
|
z-index: 99;
|
|
&-back {
|
width: 20rpx;
|
height: 40rpx;
|
}
|
|
&-title {
|
color: #FFFFFF;
|
font-size: 42rpx;
|
}
|
|
&-space {
|
width: 70rpx;
|
height: 40rpx;
|
}
|
}
|
|
.info {
|
position: relative;
|
padding: 0 15rpx;
|
width: 730rpx;
|
height: 360rpx;
|
|
&-bg {
|
position: absolute;
|
width: 730rpx;
|
height: 360rpx;
|
z-index: -1;
|
}
|
|
&-content {
|
padding: 70rpx 50rpx 0 50rpx;
|
margin-bottom: 50rpx;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
}
|
|
&-avatar {
|
margin-right: 30rpx;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: center;
|
width: 85rpx;
|
height: 85rpx;
|
background-color: #fff;
|
padding: 1rpx;
|
border-radius: 50%;
|
|
&-pic {
|
width: 83rpx;
|
height: 83rpx;
|
}
|
}
|
|
&-name {
|
display: flex;
|
flex-direction: column;
|
color: #FFFFFF;
|
font-size: 35rpx;
|
}
|
|
&-level {
|
margin-top: 15rpx;
|
font-size: 24rpx;
|
}
|
|
&-asset {
|
padding: 0 50rpx;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
|
&-item {
|
display: flex;
|
flex-direction: column;
|
}
|
}
|
}
|
|
.iai {
|
&-title {
|
margin-bottom: 20rpx;
|
margin-right: 100rpx;
|
font-size: 24rpx;
|
color: #CFB386;
|
}
|
|
&-value {
|
font-size: 35rpx;
|
color: #FFFFFF;
|
}
|
}
|
|
.recharge {
|
position: relative;
|
margin-bottom: 35rpx;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
|
&-tag {
|
position: absolute;
|
top: -2rpx;
|
left: -2rpx;
|
width: 170rpx;
|
height: 36rpx;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: center;
|
background-image: url('~@/static/vip/tag.png');
|
background-size: 100%;
|
|
&-text {
|
font-size: 20rpx;
|
color: #FFFFFF;
|
text-align: center;
|
}
|
}
|
|
&-item {
|
position: relative;
|
padding: 40rpx 0;
|
margin-left: 15rpx;
|
width: 200rpx;
|
height: 230rpx;
|
flex-shrink: 0;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
border: solid 2rpx #F2F2F3;
|
border-radius: 12rpx;
|
|
&-active {
|
border-color: #EDD2A9;
|
background-color: #FBF1E5;
|
}
|
|
&-duration {
|
margin-bottom: 30rpx;
|
font-size: 26rpx;
|
color: #1C1C1C;
|
}
|
|
&-price {
|
margin-bottom: 20rpx;
|
display: flex;
|
flex-direction: row;
|
align-items: baseline;
|
|
&-text {
|
font-size: 48rpx;
|
color: #E3BE83;
|
}
|
}
|
|
&-des {
|
font-size: 22rpx;
|
color: #A5A3A2;
|
}
|
}
|
}
|
|
.button {
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: center;
|
height: 85rpx;
|
border-radius: 50rpx;
|
background-image: linear-gradient(#EFCF9E, #E4BF85);
|
|
&-text {
|
font-size: 30rpx;
|
color: #1C1C1C;
|
}
|
}
|
|
.update {
|
margin: 35rpx 30rpx 20rpx 30rpx;
|
}
|
|
.privilege {
|
padding: 0 30rpx;
|
margin-bottom: 40rpx;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: space-around;
|
flex-wrap: wrap;
|
|
&-item {
|
margin: 0 23rpx;
|
margin-bottom: 25rpx;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
|
&-pic {
|
width: 80rpx;
|
height: 80rpx;
|
margin-bottom: 20rpx;
|
}
|
|
&-text {
|
font-size: 24rpx;
|
color: #383738;
|
}
|
}
|
}
|
|
.level {
|
position: relative;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: center;
|
width: 750rpx;
|
height: 466rpx;
|
background-image: url('~@/static/vip/vip-bg.png');
|
background-size: 100%;
|
|
&-rate {
|
position: absolute;
|
top: 43rpx;
|
left: 33rpx;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
|
&-text1 {
|
margin-right: 20rpx;
|
color: #1C1C1C;
|
font-size: 34rpx;
|
}
|
|
&-text2 {
|
font-size: 34rpx;
|
color: #C07C07;
|
}
|
}
|
|
&-info {
|
// position: absolute;
|
// top: 188rpx;
|
// left: 350rpx;
|
margin-top: 70rpx;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
|
&-icon {
|
margin-bottom: 20rpx;
|
width: 48rpx;
|
height: 38rpx;
|
}
|
|
&-text {
|
margin-bottom: 20rpx;
|
font-size: 26rpx;
|
color: #292929;
|
}
|
|
&-integral {
|
font-size: 40rpx;
|
color: #C07C07;
|
}
|
}
|
|
&-distance {
|
position: absolute;
|
left: 30rpx;
|
right: 30rpx;
|
bottom: 35rpx;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: space-between;
|
|
&-text {
|
font-size: 26rpx;
|
color: #292929;
|
}
|
|
&-button {
|
padding: 0 30rpx;
|
height: 60rpx;
|
}
|
}
|
}
|
</style>
|
