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.
570 lines
12 KiB
570 lines
12 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> |
|
import jweixin from '@/common/jweixin.js' |
|
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() { |
|
//#ifndef H5 |
|
uni.navigateTo({ |
|
url: '/pages/public/login' |
|
}); |
|
//#endif |
|
//#ifdef H5 |
|
window.location.href = 'http://waimai.n.gznl.top/sqx_fast/appLogin/wechatLogin'; |
|
//#endif |
|
}, |
|
btns() { |
|
var that = this; |
|
let token = this.$queue.getData('token'); |
|
if (token) { |
|
let userId = this.$queue.getData('userId'); |
|
uni.showLoading({ |
|
title: '支付中' |
|
}); |
|
//#ifdef MP-WEIXIN |
|
this.$Request.postT('/api/order/wxPayMember?userId=' + userId + '&type=3').then(res => { |
|
this.wxPay(res) |
|
uni.hideLoading(); |
|
}) |
|
//#endif |
|
//#ifdef H5 |
|
this.h5Pay() |
|
//#endif |
|
} else { |
|
uni.hideLoading(); |
|
this.goLogin(); |
|
} |
|
}, |
|
wxPay(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(); |
|
that.$queue.showToast('支付失败'); |
|
} |
|
}); |
|
}, |
|
h5Pay(){ |
|
var pageUrl = encodeURIComponent(window.location.href); |
|
jweixin.wxChatWebPay(pageUrl).then((result)=>{ |
|
uni.hideLoading(); |
|
}) |
|
}, |
|
} |
|
} |
|
</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>
|
|
|