yiliangyiyun-pc-jj/src/views/houseSelfCollect/customerManagementAdd.vue

<!--客户管理添加-->
<template>
  <div class="center">
    <el-row>
      <el-col :span="12">
        <h2 class="bg-left titleup">{{ trader }}粮商</h2>
      </el-col>
      <el-col :span="12" class="bg-right">
        <el-button class="bg-bottom" type="primary" size="small" @click="cancel"><img width="6" height="10"
            style="vertical-align: bottom; margin-right: 3px" src="../../../public/img/lujing.png" alt="" />返回
        </el-button>
      </el-col>
    </el-row>
    <div class="unload">
      <ws-form ref="customerList" :model="customerList" label-width="120px">
        <ws-info-table>
          <div style="display: flex; width: 100%; text-align: center">
            <div style="width: 330px; margin: 0 auto">
              <div class="unload-img">上传身份证人像面</div>
              <el-upload class="avatar-uploader avatar-uploader1" action="https://www.zthymaoyi.com/upload/admin"
                :show-file-list="false" :on-success="upLoadSuccess1" :disabled="disabled">
                <img v-if="imageUrl1" :src="imageUrl1" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
            <div style="width: 330px; margin: 0 auto">

              <div class="unload-img">上传身份证国徽面</div>
              <el-upload class="avatar-uploader avatar-uploader2" action="https://www.zthymaoyi.com/upload/admin"
                :show-file-list="false" :on-success="upLoadSuccess2" :disabled="disabled">
                <img v-if="imageUrl2" :src="imageUrl2" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </div>

          <div style="display: flex; width: 100%; text-align: center">
            <div style="width:330px; margin: 0 auto">
              <div class="unload-img">上传银行卡正面</div>
              <el-upload class="avatar-uploader avatar-uploader3" action="https://www.zthymaoyi.com/upload/admin"
                :show-file-list="false" :on-success="bankSuccess1" :disabled="disabled">
                <img v-if="imageUrl3" :src="imageUrl3" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
            <div style="width:330px; margin: 0 auto">
              <div class="unload-img">上传银行卡反面</div>
              <el-upload class="avatar-uploader avatar-uploader4" action="https://www.zthymaoyi.com/upload/admin"
                :show-file-list="false" :on-success="bankSuccess2" :disabled="disabled">
                <img v-if="imageUrl4" :src="imageUrl4" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </div>
          <ws-form-item label="姓名" span="1" prop="customerName" label-width="80px">
            <ws-input v-model="customerList.customerName" placeholder="请输入姓名" maxlength="15" size="small"
              :disabled="disabled" />
          </ws-form-item>
          <ws-form-item label="身份证号" span="1" prop="customerNumberCard">
            <ws-input v-model="customerList.customerNumberCard" placeholder="请输入身份证号" maxlength="18" size="small"
              :disabled="disabled" />
          </ws-form-item>
          <ws-form-item label="银行卡号" span="1" prop="bankCard">
            <ws-input v-model="customerList.bankCard" placeholder="请输入银行卡号" maxlength="19" size="small"
              :disabled="disabled" />
          </ws-form-item>
          <ws-form-item label="开户行" span="1" prop="bankDeposit">
            <ws-input v-model="customerList.bankDeposit" placeholder="请输入开户行" maxlength="100" size="small"
              :disabled="disabled" />
          </ws-form-item>
          <ws-form-item label="开户支行" span="1" prop="bankDepositBranch">
            <ws-input v-if="bankInput" v-model="customerList.bankDepositBranch" placeholder="请输入开户支行" maxlength="100" size="small"
              :disabled="disabled" />
            <ws-select v-else v-model="customerList.bankDepositBranch" placeholder="请输入开户支行" :disabled="disabled">
              <ws-option v-for="item in bankList" :key="item" :label="item" :value="item" />
            </ws-select>
            <el-button type="primary" @click="bankInputChange" v-if="switchType != 2">{{bankText}}</el-button>
          </ws-form-item>
          <ws-form-item label="收款人姓名" span="1" prop="payeeName">
            <ws-input v-model="customerList.payeeName" placeholder="请输入收款人姓名" maxlength="15" size="small"
              :disabled="disabled" />
          </ws-form-item>
          <ws-form-item label="收款人身份证号" span="1" prop="payeeNumberCard">
            <ws-input v-model="customerList.payeeNumberCard" placeholder="请输入收款人身份证号" maxlength="18" size="small"
              :disabled="disabled" />
          </ws-form-item>
          <ws-form-item label="手机号" span="1" prop="customerPhone">
            <ws-input v-model="customerList.customerPhone" placeholder="请输入手机号" maxlength="11" size="small"
              :disabled="disabled" />
          </ws-form-item>
          <ws-form-item label="联系地址" span="1" prop="compAddress">
            <ws-input v-model="customerList.compAddress" placeholder="请输入联系地址" maxlength="100" size="small"
              :disabled="disabled" />
          </ws-form-item>
          <div v-if="this.switchType == 1 || this.switchType == 3" class = "jiaoYan">
              <el-button type="primary" class="veriCode" @click="toSend()" v-if="!sendDisabled">获取验证码</el-button>
            <el-button type="warning" class="veriCode" v-if="sendDisabled">{{sendText}}</el-button>
            <ws-input v-model="verifyCode" placeholder="请输入验证码" maxlength="100" size="small" :disabled="disabled" />
          </div>
        </ws-info-table>
        <div class="but">
          <el-button type="primary" @click="commit" v-if="switchType == 1 || switchType == 3">提交</el-button>
          <el-button type="primary" @click="cancel" v-if="switchType == 2">关闭</el-button>
        </div>
      </ws-form>
    </div>
  </div>
</template>
<script>
  import {
    customerAdd,
    customerIdentity,
    getCustomerLook,
    CustomerEdit,
    getIdentity,
    getBank,
    GetCustomerCode,
    GetCustomerCodeJY
  } from '@/model/houseSelfCollect/index'

  export default {
    components: {},
    watch: {},
    data() {
      return {
        imageUrl1: "",
        imageUrl2: "",
        imageUrl3: "",
        imageUrl4: "",
        dialogImageUrl: '',
        dialogVisible: false,
        customerList: {
          customerName: "",
          customerNumberCard: "",
          bankCard: "",
          bankDeposit: "",
        },
        disabledFlag: true,
        disabled: false,
        identity: [],
        bank: [],
        trader: '新增',
        switchType: '',
        identityImgUp: [{
          url: '',
        }, ],
        identityImgLow: [{
          url: '',
        }, ],
        bankImgUp: [{
          url: '',
        }, ],
        bankImgLow: [{
          url: '',
        }, ],
        identityUp: 'up',
        identityLow: 'low',
        bankUps: 'bankUp',
        bankLows: 'bankLow',
        sendText: '60S后重发',
        sendDisabled: false,
        verifyCode: "",
        bankList:[],
        bankInput:false,
        bankText:"手动填写"
      }
    },
    activated() {
      this.switchType = this.$route.query.types
      if (this.$route.query.types == null) {
        this.switchType = 1
        this.imageUrl1 = ""
        this.imageUrl2 = ""
        this.imageUrl3 = ""
        this.imageUrl4 = ""
        this.customerList = {}
      }
      let id = this.$route.query.id
      if (this.switchType == 2) {
        this.disabled = true
        this.trader = '查看'
        this.getList(id)
      } else if (this.switchType == 3) {
        this.disabled = false
        this.trader = '编辑'
        this.getList(id)
      }
    },
    methods: {
      bankInputChange(){
        this.bankInput = !this.bankInput
        if(this.bankInput){
          this.bankText = "自动识别"
        }
        else{
          this.bankText = "手动填写"
        }
      },
      handleRemove(file, index) {
        if (index == 1) {
          this.identityUp = ''
        } else if (index == 2) {
          this.identityLow = ''
        }

        if (this.switchType == 3) {
          for (let i = 0; i < this.identity.length; i++) {
            if (file.url == this.identity[i]) {
              this.identity.splice(i, 1, '')
            }
          }
        } else if (this.switchType == 1) {
          for (let i = 0; i < this.identity.length; i++) {
            if (file.response.url == this.identity[i]) {
              this.identity.splice(i, 1, '')
            }
          }
        }
      },
      handleRemove1(file, index) {
        if (index == 1) {
          this.bankUps = ''
        } else if (index == 2) {
          this.bankLows = ''
        }
        if (this.switchType == 3) {
          for (let i = 0; i < this.bank.length; i++) {
            if (file.url == this.bank[i]) {
              this.bank.splice(i, 1, '')
            }
          }
        } else if (this.switchType == 1) {
          for (let i = 0; i < this.bank.length; i++) {
            if (file.response.url == this.bank[i]) {
              this.bank.splice(i, 1, '')
            }
          }
        }
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      // 发送验证码
      toSend() {
        let that = this;
        if (/^0?1[3|4|5|6|7|8][0-9]\d{8}$/.test(this.customerList.customerPhone)) {
          GetCustomerCode({
              phone: this.customerList.customerPhone
            })
            .toPromise().then((response) => {
              if (response == 'ok') {
                that.sendDisabled = true
                let sec = 60
                let interval = setInterval(() => {
                  sec--;
                  that.sendText = sec + 'S后重发'
                  if (sec <= 0) {
                    that.sendDisabled = false
                    that.sendText = "获取验证码"
                    clearInterval(interval)
                  }
                }, 1000)
              } else {}
            })
        }


      },
      cancel() {
        this.customerList = {}
        this.verifyCode = ""
        this.$router.push({
          path: 'customerManagement'
        })
      },
      upLoadSuccess1(e) {
        this.identityUp = 'up'
        this.identity[0] = e.url
        this.imageUrl1 = e.url
        getIdentity({
            personImg: e.url
          })
          .toPromise()
          .then((response) => {
            if (response.recPerson ) {
               this.$set( this.customerList,'customerName',response.recPerson)
               this.$set( this.customerList,'payeeName',response.recPerson)
            }
            if (response.recPersonNo ) {
              this.$set( this.customerList,'customerNumberCard',response.recPersonNo)
               this.$set( this.customerList,'payeeNumberCard',response.recPersonNo)
            }
          })
      },
      upLoadSuccess2(e) {
        this.identityLow = 'low'
        this.identity[1] = e.url
        this.imageUrl2 = e.url
        getIdentity({
            personImg: e.url
          })
          .toPromise()
          .then((response) => {
            if (response.recPerson ) {
                this.$set( this.customerList,'customerName',response.recPerson)
                this.$set( this.customerList,'payeeName',response.recPerson)
            }
            
            if (response.recPersonNo ) {
              this.$set( this.customerList,'customerNumberCard',response.recPersonNo)
               this.$set( this.customerList,'payeeNumberCard',response.recPersonNo)
            }
            
          })
      },
      bankSuccess1(e) {
        this.bankUps = 'bankUp'
        this.bank[0] = e.url
        this.imageUrl3 = e.url
        getBank({
            bankImg: e.url
          })
          .toPromise()
          .then((response) => {
            if (response.bankNameZhihang.length > 0) {
              this.bankList = response.bankNameZhihang
            }
            if (response.bankNo) {
                  this.$set(this.customerList,'bankCard',response.bankNo)
            }
            if (response.bankName) {
              this.$set(this.customerList,'bankDeposit',response.bankName)
            }
          })
      },
      bankSuccess2(e) {
        this.bankLows = 'bankLow'
        this.bank[1] = e.url
        this.imageUrl4 = e.url
        getBank({
            bankImg: e.url
          })
          .toPromise()
          .then((response) => {
             if (response.bankNameZhihang) {
              this.bankList = response.bankNameZhihang
            }
            if (response.bankNo) {
              this.$set(this.customerList,'bankCard',response.bankNo)
            }
            if (response.bankName) {
              this.$set(this.customerList,'bankDeposit',response.bankName)
            }
          })
      },
      commit() {
        if (!this.imageUrl1) {
          this.$message({
            message: '请上传身份证正面',
            type: 'warning',
          })
          return
        }
          if (!this.imageUrl3) {
          this.$message({
            message: '请上传银行卡正面',
            type: 'warning',
          })
          return
        }
        if (!this.customerList.customerName) {
          this.$message({
            message: '请输入姓名',
            type: 'warning',
          })
          return
        }
           if (!this.customerList.bankCard) {
          this.$message({
            message: '请输入输入银行卡号',
            type: 'warning',
          })
          return
        }
           if (!this.customerList.bankDeposit) {
          this.$message({
            message: '请输入开户行',
            type: 'warning',
          })
          return
        }
          if (!this.customerList.bankDepositBranch) {
          this.$message({
            message: '请输入开户支行',
            type: 'warning',
          })
          return
        }
         if (this.customerList.payeeNumberCard.length != 18) {
          this.$message({
            message: '收款人身份证号输入有误，请重新输入',
            type: 'warning',
          })
          return
        }
        if (!this.customerList.customerPhone) {
          this.$message({
            message: '请输入手机号',
            type: 'warning',
          })
          return
        }
         if (this.customerList.customerPhone.length != 11) {
          this.$message({
            message: '输入的手机号有误，请重新输入',
            type: 'warning',
          })
          return
        }
        // 验证码校验
        GetCustomerCodeJY({
            phone: this.customerList.customerPhone,
            verifyCode: this.verifyCode
          })
          .toPromise()
          .then((response) => {
            this.customerList.compId = sessionStorage.getItem('ws-pf_compId')
            this.customerList.cardAddressUrl = this.identity.toString()
            this.customerList.payeeAddressUrl = this.bank.toString()
            this.customerList.customerTypeFlag = 1
            this.customerList.customerType = '个人'
            if (this.switchType == 1) {
              this.$confirm('确定提交客户信息？', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning',
                })
                .then(() => {
                  customerAdd(this.customerList)
                    .toPromise()
                    .then((response) => {
                      this.$message.success('添加成功')
                      this.customerList = {}
                      this.verifyCode = ""
                      this.$router.go(-1)
                    })
                })
                .catch(() => {
                  return false
                })
            } else if (this.switchType == 3) {
              this.$confirm('确定修改客户信息？', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning',
                })
                .then(() => {
                  CustomerEdit(this.customerList)
                    .toPromise()
                    .then((response) => {
                      this.$message.success('修改成功')
                         this.customerList = {}
                         this.verifyCode = ""
                      this.$router.push({
                        path: 'customerManagement'
                      })
                    })
                })
                .catch(() => {
                  return false
                })
            }
          })
      },
      getList(ids) {
        getCustomerLook({
            id: ids,
            authenticationStatusKey: 7
          })
          .toPromise()
          .then((response) => {
            this.customerList = response
            this.identity = this.customerList.cardAddressUrl.split(',')
            this.bank = this.customerList.payeeAddressUrl.split(',')
            this.imageUrl1 = this.identity[0]
            this.imageUrl2 = this.identity[1]
            this.imageUrl3 = this.bank[0]
            this.imageUrl4 = this.bank[1]
          })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .avatar-uploader1 {
    background: url('../../../public/img/identityup.png');
  }

  .avatar-uploader2 {
    background: url('../../../public/img/identitylow.png');
  }

  .avatar-uploader3 {
    background: url('../../../public/img/bankup.png');
  }

  .avatar-uploader4 {
    background: url('../../../public/img/banklow.png');
  }

  /deep/.el-upload {
    height: 200px;
  }

  .avatar-uploader {
    background-size: 100% 100%;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 330px;
    height: 103%;
    display: block;
  }

  .center {
    background: #f6f7fc;
  }

  .seach {
    display: flex;
    align-items: center;

    .find {
      width: 32px;
    }

    .search-left {
      display: flex;
    }
  }

  .ws-info-table {
    border: none;
    width: 80%;
    margin: 0 auto;
  }

  .ws-info-table .el-form-item {
    width: 50%;
    border: none;
  }

  /deep/.ws-info-table .el-form-item .el-form-item__label {
    width: 30%;
    text-align: center;
    background: #ffffff;
    font-size: 14px;
    color: #8890b1;
  }

  /deep/.ws-info-table .el-form-item .el-form-item__content {
    border: none;
  }

  .bg-left {
    padding-left: 30px;
  }

  .bg-right {
    padding-right: 10px;
    text-align: right;
  }

  .bg-bottom {
    margin: 15px 0px;
  }

  .titleup {
    position: relative;
  }

  .titleup::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 30px;
    background: #5473e8;
    position: absolute;
    left: 0;
  }

  .unload {
    background: #ffffff;
    padding-top: 20px;
  }

  .but {
    text-align: center;
    margin: 20px auto;
  }

  /deep/.up .el-upload--picture-card {
    display: none;
  }

  /deep/.low .el-upload--picture-card {
    display: none;
  }

  /deep/.bankUp .el-upload--picture-card {
    display: none;
  }

  /deep/.bankLow .el-upload--picture-card {
    display: none;
  }

  .unload-img {
    margin: 20px 0;
  }

  .veriCode {
    margin: 0 9px;
  }
  .jiaoYan{
    display: flex;
    width: 50%;
    padding: 0 9px;
  }
  /deep/.jiaoYan .el-input__inner{
    width: 100%;
  }

</style>