商家编辑新增新账通支付配置、新增企业开户信息提交业务、新增企业开户资料上传业务功能

src/api/business.js

@@ -154,3 +154,27 @@ export function businessDomainUpdate(data) {
     data
   })
 }
+
+// 商家新增新账通信息
+export function hnapaySave(data) {
+  return request({
+    url: '/hnaPay/create',
+    method: 'post',
+    data
+  })
+}
+
+export function uploadCertInfo(data) {
+  return request({
+    url: '/hnaPay/uploadCertInfo',
+    method: 'post',
+    data
+  })
+}
+
+export function getHnaPayInfo(businessId) {
+  return request({
+    url: '/hnaPay/getHnapay/' + businessId,
+    method: 'get'
+  })
+}

src/views/business/businessList/index.vue

@@ -402,6 +402,125 @@
                 </el-form-item>
               </el-form>
             </el-tab-pane>
+            <el-tab-pane
+              label="新账通支付"
+              name="third"
+            >
+              <div style="margin-left: 15px; margin-bottom: 20px">
+                <span v-if="hnapayStatus != '2' && currentHnapayId" style="color: orange;cursor: pointer" @click="showUploadCert()">上传资料</span>
+                <span  v-if="hnapayStatus === '1'" style="margin-left: 15px;color: #2e60f8">资料审核中</span>
+                <span  v-if="hnapayStatus === '2'">审核通过</span>
+                <span  v-if="hnapayStatus === '3'" style="margin-left: 15px;color: red">资料审核拒绝，请重新上传</span>
+              </div>
+
+              <el-form
+                ref="hnapayForm"
+                :model="hnapayForm"
+                :rules="hnaPayRules"
+                label-width="100px"
+              >
+                <el-form-item label="企业名称" prop="name">
+                  <el-input
+                    v-model="hnapayForm.name" placeholder="请输入企业名称" :disabled="hnapayEditDisabled"/>
+                </el-form-item>
+
+                <el-form-item label="营业执照号" prop="enterpriseCode">
+                  <el-input
+                    v-model="hnapayForm.enterpriseCode" placeholder="请输入营业执照号" :disabled="hnapayEditDisabled"/>
+                </el-form-item>
+
+                <el-form-item label="执照效期" :prop="isForever ? '' : 'validDate'">
+                  <div class="acea-row" >
+                    <el-date-picker v-model="hnapayForm.validDate" type="date" style="width: 78%"
+                                    value-format="yyyyMMdd" placeholder="请选择营业执照有效期" :disabled="validDateDisable || hnapayEditDisabled"/>
+                    <el-checkbox style="margin-left: 20px" v-model="isForever" @change="onForeverChange" :disabled="hnapayEditDisabled">永久</el-checkbox>
+                  </div>
+                </el-form-item>
+
+                <el-form-item label="银行卡号" prop="bankCard">
+                  <el-input :disabled="hnapayEditDisabled"
+                            v-model="hnapayForm.bankCard" placeholder="请输入银行卡号"/>
+                </el-form-item>
+
+                <el-form-item label="银行简码" prop="bankCode" >
+                  <el-select v-model="hnapayForm.bankCode" style="width: 100%" filterable :disabled="hnapayEditDisabled">
+                    <el-option v-for="item in bankCodeList" :key="item.value" :label="item.value + '  ' + item.label" :value="item.value">
+                      <span style="float: left">{{ item.value }}</span>
+                      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.label }}</span>
+                    </el-option>
+
+                  </el-select>
+                </el-form-item>
+
+                <el-form-item label="开户行省市" prop="bankProvince">
+                  <el-cascader
+                    :disabled="hnapayEditDisabled"
+                    style="width: 100%"
+                    v-model="value.label"
+                    :options="areaList"
+                    :props="{ expandTrigger: 'hover' }"
+                    @change="handleChange"
+                    clearable
+                    filterable
+                    placeholder="请选择开户行所属省市">
+                  </el-cascader>
+                </el-form-item>
+
+                <el-form-item label="开户支行" prop="bankBranch">
+                  <el-input
+                    :disabled="hnapayEditDisabled"
+                    v-model="hnapayForm.bankBranch"  placeholder="请输入开户支行"/>
+                </el-form-item>
+
+                <el-form-item label="预留手机号" prop="contactPhone">
+                  <el-input
+                    :disabled="hnapayEditDisabled"
+                    v-model="hnapayForm.contactPhone"  placeholder="请输入银行预留手机号"/>
+                </el-form-item>
+              </el-form>
+            </el-tab-pane>
+            <el-tab-pane
+              label="微信支付宝"
+              name="fourth"
+            >
+              <el-form
+                ref="ruleForm"
+                :model="ruleForm"
+                :rules="rules"
+                label-width="100px"
+              >
+                <el-form-item
+                  label="账号"
+                  prop="businessPhone"
+                >
+                  <el-input
+                    v-if="businessPhoneShow"
+                    :value="hidden(ruleForm.businessPhone, 3, 4)"
+                    :disabled="disabled"
+                    maxlength="20"
+                    @focus="focusbusinessPhoneInput"
+                  />
+                  <el-input
+                    v-else
+                    ref="businessPhoneCls"
+                    v-model="ruleForm.businessPhone"
+                    :disabled="disabled"
+                    maxlength="20"
+                  />
+                </el-form-item>
+                <el-form-item
+                  label="密码"
+                  prop="businessPassword"
+                >
+                  <el-input
+                    v-model="ruleForm.businessPassword"
+                    type="password"
+                    :disabled="disabled"
+                    maxlength="16"
+                  />
+                </el-form-item>
+              </el-form>
+            </el-tab-pane>
           </el-tabs>
         </div>
         <span
@@ -415,10 +534,16 @@
             @click="next"
           >下一步</el-button>
           <el-button
-            v-else
+            v-if="activeName == 'second'"
             type="primary"
             @click="addCheck('ruleForm')"
           >确 定</el-button>
+
+          <el-button
+            v-if="activeName == 'third'"
+            type="primary"
+            @click="handleSubmitHnapay"
+          >提 交</el-button>
         </span>
       </el-dialog>
       <SharesettingDialog
@@ -427,6 +552,76 @@
         ref="domainSettingDialog"
         @onFinishSetDomain="onFinishSetDomain"/>
     </div>
+
+    <el-dialog title="企业资料上传" :visible.sync="uploadCertDialog" :close-on-click-modal="false" :show-close="false" width="30%">
+      <div class="col-content">
+        <div class="row-content">
+          <div class="col-content">
+            <span style="margin-bottom: 10px;text-align: center">身份证正面</span>
+            <el-upload
+              class="avatar-uploader"
+              action="#"
+              :show-file-list="false"
+              :auto-upload="false"
+              :before-upload="beforeUpload"
+              :on-change="handleFrontCardNoChange">
+              <img v-if="frontCardIdBase64" :src="frontCardIdBase64" class="avatar">
+              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            </el-upload>
+            <el-button type="primary" size="mini" style="margin-top: 8px" @click="uploadCertInfo(1)" :disabled="hasUploadFrontCard == true">{{hasUploadFrontCard ? '已上传' : '确认上传'}}</el-button>
+          </div>
+          <div class="col-content">
+            <span style="margin-bottom: 10px;text-align: center">身份证反面</span>
+            <el-upload
+              class="avatar-uploader"
+              action="#"
+              :show-file-list="false"
+              :auto-upload="false"
+              :before-upload="beforeUpload"
+              :on-change="handleAfterCardNoChange">
+              <img v-if="afterCardIdBase64" :src="afterCardIdBase64" class="avatar">
+              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            </el-upload>
+            <el-button type="primary" size="mini" style="margin-top: 8px" @click="uploadCertInfo(2)" :disabled="hasUploadAfterCard == true">{{hasUploadAfterCard ? '已上传' : '确认上传'}}</el-button>
+          </div>
+        </div>
+
+        <div class="row-content" style="margin-top: 40px">
+          <div class="col-content">
+            <span style="margin-bottom: 10px;text-align: center">营业执照</span>
+            <el-upload
+              class="avatar-uploader"
+              action="#"
+              :show-file-list="false"
+              :auto-upload="false"
+              :before-upload="beforeUpload"
+              :on-change="handleCertNoChange">
+              <img v-if="certNoBase64" :src="certNoBase64" class="avatar">
+              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            </el-upload>
+            <el-button type="primary" size="mini" style="margin-top: 8px" @click="uploadCertInfo(4)" :disabled="hasUploadCertNo == true">{{hasUploadCertNo ? '已上传' : '确认上传'}}</el-button>
+          </div>
+          <div class="col-content">
+            <span style="margin-bottom: 10px;text-align: center">开户许可证</span>
+            <el-upload
+              class="avatar-uploader"
+              action="#"
+              :show-file-list="false"
+              :auto-upload="false"
+              :before-upload="beforeUpload"
+              :on-change="handlePermitCertChange">
+              <img v-if="permitCertBase64" :src="permitCertBase64" class="avatar">
+              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            </el-upload>
+            <el-button type="primary" size="mini" style="margin-top: 8px" @click="uploadCertInfo(7)" :disabled="hasUploadCertNo == true">{{hasUploadPermitCert ? '已上传' : '确认上传'}}</el-button>
+          </div>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+       <el-button @click="onUploadCertCancel">取 消</el-button>
+        <el-button type="primary" @click="onUploadCertConfirm">完 成</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -439,10 +634,14 @@ import {
   businessListGetById,
   businessListUpdate,
   businessListStart,
-  delBusinessById
+  delBusinessById,
+  hnapaySave,
+  uploadCertInfo,
+  getHnaPayInfo
 } from '@/api/business'
 import SharesettingDialog from '../../../components/Sharesetting';
 import DomainSettingDialog from '../../../components/DomainSetting';
+import areaJSON from '@/assets/area'
 export default {
   components: {SharesettingDialog, DomainSettingDialog},
   data () {
@@ -475,6 +674,51 @@ export default {
         pcDomain: '', //PC端商城域名
         mobileDomain: '' //移动端商城域名
       },
+
+      hnapayForm: {
+        name: '', // 企业名称
+        enterpriseCode: '', // 营业执照号
+        validDate: '', // 执照效期
+        bankCard: '', // 银行卡号
+        bankCode: '', // 银行简码
+        bankProvince: '', // 开户省份
+        bankCity: '', // 开户城市
+        bankBranch: '', //开户支行
+        contactPhone: '' //负责人电话
+      },
+      isForever: false,
+      validDateDisable: false,
+
+      hnaPayRules: {
+        name: [
+          { required: true, message: '企业名称不能为空', trigger: 'blur' }
+        ],
+        enterpriseCode: [
+          { required: true, message: '统一社会信用代码不能为空', trigger: 'blur' }
+        ],
+        validDate: [
+          { required: true, message: '营业执照有效期不能为空', trigger: 'blur' }
+        ],
+        contactPhone: [
+          { required: true, message: '银行预留手机号不能为空', trigger: 'blur' }
+        ],
+        bankCard: [
+          { required: true, message: '银行卡号不能为空', trigger: 'blur' }
+        ],
+        bankCode: [
+          { required: true, message: '银行简码不能为空', trigger: 'blur' }
+        ],
+        bankProvince: [
+          { required: true, message: '开户行所属省份不能为空', trigger: 'blur' }
+        ],
+        bankCity: [
+          { required: true, message: '开户行所属城市不能为空', trigger: 'blur' }
+        ],
+        bankBranch: [
+          { required: true, message: '开户支行不能为空', trigger: 'blur' }
+        ],
+      },
+
       showPhone: false,
       showAddress: false,
       userPhone: '',
@@ -554,7 +798,50 @@ export default {
       userState: 1,
       privacyTime: 0,
       cpPhoneShow: true, // 是否显示脱敏负责人手机号
-      businessPhoneShow: true // 是否显示脱敏账号
+      businessPhoneShow: true, // 是否显示脱敏账号
+      bankCodeList: [
+        {label : '中国银行', value: 'BOC'},
+        {label : '中信银行', value: 'CITIC'},
+        {label : '兴业银行', value: 'CIB'},
+        {label : '浦发银行', value: 'SPDB'},
+        {label : '广发银行', value: 'GDB'},
+        {label : '平安银行', value: 'SPABANK'},
+        {label : '华夏银行', value: 'HXBANK'},
+        {label : '恒丰银行', value: 'EGBANK'},
+        {label : '浙商银行', value: 'CZBANK'},
+        {label : '渤海银行', value: 'BOHAIB'},
+        {label : '徽商银行', value: 'HSBANK'},
+        {label : '中国农业银行', value: 'ANTBANK'},
+        {label : '中国工商银行', value: 'ICBC'},
+        {label : '中国建设银行', value: 'CCB'},
+        {label : '中国邮政储蓄银行', value: 'PSBC'},
+        {label : '中国民生银行', value: 'CMBC'},
+        {label : '中国光大银行', value: 'CEB'},
+        {label : '招商银行', value: 'CMB'},
+        {label : '交通银行', value: 'COMM'}
+      ],
+
+      value: {
+        label: []
+      },
+      areaList: [],
+      currentBusinessId: undefined,
+      currentHnapayId: undefined,
+      hnapayStatus: '0',
+      hnapayEditDisabled: false,
+      uploadCertDialog: false,
+      frontCardIdBase64: '',
+      frontCardFormData: undefined,
+      afterCardIdBase64: '',
+      afterCardFormData: undefined,
+      certNoBase64: '',
+      certNoFormData: undefined,
+      permitCertBase64: '',
+      permitCertFormData: undefined,
+      hasUploadFrontCard: false,
+      hasUploadAfterCard: false,
+      hasUploadCertNo: false,
+      hasUploadPermitCert: false,
     }
   },
   // 监听属性 类似于data概念
@@ -569,6 +856,7 @@ export default {
     this.getAll(this.formInline)
     this.privacyTime = localStorage.getItem('privacyTime')
     console.log(this.privacyTime)
+    this.initArea()
   },
   // 方法集合
   methods: {
@@ -626,6 +914,7 @@ export default {
     addbuss () {
       this.userState = 0
       this.disabled = false
+      this.hnapayEditDisabled = false
       this.newAddress = ''
       this.personPhone = ''
       this.ruleForm = {
@@ -723,15 +1012,35 @@ export default {
       const res = await businessListGetById({ businessId: row.businessId })
       console.log(res)
       if (res.code === '') {
-
-        this.userState = 3
         this.disabled = true
+        this.userState = 3
+        this.hnapayEditDisabled = true
         this.ruleForm = res.data
         this.dialogVisible = true
       }
     },
     // 编辑
     async edit (row) {
+      this.currentBusinessId = row.businessId
+      this.hnapayStatus = row.hnapayStatus
+      this.currentHnapayId = row.hnaPayId
+      if (this.currentHnapayId) {
+        this.hnapayEditDisabled = true
+        this.getHnaPayInfo()
+      }else {
+        this.hnapayEditDisabled = false
+        this.hnapayForm = {
+          name: '', // 企业名称
+          enterpriseCode: '', // 营业执照号
+          validDate: '', // 执照效期
+          bankCard: '', // 银行卡号
+          bankCode: '', // 银行简码
+          bankProvince: '', // 开户省份
+          bankCity: '', // 开户城市
+          bankBranch: '', //开户支行
+          contactPhone: '' //负责人电话
+         }
+      }
       this.showPhone = false
       this.personPhone = ''
       this.userState = 1
@@ -843,6 +1152,252 @@ export default {
       return (
         str.substring(0, frontLen) + xing + str.substring(str.length - endLenData)
       )
+    },
+
+    onForeverChange(val) {
+      this.validDateDisable = val
+      if (val) {
+        this.hnapayForm.validDate = undefined
+      }
+    },
+
+    // 初始化地区
+    initArea() {
+      const { province_list, city_list } = areaJSON
+      const provinceKeys = Object.keys(province_list)
+      const cityKeys = Object.keys(city_list)
+      this.areaList = provinceKeys.map(provinceKey => {
+        provinceKey += ''
+        let provinceList = []
+        const provinceKeyId = provinceKey.slice(0, 2)
+        const provinceName = province_list[provinceKey]
+        let provinceSelected = false
+        cityKeys.map(cityKey => {
+          const cityKeyId = cityKey.slice(0, 2)
+          const cityName = city_list[cityKey]
+          if (
+            provinceKeyId === cityKeyId
+          ) {
+            provinceList.push({
+              value: cityKey,
+              label: cityName
+            })
+          }
+        })
+        return {
+          value: provinceKeyId,
+          label: provinceName,
+          children: provinceList
+        }
+      })
+    },
+
+    handleChange (val) {
+      if (val.length) {
+        this.areaList.forEach(i => {
+          if (i.value === val[0]) {
+            this.hnapayForm.bankProvince = i.label
+            i.children.forEach(j => {
+              if (j.value === val[1]) {
+                this.hnapayForm.bankCity = j.label
+              }
+            })
+          }
+        })
+      } else {
+        this.hnapayForm.bankProvince = undefined
+        this.hnapayForm.bankCity = undefined
+      }
+    },
+
+    // 企业新账通开通
+    handleSubmitHnapay() {
+      let _this = this;
+      this.$refs['hnapayForm'].validate((valid) => {
+        if (valid) {
+          let param = {
+            businessId: this.currentBusinessId,
+            name: this.hnapayForm.name,
+            enterpriseCode: this.hnapayForm.enterpriseCode,
+            validDate: this.hnapayForm.validDate,
+            bankCard: this.hnapayForm.bankCard,
+            bankCode: this.hnapayForm.bankCode,
+            bankProvince: this.hnapayForm.bankProvince,
+            bankCity: this.hnapayForm.bankCity,
+            bankBranch: this.hnapayForm.bankBranch,
+            contactPhone: this.hnapayForm.contactPhone
+          }
+          hnapaySave(param).then(res => {
+            console.log(res)
+            if (res.code === '') {
+               _this.currentHnapayId = res.data
+              _this.hnapayEditDisabled = true
+              this.$message({
+                message: '提交成功，请上传企业资料',
+                type: 'success'
+              })
+              _this.showUploadCert()
+            }
+          })
+        }
+      })
+    },
+
+    showUploadCert() {
+      this.frontCardIdBase64 = ""
+      this.afterCardIdBase64 = ""
+      this.certNoBase64 = ""
+      this.permitCertBase64 = ""
+      this.hasUploadFrontCard = false
+      this.hasUploadAfterCard = false
+      this.hasUploadCertNo = false
+      this.hasUploadPermitCert = false
+      this.uploadCertDialog = true
+    },
+
+    onUploadCertCancel() {
+      this.uploadCertDialog = false
+    },
+
+    onUploadCertConfirm() {
+      if (this.hasUploadFrontCard == false){
+        this.$message.warning("请上传身份证正面")
+        return
+      }
+
+      if (this.hasUploadAfterCard == false){
+        this.$message.warning("请上传身份证反面")
+        return
+      }
+
+      if (this.hasUploadCertNo == false){
+        this.$message.warning("请上传营业执照")
+        return
+      }
+
+      if (this.hasUploadPermitCert == false){
+        this.$message.warning("请上传开户许可证")
+        return
+      }
+      this.uploadCertDialog = false
+      this.hnapayStatus = '1'
+      this.$message.success("资料都已上传成功，等待新账通平台审核")
+    },
+
+    handleFrontCardNoChange(file, fileList) {
+      this.frontCardFormData = new FormData();
+      this.frontCardFormData.append('file', file.raw)
+      this.hasUploadFrontCard = false
+      const reader = new FileReader();
+      // 文件读取成功后执行的回调函数
+      reader.onload = (e) => {
+        this.frontCardIdBase64 = e.target.result;
+      };
+
+      // 以Base64形式读取文件
+      reader.readAsDataURL(file.raw);
+    },
+
+    handleAfterCardNoChange(file, fileList) {
+      this.afterCardFormData = new FormData();
+      this.afterCardFormData.append('file', file.raw)
+      this.hasUploadAfterCard = false
+      const reader = new FileReader();
+      // 文件读取成功后执行的回调函数
+      reader.onload = (e) => {
+        this.afterCardIdBase64 = e.target.result;
+      };
+
+      // 以Base64形式读取文件
+      reader.readAsDataURL(file.raw);
+    },
+
+    handleCertNoChange(file, fileList) {
+      this.certNoFormData = new FormData();
+      this.certNoFormData.append('file', file.raw)
+      this.hasUploadCertNo = false
+      const reader = new FileReader();
+      // 文件读取成功后执行的回调函数
+      reader.onload = (e) => {
+        this.afterCardIdBase64 = e.target.result;
+      };
+
+      // 以Base64形式读取文件
+      reader.readAsDataURL(file.raw);
+    },
+
+    handlePermitCertChange(file, fileList) {
+      this.permitCertFormData = new FormData();
+      this.permitCertFormData.append('file', file.raw)
+      this.hasUploadPermitCert = false
+      const reader = new FileReader();
+      // 文件读取成功后执行的回调函数
+      reader.onload = (e) => {
+        this.afterCardIdBase64 = e.target.result;
+      };
+
+      // 以Base64形式读取文件
+      reader.readAsDataURL(file.raw);
+    },
+
+    beforeUpload(file) {
+      let isLt2M = true
+      isLt2M = file.size / 1024 / 1024 < 2
+      if (!isLt2M) {
+        this.$message.error('上传文件大小不能超过 2MB!')
+      }
+      return isLt2M
+    },
+
+    uploadCertInfo(type) {
+      let formData = undefined
+      switch (type) {
+        case 1:
+          formData = this.frontCardFormData;
+          break;
+        case 2:
+          formData = this.afterCardFormData
+          break
+        case 4:
+          formData = this.certNoFormData
+          break
+        case 7:
+          formData = this.permitCertFormData
+          break
+      }
+      formData.append('businessId', this.currentBusinessId)
+      formData.append('shareParId', this.currentHnapayId)
+      formData.append('type', type)
+      uploadCertInfo(formData).then(res => {
+        this.$message.success("上传成功")
+        switch (type) {
+          case 1:
+            this.hasUploadFrontCard = true
+            break;
+          case 2:
+            this.hasUploadAfterCard = true
+            break
+          case 4:
+            this.hasUploadCertNo = true
+            break
+          case 7:
+            this.hasUploadPermitCert = true
+            break
+        }
+        this.hnapayStatus = '1'
+      }).catch(err => {
+        this.$message.error("上传失败")
+      })
+    },
+
+    getHnaPayInfo(){
+      let _this = this;
+      getHnaPayInfo(this.currentBusinessId).then(res => {
+        console.log(res)
+        if (res.code === '') {
+          _this.hnapayForm = res.data
+        }
+      })
     }
   }
 }
@@ -879,4 +1434,39 @@ export default {
 .elspan {
   margin-left: 10px;
 }
+
+</style>
+<style>
+.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: 130px;
+  height: 130px;
+  line-height: 130px;
+  text-align: center;
+}
+.row-content{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+.avatar {
+  width: 130px;
+  height: 130px;
+  display: block;
+}
+.col-content{
+  display: flex;
+  flex-direction: column;
+}
 </style>