463 lines
10 KiB
Vue
463 lines
10 KiB
Vue
<template>
|
||
<view>
|
||
<uni-nav-bar fixed statusBar left-icon="left" right-icon="gear" background-color="transparent" :border="false"
|
||
:style="{ '--right-padding': getMenuInfoList + 'px' }" @clickLeft="back" @clickRight="tosetUp"
|
||
title="开通会员"></uni-nav-bar>
|
||
<view class="back"></view>
|
||
<view class="body">
|
||
<view class="user fa">
|
||
<image :src="userInfo.avatar ? userInfo.avatar : '/static/images/avatar.png'" mode="aspectFill"></image>
|
||
<view class="user_content f1">
|
||
<view class="user_name">{{ userInfo.nickname }}</view>
|
||
<view class="user_text">{{ userInfo.vip == 0 ? '会员未开通' : '会员已开通' }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="module" v-if="userInfo.vip_endtime">
|
||
<view>到期时间： {{ formatTime(userInfo.vip_endtime) }}</view>
|
||
</view>
|
||
<view class="list">
|
||
<view class="list_head fa">
|
||
<image src="/static/images/member_logo.png" mode="widthFix"></image>
|
||
无线畅聊+无线语音
|
||
</view>
|
||
<view class="list_content fa sb">
|
||
<view class="list_member" v-for="(item, index) in memberList" :key="index"
|
||
@click="memberClick(index, item.id)" :class="memberIndex == index ? 'list_active' : ''">
|
||
<view class="list_first" :style="memberIndex == index ? 'color: #FF51B3;' : ''">{{ item.title }}
|
||
</view>
|
||
<view class="list_price fx" :style="memberIndex == index ? 'color: #FF51B3;' : ''">
|
||
¥<text>{{ item.money }}</text></view>
|
||
<view class="list_break" :style="memberIndex == index ? 'color: #FF51B3;' : ''">{{ item.desc }}
|
||
</view>
|
||
<image class="list_tag" v-if="memberIndex == index" src="/static/images/member_tag.png"></image>
|
||
</view>
|
||
</view>
|
||
<view class="list_module">
|
||
<view class="list_title">权益对比</view>
|
||
<view class="list_detail fa sb">
|
||
<view class="list_item">
|
||
<view class="list_item_title faj">权益名称</view>
|
||
<view class="list_item_title faj">聊天条数</view>
|
||
<view class="list_item_title faj">免广告权益</view>
|
||
<view class="list_item_title faj">语音时长</view>
|
||
<view class="list_item_title faj">视频生成</view>
|
||
</view>
|
||
<view class="list_item">
|
||
<view class="list_item_title faj">非VIP会员</view>
|
||
<view class="list_item_title faj">聊天100次/天</view>
|
||
<view class="list_item_title faj">不免广告</view>
|
||
<view class="list_item_title faj">不可语音</view>
|
||
<view class="list_item_title faj">无法生成视频</view>
|
||
</view>
|
||
<view class="list_items faj fc">
|
||
<view class="list_item_titles faj">VIP</view>
|
||
<view class="list_item_titles faj">无限聊天</view>
|
||
<view class="list_item_titles faj">全站免广告</view>
|
||
<view class="list_item_titles faj">无限语音</view>
|
||
<view class="list_item_titles faj">2次/天</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="list_btn faj" @click="toOpenMember">确认协议并开通</view>
|
||
<view class="list_text faj">阅读并确认同意<text>《会员服务协议》</text></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
VipPackageApi,
|
||
CreateVipOrderApi,
|
||
VipPayApi,
|
||
} from '@/utils/api.js'
|
||
import notHave from '@/components/not-have.vue';
|
||
import topSafety from '@/components/top-safety.vue';
|
||
import tabBar from '@/components/tab-bar.vue';
|
||
export default {
|
||
components: {
|
||
notHave,
|
||
topSafety,
|
||
tabBar,
|
||
},
|
||
data() {
|
||
return {
|
||
memberList: [
|
||
{
|
||
id: 0,
|
||
name: '首次包月',
|
||
price: '14',
|
||
text: '首月享7折',
|
||
},
|
||
{
|
||
id: 1,
|
||
name: '首次包季',
|
||
price: '36',
|
||
text: '首季享7折',
|
||
},
|
||
{
|
||
id: 2,
|
||
name: '首次包年',
|
||
price: '120',
|
||
text: '首年享7折',
|
||
},
|
||
],
|
||
memberIndex: 0,
|
||
userInfo: uni.getStorageSync('userinfo'),
|
||
vip_package_id: '',
|
||
avatar: '',
|
||
nickname: '',
|
||
getMenuInfoList: '',
|
||
}
|
||
},
|
||
onShow() {
|
||
this.getRechargePackage()
|
||
// #ifdef MP-WEIXIN
|
||
this.getMenuInfo()
|
||
// #endif
|
||
},
|
||
methods: {
|
||
//充值套餐列表
|
||
getRechargePackage() {
|
||
VipPackageApi({}).then(res => {
|
||
if (res.code == 1) {
|
||
this.memberList = res.data
|
||
this.vip_package_id = res.data[0].id
|
||
}
|
||
})
|
||
},
|
||
memberClick(index, id) {
|
||
this.memberIndex = index
|
||
this.vip_package_id = id
|
||
},
|
||
toOpenMember() {
|
||
CreateVipOrderApi({
|
||
vip_package_id: this.vip_package_id,
|
||
pay_type: 'miniWechat'
|
||
}).then(res => {
|
||
if (res.code == 1) {
|
||
VipPayApi({
|
||
out_trade_no: res.data.out_trade_no
|
||
}).then(res => {
|
||
if (res.code == 1) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '会员开通成功！',
|
||
showCancel: false,
|
||
success: () => {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
});
|
||
}
|
||
});
|
||
}
|
||
})
|
||
}
|
||
})
|
||
|
||
|
||
|
||
},
|
||
formatTime(timestamp) {
|
||
// 检查是否为时间戳（数字）
|
||
if (typeof timestamp === 'number') {
|
||
// 时间戳转为日期格式
|
||
const date = new Date(timestamp * 1000); // 注意：JavaScript需要毫秒，所以可能需要 * 1000
|
||
return this.formatDate(date);
|
||
}
|
||
// 如果已经是字符串格式，直接返回
|
||
return timestamp;
|
||
},
|
||
|
||
formatDate(date) {
|
||
const year = date.getFullYear();
|
||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||
const day = String(date.getDate()).padStart(2, '0');
|
||
const hours = String(date.getHours()).padStart(2, '0');
|
||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||
|
||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||
},
|
||
back() {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
});
|
||
},
|
||
tosetUp() {
|
||
uni.navigateTo({
|
||
url: '/pages/mine/setUp'
|
||
})
|
||
},
|
||
getMenuInfo() {
|
||
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
|
||
const systemInfo = uni.getSystemInfoSync();
|
||
|
||
console.log('胶囊信息:', menuButtonInfo);
|
||
|
||
// 胶囊宽度
|
||
const capsuleWidth = menuButtonInfo.width;
|
||
|
||
// 胶囊距离右侧的距离 = 屏幕宽度 - 胶囊右边界的x坐标
|
||
const distanceFromRight = systemInfo.windowWidth - menuButtonInfo.right;
|
||
|
||
console.log('胶囊宽度:', capsuleWidth);
|
||
console.log('胶囊距离右侧的距离:', distanceFromRight);
|
||
|
||
this.getMenuInfoList = capsuleWidth + distanceFromRight;
|
||
|
||
return {
|
||
width: capsuleWidth,
|
||
distanceFromRight: distanceFromRight,
|
||
menuButtonInfo: menuButtonInfo
|
||
};
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
background: #F7F7F7;
|
||
}
|
||
</style>
|
||
<style>
|
||
.body {
|
||
position: relative;
|
||
padding: 30rpx 0 0 0;
|
||
}
|
||
|
||
.back {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 596rpx;
|
||
background: linear-gradient(180deg, #FFE3E9 0%, #F7F7F7 100%);
|
||
}
|
||
|
||
.user {
|
||
position: relative;
|
||
padding: 0 40rpx;
|
||
}
|
||
|
||
.user image {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
display: block;
|
||
border-radius: 100rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.user_content {
|
||
position: relative;
|
||
margin: 0 0 0 30rpx;
|
||
}
|
||
|
||
.user_name {
|
||
font-weight: 500;
|
||
font-size: 36rpx;
|
||
color: #000000;
|
||
line-height: 50rpx;
|
||
}
|
||
|
||
.user_text {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #9E9E9E;
|
||
line-height: 50rpx;
|
||
}
|
||
|
||
.module {
|
||
position: relative;
|
||
margin: 40rpx 40rpx 0 40rpx;
|
||
padding: 44rpx 40rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 32rpx;
|
||
}
|
||
|
||
.list {
|
||
position: relative;
|
||
margin: 40rpx 0 0 0;
|
||
padding: 44rpx 40rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 32rpx 32rpx 0 0;
|
||
}
|
||
|
||
.list_head {
|
||
position: relative;
|
||
margin: 0 0 0 20rpx;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #9E9E9E;
|
||
line-height: 50rpx;
|
||
}
|
||
|
||
.list_head image {
|
||
margin: 0 26rpx 0 0;
|
||
width: 102rpx;
|
||
height: 50rpx;
|
||
display: block;
|
||
}
|
||
|
||
.list_content {
|
||
position: relative;
|
||
margin: 38rpx 0 0 0;
|
||
}
|
||
|
||
.list_member {
|
||
position: relative;
|
||
padding: 20rpx 40rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(194, 194, 194, 0.3);
|
||
border-radius: 26rpx;
|
||
border: 2rpx solid #FFFFFF;
|
||
}
|
||
|
||
.list_active {
|
||
color: #FF51B3 !important;
|
||
background: #FFEBF6;
|
||
box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(194, 194, 194, 0.3);
|
||
border: 2rpx solid #FF51B3;
|
||
}
|
||
|
||
.list_first {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
line-height: 50rpx;
|
||
}
|
||
|
||
.list_price {
|
||
margin: 10rpx 0 0 0;
|
||
font-weight: 700;
|
||
font-size: 28rpx;
|
||
color: #222222;
|
||
line-height: 50rpx;
|
||
}
|
||
|
||
.list_price text {
|
||
font-size: 52rpx;
|
||
line-height: 30rpx;
|
||
}
|
||
|
||
.list_break {
|
||
margin: 12rpx 0 0 0;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #9E9E9E;
|
||
line-height: 50rpx;
|
||
}
|
||
|
||
.list_tag {
|
||
position: absolute;
|
||
left: -2rpx;
|
||
top: -11rpx;
|
||
width: 48rpx;
|
||
height: 50rpx;
|
||
display: block;
|
||
}
|
||
|
||
.list_module {
|
||
position: relative;
|
||
margin: 40rpx 0 0 0;
|
||
}
|
||
|
||
.list_title {
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #222222;
|
||
line-height: 50rpx;
|
||
}
|
||
|
||
.list_detail {
|
||
position: relative;
|
||
margin: 46rpx 0 0 0;
|
||
}
|
||
|
||
.list_item {
|
||
position: relative;
|
||
}
|
||
|
||
.list_item_title {
|
||
padding: 20rpx 100rpx 18rpx 48rpx;
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #9E9E9E;
|
||
line-height: 50rpx;
|
||
background: #FAFAFA;
|
||
border-radius: 12rpx 12rpx 0rpx 0rpx;
|
||
}
|
||
|
||
.list_item:nth-child(2) .list_item_title {
|
||
padding: 20rpx 28rpx 18rpx 100rpx;
|
||
}
|
||
|
||
.list_item:nth-child(1) .list_item_title:nth-child(2n) {
|
||
background: #FFFFFF;
|
||
}
|
||
|
||
.list_item:nth-child(2) .list_item_title:nth-child(2n) {
|
||
background: #FFFFFF;
|
||
}
|
||
|
||
.list_items {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: -25rpx;
|
||
margin: auto 0;
|
||
}
|
||
|
||
.list_item_titles {
|
||
padding: 20rpx 18rpx;
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #FF51B3;
|
||
line-height: 50rpx;
|
||
background: #FFEBF6;
|
||
width: 150rpx;
|
||
}
|
||
|
||
.list_items .list_item_titles:nth-child(1) {
|
||
padding: 45rpx 18rpx 20rpx 18rpx;
|
||
border-radius: 12rpx 12rpx 0rpx 0rpx;
|
||
}
|
||
|
||
.list_items .list_item_titles:nth-child(5) {
|
||
padding: 15rpx 18rpx 35rpx 18rpx;
|
||
border-radius: 0rpx 0rpx 12rpx 12rpx;
|
||
}
|
||
|
||
.list_btn {
|
||
margin: 76rpx 0 0 0;
|
||
padding: 24rpx 0;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
line-height: 50rpx;
|
||
background: linear-gradient(135deg, #9F47FF 0%, #FF51B3 100%);
|
||
border-radius: 12rpx;
|
||
}
|
||
|
||
.list_text {
|
||
position: relative;
|
||
margin: 50rpx 0 0 0;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #9E9E9E;
|
||
line-height: 50rpx;
|
||
}
|
||
|
||
.list_text text {
|
||
color: #8449FE;
|
||
}
|
||
|
||
.uni-navbar__header-btns {
|
||
padding-right: var(--right-padding, 0);
|
||
}
|
||
|
||
.uni-navbar__header-btns-right.data-v-26544265 {
|
||
width: 60rpx !important;
|
||
}
|
||
</style> |