jsm-mall-front/src/views/setting/organizationManagement/tenantDetails/index.vue

<template>
  <div class="app-container">
    <el-tabs v-model="step">
      <el-tab-pane label="商户信息" name="first"></el-tab-pane>
      <el-tab-pane label="商城配置信息" name="second"></el-tab-pane>
      <el-tab-pane label="微信配置信息" name="third"></el-tab-pane>
      <el-tab-pane label="结算配置信息" name="four"></el-tab-pane>
      <el-tab-pane label="移动端二维码" name="five"></el-tab-pane>
    </el-tabs>

    <div v-show="step == 'first'">
      <el-card>
        <div slot="header" class="clearfix">
          <span>商户信息</span>
        </div>
        <el-form
          class="my-form"
          ref="step1Form"
          :model="step1Form"
          label-width="130px"
          label-position="right"
          size="mini"
        >
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="商户账号" prop="account">
                <el-input v-model="step1Form.account" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="账户昵称" prop="nickName">
                <el-input v-model="step1Form.nickName" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="小程序名称" prop="appName">
                <el-input v-model="step1Form.appName" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="负责人" prop="chargePerson">
                <el-input v-model="step1Form.chargePerson" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系电话" prop="phone">
                <el-input v-model="step1Form.phone" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="电子邮箱" prop="email">
                <el-input v-model="step1Form.email" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="地址" prop="address">
                <el-input v-model="step1Form.address" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="登录密码" prop="password">
                <el-input v-model="step1Form.password" type="password" disabled>
                  <el-button slot="append" @click="handleReset()">重置密码</el-button>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="打印单名称" prop="billTitle">
                <el-input v-model="step1Form.billTitle" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="到期时间" prop="companyExpireTime">
                <el-date-picker
                  :disabled="!~[2].indexOf(userType)"
                  v-model="step1Form.companyExpireTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期时间"
                >
                </el-date-picker>
                <el-button :disabled="!~[2].indexOf(userType)" type="primary" @click="saveTime()">保存</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="辅材配件权限" prop="moduleMaterialPart">
                <el-radio-group v-model="step1Form.moduleMaterialPart">
                  <el-radio :label="true">开启</el-radio>
                  <el-radio :label="false">禁用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="延保权限" prop="moduleYb">
                <el-radio-group v-model="step1Form.moduleYb">
                  <el-radio :label="true">开启</el-radio>
                  <el-radio :label="false">禁用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="工程维保权限" prop="moduleWb">
                <el-radio-group v-model="step1Form.moduleWb">
                  <el-radio :label="true">开启</el-radio>
                  <el-radio :label="false">禁用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="库存管理方式" prop="joinCode">
                <el-radio-group v-model="step1Form.joinCode">
                  <el-radio label="NO">不管理</el-radio>
                  <el-radio label="NUM">管数量</el-radio>
                  <el-radio label="CODE">管条码</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="租赁业务" prop="moduleZl">
                <el-radio-group v-model="step1Form.moduleZl">
                  <el-radio :label="true">开启</el-radio>
                  <el-radio :label="false">禁用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二手商城" prop="moduleEs">
                <el-radio-group v-model="step1Form.moduleEs">
                  <el-radio :label="true">开启</el-radio>
                  <el-radio :label="false">禁用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否允许到店支付" prop="storePay">
                <el-radio-group v-model="step1Form.storePay">
                  <el-radio :label="true">开启</el-radio>
                  <el-radio :label="false">禁用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="商户属性" prop="companyType">
                <el-radio-group v-model="step1Form.companyType">
                  <el-radio :label="1">销售</el-radio>
                  <el-radio :label="2">售后</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="以旧换新抵扣方式" prop="yjhxDkFlag">
                <el-radio-group v-model="step1Form.yjhxDkFlag">
                  <el-radio :label="1">线上支付抵扣订单货款</el-radio>
                  <el-radio :label="2">仅线上展示旧机价格</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <div style="margin-bottom: 20px">
                小程序底部菜单排序 <span style="color: #fb8c45; margin-left: 20px"> 数字越小越靠前</span>
              </div>
              <el-table
                :data="step1Form.appModuleJson"
                style="width: 50%"
                element-loading-text="Loading"
                border
                fit
                highlight-current-row
                stripe
              >
                <el-table-column prop="" align="center" label="类型">
                  <template slot-scope="scope">
                    {{ typeFilter(scope.row.type) }}
                  </template>
                </el-table-column>
                <el-table-column prop="" align="center" label="名称">
                  <template slot-scope="scope">
                    <el-form-item
                      :prop="'appModuleJson.' + scope.$index + '.name'"
                      :rules="[{ required: true, message: `请输入名称`, trigger: 'blur' }]"
                      label-width="0"
                    >
                      <el-input type="text" v-model="scope.row.name" placeholder="请输入"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column prop="" align="center" label="排序">
                  <template slot-scope="scope">
                    <el-form-item
                      :prop="'appModuleJson.' + scope.$index + '.sort'"
                      :rules="[{ required: true, message: `请输入排序`, trigger: 'blur' }]"
                      label-width="0"
                    >
                      <el-input type="number" v-model="scope.row.sort" placeholder="请输入"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>

    <div v-show="step == 'second'">
      <el-form label-width="100px" label-position="right">
        <el-upload
          class="avatar-uploader"
          :action="baseURL + 'common/upload'"
          :headers="myHeaders"
          :show-file-list="false"
          :on-success="uploadSuccess"
          :before-upload="beforeUpload"
        >
        </el-upload>
        <el-form-item label="主logo" prop="imgUrl">
          <div class="images">
            <div class="main-img">
              <div class="img" v-if="img1_url" @mouseover="img1_hover = true" @mouseout="img1_hover = false">
                <el-image
                  ref="img1"
                  :src="$showImgUrl(img1_url)"
                  :preview-src-list="[$showImgUrl(img1_url)]"
                  style="width: 120px; height: 120px"
                  fit="contain"
                ></el-image>
                <div class="mask" v-show="img1_hover">
                  <i class="el-icon-zoom-in" @click="previewImage('img1')"></i>
                  <i class="el-icon-upload2" @click="uploadImage('img1')"></i>
                  <i class="el-icon-delete" @click="img1_url = ''"></i>
                </div>
              </div>
              <div class="add" v-else @click="uploadImage('img1')">
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </div>
            </div>
            <div class="tmp-img">
              <el-image
                :src="require('@/assets/template/template_1.png')"
                :preview-src-list="[require('@/assets/template/template_1.png')]"
                style="width: 120px; height: 120px; display: block"
                fit="contain"
              ></el-image>
              <div class="tmp">示例图</div>
            </div>
          </div>
          <div class="tips">
            <span>建议尺寸：400*400</span>
          </div>
        </el-form-item>
        <el-form-item label="通用logo" prop="imgUrl">
          <div class="images">
            <div class="main-img">
              <div class="img" v-if="img2_url" @mouseover="img2_hover = true" @mouseout="img2_hover = false">
                <el-image
                  ref="img2"
                  :src="$showImgUrl(img2_url)"
                  :preview-src-list="[$showImgUrl(img2_url)]"
                  style="width: 120px; height: 120px"
                  fit="contain"
                ></el-image>
                <div class="mask" v-show="img2_hover">
                  <i class="el-icon-zoom-in" @click="previewImage('img2')"></i>
                  <i class="el-icon-upload2" @click="uploadImage('img2')"></i>
                  <i class="el-icon-delete" @click="img2_url = ''"></i>
                </div>
              </div>
              <div class="add" v-else @click="uploadImage('img2')">
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </div>
            </div>
            <div class="tmp-img">
              <el-image
                :src="require('@/assets/template/template_2.png')"
                :preview-src-list="[require('@/assets/template/template_2.png')]"
                style="width: 120px; height: 120px; display: block"
                fit="contain"
              ></el-image>
              <div class="tmp">示例图</div>
            </div>
          </div>
          <div class="tips">
            <span>建议尺寸：280*60</span>
          </div>
        </el-form-item>
        <el-form-item label="头像logo" prop="imgUrl">
          <div class="images">
            <div class="main-img">
              <div class="img" v-if="img3_url" @mouseover="img3_hover = true" @mouseout="img3_hover = false">
                <el-image
                  ref="img3"
                  :src="$showImgUrl(img3_url)"
                  :preview-src-list="[$showImgUrl(img3_url)]"
                  style="width: 120px; height: 120px"
                  fit="contain"
                ></el-image>
                <div class="mask" v-show="img3_hover">
                  <i class="el-icon-zoom-in" @click="previewImage('img3')"></i>
                  <i class="el-icon-upload2" @click="uploadImage('img3')"></i>
                  <i class="el-icon-delete" @click="img3_url = ''"></i>
                </div>
              </div>
              <div class="add" v-else @click="uploadImage('img3')">
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </div>
            </div>
            <div class="tmp-img">
              <el-image
                :src="require('@/assets/template/template_3.png')"
                :preview-src-list="[require('@/assets/template/template_3.png')]"
                style="width: 120px; height: 120px; display: block"
                fit="contain"
              ></el-image>
              <div class="tmp">示例图</div>
            </div>
          </div>
          <div class="tips">
            <span>建议尺寸：400*400</span>
          </div>
        </el-form-item>
      </el-form>
    </div>

    <div v-show="step == 'third'">
      <el-card>
        <div slot="header" class="clearfix">
          <span>微信配置信息</span>
        </div>
        <el-form
          class="my-form2"
          ref="step3Form"
          :model="step3Form"
          :rules="step3FormRules"
          label-width="130px"
          size="mini"
        >
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="服务商appId" prop="appId">
                <el-input
                  :disabled="!~[2].indexOf(userType)"
                  v-model="step3Form.appId"
                  autocomplete="off"
                  placeholder="请输入服务商appId"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="服务商商户号" prop="merchantId">
                <el-input
                  :disabled="!~[2].indexOf(userType)"
                  v-model="step3Form.merchantId"
                  autocomplete="off"
                  placeholder="请输入服务商商户号"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="服务商商户密钥" prop="merchantKey">
                <el-input
                  :disabled="!~[2].indexOf(userType)"
                  v-model="step3Form.merchantKey"
                  autocomplete="off"
                  placeholder="请输入服务商商户密钥"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="小程序appid" prop="appletAppid">
                <el-input
                  :disabled="!~[2].indexOf(userType)"
                  v-model="step3Form.appletAppid"
                  autocomplete="off"
                  placeholder="请输入小程序appid"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="小程序密钥" prop="appletSecret">
                <el-input
                  :disabled="!~[2].indexOf(userType)"
                  v-model="step3Form.appletSecret"
                  autocomplete="off"
                  placeholder="请输入小程序密钥"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="子商户号Id" prop="childMerchantId">
                <el-input
                  :disabled="!~[2].indexOf(userType)"
                  v-model="step3Form.childMerchantId"
                  autocomplete="off"
                  placeholder="请输入子商户号Id"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="微信订阅模版" prop="templateId">
                <el-input
                  :disabled="!~[2].indexOf(userType)"
                  v-model="step3Form.templateId"
                  autocomplete="off"
                  placeholder="请输入微信订阅模版"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="公众号appid" prop="pubAppId">
                <el-input
                  :disabled="!~[2].indexOf(userType)"
                  v-model="step3Form.pubAppId"
                  autocomplete="off"
                  placeholder="请输入公众号appid"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="公众号密钥" prop="pubAppSecret">
                <el-input
                  :disabled="!~[2].indexOf(userType)"
                  v-model="step3Form.pubAppSecret"
                  autocomplete="off"
                  placeholder="请输入公众号密钥"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="改派通知" prop="pubTemplateId1">
                <el-input
                  :disabled="!~[2].indexOf(userType)"
                  v-model="step3Form.pubTemplateId1"
                  autocomplete="off"
                  placeholder="请输入工单派工，改派通知"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="发货通知" prop="pubTemplateId2">
                <el-input
                  :disabled="!~[2].indexOf(userType)"
                  v-model="step3Form.pubTemplateId2"
                  autocomplete="off"
                  placeholder="请输入商城订单支付成功提醒发货通知"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="维权订单提醒" prop="pubTemplateId3">
                <el-input
                  :disabled="!~[2].indexOf(userType)"
                  v-model="step3Form.pubTemplateId3"
                  autocomplete="off"
                  placeholder="请输入商城维权订单提醒"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="支付成功通知" prop="pubTemplateId4">
                <el-input
                  :disabled="!~[2].indexOf(userType)"
                  v-model="step3Form.pubTemplateId4"
                  autocomplete="off"
                  placeholder="请输入订单支付成功（含全部销售订单和延保）"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="维保费用申请" prop="pubTemplateId5">
                <el-input
                  :disabled="!~[2].indexOf(userType)"
                  v-model="step3Form.pubTemplateId5"
                  autocomplete="off"
                  placeholder="请输入维保的费用申请"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="安维费用发放通知" prop="pubTemplateId6">
                <el-input
                  :disabled="!~[2].indexOf(userType)"
                  v-model="step3Form.pubTemplateId6"
                  autocomplete="off"
                  placeholder="请输入安维费用发放通知"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="抢单新单通知" prop="pubTemplateId7">
                <el-input
                  :disabled="!~[2].indexOf(userType)"
                  v-model="step3Form.pubTemplateId7"
                  autocomplete="off"
                  placeholder="请输入抢单新单通知"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="配件到货通知" prop="pubTemplateId8">
                <el-input
                  :disabled="!~[2].indexOf(userType)"
                  v-model="step3Form.pubTemplateId8"
                  autocomplete="off"
                  placeholder="请输入配件到货通知"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>

    <div v-show="step == 'four'">
      <el-form ref="step4Form" :model="step4Form" :rules="step4FormRules" label-width="120px" label-position="right">
        <h4>说明：将按照T+N天自动把销售订单“待结算”状态转为“可提现”状态，T为订单支付成功的日期。</h4>
        <h5>自动结算频率</h5>
        <el-form-item label="N等于" prop="dayNum">
          <el-input
            v-model="step4Form.dayNum"
            style="width: 220px; margin-right: 20px"
            autocomplete="off"
            placeholder="请输入天数"
            type="number"
          ></el-input>
          天<span style="color: #ea8000; margin-left: 30px"
            >将在订单支付成功后T+{{ step4Form.dayNum }}天{{ step4Form.hourTime }}执行一次</span
          >
        </el-form-item>
        <el-form-item label="执行时间" prop="hourTime">
          <el-time-picker v-model="step4Form.hourTime" value-format="HH:mm:ss" placeholder="选择执行时间">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="手续费承担方式" prop="isShareTax" class="is-required">
          <el-radio-group v-model="step4Form.isShareTax">
            <el-radio :label="false">商户承担</el-radio>
            <el-radio :label="true">各自承担</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>

    <div v-show="step == 'five'">
      <el-form label-width="100px" label-position="right">
        <el-upload
          class="avatar-uploader"
          :action="baseURL + 'common/upload'"
          :headers="myHeaders"
          :show-file-list="false"
          :on-success="uploadSuccess"
          :before-upload="beforeUpload"
        >
        </el-upload>
        <el-form-item label="小程序" prop="imgUrl">
          <div class="images">
            <div class="main-img">
              <div class="img" v-if="qrcode1_url" @mouseover="qrcode1_hover = true" @mouseout="qrcode1_hover = false">
                <el-image
                  ref="qrcode1"
                  :src="$showImgUrl(qrcode1_url)"
                  :preview-src-list="[$showImgUrl(qrcode1_url)]"
                  style="width: 120px; height: 120px"
                  fit="contain"
                ></el-image>
                <div class="mask" v-show="qrcode1_hover">
                  <i class="el-icon-zoom-in" @click="previewImage('qrcode1')"></i>
                  <i class="el-icon-upload2" @click="uploadImage('qrcode1')"></i>
                  <i class="el-icon-delete" @click="qrcode1_url = ''"></i>
                </div>
              </div>
              <div class="add" v-else @click="uploadImage('qrcode1')">
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </div>
            </div>
          </div>
          <div class="tips">
            <span>建议尺寸：400*400</span>
          </div>
        </el-form-item>
        <el-form-item label="公众号" prop="imgUrl">
          <div class="images">
            <div class="main-img">
              <div class="img" v-if="qrcode2_url" @mouseover="qrcode2_hover = true" @mouseout="qrcode2_hover = false">
                <el-image
                  ref="qrcode2"
                  :src="$showImgUrl(qrcode2_url)"
                  :preview-src-list="[$showImgUrl(qrcode2_url)]"
                  style="width: 120px; height: 120px"
                  fit="contain"
                ></el-image>
                <div class="mask" v-show="qrcode2_hover">
                  <i class="el-icon-zoom-in" @click="previewImage('qrcode2')"></i>
                  <i class="el-icon-upload2" @click="uploadImage('qrcode2')"></i>
                  <i class="el-icon-delete" @click="qrcode2_url = ''"></i>
                </div>
              </div>
              <div class="add" v-else @click="uploadImage('qrcode2')">
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </div>
            </div>
          </div>
          <div class="tips">
            <span>建议尺寸：400*400</span>
          </div>
        </el-form-item>
        <el-form-item label="收款二维码" prop="imgUrl">
          <div class="images">
            <div class="main-img">
              <div class="img" v-if="qrcode3_url" @mouseover="qrcode3_hover = true" @mouseout="qrcode3_hover = false">
                <el-image
                  ref="qrcode3"
                  :src="$showImgUrl(qrcode3_url)"
                  :preview-src-list="[$showImgUrl(qrcode3_url)]"
                  style="width: 120px; height: 120px"
                  fit="contain"
                ></el-image>
                <div class="mask" v-show="qrcode3_hover">
                  <i class="el-icon-zoom-in" @click="previewImage('qrcode3')"></i>
                  <i class="el-icon-upload2" @click="uploadImage('qrcode3')"></i>
                  <i class="el-icon-delete" @click="qrcode3_url = ''"></i>
                </div>
              </div>
              <div class="add" v-else @click="uploadImage('qrcode3')">
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </div>
            </div>
          </div>
          <div class="tips">
            <span>建议尺寸：400*400</span>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="page-footer">
      <div class="footer" :class="classObj">
        <el-button type="primary" @click="submitStep1Form" :loading="formLoading" v-if="step == 'first'">{{
          formLoading ? '保存中 ...' : '保 存'
        }}</el-button>
        <el-button type="primary" @click="submitStep2Form" :loading="formLoading" v-if="step == 'second'">{{
          formLoading ? '保存中 ...' : '保 存'
        }}</el-button>
        <el-button type="primary" @click="submitStep3Form" :loading="formLoading" v-if="step == 'third'">{{
          formLoading ? '保存中 ...' : '保 存'
        }}</el-button>
        <el-button type="primary" @click="submitStep4Form" :loading="formLoading" v-if="step == 'four'">{{
          formLoading ? '保存中 ...' : '保 存'
        }}</el-button>
        <el-button type="primary" @click="submitStep5Form" :loading="formLoading" v-if="step == 'five'">{{
          formLoading ? '保存中 ...' : '保 存'
        }}</el-button>
        <el-popconfirm title="确定关闭吗？" @confirm="goBack" style="margin-left: 10px">
          <el-button slot="reference">关 闭</el-button>
        </el-popconfirm>
      </div>
    </div>

    <!-- 重置密码 -->
    <el-dialog
      title="重置密码"
      :visible.sync="resetFormVisible"
      :show-close="false"
      width="40%"
      :close-on-click-modal="false"
    >
      <el-form ref="resetForm" :model="resetForm" :rules="resetFormRules" label-position="left" label-width="100px">
        <el-form-item label="输入新密码" prop="newPassword">
          <el-input
            v-model="resetForm.newPassword"
            ref="password1"
            autocomplete="off"
            placeholder="请输入新密码"
            :type="passwordType1"
          ></el-input>
          <span class="show-pwd" @click="showPwd(1)">
            <svg-icon :icon-class="passwordType1 === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            v-model="resetForm.confirmPassword"
            ref="password2"
            autocomplete="off"
            placeholder="请再次输入新密码"
            :type="passwordType2"
          ></el-input>
          <span class="show-pwd" @click="showPwd(2)">
            <svg-icon :icon-class="passwordType2 === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelResetForm">取 消</el-button>
        <el-button type="primary" @click="submitResetForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { getDetail, resetPassword, editAccount } from '@/api/merchant'
import request from '@/utils/request'

export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入登录密码'))
      } else if (value.length < 12) {
        callback(new Error('密码长度至少12位'))
      } else if (/[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/.test(value) == false) {
        callback(new Error('密码必须包含数字和字母'))
      } else {
        if (this.resetForm.confirmPassword !== '') {
          this.$refs.resetForm.validateField('confirmPassword')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.resetForm.newPassword) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    }
    return {
      baseURL: process.env.VUE_APP_BASE_API,
      myHeaders: { 'x-token': getToken() },
      id: null,
      companyWechatId: null,
      step: 'first',
      step1Form: {
        account: '', // 账号
        nickName: '', // 用户名
        appName: '', // 小程序名称
        chargePerson: '', // 负责人
        phone: '', // 联系电话
        email: '', // 电子邮箱
        address: '', // 地址
        newPassword: '', // 新密码
        confirmPassword: '', // 确认密码
        companyExpireTime: '',
        moduleMaterialPart: '',
        billTitle: '',
        moduleYb: '',
        moduleWb: '',
        joinCode: '',
        moduleZl: '',
        moduleEs: '',
        storePay: '',
        companyType: 2,
        yjhxDkFlag: '',
        appModuleJson: []
      },

      passwordType1: 'password',
      passwordType2: 'password',

      uploadImageType: null,
      img1_url: '',
      img1_hover: false,
      img2_url: '',
      img2_hover: false,
      img3_url: '',
      img3_hover: false,
      qrcode1_url: '',
      qrcode1_hover: false,
      qrcode2_url: '',
      qrcode2_hover: false,
      qrcode3_url: '',
      qrcode3_hover: false,

      resetFormVisible: false,
      resetForm: {
        newPassword: '', // 新密码
        confirmPassword: '' // 确认密码
      },
      resetFormRules: {
        newPassword: [{ required: true, validator: validatePass, trigger: 'blur' }],
        confirmPassword: [{ required: true, validator: validatePass2, trigger: 'blur' }]
      },

      step3Form: {
        enterpriseId: '',
        listSecret: '',
        listSyncSecret: '',
        appAgentId: '',
        appSecret: '',
        appId: '',
        merchantId: '',
        merchantKey: '',
        appletAppid: '',
        appletSecret: '',
        childMerchantId: '',
        templateId: '',
        pubAppId: '',
        pubAppSecret: '',

        pubTemplateId1: '',
        pubTemplateId2: '',
        pubTemplateId3: '',
        pubTemplateId4: '',
        pubTemplateId5: '',
        pubTemplateId6: '',
        pubTemplateId7: '',
        pubTemplateId8: ''
      },
      step3FormRules: {},
      step4Form: {
        dayNum: '',
        hourTime: '',
        isShareTax: false
      },
      step4FormRules: {
        dayNum: [{ required: true, message: '请输入天数', trigger: 'blur' }],
        hourTime: [{ required: true, message: '请选择执行时间', trigger: 'change' }]
      },

      formLoading: false
    }
  },
  computed: {
    sidebar() {
      return this.$store.state.app.sidebar
    },
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened
      }
    },
    userType() {
      return JSON.parse(localStorage.getItem('greemall_user')).type
    },
    typeFilter() {
      return function (type) {
        let obj = {
          home: '首页',
          order: '工单',
          shop: '商城',
          my: '我的'
        }
        return obj[type]
      }
    }
  },
  created() {
    const { id, type } = this.$route.query
    this.id = id
    this.getDetail()

    if (type === 1) {
      this.step = 'first'
    } else if (type === 2) {
      this.step = 'second'
    } else if (type === 3) {
      this.step = 'third'
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },

    // 获取详情
    getDetail() {
      getDetail({ adminUserId: this.id }).then(res => {
        this.step1Form.account = res.data.userName
        this.step1Form.nickName = res.data.nickName
        this.step1Form.appName = res.data.minAppName
        this.step1Form.chargePerson = res.data.linkName
        this.step1Form.phone = res.data.linkPhone
        this.step1Form.email = res.data.email
        this.step1Form.address = res.data.address
        this.step1Form.password = '************'
        this.step1Form.companyExpireTime = res.data.companyExpireTime
        this.step1Form.moduleMaterialPart = res.data.moduleMaterialPart
        this.step1Form.billTitle = res.data.billTitle
        this.step1Form.moduleYb = res.data.moduleYb
        this.step1Form.moduleWb = res.data.moduleWb
        this.step1Form.joinCode = res.data.joinCode
        this.step1Form.moduleZl = res.data.moduleZl
        this.step1Form.moduleEs = res.data.moduleEs
        this.step1Form.storePay = res.data.storePay
        this.step1Form.companyType = res.data.companyType
        this.step1Form.yjhxDkFlag = res.data.yjhxDkFlag
        this.step1Form.appModuleJson = JSON.parse(res.data.appModuleJson)

        this.img1_url = res.data.minLogo1
        this.img2_url = res.data.minLogo2
        this.img3_url = res.data.minLogo3
        this.qrcode1_url = res.data.qrcode1
        this.qrcode2_url = res.data.qrcode2
        this.qrcode3_url = res.data.payQrcode

        this.step3Form.enterpriseId = res.data.corpId
        this.step3Form.listSecret = res.data.secret2
        this.step3Form.listSyncSecret = res.data.secret3
        this.step3Form.appAgentId = res.data.agentId1
        this.step3Form.appSecret = res.data.secret1
        this.step3Form.appId = res.data.appId
        this.step3Form.merchantId = res.data.mchId
        this.step3Form.merchantKey = res.data.mchKey
        this.step3Form.appletAppid = res.data.appletAppid
        this.step3Form.appletSecret = res.data.appletSecret
        this.step3Form.childMerchantId = res.data.subMchId
        this.step3Form.templateId = res.data.template
        this.step3Form.pubAppId = res.data.pubAppId
        this.step3Form.pubAppSecret = res.data.pubAppSecret

        this.step3Form.pubTemplateId1 = res.data.pubTemplateId1
        this.step3Form.pubTemplateId2 = res.data.pubTemplateId2
        this.step3Form.pubTemplateId3 = res.data.pubTemplateId3
        this.step3Form.pubTemplateId4 = res.data.pubTemplateId4
        this.step3Form.pubTemplateId5 = res.data.pubTemplateId5
        this.step3Form.pubTemplateId6 = res.data.pubTemplateId6
        this.step3Form.pubTemplateId7 = res.data.pubTemplateId7
        this.step3Form.pubTemplateId8 = res.data.pubTemplateId8

        this.companyWechatId = res.data.companyWechatId

        this.step4Form.dayNum = res.data.dayNum
        this.step4Form.hourTime = res.data.hourTime
        this.step4Form.isShareTax = res.data.isShareTax
      })
    },

    // 重置密码
    handleReset(id) {
      this.resetId = id
      this.resetFormVisible = true
    },

    // 取消重置密码
    cancelResetForm() {
      this.resetFormVisible = false
      this.passwordType1 = 'password'
      this.passwordType2 = 'password'
      this.$refs.resetForm.resetFields()
    },

    saveTime() {
      request({
        url: '/admin/user/user/updateCompanyWechat',
        method: 'post',
        data: {
          expireTime: this.step1Form.companyExpireTime,
          companyWechatId: this.companyWechatId
        }
      }).then(res => {
        if (res.code == 200) {
          this.$successMsg('保存成功')
          this.getDetail()
        }
      })
    },

    // 提交重置密码
    submitResetForm() {
      this.$refs.resetForm.validate(valid => {
        if (valid) {
          let params = {
            password: this.resetForm.newPassword,
            adminUserId: this.id
          }
          resetPassword(params).then(res => {
            this.cancelResetForm()
            this.getDetail()
            this.$successMsg()
          })
        }
      })
    },

    // 显示隐藏密码
    showPwd(num) {
      if (num == 1) {
        if (this.passwordType1 === 'password') {
          this.passwordType1 = ''
        } else {
          this.passwordType1 = 'password'
        }
        this.$nextTick(() => {
          this.$refs.password1.focus()
        })
      }
      if (num == 2) {
        if (this.passwordType2 === 'password') {
          this.passwordType2 = ''
        } else {
          this.passwordType2 = 'password'
        }
        this.$nextTick(() => {
          this.$refs.password2.focus()
        })
      }
    },

    uploadImage(type) {
      this.uploadImageType = type
      document.querySelector('.avatar-uploader input').click()
    },

    // 上传图片
    uploadSuccess(res, file) {
      this[this.uploadImageType + '_url'] = res.data.url
    },

    beforeUpload(file) {
      const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1)
      const whiteList = ['jpg', 'jpeg', 'png']
      if (whiteList.indexOf(fileSuffix) === -1) {
        this.$errorMsg('只支持上传jpg/jpeg/png文件!')
        return false
      }
    },

    // 预览图片
    previewImage(type) {
      this.$refs[type].showViewer = true
    },

    submitStep1Form() {
      this.$refs.step1Form.validate(valid => {
        if (valid) {
          this.formLoading = true
          let params = {
            // adminUserId: this.id,
            companyWechatId: this.companyWechatId,
            moduleMaterialPart: this.step1Form.moduleMaterialPart,
            billTitle: this.step1Form.billTitle,
            moduleYb: this.step1Form.moduleYb,
            moduleWb: this.step1Form.moduleWb,
            joinCode: this.step1Form.joinCode,
            moduleZl: this.step1Form.moduleZl,
            moduleEs: this.step1Form.moduleEs,
            storePay: this.step1Form.storePay,
            companyType: this.step1Form.companyType,
            yjhxDkFlag: this.step1Form.yjhxDkFlag,
            appModuleJson: JSON.stringify(this.step1Form.appModuleJson)
          }
          editAccount(params)
            .then(res => {
              this.$successMsg('保存成功')
              setTimeout(() => {
                this.goBack()
              }, 1500)
            })
            .finally(res => {
              this.formLoading = false
            })
        }
      })
    },

    submitStep2Form() {
      if (!this.img1_url) {
        return this.$errorMsg('请上传主logo')
      }
      if (!this.img2_url) {
        return this.$errorMsg('请上传通用logo')
      }
      if (!this.img3_url) {
        return this.$errorMsg('请上传头像logo')
      }
      this.formLoading = true
      let params = {
        adminUserId: this.id,
        minLogo1: this.img1_url,
        minLogo2: this.img2_url,
        minLogo3: this.img3_url,
        companyWechatId: this.companyWechatId
      }
      editAccount(params)
        .then(res => {
          this.$successMsg('保存成功')
          setTimeout(() => {
            this.goBack()
          }, 1500)
        })
        .finally(res => {
          this.formLoading = false
        })
    },

    submitStep3Form() {
      this.$refs.step3Form.validate(valid => {
        if (valid) {
          this.formLoading = true

          let params = {
            adminUserId: this.id,
            corpId: this.step3Form.enterpriseId,
            secret2: this.step3Form.listSecret,
            secret3: this.step3Form.listSyncSecret,
            agentId1: this.step3Form.appAgentId,
            secret1: this.step3Form.appSecret,
            appId: this.step3Form.appId,
            mchId: this.step3Form.merchantId,
            mchKey: this.step3Form.merchantKey,
            appletAppid: this.step3Form.appletAppid,
            appletSecret: this.step3Form.appletSecret,
            subMchId: this.step3Form.childMerchantId,
            template: this.step3Form.templateId,
            pubAppId: this.step3Form.pubAppId,
            pubAppSecret: this.step3Form.pubAppSecret,

            pubTemplateId1: this.step3Form.pubTemplateId1,
            pubTemplateId2: this.step3Form.pubTemplateId2,
            pubTemplateId3: this.step3Form.pubTemplateId3,
            pubTemplateId4: this.step3Form.pubTemplateId4,
            pubTemplateId5: this.step3Form.pubTemplateId5,
            pubTemplateId6: this.step3Form.pubTemplateId6,
            pubTemplateId7: this.step3Form.pubTemplateId7,
            pubTemplateId8: this.step3Form.pubTemplateId8,

            companyWechatId: this.companyWechatId
          }
          editAccount(params)
            .then(res => {
              this.$successMsg('保存成功')
              setTimeout(() => {
                this.goBack()
              }, 1500)
            })
            .finally(res => {
              this.formLoading = false
            })
        }
      })
    },

    submitStep4Form() {
      this.$refs.step4Form.validate(valid => {
        if (valid) {
          this.formLoading = true

          let params = {
            adminUserId: this.id,
            companyWechatId: this.companyWechatId,
            dayNum: this.step4Form.dayNum,
            hourTime: this.step4Form.hourTime,
            isShareTax: this.step4Form.isShareTax
          }
          editAccount(params)
            .then(res => {
              this.$successMsg('保存成功')
              setTimeout(() => {
                this.goBack()
              }, 1500)
            })
            .finally(res => {
              this.formLoading = false
            })
        }
      })
    },
    submitStep5Form() {
      // if (!this.qrcode1_url) {
      //   return this.$errorMsg('请上传小程序图片');
      // }
      if (!this.qrcode2_url) {
        return this.$errorMsg('请上传公众号图片')
      }
      // if (!this.qrcode3_url) {
      //   return this.$errorMsg('请上传收款二维码图片');
      // }
      this.formLoading = true
      let params = {
        adminUserId: this.id,
        qrcode1: this.qrcode1_url,
        qrcode2: this.qrcode2_url,
        payQrcode: this.qrcode3_url,
        companyWechatId: this.companyWechatId
      }
      editAccount(params)
        .then(res => {
          this.$successMsg('保存成功')
          setTimeout(() => {
            this.goBack()
          }, 1500)
        })
        .finally(res => {
          this.formLoading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.setting_title {
  padding-left: 0;
}

.tips {
  font-size: 14px;
}

.my-card {
  margin-top: 20px;

  .box {
    background: rgb(235, 240, 249);
    padding: 10px;
    font-size: 14px;
    margin: 20px 0;
    line-height: 18px;

    ::v-deep .el-link {
      vertical-align: unset;
    }
  }
}

.my-form {
  width: 100%;
  margin-top: 20px;
}

.show-pwd {
  position: absolute;
  right: 15px;
  top: 0;
  font-size: 16px;
  cursor: pointer;
  user-select: none;
}

.question {
  position: absolute;
  right: -30px;
  top: 0;
  font-size: 20px;
  cursor: pointer;
  user-select: none;
}

.reset {
  position: absolute;
  right: -110px;
  top: 0;
}

.my-form2 {
  ::v-deep input {
    // width: 400px;
  }
}

.tips {
  margin-top: 10px;

  span {
    display: inline-block;
    width: 300px;
    text-align: center;
    line-height: 32px;
    background: #ffefef;
    font-size: 14px;
    color: #f66460;
  }
}

.images {
  display: flex;
  flex-wrap: wrap;

  .main-img {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 120px;
    margin-right: 20px;

    .img {
      border: 1px dashed #eaeaea;
      border-radius: 5px;
      overflow: hidden;
      position: relative;

      .el-image {
        display: block;
      }

      .mask {
        position: absolute;
        left: 0;
        top: 0;
        width: 120px;
        height: 120px;
        background: rgba($color: #000000, $alpha: 0.3);
        display: flex;
        align-items: center;
        justify-content: center;

        i {
          font-size: 20px;
          color: #ffffff;
          cursor: pointer;
          margin: 0 8px;
        }
      }
    }

    .text {
      font-size: 14px;
      color: #666666;
    }
  }

  .add {
    width: 120px;
    height: 120px;
    border: 1px dashed #eaeaea;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;

    i {
      font-size: 30px;
      color: #999;
    }
  }

  .tmp-img {
    position: relative;

    .tmp {
      position: absolute;
      left: 0;
      top: 0;
      line-height: 20px;
      padding: 0 8px;
      background: #f66460;
      border-radius: 0 0 10px 0;
      font-size: 12px;
      color: #ffffff;
    }
  }
}
</style>