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

<template>
  <div class="seek" @click="showChooseSex === false">
    <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 === 'addNoRegister'}" @click="setSwitchType('addNoRegister')">添加未注册用户</span>
        <span class="inline-block" :class="{'active': switchType === 'addRegister'}" @click="setSwitchType('addRegister')">添加已注册用户</span>
      </div>
      <div class="staff-record" v-if="switchType == 'addNoRegister'" >
        <div class="list-content">
          <ul class="staff-adds">
            <li><span>姓名：</span><input type="text" v-model="newUserName" placeholder="请输入用户名"></li>
            <li style="overflow: visible;"><span>性别：</span>
              <div class="sex-filter">
                <div class="select-wrap" @click="openChoose">{{sex === 'M' ? '男' : '女'}}<i class="iconfont icon-arrow-down"></i></div>
                <ul class="select-list" v-if="showChooseSex">
                  <li v-show="sex != 'M'" @click="chooseSex('M')">男</li>
                  <li v-show="sex != 'F'" @click="chooseSex('F')">女</li>
                </ul>
              </div>
            </li>
            <li><span>手机号：</span><input type="text" v-model="newUserPhone" placeholder="请输入手机号"></li>
            <li><span>邮箱：</span><input type="text" v-model="newUserEmail" placeholder="请输入邮箱"></li>
          </ul>
          <div class="staff-footer">
            <div class="cancel handle">取消</div>
            <div class="agree handle" @click="addNewUser">确定</div>
          </div>
        </div>
      </div>
      <div class="staff-record" v-if="switchType == 'addRegister'">
        <div class="search-content">
          <input type="text" placeholder="请输入UU号、手机号或邮箱">
          <span><i class="iconfont icon-sousuo"></i></span>
        </div>
        <div class="list-content">
          <div class="staff-list">
            <div class="list-item"><span>UU账号：</span><span>100000721</span></div>
            <div class="list-item"><span>姓名：</span><span>张洪别</span></div>
            <div class="list-item"><span>性别：</span><span>男</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="staff-footer">
            <div class="cancel handle">取消</div>
            <div class="agree handle">确定绑定</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { RemindBox, PullUp, EmptyStatus } from '~components/mobile/common'
  export default {
    data () {
      return {
        switchType: 'addNoRegister',
        newUserName: '',
        newUserPhone: '',
        newUserEmail: '',
        showChooseSex: false,
        sex: 'M'
      }
    },
    components: {
      RemindBox,
      PullUp,
      EmptyStatus
    },
    computed: {
    },
    methods: {
      setSwitchType (type) {
        this.switchType = type
      },
      openChoose () {
        this.showChooseSex = true
      },
      chooseSex (info) {
        this.sex = info
        this.showChooseSex = false
      },
      addNewUser () {
        this.$http.post('/basic/user', {userEmail: this.newUserEmail, userName: this.newUserName, userSex: this.sex, userTel: this.newUserPhone})
          .then(response => {
            console.log(response)
          })
      }
    }
  }
</script>
<style lang="scss" scoped>
  $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 {
        overflow: hidden;
        padding: .25rem 0;
        text-align: center;
        input {
          width: 6.9rem;
          border: 1px solid #376ff3;
        }
      }
      .list-content{
        margin: 0 auto;
        padding: 0 .20rem;
        .staff-adds {
          margin: 0.25rem auto 0;
          padding: 0 .24rem;
          width: 6.64rem;
          background-color: #ffffff;
          border-radius: .05rem;
          li{
            overflow: hidden;
            height: 1.18rem;
            line-height: 1.18rem;
            border-bottom: 1px solid #d9d9d9;
            list-style: none;
            span {
              display: inline-block;
              float: left;
              width: 1rem;
              font-size: .28rem;
              color: #3f84f6;
            }
            input{
              float: left;
              width: 4.85rem;
              border: none;
              outline: none;
            }
            div.sex-filter {
              float: left;
              position: relative;
              margin-top: .3rem;
              width: .73rem;
              height: .58rem;
              line-height: .58rem;
              border-radius: .05rem;
              border: solid 1px #b4b4b4;
              .select-wrap {
                width: .73rem;
                height: .58rem;
                text-align: center;
                i{
                  font-size: .1rem;
                  font-weight: bold;
                  color: $base-color;
                }
              }
              ul.select-list{
                width: .73rem;
                position: absolute;
                left: -0.02rem;
                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: center;
                  padding: 0 .13rem;
                  font-size: .28rem;
                  height: .53rem;
                  line-height: .53rem;
                }
              }
            }
            &:last-child {
              border-bottom: none;
            }
          }
        }
        .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 .2rem;
              background-color: #acaaab;
            }
            &:last-child{
              background-color: #3f84f6       ;
            }
          }
        }
        .staff-list {
          margin: 0 auto;
          padding: .35rem .24rem .15rem;
          width: 6.64rem;
          background-color: #ffffff;
          border-radius: .05rem;
          .list-item {
            overflow: hidden;
            span{
              float: left;
              font-size: .28rem;
              color: #3f84f6;
              &:first-child{
                width: 1.3rem;
              }
              &:last-child{
                width: 4.8rem;
                color: #666;
              }
            }
          }
        }
      }
    }
  }
</style>