mirror of
https://github.com/crmeb/CRMEB.git
synced 2026-03-25 14:53:52 +00:00
683 lines
18 KiB
Vue
683 lines
18 KiB
Vue
<template>
|
||
<common-wrapper :config="configData">
|
||
<view class="userInfor" :style="[userInfoStyle]" @click="goLogin">
|
||
<view class="left acea-row row-middle">
|
||
<view class="pictrue acea-row row-center-wrapper relative">
|
||
<image :src="diyInfo.avatar" v-if="diyInfo.avatar && isLogin"></image>
|
||
<image
|
||
src="@/static/images/king.png"
|
||
class="king"
|
||
v-if="diyInfo.is_money_level"
|
||
></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">{{ $t(`请点击登录`) }}</view>
|
||
<view v-else class="name acea-row row-middle">
|
||
<view class="nameCon line1">{{ diyInfo.nickname }}</view>
|
||
<view
|
||
class="lable acea-row row-middle"
|
||
v-if="diyInfo.level > 0 && (diyInfo.vip_icon || diyInfo.vip_name)"
|
||
:style="[lableStyle]"
|
||
>
|
||
<img
|
||
class="icon"
|
||
v-if="diyInfo.vip_icon"
|
||
:src="diyInfo.vip_icon"
|
||
alt=""
|
||
/>
|
||
{{ diyInfo.vip_name }}
|
||
</view>
|
||
</view>
|
||
<view
|
||
class="acea-row row-middle"
|
||
v-if="isLogin && diyInfo.vip && 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 ? `/ ${diyInfo.next_exp}` : "" }}</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="handleMenu(1)"
|
||
>
|
||
<view class="num">{{ diyInfo.integral || 0 }}</view>
|
||
<view>{{ $t(`积分`) }}</view>
|
||
</view>
|
||
<view
|
||
class="item"
|
||
v-if="checkType.indexOf(2) > -1"
|
||
@click.stop="handleMenu(2)"
|
||
>
|
||
<view class="num">{{ diyInfo.now_money || 0 }}</view>
|
||
<view>{{ $t(`余额`) }}</view>
|
||
</view>
|
||
<view
|
||
class="item"
|
||
v-if="checkType.indexOf(0) > -1"
|
||
@click.stop="handleMenu(0)"
|
||
>
|
||
<view class="num">{{ diyInfo.couponCount || 0 }}</view>
|
||
<view>{{ $t(`优惠券`) }}</view>
|
||
</view>
|
||
<view
|
||
class="item"
|
||
v-if="checkType.indexOf(4) > -1"
|
||
@click.stop="handleMenu(4)"
|
||
>
|
||
<view class="num">{{ diyInfo.collectCount || 0 }}</view>
|
||
<view>{{ $t(`收藏`) }}</view>
|
||
</view>
|
||
<view
|
||
class="item"
|
||
v-if="checkType.indexOf(5) > -1"
|
||
@click.stop="handleMenu(5)"
|
||
>
|
||
<view class="num">{{ diyInfo.visit_num || 0 }}</view>
|
||
<view>{{ $t(`浏览`) }}</view>
|
||
</view>
|
||
</template>
|
||
</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="handleMenu(1)"
|
||
>
|
||
<view class="num">{{ diyInfo.integral || 0 }}</view>
|
||
<view>{{ $t(`积分`) }}</view>
|
||
</view>
|
||
<view
|
||
v-if="checkType.indexOf(2) != -1"
|
||
class="item"
|
||
@click.stop="handleMenu(2)"
|
||
>
|
||
<view class="num">{{ diyInfo.now_money || 0 }}</view>
|
||
<view>{{ $t(`余额`) }}</view>
|
||
</view>
|
||
<view
|
||
v-if="checkType.indexOf(0) != -1"
|
||
class="item"
|
||
@click.stop="handleMenu(0)"
|
||
>
|
||
<view class="num">{{ diyInfo.coupon_num || 0 }}</view>
|
||
<view>{{ $t(`优惠券`) }}</view>
|
||
</view>
|
||
<view
|
||
v-if="checkType.indexOf(4) != -1"
|
||
class="item"
|
||
@click.stop="handleMenu(4)"
|
||
>
|
||
<view class="num">{{ diyInfo.collectCount || 0 }}</view>
|
||
<view>{{ $t(`收藏`) }}</view>
|
||
</view>
|
||
<view
|
||
v-if="checkType.indexOf(5) != -1"
|
||
class="item"
|
||
@click.stop="handleMenu(5)"
|
||
>
|
||
<view class="num">{{ diyInfo.visit_num || 0 }}</view>
|
||
<view>{{ $t(`浏览`) }}</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>
|
||
</common-wrapper>
|
||
</template>
|
||
|
||
<script>
|
||
import commonWrapper from "./commonWrapper.vue";
|
||
import colors from "@/mixins/color";
|
||
import { getlevelInfo, getRandCode, getUserInfo } from "@/api/user.js";
|
||
import { mapGetters } from "vuex";
|
||
export default {
|
||
components: { commonWrapper },
|
||
computed: {
|
||
...mapGetters(["isLogin"]),
|
||
configData() {
|
||
return {
|
||
...this.dataConfig,
|
||
paddingConfig: this.dataConfig.paddingConfig || {
|
||
isAll: false,
|
||
valList: [
|
||
{
|
||
val: this.dataConfig.topConfig
|
||
? this.dataConfig.topConfig.val
|
||
: 0,
|
||
},
|
||
{
|
||
val: this.dataConfig.prConfig ? this.dataConfig.prConfig.val : 0,
|
||
},
|
||
{
|
||
val: this.dataConfig.bottomConfig
|
||
? this.dataConfig.bottomConfig.val
|
||
: 0,
|
||
},
|
||
{
|
||
val: this.dataConfig.prConfig ? this.dataConfig.prConfig.val : 0,
|
||
},
|
||
],
|
||
},
|
||
marginConfig: this.dataConfig.marginConfig || {
|
||
isAll: false,
|
||
valList: [
|
||
{
|
||
val: this.dataConfig.mbConfig ? this.dataConfig.mbConfig.val : 0,
|
||
},
|
||
{
|
||
val: 0,
|
||
},
|
||
{
|
||
val: 0,
|
||
},
|
||
{
|
||
val: 0,
|
||
},
|
||
],
|
||
},
|
||
};
|
||
},
|
||
lableStyle() {
|
||
let styleObject = {
|
||
background: this.currentLevelColor,
|
||
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[3].val * 2}rpx ${
|
||
this.dataConfig.fillet.valList[2].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: {
|
||
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;
|
||
}
|
||
},
|
||
handleMenu(type) {
|
||
let url = "";
|
||
switch (type) {
|
||
case 0:
|
||
url = "/pages/users/user_coupon/index";
|
||
break;
|
||
case 1:
|
||
url = "/pages/users/user_integral/index";
|
||
break;
|
||
case 2:
|
||
url = "/pages/users/user_money/index";
|
||
break;
|
||
case 4:
|
||
url = "/pages/users/user_goods_collection/index";
|
||
break;
|
||
case 5:
|
||
url = "/pages/users/visit_list/index";
|
||
break;
|
||
}
|
||
if (url) {
|
||
uni.navigateTo({
|
||
url: url,
|
||
});
|
||
}
|
||
},
|
||
goLogin() {
|
||
if (!this.isLogin) {
|
||
this.$emit("changeLogin");
|
||
}
|
||
},
|
||
getDiyUserInfo() {
|
||
getUserInfo()
|
||
.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%;
|
||
}
|
||
|
||
.king {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
position: absolute;
|
||
top: -18rpx;
|
||
right: -8rpx;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
color: #b06a00;
|
||
background-color: #ffe8ca;
|
||
.icon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-right: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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>
|