<!--
|
* @Author: 小明丶
|
* @Date: 2019-08-19 09:30:14
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-11-17 10:02:59
|
* @Description: 切换身份页面
|
-->
|
<template>
|
<div class="identity-box">
|
<v-navbar :title="$route.query.title" fixed></v-navbar>
|
<section class="role-box" v-for="(item, index) in roleList" :key="index">
|
<van-radio-group v-if="item.arr.length" v-model="roleId">
|
<h4 class="title">{{ item.title }}</h4>
|
<div class="flex-between-g role-item" v-for="(role, k) in item.arr" :key="k">
|
<div class="left">
|
<p class="flex-start-g">
|
<svg class="icon" aria-hidden="true" style="width:15px;height:15px;">
|
<use xlink:href="#iconyonghu"></use>
|
</svg>
|
<span class="name">{{ role.orgName }}</span>
|
</p>
|
<p class="flex-start-g">
|
<svg class="icon" aria-hidden="true" style="width:15px;height:15px;">
|
<use xlink:href="#iconshijian"></use>
|
</svg>
|
<time class="time">创建时间：{{ role.creTime | timeformat("yyyy-MM-dd HH:mm:ss") }}</time>
|
</p>
|
</div>
|
<div @click="setRole(role)" v-if="role.status == 1 && role.supStatus == 1">
|
<van-radio :name="role.id" :checked-color="$store.state.backColor" />
|
</div>
|
</div>
|
</van-radio-group>
|
</section>
|
<van-button class="btn-login" :color="$store.state.backColor" @click="getRoleInfo">登录</van-button>
|
</div>
|
</template>
|
|
<script>
|
import { mapActions, mapState } from "vuex";
|
export default {
|
data() {
|
return {
|
roleList: [], //角色列表
|
roleId: "", //radio的value
|
role: null, //当前选中的角色
|
};
|
},
|
computed: {
|
...mapState(["userinfo"]),
|
},
|
created() {
|
this.roleId = this.userinfo.id;
|
if (sessionStorage.isLoginByOpenId == 1) {
|
this.roleList = [
|
{
|
title: "门店",
|
arr: JSON.parse(localStorage.storeList),
|
},
|
];
|
} else {
|
this.getRole();
|
}
|
},
|
methods: {
|
...mapActions(["setUserMenu"]),
|
// 设置当前选中的角色
|
setRole(role) {
|
this.role = role;
|
},
|
// 获取角色
|
getRole() {
|
this.$api
|
.getRole()
|
.then((res) => {
|
let { agencyList, chanList, merchantList, storeList } = res.body;
|
this.roleList.push({
|
title: "代理",
|
arr: agencyList || [],
|
});
|
this.roleList.push({
|
title: "渠道",
|
arr: chanList || [],
|
});
|
this.roleList.push({
|
title: "商户",
|
arr: merchantList || [],
|
});
|
this.roleList.push({
|
title: "门店",
|
arr: storeList || [],
|
});
|
})
|
.catch((err) => {});
|
},
|
// 获取用户信息
|
getRoleInfo() {
|
if (!this.roleId) {
|
this.$notify("请选择登录角色");
|
return;
|
}
|
this.setUserMenu({
|
vm: this,
|
lastLoginMgrId: this.roleId,
|
});
|
// this.$api.getPowerInfo(this.roleId).then((res) => {
|
|
// }).catch((err) => {
|
|
// });
|
},
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.identity-box {
|
background-color: @c-bg-f5;
|
min-height: 100%;
|
padding-top: 44px;
|
padding-bottom: 30px;
|
}
|
|
.role-box {
|
.title {
|
.lh(30px);
|
margin-left: 20px;
|
margin-top: 15px;
|
color: @c-text-999;
|
font-size: @font-14;
|
}
|
|
.role-item {
|
padding: 0 12px;
|
background-color: @c-bg-fff;
|
margin: 0 8px 1px;
|
border-radius: 3px;
|
}
|
|
.left {
|
height: 75px;
|
.flex(center, flex-start, wrap, column);
|
|
p:first-child {
|
margin-bottom: 10px;
|
}
|
|
.icon {
|
margin-right: 8px;
|
}
|
}
|
|
.name {
|
width: 200px;
|
font-size: @font-16;
|
font-weight: bold;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
}
|
|
.time {
|
font-size: @font-12;
|
color: @c-text-999;
|
}
|
|
.circle {
|
height: 18px;
|
width: 18px;
|
margin-right: 2px;
|
border-radius: 50%;
|
background-color: #fff;
|
border: 2px solid @c-default;
|
}
|
}
|
|
.btn-login {
|
display: block;
|
.lh(44px);
|
width: 320px;
|
margin: 25px auto 0;
|
background-color: @c-bg-default;
|
color: @c-text-fff;
|
border-radius: 22px;
|
}
|
</style>
|
