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.
 
 
 
 

547 lines
11 KiB

<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>