213 lines
4.7 KiB
Vue
213 lines
4.7 KiB
Vue
<template>
|
|
<view>
|
|
<view class="hm-p-20">
|
|
<view class="card">
|
|
<image class="bg" :src="userInfo.v.grade.vip[lv].card_cover"></image>
|
|
<view class="mask">
|
|
<image :src="userInfo.avatar.url"></image>
|
|
<view class="text">
|
|
会员卡
|
|
<view class="lv">
|
|
{{userInfo.v.grade.vip[lv].name}}
|
|
</view>
|
|
</view>
|
|
<view class="id">
|
|
NO.{{100000000+userInfo.user_id}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="account">
|
|
<u-grid :border="false" col="3">
|
|
<u-grid-item @click="goTo('user/vip/wallet')">
|
|
<view class="number">{{userInfo.money}}</view>
|
|
<view class="text">余额</view>
|
|
</u-grid-item>
|
|
<u-grid-item @click="goTo('user/vip/logs/score')">
|
|
<view class="number">{{userInfo.usable}}</view>
|
|
<view class="text">积分</view>
|
|
</u-grid-item>
|
|
<u-grid-item @click="goTo('user/vip/logs/grow')">
|
|
<view class="number">{{userInfo.score}}</view>
|
|
<view class="text">成长值</view>
|
|
</u-grid-item>
|
|
</u-grid>
|
|
</view>
|
|
<view class="menu">
|
|
<view class="navbar-list" @click="goTo('user/vip/wallet')">
|
|
<image src="/static/user/payment.png"></image>
|
|
在线充值
|
|
<view class="arrow-right">
|
|
<u-icon color="#c0c4cc" name="arrow-right"></u-icon>
|
|
</view>
|
|
<view v-if="couponCount.all > 0" class="text">{{couponCount.all}}张即将过期</view>
|
|
</view>
|
|
<view class="navbar-list" @click="goTo('user/vip/logs/grow')">
|
|
<image src="/static/user/growup.png"></image>
|
|
成长值
|
|
<view class="arrow-right">
|
|
<u-icon color="#c0c4cc" name="arrow-right"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="navbar-list" @click="goTo('user/vip/open?action=equity')">
|
|
<image src="/static/user/equity.png"></image>
|
|
会员权益
|
|
<view class="arrow-right">
|
|
<u-icon color="#c0c4cc" name="arrow-right"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="navbar-list" @click="goTo('user/vip/describe')">
|
|
<image src="/static/user/comment.png"></image>
|
|
会员说明
|
|
<view class="arrow-right">
|
|
<u-icon color="#c0c4cc" name="arrow-right"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 技术支持 -->
|
|
<view class="hm">
|
|
{{applet.copyright}} <text class="v">V{{applet.version}}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
const App = getApp();
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
userInfo: {},
|
|
applet: {},
|
|
lv: 0,
|
|
};
|
|
},
|
|
|
|
components: {},
|
|
props: {},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面加载
|
|
*/
|
|
onLoad(options) {
|
|
let _this = this;
|
|
_this.applet = uni.getStorageSync('applet');
|
|
},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面显示
|
|
*/
|
|
onShow() {
|
|
let _this = this;
|
|
_this.getUserDetail();
|
|
},
|
|
|
|
methods: {
|
|
/**
|
|
* 获取当前用户信息
|
|
*/
|
|
getUserDetail() {
|
|
let _this = this;
|
|
App._get('user/detail', {}, result => {
|
|
_this.userInfo = result.data.detail;
|
|
_this.lv = result.data.detail.v.value-1;
|
|
});
|
|
},
|
|
/**
|
|
* 菜单列表导航跳转
|
|
*/
|
|
goTo(url) {
|
|
App.goTo(url); // 转跳指定的页面
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.card{
|
|
width: 710rpx;
|
|
height: 328rpx;
|
|
z-index: 1;
|
|
position:relative;
|
|
.bg{
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 20rpx;
|
|
}
|
|
.mask{
|
|
border-radius: 20rpx;
|
|
z-index: 100;
|
|
position: absolute;
|
|
top: 0rpx;
|
|
left: 0rpx;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
color: #fff;
|
|
image{
|
|
border-radius: 50%;
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
float: left;
|
|
margin: 50rpx 20rpx 0rpx 50rpx;
|
|
}
|
|
.text{
|
|
padding-top: 50rpx;
|
|
font-weight: bold;
|
|
font-size: 30rpx;
|
|
.lv{
|
|
font-size: 24rpx;
|
|
padding-top: 10rpx;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
.id{
|
|
padding: 150rpx 50rpx 0rpx 0rpx;
|
|
text-align: right;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
.account{
|
|
margin-top: 20rpx;
|
|
padding: 20rpx;
|
|
border-radius: 8rpx;
|
|
background-color: #fff;
|
|
text-align: center;
|
|
color: #303133;
|
|
font-weight: bold;
|
|
.text{
|
|
padding-top: 10rpx;
|
|
font-size: 30rpx;
|
|
}
|
|
}
|
|
.menu {
|
|
margin-top: 20rpx;
|
|
border-radius: 8rpx;
|
|
padding: 0 20rpx 30rpx 20rpx;
|
|
background-color: #fff;
|
|
|
|
.navbar-list {
|
|
padding-top: 30rpx;
|
|
line-height: 50rpx;
|
|
image {
|
|
float: left;
|
|
margin-right: 20rpx;
|
|
height: 50rpx;
|
|
width: 50rpx;
|
|
}
|
|
.text{
|
|
display: inline-block;
|
|
float: right;
|
|
margin-right: 10rpx;
|
|
font-size: 24rpx;
|
|
color: #fa3534;
|
|
}
|
|
.arrow-right {
|
|
display: inline-block;
|
|
float: right;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|