storID

zhaoxiaoqiang

2021-09-01 cd384b5b498cefb6ec2a7645fe7da39397b07166

 src/views/mine/toggle-identity.vue

@@ -6,181 +6,181 @@
 * @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>
  <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 //当前选中的角色
            }
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),
        },
        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) => {

                // });
            }
        },
      ];
    } 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;
.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;
    }

    .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 {
            font-size: @font-16;
            font-weight: bold;
        }

        .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;
        }
    .icon {
      margin-right: 8px;
    }
  }

    .btn-login {
        display: block;
        .lh(44px);
        width: 320px;
        margin: 25px auto 0;
        background-color: @c-bg-default;
        color: @c-text-fff;
        border-radius: 22px;
    }
  .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>