<!--
|
* @Author: 小明丶
|
* @Date: 2019-08-15 11:04:12
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-12-09 16:00:40
|
* @Description: 用户管理页面
|
-->
|
<template>
|
<div class="mine-box">
|
<header class="header flex-between-g" :style="{background: $store.state.lastColor}">
|
<img
|
v-if="hasPic"
|
src="../../../static/img/left.png"
|
style="
|
position: absolute;
|
left: 0px;
|
top: 0;
|
height: 144px;
|
width: 166px;
|
"
|
/>
|
<img
|
v-if="hasPic"
|
src="../../../static/img/right.png"
|
style="position: absolute; right: 0; top: 0; height: 47px; width: 62px"
|
/>
|
<div class="flex-start-g" style="z-index: 99">
|
<p class="icon-box flex-center-g">
|
<svg
|
class="icon"
|
aria-hidden="true"
|
style="width: 40px; height: 40px"
|
>
|
<use xlink:href="#icongerenzhongxintouxiang"></use>
|
</svg>
|
</p>
|
<div class="userinfo">
|
<p class="name text-clip-g font-16-g">{{ userinfo.name }}</p>
|
<p>{{ userinfo.mblNo.replace(/(\d{3})\d*(\d{4})/, "$1****$2") }}</p>
|
<p class="copy" v-if="orgType == 1 || orgType == 2">
|
邀请码：{{ inviteCode }} <span @click="copy">复制</span>
|
</p>
|
</div>
|
</div>
|
<div>
|
<p class="text-center-g font-16-g">{{ userLabel }}</p>
|
<van-button
|
class="btn-toggle"
|
@click="$router.push('/mine/toggle-identity?title=切换身份')"
|
>切换身份</van-button
|
>
|
</div>
|
</header>
|
|
<div class="grid">
|
<router-link
|
:to="item.path || ''"
|
class="item flex-center-g"
|
v-for="(item, index) in menu"
|
:key="index"
|
>
|
<div class="text-center-g">
|
<svg
|
class="icon"
|
aria-hidden="true"
|
style="width: 35px; height: 35px"
|
:style="{'fill':$store.state.backColor}"
|
>
|
<use :xlink:href="'#' + item.icon"></use>
|
</svg>
|
<p class="label">{{ item.label }}</p>
|
</div>
|
</router-link>
|
<!-- <router-link :to="item.path || ''" class="item flex-center-g" v-for="(item, index) in menu" :key="index">
|
<div class="text-center-g">
|
<svg class="icon" aria-hidden="true" style="width:35px;height:35px;">
|
<use :xlink:href="'#' +item.icon"></use>
|
</svg>
|
<p class="label">{{item.label}}</p>
|
</div>
|
</router-link> -->
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { mapState, mapGetters } from "vuex";
|
import { _copyToClipboard } from "@/utils/index";
|
export default {
|
data() {
|
return {
|
copyText: "",
|
walletOpenStatus: "",
|
};
|
},
|
created() {
|
|
},
|
computed: {
|
...mapState(["userinfo", "userPage", "inviteCode"]),
|
...mapGetters(["orgType"]),
|
hasPic(){
|
if(sessionStorage.isddxt != 1){
|
return true
|
}else{
|
return false
|
}
|
},
|
userLabel() {
|
switch (this.orgType) {
|
case 1:
|
return "代理";
|
case 2:
|
return "渠道";
|
case 3:
|
return "商户";
|
case 4:
|
return "门店";
|
}
|
},
|
menu() {
|
let arr = [];
|
if (this.orgType == 1) {
|
arr.push(
|
{
|
icon: "iconmobanguanli",
|
label: "模板管理",
|
path: "/template/list",
|
}
|
);
|
}
|
let usrArr = [
|
...arr,
|
...this.userPage,
|
{
|
icon: "iconshezhizhongxin",
|
label: "设置中心",
|
path: "/mine/setting",
|
},
|
];
|
usrArr.forEach(item => {
|
if(item.powerId == '100005' && this.orgType == 3){
|
usrArr.splice(usrArr.length-2,usrArr.length-2);
|
}
|
})
|
return usrArr;
|
},
|
},
|
methods: {
|
copy() {
|
_copyToClipboard(this.inviteCode);
|
this.$notify_success("复制成功");
|
},
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
.mine-box {
|
background-color: @c-bg-f5;
|
padding-bottom: 100px;
|
}
|
|
.header {
|
height: 144px;
|
background-color: @c-bg-black;
|
color: @c-text-fe;
|
padding: 0 20px;
|
|
.icon-box {
|
width: 60px;
|
height: 60px;
|
background-color: @c-bg-fff;
|
border-radius: 50%;
|
margin-right: 15px;
|
}
|
|
.userinfo {
|
max-width: 155px;
|
|
.name {
|
margin-bottom: 5px;
|
}
|
}
|
|
.btn-toggle {
|
.lh(24px);
|
padding: 0 10px;
|
background: #55516e;
|
border: 0.02rem solid #55516e;
|
margin-top: 8px;
|
color: @c-text-fe;
|
border-radius: 12px;
|
font-size: @font-11;
|
}
|
}
|
|
.grid {
|
margin: 0 auto;
|
width: 360px;
|
background-color: @c-bg-fff;
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
flex-wrap: wrap;
|
z-index: @zIndex-20;
|
transform: translateY(-15px);
|
box-shadow: 0px 8px 20px 0px rgba(66, 61, 93, 0.05);
|
border-radius: 3px;
|
|
.item {
|
width: 120px;
|
height: 122px;
|
}
|
|
.label {
|
margin-top: 15px;
|
color: @c-text-666;
|
}
|
}
|
.copy {
|
color: #fefeff;
|
font-size: 12px;
|
margin-top: 10px;
|
span {
|
width: 40px;
|
height: 16px;
|
background: #55516e;
|
padding: 0 10px;
|
// opacity:0.1;
|
border-radius: 16px;
|
color: #fefeff;
|
font-size: 11px;
|
line-height: 16px;
|
}
|
}
|
</style>
|
