1 changed files with 0 additions and 526 deletions
@ -1,526 +0,0 @@ |
|||||
<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.vipTypeName}}</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" v-if="systemInfo != 'ios'"> |
|
||||
<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"> |
|
||||
立省{{parseFloat(item.originPrice - item.price).toFixed(2)}}元 |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<view class="" v-if="systemInfo === 'ios'"> |
|
||||
<view class="iosStyle">由于相关政策,ios端暂不支持开通会员,请谅解.</view> |
|
||||
<!-- <button class="linkToUs" type="default" plain="true" size="mini" open-type="im" data-im-id="DimenMusicHub">联系客服</button> --> |
|
||||
</view> |
|
||||
|
|
||||
<button class="sumbit-btn" @click="$noMultipleClicks(openVip)" :disabled="disabled" v-if="systemInfo != 'ios'"> |
|
||||
立即开通 |
|
||||
</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, |
|
||||
systemInfo: undefined, |
|
||||
noClick:true, //防止重复提交 |
|
||||
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: "情侣头像私人定制", description: "不要再和别人撞情头啦"}, |
|
||||
{icon: "icon-tupian", iconColor: "#9474c3", bgColor: "#e7d7fb", info: "头像壁纸随心选", description: "让您成为朋友圈最靓的仔"}, |
|
||||
{icon: "icon-tupian", iconColor: "#9474c3", bgColor: "#e7d7fb", info: "专属客服", description: "全天候为您服务"}, |
|
||||
{icon: "icon-tupianliebiao", iconColor: "#d68353", bgColor: "#f4e1d3", info: "AI作画高级设置", 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: { |
|
||||
|
|
||||
//打开抖音关注页 |
|
||||
async linkToUs(){ |
|
||||
tt.openAwemeUserProfile({ |
|
||||
success: (res) => { |
|
||||
console.log(res); |
|
||||
} |
|
||||
}); |
|
||||
}, |
|
||||
|
|
||||
//获取系统信息 |
|
||||
async getSystemInfo() { |
|
||||
let that = this; |
|
||||
//获取系统版本 |
|
||||
uni.getSystemInfo({ |
|
||||
success(res) { |
|
||||
that.systemInfo = res.osName |
|
||||
console.log('系统信息为：',that.systemInfo) |
|
||||
} |
|
||||
}); |
|
||||
}, |
|
||||
|
|
||||
//检查是否是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 |
|
||||
}) |
|
||||
//console.log('res_add',res_add) |
|
||||
if(res_add.data.code === 200){ |
|
||||
let orderNo = res_add.data.data; |
|
||||
const res_uni = await unifiedOrder({ |
|
||||
orderNo, |
|
||||
sceneCode: 1, |
|
||||
payType: 'dypay', |
|
||||
}) |
|
||||
//console.log('res_uni',res_uni) |
|
||||
if(res_uni.data.code === 200){ |
|
||||
let {orderId,orderToken} = res_uni.data.data.dyThirdInOrderVo |
|
||||
this.tikPay(orderId,orderToken); |
|
||||
}else{ |
|
||||
return uni.showToast({ |
|
||||
title: res_uni.data.msg, |
|
||||
icon: 'none' |
|
||||
}) |
|
||||
} |
|
||||
}else{ |
|
||||
return uni.showToast({ |
|
||||
title: res_add.data.msg, |
|
||||
icon: 'none' |
|
||||
}) |
|
||||
} |
|
||||
}, |
|
||||
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(); |
|
||||
this.getSystemInfo(); |
|
||||
}, |
|
||||
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; |
|
||||
.iosStyle{ |
|
||||
color:red; |
|
||||
font-size:35rpx; |
|
||||
} |
|
||||
.linkToUs{ |
|
||||
width: 400rpx; |
|
||||
height: 80rpx; |
|
||||
margin-top: 30rpx; |
|
||||
border: none; |
|
||||
//bottom: 50rpx; |
|
||||
background-color: $uni-primary; |
|
||||
border-radius: 50rpx; |
|
||||
//padding-bottom: 30rpx; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
color: #fff; |
|
||||
font-size: 16px; |
|
||||
color: $uni-white; |
|
||||
&::after{ |
|
||||
border:none; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.vip-box { |
|
||||
margin: 30px 0; |
|
||||
@include flex(center, space-around); |
|
||||
|
|
||||
|
|
||||
|
|
||||
.vip-box__item { |
|
||||
width: 45%; |
|
||||
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: #ff0000; |
|
||||
@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> |
|
||||
Loading…
Reference in new issue