bnyer
/
bnyer-cloud-tiktok
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity
Browse Source

hotfix:fixbug

feature-1.1-dev
Penny 3 years ago
parent
d509a2ceb7
commit
f6845a1f39
1 changed files with 526 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 526
      pages/userInfo/vip/vip.vue

526
pages/userInfo/vip/vip.vue
View File

@ -0,0 +1,526 @@
<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)" 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>
Write Preview
Loading…
Cancel
Save