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.

552 lines
14 KiB

3 months ago
<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>