第一次提交
This commit is contained in:
gxwebsoft
623
sub_pages/user/grade/grade.vue
Normal file
623
sub_pages/user/grade/grade.vue
Normal file
@@ -0,0 +1,623 @@
|
||||
<template>
|
||||
<view class="grade-index">
|
||||
<view class="user-card">
|
||||
<view class="user-info">
|
||||
<view class="avatar">
|
||||
<u-avatar size="50" class="avatar-img"
|
||||
:src="userInfo.avatar"></u-avatar>
|
||||
<view class="user">
|
||||
<view class="nickname">{{ userInfo.nickname }}</view>
|
||||
<view class="desc">您当前是{{ userInfo.gradeName }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="buy-log">已解锁的功能</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-gap height="10"></u-gap>
|
||||
<view class="member-service">
|
||||
<view class="tabs">
|
||||
<u-tabs :list="tabs" lineColor="#7f006f" :activeStyle="{ color: '#7f006f' }" @click="onTabs"></u-tabs>
|
||||
</view>
|
||||
<view v-if="index == 0" class="service-card">
|
||||
<view class="item" v-for="(item,index) in service" :key="index" v-if="item.roleId == 271">
|
||||
<view class="tool-btn" @click="openEdit(item)">
|
||||
<view class="icon">
|
||||
<image :src="item.icon" mode="widthFix"></image>
|
||||
</view>
|
||||
<text class="btn-name">{{ item.name }}</text>
|
||||
<text class="btn-equity" v-if="item.equity.length > 0 || userInfo.gradeId >= 7 ">已解锁</text>
|
||||
<text class="btn-desc" v-else>{{ item.subName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="index == 1" class="service-card">
|
||||
<view class="item" v-for="(item,index) in service" :key="index" v-if="item.roleId == 272">
|
||||
<view class="tool-btn" @click="openEdit(item)">
|
||||
<view class="icon">
|
||||
<image :src="item.icon" mode="widthFix"></image>
|
||||
</view>
|
||||
<text class="btn-name">{{ item.name }}</text>
|
||||
<text class="btn-equity" v-if="item.equity.length > 0 || userInfo.gradeId >= 7">已解锁</text>
|
||||
<text class="btn-desc" v-else>{{ item.subName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="item">
|
||||
<view class="tool-btn" @click="showTool = true">
|
||||
<view class="icon">
|
||||
<image src="../../../static/icon/grade-02.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<text class="btn-name">搜索优先</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="tool-btn" @click="showTool = true">
|
||||
<view class="icon">
|
||||
<image src="../../../static/icon/grade-03.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<text class="btn-name">会员标志</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="tool-btn" @click="showTool = true">
|
||||
<view class="icon">
|
||||
<image src="../../../static/icon/grade-04.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<text class="btn-name">查看粉丝</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="tool-btn" @click="showTool = true">
|
||||
<view class="icon">
|
||||
<image src="../../../static/icon/grade-05.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<text class="btn-name">查看证件</text>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<u-popup :show="showEdit" mode="center" :round="10" :closeable="true" @close="closeEidt">
|
||||
<view class="show-tool">
|
||||
<view class="head">
|
||||
<view class="info">
|
||||
<text class="title">{{ current.name }}</text>
|
||||
<block v-if="current.equity">
|
||||
<text class="sub-title" v-if="current.equity.length > 0">有效期至：{{ current.equity[0].expirationTime }}</text>
|
||||
</block>
|
||||
</view>
|
||||
<view class="desc">{{ current.comments }}</view>
|
||||
<view class="buy" v-if="current.price">
|
||||
<view class="item" v-for="(d,i) in current.price" :key="i"
|
||||
:class="priceId == d.id ? 'active' : ''" @click="onPlan(d)">
|
||||
￥{{ d.price }}
|
||||
<view class="nums">{{ d.name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="footer">
|
||||
<view class="btn-wrapper">
|
||||
<u-button :text="onBuyText" color="linear-gradient(to bottom, #010002, #681752)"
|
||||
:disabled="priceId == 0 || disabled" shape="circle" @click="onBuy"></u-button>
|
||||
</view>
|
||||
<view class="xieyi">
|
||||
开通会员前请务必仔细阅读<text @click="$push('pages/article/detail/detail?id=114')">《用户协议》</text>规则
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import store from '@/store/index.js'
|
||||
import storage from '@/utils/storage'
|
||||
import * as UserPlanApi from '@/api/love-user-plan.js'
|
||||
import * as UserPlanLogApi from '@/api/love-user-plan-log.js'
|
||||
const service = [{
|
||||
id: 1,
|
||||
type: 0,
|
||||
name: '无限畅聊',
|
||||
desc: '每日不限次数聊天',
|
||||
comments: '每天无限次聊天，让你遇到更心动的Ta！',
|
||||
icon: '../../../static/icon/comment.png',
|
||||
expirationTime: '2023-07-12',
|
||||
plan: [{
|
||||
id: 1,
|
||||
name: '月卡',
|
||||
price: 99
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '半年卡',
|
||||
price: 299
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '年卡',
|
||||
price: 399
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
type: 1,
|
||||
name: '精准搜索',
|
||||
desc: '按条件筛选结果',
|
||||
comments: '按条件筛选结果',
|
||||
icon: '../../../static/icon/grade-02.png',
|
||||
expirationTime: '2023-07-12',
|
||||
plan: [{
|
||||
id: 1,
|
||||
name: '月卡',
|
||||
price: 99
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '半年卡',
|
||||
price: 299
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '年卡',
|
||||
price: 399
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
type: 1,
|
||||
name: '会员标志',
|
||||
desc: '显示会员身份',
|
||||
comments: '显示会员身份',
|
||||
icon: '../../../static/icon/grade-03.png',
|
||||
expirationTime: '2023-07-12',
|
||||
plan: [{
|
||||
id: 1,
|
||||
name: '月卡',
|
||||
price: 99
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '半年卡',
|
||||
price: 299
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '年卡',
|
||||
price: 399
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
type: 1,
|
||||
name: '查看粉丝',
|
||||
desc: '允许查看粉丝',
|
||||
comments: '允许查看粉丝',
|
||||
icon: '../../../static/icon/grade-04.png',
|
||||
expirationTime: '2023-07-12',
|
||||
plan: [{
|
||||
id: 1,
|
||||
name: '月卡',
|
||||
price: 99
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '半年卡',
|
||||
price: 299
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '年卡',
|
||||
price: 399
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
type: 1,
|
||||
name: '查看证件',
|
||||
desc: '允许查看证件特权',
|
||||
comments: '允许查看证件特权',
|
||||
icon: '../../../static/icon/grade-05.png',
|
||||
expirationTime: '2023-07-12',
|
||||
plan: [{
|
||||
id: 1,
|
||||
name: '月卡',
|
||||
price: 99
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '半年卡',
|
||||
price: 299
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '年卡',
|
||||
price: 399
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
tabs: [{
|
||||
name: '普通会员'
|
||||
},
|
||||
{
|
||||
name: '尊享会员'
|
||||
}
|
||||
],
|
||||
userInfo: {},
|
||||
index: 0,
|
||||
service: [],
|
||||
where: {},
|
||||
showEdit: false,
|
||||
current: {},
|
||||
priceId: 0,
|
||||
priceName: '',
|
||||
onBuyText: '立即解锁',
|
||||
disabled: false
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getUserPlan()
|
||||
},
|
||||
onShow() {
|
||||
this.userInfo = storage.get('userInfo')
|
||||
this.userInfo.roleName = storage.get('roleName')
|
||||
},
|
||||
methods: {
|
||||
// 跳转页面
|
||||
navTo(url, params) {
|
||||
this.$push(url, params)
|
||||
},
|
||||
onTabs(e) {
|
||||
this.index = e.index
|
||||
this.getUserPlan()
|
||||
},
|
||||
onPlan(item) {
|
||||
this.priceId = item.id
|
||||
this.priceName = item.name
|
||||
console.log("this.pri: ",item);
|
||||
},
|
||||
openEdit(item) {
|
||||
if(this.userInfo.gradeId >= 7){
|
||||
uni.showToast({
|
||||
title: '您已解锁此功能',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
this.showEdit = true
|
||||
this.current = item
|
||||
if(item.equity && item.equity.length > 0){
|
||||
this.onBuyText = '立即续费'
|
||||
}else{
|
||||
this.onBuyText = '立即解锁'
|
||||
}
|
||||
this.priceId = item.price[0].id
|
||||
console.log("item: ", item);
|
||||
console.log("this.current: ", this.current);
|
||||
},
|
||||
closeEidt() {
|
||||
this.showEdit = false
|
||||
this.priceId = 0
|
||||
},
|
||||
getUserPlan() {
|
||||
const {
|
||||
index
|
||||
} = this
|
||||
if (index == 0) {
|
||||
this.where.roleId = 271
|
||||
}
|
||||
if (index == 1) {
|
||||
this.where.roleId = 272
|
||||
}
|
||||
UserPlanApi.listUserPlan(this.where).then(res => {
|
||||
this.service = res.data
|
||||
})
|
||||
},
|
||||
onBuy() {
|
||||
const app = this
|
||||
const {
|
||||
priceId,
|
||||
priceName
|
||||
} = this
|
||||
const {
|
||||
planId,
|
||||
name
|
||||
} = this.current
|
||||
|
||||
app.disabled = true
|
||||
|
||||
UserPlanLogApi.addUserPlanLog({
|
||||
priceId,
|
||||
planId,
|
||||
comments: name,
|
||||
priceName
|
||||
}).then(res => {
|
||||
|
||||
const orderInfo = res.data
|
||||
// 调起微信支付
|
||||
uni.requestPayment({
|
||||
provider: orderInfo.provider, // 服务提供商
|
||||
timeStamp: orderInfo.timeStamp, // 时间戳
|
||||
nonceStr: orderInfo.nonceStr, // 随机字符串
|
||||
package: orderInfo.package,
|
||||
signType: orderInfo.signType, // 签名算法
|
||||
paySign: orderInfo.paySign, // 签名
|
||||
success: function(res) {
|
||||
// 业务逻辑。。。
|
||||
app.$success('支付成功')
|
||||
setTimeout(function() {
|
||||
app.showEdit = false
|
||||
app.disabled = false
|
||||
app.$navTo('pages/order/index')
|
||||
}, 1500);
|
||||
},
|
||||
fail: function(err) {
|
||||
console.log('支付失败', err);
|
||||
app.disabled = false
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #f3f3f3 !important;
|
||||
}
|
||||
|
||||
.grade-index {
|
||||
background-color: #f3f3f3;
|
||||
height: 100vh;
|
||||
.user-card {
|
||||
width: 700rpx;
|
||||
height: 260rpx;
|
||||
margin: 30rpx auto;
|
||||
border-radius: 24rpx;
|
||||
background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
|
||||
|
||||
.user-info {
|
||||
padding: 40rpx;
|
||||
position: relative;
|
||||
|
||||
.avatar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #ffffff;
|
||||
|
||||
.avatar-img {
|
||||
border: 4rpx solid #ffffff;
|
||||
}
|
||||
|
||||
.user {
|
||||
margin-left: 15rpx;
|
||||
|
||||
.nickname {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 26rpx;
|
||||
color: #b2b2b2;
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
border: 4rpx solid #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.buy-log {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
text-align: center;
|
||||
top: 50rpx;
|
||||
right: 40rpx;
|
||||
font-size: 24rpx;
|
||||
padding: 5rpx 20rpx;
|
||||
border-radius: 12rpx 0 12rpx 0;
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form {
|
||||
background-color: #ffffff;
|
||||
|
||||
.btn {
|
||||
position: absolute;
|
||||
top: 550rpx;
|
||||
width: 750rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.member-service {
|
||||
width: 750rpx;
|
||||
|
||||
.tabs {
|
||||
width: 600rpx;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
width: 700rpx;
|
||||
min-height: 200rpx;
|
||||
margin: 30rpx auto;
|
||||
border-radius: 24rpx;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.item {
|
||||
width: 190rpx;
|
||||
margin: 30rpx 20rpx;
|
||||
|
||||
.tool-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: 26rpx;
|
||||
|
||||
.icon {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 100rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
|
||||
|
||||
// background: linear-gradient(to bottom, #010002, #681752);
|
||||
image {
|
||||
width: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-name {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.btn-equity{
|
||||
color: #7f006f;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.btn-desc {
|
||||
color: #b2b2b2;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.show-tool {
|
||||
border-radius: 20rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 600rpx;
|
||||
height: 600rpx;
|
||||
padding: 30rpx;
|
||||
|
||||
.head {
|
||||
padding-top: 10rpx;
|
||||
width: 600rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
padding-top: 8rpx;
|
||||
padding-left: 40rpx;
|
||||
color: #7f006f;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: #999999;
|
||||
font-size: 26rpx;
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
.buy {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.item {
|
||||
width: 160rpx;
|
||||
height: 200rpx;
|
||||
background-color: #ffffff;
|
||||
border: 1rpx solid #dbdbdb;
|
||||
border-radius: 12rpx;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
.nums {
|
||||
font-size: 24rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: #999999;
|
||||
color: #ffffff;
|
||||
padding: 0 14rpx;
|
||||
border-radius: 12rpx 0 12rpx 0;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: #460c47;
|
||||
color: #ffc7d3;
|
||||
|
||||
.nums {
|
||||
background-color: #ff0000;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.plan-desc {
|
||||
padding: 20rpx;
|
||||
width: 560rpx;
|
||||
height: 100rpx;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
background-color: #dfd3e0;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-top: 20rpx;
|
||||
border-bottom: 20rpx solid #dfd3e0;
|
||||
border-right: 20rpx solid transparent;
|
||||
border-left: 20rpx solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
.btn-wrapper {
|
||||
width: 360rpx;
|
||||
margin: 50rpx auto;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.xieyi {
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
color: #999999;
|
||||
|
||||
text {
|
||||
color: #7f006f;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user