mall-web-ssr/components/mobile/staffManagement/StaffAdd.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 === '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" maxlength="10" placeholder="请输入用户名"></li>
            <li style="overflow: visible;"><span>性别：</span>
              <div class="sex-filter">
                <div class="select-wrap" @click.stop="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"
                                        @change="checkPhone()"
                                        @input="checkPhone()"
                                        maxlength="11"
                                        placeholder="请输入手机号"></li>
            <li><span>邮箱：</span><input type="text"
                                       v-model="newUserEmail"
                                       @change="checkEmail()"
                                       @input="checkEmail()"
                                       placeholder="请输入邮箱"></li>
          </ul>
          <div class="staff-footer">
            <div class="cancel handle" @click="cancelBind">取消</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"
                 v-model="searchKeyword"
                 @click="addApply"
                 placeholder="请输入UU号、手机号或邮箱">
          <span @click="addApply"><i class="iconfont icon-sousuo"></i></span>
        </div>
        <div class="list-content" v-if="showSearchUser">
          <div v-if="bindUser">
            <div class="staff-list">
              <div class="list-item"><span>UU账号：</span><span v-text="newUserInfo.userUU">100000721</span></div>
              <div class="list-item"><span>姓名：</span><span v-text="newUserInfo.userName">张洪别</span></div>
              <div class="list-item"><span>性别：</span><span v-text="newUserInfo.userSex === 'F' ? '女' : newUserInfo.userSex === 'M' ? '男' : '-'">男</span></div>
              <div class="list-item"><span>手机：</span><span v-text="newUserInfo.userTel">12345678901</span></div>
              <div class="list-item"><span>邮箱：</span><span v-text="newUserInfo.userEmail">12345678901</span></div>
            </div>
            <div class="staff-footer">
              <div class="cancel handle" @click="cancelBind">取消</div>
              <div class="agree handle" @click="sureBindNewUser()">确定绑定</div>
            </div>
          </div>
          <div class="staff-list" v-if="reBindError">
            <span>该用户已绑定到当前企业，不可重复绑定！</span>
          </div>
          <div class="staff-list" v-if="illegalError">
            <span>不可对自己进行绑定！</span>
          </div>
        </div>
        <div class="list-content" v-else>
          <div class="staff-list">
            <span>您查找的用户不存在！</span>
          </div>
        </div>
      </div>
    </div>
    <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
  </div>
</template>
<script>
  import { RemindBox } from '~components/mobile/common'
  export default {
    data () {
      return {
        switchType: 'addNoRegister',
        newUserName: '',
        newUserPhone: '',
        newUserEmail: '',
        showChooseSex: false,
        sex: 'M',
        remindText: '',
        timeoutCount: 0,
        newPhoneCheck: false,
        newEmailCheck: false,
        showSearchUser: true,
        searchKeyword: '',
        newUserInfo: '',
        reBindError: false,
        illegalError: false,
        bindUser: false
      }
    },
    components: {
      RemindBox
    },
    computed: {
      userInfo () {
        return this.$store.state.option.user.data
      }
    },
    mounted () {
      this.$nextTick(() => {
        window.addEventListener('click', () => {
          this.showChooseSex = false
        }, false)
      })
    },
    methods: {
      setSwitchType (type) {
        this.switchType = type
      },
      openChoose () {
        this.showChooseSex = !this.showChooseSex
      },
      chooseSex (info) {
        this.sex = info
        this.showChooseSex = false
      },
      onRemind: function (str) {
        this.remindText = str
        this.timeoutCount ++
      },
      // 验证手机
      checkPhone () {
        if (!this.newUserPhone || this.newUserPhone === '') {
          this.newPhoneCheck = false
          this.onRemind('请输入手机号码')
        } else {
          if ((/^1\d{10}$/).test(this.newUserPhone)) {
            this.$http.get('/basic/user/telEnable', {params: {tel: this.newUserPhone}})
              .then(response => {
                if (response.data) {
                  this.newPhoneCheck = true
                } else {
                  this.newPhoneCheck = false
                  this.onRemind('手机号码' + this.newUserPhone + '已被注册')
                }
              })
          } else {
            this.newPhoneCheck = false
            this.onRemind('请输入正确的手机号码')
          }
        }
      },
      // 验证邮箱
      checkEmail () {
        if (!this.newUserEmail || this.newUserEmail === '') {
          this.onRemind('请输入邮箱')
          this.newEmailCheck = false
        } else {
          if ((/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/).test(this.newUserEmail)) {
            this.$http.get('/basic/user/emailEnable', {params: {email: this.newUserEmail}})
              .then(response => {
                if (response.data) {
                  this.newEmailCheck = true
                } else {
                  this.newEmailCheck = false
                  this.onRemind('邮箱' + this.newUserEmail + '已被注册')
                }
              })
          } else {
            this.newEmailCheck = false
            this.onRemind('请输入正确的邮箱')
          }
        }
      },
      // 绑定未注册用户
      addNewUser () {
        if (!this.newUserName ||this.newUserName === '') {
          this.onRemind('请输入用户名')
        } else if (!this.newUserPhone || this.newUserPhone === '') {
          this.onRemind('请输入手机号码')
          this.newPhoneCheck = false
        } else if (!this.newUserEmail || this.newUserEmail === '') {
          this.onRemind('请输入邮箱')
          this.newEmailCheck = false
        } else {
          if (this.newEmailCheck && this.newPhoneCheck) {
            this.$http.post('/basic/user', {userEmail: this.newUserEmail, userName: this.newUserName, userSex: this.sex, userTel: this.newUserPhone})
              .then(response => {
                if (response) {
                  this.onRemind('增加用户成功' + this.newUserName)
                  this.$router.push('/mobile/user/staff')
                }
              })
          } else {
            this.checkPhone()
            this.checkEmail()
          }
        }
      },
      // 取消绑定
      cancelBind () {
        this.$router.push('/mobile/user/staff')
      },
      // 搜索已注册用户
      addApply () {
        if (this.searchKeyword) {
          this.$http.get('/basic/user/searchUser', {params: {keyWord: this.searchKeyword}}).then(response => {
            if (response.data) {
              this.showSearchUser = true
              this.newUserInfo = response.data
              this.bindUser = true
              this.illegalError = false
              this.reBindError = false
              if (this.newUserInfo.userUU === this.userInfo.userUU) {
                //不可自己绑定自己
                this.illegalError = true
                this.bindUser = false
              } else {
                for (var i = 0; i < this.newUserInfo.enterprises.length; i++) {
                  if (this.newUserInfo.enterprises[i].current) {
                    for (var j = 0; j < this.userInfo.enterprises.length; j++) {
                      //该用户已绑定到当前企业，不可重复绑定
                      if (this.newUserInfo.enterprises[i].uu === this.userInfo.enterprises[j].uu) {
                        this.reBindError = true
                        this.bindUser = false
                      }
                    }
                  }
                }
              }
            } else {
              // 未搜索到结果
              this.showSearchUser = false
              this.bindUser = false
              this.reBindError = false
              this.illegalError = false
            }
          }).catch (err =>{
            if (err) {
              this.showSearchUser = false
              this.bindUser = false
              this.reBindError = false
              this.illegalError = false
            }
          })
        }
      },
      // 确定绑定已注册用户
      sureBindNewUser () {
        let isFlag = false
        if (this.newUserInfo.enterprises.length) {
          this.newUserInfo.enterprises.forEach(item => {
            if (item.uu === this.user.data.enterprise.uu) {
              isFlag = true
            }
          })
        }
        if (isFlag) {
          this.onRemind('该用户已绑定到当前企业，不可重复绑定！')
        } else {
          this.$http.get('/basic/user/bindUser', {params: {userUU: this.newUserInfo.userUU}})
            .then(response => {
              if (response) {
                this.onRemind('增加用户成功' + this.newUserInfo.userName)
                this.$router.push('/mobile/user/staff')
              }
            })
        }
      }
    }
  }
</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;
        &:last-child {
          margin-left: 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;
            margin-bottom: .1rem;
            span{
              float: left;
              font-size: .28rem;
              color: #3f84f6;
              &:first-child{
                width: 1.3rem;
              }
              &:last-child{
                width: 4.8rem;
                color: #666;
              }
            }
          }
        }
      }
    }
  }
</style>