'我的切换角色'

src/pages/myInfo/my-info.vue

@@ -116,10 +116,17 @@
         <button @click="approveBtn ? unBind() : changePageHead()">{{ description }}</button>
       </div>
     </h-content>
+    <role-switch
+      v-show="roleSwitchFlag" ref="roleSwitch" :roleList="roleList" @roleConfirm="roleConfirm"
+      @roleCancle="roleCancle"/>
   </h-view>
 </template>
 <script>
+import roleSwitch from './role-switch-component'
 export default {
+  components: {
+    roleSwitch,
+  },
   data () {
     return {
       flag: true,
@@ -141,6 +148,17 @@ export default {
       bp_identity: '',
       approveBtn: false,
       elecStatus: false,
+      roleSwitchFlag: false, // 选择角色模态框显示标志
+      roleList: [
+        {
+          bp_type: 'TENANT',
+          bp_type_desc: '主承租人',
+        },
+        {
+          bp_type: 'GUTA',
+          bp_type_desc: '担保人',
+        },
+      ],
     }
   },
   watch: {
@@ -223,6 +241,15 @@ export default {
   },
   activated () {},
   methods: {
+    // 选择角色后确定
+    roleConfirm (role) {
+      this.roleSwitchFlag = false
+      console.log('选择后的角色为：' + role)
+    },
+    // 选择角色后取消
+    roleCancle () {
+      this.roleSwitchFlag = false
+    },
     // 监听用户状态
     watchBpStatus () {
       if (!this.bp_id && this.user_bp_status === 'NEW') {
@@ -436,7 +463,7 @@ export default {
           } else if (index === 1) {
             this.changePageHead()
           } else if (index === 2) {
-            hlsPopup.showLongCenter('角色切换功能敬请期待!')
+            this.$refs.roleSwitch.show()
           }
         },
       })

src/pages/myInfo/role-switch-component.vue

+/**
+* @Author Sean
+* @Date 2019/11/27
+*/
+<template>
+  <transition name="role">
+    <div v-show="showFlag" class="role-switch-wrap">
+      <div class="role-switch-content">
+        <div class="content-header">
+          <span>请选择要切换的角色</span>
+          <img src="@/assets/myInfo/modalClose.png" @click="roleCancle">
+        </div>
+        <div class="content-wrap">
+          <div v-for="(item,index) in roleList" :key="index" :class="{'item-active':index === switchIndex}" class="role-item" @click="chooseRole(index)">
+            <span>{{ item.bp_type_desc }}</span>
+          </div>
+          <div :class="{'content-btn-active':switchIndex !== ''}" class="content-btn"><span @click="roleConfirm">确定</span></div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  props: ['roleList'],
+  data () {
+    return {
+      showFlag: false,
+      switchIndex: '',
+    }
+  },
+  created: function () {
+  },
+  mounted: function () {
+  },
+  updated: function () {
+  },
+  methods: {
+    chooseRole(index){
+      this.switchIndex = index
+    },
+    roleConfirm () {
+      if(this.switchIndex === ''){
+
+      }else {
+        this.showFlag = false
+        this.$emit('roleConfirm',this.roleList[this.switchIndex])
+      }
+    },
+    show () {
+      this.switchIndex = ''
+      this.showFlag = true
+    },
+    roleCancle () {
+      this.showFlag = false
+      this.$emit('roleCancle')
+    },
+  },
+}
+</script>
+
+<style scoped lang="less">
+  .role-enter-active, .role-leave-active {
+    transition: opacity .5s;
+  }
+
+  .role-enter, .role-leave-to /* .fade-leave-active below version 2.1.8 */ {
+    opacity: 0;
+  }
+
+  .role-switch-wrap {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    z-index: 999;
+    background: rgba(56, 63, 69, 0.30);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .role-switch-content {
+      width: 80%;
+      margin: 0 auto;
+
+      .content-header {
+        width: 100%;
+        height: 44px;
+        background-color: @headerColor;
+        font-family: PingFangSC-Semibold;
+        font-size: 16px;
+        color: #FFFFFF;
+        letter-spacing: 0;
+        text-align: center;
+        line-height: 44px;
+
+        img {
+          width: 26px;
+          float: right;
+        }
+      }
+
+      .content-wrap {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        background-color: #FFF;
+        padding: 10px 0;
+
+        .role-item {
+          width: 90%;
+          height: 44px;
+          background: #FFFFFF;
+          border: 1px solid #CFCFCF;
+          border-radius: 4px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin: 4px 0;
+
+          span {
+            font-family: PingFangSC-Regular;
+            font-size: 14px;
+            color: #656464;
+            letter-spacing: 0;
+            line-height: 18px;
+          }
+        }
+        .item-active{
+          background: rgba(29,63,255,0.10);
+          border: 1px solid #1D3FFF;
+          border-radius: 4px;
+        }
+      }
+
+      .content-btn {
+        margin-top: 10px;
+        width: 84%;
+        height: 40px;
+        background: rgba(56, 63, 69, 0.50);
+        border-radius: 4px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        span {
+          font-family: PingFangSC-Semibold;
+          font-size: 15px;
+          color: #FAFAFA;
+          line-height: 20px;
+        }
+      }
+      .content-btn-active{
+        background: #1D3FFF;
+        border-radius: 4px;
+      }
+    }
+  }
+</style>