初始化

src/api/merchant.js

@@ -0,0 +1,69 @@
+
+import request from "@/utils/request";
+
+export function getList(params) {
+  return request({
+    url: '/admin/user/mch/list',
+    method: 'get',
+    params
+  })
+}
+
+export function addAccount(params) {
+  return request({
+    url: '/admin/user/addCompanyWechat',
+    method: 'post',
+    data: params
+  })
+}
+
+export function getDetail(params) {
+  return request({
+    url: '/admin/user/detail',
+    method: 'get',
+    params
+  })
+}
+
+export function resetPassword(params) {
+  return request({
+    url: '/admin/user/password/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 更改账户状态
+export function changeAccountStatus(params) {
+  return request({
+    url: '/admin/user/status/update',
+    method: 'post',
+    params
+  })
+}
+
+export function editAccount(params) {
+  return request({
+    url: '/admin/user/user/updateCompanyWechat',
+    method: 'post',
+    data: params
+  })
+}
+
+// 获取模版信息
+export function getTemplate(params) {
+  return request({
+    url: '/admin/company/template/detail',
+    method: 'get',
+    params
+  })
+}
+
+// 更改模版信息
+export function editTemplate(params) {
+  return request({
+    url: '/admin/company/template/updateCompanyWithTemplate',
+    method: 'post',
+    data: params
+  })
+}

src/layout/components/Navbar.vue

@@ -16,7 +16,7 @@
 
       <el-badge :value="noticeCount" :max="10" :hidden="!noticeVisible" class="right-menu-item hover-effect">
         <el-tooltip effect="dark" content="系统消息" placement="bottom">
-          <i class="el-icon-message-solid" @click="goNotice" style="font-size: 24px; line-height: 50px;"></i>
+<!--          <i class="el-icon-message-solid" @click="goNotice" style="font-size: 24px; line-height: 50px;"></i>-->
         </el-tooltip>
         <!-- <el-button icon="el-icon-message-solid" type="text" class="notice-icon" @click="goNotice"></el-button> -->
       </el-badge>

src/views/merchant/create_account.vue

@@ -0,0 +1,648 @@
+<template>
+  <div class="app-container">
+    <div v-show="step == 1">
+      <div class="setting_title">开通账号</div>
+      <el-divider></el-divider>
+      <div class="tips">说明：开通商户账号是指开通商城后台管理系统的总登录账号。</div>
+
+      <el-card shadow="never" class="my-card">
+        <el-form class="my-form" ref="step1Form" :model="step1Form" :rules="step1FormRules" label-width="100px" label-position="right">
+          <el-form-item label="商户账号" prop="account">
+            <el-input v-model="step1Form.account" autocomplete="off" placeholder="请输入商户账号"></el-input>
+            <el-popover
+              class="question"
+              placement="right-start"
+              title="账号设置"
+              width="260"
+              trigger="hover"
+              content="账号设置需按数字、字母组合设置至少12位账号">
+              <svg-icon icon-class="question" slot="reference" />
+            </el-popover>
+          </el-form-item>
+          <el-form-item label="账户昵称" prop="nickName">
+            <el-input v-model="step1Form.nickName" autocomplete="off" placeholder="请输入账户昵称"></el-input>
+          </el-form-item>
+          <el-form-item label="小程序名称" prop="appName">
+            <el-input v-model="step1Form.appName" autocomplete="off" placeholder="请输入小程序名称"></el-input>
+          </el-form-item>
+          <el-form-item label="负责人" prop="chargePerson">
+            <el-input v-model="step1Form.chargePerson" autocomplete="off" placeholder="请输入负责人"></el-input>
+          </el-form-item>
+          <el-form-item label="联系电话" prop="phone">
+            <el-input v-model="step1Form.phone" autocomplete="off" placeholder="请输入联系电话"></el-input>
+          </el-form-item>
+          <el-form-item label="电子邮箱" prop="email">
+            <el-input v-model="step1Form.email" autocomplete="off" placeholder="请输入电子邮箱"></el-input>
+          </el-form-item>
+          <el-form-item label="地址" prop="address">
+            <el-input v-model="step1Form.address" autocomplete="off" placeholder="请输入地址"></el-input>
+          </el-form-item>
+          <el-form-item label="登录密码" prop="newPassword">
+            <el-input v-model="step1Form.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-popover
+              class="question"
+              placement="right-start"
+              title="密码设置"
+              width="260"
+              trigger="hover"
+              content="密码设置需按数字、字母组合设置至少12位密码">
+              <svg-icon icon-class="question" slot="reference" />
+            </el-popover>
+          </el-form-item>
+          <el-form-item label="确认密码" prop="confirmPassword">
+            <el-input v-model="step1Form.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-popover
+              class="question"
+              placement="right-start"
+              title="密码设置"
+              width="260"
+              trigger="hover"
+              content="确认密码需要和登录密码保持一致">
+              <svg-icon icon-class="question" slot="reference" />
+            </el-popover>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </div>
+
+    <div v-show="step == 2">
+      <div class="setting_title">商城配置</div>
+      <el-divider></el-divider>
+      <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="img1_url" :preview-src-list="[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>
+                </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="img2_url" :preview-src-list="[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>
+                </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="img3_url" :preview-src-list="[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>
+                </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 == 3">
+      <div class="setting_title">企微配置</div>
+      <el-divider></el-divider>
+      <div class="tips">说明：企微配置是指通过配置企业微信将企微用户和系统打通，实现企业微信用户信息同平台互通，聊天会话信息同步</div>
+      <div class="tips" style="margin-top: 20px">商户名称：{{step1Form.nickName}}</div>
+
+      <el-form class="my-form2" ref="step3Form" :model="step3Form" :rules="step3FormRules" label-width="200px" label-position="right">
+        <el-card shadow="never" class="my-card">
+          <div class="title">1.配置企业ID</div>
+          <div class="box">指引：进入<el-link type="primary" :underline="false" href="https://element.eleme.io" target="_blank">企业微信</el-link>打开【我的企业】，将企业ID分别复制并填写到下方输入框中</div>
+          <el-form-item label="企业ID" prop="enterpriseId">
+            <el-input v-model="step3Form.enterpriseId" autocomplete="off" placeholder="请输入企业ID"></el-input>
+          </el-form-item>
+        </el-card>
+
+        <el-card shadow="never" class="my-card">
+          <div class="title">2.配置通讯录密钥（Secret）</div>
+          <div class="box">进入<el-link type="primary" :underline="false" href="https://element.eleme.io" target="_blank">企业微信</el-link>打开【客户联系】-选择【客户】-展开右侧【API】。将外部联系人Secret复制并填写到下方输入框中。如果外部联系人Secret不更新，请将更新后的外部联系人Secret更新复制更新到下方输入框中。</div>
+          <el-form-item label="通讯录密钥（Secret）" prop="listSecret">
+            <el-input v-model="step3Form.listSecret" autocomplete="off" placeholder="请输入通讯录密钥（Secret）"></el-input>
+          </el-form-item>
+          <el-divider></el-divider>
+          <div class="title">配置通讯录同步密钥（Secret）</div>
+          <div class="box">进入<el-link type="primary" :underline="false" href="https://element.eleme.io" target="_blank">企业微信</el-link>打开【管理工具】-选择【通讯录同步】-获取通讯录同步Secret。将通讯录同步Secret复制并填写到下方输入框中。如果通讯录同步Secret不更新，请将更新后的通讯录同步Secret更新复制更新到下方输入框中。</div>
+          <el-form-item label="通讯录同步密钥（Secret）" prop="listSyncSecret">
+            <el-input v-model="step3Form.listSyncSecret" autocomplete="off" placeholder="请输入通讯录同步密钥（Secret）"></el-input>
+          </el-form-item>
+        </el-card>
+
+        <el-card shadow="never" class="my-card">
+          <div class="title">3.配置小程序</div>
+          <div class="box">进入<el-link type="primary" :underline="false" href="https://element.eleme.io" target="_blank">企业微信</el-link>打开【应用管理】-选择【应用】-选择【小程序】-获取小程序AgentiD、小程序Secret。将小程序AgentiD、小程序Secret复制并填写到下方输入框中。</div>
+          <el-form-item label="小程序（AgentiD）" prop="appAgentId">
+            <el-input v-model="step3Form.appAgentId" autocomplete="off" placeholder="请输入小程序（AgentiD）"></el-input>
+          </el-form-item>
+          <el-form-item label="小程序（Secret）" prop="appSecret">
+            <el-input v-model="step3Form.appSecret" autocomplete="off" placeholder="请输入小程序（Secret）"></el-input>
+          </el-form-item>
+        </el-card>
+
+        <el-card shadow="never" class="my-card">
+          <div class="title" style="margin-bottom: 20px;">4.其他基础配置</div>
+          <el-form-item label="小程序appId" prop="appId">
+            <el-input v-model="step3Form.appId" autocomplete="off" placeholder="请输入小程序appId"></el-input>
+          </el-form-item>
+          <el-form-item label="商户号Id" prop="merchantId">
+            <el-input v-model="step3Form.merchantId" autocomplete="off" placeholder="请输入商户号Id"></el-input>
+          </el-form-item>
+          <el-form-item label="商户号Key" prop="merchantKey">
+            <el-input v-model="step3Form.merchantKey" autocomplete="off" placeholder="请输入商户号Key"></el-input>
+          </el-form-item>
+          <el-form-item label="子appId" prop="childAppId">
+            <el-input v-model="step3Form.childAppId" autocomplete="off" placeholder="请输入子appId"></el-input>
+          </el-form-item>
+          <el-form-item label="子密钥" prop="childKey">
+            <el-input v-model="step3Form.childKey" autocomplete="off" placeholder="请输入子密钥"></el-input>
+          </el-form-item>
+          <el-form-item label="子商户号Id" prop="childMerchantId">
+            <el-input v-model="step3Form.childMerchantId" autocomplete="off" placeholder="请输入子商户号Id"></el-input>
+          </el-form-item>
+          <el-form-item label="微信订阅模版" prop="templateId">
+            <el-input v-model="step3Form.templateId" autocomplete="off" placeholder="请输入微信订阅模版"></el-input>
+          </el-form-item>
+        </el-card>
+      </el-form>
+    </div>
+
+    <div class="page-footer">
+      <div class="footer" :class="classObj">
+        <el-button @click="changeStep(0)" v-show="step > 1">上一步</el-button>
+        <el-button @click="changeStep(1)" v-show="step < 3">下一步</el-button>
+        <el-button type="primary" @click="clickSubmitForm" :loading="formLoading">{{ formLoading ? '提交中 ...' : '提 交' }}</el-button>
+        <el-popconfirm
+          title="确定关闭吗？"
+          @onConfirm="goBack"
+          style="margin-left: 10px;"
+        >
+          <el-button slot="reference">关 闭</el-button>
+        </el-popconfirm>
+      </div>
+    </div>
+    
+  </div>
+</template>
+
+<script>
+import { getToken } from '@/utils/auth'
+import { addAccount } from "@/api/merchant";
+
+export default {
+  data() {
+    var validateAccount = (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 {
+        callback();
+      }
+    };
+    var validatePass3 = (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.step1Form.confirmPassword !== '') {
+          this.$refs.step1Form.validateField('confirmPassword');
+        }
+        callback();
+      }
+    };
+    var validatePass4 = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请再次输入密码'));
+      } else if (value !== this.step1Form.newPassword) {
+        callback(new Error('两次输入密码不一致'));
+      } else {
+        callback();
+      }
+    };
+    return {
+      baseURL: process.env.VUE_APP_BASE_API,
+      myHeaders: {'x-token': getToken()},
+      step: 1,
+      step1Form: {
+        account: '', // 账号
+        nickName: '', // 用户名
+        appName: '', // 小程序名称
+        chargePerson: '', // 负责人
+        phone: '', // 联系电话
+        email: '', // 电子邮箱
+        address: '', // 地址
+        newPassword: '', // 登录密码
+        confirmPassword: '', // 确认密码
+      },
+      step1FormRules: {
+        account: [
+          { required: true, validator: validateAccount, trigger: 'blur' }
+        ],
+        nickName: [
+          { required: true, message: '请输入用户名', trigger: 'blur' }
+        ],
+        appName: [
+          { required: true, message: '请输入用户名', trigger: 'blur' }
+        ],
+        chargePerson: [
+          { required: true, message: '请输入负责人', trigger: 'blur' }
+        ],
+        phone: [
+          { required: true, message: '请输入联系电话', trigger: 'blur' }
+        ],
+        newPassword: [
+          { required: true, validator: validatePass3, trigger: 'blur' }
+        ],
+        confirmPassword: [
+          { required: true, validator: validatePass4, trigger: 'blur' }
+        ],
+      },
+      passwordType1: 'password',
+      passwordType2: 'password',
+
+      uploadImageType: null,
+      img1_url: '',
+      img1_hover: false,
+      img2_url: '',
+      img2_hover: false,
+      img3_url: '',
+      img3_hover: false,
+
+      step3Form: {
+        enterpriseId: '',
+        listSecret: '',
+        listSyncSecret: '',
+        appAgentId: '',
+        appSecret: '',
+        appId: '',
+        merchantId: '',
+        merchantKey: '',
+        childAppId: '',
+        childKey: '',
+        childMerchantId: '',
+        templateId: '',
+      },
+      step3FormRules: {
+        enterpriseId: [
+          { required: true, message: '请输入企业ID', trigger: 'blur' }
+        ],
+        listSecret: [
+          { required: true, message: '请输入通讯录密钥（Secret）', trigger: 'blur' }
+        ],
+        listSyncSecret: [
+          { required: true, message: '请输入通讯录同步密钥（Secret）', trigger: 'blur' }
+        ],
+        appAgentId: [
+          { required: true, message: '请输入小程序（AgentiD）', trigger: 'blur' }
+        ],
+        appSecret: [
+          { required: true, message: '请输入小程序（Secret）', trigger: 'blur' }
+        ],
+      },
+      formLoading: false,
+    }
+  },
+  computed: {
+    sidebar() {
+      return this.$store.state.app.sidebar
+    },
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened
+      }
+    },
+  },
+  methods: {
+    goBack() {
+      this.$router.go(-1);
+    },
+
+    // 显示隐藏密码
+    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()
+        })
+      }
+    },
+
+    // 下一步
+    nextStep() {
+      this.$refs.step1Form.validate((valid) => {
+        if (valid) {
+          this.step = 2;
+        }
+      })
+    },
+
+    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;
+    },
+
+    // 切换步骤
+    changeStep(type) {
+      if(type == 1) {
+        this.step ++;
+      }else {
+        this.step --;
+      }
+    },
+
+    // 点击 提交表单
+    clickSubmitForm() {
+      // 验证第一步
+      this.$refs.step1Form.validate((valid) => {
+        if (valid) {
+          // 验证第二步
+          if(this.img1_url && this.img2_url && this.img3_url) {
+            // 验证第三步
+            this.$refs.step3Form.validate((valid) => {
+              if (valid) {
+                this.submitForm();
+              }else {
+                this.step = 3;
+              }
+            })
+          }else {
+            this.$errorMsg('请完善商城配置');
+            this.step = 2;
+          }
+        }else {
+          this.step = 1;
+        }
+      })
+    },
+
+    // 提交表单
+    submitForm() {
+      this.$refs.step3Form.validate((valid) => {
+        if (valid) {
+          this.formLoading = true;
+          let params = {
+            type: 1,
+            userName: this.step1Form.account,
+            nickName: this.step1Form.nickName,
+            minAppName: this.step1Form.appName,
+            linkName: this.step1Form.chargePerson,
+            linkPhone: this.step1Form.phone,
+            email: this.step1Form.email,
+            address: this.step1Form.address,
+            password: this.step1Form.confirmPassword,
+
+            minLogo1: this.img1_url,
+            minLogo2: this.img2_url,
+            minLogo3: this.img3_url,
+
+            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,
+            subAppId: this.step3Form.childAppId,
+            subSecret: this.step3Form.childKey,
+            subMchId: this.step3Form.childMerchantId,
+            template: this.step3Form.templateId,
+          }
+          addAccount(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: 450px;
+    margin: 0 auto;
+  }
+  .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;
+  }
+  .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>

src/views/merchant/mall_set.vue

@@ -0,0 +1,597 @@
+<template>
+  <div class="app-container">
+    <div v-if="!isAdmin">
+      <el-tabs v-model="step">
+        <el-tab-pane label="首页模版配置" name="first"></el-tab-pane>
+        <el-tab-pane label="商城logo配置" name="second"></el-tab-pane>
+      </el-tabs>
+
+      <div v-show="step == 'first'">
+        <el-form label-width="120px" label-position="right">
+          <el-form-item label="选择模版：" style="margin-bottom: 40px">
+            <el-radio-group v-model="currentTemplate" @change="changeTemplate()">
+              <div class="item">
+                <el-radio :label="1">模版一</el-radio>
+                <el-image :src="require('@/assets/template/tmp_1_thumb.png')" :preview-src-list="[require('@/assets/template/tmp_1.png')]" fit="cover"></el-image>
+              </div>
+              <div class="item">
+                <el-radio :label="2">模版二</el-radio>
+                <el-image :src="require('@/assets/template/tmp_2_thumb.png')" :preview-src-list="[require('@/assets/template/tmp_2.png')]" fit="cover"></el-image>
+              </div>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="首页模块设置：" v-show="currentTemplate === 1">
+            <div class="diy-table">
+              <div class="item head">
+                <div class="label">模块名称</div> 
+                <div class="value">状态</div>
+              </div>
+              <div class="item">
+                <div class="label">分类</div>
+                <div class="value">
+                  <el-switch v-model="switch_classify" disabled></el-switch>
+                  <span :class="switch_classify ? 'on':''">{{switch_classify ? '开启':'隐藏'}}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">轮播图</div>
+                <div class="value">
+                  <el-switch v-model="switch_banner"></el-switch>
+                  <span :class="switch_banner ? 'on':''">{{switch_banner ? '开启':'隐藏'}}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">公告</div>
+                <div class="value">
+                  <el-switch v-model="switch_notice"></el-switch>
+                  <span :class="switch_notice ? 'on':''">{{switch_notice ? '开启':'隐藏'}}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">专属优惠券</div>
+                <div class="value">
+                  <el-switch v-model="switch_coupon"></el-switch>
+                  <span :class="switch_coupon ? 'on':''">{{switch_coupon ? '开启':'隐藏'}}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">客户经理</div>
+                <div class="value">
+                  <el-switch v-model="switch_manager"></el-switch>
+                  <span :class="switch_manager ? 'on':''">{{switch_manager ? '开启':'隐藏'}}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">秒杀专区</div>
+                <div class="value">
+                  <el-switch v-model="switch_seckill"></el-switch>
+                  <span :class="switch_seckill ? 'on':''">{{switch_seckill ? '开启':'隐藏'}}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">好物推荐</div>
+                <div class="value">
+                  <el-switch v-model="switch_recom" disabled></el-switch>
+                  <span :class="switch_recom ? 'on':''">{{switch_recom ? '开启':'隐藏'}}</span>
+                </div>
+              </div>
+            </div>
+          </el-form-item>
+          <el-form-item label="首页模块设置：" v-show="currentTemplate === 2">
+            <div class="diy-table">
+              <div class="item head">
+                <div class="label">模块名称</div> 
+                <div class="value">状态</div>
+              </div>
+              <div class="item">
+                <div class="label">首页弹窗</div>
+                <div class="value">
+                  <el-switch v-model="switch_dialog"></el-switch>
+                  <span :class="switch_dialog ? 'on':''">{{switch_dialog ? '开启':'隐藏'}}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">轮播图</div>
+                <div class="value">
+                  <el-switch v-model="switch_banner"></el-switch>
+                  <span :class="switch_banner ? 'on':''">{{switch_banner ? '开启':'隐藏'}}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">活动专区1</div>
+                <div class="value">
+                  <el-switch v-model="switch_activity1"></el-switch>
+                  <span :class="switch_activity1 ? 'on':''">{{switch_activity1 ? '开启':'隐藏'}}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">分类</div>
+                <div class="value">
+                  <el-switch v-model="switch_classify" disabled></el-switch>
+                  <span :class="switch_classify ? 'on':''">{{switch_classify ? '开启':'隐藏'}}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">活动专区2</div>
+                <div class="value">
+                  <el-switch v-model="switch_activity2"></el-switch>
+                  <span :class="switch_activity2 ? 'on':''">{{switch_activity2 ? '开启':'隐藏'}}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">专场专区</div>
+                <div class="value">
+                  <el-switch v-model="switch_special"></el-switch>
+                  <span :class="switch_special ? 'on':''">{{switch_special ? '开启':'隐藏'}}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">秒杀专区</div>
+                <div class="value">
+                  <el-switch v-model="switch_seckill"></el-switch>
+                  <span :class="switch_seckill ? 'on':''">{{switch_seckill ? '开启':'隐藏'}}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">专属优惠券</div>
+                <div class="value">
+                  <el-switch v-model="switch_coupon"></el-switch>
+                  <span :class="switch_coupon ? 'on':''">{{switch_coupon ? '开启':'隐藏'}}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">客户经理</div>
+                <div class="value">
+                  <el-switch v-model="switch_manager"></el-switch>
+                  <span :class="switch_manager ? 'on':''">{{switch_manager ? '开启':'隐藏'}}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">公告</div>
+                <div class="value">
+                  <el-switch v-model="switch_notice"></el-switch>
+                  <span :class="switch_notice ? 'on':''">{{switch_notice ? '开启':'隐藏'}}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">新维度分类专区</div>
+                <div class="value">
+                  <el-switch v-model="switch_newclassify" disabled></el-switch>
+                  <span :class="switch_newclassify ? 'on':''">{{switch_newclassify ? '开启':'隐藏'}}</span>
+                </div>
+              </div>
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <div v-show="step == 'second'">
+        <el-form label-width="120px" 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="img1_url" :preview-src-list="[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>
+                  </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="img2_url" :preview-src-list="[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>
+                  </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="img3_url" :preview-src-list="[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>
+                  </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 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>
+        </div>
+      </div>
+    </div>
+
+    <div v-else>
+      <div class="nodata">超级管理员无法进行商城配置</div>
+    </div>
+    
+  </div>
+</template>
+
+<script>
+import { getToken, getUserid } from '@/utils/auth';
+import { getTemplate, editAccount, editTemplate, getDetail } from "@/api/merchant";
+import { findElem } from '@/utils/util';
+import { getInfo } from '@/api/user'
+
+export default {
+  data() {
+    return {
+      isAdmin: JSON.parse(localStorage.getItem("greemall_user")).type === 2,
+      baseURL: process.env.VUE_APP_BASE_API,
+      myHeaders: {'x-token': getToken()},
+      step: 'first',
+      companyId: JSON.parse(localStorage.getItem("greemall_user")).companyWechatId,
+      currentTemplate: JSON.parse(localStorage.getItem("greemall_user")).useTemplate,
+
+      switch_dialog: true,
+      switch_banner: true,
+      switch_activity1: true,
+      switch_classify: true,
+      switch_activity2: true,
+      switch_special: true,
+      switch_seckill: true,
+      switch_coupon: true,
+      switch_manager: true,
+      switch_notice: true,
+      switch_newclassify: true,
+      switch_recom: true,
+
+      templateList: [],
+
+      uploadImageType: null,
+      img1_url: '',
+      img1_hover: false,
+      img2_url: '',
+      img2_hover: false,
+      img3_url: '',
+      img3_hover: false,
+
+      formLoading: false
+    }
+  },
+  computed: {
+    sidebar() {
+      return this.$store.state.app.sidebar
+    },
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened
+      }
+    },
+  },
+
+  created() {
+    if(this.isAdmin) return false;
+    this.getTemplate();
+  },
+
+  watch: {
+    step() {
+      if(this.step === 'first') {
+        this.getTemplate();
+      }else {
+        this.getLogoDetail();
+      }
+    }
+  },
+
+  methods: {
+    // 获取模版列表
+    getTemplate() {
+      getTemplate({
+        companyId: this.companyId
+      }).then(res => {
+        this.templateList = res.data;
+        this.initHome();
+      })
+    },
+
+    // 切换模版
+    changeTemplate() {
+      this.initHome();
+    },
+
+    // 初始化配置
+    initHome() {
+      let index = findElem(this.templateList, 'templateType', this.currentTemplate);
+      this.switch_dialog = this.templateList[index].popupStatus;
+      this.switch_banner = this.templateList[index].carouseStatus;
+      this.switch_activity1 = this.templateList[index].active1Status;
+      this.switch_classify = this.templateList[index].categoryStatus;
+      this.switch_activity2 = this.templateList[index].active2Status;
+      this.switch_special = this.templateList[index].onlyStatus;
+      this.switch_seckill = this.templateList[index].killStatus;
+      this.switch_coupon = this.templateList[index].couponStatus;
+      this.switch_manager = this.templateList[index].customerStatus;
+      this.switch_notice = this.templateList[index].notiveStatus;
+      this.switch_newclassify = this.templateList[index].newsStatus;
+      this.switch_recom = this.templateList[index].okStatus;
+    },
+    
+    // 保存首页配置
+    submitStep1Form() {
+      let index = findElem(this.templateList, 'templateType', this.currentTemplate);
+      let params = {
+        companyWechatId: this.companyId,
+        useTemplate: this.currentTemplate,
+        companyWechatTemplatesList: [{
+          companyWechatTemplateId: this.templateList[index].companyWechatTemplateId,
+          templateType: this.templateList[index].templateType,
+          popupStatus: this.switch_dialog,
+          carouseStatus: this.switch_banner,
+          active1Status: this.switch_activity1,
+          categoryStatus: this.switch_classify,
+          active2Status: this.switch_activity2,
+          onlyStatus: this.switch_special,
+          killStatus: this.switch_seckill,
+          couponStatus: this.switch_coupon,
+          customerStatus: this.switch_manager,
+          notiveStatus: this.switch_notice,
+          newsStatus: this.switch_newclassify,
+          okStatus: this.switch_recom,
+        }],
+      }
+      this.formLoading = true;
+      editTemplate(params).then(res => {
+        this.getTemplate();
+        this.$successMsg('保存成功');
+        getInfo(getUserid()).then(response => {
+          localStorage.setItem("greemall_user", JSON.stringify(response.data));
+        })
+      }).finally(res => {
+        this.formLoading = false;
+      })
+    },
+
+    // 获取logo信息
+    getLogoDetail() {
+      getDetail({adminUserId: getUserid()}).then(res => {
+        this.img1_url = res.data.minLogo1;
+        this.img2_url = res.data.minLogo2;
+        this.img3_url = res.data.minLogo3;
+      })
+    },
+
+    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;
+    },
+
+    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 = {
+        companyWechatId: this.companyId,
+        mainLog: this.img1_url,
+        commonLog: this.img2_url,
+        minLogo: this.img3_url,
+      }
+      editTemplate(params).then(res => {
+        this.getLogoDetail();
+        this.$successMsg('保存成功');
+      }).finally(res => {
+        this.formLoading = false;
+      })
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  ::v-deep .el-radio-group {
+    display: flex;
+    .item {
+      margin-right: 20px;
+      .el-radio {
+        height: 40px;
+        line-height: 40px;
+      }
+      .el-image {
+        width: 120px;
+        height: 200px;
+        display: block;
+      }
+    }
+  }
+  .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;
+      }
+    }
+  }
+  .tips {
+    margin-top: 10px;
+    span {
+      display: inline-block;
+      width: 300px;
+      text-align: center;
+      line-height: 32px;
+      background: #ffefef;
+      font-size: 14px;
+      color: #f66460;
+    }
+  }
+  .diy-table {
+    width: 400px;
+    .item {
+      display: flex;
+      border: 1px solid #eaeaea;
+      border-bottom: none;
+      &.head {
+        font-weight: bold;
+      }
+      &:last-child {
+        border-bottom: 1px solid #eaeaea;
+      }
+      >div {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .label {
+        border-right: 1px solid #eaeaea;
+      }
+      .value {
+        span {
+          margin-left: 10px;
+          color: #666666;
+          &.on {
+            color: #409EFF;
+          }
+        }
+      }
+    }
+  }
+  .nodata {
+    font-size: 18px;
+    color: #666666;
+  }
+</style>

src/views/merchant/merchant_detail.vue

@@ -0,0 +1,672 @@
+<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-tabs>
+
+    <div v-show="step == 'first'">
+      <el-form class="my-form" ref="step1Form" :model="step1Form" label-width="100px" label-position="right">
+        <el-form-item label="商户账号" prop="account">
+          <el-input v-model="step1Form.account" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="账户昵称" prop="nickName">
+          <el-input v-model="step1Form.nickName" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="小程序名称" prop="appName">
+          <el-input v-model="step1Form.appName" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="负责人" prop="chargePerson">
+          <el-input v-model="step1Form.chargePerson" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="联系电话" prop="phone">
+          <el-input v-model="step1Form.phone" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="电子邮箱" prop="email">
+          <el-input v-model="step1Form.email" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="地址" prop="address">
+          <el-input v-model="step1Form.address" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="登录密码" prop="password">
+          <el-input v-model="step1Form.password" type="password" disabled></el-input>
+          <el-button class="reset" @click="handleReset()">重置密码</el-button>
+        </el-form-item>
+        <!-- <el-form-item class="tr">
+          <el-button type="primary" @click="submitStep1Form">保存</el-button>
+        </el-form-item> -->
+      </el-form>
+    </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="img1_url" :preview-src-list="[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>
+                </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="img2_url" :preview-src-list="[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>
+                </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="img3_url" :preview-src-list="[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>
+                </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'">
+      <div class="tips">说明：企微配置是指通过配置企业微信将企微用户和系统打通，实现企业微信用户信息同平台互通，聊天会话信息同步</div>
+
+      <el-form class="my-form2" ref="step3Form" :model="step3Form" :rules="step3FormRules" label-width="200px" label-position="right">
+        <el-card shadow="never" class="my-card">
+          <div class="title">1.配置企业ID</div>
+          <div class="box">指引：进入<el-link type="primary" :underline="false" href="https://element.eleme.io" target="_blank">企业微信</el-link>打开【我的企业】，将企业ID分别复制并填写到下方输入框中</div>
+          <el-form-item label="企业ID" prop="enterpriseId">
+            <el-input v-model="step3Form.enterpriseId" autocomplete="off" placeholder="请输入企业ID"></el-input>
+          </el-form-item>
+        </el-card>
+
+        <el-card shadow="never" class="my-card">
+          <div class="title">2.配置通讯录密钥（Secret）</div>
+          <div class="box">进入<el-link type="primary" :underline="false" href="https://element.eleme.io" target="_blank">企业微信</el-link>打开【客户联系】-选择【客户】-展开右侧【API】。将外部联系人Secret复制并填写到下方输入框中。如果外部联系人Secret不更新，请将更新后的外部联系人Secret更新复制更新到下方输入框中。</div>
+          <el-form-item label="通讯录密钥（Secret）" prop="listSecret">
+            <el-input v-model="step3Form.listSecret" autocomplete="off" placeholder="请输入通讯录密钥（Secret）"></el-input>
+          </el-form-item>
+          <el-divider></el-divider>
+          <div class="title">配置通讯录同步密钥（Secret）</div>
+          <div class="box">进入<el-link type="primary" :underline="false" href="https://element.eleme.io" target="_blank">企业微信</el-link>打开【管理工具】-选择【通讯录同步】-获取通讯录同步Secret。将通讯录同步Secret复制并填写到下方输入框中。如果通讯录同步Secret不更新，请将更新后的通讯录同步Secret更新复制更新到下方输入框中。</div>
+          <el-form-item label="通讯录同步密钥（Secret）" prop="listSyncSecret">
+            <el-input v-model="step3Form.listSyncSecret" autocomplete="off" placeholder="请输入通讯录同步密钥（Secret）"></el-input>
+          </el-form-item>
+        </el-card>
+
+        <el-card shadow="never" class="my-card">
+          <div class="title">3.配置小程序</div>
+          <div class="box">进入<el-link type="primary" :underline="false" href="https://element.eleme.io" target="_blank">企业微信</el-link>打开【应用管理】-选择【应用】-选择【小程序】-获取小程序AgentiD、小程序Secret。将小程序AgentiD、小程序Secret复制并填写到下方输入框中。</div>
+          <el-form-item label="小程序（AgentiD）" prop="appAgentId">
+            <el-input v-model="step3Form.appAgentId" autocomplete="off" placeholder="请输入小程序（AgentiD）"></el-input>
+          </el-form-item>
+          <el-form-item label="小程序（Secret）" prop="appSecret">
+            <el-input v-model="step3Form.appSecret" autocomplete="off" placeholder="请输入小程序（Secret）"></el-input>
+          </el-form-item>
+        </el-card>
+
+        <el-card shadow="never" class="my-card">
+          <div class="title" style="margin-bottom: 20px;">4.其他基础配置</div>
+          <el-form-item label="小程序appId" prop="appId">
+            <el-input v-model="step3Form.appId" autocomplete="off" placeholder="请输入小程序appId"></el-input>
+          </el-form-item>
+          <el-form-item label="商户号Id" prop="merchantId">
+            <el-input v-model="step3Form.merchantId" autocomplete="off" placeholder="请输入商户号Id"></el-input>
+          </el-form-item>
+          <el-form-item label="商户号Key" prop="merchantKey">
+            <el-input v-model="step3Form.merchantKey" autocomplete="off" placeholder="请输入商户号Key"></el-input>
+          </el-form-item>
+          <el-form-item label="子appId" prop="childAppId">
+            <el-input v-model="step3Form.childAppId" autocomplete="off" placeholder="请输入子appId"></el-input>
+          </el-form-item>
+          <el-form-item label="子密钥" prop="childKey">
+            <el-input v-model="step3Form.childKey" autocomplete="off" placeholder="请输入子密钥"></el-input>
+          </el-form-item>
+          <el-form-item label="子商户号Id" prop="childMerchantId">
+            <el-input v-model="step3Form.childMerchantId" autocomplete="off" placeholder="请输入子商户号Id"></el-input>
+          </el-form-item>
+          <el-form-item label="微信订阅模版" prop="templateId">
+            <el-input v-model="step3Form.templateId" autocomplete="off" placeholder="请输入微信订阅模版"></el-input>
+          </el-form-item>
+        </el-card>
+      </el-form>
+    </div>
+
+    <div class="page-footer">
+      <div class="footer" :class="classObj">
+        <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-popconfirm
+          title="确定关闭吗？"
+          @onConfirm="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";
+
+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: '', // 确认密码
+      },
+
+      passwordType1: 'password',
+      passwordType2: 'password',
+
+      uploadImageType: null,
+      img1_url: '',
+      img1_hover: false,
+      img2_url: '',
+      img2_hover: false,
+      img3_url: '',
+      img3_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: '',
+        childAppId: '',
+        childKey: '',
+        childMerchantId: '',
+        templateId: '',
+      },
+      step3FormRules: {
+        enterpriseId: [
+          { required: true, message: '请输入企业ID', trigger: 'blur' }
+        ],
+        listSecret: [
+          { required: true, message: '请输入通讯录密钥（Secret）', trigger: 'blur' }
+        ],
+        listSyncSecret: [
+          { required: true, message: '请输入通讯录同步密钥（Secret）', trigger: 'blur' }
+        ],
+        appAgentId: [
+          { required: true, message: '请输入小程序（AgentiD）', trigger: 'blur' }
+        ],
+        appSecret: [
+          { required: true, message: '请输入小程序（Secret）', trigger: 'blur' }
+        ],
+      },
+
+      formLoading: false,
+    }
+  },
+  computed: {
+    sidebar() {
+      return this.$store.state.app.sidebar
+    },
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened
+      }
+    },
+  },
+  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.img1_url = res.data.minLogo1;
+        this.img2_url = res.data.minLogo2;
+        this.img3_url = res.data.minLogo3;
+
+        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.childAppId = res.data.subAppId;
+        this.step3Form.childKey = res.data.subSecret;
+        this.step3Form.childMerchantId = res.data.subMchId;
+        this.step3Form.templateId = res.data.template;
+        this.companyWechatId = res.data.companyWechatId;
+      })
+    },
+
+    // 重置密码
+    handleReset(id) {
+      this.resetId = id;
+      this.resetFormVisible = true;
+    },
+
+    // 取消重置密码
+    cancelResetForm(){
+      this.resetFormVisible = false;
+      this.passwordType1 = 'password';
+      this.passwordType2 = 'password';
+      this.$refs.resetForm.resetFields();
+    },
+
+    // 提交重置密码
+    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;
+    },
+
+
+    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,
+            subAppId: this.step3Form.childAppId,
+            subSecret: this.step3Form.childKey,
+            subMchId: this.step3Form.childMerchantId,
+            template: this.step3Form.templateId,
+            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: 450px;
+    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>

src/views/merchant/merchant_list.vue

@@ -0,0 +1,244 @@
+<template>
+  <div class="app-container">
+    <!-- 筛选条件 -->
+    <div class="screen-container">
+      <div class="top clearfix">
+        <div class="title fl">条件筛选</div>
+      </div>
+      <el-form ref="screenForm" :model="screenForm" label-width="70px" size="small" label-position="left">
+        <el-row :gutter="20">
+          <el-col :xs="24" :sm="12" :lg="6">
+            <el-form-item label="商户账号" prop="account">
+              <el-input v-model="screenForm.account" placeholder="请输入商户账号"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :lg="6">
+            <el-form-item label="商户昵称" prop="nickname">
+              <el-input v-model="screenForm.nickname" placeholder="请输入商户昵称"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :lg="6">
+            <el-form-item label="联系电话" prop="phone">
+              <el-input v-model="screenForm.phone" placeholder="请输入联系电话"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :lg="6">
+            <el-form-item label="电子邮箱" prop="email">
+              <el-input v-model="screenForm.email" placeholder="请输入电子邮箱"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :lg="6">
+            <el-form-item label="状态" prop="state">
+              <el-select v-model="screenForm.status" placeholder="全部">
+                <el-option label="全部" value=""></el-option>
+                <el-option :label="item.label" :value="item.value" v-for="(item, index) in select_status" :key="index"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          
+          <el-col :xs="24" :sm="12" :lg="18" class="tr">
+            <el-form-item label="">
+              <el-button size="small" @click="resetScreenForm">清空</el-button>
+              <el-button size="small" type="primary" @click="submitScreenForm">搜索</el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+
+    <div class="mymain-container">
+      <div class="btn-group clearfix">
+        <div class="fl">
+          <el-button size="small" type="primary" @click="toCreate()">开通账号</el-button>
+        </div>
+        <div class="fr">
+          <el-button size="small" type="primary" icon="el-icon-download" @click="handleExport">导出数据</el-button>
+        </div>
+      </div>
+      <div class="table">
+        <el-table v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe>
+          <el-table-column align="center" label="操作" width="230" fixed="right">
+            <template slot-scope="scope">
+              <el-button type="text" @click="toDetail(scope.row.adminUserId, 1)">详情</el-button>
+              <el-button type="text" @click="toDetail(scope.row.adminUserId, 2)">商城配置</el-button>
+              <el-button type="text" @click="toDetail(scope.row.adminUserId, 3)">企微配置</el-button>
+              <template v-if="checkBtnRole('status')">
+                <el-popconfirm v-if="scope.row.status" style="margin-left: 10px;" title="确定冻结吗？" @onConfirm="changeStatus(scope.row.adminUserId, 0)" >
+                  <el-button slot="reference" type="text">冻结</el-button>
+                </el-popconfirm>
+                <el-popconfirm v-else style="margin-left: 10px;" title="确定恢复吗？" @onConfirm="changeStatus(scope.row.adminUserId, 1)" >
+                  <el-button slot="reference" type="text">恢复</el-button>
+                </el-popconfirm>
+              </template>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="商户账号" prop="userName" min-width="100" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <el-button type="text" @click="toAccountList(scope.row)">查看</el-button>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="商户昵称" prop="companyName" min-width="160" show-overflow-tooltip></el-table-column>
+          <el-table-column align="center" label="负责人" prop="linkName" min-width="100" show-overflow-tooltip></el-table-column>
+          <el-table-column align="center" label="角色" prop="roleName" min-width="160" show-overflow-tooltip></el-table-column>
+          <el-table-column align="center" label="联系电话" prop="linkPhone" min-width="160" show-overflow-tooltip></el-table-column>
+          <el-table-column align="center" label="电子邮箱" prop="email" min-width="160" show-overflow-tooltip></el-table-column>
+          <el-table-column align="center" label="地址" prop="address" min-width="200" show-overflow-tooltip></el-table-column>
+          <el-table-column align="center" label="状态" class-name="status-col">
+            <template slot-scope="scope">
+              <el-tag :type="scope.row.status ? 'success':'danger'">{{ scope.row.status ? '正常':'冻结' }}</el-tag>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <div class="pagination clearfix">
+      <div class="fr">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          :page-sizes="[10, 20, 30, 50]"
+          :page-size="10"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="listTotal">
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { COMMON_SELECT } from '@/utils/select_data'
+import {getList, changeAccountStatus} from "@/api/merchant";
+import {downloadFiles} from '@/utils/util'
+
+export default {
+  data() {
+    return {
+      isOpen: false, // 是否展开条件筛选
+      currentPage: 1, // 当前页码
+      pageSize: 10, // 每页数量
+      listTotal: 0, // 列表总数
+      dataList: null, // 列表数据
+      listLoading: false, // 列表加载loading
+      screenForm: { // 筛选表单数据
+        account: '',
+        nickname: '',
+        phone: '',
+        email: '',
+        status: '',
+      },
+      select_status: [ // 筛选字段 - 状态
+        { label: '正常', value: true },
+        { label: '冻结', value: false }
+      ],
+    }
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    // 查询按钮权限
+    checkBtnRole(value) {
+      // let btnRole = this.$route.meta.roles;
+      // if(!btnRole) {return true}
+      // let index = btnRole.indexOf(value);
+      // return index >= 0;
+      return true
+    },
+
+    // 查询列表
+    getList() {
+      this.listLoading = true;
+
+      let params = {
+        pageNum: this.currentPage,
+        pageSize: this.pageSize,
+        userName: this.screenForm.account,
+        nickName: this.screenForm.nickName,
+        linkPhone: this.screenForm.phone,
+        email: this.screenForm.email,
+        status: this.screenForm.status,
+      };
+      getList(params).then((res) => {
+        this.dataList = res.data.records;
+        this.listTotal = res.data.total;
+        this.listLoading = false;
+      })
+    },
+    // 提交筛选表单
+    submitScreenForm() {
+      this.currentPage = 1;
+      this.getList();
+    },
+    // 重置筛选表单
+    resetScreenForm() {
+      this.$refs.screenForm.resetFields();
+      this.currentPage = 1;
+      this.getList();
+    },
+    // 更改每页数量
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.currentPage = 1;
+      this.getList();
+    },
+    // 更改当前页
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.getList();
+    },
+
+    // 去开通账号
+    toCreate() {
+      this.$router.push({
+        path: '/merchant/create_account',
+        query: {}
+      })
+    },
+
+    toAccountList() {
+      this.$router.push({
+        path: '/setting/account',
+        query: {
+          type: 1
+        }
+      })
+    },
+
+    toDetail(id, type) {
+      this.$router.push({
+        path: '/merchant/merchant_detail',
+        query: {
+          id, type
+        }
+      })
+    },
+
+    // 操作 - 更改状态(type: 禁用0，启用1)
+    changeStatus(id, type) {
+      type = type ? true : false
+      changeAccountStatus({adminUserId: id, status: type}).then(res => {
+        this.getList();
+        this.$successMsg();
+      })
+    },
+
+    // 导出
+    handleExport() {
+      let screenData = {
+        userName: this.screenForm.account,
+        nickName: this.screenForm.nickName,
+        linkPhone: this.screenForm.phone,
+        email: this.screenForm.email,
+        status: this.screenForm.status,
+      };
+      downloadFiles('admin/user/mch/export', screenData);
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/setting/banner.vue

@@ -1,439 +0,0 @@
-<template>
-  <div class="app-container">
-    <div class="setting_title">轮播图管理</div>
-    <el-divider></el-divider>
-
-    <div class="mymain-container">
-      <div class="btn-group clearfix">
-        <div class="fl">
-          <el-button size="small" type="primary" icon="el-icon-plus" @click="addOrEdit('add')" v-if="checkBtnRole('add')">新增轮播图</el-button>
-        </div>
-        <div class="fr">
-          <el-select v-model="screenForm.state" placeholder="全部" size="small" style="width: 100px; margin-right: 10px;" @change="getListByScreen">
-            <el-option label="全部状态" value=""></el-option>
-            <el-option v-for="(item, index) in select_state" :key="index" :label="item.label" :value="item.value"></el-option>
-          </el-select>
-          <el-button size="small" type="primary" icon="el-icon-plus" @click="batchDelete()" v-if="checkBtnRole('batchDel')">批量删除</el-button>
-        </div>
-      </div>
-
-      <div class="table">
-        <el-table ref="multipleTable" v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe>
-          <el-table-column type="selection" width="55" align="center"></el-table-column>
-          <el-table-column align="center" label="操作" min-width="140">
-            <template slot-scope="scope">
-              <template v-if="checkBtnRole('status')">
-                <el-popconfirm v-if="scope.row.state" title="确定隐藏吗？" @onConfirm="changeStatus(scope.row.id, 0)" >
-                  <el-button slot="reference" type="text">隐藏</el-button>
-                </el-popconfirm>
-                <el-popconfirm v-else title="确定显示吗？" @onConfirm="changeStatus(scope.row.id, 1)" >
-                  <el-button slot="reference" type="text">显示</el-button>
-                </el-popconfirm>
-              </template>
-              <el-button type="text" style="margin-left: 10px;" @click="addOrEdit('edit', scope.row.id)" v-if="checkBtnRole('edit')">编辑</el-button>
-              <el-popconfirm style="margin-left: 10px;" title="确定删除吗？" @onConfirm="handleDelete(scope.row.id)" v-if="checkBtnRole('del')">
-                <el-button slot="reference" type="text">删除</el-button>
-              </el-popconfirm>
-            </template>
-          </el-table-column>
-          <el-table-column align="center" label="轮播图名称" prop="carouselName" min-width="140"></el-table-column>
-          <el-table-column align="center" label="排序" prop="sortNum"></el-table-column>
-          <el-table-column align="center" label="创建人" prop="adminNickName" min-width="160"></el-table-column>
-          <el-table-column align="center" label="创建时间" prop="createTime" min-width="160"></el-table-column>
-          <el-table-column align="center" label="状态" class-name="status-col">
-            <template slot-scope="scope">
-              <el-tag :type="scope.row.state ? 'success':'danger'">{{ scope.row.state ? '显示':'隐藏' }}</el-tag>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-
-      <div class="pagination clearfix">
-        <div class="fr">
-          <el-pagination
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-            :current-page="currentPage"
-            :page-sizes="[10, 20, 30, 50]"
-            :page-size="10"
-            layout="total, sizes, prev, pager, next, jumper"
-            :total="listTotal">
-          </el-pagination>
-        </div>
-      </div>
-    </div>
-
-    <!-- 新增编辑 -->
-    <el-dialog :title="addFormType === 'add' ? '新增轮播图':'编辑轮播图'" :visible.sync="addFormVisible" :show-close="false" width="50%" :close-on-click-modal="false">
-      <el-form ref="addForm" :model="addForm" :rules="addFormRules" label-position="left" label-width="100px">
-        <el-form-item label="轮播图名称" prop="bannerName">
-          <el-input v-model="addForm.bannerName" autocomplete="off" placeholder="请输入轮播图名称"></el-input>
-        </el-form-item>
-        <el-form-item label="轮播图" prop="imgUrl">
-          <el-upload
-            class="avatar-uploader"
-            :action="baseURL + 'common/upload'"
-            :headers="myHeaders"
-            :show-file-list="false"
-            :on-success="uploadSuccess"
-            :before-upload="beforeUpload">
-            <img v-if="addForm.imgUrl" :src="addForm.imgUrl" class="avatar">
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-            <div class="el-upload__tip" slot="tip" style="margin-top: 0; line-height: 20px;">只支持上传jpg/png文件</div>
-          </el-upload>
-        </el-form-item>
-        <el-form-item label="排序" prop="sortNum">
-          <el-input v-model="addForm.sortNum" autocomplete="off" placeholder="请输入整数(降序显示轮播顺序)"></el-input>
-        </el-form-item>
-        <el-form-item label="链接商品" prop="goodsId">
-          <el-button @click="showGoods" size="small">查找商品</el-button>
-          <el-button @click="clearGoodsId" size="small">清除</el-button>
-        </el-form-item>
-        <el-form-item label="链接商品名称" prop="goodsName">
-          <el-input disabled v-model="selGoodsName"></el-input>
-        </el-form-item>
-      </el-form>
-      <el-dialog
-        width="50%"
-        title="商品列表"
-        :visible.sync="innerVisible"
-        append-to-body>
-        <div class="table">
-          <el-table
-            :data="goodsList"
-            style="width: 100%">
-            <el-table-column align="center">
-              <template slot="header"></template>
-              <template slot-scope="scope">
-                <el-radio v-model="selGoodsId" :label="scope.$index" @change.native="selGoods(scope.row)" >{{""}}</el-radio>
-              </template>
-            </el-table-column>
-            <el-table-column label="商品名称" prop="goodsName"></el-table-column>
-            <el-table-column label="商品图片" prop="imgUrl" align="center">
-              <template slot-scope="scope">
-                <div class="demo-image__preview">
-                  <el-image style="width: 40px; height: 40px" :src="scope.row.imgUrl" :preview-src-list="[scope.row.imgUrl]">
-                    <div slot="error" class="image-slot">
-                      <i class="el-icon-picture-outline"></i>
-                    </div>
-                  </el-image>
-                </div>
-              </template>
-            </el-table-column>
-            <el-table-column align="right">
-              <template slot="header">
-                <el-input v-model="search" size="mini" placeholder="输入名称搜索">
-                  <el-button slot="append" icon="el-icon-search" @click="searchGoods()"></el-button>
-                </el-input>
-              </template>
-            </el-table-column>
-          </el-table>
-        </div>
-        <div class="pagination clearfix">
-          <div class="fr">
-            <el-pagination
-              @size-change="innerHandleSizeChange"
-              @current-change="innerHandleCurrentChange"
-              :current-page="innerCurrentPage"
-              :page-sizes="[10, 20, 30, 50]"
-              :page-size="10"
-              layout="total, sizes, prev, pager, next, jumper"
-              :total="innerListTotal">
-            </el-pagination>
-          </div>
-        </div>
-      </el-dialog>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="cancelAddForm">取 消</el-button>
-        <el-button type="primary" @click="submitAddForm">确 定</el-button>
-      </div>
-    </el-dialog>
-
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import { getBannerList, changeBannerStatus, addBanner, editBanner, getBannerDetail, deleteBanner, getGoodsList, batchDeleteBanner } from '@/api/setting'
-import { getToken } from '@/utils/auth'
-
-export default {
-  data() {
-    let checkInt = (rule, value, callback) => {
-      if ((Number(value)) && (value) % 1 === 0) {
-        callback()
-      } else {
-        return callback(new Error('请输入整数!'))
-      }
-    }
-    return {
-      baseURL: process.env.VUE_APP_BASE_API,
-      myHeaders: {'x-token': getToken()},
-      dataList: null, // 列表数据
-      listLoading: true, // 列表加载loading
-      currentPage: 1, // 当前页码
-      pageSize: 10, // 每页数量
-      listTotal: 0, // 列表总数
-      innerCurrentPage: 1, // 内联当前页码
-      innerPageSize: 10, // 内联每页数量
-      innerListTotal: 0, // 内联列表总数
-      editId:  null,
-      addFormType: 'add',
-      addFormVisible: false,
-      addForm: {
-        imgUrl: '', // 轮播图
-        bannerName: '', // 轮播图名称
-        state: true,
-        goodsId: '',
-        sortNum: ''
-      },
-      addFormRules: {
-        imgUrl: [
-          { required: true, message: '请上传轮播图', trigger: 'change' }
-        ],
-        bannerName: [
-          { required: true, message: '请输入轮播图名称', trigger: 'blur' }
-        ],
-        sortNum: [
-          { required: false, trigger: 'blur', validator: checkInt }
-        ],
-      },
-      innerVisible: false,
-      goodsList: [],
-      search: '',
-      selGoodsId: '',
-      selGoodsName: '',
-      select_state: [
-        { value: 1, label: '显示' },
-        { value: 0, label: '隐藏' },
-      ],
-      screenForm : {
-        state: ''
-      }
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'userid',
-      'name'
-    ])
-  },
-  created() {
-    this.getList();
-  },
-  methods: {
-    // 查询按钮权限
-    checkBtnRole(value) {
-      // let btnRole = this.$route.meta.roles;
-      // if(!btnRole) {return true}
-      // let index = btnRole.indexOf(value);
-      // return index >= 0 ? true : false;
-      return true;
-    },
-
-    getList() {
-      this.listLoading = true;
-
-      let params = {
-        state: this.screenForm.state,
-        pageNum: this.currentPage,
-        pageSize: this.pageSize
-      };
-
-      getBannerList(params).then(res => {
-        this.dataList = res.data.records;
-        this.listTotal = res.data.total;
-        this.listLoading = false;
-      })
-    },
-    // 筛选后重新获取列表
-    getListByScreen() {
-      this.currentPage = 1;
-      this.getList();
-    },
-    // 更改每页数量
-    handleSizeChange(val) {
-      this.pageSize = val;
-      this.currentPage = 1;
-      this.getList();
-    },
-
-    // 更改当前页
-    handleCurrentChange(val) {
-      this.currentPage = val;
-      this.getList();
-    },
-
-    // 更改内嵌每页数量
-    innerHandleSizeChange(val) {
-      this.innerPageSize = val;
-      this.innerCurrentPage = 1;
-      this.getList();
-    },
-
-    // 更改内嵌当前页
-    innerHandleCurrentChange(val) {
-      this.innerCurrentPage = val;
-      this.getList();
-    },
-
-    // 操作 - 更改状态(type: 禁用0，启用1)
-    changeStatus(id, type) {
-      type = !!type
-      changeBannerStatus({carouselMapId: id, state: type}).then(res => {
-        this.getList();
-        this.$successMsg();
-      })
-    },
-
-    // 操作 - 删除
-    handleDelete(id) {
-      deleteBanner({carouselMapId: id}).then(res => {
-        this.getList();
-        this.$successMsg();
-      })
-    },
-
-    // 新增编辑
-    addOrEdit(type, id) {
-      this.addFormType = type;
-      this.addFormVisible = true;
-      if(type == 'edit') {
-        this.editId = id;
-        getBannerDetail({id: id}).then(res => {
-          this.addForm = {
-            bannerName: res.data.carouselName,
-            imgUrl: res.data.imgSrc,
-            state: res.data.state,
-            goodsId: res.data.goodsId,
-            sortNum: res.data.sortNum
-          }
-          if (this.addForm.goodsId) {
-            let params = {
-              goodsId: this.addForm.goodsId,
-              pageNum: 1,
-              pageSize: 1
-            };
-            getGoodsList(params).then(res => {
-              this.selGoodsName = res.data.records[0].goodsName;
-            })
-          }
-        })
-      }
-    },
-
-    // 取消 新增编辑
-    cancelAddForm(){
-      this.addFormVisible = false;
-      this.$refs.addForm.resetFields();
-      this.selGoodsId = ''
-      this.selGoodsName = ''
-    },
-
-    // 提交 新增编辑
-    submitAddForm() {
-      this.$refs.addForm.validate((valid) => {
-        if (valid) {
-          let params = {
-            carouselName: this.addForm.bannerName,
-            imgSrc: this.addForm.imgUrl,
-            state: this.addForm.state,
-            goodsId: this.addForm.goodsId
-          }
-          if(this.addFormType == 'edit') {
-            params.id = this.editId;
-            editBanner(params).then(res => {
-              this.cancelAddForm();
-              this.getList();
-              this.$successMsg('编辑成功');
-            })
-          } else {
-            params.adminNickName = this.name;
-            params.adminUserId = this.userid;
-            addBanner(params).then(res => {
-              this.cancelAddForm();
-              this.getList();
-              this.$successMsg('新增成功');
-            })
-          }
-        }
-      })
-    },
-
-    uploadSuccess(res, file) {
-      this.addForm.imgUrl = 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/png文件!');
-        return false;
-      }
-    },
-    batchDelete() {
-      if(this.$refs.multipleTable.selection && this.$refs.multipleTable.selection.length > 0) {
-        let ids = []
-        this.$refs.multipleTable.selection.forEach(value => {
-          ids.push(value.id)
-        })
-
-        batchDeleteBanner(ids).then(() => {
-          this.$refs.multipleTable.clearSelection()
-          this.getList()
-        })
-      } else {
-        this.$errorMsg('没有选中项！')
-      }
-    },
-    showGoods() {
-      this.innerVisible = true
-      this.showGoodsList()
-    },
-    clearGoodsId() {
-      this.addForm.goodsId = ''
-      this.selGoodsName = ''
-    },
-    showGoodsList() {
-      let params = {
-        goodsName: this.search,
-        pageNum: this.innerCurrentPage,
-        pageSize: this.innerPageSize
-      };
-      getGoodsList(params).then(res => {
-        this.goodsList = res.data.records;
-      })
-    },
-    searchGoods() {
-      this.innerCurrentPage = 1;
-      this.showGoodsList()
-    },
-    selGoods(row) {
-      this.innerVisible = false
-      this.search = ''
-      this.selGoodsId = ''
-      this.addForm.goodsId = row.goodsId
-      this.selGoodsName = row.goodsName
-    }
-  }
-}
-</script>
-
-<style scoped lang="scss">
-
-</style>
-<style>
-  .demo-table-expand {
-    font-size: 0;
-  }
-  .demo-table-expand label {
-    width: 80px;
-    color: #99a9bf;
-  }
-  .demo-table-expand .el-form-item {
-    margin-right: 0;
-    margin-bottom: 0;
-    width: 100%;
-  }
-</style>

src/views/setting/noticebar.vue

@@ -1,146 +0,0 @@
-<template>
-  <div class="app-container">
-    <div class="setting_title">通告管理</div>
-    <el-divider></el-divider>
-    <div style="margin-top: 20px;">
-      <el-form label-position="left" label-width="80px">
-        <el-form-item label="通告内容">
-          <el-input
-            type="textarea"
-            :rows="6"
-            placeholder="请输入通告内容"
-            v-model="mainData.noticeContent">
-          </el-input>
-        </el-form-item>
-        <el-form-item label="通告状态">
-          <el-switch
-            v-model="mainData.status"
-            active-text="启用"
-            inactive-text="禁用">
-          </el-switch>
-        </el-form-item>
-      </el-form>
-    </div>
-
-    <div class="page-footer">
-      <div class="footer" :class="classObj">
-        <el-button type="primary" @click="submitMainForm">保存</el-button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import { getNotice, addNotice, editNotice } from '@/api/setting'
-
-export default {
-  data() {
-    return {
-      mainData: {
-        noticeContent: '',
-        status: false,
-      },
-      canClickSave: true,
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'userid'
-    ]),
-    sidebar() {
-      return this.$store.state.app.sidebar
-    },
-    classObj() {
-      return {
-        hideSidebar: !this.sidebar.opened,
-        openSidebar: this.sidebar.opened
-      }
-    },
-  },
-  created() {
-    this.getNotice();
-  },
-  methods: {
-    // 查询按钮权限
-    checkBtnRole(value) {
-      // let btnRole = this.$route.meta.roles;
-      // if(!btnRole) {return true}
-      // let index = btnRole.indexOf(value);
-      // return index >= 0 ? true : false;
-      return true;
-    },
-
-    // 获取详情
-    getNotice() {
-      getNotice().then(res => {
-        this.mainData = res.data && res.data.length > 0 ? res.data[0] : {
-          noticeContent: '',
-          status: false,
-        };
-      })
-    },
-
-    // 提交表单
-    submitMainForm() {
-      if(this.mainData.status && !this.mainData.noticeContent) {
-        return this.$errorMsg('启用状态时，内容不能为空');
-      }
-
-      // 编辑
-      if(this.mainData.noticeId) {
-        editNotice({
-          noticeId: this.mainData.noticeId,
-          noticeContent: this.mainData.noticeContent,
-          status: this.mainData.status,
-        }).then(res => {
-          this.getNotice();
-          this.$successMsg();
-        })
-      }
-      // 新增
-      else {
-        addNotice({
-          noticeContent: this.mainData.noticeContent,
-          status: this.mainData.status,
-        }).then(res => {
-          this.getNotice();
-          this.$successMsg();
-        })
-      }
-    },
-  }
-}
-</script>
-
-<style scoped lang="scss">
-  .page-footer {
-    height: 70px;
-  }
-  .footer {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    z-index: 1;
-    width: 100%;
-    background: #fff;
-    padding: 15px 40px;
-    box-sizing: border-box;
-    transition: all 0.28s;
-    text-align: right;
-    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 50%), 0 2px 5px 0 rgb(0 0 0 / 10%);
-    &.hideSidebar {
-      margin-left: 54px;
-      width: calc(100vw - 54px);
-    }
-    &.openSidebar {
-      margin-left: 210px;
-      width: calc(100vw - 210px);
-    }
-    .tips {
-      font-size: 12px;
-      color: red;
-      margin-top: 10px;
-    }
-  }
-</style>