mall-web-ssr/components/mobile/staffManagement/StaffList.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">
      <div class="staff-head">
        <span class="inline-block" :class="{'active': switchType === 'info'}" @click="setSwitchType('info')">员工信息</span>
        <span v-show="isAdmin" class="inline-block" :class="{'active': switchType === 'Audit'}" @click="setSwitchType('Audit')">审核绑定</span>
      </div>
      <div class="staff-record" v-if="switchType === 'info'">
        <div class="search-content clearfix">
          <div class="search">
            <!--<input type="text" placeholder="卖家名称/订单号" v-model="filterParams.keyword" @keyup.13="filterRecord">-->
            <input type="text" placeholder="人员姓名、电话号码、邮箱或UU" class="staff-search">
            <!--<span @click="filterRecord"><i class="iconfont icon-sousuo"></i></span>-->
            <span><i class="iconfont icon-sousuo"></i></span>
          </div>
          <div class="search-filter">
            <div class="select-wrap">全部角色<i class="iconfont icon-arrow-down"></i></div>
            <ul class="select-list" v-if="false">
              <li>全部角色</li>
              <li>管理员</li>
              <li>店长</li>
              <li>普通用户</li>
              <li>销售员</li>
              <li>任意测试</li>
            </ul>
          </div>
        </div>
        <div class="list-content">
          <div class="bg" v-for="item in staffData">
            <div class="staff-list">
              <div class="list-item"><span>UU账号：</span><span v-text="item.userUU">100000721</span></div>
              <div class="list-item"><span>姓名：</span><span v-text="item.userName">张洪别</span></div>
              <div class="list-item"><span>性别：</span><span v-text="item.userSex === 'F' ? '女' : item.userSex === 'M' ? '男' : '-'">男</span></div>
              <div class="list-item"><span>手机号：</span><span v-text="item.userTel">12345678901</span></div>
              <div class="list-item"><span>邮箱：</span><span v-text="item.userEmail">12345678901</span></div>
              <div class="list-item"><span>角色：</span><span class="role" v-for="role in item.roles" v-text="role.desc ? role.desc.slice(0,2) : ''" v-bind:class="'bg' + role.color">普通</span></div>
            </div>
            <div class="list-footer">
              <nuxt-link tag="div" :to="'/mobile/user/staff/edit'" class="edit handle" v-bind:class="{'no-allow': (item.userUU === userInfo.userUU)}"><i class="iconfont icon-edit"></i><span>编辑</span></nuxt-link>
              <div class="delete handle" v-bind:class="{'no-allow': (item.userUU === userInfo.userUU)}"><i class="iconfont icon-lajitong"></i><span>删除</span></div>
            </div>
          </div>
        </div>
        <nuxt-link class="staff-add" :to="'/mobile/user/staff/add'"><i class="iconfont icon-add"></i>新增用户</nuxt-link>
      </div>
      <div class="staff-record" v-if="switchType === 'Audit'">
        <div class="search-content">
          <!--<input type="text" placeholder="卖家名称/订单号" v-model="filterParams.keyword" @keyup.13="filterRecord">-->
          <input type="text" placeholder="人员姓名、电话号码、邮箱或UU" v-model="auditSearch">
          <!--<span @click="filterRecord"><i class="iconfont icon-sousuo"></i></span>-->
          <span><i class="iconfont icon-sousuo"></i></span>
        </div>
        <div class="list-content">
          <div class="bg">
            <div class="staff-list">
              <div class="list-item"><span>用户名：</span><span>{item}</span></div>
              <div class="list-item"><span>UU账号：</span><span>100000721</span></div>
              <div class="list-item"><span>手机号：</span><span>12345678901</span></div>
              <div class="list-item"><span>邮箱：</span><span>12345678901</span></div>
            </div>
            <div class="list-footer">
              <div class="edit handle"><i class="iconfont icon-check-circle"></i><span>同意</span></div>
              <div class="handle delete"><i class="iconfont icon-close-circle"></i><span>拒绝</span></div>
            </div>
          </div>
        </div>
        <empty-status :type="'collect'" :showLink="true" :text="'抱歉，没有相关信息'"></empty-status>
      </div>
      <!--<seek-list :keyword="remindKeyword" :isSearch="isSearch" :userType="userType" :seekType="seekType" :purchaseManList="purchaseManListData"></seek-list>-->
      <!--<pull-up :fixId="'mobileFixContent'" :searchMore="fetching" :allPage="allPage" :page="page" @pullUpAction="onPullUpAction"></pull-up>-->
    </div>
  </div>
</template>
<script>
  import { RemindBox, PullUp, EmptyStatus } from '~components/mobile/common'
  import { BaseFilter } from '~components/mobile/base'
  export default {
    layout: 'mobile',
    data () {
      return {
        remindText: '',
        timeoutCount: '',
        page: 1,
        count: 10,
        auditSearch: '',
        switchType: 'info'
      }
    },
    components: {
      RemindBox,
      PullUp,
      EmptyStatus,
      BaseFilter
    },
    watch: {
      // 'buyerAccount': {
      //   handler: function (val) {
      //     if (val && val.content) {
      //       if (this.isChange) {
      //         this.accountList = []
      //         this.isChange = false
      //       }
      //       this.accountList = [...this.accountList, ...val.content]
      //     }
      //   }
    },
    computed: {
      staffData () {
        return this.$store.state.staff.infoList.info.data.content
      },
      userInfo () {
        return this.$store.state.option.user.data
      }
    },
    // fetch ({ store }) {
    //   return Promise.all([
    //     store.dispatch('staff/bindAudit', {size: this.count, page: this.page, speaceUU: this.user.userUU, status: 311, keyword: this.auditSearch})
    //   ])
    // },
    methods: {
      setSwitchType (type) {
        this.switchType = type
        this.$http({
          method: 'get',
          baseURL: process.env.ssoUrl,
          url: `/api/userspace/apply/info/mall`,
          data: {
            count: 10,
            page: 1,
            speaceUU: 10049698,
            status: 311
          }
        }).then(res => {
            console.log('1', res.data)
          }, err => {
            console.log('12', err)
          })
      }
    }
  }
</script>
<style lang="scss">
  $base-color: #3f84f6;
  #mobile-staff-center {
    .staff-head {
      height: .82rem;
      line-height: .82rem;
      text-align: center;
      background: #fff;
      span {
        font-size: .29rem;
        &:first-child {
          margin-right: 2.6rem;
        }
        &.active {
          color: $base-color;
          border-bottom: 1px solid $base-color;
        }
      }
    }
    .staff-record {
      .search-content {
        padding: .25rem 0;
        text-align: center;
        input {
          width: 6.9rem;
          border: 1px solid #376ff3;
        }
        .staff-search {
          width: 5.31rem;
        }
        .search {
          float: left;
        }
        .search-filter {
          float: left;
          margin-left: .35rem;
          position: relative;
          .select-wrap {
            width: 1.45rem;
            height: .58rem;
            line-height: .58rem;
            background-color: #ffffff;
            border-radius: .06rem;
            border: solid 1px #b4b4b4;
            i{
              font-size: .1rem;
              font-weight: bold;
              color: $base-color;
            }
          }
          ul.select-list{
            width: 1.45rem;
            position: absolute;
            left: 0rem;
            top: .59rem;
            border: solid 1px #b4b4b4;
            border-top: none;
            -webkit-box-shadow: 0 1px 5px 0 #aaa;
            box-shadow: 0 1px 5px 0 #aaa;
            border-radius: .04rem;
            li{
              background: #fff;
              text-align: left;
              padding: 0 .13rem;
              font-size: .28rem;
              height: .53rem;
              line-height: .53rem;
            }
          }
        }
      }
      .list-content{
        margin: 0 auto;
        padding: 0 .20rem;
        div.bg{
          padding: .32rem .24rem 0 .24rem;
          margin-bottom: .25rem;
          width: 7.1rem;
          background: #fff;
          border-radius: .05rem;
        }
        .staff-list {
          width: 100%;
          .list-item {
            margin-bottom: .24rem;
            &:last-child{
              padding-bottom: 0;
            }
            span {
              display: inline-block;
              font-size: .28rem;
              &:first-child {
                width: 1.3rem;
                text-align: right;
                color: #3f84f6;
              }
              &:last-child {
                color: #666;
              }
            }
            span.role{
              display: inline-block;
              padding: 0 .05rem;
              height: .25rem;
              line-height: .25rem;
              text-align: center;
              font-size: .24rem;
              color: #fff;
              border-radius: .04rem;
            }
            span.role.bg1{
              background-color: #89aefa;
            }
            span.role.bg2{
              background-color: #01d9ce;
            }
            span.role.bg3{
              background-color: #01d9ce;
            }
            span.role.bg4{
              background-color: #ff6769;
            }
            span.role.bg5{
              background-color: #ff8050;
            }
          }
        }
        .list-footer {
          width: 100%;
          height: .8rem;
          line-height: .8rem;
          background: #fff;
          border-top: 1px solid #d9d9d9;
          div.handle{
            float: left;
            width: 50%;
            margin: 0 auto;
            text-align: center;
            span{
              font-size: .26rem;
              color: #333;
            }
            i.iconfont {
              margin-right: .06rem;
              font-size: .36rem;
              color: #333;
            }
          }
          div.edit{
            border-right: 1px solid #d9d9d9;
          }
          div.no-allow {
            color: #606168;
            cursor: not-allowed;
          }
        }
      }
      .staff-add {
        display: inline-block;
        position: fixed;
        bottom: 1.2rem;
        left: 50%;
        margin-left: -3.29rem;
        width: 6.59rem;
        height: .77rem;
        line-height: .77rem;
        text-align: center;
        font-size: .32rem;
        color: #fff;
        background-color: #3f84f6;
        border-radius: 0.08rem;
        i{
          margin-right: .1rem;
          font-size: .32rem;
          color: #fff;
        }
      }
    }
  }
</style>