552 lines
14 KiB
Vue
552 lines
14 KiB
Vue
<template>
|
||
<view :style="[componentStyle]">
|
||
<view class="userInfor" :style="[userInfoStyle]" @click="goLogin">
|
||
<view class="left acea-row row-middle">
|
||
<view class="pictrue acea-row row-center-wrapper">
|
||
<image :src="diyInfo.avatar" v-if="diyInfo.avatar && isLogin"></image>
|
||
<image v-if="!diyInfo.avatar && isLogin" :src="dataConfig.logoConfig.url || '@/static/images/f.png'"></image>
|
||
<image v-if="!isLogin" :src="dataConfig.logoConfig.url || '@/static/images/f.png'"></image>
|
||
</view>
|
||
<view class="text">
|
||
<view v-if="!isLogin" class="name">请点击登录</view>
|
||
<view v-else class="name acea-row row-middle">
|
||
<view class="nameCon line1">{{ diyInfo.nickname }}</view>
|
||
<view class="lable" v-if="diyInfo.level>0" :style="[lableStyle]">
|
||
<text class="iconfont icon-ic_crown1"></text>
|
||
{{ diyInfo.vip_name }}
|
||
</view>
|
||
</view>
|
||
<view class="acea-row row-middle" v-if="isLogin && diyInfo.level>0">
|
||
<view class="progress" :style="[progressStyle]">
|
||
<view class="bg-reds" :style="[bgRedsStyle]">
|
||
</view>
|
||
</view>
|
||
<view class="percent">{{diyInfo.exp?diyInfo.exp.split('.')[0]:0}}/{{diyInfo.next_exp || 0}}</view>
|
||
</view>
|
||
<view class="phone acea-row row-middle" v-if="isLogin && diyInfo.level<=0 && diyInfo.phone">
|
||
<text>{{diyInfo.phone}}</text>
|
||
</view>
|
||
</view>
|
||
<view v-if="isLogin" class="right acea-row row-bottom">
|
||
<template v-if="dataConfig.styleConfig.tabVal == 1">
|
||
<view class="item" v-if="checkType.indexOf(1) > -1" @click.stop="goIntegral">
|
||
<view class="num">{{diyInfo.integral||2}}</view>
|
||
<view>积分</view>
|
||
</view>
|
||
<view class="item" v-if="checkType.indexOf(2) > -1" @click.stop="goMoney">
|
||
<view class="num">{{diyInfo.now_money||6}}</view>
|
||
<view>余额</view>
|
||
</view>
|
||
<view class="item" v-if="checkType.indexOf(0) > -1" @click.stop="goCoupon">
|
||
<view class="num">{{diyInfo.coupon_num||0}}</view>
|
||
<view>优惠券</view>
|
||
</view>
|
||
<view class="item" v-if="checkType.indexOf(4) > -1" @click.stop="goCollection">
|
||
<view class="num">{{diyInfo.collectCount||0}}</view>
|
||
<view>收藏</view>
|
||
</view>
|
||
<view class="item" v-if="checkType.indexOf(5) > -1" @click.stop="goVisit">
|
||
<view class="num">{{diyInfo.visit_num||0}}</view>
|
||
<view>浏览</view>
|
||
</view>
|
||
<view class="item" v-if="(checkType.indexOf(3) > -1) || !isLogin" @click.stop="tapQrCode">
|
||
<view class="iconfont icon-a-ic_QRcode"></view>
|
||
<view>会员码</view>
|
||
</view>
|
||
</template>
|
||
<view class="item" v-if="dataConfig.styleConfig.tabVal == 0 && checkType.indexOf(3) != -1" @click.stop="tapQrCode">
|
||
<view class="iconfont icon-a-ic_QRcode"></view>
|
||
<view>会员码</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="dataConfig.styleConfig.tabVal == 0 && isLogin" class="bottom acea-row row-middle">
|
||
<view v-if="checkType.indexOf(1) != -1" class="item" @click.stop="goIntegral">
|
||
<view class="num">{{diyInfo.integral||2}}</view>
|
||
<view>积分</view>
|
||
</view>
|
||
<view v-if="checkType.indexOf(2) != -1" class="item" @click.stop="goMoney">
|
||
<view class="num">{{diyInfo.now_money||6}}</view>
|
||
<view>余额</view>
|
||
</view>
|
||
<view v-if="checkType.indexOf(0) != -1" class="item" @click.stop="goCoupon">
|
||
<view class="num">{{diyInfo.coupon_num||0}}</view>
|
||
<view>优惠券</view>
|
||
</view>
|
||
<view v-if="checkType.indexOf(4) != -1" class="item" @click.stop="goCollection">
|
||
<view class="num">{{diyInfo.collectCount||0}}</view>
|
||
<view>收藏</view>
|
||
</view>
|
||
<view v-if="checkType.indexOf(5) != -1" class="item" @click.stop="goVisit">
|
||
<view class="num">{{diyInfo.visit_num||0}}</view>
|
||
<view>浏览</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="codePopup" :style="colorStyle" v-show="isCode">
|
||
<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"></view> -->
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import colors from "@/mixins/color";
|
||
import {
|
||
diyUserInfo
|
||
} from '@/api/api.js';
|
||
import {
|
||
getlevelInfo,
|
||
getRandCode
|
||
} from '@/api/user.js';
|
||
import {
|
||
mapGetters
|
||
} from 'vuex';
|
||
export default {
|
||
computed: {
|
||
...mapGetters(['isLogin']),
|
||
lableStyle() {
|
||
let styleObject = {
|
||
'background': this.colorToRgba(this.currentLevelColor, 0.2),
|
||
'color': this.currentLevelColor,
|
||
};
|
||
return styleObject;
|
||
},
|
||
componentStyle() {
|
||
return {
|
||
'padding': `${this.dataConfig.topConfig.val * 2}rpx ${this.dataConfig.prConfig.val * 2}rpx ${this.dataConfig.bottomConfig.val * 2}rpx`,
|
||
'margin-top': `${this.dataConfig.mbConfig.val * 2}rpx`,
|
||
'background': this.dataConfig.bottomBgColor.color[0].item,
|
||
};
|
||
},
|
||
progressStyle() {
|
||
let styleObject = {};
|
||
if (this.dataConfig.toneConfig.tabVal) {
|
||
styleObject['background'] = this.dataConfig.progressBgColor.color[0].item;
|
||
}
|
||
return styleObject;
|
||
},
|
||
bgRedsStyle() {
|
||
let diyInfo = this.diyInfo;
|
||
let styleObject = {
|
||
'width': `${diyInfo.exp>diyInfo.next_exp?100:(this.$util.$h.Div(parseInt(diyInfo.exp), diyInfo.next_exp)*100 >=5? this.$util.$h.Div(parseInt(diyInfo.exp), diyInfo.next_exp)*100:5)}%`,
|
||
};
|
||
if (this.dataConfig.toneConfig.tabVal) {
|
||
styleObject['background'] = `linear-gradient(90deg, ${this.dataConfig.progressColor.color[0].item} 0%, ${this.dataConfig.progressColor.color[1].item} 100%)`;
|
||
}
|
||
return styleObject;
|
||
},
|
||
userInfoStyle() {
|
||
let borderRadius = `${this.dataConfig.fillet.val * 2}rpx`;
|
||
if (this.dataConfig.fillet.type) {
|
||
borderRadius =
|
||
`${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx ${this.dataConfig.fillet.valList[2].val * 2}rpx ${this.dataConfig.fillet.valList[3].val * 2}rpx`;
|
||
}
|
||
return {
|
||
'border-radius': borderRadius,
|
||
'background': `linear-gradient(90deg, ${this.dataConfig.moduleColor.color[0].item} 0%, ${this.dataConfig.moduleColor.color[1].item} 100%)`,
|
||
};
|
||
},
|
||
},
|
||
name: 'userInfor',
|
||
props: {
|
||
dataConfig: {
|
||
type: Object,
|
||
default: () => {}
|
||
},
|
||
isSortType: {
|
||
type: String | Number,
|
||
default: 0
|
||
}
|
||
},
|
||
mixins: [colors],
|
||
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,
|
||
bgColor: '',
|
||
textColor: '',
|
||
progressColor: this.dataConfig.progressColor.color,
|
||
mbCongfig: 0,
|
||
prConfig: 0, //背景边距
|
||
itemStyle: 0,
|
||
checkType: this.dataConfig.checkboxInfo.type,
|
||
diyInfo: {},
|
||
currentLevelColor: '',
|
||
}
|
||
},
|
||
created() {
|
||
if (this.isLogin) {
|
||
this.getDiyUserInfo();
|
||
this.getlevelInfo();
|
||
}
|
||
},
|
||
watch: {
|
||
isLogin: {
|
||
handler: function(newV, oldV) {
|
||
if (newV) {
|
||
this.getDiyUserInfo();
|
||
}
|
||
},
|
||
deep: true
|
||
}
|
||
},
|
||
methods: {
|
||
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() {
|
||
// this.isCode = true;
|
||
// this.codeIndex = 0;
|
||
// this.$nextTick(function() {
|
||
// let code = this.diyInfo.bar_code;
|
||
// this.config.bar.code = code;
|
||
// this.config.qrc.code = code;
|
||
// })
|
||
uni.navigateTo({
|
||
url: '/pages/users/user_member_code/index'
|
||
})
|
||
},
|
||
closeCode() {
|
||
this.isCode = false
|
||
this.isextension = false
|
||
},
|
||
tapCode(index) {
|
||
this.codeIndex = index;
|
||
if (index == 1) {
|
||
this.getCode();
|
||
} else {
|
||
let code = this.diyInfo.bar_code;
|
||
this.config.bar.code = code;
|
||
this.config.qrc.code = code;
|
||
}
|
||
},
|
||
goIntegral() {
|
||
uni.navigateTo({
|
||
url: '/pages/users/user_integral/index'
|
||
})
|
||
},
|
||
goMoney() {
|
||
uni.navigateTo({
|
||
url: '/pages/users/user_money/index'
|
||
})
|
||
},
|
||
goCollection() {
|
||
uni.navigateTo({
|
||
url: '/pages/users/user_goods_collection/index'
|
||
})
|
||
},
|
||
goVisit() {
|
||
uni.navigateTo({
|
||
url: '/pages/users/visit_list/index'
|
||
})
|
||
},
|
||
goCoupon() {
|
||
uni.navigateTo({
|
||
url: '/pages/users/user_coupon/index'
|
||
})
|
||
},
|
||
goLogin() {
|
||
if (!this.isLogin) {
|
||
this.$emit('changeLogin');
|
||
}
|
||
},
|
||
getDiyUserInfo() {
|
||
diyUserInfo().then(res => {
|
||
this.diyInfo = res.data;
|
||
}).catch(err => {
|
||
this.$util.Tips({
|
||
title: err
|
||
});
|
||
})
|
||
},
|
||
getlevelInfo() {
|
||
getlevelInfo().then(res => {
|
||
const {
|
||
level_info,
|
||
level_list
|
||
} = res.data;
|
||
const currentLevel = level_list.find(item => item.grade == level_info.grade);
|
||
if (currentLevel) {
|
||
this.currentLevelColor = currentLevel.color;
|
||
}
|
||
});
|
||
},
|
||
colorToRgba(str, n) {
|
||
// 十六进制颜色值的正则表达式
|
||
const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
|
||
let sColor = str.toLowerCase();
|
||
// 十六进制颜色转换为RGB格式
|
||
if (sColor && reg.test(sColor)) {
|
||
if (sColor.length === 4) {
|
||
let sColorNew = '#';
|
||
for (let i = 1; i < 4; i += 1) {
|
||
sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
|
||
}
|
||
sColor = sColorNew;
|
||
}
|
||
// 处理六位颜色值
|
||
const sColorChange = [];
|
||
for (let k = 1; k < 7; k += 2) {
|
||
sColorChange.push(parseInt(`0x${sColor.slice(k, k + 2)}`, 16));
|
||
}
|
||
return `rgba(${sColorChange.join(',')}, ${n})`;
|
||
}
|
||
return sColor;
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.userInfor {
|
||
// flex: 1;
|
||
// padding: 28rpx 20rpx;
|
||
background: #FFFFFF;
|
||
|
||
.mark {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
bottom: 0;
|
||
right: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
z-index: 50;
|
||
}
|
||
|
||
.codePopup .icon-guanbi2 {
|
||
margin-top: 75rpx !important;
|
||
}
|
||
|
||
&.pageOn {
|
||
border-radius: 12rpx;
|
||
}
|
||
|
||
.right {
|
||
position: relative;
|
||
|
||
&::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
right: 20rpx;
|
||
left: 20rpx;
|
||
border-top: 1rpx solid #EEEEEE;
|
||
}
|
||
|
||
.item {
|
||
flex: 1;
|
||
min-width: 0;
|
||
padding: 34rpx 0;
|
||
margin: 0;
|
||
font-size: 26rpx;
|
||
line-height: 36rpx;
|
||
color: #999999;
|
||
|
||
.num {
|
||
font-family: SemiBold;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
margin-left: 8rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.iconfont {
|
||
font-size: 40rpx;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
}
|
||
|
||
.left {
|
||
padding: 32rpx 20rpx;
|
||
|
||
.pictrue {
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
border: 1px solid #EEEEEE;
|
||
border-radius: 50%;
|
||
margin-right: 20rpx;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
|
||
.text {
|
||
flex: 1;
|
||
font-weight: 400;
|
||
//color: #333333;
|
||
font-size: 28rpx;
|
||
|
||
.name {
|
||
margin-bottom: 8rpx;
|
||
|
||
.nameCon {
|
||
max-width: 190rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.lable {
|
||
height: 32rpx;
|
||
padding: 0 8rpx;
|
||
border-radius: 16rpx;
|
||
margin-left: 8rpx;
|
||
font-weight: 500;
|
||
font-size: 20rpx;
|
||
line-height: 32rpx;
|
||
|
||
.iconfont {
|
||
margin-right: 4rpx;
|
||
font-size: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.progress {
|
||
overflow: hidden;
|
||
background-color: #EEEEEE;
|
||
width: 120rpx;
|
||
height: 14rpx;
|
||
border-radius: 7rpx;
|
||
position: relative;
|
||
margin-right: 8rpx;
|
||
|
||
.bg-reds {
|
||
width: 0;
|
||
height: 14rpx;
|
||
border-radius: 7rpx;
|
||
transition: width 0.6s ease;
|
||
background: linear-gradient(90deg, var(--view-theme) 0%, var(--view-gradient) 100%);
|
||
}
|
||
}
|
||
|
||
.percent {
|
||
font-size: 20rpx;
|
||
line-height: 20rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.phone {
|
||
font-weight: 400;
|
||
//color: #666666;
|
||
font-size: 20rpx;
|
||
margin-top: 6rpx;
|
||
|
||
.icon-shouji2 {
|
||
margin-right: 4rpx;
|
||
font-size: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right::before {
|
||
display: none;
|
||
}
|
||
|
||
.item {
|
||
width: 108rpx;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
text-align: center;
|
||
font-size: 22rpx;
|
||
color: #999999;
|
||
|
||
.num {
|
||
margin: 0 0 12rpx;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.iconfont {
|
||
font-weight: 500;
|
||
color: #333333;
|
||
font-size: 40rpx;
|
||
margin: 0 0 12rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom {
|
||
position: relative;
|
||
|
||
&::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
right: 20rpx;
|
||
left: 20rpx;
|
||
border-top: 1px solid #EEEEEE;
|
||
}
|
||
|
||
.item {
|
||
flex: 1;
|
||
padding: 42rpx 0 40rpx;
|
||
text-align: center;
|
||
font-weight: 500;
|
||
font-size: 22rpx;
|
||
line-height: 30rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.num {
|
||
margin: 0 0 12rpx;
|
||
font-family: SemiBold;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
line-height: 32rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
</style> |