paper-shopkeeper-H5/pages/add-account/index.vue

<template>
  <view class="add-account">
    <view>
      <uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="">
        <view class="add-account-title">新增企业账号</view>
        <view slot="left"></view>
        <view slot="right"></view>
      </uni-nav-bar>
    </view>
    <view class="">
      <view class="add-paper-list">
        <view>
          <text class="add-paper-start"><uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons></text>
          <text class="add-paper-text">手机号</text>
        </view>
        <view class="add-paper-input">
          <qn-easyinput
            type="number"
            :maxlength="11"
            :styles="{ disableColor: '#fff' }"
            v-model="form.mobile"
            :inputBorder="false"
            text="right"
            placeholder="请输入手机号"
          ></qn-easyinput>
        </view>
      </view>
      <view class="add-paper-border"></view>
      <view class="add-paper-list">
        <view>
          <text class="add-paper-start"><uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons></text>
          <text class="add-paper-text">用户名</text>
        </view>
        <view class="add-paper-input">
          <qn-easyinput
            type="text"
            :styles="{ disableColor: '#fff' }"
            v-model="form.name"
            :inputBorder="false"
            text="right"
            placeholder="请输入用户名"
          ></qn-easyinput>
        </view>
      </view>
      <view class="add-paper-border"></view>
      <view class="add-paper-list" @click="paperpopupShow()">
        <view>
          <text class="add-paper-start"><uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons></text>
          <text class="add-paper-text">职务</text>
        </view>
        <view class="">
          <text v-if="form.title === ''" class="add-paph-text">点击选择职务</text>
          <text v-else>{{ form.title }}</text>
          <text><uni-icons type="right" color="#000000" size="18"></uni-icons></text>
        </view>
      </view>
    </view>
    <view class="upload-btn">
      <view class=""><button type="primary" class="btn-class" plain="true" @click="cencelList()">取消</button></view>
      <view class=""><button type="primary" class="btn-class-upload" @click="uploadData()">确认</button></view>
    </view>
    <uni-popup ref="paperpopup" type="bottom">
      <view class="popup_modal">
        <scroll-view scroll-y="true" class="popup_modal-scroll">
          <view @click="paperSelectChange(item)" class="popup_modal-scroll-item" v-for="item in paperList" :key="item.id">{{ item.name }}</view>
          <uGap></uGap>
          <view class="cencel-btn" @click="cencelbtn">取消</view>
        </scroll-view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { back } from '@/utils/hook.js'
import uGap from '@/components/u-gap/u-gap.vue'
import { addEmployee } from '@/apis/setting.js'
const validateFields = ['mobile', 'name', 'title']
export default {
  data() {
    return {
      form: {
        title: ''
      },
      paperList: [
        {
          name: '管理员',
          id: '1'
        },
        {
          name: '业务员',
          id: '2'
        },
        {
          name: '司机',
          id: '3'
        },
        {
          name: '分切',
          id: '4'
        },
        {
          name: '库管',
          id: '5'
        }
      ]
    }
  },
  components: { uGap },
  methods: {
    back,
    paperpopupShow() {
      this.$refs.paperpopup.open('bottom')
    },
    paperSelectChange(item) {
      this.$set(this.form, 'title', item.name)
      this.$refs.paperpopup.close()
    },
    cencelbtn() {
      this.$refs.paperpopup.close()
    },
    cencelList() {
      back()
    },
    uploadData() {
      for (let validateField of validateFields) {
        if (this.form[validateField] === null || this.form[validateField] === '') {
          uni.showToast({
            title: '请完善信息',
            icon: 'none'
          })
          return
        }
      }
      let params = {
        ...this.form,
        enterpriseId: this.$store.state.companyInfo.id
      }
      addEmployee(params).then((res) => {
        if (res) {
          uni.showToast({
            title: '添加成功',
            icon: 'success'
          })
          setTimeout(() => {
            back()
          }, 1000)
        }
      })
    }
  }
}
</script>

<style lang="scss">
.add-account {
  .add-account-title {
    width: 100%;
    font-size: 36rpx;
    color: #000000;
    letter-spacing: 0;
    text-align: center;
    font-weight: 500;
  }
  .add-account {
    font-size: 28rpx;
    color: #007aff;
    text-align: right;
    line-height: 40rpx;
    font-weight: 500;
  }
  .add-paper-border {
    border-bottom: 2rpx solid rgba(221, 221, 221, 0.5);
    margin-left: 32rpx;
  }
  .add-paper-list {
    height: 88rpx;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 32rpx;
    padding-right: 32rpx;
  }
  .add-paper-text {
    font-size: 28rpx;
    color: #000000;
    letter-spacing: 0;
    font-weight: 400;
  }
  .add-paper-start {
    font-size: 28rpx;
    color: #f5222d;
    letter-spacing: 0;
    font-weight: 400;
  }
  .add-paper-input {
    width: 40%;
  }
  .popup_modal {
    width: 750rpx;
    height: 600rpx;
    background-color: #fff;
    border-radius: 10rpx 10rpx 0 0;
    .popup_modal-title {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      width: 750rpx;
      height: 88rpx;
      font-weight: 600;
      border-bottom: 2rpx solid rgba(221, 221, 221, 0.5);
    }
    .popup_modal-scroll {
      width: 750rpx;
      height: 600rpx;
      .popup_modal-scroll-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 750rpx;
        height: 88rpx;
        padding: 0rpx 32rpx;
        border-bottom: 2rpx solid rgba(221, 221, 221, 0.5);
      }
    }
  }
  .cencel-btn {
    font-size: 32rpx;
    color: #646566;
    text-align: center;
    line-height: 44rpx;
    font-weight: 400;
    margin-top: 40rpx;
  }
  .add-paph-text {
    font-size: 28rpx;
    color: #888888;
    letter-spacing: 0;
    font-weight: 400;
  }
  .btn-class {
    height: 88rpx;
    border-radius: 10rpx;
    line-height: 80rpx;
    width: 150px;
  }
  .btn-class-upload {
    height: 88rpx;
    border-radius: 10rpx;
    line-height: 80rpx;
    width: 200px;
  }
  .upload-btn {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 32rpx;
    background-color: #ffffff;
    position: absolute;
    bottom: 0rpx;
    width: 100%;
  }
}
</style>