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.
604 lines
14 KiB
604 lines
14 KiB
<template>
|
|
<view class="vipGrade">
|
|
<view class="headerBg">
|
|
<view class="header">
|
|
<view class="top acea-row row-between-wrapper">
|
|
<view class="acea-row row-middle">
|
|
<view class="pictrue">
|
|
<image :src="user_info.avatar"></image>
|
|
</view>
|
|
<view>
|
|
<view class="acea-row row-middle">
|
|
<view class="nickname line1">{{ user_info.nickname }}</view>
|
|
<view class="name" v-if="level_info.name">{{ level_info.name }}</view>
|
|
<image :src="level_info.icon" class="levelImage" v-if="level_info.icon"></image>
|
|
</view>
|
|
<view class="acea-row row-middle">
|
|
<view class="progress">
|
|
<view
|
|
class="bg-reds"
|
|
:style="
|
|
'width:' +
|
|
(level_info.exp > level_info.next_exp
|
|
? 100
|
|
: $util.$h.Div(parseInt(level_info.exp), level_info.next_exp) >= 5
|
|
? $util.$h.Div(parseInt(level_info.exp), level_info.next_exp)
|
|
: 5) +
|
|
'%;'
|
|
"
|
|
></view>
|
|
</view>
|
|
<view class="percent">{{ level_info.exp ? level_info.exp.split('.')[0] : 0 }}/{{ level_info.next_exp || 0 }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="code" @click="tapQrCode">
|
|
<view class="iconfont icon-erweima3"></view>
|
|
<view>会员码</view>
|
|
</view>
|
|
</view>
|
|
<view class="bottom acea-row row-middle">
|
|
<view class="item">
|
|
<view>积分</view>
|
|
<view class="num">{{ user_info.integral || 0 }}</view>
|
|
</view>
|
|
<view class="item">
|
|
<view>余额</view>
|
|
<view class="num" v-if="user_info.now_money">
|
|
{{ user_info.now_money.split('.')[0] || 0 }}
|
|
<text class="numSp" v-if="user_info.now_money.split('.')[1] > 0">.{{ user_info.now_money.split('.')[1] }}</text>
|
|
</view>
|
|
<view class="num" v-else>0</view>
|
|
</view>
|
|
<view class="item">
|
|
<view>优惠券</view>
|
|
<view class="num">{{ user_info.couponCount || 0 }}</view>
|
|
</view>
|
|
<view class="item">
|
|
<view>折扣</view>
|
|
<view class="num">{{ level_info.discount / 10 || 0 }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="equity">
|
|
<view class="title acea-row row-between-wrapper">
|
|
<view>{{ level_info.name || '' }}会员尊享权益</view>
|
|
<view class="more" @click="more">
|
|
查看更多
|
|
<text class="iconfont icon-jinru2"></text>
|
|
</view>
|
|
</view>
|
|
<view class="list acea-row row-around row-middle">
|
|
<view class="item">
|
|
<view class="pictrue">
|
|
<image :src="imgHost + '/statics/images/userVip1.png'"></image>
|
|
</view>
|
|
<view>购物折扣</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="pictrue">
|
|
<image :src="imgHost + '/statics/images/userVip2.png'"></image>
|
|
</view>
|
|
<view>专属徽章</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="pictrue">
|
|
<image :src="imgHost + '/statics/images/userVip3.png'"></image>
|
|
</view>
|
|
<view>经验累积</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="pictrue">
|
|
<image :src="imgHost + '/statics/images/userVip4.png'"></image>
|
|
</view>
|
|
<view>尊享客服</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="task">
|
|
<view class="title acea-row row-between-wrapper">
|
|
<view>成长任务</view>
|
|
<view class="more" @click="more">
|
|
查看更多
|
|
<text class="iconfont icon-jinru2"></text>
|
|
</view>
|
|
</view>
|
|
<view class="list">
|
|
<view class="item acea-row row-between-wrapper">
|
|
<view class="acea-row row-middle">
|
|
<view class="pictrue acea-row row-center-wrapper">
|
|
<text class="iconfont icon-meiriqiandao"></text>
|
|
</view>
|
|
<view class="txt">
|
|
<view>每日签到</view>
|
|
<view class="exp acea-row row-middle">
|
|
<image src="../static/exp.png"></image>
|
|
经验值+{{ task_info.sign }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<navigator class="bnt acea-row row-center-wrapper" url="/pages/users/user_sgin/index" hover-class="none">去完成</navigator>
|
|
</view>
|
|
<view class="item acea-row row-between-wrapper">
|
|
<view class="acea-row row-middle">
|
|
<view class="pictrue acea-row row-center-wrapper">
|
|
<text class="iconfont icon-goumaishangpin"></text>
|
|
</view>
|
|
<view class="txt">
|
|
<view>购买商品</view>
|
|
<view class="exp acea-row row-middle">
|
|
<image src="../static/exp.png"></image>
|
|
经验值+{{ task_info.order }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<navigator class="bnt acea-row row-center-wrapper" open-type="switchTab" url="/pages/goods_cate/goods_cate" hover-class="none">去完成</navigator>
|
|
</view>
|
|
<view class="item acea-row row-between-wrapper">
|
|
<view class="acea-row row-middle">
|
|
<view class="pictrue acea-row row-center-wrapper">
|
|
<text class="iconfont icon-yaoqinghaoyou2"></text>
|
|
</view>
|
|
<view class="txt">
|
|
<view>邀请好友</view>
|
|
<view class="exp acea-row row-middle">
|
|
<image src="../static/exp.png"></image>
|
|
经验值+{{ task_info.invite }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<navigator class="bnt acea-row row-center-wrapper" url="/pages/users/user_spread_code/index" hover-class="none">去完成</navigator>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="task on">
|
|
<view class="title acea-row row-between-wrapper">
|
|
<view>消费记录</view>
|
|
<view class="more" @click="record">
|
|
查看更多
|
|
<text class="iconfont icon-jinru2"></text>
|
|
</view>
|
|
</view>
|
|
<view class="list">
|
|
<view class="item acea-row row-between row-top" v-for="(item, index) in list" :key="index">
|
|
<view class="acea-row row-top">
|
|
<text class="icon iconfont icon-xiaofeijilu1" v-if="item.type == 1"></text>
|
|
<text class="icon iconfont icon-fufeihuiyuan1" v-else-if="item.type == 7"></text>
|
|
<text class="icon iconfont icon-xiaofeijilu-rongcuo" v-else></text>
|
|
<view class="txt">
|
|
<view class="line1">{{ item.title }}</view>
|
|
<view class="exp record">{{ item.type_name }}</view>
|
|
<view class="time">{{ item.day }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="num">-{{ item.price }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="codePopup" v-show="isCode" @touchmove.stop.prevent="moveHandle">
|
|
<view class="header acea-row row-between-wrapper">
|
|
<view class="title" :class="{ on: codeIndex == index, onLeft: codeIndex == 1 }" v-for="(item, index) in codeList" :key="index" @click="tapCode(index)">
|
|
{{ item.name }}
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<view class="acea-row row-center-wrapper">
|
|
<w-barcode :options="config.bar"></w-barcode>
|
|
</view>
|
|
<view class="acea-row row-center-wrapper" style="margin-top: 35rpx">
|
|
<w-qrcode :options="config.qrc" @generate="hello"></w-qrcode>
|
|
</view>
|
|
<view class="codeNum">{{ config.bar.code }}</view>
|
|
<view class="tip">如遇到扫码失败请将屏幕调至最亮重新扫码</view>
|
|
</view>
|
|
<view class="iconfont icon-guanbi2" @click="closeCode"></view>
|
|
</view>
|
|
<view class="mark" v-if="isCode" @touchmove.stop.prevent="moveHandle"></view>
|
|
<!-- #ifdef MP -->
|
|
<authorize v-if="isShowAuth" @authColse="authColse" @onLoadFun="onLoadFun"></authorize>
|
|
<!-- #endif -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { HTTP_REQUEST_URL } from '@/config/app';
|
|
import { getlevelInfo, moneyList, getRandCode } from '@/api/user.js';
|
|
import { mapGetters } from 'vuex';
|
|
import { toLogin } from '@/libs/login.js';
|
|
export default {
|
|
computed: mapGetters(['isLogin']),
|
|
data() {
|
|
return {
|
|
config: {
|
|
bar: {
|
|
code: '',
|
|
color: ['#000'],
|
|
bgColor: '#FFFFFF', // 背景色
|
|
width: 480, // 宽度
|
|
height: 110 // 高度
|
|
},
|
|
qrc: {
|
|
code: '',
|
|
size: 380, // 二维码大小
|
|
level: 3, //等级 0～4
|
|
bgColor: '#FFFFFF', //二维码背景色 默认白色
|
|
border: {
|
|
color: ['#eee', '#eee'], //边框颜色支持渐变色
|
|
lineWidth: 3 //边框宽度
|
|
},
|
|
// img: '/static/logo.png', //图片
|
|
// iconSize: 40, //二维码图标的大小
|
|
color: ['#333', '#333'] //边框颜色支持渐变色
|
|
}
|
|
},
|
|
codeList: [
|
|
{
|
|
name: '会员码'
|
|
},
|
|
{
|
|
name: '付款码'
|
|
}
|
|
],
|
|
codeIndex: 0,
|
|
isCode: false,
|
|
imgHost: HTTP_REQUEST_URL,
|
|
level_info: {},
|
|
user_info: {},
|
|
task_info: {},
|
|
list: [],
|
|
isShowAuth: false
|
|
};
|
|
},
|
|
onLoad() {
|
|
this.levelInfo();
|
|
this.getUserBillList();
|
|
},
|
|
onReady() {},
|
|
onShow() {},
|
|
methods: {
|
|
/**
|
|
* 授权回调
|
|
*/
|
|
onLoadFun: function () {
|
|
this.isShowAuth = false;
|
|
},
|
|
// 授权关闭
|
|
authColse: function (e) {
|
|
this.isShowAuth = e;
|
|
},
|
|
more() {
|
|
uni.navigateTo({
|
|
url: '/pages/users/user_vip/index'
|
|
});
|
|
},
|
|
record() {
|
|
uni.navigateTo({
|
|
url: '/pages/annex/record_list/index'
|
|
});
|
|
},
|
|
hello(res) {
|
|
// console.log(321,res)
|
|
},
|
|
getCode() {
|
|
getRandCode()
|
|
.then((res) => {
|
|
let code = res.data.code;
|
|
this.config.bar.code = code;
|
|
this.config.qrc.code = code;
|
|
})
|
|
.catch((err) => {
|
|
return this.$util.Tips(err);
|
|
});
|
|
},
|
|
tapQrCode() {
|
|
if (this.isLogin) {
|
|
this.isCode = true;
|
|
this.codeIndex = 0;
|
|
this.$nextTick(function () {
|
|
let code = this.user_info.bar_code;
|
|
this.config.bar.code = code;
|
|
this.config.qrc.code = code;
|
|
});
|
|
} else {
|
|
toLogin();
|
|
}
|
|
},
|
|
closeCode() {
|
|
this.isCode = false;
|
|
},
|
|
tapCode(index) {
|
|
this.codeIndex = index;
|
|
if (index == 1) {
|
|
this.getCode();
|
|
} else {
|
|
let code = this.user_info.bar_code;
|
|
this.config.bar.code = code;
|
|
this.config.qrc.code = code;
|
|
}
|
|
},
|
|
levelInfo() {
|
|
getlevelInfo()
|
|
.then((res) => {
|
|
this.user_info = res.data.user;
|
|
this.task_info = res.data.task;
|
|
this.level_info = res.data.level_info;
|
|
res.data.level_list.forEach((item) => {
|
|
if (item.name === res.data.level_info.name) {
|
|
this.level_info.next_exp = item.next_exp_num;
|
|
}
|
|
});
|
|
})
|
|
.catch((err) => {
|
|
this.$util.Tips({
|
|
title: err
|
|
});
|
|
});
|
|
},
|
|
getUserBillList() {
|
|
moneyList(
|
|
{
|
|
page: 1,
|
|
limit: 5
|
|
},
|
|
9
|
|
)
|
|
.then((res) => {
|
|
this.list = res.data.list;
|
|
})
|
|
.catch((err) => {
|
|
this.$util.Tips({
|
|
title: err
|
|
});
|
|
});
|
|
},
|
|
moveHandle() {}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.vipGrade {
|
|
.mark {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
z-index: 50;
|
|
}
|
|
.codePopup .header .title.on {
|
|
background-color: #f7b942 !important;
|
|
}
|
|
.headerBg {
|
|
background: url('../static/big-bg.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
width: 100%;
|
|
height: 276rpx;
|
|
padding-top: 1rpx;
|
|
.header {
|
|
width: 690rpx;
|
|
height: 318rpx;
|
|
background: url('../static/grade-bg.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: 18rpx auto 0 auto;
|
|
padding-top: 40rpx;
|
|
.top {
|
|
margin: 0 30rpx 70rpx 30rpx;
|
|
.progress {
|
|
overflow: hidden;
|
|
background-color: #eeeeee;
|
|
width: 200rpx;
|
|
height: 6rpx;
|
|
border-radius: 7rpx;
|
|
position: relative;
|
|
margin-right: 6rpx;
|
|
.bg-reds {
|
|
width: 0;
|
|
height: 100%;
|
|
transition: width 0.6s ease;
|
|
background: linear-gradient(90deg, rgba(233, 51, 35, 1) 0%, rgba(255, 137, 51, 1) 100%);
|
|
}
|
|
}
|
|
.percent {
|
|
font-size: 20rpx;
|
|
color: #463b26;
|
|
margin-left: 12rpx;
|
|
}
|
|
.code {
|
|
color: #333333;
|
|
font-size: 20rpx;
|
|
text-align: center;
|
|
.icon-erweima3 {
|
|
margin-bottom: 6rpx;
|
|
}
|
|
}
|
|
.pictrue {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border: 2rpx solid #9a8661;
|
|
border-radius: 50%;
|
|
margin-right: 22rpx;
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.nickname {
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
max-width: 220rpx;
|
|
}
|
|
.name {
|
|
font-size: 20rpx;
|
|
color: #e8c891;
|
|
font-weight: 500;
|
|
background: #333333;
|
|
border-radius: 6rpx;
|
|
padding: 0 6rpx;
|
|
margin-left: 12rpx;
|
|
}
|
|
.levelImage {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
margin-left: 12rpx;
|
|
}
|
|
}
|
|
.bottom {
|
|
padding-left: 30rpx;
|
|
.item {
|
|
flex: 1;
|
|
padding: 0 10rpx;
|
|
color: #333333;
|
|
font-size: 24rpx;
|
|
.num {
|
|
font-weight: 600;
|
|
font-size: 36rpx;
|
|
margin-top: 6rpx;
|
|
.numSp {
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.equity {
|
|
margin: 82rpx auto 0 auto;
|
|
width: 690rpx;
|
|
height: 300rpx;
|
|
background: #ffffff;
|
|
border-radius: 14rpx;
|
|
.title {
|
|
padding: 28rpx 24rpx 0 24rpx;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
font-size: 34rpx;
|
|
.more {
|
|
font-weight: 400;
|
|
color: #666666;
|
|
font-size: 24rpx;
|
|
.iconfont {
|
|
font-size: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
.list {
|
|
margin-top: 44rpx;
|
|
.item {
|
|
color: #282828;
|
|
font-size: 26rpx;
|
|
.pictrue {
|
|
width: 90rpx;
|
|
height: 90rpx;
|
|
border-radius: 50%;
|
|
margin-bottom: 12rpx;
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.task {
|
|
width: 690rpx;
|
|
height: 524rpx;
|
|
background: #ffffff;
|
|
border-radius: 14rpx;
|
|
margin: 20rpx auto 0 auto;
|
|
&.on {
|
|
height: unset;
|
|
}
|
|
.title {
|
|
padding: 34rpx 24rpx 46rpx 24rpx;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
line-height: 30rpx;
|
|
.more {
|
|
font-weight: 400;
|
|
color: #666666;
|
|
font-size: 24rpx;
|
|
.iconfont {
|
|
font-size: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
.list {
|
|
.item {
|
|
.icon {
|
|
font-size: 72rpx;
|
|
color: #e7c993;
|
|
}
|
|
.num {
|
|
color: #282828;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
}
|
|
padding: 0 24rpx 26rpx 24rpx;
|
|
position: relative;
|
|
margin-bottom: 34rpx;
|
|
.pictrue {
|
|
width: 76rpx;
|
|
height: 76rpx;
|
|
background-color: #fdf8ee;
|
|
border-radius: 50%;
|
|
.iconfont {
|
|
color: #f7b942;
|
|
font-size: 40rpx;
|
|
}
|
|
}
|
|
.txt {
|
|
font-weight: 400;
|
|
color: #282828;
|
|
font-size: 28rpx;
|
|
margin-left: 24rpx;
|
|
.line1 {
|
|
width: 320rpx;
|
|
}
|
|
.exp {
|
|
color: #999999;
|
|
font-size: 22rpx;
|
|
margin-top: 2rpx;
|
|
&.record {
|
|
margin-top: 8rpx;
|
|
}
|
|
image {
|
|
color: #999999;
|
|
margin-right: 10rpx;
|
|
width: 22rpx;
|
|
height: 22rpx;
|
|
}
|
|
}
|
|
.time {
|
|
color: #999999;
|
|
font-size: 22rpx;
|
|
margin-top: 8rpx;
|
|
}
|
|
}
|
|
.bnt {
|
|
width: 112rpx;
|
|
height: 44rpx;
|
|
background: #f4dbab;
|
|
border-radius: 26rpx;
|
|
color: #755214;
|
|
font-size: 24rpx;
|
|
}
|
|
&::before {
|
|
position: absolute;
|
|
content: '';
|
|
width: 542rpx;
|
|
height: 1px;
|
|
background: #eeeeee;
|
|
bottom: 0rpx;
|
|
right: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|