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

<!--客户管理添加-->
<template>
  <div class="container">
    <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="global.uploadPath"
                :show-file-list="false"
                :on-success="upLoadSuccess1"
                :disabled="disabled"
              >
              <!-- :class="avatarshow == true ? 'avatar1' : 'avatar'" -->
                <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="global.uploadPath"
                :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 style="width: 330px; margin: 0 auto">
              <div class="unload-img">上传银行卡正面</div>
              <el-upload
                class="avatar-uploader avatar-uploader3"
                :action="global.uploadPath"
                :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>

          <!-- <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="global.uploadPath"
                :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="global.uploadPath"
                :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="supplier" label-width="80px">
            <ws-input v-model="customerList.supplier" placeholder="请输入供应商姓名" maxlength="15" size="small"
              :disabled="disabled" />
          </ws-form-item>
           <ws-form-item label="供应商电话 " span="1" prop="supplierPhone" label-width="80px">
            <ws-input v-model="customerList.supplierPhone" placeholder="请输入供应商电话" maxlength="15" size="small"
              :disabled="disabled" />
          </ws-form-item> -->
          <ws-form-item label="银行卡号" span="1" prop="bankCard">
            <ws-input
              type="number"
              @mousewheel.native.prevent
              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
              type="number"
              @mousewheel.native.prevent
              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
              type="number"
              @mousewheel.native.prevent
              v-model="verifyCode"
              placeholder="请输入验证码"
              maxlength="100"
              size="small"
              :disabled="disabled"
            />
          </div> -->
          <!-- <ws-form-item label="村委会电话" span="1" prop="villageCommitteePhone">
            <ws-input
              v-model="customerList.villageCommitteePhone"
              placeholder="村委会电话"
              maxlength="100"
              size="small"
              :disabled="disabled"
            />
          </ws-form-item> -->
        </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: '123456',
        bankList:[],
        bankInput:true,
        bankText:'手动填写',
        avatarshow:false,
      }
    },
    activated() {
      this.switchType = this.$route.query.types
      if (!this.switchType) {
        this.switchType = 1
        this.trader = '新增'
        this.imageUrl1 = ''
        this.imageUrl2 = ''
        this.imageUrl3 = ''
        this.imageUrl4 = ''
        this.trader = '新增'
         this.disabled = false
        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 = '123456'
        this.disabled = false
        this.trader = ''
        this.$router.push({
          path: 'customerManagement'
        })
      },
      obtainWH(e,index){
          //获取图片宽高
          let type = this.$route.query.types
          var img_url = e.url;//图片URL地址
             var imgObj = new Image();//创建对象
             imgObj.src = img_url;//改变图片地址
             imgObj.onload = function(){
               if(Number(imgObj.width) < Number(imgObj.height)){
                 let i = document.getElementsByClassName("avatar");
                 if(!type){
                   for( j = 0 ; j < i.length ; j++){
                     i[j].style.width='auto'
                   }
                 }else{
                    i[index].style.width='auto'
                 }
                  let j = document.getElementsByClassName("avatar-uploader" + (index+1))
                  j[0].style.background = "#e7e3e3"
               }
            }
      },
      upLoadSuccess1(e) {
        this.identityUp = 'up'
        this.identity[0] = e.data.url
        this.imageUrl1 = e.data.url
        getIdentity({
            personImg: e.data.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)
            }
            if (response.recPersonAddr ) {
              this.$set( this.customerList,'compAddress',response.recPersonAddr)
            }
          })
           this.obtainWH(e,0)
      },

      upLoadSuccess2(e) {
        this.identityLow = 'low'
        this.identity[1] = e.data.url
        this.imageUrl2 = e.data.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)
        //     }
            
        //     if (response.recPersonAddr ) {
        //       this.$set( this.customerList,'compAddress',response.recPersonAddr)
        //     }
        //   })
        this.obtainWH(e,1)
      },
      bankSuccess1(e) {
        this.bankUps = 'bankUp'
        this.bank[0] = e.data.url
        this.imageUrl3 = e.data.url
        getBank({
            bankImg: e.data.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)
            }
          })
          this.obtainWH(e,2)
      },
      bankSuccess2(e) {
        this.bankLows = 'bankLow'
        this.bank[1] = e.data.url
        this.imageUrl4 = e.data.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)
        //     }
        //   })
        this.obtainWH(e,3)
      },
      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
        }
        // if (!this.customerList.compAddress) {
        //   this.$message({
        //     message: '请输入联系地址',
        //     type: 'warning',
        //   })
        //   return
        // }
        // if (!this.customerList.villageCommitteePhone) {
        //   this.$message({
        //     message: '请输入村委会电话',
        //     type: 'warning',
        //   })
        //   return
        // }
        // 验证码校验
        GetCustomerCodeJY({
            phone: this.customerList.customerPhone,
            verifyCode: this.verifyCode
          })
          .toPromise()
          .then((response) => {
            this.customerList.compId = localStorage.getItem('ws-pf_compId')
            this.customerList.cardAddressUrl = this.identity.toString()
            this.customerList.payeeAddressUrl = this.bank.toString()
            this.customerList.payeeName = this.customerList.customerName
            this.customerList.payeeNumberCard = this.customerList.customerNumberCard
            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;
}
.avatar1 {
  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>