You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
458 lines
12 KiB
458 lines
12 KiB
<template>
|
|
<view >
|
|
<view class="container">
|
|
<view class="header">
|
|
<view class="vip-info">
|
|
<image :src="userInfo.img" mode="" class="vip-info__avatar"></image>
|
|
<view>
|
|
<view class="vip-info__name">{{userInfo.username}}</view>
|
|
<view class="vip-info__tips" v-if="vipInfo.isVip == '0'">你还不是会员,开通立享 9 项特权</view>
|
|
<view class="vip-info__tips" v-if="vipInfo.isVip == '1'">您的会员为：{{vipInfo.vipName}}</view>
|
|
<view class="vip-info__tips" v-if="vipInfo.isVip == '1'">到期时间为：{{vipInfo.endTime}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="vip-explan" v-if="vipInfo.isVip == '0'">
|
|
会员说明
|
|
<uni-icons type="help" size="20" color="#eee" @click="openIntro()"/>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="vip-box">
|
|
<view class="vip-box__item" :class="{'item-active':active == index}" @click="change(index)"
|
|
v-for="(item,index) in vipList" :key="index">
|
|
<view class="title">
|
|
{{item.vipName}}
|
|
</view>
|
|
<view class="price">
|
|
<text class="price-unit">¥</text> {{item.price}}
|
|
</view>
|
|
<view class="o-price">
|
|
{{item.originPrice}}
|
|
</view>
|
|
<view class="save-box">
|
|
立省{{item.originPrice - item.price}}元
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<button class="sumbit-btn" @click="openVip" :disabled="disabled">
|
|
立即开通
|
|
</button>
|
|
|
|
<view class="opened-member-info">
|
|
<view class="member-info-title">他们已经享受了会员权益</view>
|
|
<MemberScroll />
|
|
</view>
|
|
<view class="member-benefits">
|
|
<view class="benefits-title title">会员权益</view>
|
|
<view class="benefits-list">
|
|
<view class="benefits-item" v-for="item in memberBenefits" >
|
|
<view class="benefits-icon-div" :style="{backgroundColor: item.bgColor}">
|
|
<uni-icons class="benefits-icon" custom-prefix="iconfont" :type="item.icon" size="22" :color="item.iconColor" ></uni-icons>
|
|
</view>
|
|
<view class="benefits-info">
|
|
<view class="benefits-name">{{ item.info }}</view>
|
|
<view class="benefits-description">{{ item.description }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="purchase-instructions instructions">
|
|
<view class="instructions-title title">购买须知</view>
|
|
<view class="ul">
|
|
<view class="li" v-for="item in purchaseList">
|
|
<view class="point">·</view>
|
|
<view class="content">{{ item }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="auto-renewal-instructions instructions">
|
|
<view class="instructions-title title">自动续费说明</view>
|
|
<view class="ul">
|
|
<view class="li" v-for="item in autoRenewalList">
|
|
<view class="point">·</view>
|
|
<view class="content">{{ item }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
queryUserVipList,
|
|
addVipOrder,
|
|
unifiedOrder
|
|
} from '@/api/userInfo.js'
|
|
import {checkVip} from '@/api/paint.js'
|
|
import MemberScroll from "./MemberScroll";
|
|
|
|
export default {
|
|
components: {MemberScroll},
|
|
data() {
|
|
return {
|
|
userInfo: null,
|
|
vipList: [],
|
|
active: 0,
|
|
disabled: false,
|
|
vipInfo: undefined,
|
|
memberBenefits: [
|
|
{icon: "icon-wuguanggao", iconColor: "#b07838", bgColor: "#fbefc5", info: "免看全部广告", description: "无需看广告解锁，直接用"},
|
|
{icon: "icon-biaoqing", iconColor: "#d58859", bgColor: "#fae1d8", info: "千万表情免费用", description: "超全超有趣的表情库，海量表情免费用"},
|
|
{icon: "icon-shuazi", iconColor: "#667dc9", bgColor: "#d5e2e9", info: "独享VIP素材", description: "万张热门表情模板等你diy"},
|
|
{icon: "icon-tupian", iconColor: "#9474c3", bgColor: "#e7d7fb", info: "专属VIP板块", description: "让你成为斗图届的王者"},
|
|
{icon: "icon-tupianliebiao", iconColor: "#d68353", bgColor: "#f4e1d3", info: "专辑一键保存", description: "轻松下载专辑内所有图"},
|
|
{icon: "icon-zuanshi", iconColor: "#9e7438", bgColor: "#fbefc5", info: "尊贵身份", description: "专属会员身份标识"},
|
|
{icon: "icon-neirongguanli", iconColor: "#916bd4", bgColor: "#e7d7f7", info: "每周精选内容推送", description: "热点再也不会错过啦"},
|
|
{icon: "icon-weixin", iconColor: "#6eae9c", bgColor: "#d5ebec", info: "微信小程序互通", description: "意境小程序自动同步权益"},
|
|
{icon: "icon-jingqingqidai", iconColor: "#d5d5d7", bgColor: "#f2f3f5", info: "敬请期待", description: "更多精彩权益"},
|
|
],
|
|
purchaseList: [
|
|
"意境会员下载的全部内容，仅限个人使用，禁止商用。",
|
|
"会员市场可以叠加购买，续费后过期时间顺延",
|
|
"会员购买时立即生效，会员生效时常为购买时间加购买时长，比如您在2020年5月1日12点30分购买了一个月会员 (31天)，则在2020年6月1日12点31分期",
|
|
"会员权益会在会员到期后失效，但是使用会员权益添加并未删除的部分内容可以继续使用",
|
|
"购买会员后不支持退款",
|
|
],
|
|
autoRenewalList: [
|
|
"付款:用户确认购买并付款后记入iTunes账户;",
|
|
"续费:苹果账户iTunes账户会在到期前24小时内扣费，扣费成功后订阅周期顺延一个订阅周期;",
|
|
"取消续订: 如需取消续订，请在订阅周期到期前24小时之前，手动在iTunes/AppleID设置管理中关闭自动续费功能，如到期前24小时内取消，依然会自动扣款再订阅一个周期。",
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
//检查是否是vip
|
|
async checkIsVip() {
|
|
let that = this;
|
|
const data = {
|
|
userId: that.userInfo.id,
|
|
userClientType: 10
|
|
}
|
|
const res = await checkVip(data);
|
|
console.log('res===', res);
|
|
if (res.data.code === 200) {
|
|
that.vipInfo = res.data.data
|
|
}else {
|
|
uni.showModal({
|
|
content: '网络错误，请稍后再试~',
|
|
showCancel: false
|
|
});
|
|
}
|
|
},
|
|
|
|
async getVipList() {
|
|
const {
|
|
data
|
|
} = await queryUserVipList();
|
|
this.vipList = data.data
|
|
},
|
|
change(index) {
|
|
this.active = index
|
|
},
|
|
async openVip() {
|
|
let data = this.vipList[this.active];
|
|
let phone = this.userInfo
|
|
if (!Object.keys(data).length) return
|
|
this.disabled = true
|
|
uni.showLoading({
|
|
title: "加载中..."
|
|
});
|
|
const res_add = await addVipOrder({
|
|
vipId: data.id
|
|
})
|
|
let orderNo = res_add.data.data;
|
|
const res_uni = await unifiedOrder({
|
|
orderNo,
|
|
sceneCode: 1,
|
|
payType: 'dypay',
|
|
})
|
|
let {orderId,orderToken} = res_uni.data.data.dyThirdInOrderVo
|
|
this.tikPay(orderId,orderToken)
|
|
|
|
},
|
|
tikPay(order_id, order_token) {
|
|
tt.pay({
|
|
orderInfo: {
|
|
order_id,
|
|
order_token
|
|
},
|
|
service: 5,
|
|
success(res) {
|
|
if (res.code == 0) {
|
|
|
|
}
|
|
uni.hideLoading();
|
|
this.disabled = false
|
|
},
|
|
fail(res) {
|
|
uni.hideLoading();
|
|
this.disabled = false
|
|
},
|
|
})
|
|
},
|
|
//会员说明
|
|
openIntro(){
|
|
console.log("打开会员说明")
|
|
},
|
|
},
|
|
onShow() {
|
|
this.userInfo = uni.getStorageSync('userInfo')
|
|
this.checkIsVip();
|
|
},
|
|
created() {
|
|
if (!this.userInfo) {
|
|
uni.navigateBack()
|
|
uni.showToast({
|
|
title: '请先登录',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
this.getVipList()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@mixin flex($center: center, $content: center) {
|
|
display: flex;
|
|
align-items: $center;
|
|
justify-content: $content;
|
|
}
|
|
|
|
.container {
|
|
padding: 30rpx;
|
|
background: #fff;
|
|
border-radius: 0 0 60rpx 60rpx;
|
|
|
|
.vip-box {
|
|
margin: 30px 0;
|
|
@include flex(center, space-between);
|
|
|
|
.vip-box__item {
|
|
width: 30%;
|
|
height: 300rpx;
|
|
padding: 20rpx;
|
|
@include flex;
|
|
flex-direction: column;
|
|
color: #000;
|
|
border: 1px solid #eee;
|
|
border-radius: 30rpx;
|
|
|
|
&>view {
|
|
margin-bottom: 15rpx;
|
|
}
|
|
|
|
.title {
|
|
font-weight: bold;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.price {
|
|
font-weight: bold;
|
|
font-size: 48rpx;
|
|
color: #1991fd;
|
|
|
|
.price-unit {
|
|
font-size: 24rpx
|
|
}
|
|
}
|
|
|
|
.o-price {
|
|
color: #1991fd;
|
|
font-size: 26rpx;
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.save-box {
|
|
border-radius: 30rpx;
|
|
width: 150rpx;
|
|
height: 50rpx;
|
|
background-color: #e8f4ff;
|
|
font-size: 24rpx;
|
|
color: #68c2ff;
|
|
@include flex;
|
|
}
|
|
}
|
|
|
|
.item-active {
|
|
border: none;
|
|
background: linear-gradient(to bottom right, #68c2ff, #0684fe);
|
|
|
|
|
|
|
|
.price,
|
|
.title {
|
|
color: #fff;
|
|
}
|
|
|
|
.o-price {
|
|
color: #eee;
|
|
}
|
|
|
|
.save-box {
|
|
color: #fff;
|
|
background-color: rgba(255, 255, 255, .1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.sumbit-btn {
|
|
margin-top: 60rpx;
|
|
height: 88rpx;
|
|
@include flex;
|
|
font-size: 26rpx;
|
|
color: #fff;
|
|
background: linear-gradient(to bottom right, #68c2ff, #0684fe);
|
|
}
|
|
|
|
.header {
|
|
height: 200rpx;
|
|
background-color: gray;
|
|
padding: 20rpx;
|
|
@include flex(center, space-between);
|
|
border-radius: 20rpx;
|
|
|
|
.vip-explan {
|
|
color: #eee;
|
|
font-size: 24rpx;
|
|
@include flex(center, flex-start);
|
|
|
|
}
|
|
|
|
.vip-info {
|
|
@include flex(center, flex-start);
|
|
|
|
.vip-info__avatar {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 50%;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.vip-info__name {
|
|
color: #fff;
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.vip-info__tips {
|
|
color: #eee;
|
|
font-size: 24rpx
|
|
}
|
|
}
|
|
}
|
|
.opened-member-info {
|
|
background-color: $uni-primary-20;
|
|
padding: 20rpx;
|
|
margin: 20rpx auto;
|
|
border-radius: 10rpx;
|
|
color: $uni-primary;
|
|
|
|
.member-info-title {
|
|
font-size: 24rpx;
|
|
margin-bottom: 20rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
}
|
|
|
|
.member-benefits {
|
|
|
|
.benefits-title {
|
|
|
|
}
|
|
|
|
.benefits-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.benefits-item {
|
|
height: 120rpx;
|
|
width: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.benefits-icon-div {
|
|
height: 80rpx;
|
|
width: 80rpx;
|
|
border-radius: 40rpx;
|
|
flex-shrink: 0;
|
|
text-align: center;
|
|
line-height: 80rpx;
|
|
margin-right: 20rpx;
|
|
|
|
.benefits-icon {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.benefits-info {
|
|
height: 120rpx;
|
|
|
|
.benefits-name {
|
|
margin-top: 12rpx;
|
|
font-size: 28rpx;
|
|
line-height: 48rpx;
|
|
}
|
|
|
|
.benefits-description {
|
|
font-size: 20rpx;
|
|
line-height: 32rpx;
|
|
color: $uni-base-color;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
.title {
|
|
font-size: 40rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.purchase-instructions {
|
|
padding: 30rpx;
|
|
|
|
}
|
|
.auto-renewal-instructions {
|
|
padding: 30rpx;
|
|
|
|
}
|
|
|
|
.instructions {
|
|
|
|
.ul {
|
|
|
|
.li {
|
|
display: flex;
|
|
color: $uni-base-color;
|
|
font-size: 24rpx;
|
|
line-height: 36rpx;
|
|
margin-bottom: 10rpx;
|
|
|
|
.point {
|
|
width: 30rpx;
|
|
text-align: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.content {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|