mall-web-ssr/components/mobile/staffManagement/StaffEdit.vue

<template>
  <div class="seek">
    <div class="com-mobile-header mobile-center-header">
      <a @click="goLastPage"><i class="iconfont icon-fanhui"></i></a>
      <p>编辑角色</p>
      <p class="en-name"><img :src="`/images/mobile/center/${user.data.enterprise.uu ? 'en' : 'self'}.png`" alt="">{{currentEnName}}</p>
    </div>
    <div class="mobile-fix-content mobile-centerfix-content" id="mobile-staff-center" v-if="roles">
      <div v-for="role in roles">
        <div class="staff-role">
          <div class="staff-header"><span :class="'active_0' + role.color"><b></b>{{role.desc}}</span></div>
          <div class="staff-content">
            <label class="radio-label clearfix" @click="checkRole(role)">
              <input type="checkbox" :id="role.id" v-bind:class="{'checked': role.checked}"/>
              <label :for="role.id" v-bind:class="{'margin0': role.color === '4'}"></label>
              <p class="staff-des">{{role.duty}}</p>
            </label>
          </div>
        </div>
      </div>
      <div class="staff-footer">
        <div class="cancel handle" @click="cancelBind">取消</div>
        <div class="agree handle" @click="sureEdit">确定</div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        checked: false,
        roles: []
      }
    },
    computed: {
      currentData () {
        return this.$store.state.staff.infoList.edit.data
      }
    },
    mounted () {
      // 获取角色
      this.$nextTick(() => {
        this.getRoles()
      })
    },
    methods: {
      // 获取角色
      getRoles () {
        this.$http.get('/account/role')
          .then(response => {
            if (response.data) {
              this.roles = response.data
              for (let i = 0; i < this.currentData.roles.length; i++) {
                for (let j = 0; j < this.roles.length; j++) {
                  //判断已绑定角色
                  if (this.currentData.roles[i].id === this.roles[j].id) {
                    this.roles[j].checked = true
                    // console.log(this.roles[j].checked)
                  }
                }
              }
            }
          })
      },
      // 选择角色
      checkRole (role) {
        console.log(role)
        role.checked = !role.checked
        console.log(this.currentData.roles, 'roles')
        // this.currentData.roles.push(role)
      },
      // 取消编辑
      cancelBind () {
        this.$router.push('/mobile/user/staff')
      },
      // 确定编辑
      sureEdit () {
        this.$http.put(`/basic/user/updaterole/${this.currentData}`)
          .then(() => {})
      }
    }
  }
</script>
<style lang="scss">
  $base-color: #3f84f6;
  #mobile-staff-center {
    margin: 0 auto;
    .staff-role{
      margin: .2rem auto 0;
      padding: 0 .24rem;
      width: 7.1rem;
      height: 1.72rem;
      background-color: #fff;
      border-radius: .05rem;
      .staff-header {
        height: .5rem;
        line-height: .5rem;
        text-align: left;
        border-bottom: 1px solid #d9d9d9;
        span {
          font-size: .28rem;
          color: #333;
          b{
            display: inline-block;
            margin-right: .05rem;
            width: .05rem;
            height: .18rem;
            background-color: #3f84f6;
          }
        }
        span.active_02 b{
          background-color: #8aaefc;
        }
        span.active_03 b{
          background-color: #09d7cd;
        }
        span.active_04 b{
          background-color: #ff676a;
        }
        span.active_05 b{
          background-color: #fc9b68;
        }
      }
      .staff-content {
        padding-top: .25rem;
        .radio-label {
          background-size: contain;
          vertical-align: middle;
          input{
            float: left;
            display: none;
            margin: .18rem .1rem 0 0;
            width: .36rem;
            height: .36rem;
            border: solid 2px #999999;
          }
          label {
            float: left;
            margin: .18rem .1rem 0 0;
            width: .36rem;
            height: .36rem;
            border-radius: 50%;
            background: url(/images/mobile/center/user/car-noChecked.png) no-repeat;
            background-size: contain;
            vertical-align: middle;
          }
          label.margin0 {
            margin: 0.05rem .1rem 0 0;
          }
          input:checked + label {
            background-image: url(/images/mobile/center/user/car-checked.png);
          }
          input.checked + label {
            background-image: url(/images/mobile/center/user/car-checked.png);
          }
        }
        .staff-des{
          float: left;
          width: 6rem;
          line-height: .42rem;
          font-weight: normal;
          font-size: .28rem;
          color: #666666;
        }
      }
    }
    .staff-footer{
      overflow: hidden;
      margin-top: .6rem;
      div.handle{
        float: left;
        width: 3.24rem;
        height: .77rem;
        line-height: .77rem;
        font-size: .32rem;
        color: #fff;
        text-align: center;
        border-radius: .08rem;
        &:first-child{
          margin: 0 .28rem 0 .35rem;
          background-color: #acaaab;
        }
        &:last-child{
          background-color: #3f84f6;
        }
      }
    }
  }
</style>