yiliangyiyun-pc-jj/src/views/customerFundManagement/customerFundAdd.vue

<!--客户管理添加-->
<template>
  <div class="center">
    <el-row>
      <el-col :span="12">
        <h2 class="bg-left titleup">创建客户</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>
          <!--合同类型-->
          <ws-form-item label="客户类型" span="1" class="readonly">
            <el-radio v-model="customerList.customerType" label="企业客户"
              >企业客户</el-radio
            >
            <el-radio v-model="customerList.customerType" label="个人客户"
              >个人客户</el-radio
            >
          </ws-form-item>
          <ws-form-item
            label="公司名称"
            span="1"
            prop="compName"
            label-width="80px"
            v-if="customerList.customerType == '企业客户'"
          >
            <ws-input
              v-model="customerList.compName"
              placeholder="请输入公司名称"
              maxlength="30"
              size="small"
              :disabled="disabled"
            />
          </ws-form-item>
          <ws-form-item
            label="客户姓名"
            span="1"
            prop="customerName"
            label-width="80px"
            v-if="customerList.customerType == '个人客户'"
          >
            <ws-input
              v-model="customerList.customerName"
              placeholder="请输入客户姓名"
              maxlength="15"
              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="totalDeposit">
            <ws-input
              type="number"
              @mousewheel.native.prevent
              v-model="customerList.totalDeposit"
              placeholder="请输入定金"
              maxlength="11"
              size="small"
              :disabled="disabled"
            />
          </ws-form-item>
          <ws-form-item label="预付金（元）" span="1" prop="advancePayment">
            <ws-input
              type="number"
              @mousewheel.native.prevent
              v-model="customerList.advancePayment"
              placeholder="请输入预付金"
              maxlength="11"
              size="small"
              :disabled="disabled"
            />
          </ws-form-item>
          <ws-form-item label="保证金（元）" span="1" prop="securityDeposit">
            <ws-input
              type="number"
              @mousewheel.native.prevent
              v-model="customerList.securityDeposit"
              placeholder="请输入保证金"
              maxlength="11"
              size="small"
              :disabled="disabled"
            />
          </ws-form-item>
          <div style="display: flex; width: 100%;justify-content: space-between;">
            <div style="width: 330px;margin: 0px 0 22px 218px;">
              <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: 0px 126px 22px 0px;">
              <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="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
            style='margin-right:10px;'
              v-if="bankInput"
              v-model="customerList.bankDepositBranch"
              placeholder="请输入开户支行"
              maxlength="100"
              size="small"
              :disabled="disabled"
            />
            <ws-select
              v-else
              style='margin-right:10px;'
              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="30"
              size="small"
              :disabled="disabled"
            />
          </ws-form-item>
        </ws-info-table>
        <div class="but" style='text-align:right;padding-right:20px;'>
          <el-button type="primary" @click="commit">提交</el-button>
        </div>
      </ws-form>
    </div>
  </div>
</template>
<script>
import {
  addCustomer,
  getBank,
} from '@/model/customerFundManagement/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',
      sendDisabled: false,
      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 = {}
    }
  },
  methods: {
    bankInputChange() {
      this.bankInput = !this.bankInput
      if (this.bankInput) {
        this.bankText = '自动识别'
      } else {
        this.bankText = '手动填写'
      }
    },
    cancel() {
      this.customerList = {}
      this.$router.push({
        path: 'customerFundList',
      })
    },
    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.imageUrl3) {
        this.$message({
          message: '请上传银行卡正面',
          type: 'warning',
        })
        return
      }
      if (
        !this.customerList.customerName &&
        this.customerList.customerType == '个人客户'
      ) {
        this.$message({
          message: '请输入客户姓名',
          type: 'warning',
        })
        return
      }
      if (
        !this.customerList.compName &&
        this.customerList.customerType == '企业客户'
      ) {
        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.customerPhone) {
        this.$message({
          message: '请输入手机号',
          type: 'warning',
        })
        return
      }
      if (this.customerList.customerPhone.length != 11) {
        this.$message({
          message: '输入的手机号有误，请重新输入',
          type: 'warning',
        })
        return
      }
      this.customerList.compId = localStorage.getItem('ws-pf_compId')

      this.$confirm('确定提交客户信息？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.customerList.cardAddressUrl = this.identity.toString()
          this.customerList.payeeAddressUrl = this.bank.toString()
          // this.customerList.customerTypeFlag = this.customerTypeFlag
          // this.customerList.customerType = this.customerType
          addCustomer(this.customerList)
            .toPromise()
            .then((response) => {
              this.$message.success('添加成功')
              this.customerList = {}
              this.$router.go(-1)
            })
        })
        .catch(() => {
          return false
        })
    },
  },
}
</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>