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_n }}</span>
          </div>
          <div :class="{'content-btn-active':switchIndex !== ''}" class="content-btn" @click="roleConfirm"><span>确定</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;
        border-top-left-radius: 14px;
        border-top-right-radius: 14px;
        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;
        border-bottom-left-radius: 14px;
        border-bottom-right-radius: 14px;
        .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>