ceres-admin-web-v2.0/src/views/business/businessList/index.vue

<!--  -->
<template>
  <div>
    <div class="pending">
      <!-- 搜索 -->
      <div class="formSearch">
        <el-form
          :inline="true"
          :model="formInline"
        >
          <el-form-item label="商家名称">
            <el-input
              v-model="formInline.businessName"
              maxlength="20"
              placeholder="请输入商家名称"
            />
          </el-form-item>
          <el-form-item label="商家编码">
            <el-input
              v-model="formInline.businessCode"
              maxlength="20"
              placeholder="请输入商家编码"
            />
          </el-form-item>
          <el-form-item label="负责人">
            <el-input
              v-model="formInline.chargePersonName"
              maxlength="20"
              placeholder="请输入负责人"
            />
          </el-form-item>
          <el-form-item label="合同状态">
            <el-select
              v-model="formInline.contractState"
              placeholder="请选择"
            >
              <el-option
                label="有效"
                value="1"
              />
              <el-option
                label="无效"
                value="0"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              plain
              @click="onSubmit"
            >查询
            </el-button>
            <el-button
              type="success"
              plain
              @click="addbuss"
            >新建商家
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="tableBox">
        <el-table
          ref="multipleTable"
          :data="tableData"
          border
          :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column
            label="商家名称"
            width="220"
          >
            <template slot-scope="scope">{{ scope.row.businessName }}</template>
          </el-table-column>
          <el-table-column
            prop="businessCode"
            label="商家编码"
          />
          <el-table-column
            prop="businessPhone"
            label="联系电话"
          />
          <el-table-column label="合同状态">
            <template slot-scope="scope">
              <span v-if="scope.row.contractState === 0">无效</span>
              <span v-if="scope.row.contractState === 1">有效</span>
            </template>
          </el-table-column>
          <el-table-column label="支付模式">
            <template slot-scope="scope">
              <span v-if="scope.row.payMode === 0">新生支付</span>
              <span v-if="scope.row.payMode === 1">新账通</span>
              <span v-if="scope.row.payMode === 2">原生微信支付宝</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            show-overflow-tooltip
          />
          <el-table-column
            label="操作"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <div class="btnList">
                <el-button
                  type="text"
                  @click="seeMore(scope.row)"
                >查看
                </el-button>
                <el-button
                  type="text"
                  @click="edit(scope.row)"
                >编辑
                </el-button>
                <el-button
                  v-if="scope.row.state == 1"
                  type="text"
                  @click="del(scope.row)"
                >禁用
                </el-button>
                <el-button
                  v-else
                  type="text"
                  @click="del(scope.row)"
                >启用
                </el-button>
                <el-button
                  type="text"
                  @click="delBusiness(scope.row)"
                >删除
                </el-button>
                <el-button
                  type="text"
                  @click="setShareSetting(scope.row)"
                >设置分账</el-button>
                <el-button
                  type="text"
                  @click="setDomainSetting(scope.row)"
                >设置域名</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="fenye">
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <!-- ******************************************************弹框开始****************************************************** -->
      <!-- 新建商家弹框 -->
      <el-dialog
        :title="
          userState === 0
            ? '新增商家'
            : userState === 1
              ? '修改商家'
              : '查看商家'
        "
        :visible.sync="dialogVisible"
        width="40%"
        center
        :close-on-click-modal="false"
      >
        <div>
          <el-tabs
            v-model="activeName"
            @tab-click="handleClick"
          >
            <el-tab-pane
              label="授权信息"
              name="first"
            >
              <el-form
                ref="ruleFormInfo"
                :model="ruleForm"
                :rules="rulesInfo"
                label-width="120px"
              >
                <el-form-item
                  label="商家名称"
                  prop="businessName"
                >
                  <el-input
                    v-model="ruleForm.businessName"
                    maxlength="20"
                    :disabled="disabled"
                  />
                </el-form-item>
                <el-form-item
                  label="联系电话"
                  prop="businessPhone"
                >
                  <el-input
                    v-if="cpPhoneShow"
                    :value="hidden(ruleForm.businessPhone,3,4)"
                    maxlength="11"
                    :disabled="disabled"
                    @focus="focusPhoneInput"
                  />
                  <el-input
                    v-else
                    ref="phoneCls"
                    v-model="ruleForm.businessPhone"
                    maxlength="11"
                    clearable
                    :disabled="disabled"
                    @change="changePhoneInput"
                  />
                </el-form-item>
                <el-form-item
                  label="商家负责人"
                  prop="chargePersonName"
                >
                  <el-input
                    v-model="ruleForm.chargePersonName"
                    maxlength="20"
                    :disabled="disabled"
                  />
                </el-form-item>
                <el-form-item
                  label="负责人电话"
                  prop="chargePersonPhone"
                >
                  <el-input
                    v-if="cpPhoneShow"
                    :value="hidden(ruleForm.chargePersonPhone,3,4)"
                    maxlength="11"
                    :disabled="disabled"
                    @focus="focuscpPhoneInput"
                  />
                  <el-input
                    v-else
                    ref="cpPhoneCls"
                    v-model="ruleForm.chargePersonPhone"
                    maxlength="11"
                    clearable
                    :disabled="disabled"
                    @change="changecpPhoneInput"
                  />
                </el-form-item>
                <el-form-item
                  label="商家地址"
                  prop="businessAdress"
                >
                  <el-input
                    ref="addressCls"
                    v-model="ruleForm.businessAdress"
                    maxlength="60"
                    :disabled="disabled"
                  />
                  <!-- <div v-else @click="inputAddress">
                    <el-input :value="hidden(ruleForm.businessAdress, 1, 1)" :disabled="disabled" />
                  </div> -->
                </el-form-item>
                <el-form-item
                  label="生效日期"
                  prop="effectiveDate"
                >
                  <el-date-picker
                    v-model="ruleForm.effectiveDate"
                    :disabled="disabled"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="选择日期"
                  />
                </el-form-item>
                <el-form-item
                  label="生效年限"
                  prop="effectiveYear"
                >
                  <el-input
                    v-model="ruleForm.effectiveYear"
                    type="text"
                    :disabled="disabled"
                    placeholder="请输入内容"
                    maxlength="4"
                    class="elipt"
                    style="width: 50%"
                    show-word-limit
                  />
                  <span class="elspan">年</span>
                </el-form-item>
                <el-form-item
                  label="合同状态"
                  prop="contractState"
                >
                  <el-radio-group v-model="ruleForm.contractState">
                    <el-radio
                      :disabled="disabled"
                      :label="1"
                    >有效
                    </el-radio>
                    <el-radio
                      :disabled="disabled"
                      :label="0"
                    >无效
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item
                  label="PC端商城域名"
                  prop="pcDomain"
                >
                  <el-input
                    ref="addressCls"
                    v-model="ruleForm.pcDomain"
                    maxlength="60"
                    :disabled="disabled"
                  />
                </el-form-item>
                <el-form-item
                  label="移动端商城域名"
                  prop="mobileDomain"
                >
                  <el-input
                    ref="addressCls"
                    v-model="ruleForm.mobileDomain"
                    maxlength="60"
                    :disabled="disabled"
                  />
                </el-form-item>
<!--                <el-form-item
                  label="直播间审核"
                  prop="auditLive"
                >
                  <el-radio-group v-model="ruleForm.auditLive">
                    <el-radio
                      :disabled="disabled"
                      :label="1"
                    >开启
                    </el-radio>
                    <el-radio
                      :disabled="disabled"
                      :label="0"
                    >关闭
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item
                  label="直播间商品审核"
                  prop="auditLiveProduct"
                >
                  <el-radio-group v-model="ruleForm.auditLiveProduct">
                    <el-radio
                      :disabled="disabled"
                      :label="1"
                    >开启
                    </el-radio>
                    <el-radio
                      :disabled="disabled"
                      :label="0"
                    >关闭
                    </el-radio>
                  </el-radio-group>
                </el-form-item>-->
              </el-form>
            </el-tab-pane>
            <el-tab-pane
              label="客户信息"
              name="second"
            >
              <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-tab-pane
              label="新账通支付"
              name="third"
            >

              <div style="display: flex;flex-direction: row;margin-bottom: 15px;justify-content: flex-end">
                <el-switch
                  active-text="开启"
                  inactive-text="关闭"
                  :loading="isHnaPayOpenLoading"
                  :disabled="disabled"
                  v-model="hnapayOpen"
                  @change="hnapayOpenChange"
                />
              </div>

              <div style="margin-left: 15px; margin-bottom: 20px" v-if="hnapayOpen">
                <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
                v-if="hnapayOpen"
                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"
            >
              <div style="display: flex;flex-direction: row;margin-bottom: 15px;justify-content: flex-end">
                <el-switch
                  active-text="开启"
                  inactive-text="关闭"
                  :loading="isWxaliPayOpenLoading"
                  :disabled="disabled"
                  v-model="wxaliPayOpen"
                  @change="wxaliPayOpenChange"
                />
              </div>

              <div  v-if="wxaliPayOpen" style="display: flex;flex-direction: column">
                <el-checkbox
                  style="margin-bottom: 20px"
                  v-model="wxPayCanConfig"
                  :disabled="disabled"
                >
                  微信商户配置
                </el-checkbox>

                <el-form
                  v-if="wxPayCanConfig"
                  ref="wxPayForm"
                  :model="wxPayForm"
                  :rules="wxPayRules"
                  label-width="115px"
                >
                  <el-form-item label="小程序appid" prop="appId">
                    <el-input
                      v-model="wxPayForm.appId" placeholder="请输入支付小程序appid" :disabled="disabled"/>
                  </el-form-item>
                  <el-form-item label="App端的appid" prop="appAppId">
                    <el-input
                      v-model="wxPayForm.appAppId" placeholder="请输入支付APP端的appid" :disabled="disabled"/>
                  </el-form-item>
                  <el-form-item label="商户号" prop="mchId">
                    <el-input
                      v-model="wxPayForm.mchId" placeholder="请输入商户号" :disabled="disabled"/>
                  </el-form-item>
                  <el-form-item label="商户秘钥" prop="mchKey">
                    <el-input
                      v-model="wxPayForm.mchKey" placeholder="请输入商户秘钥" :disabled="disabled"/>
                  </el-form-item>
                  <el-form-item label="私钥" prop="secret">
                    <el-input
                      v-model="wxPayForm.secret" placeholder="请输入私钥" :disabled="disabled"/>
                  </el-form-item>
                  <el-form-item label="证书路径" prop="certUrl">
                    <el-input
                      v-model="wxPayForm.certUrl" placeholder="请输入证书路径" :disabled="disabled"/>
                  </el-form-item>
                </el-form>

                <el-button v-if="wxPayCanConfig" style="width: 200px;align-self: center" type="primary" size="small" @click="handleWxPay">提 交</el-button>
              </div>

              <div v-if="wxaliPayOpen" style="display: flex;flex-direction: column;margin-top: 15px">

                <el-checkbox
                  style="margin-bottom: 20px"
                  v-model="aliPayCanConfig"
                  :disabled="disabled"
                >
                  支付宝商户配置
                </el-checkbox>

                <el-form
                  v-if="aliPayCanConfig"
                  ref="aliPayForm"
                  :model="aliPayForm"
                  :rules="aliPayRules"
                  label-width="115px"
                >
                  <el-form-item label="应用appid" prop="appId">
                    <el-input
                      v-model="aliPayForm.appId" placeholder="请输入应用appid" :disabled="disabled"/>
                  </el-form-item>
                  <el-form-item label="应用私钥" prop="privateKey">
                    <el-input
                      v-model="aliPayForm.privateKey" placeholder="请输入应用私钥" :disabled="disabled"/>
                  </el-form-item>
                  <el-form-item label="支付宝公钥" prop="publicKey">
                    <el-input
                      v-model="aliPayForm.publicKey" placeholder="请输入支付宝公钥" :disabled="disabled"/>
                  </el-form-item>
                  <el-form-item label="内容解密key" prop="decryKey">
                    <el-input
                      v-model="aliPayForm.decryKey" placeholder="请输入接口内容解密key" :disabled="disabled"/>
                  </el-form-item>
                  <el-form-item label="网关地址" prop="gatewayUrl">
                    <el-input
                      v-model="aliPayForm.gatewayUrl" placeholder="请输入请求网关地址" :disabled="disabled"/>
                  </el-form-item>
                </el-form>

                <el-button v-if="aliPayCanConfig" style="width: 200px;align-self: center" type="primary" size="small" @click="handleAliPay">提 交</el-button>
              </div>

            </el-tab-pane>
          </el-tabs>
        </div>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="closeFn">取 消</el-button>
          <el-button
            v-if="activeName == 'first'"
            type="primary"
            @click="next"
          >下一步</el-button>
          <el-button
            v-if="activeName == 'second'"
            type="primary"
            @click="addCheck('ruleForm')"
          >确 定</el-button>

          <el-button
            v-if="activeName == 'third' && hnapayOpen"
            type="primary"
            @click="handleSubmitHnapay"
          >提 交</el-button>
        </span>
      </el-dialog>
      <SharesettingDialog
      ref="shareSettingDialog"/>
      <DomainSettingDialog
        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>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import {
  businessListGetAll,
  businessListSave,
  businessListGetById,
  businessListUpdate,
  businessListStart,
  delBusinessById,
  hnapaySave,
  uploadCertInfo,
  getHnaPayInfo,
  changeBusinessPayMode, wxPaySave, aliPaySave, wxPayUpdate, aliPayUpdate, getWxPayInfo, getAliPayInfo
} from '@/api/business'
import SharesettingDialog from '../../../components/Sharesetting';
import DomainSettingDialog from '../../../components/DomainSetting';
import areaJSON from '@/assets/area'
export default {
  components: {SharesettingDialog, DomainSettingDialog},
  data () {
    // 这里存放数据
    return {
      // 新建商家弹框
      dialogVisible: false,
      activeName: 'first',
      formInline: {
        businessName: '', // 商家名称
        businessCode: '', // 商家编码
        chargePersonName: '', // 商家负责人
        contractState: '', // 合同状态 1-有效 0-无效
        page: '1', // 当前页
        pageSize: '10' // 每页记录数
      },
      disabled: false,
      ruleForm: {
        businessName: '', // 商家名称
        chargePersonName: '', // 商家负责人
        chargePersonPhone: '', // 负责人电话
        businessAdress: '', // 地址
        effectiveDate: '', // 生效日期
        effectiveYear: '', // 生效年限
        contractState: 1, // 合同状态 1-有效 0-无效
        auditLive: 1,
        auditLiveProduct: 1,
        businessPhone: '', // 账号
        businessPassword: '', // 密码
        pcDomain: '', //PC端商城域名
        mobileDomain: '' //移动端商城域名
      },

      hnapayForm: {
        name: '', // 企业名称
        enterpriseCode: '', // 营业执照号
        validDate: '', // 执照效期
        bankCard: '', // 银行卡号
        bankCode: '', // 银行简码
        bankProvince: '', // 开户省份
        bankCity: '', // 开户城市
        bankBranch: '', //开户支行
        contactPhone: '' //负责人电话
      },

      wxPayForm: {
        appId: '', // 支付小程序appid
        appAppId: '', // 支付APP端的appid
        mchId: '', // 商户号
        mchKey: '', // 商户秘钥
        secret: '', // 私钥
        certUrl: '', // 证书路径
      },

      aliPayForm: {
        appId: '', // 应用appid
        privateKey: '', // 应用私钥
        publicKey: '', // 支付宝公钥
        decryKey: '', //内容解密key
        gatewayUrl: '', // 请求网关地址
      },

      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' }
        ],
      },

      wxPayRules: {
        appId: [
          { required: true, message: '支付小程序appid不能为空', trigger: 'blur' }
        ],
        appAppId: [
          { required: true, message: '支付APP端的appid不能为空', trigger: 'blur' }
        ],
        mchId: [
          { required: true, message: '商户号不能为空', trigger: 'blur' }
        ],
        mchKey: [
          { required: true, message: '商户秘钥不能为空', trigger: 'blur' }
        ],
        secret: [
          { required: true, message: '私钥不能为空', trigger: 'blur' }
        ],
      },

      aliPayRules: {
        appId: [
          { required: true, message: '应用appid不能为空', trigger: 'blur' }
        ],
        privateKey: [
          { required: true, message: '应用私钥不能为空', trigger: 'blur' }
        ],
        publicKey: [
          { required: true, message: '支付宝公钥不能为空', trigger: 'blur' }
        ],
      },

      showPhone: false,
      showAddress: false,
      userPhone: '',
      showUserPhone: false,
      newAddress: '',
      personPhone: '',

      rulesInfo: {
        effectiveYear: [
          { required: true, message: '请输入生效时限', trigger: 'blur' }
        ],
        businessName: [
          { required: true, message: '请输入商家名称', trigger: 'blur' }
        ],
        chargePersonName: [
          { required: true, message: '请输入商家负责人', trigger: 'blur' }
        ],
        chargePersonPhone: [
          { required: true, message: '请输入负责人电话', trigger: 'blur' },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: '目前只支持中国大陆的手机号码'
          }
        ],
        businessAdress: [
          { required: true, message: '请输入地址', trigger: 'blur' }
        ],
        contractState: [
          {
            required: true,
            message: '请选择合同状态',
            trigger: 'change'
          }
        ],
        auditLive: [
          {
            required: true,
            message: '请选择状态',
            trigger: 'change'
          }
        ],
        auditLiveProduct: [
          {
            required: true,
            message: '请选择状态',
            trigger: 'change'
          }
        ],
        effectiveDate: [
          {
            required: true,
            message: '请选择日期',
            trigger: 'change'
          }
        ]
      },
      rules: {
        businessPhone: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: '目前只支持中国大陆的手机号码'
          }
        ],
        businessPassword: [
          { required: true, message: '请输入密码', trigger: 'blur' },

          {
            pattern: /^[~!@#$%^&*\-+=_.0-9a-zA-Z]{8,16}$/,
            message: '8-16密码数字英文混合'
          }
        ]
      },
      total: 1,
      tableData: [],
      currentPage: 1,
      userState: 1,
      privacyTime: 0,
      cpPhoneShow: 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,
      hnapayOpen: false,
      lastHnaPayOpen: false,//记录切换前的状态（用于失败回退）
      isHnaPayOpenLoading: false,
      wxaliPayOpen: false,
      lastWxaliPayOpen: false,//记录切换前的状态（用于失败回退）
      isWxaliPayOpenLoading: false,
      //商家支付模式
      businessPayMode: '0',
      aliPayCanConfig: false,
      wxPayCanConfig: true,
      wxPayHasSave: false,
      aliPayHasSave: false,
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.getAll(this.formInline)
    this.privacyTime = localStorage.getItem('privacyTime')
    console.log(this.privacyTime)
    this.initArea()
  },
  // 方法集合
  methods: {
    setShareSetting(row) {
      this.$refs.shareSettingDialog.showSetting(2, row.businessId)
    },

    setDomainSetting(row) {
      this.$refs.domainSettingDialog.showSetting(row.businessId, row.pcDomain, row.mobileDomain)
    },

    focusbusinessPhoneInput () {
      this.businessPhoneShow = false
      this.ruleForm.businessPhone = ''
      // 自动获取焦点
      this.$nextTick(() => {
        this.$refs.businessPhoneCls.focus()
      })
    },
    focuscpPhoneInput () {
      this.cpPhoneShow = false
      this.ruleForm.chargePersonPhone = ''
      // 自动获取焦点
      this.$nextTick(() => {
        this.$refs.cpPhoneCls.focus()
      })
    },
    focusPhoneInput () {
      this.showPhone = false
      this.ruleForm.businessPhone = ''
      // 自动获取焦点
      this.$nextTick(() => {
        this.$refs.phoneCls.focus()
      })
    },
    changePhoneInput () {
    },
    changecpPhoneInput () {
    },
    handleSizeChange (val) {
      this.formInline.pageSize = val
      this.getAll(this.formInline)
    },
    handleCurrentChange (val) {
      this.formInline.page = val
      this.getAll(this.formInline)
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    onSubmit () {
      this.getAll(this.formInline)
    },
    // 新建商家
    addbuss () {
      this.userState = 0
      this.disabled = false
      this.hnapayEditDisabled = false
      this.newAddress = ''
      this.personPhone = ''
      this.ruleForm = {
        businessName: '', // 商家名称
        chargePersonName: '', // 商家负责人
        chargePersonPhone: '', // 负责人电话
        businessAdress: '', // 地址
        effectiveDate: '', // 生效日期
        effectiveYear: '', // 生效年限
        contractState: 1, // 合同状态 1-有效 0-无效
        auditLive: 1,
        auditLiveProduct: 1,
        businessPhone: '', // 账号
        businessPassword: '' // 密码
      }
      this.dialogVisible = true
      console.log(this.userState)
    },
    next () {
      this.activeName = 'second'
    },
    closeFn () {
      this.$nextTick(() => {
        this.$refs['ruleForm'].clearValidate()
        this.$refs['ruleFormInfo'].clearValidate()
        this.dialogVisible = false
      })
    },
    // 新建商家确定
    addCheck (ruleForm) {
      this.$refs[ruleForm].validate(valid => {
        if (valid) {
          console.log(this.userState)
          console.log(this.ruleForm)
          if (this.personPhone !== '') {
            this.ruleForm.chargePersonPhone = this.personPhone
          }
          if (this.newAddress !== '') {
            this.ruleForm.businessAdress = this.newAddress
          }
          if (this.userPhone !== '') {
            this.ruleForm.businessPhone = this.userPhone
          }
          if (this.ruleForm.businessName === '') {
            this.$message.error('请输入商家名称')
            return
          }
          if (this.ruleForm.effectiveDate === '') {
            this.$message.error('请输入生效日期')
            return
          }
          if (this.ruleForm.effectiveYear === '') {
            this.$message.error('请输入生效年限')
            return
          }
          if (!this.userState) {
            businessListSave(this.ruleForm).then(res => {
              console.log(res)
              if (res.code === '') {
                this.$message({
                  message: '新增成功',
                  type: 'success'
                })
              }
              this.getAll(this.formInline)
              this.dialogVisible = false
              this.$refs.ruleForm.clearValidate()
            })
          } else {
            businessListUpdate(this.ruleForm).then(res => {
              console.log(res)
              if (res.code === '') {
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
                this.$refs.ruleForm.clearValidate()
              }
              this.getAll(this.formInline)
              this.dialogVisible = false
            })
          }
        } else {
          console.log('error submit!!')
          this.$message.error('请输入完整信息')
          return false
        }
      })
    },
    // 查看
    async seeMore (row) {
      this.showPhone = false
      this.cpPhoneShow = true
      this.businessPhoneShow = true
      const res = await businessListGetById({ businessId: row.businessId })
      console.log(res)
      if (res.code === '') {
        this.disabled = true
        this.userState = 3
        this.hnapayEditDisabled = true
        this.ruleForm = res.data
        this.dialogVisible = true
      }
    },
    // 编辑
    async edit (row) {
      this.currentBusinessId = row.businessId
      this.businessPayMode = row.payMode
      this.hnapayOpen = row.payMode === 1
      this.wxaliPayOpen = row.payMode === 2
      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.getWxPayInfo()
      this.getAliPayInfo()

      this.showPhone = false
      this.personPhone = ''
      this.userState = 1
      this.disabled = false
      this.cpPhoneShow = true
      const res = await businessListGetById({ businessId: row.businessId })
      this.ruleForm = res.data
      this.dialogVisible = true
      console.log(this.ruleForm)
    },
    // 删除
    async del (row) {
      console.log(row)
      if (row.state === 1) {
        const res = await businessListStart({
          businessName: row.businessName,
          state: 0,
          businessId: row.businessId
        })
        if (res.code === '') {
          this.$message({
            message: '停用成功',
            type: 'success'
          })
          this.getAll(this.formInline)
        }
      } else {
        const res = await businessListStart({
          businessName: row.businessName,
          state: 1,
          businessId: row.businessId
        })
        if (res.code === '') {
          this.$message({
            message: '启用成功',
            type: 'success'
          })
          this.getAll(this.formInline)
        }
      }
    },
    delBusiness (row) {
      // todo 判断商家状态
      this.$confirm('此操作将永久删除该商家, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await delBusinessById({
          businessId: row.businessId
        })
        if (res.code === '') {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.getAll(this.formInline)
        }
      }).catch(() => {

      })
    },
    // businessListGetAll
    // 初始化查询所有数据
    async getAll (formInline) {
      const res = await businessListGetAll(formInline)
      this.total = res.data.total
      this.tableData = res.data.list
    },
    // 编辑号码
    inputPhone () {
      this.showPhone = true
      this.personPhone = ''
      this.$nextTick(() => {
        this.$refs.phoneCls.focus()
      })
    },
    // 编辑地址
    inputAddress () {
      this.showAddress = true
      this.newAddress = ''
      this.$nextTick(() => {
        this.$refs.addressCls.focus()
      })
    },
    // 编辑客户信息
    inputUserPhone () {
      this.showUserPhone = true
      this.userPhone = ''
      this.$nextTick(() => {
        this.$refs.userPhoneCls.focus()
      })
    },

    onFinishSetDomain() {
      this.onSubmit()
    },
    // 中间部分
    hidden (str, frontLen, endLen) {
      let endLenData = 0
      if (str.length !== 2) {
        endLenData = endLen
      }
      const len = str.length - frontLen - endLenData
      let xing = ''
      for (let i = 0; i < len; i++) {
        xing += '*'
      }
      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
        }
      })
    },

    getWxPayInfo(){
      let _this = this;
      getWxPayInfo(this.currentBusinessId).then(res => {
        console.log(res)
        if (res.code === '') {
          _this.wxPayForm = res.data
          if (_this.wxPayForm.id){
            console.log('getWxPayInfo-->', _this.wxPayForm)
            _this.wxPayHasSave = true
          }
        }
      })
    },

    getAliPayInfo(){
      let _this = this;
      getAliPayInfo(this.currentBusinessId).then(res => {
        console.log(res)
        if (res.code === '') {
          _this.aliPayForm = res.data
          if (_this.aliPayForm.id){
            _this.aliPayHasSave = true
          }
        }
      })
    },

    async hnapayOpenChange(newVal){
      this.isHnaPayOpenLoading = true;
      this.lastHnaPayOpen = !newVal;
      let param = {
        type: 1,
        businessId: this.currentBusinessId,
        enable: newVal
      }
      const res = await changeBusinessPayMode(param)

      if (res.code === '') {
        this.hnapayOpen = newVal;
        this.wxaliPayOpen = false;
      }else {
        this.hnapayOpen = this.lastHnaPayOpen;
      }
    },

    async wxaliPayOpenChange(newVal){
      this.isWxaliPayOpenLoading = true;
      this.lastWxaliPayOpen = !newVal;
      let param = {
        type: 2,
        businessId: this.currentBusinessId,
        enable: newVal
      }
      const res = await changeBusinessPayMode(param)
      if (res.code === '') {
        this.wxaliPayOpen = newVal;
        this.hnapayOpen = false
      }else {
        this.wxaliPayOpen = this.lastWxaliPayOpen;
      }
    },

    handleWxPay() {
      if (this.wxPayCanConfig) {
        if (this.wxPayHasSave){
          this.handleWxPayUpdate()
        }else {
          this.handleWxPaySave()
        }
      }
    },

    handleAliPay() {
      if (this.aliPayCanConfig){
        if (this.aliPayHasSave){
          this.handleAliPayUpdate()
        }else {
          this.handleAliPaySave()
        }
      }
    },

    handleWxPaySave() {
      let _this = this;
      this.$refs['wxPayForm'].validate((valid) => {
        if (valid) {
          let param = {
            businessId: this.currentBusinessId,
            appId: this.wxPayForm.appId,
            appAppId: this.wxPayForm.appAppId,
            mchId: this.wxPayForm.mchId,
            certUrl: this.wxPayForm.certUrl,
            mchKey: this.wxPayForm.mchKey,
            secret: this.wxPayForm.secret
          }
          wxPaySave(param).then(res => {
            console.log(res)
            if (res.code === '') {
              _this.wxPayHasSave = true
              this.$message({
                message: '提交成功',
                type: 'success'
              })
            }
          })
        }
      })
    },

    handleWxPayUpdate() {
      this.$refs['wxPayForm'].validate((valid) => {
        if (valid) {
          wxPayUpdate(this.wxPayForm).then(res => {
            console.log(res)
            if (res.code === '') {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
            }
          })
        }
      })
    },

    handleAliPaySave() {
      let _this = this;
      this.$refs['aliPayForm'].validate((valid) => {
        if (valid) {
          let param = {
            businessId: this.currentBusinessId,
            appId: this.aliPayForm.appId,
            privateKey: this.aliPayForm.privateKey,
            publicKey: this.aliPayForm.publicKey,
            decryKey: this.aliPayForm.decryKey,
            gatewayUrl: this.aliPayForm.gatewayUrl,
          }
          aliPaySave(param).then(res => {
            console.log(res)
            if (res.code === '') {
              _this.aliPayHasSave = true
              this.$message({
                message: '提交成功',
                type: 'success'
              })
            }
          })
        }
      })
    },

    handleAliPayUpdate() {
      this.$refs['aliPayForm'].validate((valid) => {
        if (valid) {
          aliPayUpdate(this.aliPayForm).then(res => {
            console.log(res)
            if (res.code === '') {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
            }
          })
        }
      })
    },

  }
}
</script>
<style
  lang="scss"
  scoped
>
@import url("../../../styles/elDialog.scss");

.pending {
  padding: 30px;
  background: #FFFFFF;
  border-radius: 10px;
}

.btnList{
  display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
}

.fenye {
  margin-top: 20px;
}

.elipt {
  width: 50%;
}

.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>