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.
548 lines
11 KiB
548 lines
11 KiB
3 years ago
|
<template>
|
||
|
|
<view>
|
||
|
|
<view style="height: 400rpx;background: #1C1C26;padding: 102rpx 30rpx 0;">
|
||
|
|
<view class="top_view">
|
||
|
|
<view style="display: flex;padding: 30rpx 40rpx;">
|
||
|
|
<image :src="avatar"></image>
|
||
|
|
<view style="margin-left: 20rpx;">
|
||
|
|
<view class="nickName">
|
||
|
|
{{nickName}}
|
||
|
|
</view>
|
||
|
|
<view v-if="member == 0" class="huiyuan_title">
|
||
|
|
您目前还未开通会员</view>
|
||
|
|
<view v-if="member == 1" class="huiyuan_title">
|
||
|
|
您已经是会员了</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="top_view_bottom">
|
||
|
|
<view class="yueka">
|
||
|
|
VIP会员月卡</view>
|
||
|
|
<view v-if="member == 0" class="huiyuan_biaoyu">
|
||
|
|
开通后即可享受会员特权</view>
|
||
|
|
<view v-if="member == 1" class="huiyuan_biaoyu">
|
||
|
|
您正在享受会员特权</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="vip_title">
|
||
|
|
会员专享特权服务</view>
|
||
|
|
|
||
|
|
<view class="category_view">
|
||
|
|
<view class="category">
|
||
|
|
<!-- <view v-for="(nav, index) in navlist" :key="index"> -->
|
||
|
|
<view class="category-list">
|
||
|
|
<view class="icon-box-left">
|
||
|
|
<image class="icon" src="https://bwc.xianmxkj.com/img/20210828/f0bf9f3ad84c4f198f82560562f907c4.png"
|
||
|
|
style="height: 58rpx;width: 58rpx;margin-top: 10rpx;">
|
||
|
|
</image>
|
||
|
|
<view class="text">最高优惠</view>
|
||
|
|
</view>
|
||
|
|
<view class="icon-box">
|
||
|
|
<image class="icon" src="https://bwc.xianmxkj.com/img/20210828/2b65563b9f9342a7a9784daa6507f71e.png"
|
||
|
|
style="height: 58rpx;width: 58rpx;margin-top: 10rpx;">
|
||
|
|
</image>
|
||
|
|
<view class="text">推广福利</view>
|
||
|
|
</view>
|
||
|
|
<view class="icon-box-right">
|
||
|
|
<image class="icon" src="https://bwc.xianmxkj.com/img/20210828/8229ebd4434c4586bb9414bf973b154c.png"
|
||
|
|
style="height: 58rpx;width: 58rpx;margin-top: 10rpx;">
|
||
|
|
</image>
|
||
|
|
<view class="text">外卖红包</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view @click="btns" v-if="member == 0" class="vip_btn">
|
||
|
|
开通会员只需{{money}}</view>
|
||
|
|
|
||
|
|
<!-- <view class="vipTop">
|
||
|
|
<view class="top">
|
||
|
|
<view class="topTitle">
|
||
|
|
<view class="title">享专属特权</view>
|
||
|
|
<view class="pingtai">平台会员</view>
|
||
|
|
</view>
|
||
|
|
<image class="vipLogo" src="../../static/img/my/viplogo.png" mode="widthFix"></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="vip-center">
|
||
|
|
<view class="center-title">会员月卡</view>
|
||
|
|
<view class="center-kuang">
|
||
|
|
<view class="kuang">VIP会员月卡</view>
|
||
|
|
<view class="center-money">¥<span>{{money}}</span><text
|
||
|
|
style="font-size: 34rpx;color: grey;text-decoration: line-through;margin-left: 16rpx;">￥{{ oldmoney }}</text></view>
|
||
|
|
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="bottoms">
|
||
|
|
<view class="bottoms-title">会员特权</view>
|
||
|
|
<view class="vip-bottom">
|
||
|
|
<view class="payinfo">
|
||
|
|
<image src="../../static/img/my/tgfl.png" mode="widthFix"></image>
|
||
|
|
<view class="text">最高优惠</view>
|
||
|
|
</view>
|
||
|
|
<view class="payinfo">
|
||
|
|
<image src="../../static/img/my/zgyh.png" mode="widthFix"></image>
|
||
|
|
<view class="text">推广福利</view>
|
||
|
|
</view>
|
||
|
|
<view class="payinfo">
|
||
|
|
<image src="../../static/img/my/hbwm.png" mode="widthFix"></image>
|
||
|
|
<view class="text">外卖红包</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<button class="btns" @click="btns">立即支付{{money}}元</button> -->
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
avatar: '',
|
||
|
|
nickName: '',
|
||
|
|
money: 0,
|
||
|
|
member: 9,
|
||
|
|
oldmoney: 0
|
||
|
|
};
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
let nickName = this.$queue.getData('nickName');
|
||
|
|
if (nickName && nickName !== 'undefined') {
|
||
|
|
this.nickName = nickName;
|
||
|
|
} else {
|
||
|
|
this.nickName = '';
|
||
|
|
}
|
||
|
|
|
||
|
|
let avatar = this.$queue.getData('avatar');
|
||
|
|
if (avatar && avatar !== 'undefined') {
|
||
|
|
this.avatar = avatar;
|
||
|
|
} else {
|
||
|
|
this.avatar = '/static/img/logo.png';
|
||
|
|
}
|
||
|
|
let that = this;
|
||
|
|
that.$Request.getT('/common/type/115').then(res => {
|
||
|
|
if (res.code == 0) {
|
||
|
|
if (res.data && res.data.value) {
|
||
|
|
this.money = res.data.value;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
that.$Request.getT('/common/type/137').then(res => {
|
||
|
|
if (res.code == 0) {
|
||
|
|
if (res.data && res.data.value) {
|
||
|
|
this.oldmoney = res.data.value;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
this.getUserInfo();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getUserInfo() {
|
||
|
|
let userId = this.$queue.getData('userId');
|
||
|
|
this.$Request.postT("/app/selectUserById?userId=" + userId).then(res => {
|
||
|
|
if (res.code === 0) {
|
||
|
|
this.member = res.data.member ? res.data.member : 0;
|
||
|
|
this.nickName = res.data.nickName ? res.data.nickName : res.data.phone;
|
||
|
|
this.avatar = res.data.imageUrl ? res.data.imageUrl :
|
||
|
|
this.$queue.setData("avatar", res.data.imageUrl ? res.data.imageUrl :
|
||
|
|
'/static/img/logo.png');
|
||
|
|
this.$queue.setData('member', res.data.member);
|
||
|
|
this.$queue.setData("nickName", res.data.nickName ? res.data.nickName : res.data.phone);
|
||
|
|
this.$queue.setData("mobile", res.data.phone);
|
||
|
|
this.$queue.setData("invitationCode", res.data.invitationCode);
|
||
|
|
this.$queue.setData("relation_id", res.data.relationId);
|
||
|
|
this.$queue.setData("relation", res.data.invitationCode);
|
||
|
|
this.$queue.setData("grade", res.data.grade);
|
||
|
|
this.$queue.setData("isInvitation", res.data.isInvitation);
|
||
|
|
this.$queue.setData("gender", parseInt(res.data.gender));
|
||
|
|
this.$queue.setData("sex", res.data.sex);
|
||
|
|
} else {
|
||
|
|
this.goLogin();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
goLogin() {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: '/pages/public/login'
|
||
|
|
});
|
||
|
|
},
|
||
|
|
btns() {
|
||
|
|
let token = this.$queue.getData('token');
|
||
|
|
if (token) {
|
||
|
|
let userId = this.$queue.getData('userId');
|
||
|
|
uni.showLoading({
|
||
|
|
title: '支付中'
|
||
|
|
});
|
||
|
|
this.$Request.postT('/api/order/wxPayMember?userId=' + userId).then(res => {
|
||
|
|
uni.requestPayment({
|
||
|
|
provider: 'wxpay',
|
||
|
|
timeStamp: res.timestamp,
|
||
|
|
nonceStr: res.noncestr,
|
||
|
|
package: res.package,
|
||
|
|
signType: res.signType,
|
||
|
|
paySign: res.sign,
|
||
|
|
success: function(res) {
|
||
|
|
uni.showLoading({
|
||
|
|
title: '支付成功'
|
||
|
|
});
|
||
|
|
uni.hideLoading();
|
||
|
|
setTimeout(() => {
|
||
|
|
uni.navigateBack();
|
||
|
|
}, 1000);
|
||
|
|
},
|
||
|
|
fail: function(err) {
|
||
|
|
uni.hideLoading();
|
||
|
|
this.$queue.showToast('支付失败');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
this.goLogin();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
page {
|
||
|
|
width: 100%;
|
||
|
|
background: #272734;
|
||
|
|
}
|
||
|
|
|
||
|
|
.top_view {
|
||
|
|
height: 300rpx;
|
||
|
|
background-image: url('https://bwc.xianmxkj.com/img/20210828/eedfbf8d508b4093b261546640f3193a.png');
|
||
|
|
background-size: 100%;
|
||
|
|
|
||
|
|
.top_view_bottom {
|
||
|
|
margin-top: 50rpx;
|
||
|
|
margin-left: 30rpx;
|
||
|
|
|
||
|
|
.yueka {
|
||
|
|
font-size: 32rpx;
|
||
|
|
font-family: PingFang SC Bold, PingFang SC Bold-Bold;
|
||
|
|
font-weight: 700;
|
||
|
|
color: #dfc5a7;
|
||
|
|
}
|
||
|
|
|
||
|
|
.huiyuan_biaoyu {
|
||
|
|
margin-top: 15rpx;
|
||
|
|
font-size: 24rpx;
|
||
|
|
font-family: PingFang SC Regular, PingFang SC Regular-Regular;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #dfc5a7;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 82rpx;
|
||
|
|
height: 82rpx;
|
||
|
|
border-radius: 100rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nickName {
|
||
|
|
font-size: 28rpx;
|
||
|
|
font-family: PingFang SC Bold, PingFang SC Bold-Bold;
|
||
|
|
font-weight: 700;
|
||
|
|
color: #ffffff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.huiyuan_title {
|
||
|
|
font-size: 22rpx;
|
||
|
|
font-family: PingFang SC Regular, PingFang SC Regular-Regular;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #c59d7c;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.category_view {
|
||
|
|
// background-image: url('https://bwc.xianmxkj.com/img/20210828/eedfbf8d508b4093b261546640f3193a.png');
|
||
|
|
// background-size: 100%;
|
||
|
|
width: 690rpx;
|
||
|
|
height: 150rpx;
|
||
|
|
padding: 40rpx;
|
||
|
|
margin: 30rpx;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.vip_title {
|
||
|
|
width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 32rpx;
|
||
|
|
font-family: PingFang SC Bold, PingFang SC Bold-Bold;
|
||
|
|
font-weight: 700;
|
||
|
|
color: #dfc5a7;
|
||
|
|
line-height: 32rpx;
|
||
|
|
margin-top: 50rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.vip_btn {
|
||
|
|
width: 690rpx;
|
||
|
|
height: 88rpx;
|
||
|
|
background: linear-gradient(0deg, #af8262 0%, #cab49c 100%);
|
||
|
|
border-radius: 50rpx;
|
||
|
|
margin: 100rpx 30rpx 30rpx;
|
||
|
|
font-size: 38rpx;
|
||
|
|
font-weight: 700;
|
||
|
|
color: #402321;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 88rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.vip_btn1 {
|
||
|
|
width: 49%;
|
||
|
|
height: 88rpx;
|
||
|
|
background: #272734;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
margin: 30rpx;
|
||
|
|
font-size: 38rpx;
|
||
|
|
font-weight: 700;
|
||
|
|
color: #FFFFFF;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 88rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.vipTop {
|
||
|
|
background: #222;
|
||
|
|
padding: 0 30upx;
|
||
|
|
padding-top: 100upx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.top {
|
||
|
|
background-image: linear-gradient(to bottom, #333333, #343434);
|
||
|
|
border-radius: 30upx 30upx 0 0;
|
||
|
|
padding: 30upx;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.topTitle {
|
||
|
|
width: 85%;
|
||
|
|
position: absolute;
|
||
|
|
}
|
||
|
|
|
||
|
|
.category {
|
||
|
|
width: 100%;
|
||
|
|
|
||
|
|
.swiper {
|
||
|
|
width: 100%;
|
||
|
|
|
||
|
|
.uni-swiper-dot {
|
||
|
|
width: 20upx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.category-list {
|
||
|
|
width: 100%;
|
||
|
|
height: auto;
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-start;
|
||
|
|
flex-flow: wrap;
|
||
|
|
|
||
|
|
.icon-box-left {
|
||
|
|
width: 33%;
|
||
|
|
display: flex;
|
||
|
|
flex-flow: wrap;
|
||
|
|
justify-content: left;
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #DFC5A7;
|
||
|
|
text-align: left;
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
width: 100upx;
|
||
|
|
height: 100upx;
|
||
|
|
margin-left: 15rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: left;
|
||
|
|
padding-bottom: 18upx;
|
||
|
|
padding-top: 18upx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-box-right {
|
||
|
|
width: 33%;
|
||
|
|
display: flex;
|
||
|
|
flex-flow: wrap;
|
||
|
|
justify-content: flex-end;
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #DFC5A7;
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
width: 100upx;
|
||
|
|
height: 100upx;
|
||
|
|
margin-right: 15rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text {
|
||
|
|
width: 100%;
|
||
|
|
text-align: right;
|
||
|
|
padding-bottom: 18upx;
|
||
|
|
padding-top: 18upx;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-box {
|
||
|
|
width: 33%;
|
||
|
|
display: flex;
|
||
|
|
flex-flow: wrap;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #DFC5A7;
|
||
|
|
text-align: center;
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
width: 100upx;
|
||
|
|
height: 100upx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
padding-bottom: 18upx;
|
||
|
|
padding-top: 18upx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.dots {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
height: 15upx;
|
||
|
|
width: 100%;
|
||
|
|
|
||
|
|
view {
|
||
|
|
width: 30upx;
|
||
|
|
height: 5upx;
|
||
|
|
background-color: rgba(0, 0, 0, 0.2);
|
||
|
|
|
||
|
|
&.active {
|
||
|
|
background-color: #ff570a;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
font-size: 38upx;
|
||
|
|
font-weight: 700;
|
||
|
|
color: #E0B379;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pingtai {
|
||
|
|
font-size: 28upx;
|
||
|
|
color: #fff;
|
||
|
|
font-weight: 500;
|
||
|
|
margin-top: 10upx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.vipLogo {
|
||
|
|
width: 100upx;
|
||
|
|
margin-left: 84%;
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.vip-center {
|
||
|
|
padding: 30upx;
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.center-title {
|
||
|
|
margin: 30upx 0;
|
||
|
|
font-size: 36upx;
|
||
|
|
font-weight: 600;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.center-kuang {
|
||
|
|
padding: 70upx 30upx;
|
||
|
|
line-height: 40upx;
|
||
|
|
border: 1px solid #DDB276;
|
||
|
|
background: #FFF7EA;
|
||
|
|
border-radius: 15upx;
|
||
|
|
font-size: 28upx;
|
||
|
|
color: #7C5B35;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.center-kuang view {
|
||
|
|
display: inline-block;
|
||
|
|
width: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.center-money {
|
||
|
|
text-align: right;
|
||
|
|
color: #E0B379;
|
||
|
|
}
|
||
|
|
|
||
|
|
.center-money span {
|
||
|
|
font-size: 60upx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bottoms {
|
||
|
|
background: #FFFFFF;
|
||
|
|
margin-top: 30upx;
|
||
|
|
padding: 30upx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bottoms-title {
|
||
|
|
font-size: 36upx;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #333;
|
||
|
|
margin: 30upx 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.vip-bottom {
|
||
|
|
|
||
|
|
width: 100%;
|
||
|
|
|
||
|
|
bottom: 0;
|
||
|
|
|
||
|
|
z-index: 10;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
|
||
|
|
.payinfo {
|
||
|
|
width: 100upx;
|
||
|
|
text-align: center;
|
||
|
|
|
||
|
|
.text {
|
||
|
|
color: #666;
|
||
|
|
font-size: 24rpx;
|
||
|
|
margin-top: 14rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 88rpx;
|
||
|
|
height: 88rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.btns {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 0;
|
||
|
|
background-color: #E3B97D;
|
||
|
|
color: #fff;
|
||
|
|
border: 1px solid #E3B97D;
|
||
|
|
border-radius: 0;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
uni-button:after {
|
||
|
|
border: none !important;
|
||
|
|
}
|
||
|
|
</style>
|