Merge branch 'master' of http://139.9.104.214:3000/Szw/yzzn-middleground-supplier

src/assets/styles/login.scss

@@ -54,7 +54,7 @@ $buttonHeight: $buttonH * 1px;
   width: inherit;
   height: inherit;
   min-width: 1080px;
-  min-height: 920px;
+  min-height: 720px;
   background-color: $containerBgColor;
   //background-image: url($containerBgImage);
   background-size: cover;

src/views/components/login/topMenu.vue

@@ -2,23 +2,23 @@
   <div class="topMenu">
     <div class="topLogo">
       <img
-        src="@/assets/images/new_text_log.png"
-        style="width: 100; height: 100%"
+          src="@/assets/images/new_text_log.png"
+          style="width: 100%; height: 100%"
       />
     </div>
     <div class="menuSty">
       <el-dropdown
-        v-for="item in menuList"
-        :key="item"
-        style="margin-right: 40px"
+          v-for="(item,index1) in menuList"
+          :key="index1"
+          style="margin-right: 40px"
       >
         <span class="el-dropdown-link">
-          {{ item.menuName }}<i class="el-icon-arrow-down el-icon--right"></i>
+          {{ item.name }}<i class="el-icon-arrow-down el-icon--right"></i>
         </span>
         <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item v-for="it in item.childMenu" :key="it">{{
-            it.cName
-          }}</el-dropdown-item>
+          <el-dropdown-item v-for="(it,index2) in item.data" :key="index2">
+            {{ it.name }}
+          </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
     </div>
@@ -28,78 +28,111 @@
         0513-88888888
       </span>
       <el-button
-        type="primary"
-        class="btnSty"
-        @click="toRegister()"
-        v-if="methodType === 1"
-        >注册</el-button
+          type="primary"
+          class="btnSty"
+          @click="toRegister()"
+          v-if="methodType === 1"
+      >注册
+      </el-button
       >
       <el-button
-        type="primary"
-        class="btnSty"
-        @click="toLogin()"
-        v-if="methodType === 2"
-        >登录</el-button
+          type="primary"
+          class="btnSty"
+          @click="toLogin()"
+          v-if="methodType === 2"
+      >登录
+      </el-button
       >
     </div>
   </div>
 </template>
 
 <script>
+import { getLoginPagePopularizeModuleConfigPage } from '@/api/supplier/loginPagePopularizeModuleConfig'
+import { getConfigData } from '@/api/infra/config'
+
 export default {
-  name: "topMenu",
+  name: 'topMenu',
   props: {
     methodType: {
       type: Number,
-      default: 2,
-    },
+      default: 2
+    }
   },
   data() {
     return {
       menuList: [
         {
-          menuName: "行业解决方案",
-          childMenu: [
-            { cName: "行业解决方案1" },
-            { cName: "行业解决方案2" },
-            { cName: "行业解决方案3" },
-          ],
+          name: '行业解决方案',
+          data: [
+            { name: '行业解决方案1' },
+            { name: '行业解决方案2' },
+            { name: '行业解决方案3' }
+          ]
         },
         {
-          menuName: "行业标杆",
-          childMenu: [
-            { cName: "行业标杆1" },
-            { cName: "行业标杆2" },
-            { cName: "行业标杆3" },
-          ],
+          name: '行业标杆',
+          data: [
+            { name: '行业标杆1' },
+            { name: '行业标杆2' },
+            { name: '行业标杆3' }
+          ]
         },
         {
-          menuName: "服务支持",
-          childMenu: [{ cName: "服务支持" }],
+          name: '服务支持',
+          data: [{ name: '服务支持' }]
         },
         {
-          menuName: "关于会助理",
-          childMenu: [{ cName: "关于会助理" }],
-        },
+          name: '关于会助理',
+          data: [{ name: '关于会助理' }]
+        }
       ],
-    };
+      loginMenuData: []
+    }
+  },
+  mounted() {
+    getConfigData('login_menu').then(res => {
+      if (res.data) {
+        this.menuList = JSON.parse(res.data.value)
+        this.menuList.forEach(item => {
+          this.getLoginPageData(item.parentId, 1, item)
+        })
+        console.log(this.menuList)
+      }
+    })
   },
-  mounted() {},
   methods: {
+    getLoginPageData(parentId, type, data) {
+      let queryParams = {
+        type: type,
+        parentId: parentId,
+        status: 1
+      }
+      // 执行查询
+      getLoginPagePopularizeModuleConfigPage(queryParams).then(response => {
+        if (response.data) {
+          response.data.list.forEach(item => {
+            data.data.push(item)
+          })
+        }
+      })
+    },
     /**
      * 跳转登录页面
      */
     toLogin() {
-      this.$router.push("/login").catch(() => {});
+      this.$router.push('/login').catch(() => {
+      })
     },
     /**
      * 跳转注册页面
      */
     toRegister() {
-      this.$router.push("/register").catch(() => {});
-    },
-  },
-};
+      this.$router.push('/register').catch(() => {
+      })
+    }
+  }
+}
 </script>
 
 <style scoped>
@@ -110,6 +143,7 @@ export default {
   display: flex;
   align-items: center;
 }
+
 .mobileSty {
   font-family: Microsoft YaHei, Microsoft YaHei;
   font-weight: 400;
@@ -120,12 +154,14 @@ export default {
   font-style: normal;
   text-transform: none;
 }
+
 .btnSty {
   font-size: 20px;
   width: 102px;
   height: 50px;
   margin-left: 3%;
 }
+
 .topBtn {
   float: left;
   width: 28%;
@@ -133,20 +169,24 @@ export default {
   display: flex;
   align-items: center;
 }
+
 .topLogo {
   float: left;
   width: 20%;
   height: 100%;
   margin-left: 12%;
 }
+
 .topMenu {
   background: #f0f7ff;
   height: 8vh;
 }
+
 .dropdown-link-text {
   font-size: 20px;
   font-weight: bold;
 }
+
 .el-dropdown-link {
   cursor: pointer;
   font-family: Microsoft YaHei, Microsoft YaHei;
@@ -158,6 +198,7 @@ export default {
   font-style: normal;
   text-transform: none;
 }
+
 .el-icon-arrow-down {
   font-size: 12px;
 }

src/views/components/register/accountInfo.vue

@@ -0,0 +1,321 @@
+<template>
+  <div class="contentForm">
+    <el-form ref="form" :rules="rules" :model="form" label-width="130px">
+      <el-form-item label="注册类型" prop="registrationTypeList">
+        <el-checkbox-group v-model="form.registrationTypeList">
+          <el-checkbox label="1">机构</el-checkbox>
+          <el-checkbox label="2">供应商</el-checkbox>
+          <el-checkbox label="3">服务商</el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+      <el-form-item label="应用地址" prop="applyAddress">
+        <el-cascader
+          placeholder="请输入应用地址"
+          v-model="form.applyAddress"
+          :options="options"
+          :props="{ expandTrigger: 'hover' }"
+          clearable
+          style="width: 100%"
+        ></el-cascader>
+      </el-form-item>
+      <el-form-item label="机构全称" prop="fullName">
+        <el-input
+          v-model="form.fullName"
+          placeholder="请输入机构全称"
+          maxlength="50"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="机构简称" prop="shortName">
+        <el-input
+          v-model="form.shortName"
+          placeholder="请输入机构简称"
+          maxlength="50"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="统一社会识别码" prop="USIC">
+        <el-input
+          v-model="form.USIC"
+          placeholder="请输入统一社会识别码"
+          maxlength="50"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="机构编号" prop="institutionNum">
+        <el-input
+          v-model="form.institutionNum"
+          placeholder="机构编号将根据您填写的信息自动生成"
+          maxlength="50"
+          disabled
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="绑定域名" prop="bindDomainName">
+        <el-input
+          v-model="form.bindDomainName"
+          maxlength="100"
+          placeholder="请输入绑定域名"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="所属行业" prop="industry">
+        <el-select
+          v-model="form.industry"
+          placeholder="请选择所属行业"
+          style="width: 100%"
+        >
+          <el-option
+            v-for="item in options1"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="联系人" prop="contacts">
+        <el-input
+          v-model="form.contacts"
+          maxlength="100"
+          placeholder="请输入联系人"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="联系方式" prop="contactInfo">
+        <el-input
+          v-model="form.contactInfo"
+          maxlength="11"
+          placeholder="请输入联系方式"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="邮箱" prop="mailbox">
+        <el-input
+          v-model="form.mailbox"
+          maxlength="100"
+          placeholder="请输入邮箱"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="手机验证码" prop="mobileVerificationCode">
+        <el-input
+          v-model="form.mobileVerificationCode"
+          maxlength="10"
+          placeholder="请输入手机验证码"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="账号密码" prop="password">
+        <el-input
+          placeholder="请输入账号密码"
+          v-model="form.password"
+          show-password
+          maxlength="20"
+          autocomplete="off"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="确认密码" prop="confirmPassword">
+        <el-input
+          placeholder="请输入确认密码"
+          v-model="form.confirmPassword"
+          show-password
+          maxlength="20"
+          autocomplete="off"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="服务商邀请码" prop="serviceProviderInvitationCode">
+        <el-input
+          placeholder="请输入服务商邀请码"
+          v-model="form.serviceProviderInvitationCode"
+          maxlength="10"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="服务商单位" prop="serviceProviderUnit">
+        <el-input
+          placeholder="请输入服务商单位"
+          v-model="form.serviceProviderUnit"
+          maxlength="100"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="服务商联系人" prop="serviceProviderContacts">
+        <el-input
+          placeholder="请输入服务商联系人"
+          v-model="form.serviceProviderContacts"
+          maxlength="100"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="联系人联系方式" prop="serviceProviderContactInfo">
+        <el-input
+          placeholder="请输入联系人联系方式"
+          v-model="form.serviceProviderContactInfo"
+          maxlength="11"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+    <div class="nextSty">
+      <el-button style="margin-bottom: 30px" @click="previousStep()"
+        >上一步</el-button
+      >
+      <el-button
+        type="primary"
+        style="margin-bottom: 30px; margin-left: 100px"
+        @click="nextStep()"
+        >下一步</el-button
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "accountInfo",
+  props: {
+    form: {
+      type: Object,
+    },
+    next: {
+      type: Function,
+    },
+    previous: {
+      type: Function,
+    },
+    changeComponents: {
+      type: Function,
+    },
+  },
+  data() {
+    var validatePass = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("请输入密码"));
+      } else {
+        if (this.form.confirmPassword !== "") {
+          this.$refs.form.validateField("confirmPassword");
+        }
+        callback();
+      }
+    };
+    var validatePass2 = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("请再次输入密码"));
+      } else if (value !== this.form.password) {
+        callback(new Error("两次输入密码不一致!"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      options1: [
+        {
+          value: "1",
+          label: "行业一",
+        },
+        {
+          value: "2",
+          label: "行业二",
+        },
+      ],
+      options: [
+        {
+          value: "jiangsu",
+          label: "江苏",
+          children: [
+            {
+              value: "nantong",
+              label: "南通",
+              children: [
+                {
+                  value: "haian",
+                  label: "海安",
+                },
+                {
+                  value: "rudong",
+                  label: "如东",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      rules: {
+        registrationTypeList: [
+          {
+            type: "array",
+            required: true,
+            message: "请至少选择一个机构类型",
+            trigger: "change",
+          },
+        ],
+        applyAddress: [
+          { required: true, message: "请输入应用地址", trigger: "blur" },
+        ],
+        fullName: [
+          { required: true, message: "请输入机构全称", trigger: "blur" },
+        ],
+        shortName: [
+          { required: true, message: "请输入机构简称", trigger: "blur" },
+        ],
+        USIC: [
+          { required: true, message: "请输入统一社会识别码", trigger: "blur" },
+        ],
+        industry: [
+          {
+            required: true,
+            message: "请选择所属行业",
+            trigger: "change",
+          },
+        ],
+        contacts: [
+          { required: true, message: "请输入机构联系人", trigger: "blur" },
+        ],
+        contactInfo: [
+          {
+            required: true,
+            message: "请输入机构联系人联系方式",
+            trigger: "blur",
+          },
+        ],
+        mailbox: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
+        password: [
+          { required: true, message: "请输入密码", trigger: "blur" },
+          { validator: validatePass, trigger: "blur" },
+        ],
+        confirmPassword: [
+          { required: true, message: "请输入确认密码", trigger: "blur" },
+          { validator: validatePass2, trigger: "blur" },
+        ],
+      },
+    };
+  },
+  mounted() {},
+  methods: {
+    //上一步
+    previousStep() {
+      this.changeComponents("registration-terms");
+      this.previous();
+    },
+    //下一步
+    nextStep() {
+      this.changeComponents("entry-information");
+      this.next();
+      /** 需要校验使用下方事务 */
+      // this.$refs["form"].validate((valid) => {
+      //   if (valid) {
+      //     this.next();
+      //     this.changeComponents("entry-information");
+      //   } else {
+      //     return false;
+      //   }
+      // });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.el-form-item {
+  margin-bottom: 22px !important;
+}
+.nextSty {
+  width: 100%;
+  display: flex;
+  font-weight: bold;
+  justify-content: center;
+  align-items: center;
+}
+.contentForm {
+  width: 60%;
+  padding: 20px 30px 20px 30px;
+}
+</style>

src/views/components/register/entryInformation.vue

@@ -0,0 +1,272 @@
+<template>
+  <div class="contentForm">
+    <el-form ref="form" :rules="rules" :model="form" label-width="130px">
+      <el-form-item label="供应类型" prop="supplyTypeList">
+        <el-checkbox-group v-model="form.supplyTypeList">
+          <el-checkbox label="1">食品供应商</el-checkbox>
+          <el-checkbox label="2">商品供应商</el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+      <el-form-item label="法人姓名" prop="legalRepresentativeName">
+        <el-input
+          v-model="form.legalRepresentativeName"
+          maxlength="100"
+          placeholder="请输入法人姓名"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="证件类型" prop="identificationType">
+        <el-select
+          v-model="form.identificationType"
+          placeholder="请选择证件类型"
+          style="width: 100%"
+        >
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="证件号码" prop="identificationNum">
+        <el-input
+          v-model="form.identificationNum"
+          maxlength="100"
+          placeholder="证件号码"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="营业执照" prop="businessLicense">
+        <el-input
+          v-model="form.businessLicense"
+          maxlength="100"
+          placeholder="营业执照"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="营业执照有效期" prop="validityDeadline">
+        <el-date-picker
+          v-model="form.validityDeadline"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          style="width: 100%"
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="法人证件附件" prop="legalRepresentativeFile">
+        <el-upload
+          action="https://jsonplaceholder.typicode.com/posts/"
+          list-type="picture-card"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemove"
+        >
+          <i class="el-icon-plus"></i>
+        </el-upload>
+        <el-dialog :visible.sync="dialogVisible">
+          <img width="100%" :src="dialogImageUrl" alt="" />
+        </el-dialog>
+      </el-form-item>
+      <el-form-item label="营业执照附件" prop="businessLicenseFile">
+        <el-upload
+          action="https://jsonplaceholder.typicode.com/posts/"
+          list-type="picture-card"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemove"
+        >
+          <i class="el-icon-plus"></i>
+        </el-upload>
+        <el-dialog :visible.sync="dialogVisible">
+          <img width="100%" :src="dialogImageUrl" alt="" />
+        </el-dialog>
+      </el-form-item>
+      <el-form-item label="生产许可证附件" prop="productionLicenseFile">
+        <el-upload
+          action="https://jsonplaceholder.typicode.com/posts/"
+          list-type="picture-card"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemove"
+        >
+          <i class="el-icon-plus"></i>
+        </el-upload>
+        <el-dialog :visible.sync="dialogVisible">
+          <img width="100%" :src="dialogImageUrl" alt="" />
+        </el-dialog>
+      </el-form-item>
+      <el-form-item label="流通许可证附件" prop="circulationLicense">
+        <el-upload
+          action="https://jsonplaceholder.typicode.com/posts/"
+          list-type="picture-card"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemove"
+        >
+          <i class="el-icon-plus"></i>
+        </el-upload>
+        <el-dialog :visible.sync="dialogVisible">
+          <img width="100%" :src="dialogImageUrl" alt="" />
+        </el-dialog>
+      </el-form-item>
+      <el-form-item label="其他资质附件" prop="otherQualifications">
+        <el-upload
+          action="https://jsonplaceholder.typicode.com/posts/"
+          list-type="picture-card"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemove"
+        >
+          <i class="el-icon-plus"></i>
+        </el-upload>
+        <el-dialog :visible.sync="dialogVisible">
+          <img width="100%" :src="dialogImageUrl" alt="" />
+        </el-dialog>
+      </el-form-item>
+    </el-form>
+    <div class="nextSty">
+      <el-button style="margin-bottom: 30px" @click="previousStep()"
+        >上一步</el-button
+      >
+      <el-button
+        type="primary"
+        style="margin-bottom: 30px; margin-left: 100px"
+        @click="nextStep()"
+        >下一步</el-button
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "entryInformation",
+  props: {
+    form: {
+      type: Object,
+    },
+    next: {
+      type: Function,
+    },
+    previous: {
+      type: Function,
+    },
+    changeComponents: {
+      type: Function,
+    },
+  },
+  data() {
+    return {
+      options: [
+        {
+          value: "1",
+          label: "证件类型一",
+        },
+        {
+          value: "2",
+          label: "证件类型二",
+        },
+      ],
+      rules: {
+        supplyTypeList: [
+          {
+            type: "array",
+            required: true,
+            message: "请至少选择一个供应类型",
+            trigger: "change",
+          },
+        ],
+        legalRepresentativeName: [
+          { required: true, message: "请输入法人姓名", trigger: "blur" },
+        ],
+        identificationType: [
+          { required: true, message: "请选择证件类型", trigger: "change" },
+        ],
+
+        identificationNum: [
+          { required: true, message: "请输入证件号码", trigger: "blur" },
+        ],
+        businessLicense: [
+          { required: true, message: "请输入营业执照", trigger: "blur" },
+        ],
+        validityDeadline: [
+          {
+            type: "date",
+            required: true,
+            message: "请选择营业执照有效期",
+            trigger: "blur",
+          },
+        ],
+        //待实现文件上传验证================================================
+        legalRepresentativeFile: [
+          {
+            required: true,
+            message: "请上法人证件附件",
+            trigger: "change",
+          },
+        ],
+        //待实现文件上传验证================================================
+        legalRepresentativeFile: [
+          {
+            required: true,
+            message: "请上法人证件附件",
+            trigger: "change",
+          },
+        ],
+        //待实现文件上传验证================================================
+        businessLicenseFile: [
+          {
+            required: true,
+            message: "请上营业执照附件",
+            trigger: "change",
+          },
+        ],
+      },
+      dialogImageUrl: "",
+      dialogVisible: false,
+    };
+  },
+  mounted() {},
+  methods: {
+    //上一步
+    previousStep() {
+      this.changeComponents("account-info");
+      this.previous();
+    },
+    //下一步
+    nextStep() {
+      this.changeComponents("registration-package");
+      this.next();
+      /** 需要校验使用下方事务 */
+      // this.$refs["form"].validate((valid) => {
+      //   if (valid) {
+      //     this.next();
+      //     this.changeComponents("registration-package");
+      //   } else {
+      //     return false;
+      //   }
+      // });
+    },
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.nextSty {
+  width: 100%;
+  display: flex;
+  font-weight: bold;
+  justify-content: center;
+  align-items: center;
+}
+.el-form-item {
+  margin-bottom: 22px !important;
+}
+.contentForm {
+  width: 60%;
+  padding: 20px 30px 20px 30px;
+}
+</style>

src/views/components/register/package.vue

@@ -0,0 +1,338 @@
+<template>
+  <div
+    class="packageSty"
+    :style="borderSty"
+    @mouseover="mouseOver()"
+    @mouseleave="mouseLeave()"
+    @click="mouseClick()"
+  >
+    <div class="topSty">
+      <div class="packageName" :style="`color:` + color">试用版</div>
+      <div class="discription">体验全新XXX服务</div>
+      <div class="price">
+        <span class="yuan">￥</span><span class="num">10000.00</span
+        ><span class="nian">/年 起</span>
+      </div>
+      <div class="memberCount">仅限5人</div>
+
+      <div class="ktBtn">
+        <el-button class="btnSty">开通</el-button>
+      </div>
+    </div>
+    <div class="middleSty">
+      <el-tag size="mini" style="width: 100%">网页端应用</el-tag>
+
+      <div class="mid">
+        <el-tree
+          :data="data1"
+          :props="defaultProps"
+          :default-expand-all="true"
+        ></el-tree>
+      </div>
+      <div class="mid">
+        <el-tag size="mini" type="success" style="width: 100%"
+          >小程序端应用</el-tag
+        >
+      </div>
+      <div class="mid">
+        <el-tree
+          :data="data2"
+          :props="defaultProps"
+          :default-expand-all="true"
+        ></el-tree>
+      </div>
+    </div>
+    <div class="bottomSty">
+      <div style="display: block">
+        <div class="fuwuSty">使用培训：√</div>
+        <div class="fuwuSty">疑问解答：√</div>
+        <div class="fuwuSty">业务咨询：×</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "package-module",
+  props: {
+    color: {
+      type: String,
+      default: "#000000",
+    },
+    packName: {
+      type: String,
+      default: "nullName",
+    },
+    changeSty: {
+      type: Function,
+    },
+  },
+  data() {
+    return {
+      borderSty: "border-top:3px " + this.color + " solid",
+      styFlag: false,
+      data1: [
+        {
+          label: "一级 1",
+          children: [
+            {
+              label: "二级 1-1",
+              children: [
+                {
+                  label: "三级 1-1-1",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          label: "一级 2",
+          children: [
+            {
+              label: "二级 2-1",
+              children: [
+                {
+                  label: "三级 2-1-1",
+                },
+              ],
+            },
+            {
+              label: "二级 2-2",
+              children: [
+                {
+                  label: "三级 2-2-1",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          label: "一级 3",
+          children: [
+            {
+              label: "二级 3-1",
+              children: [
+                {
+                  label: "三级 3-1-1",
+                },
+              ],
+            },
+            {
+              label: "二级 3-2",
+              children: [
+                {
+                  label: "三级 3-2-1",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      data2: [
+        {
+          label: "一级 1",
+          children: [
+            {
+              label: "二级 1-1",
+              children: [
+                {
+                  label: "三级 1-1-1",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          label: "一级 2",
+          children: [
+            {
+              label: "二级 2-1",
+              children: [
+                {
+                  label: "三级 2-1-1",
+                },
+              ],
+            },
+            {
+              label: "二级 2-2",
+              children: [
+                {
+                  label: "三级 2-2-1",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          label: "一级 3",
+          children: [
+            {
+              label: "二级 3-1",
+              children: [
+                {
+                  label: "三级 3-1-1",
+                },
+              ],
+            },
+            {
+              label: "二级 3-2",
+              children: [
+                {
+                  label: "三级 3-2-1",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+    };
+  },
+  mounted() {},
+  methods: {
+    changeStyFlag(flag) {
+      this.styFlag = flag;
+      if (!flag) this.mouseLeave();
+    },
+    mouseClick() {
+      this.changeSty(this.packName);
+    },
+    mouseOver() {
+      this.borderSty = "border:3px " + this.color + " solid";
+    },
+    mouseLeave() {
+      if (!this.styFlag)
+        this.borderSty = "border-top:3px " + this.color + " solid";
+    },
+  },
+};
+</script>
+
+<style scoped>
+.fuwuSty {
+  width: 100%;
+  text-align: center;
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: 400;
+  font-size: 14px;
+  color: #6f6f6f;
+  line-height: 16px;
+  letter-spacing: 1px;
+  font-style: normal;
+  text-transform: none;
+  margin-top: 10px;
+}
+.mid {
+  width: 90%;
+  margin: 0 auto 10px auto;
+}
+.btnSty {
+  background-color: #1890ff;
+  width: 134px;
+  height: 34px;
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: bold;
+  font-size: 14px;
+  color: #ffffff;
+  line-height: 16px;
+  letter-spacing: 1px;
+  font-style: normal;
+  text-transform: none;
+}
+.ktBtn {
+  width: 100%;
+  text-align: center;
+  padding-top: 10px;
+}
+.memberCount {
+  width: 100%;
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: 400;
+  font-size: 14px;
+  color: #333333;
+  line-height: 16px;
+  letter-spacing: 1px;
+  text-align: center;
+  font-style: normal;
+  text-transform: none;
+}
+.yuan {
+  font-size: 14px;
+  color: #333333;
+}
+.num {
+  font-size: 32px;
+  color: #333333;
+}
+.nian {
+  font-size: 14px;
+  color: #333333;
+}
+.price {
+  width: 100%;
+  text-align: center;
+  padding-top: 5px;
+}
+.discription {
+  width: 100%;
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: 400;
+  font-size: 14px;
+  color: #333333;
+  line-height: 16px;
+  letter-spacing: 1px;
+  text-align: center;
+  font-style: normal;
+  text-transform: none;
+  margin-top: 10px;
+}
+.packageName {
+  width: 100%;
+  text-align: center;
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 23px;
+  letter-spacing: 1px;
+  font-style: normal;
+  text-transform: none;
+}
+.topSty {
+  width: 95%;
+  height: 200px;
+  margin: 5px auto 0 auto;
+  border-bottom: 1px solid #ebebeb;
+}
+.middleSty {
+  width: 95%;
+  height: 450px;
+  margin: 5px auto;
+  overflow-y: scroll;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #ebebeb;
+}
+/**隐藏滚动条 */
+::-webkit-scrollbar {
+  display: none;
+}
+.bottomSty {
+  width: 95%;
+  height: 100px;
+  margin: 1px auto 5px auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.packageSty {
+  width: 16%;
+  float: left;
+  margin-left: 2%;
+  margin-right: 2%;
+  border-radius: 10px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+</style>

src/views/components/register/registrationPackage.vue

@@ -0,0 +1,366 @@
+<template>
+  <div class="contentForm">
+    <div class="choosePackContent">
+      <package-module
+        v-for="(item, index) in colorList"
+        :key="index"
+        :color="item"
+        :packName="packageList[index].packageName"
+        :changeSty="changeSty"
+        ref="packageRef"
+      ></package-module>
+    </div>
+    <div class="fapiaoSty">
+      <div class="topTitle"></div>
+      <div class="titleSty">订单信息</div>
+      <el-form
+        ref="form"
+        :model="form"
+        label-width="140px"
+        style="margin-top: 20px"
+        :rules="rules"
+      >
+        <el-col :span="8">
+          <el-form-item label="购买时长" prop="purchaseDuration">
+            <el-input-number
+              v-model="form.purchaseDuration"
+              :step="1"
+              :precision="0"
+              style="width: 90%"
+            ></el-input-number>
+            &nbsp;&nbsp;年
+          </el-form-item></el-col
+        >
+        <el-col :span="8"
+          ><el-form-item label="账号数量" prop="accountNum">
+            <el-input-number
+              v-model="form.accountNum"
+              :step="5"
+              :precision="0"
+              style="width: 90%"
+            ></el-input-number>
+            &nbsp;&nbsp;人
+          </el-form-item></el-col
+        >
+        <el-col :span="8"
+          ><el-form-item label="总价" prop="totalPrice">
+            <el-input-number
+              v-model="form.totalPrice"
+              :precision="2"
+              disabled
+              style="width: 90%"
+            ></el-input-number>
+            &nbsp;&nbsp;元
+          </el-form-item></el-col
+        >
+        <el-col :span="8"
+          ><el-form-item label="发票类型" prop="invoiceType">
+            <el-select
+              v-model="form.invoiceType"
+              placeholder="请选择发票类型"
+              style="width: 100%"
+              clearable
+            >
+              <el-option
+                v-for="item in options1"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select> </el-form-item
+        ></el-col>
+        <el-col :span="8"
+          ><el-form-item label="发票抬头" prop="invoiceType">
+            <el-select
+              v-model="form.invoiceHeader"
+              placeholder="请选择发票抬头"
+              style="width: 100%"
+              disabled
+            >
+              <el-option
+                v-for="item in options2"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select> </el-form-item
+        ></el-col>
+        <el-col :span="8">
+          <el-form-item label="统一社会识别码" prop="USICForInvoice">
+            <el-input
+              v-model="form.USICForInvoice"
+              placeholder="请输入统一社会识别码"
+              clearable
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="单位名称" prop="unitName">
+            <el-input
+              v-model="form.unitName"
+              clearable
+              placeholder="请输入单位名称"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="单位电话" prop="unitTel">
+            <el-input
+              v-model="form.unitTel"
+              placeholder="请输入单位电话"
+              maxlength="11"
+              show-word-limit
+              clearable
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="单位地址" prop="unitAddress">
+            <el-input
+              v-model="form.unitAddress"
+              placeholder="请输入单位地址"
+              maxlength="100"
+              show-word-limit
+              clearable
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8"
+          ><el-form-item label="开户银行" prop="openingBank">
+            <el-select
+              v-model="form.openingBank"
+              placeholder="请选择开户银行"
+              style="width: 100%"
+              clearable
+            >
+              <el-option
+                v-for="item in options3"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select> </el-form-item
+        ></el-col>
+
+        <el-col :span="16">
+          <el-form-item label="银行账户" prop="bankAccount" style="width: 50%">
+            <el-input
+              v-model="form.bankAccount"
+              placeholder="请输入银行账户"
+              maxlength="20"
+              show-word-limit
+              clearable
+            ></el-input>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="8">
+          <el-form-item label="收票人电话" prop="ticketRecipientTel">
+            <el-input
+              v-model="form.ticketRecipientTel"
+              placeholder="请输入收票人电话"
+              maxlength="11"
+              show-word-limit
+              clearable
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="收票人邮箱" prop="ticketRecipientMail">
+            <el-input
+              v-model="form.ticketRecipientMail"
+              placeholder="请输入收票人邮箱"
+              maxlength="70"
+              show-word-limit
+              clearable
+            ></el-input>
+          </el-form-item>
+        </el-col>
+      </el-form>
+      <el-col :span="24" style="margin-left: 60px; color: #adadad">
+        注：发票内容将根据税法调整，具体以展示为准，本订单的售后服务请联系平台方处理。
+      </el-col>
+    </div>
+    <div class="nextSty">
+      <el-button style="margin-bottom: 30px" @click="previousStep()"
+        >上一步
+      </el-button>
+      <el-button
+        type="primary"
+        style="margin-bottom: 30px; margin-left: 100px"
+        @click="submitAll()"
+        >提交审核
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import packageModule from "./package.vue";
+export default {
+  name: "registrationPackage",
+  components: {
+    packageModule,
+  },
+  props: {
+    form: {
+      type: Object,
+    },
+    next: {
+      type: Function,
+    },
+    previous: {
+      type: Function,
+    },
+    changeComponents: {
+      type: Function,
+    },
+  },
+  data() {
+    return {
+      colorList: ["#FFD43C", "#0FA9DE", "#BD7AFF", "#FF9A0D", "#09D640"],
+      packageList: [
+        { packageName: "pack1" },
+        { packageName: "pack2" },
+        { packageName: "pack3" },
+        { packageName: "pack4" },
+        { packageName: "pack5" },
+      ],
+      options1: [
+        {
+          value: "1",
+          label: "普票",
+        },
+        {
+          value: "2",
+          label: "专票",
+        },
+      ],
+      options2: [
+        {
+          value: "1",
+          label: "单位",
+        },
+        {
+          value: "2",
+          label: "个人",
+        },
+      ],
+      options3: [
+        {
+          value: "1",
+          label: "中国建设银行",
+        },
+        {
+          value: "2",
+          label: "中国工商银行",
+        },
+      ],
+      rules: {
+        purchaseDuration: [
+          { required: true, message: "请输入购买时长", trigger: "blur" },
+        ],
+        accountNum: [
+          { required: true, message: "请输入账号数量", trigger: "blur" },
+        ],
+        invoiceType: [
+          { required: true, message: "请选择发票类型", trigger: "change" },
+        ],
+        USICForInvoice: [
+          { required: true, message: "请输入统一社会识别码", trigger: "blur" },
+        ],
+        unitName: [
+          { required: true, message: "请输入单位名称", trigger: "blur" },
+        ],
+        unitTel: [
+          { required: true, message: "请输入单位电话", trigger: "blur" },
+        ],
+        unitAddress: [
+          { required: true, message: "请输入单位电话", trigger: "blur" },
+        ],
+        openingBank: [
+          { required: true, message: "请选择开户银行", trigger: "change" },
+        ],
+        bankAccount: [
+          { required: true, message: "请输入银行账号", trigger: "blur" },
+        ],
+        ticketRecipientTel: [
+          { required: true, message: "请输入收票人电话", trigger: "blur" },
+        ],
+        ticketRecipientMail: [
+          { required: true, message: "请输入收票人邮箱", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  mounted() {},
+  methods: {
+    changeSty(packageName) {
+      var comps = this.$refs.packageRef;
+      for (let i = 0; i < comps.length; i++) {
+        if (comps[i].packName === packageName) {
+          comps[i].changeStyFlag(true);
+        } else {
+          comps[i].changeStyFlag(false);
+        }
+      }
+    },
+    //上一步
+    previousStep() {
+      this.changeComponents("entry-information");
+      this.previous();
+    },
+    submitAll() {
+      console.log(this.form);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.titleSty {
+  font-size: 22px;
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: 400;
+  line-height: 22px;
+  margin-left: 60px;
+}
+.topTitle {
+  width: 6px;
+  height: 27px;
+  background-color: #1890ff;
+  border-radius: 10px;
+  float: left;
+  margin-left: 30px;
+}
+.fapiaoSty {
+  width: 100%;
+  height: 480px;
+  padding: 20px 30px 20px 30px;
+  margin: 15px auto 0 auto;
+  border-top: 1px #f2f2f2 solid;
+}
+.choosePackContent {
+  width: 100%;
+  height: 780px;
+}
+.el-form-item {
+  margin-bottom: 22px !important;
+}
+
+.nextSty {
+  width: 100%;
+  display: flex;
+  font-weight: bold;
+  justify-content: center;
+  align-items: center;
+}
+
+.contentForm {
+  width: 100%;
+  padding: 20px 30px 20px 30px;
+}
+</style>

src/views/components/register/registrationTerms.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="contentForm">
+    <div class="registrationTermsTitleSty">
+      <p class="registrationTermsTitle">会助理平台注册条款</p>
+    </div>
+    <p v-text="registrationTerms"></p>
+    <div class="agreedTermsSty">
+      <el-button
+        type="primary"
+        style="margin-top: 10px; margin-bottom: 30px"
+        @click="checkAgree()"
+        >我已仔细阅读并同意《会助理平台注册条款》</el-button
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "registrationTerms",
+  props: {
+    form: {
+      type: Object,
+    },
+    next: {
+      type: Function,
+    },
+    previous: {
+      type: Function,
+    },
+    changeComponents: {
+      type: Function,
+    },
+  },
+  data() {
+    return {
+      registrationTerms:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet." +
+        "Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar" +
+        "sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. " +
+        "Naermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien" +
+        "nunc accuan eget.Lorem ipsum dolor sit amet, consectetadipiscing elit. Aenean euismod bibendum laoreet. " +
+        "Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. " +
+        "Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla " +
+        "luctus pharetra vulputate, felistellusmollis orci, sed rhoncus pronin sapien nunc accuan eget.Lorem ipsum" +
+        " dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet " +
+        "lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et " +
+        "magnis dparturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, " +
+        "felis tellus mollis orci, sed rhoncus pronin sapien nunc eget.Lorem ipsum dolor sit amet, consectetur " +
+        "adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra " +
+        "justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, " +
+        "nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, " +
+        "sed rhoncus pronin sapien nunc accuan eget.Lorem ipsum dolor sit amet, consecteadipiscing elit. " +
+        "Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. " +
+        "Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. " +
+        "Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget." +
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. " +
+        "Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. " +
+        "Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus " +
+        "pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.Lorem ipsum dolor sit amet," +
+        "consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et " +
+        "viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, " +
+        "nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, " +
+        "sed rhoncus pronin sapien nunc accuan eget.Lorem ipsum dolor sit amet, consectetur adipiscing elit. " +
+        "Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. " +
+        "Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, " +
+        "nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, " +
+        "sed rhoncus pronin sapien nunc accuan eget.Lorem ipsum dolor sit amet, consectetur adipiscing elit. " +
+        "Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. " +
+        "Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. " +
+        "Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc " +
+        "accuanLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida " +
+        "dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. " +
+        "Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Naermentum, " +
+        "nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget." +
+        "Lorem ipsum dolor sit amet, consectetadipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor" +
+        "sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. " +
+        "Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, " +
+        "nulla luctus pharetra vulputate, felistellusmollis orci, sed rhoncus pronin sapien nunc accuan eget." +
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. " +
+        "Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. " +
+        "Sociis natoque penatibus et magnis dparturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus " +
+        "pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc eget.Lorem ipsum dolor sit amet," +
+        "consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et" +
+        " viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, " +
+        "nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, " +
+        "sed rhoncus pronin sapien nunc accuan eget.Lorem ipsum dolor sit amet, consecteadipiscing elit. " +
+        "Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo." +
+        " Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, " +
+        "nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, " +
+        "sed rhoncus pronin sapien nunc accuan eget.Lorem ipsum dolor sit amet, consectetur adipiscing elit. " +
+        "Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. " +
+        "Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient monteLorem ipsum dolor sit amet," +
+        " consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit " +
+        "amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis " +
+        "natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Naermentum, " +
+        "nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget." +
+        "Lorem ipsum dolor sit amet, consectetadipiscing elit. Aenean euismod bibendum laoreet. " +
+        "Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. " +
+        "Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum," +
+        "nulla luctus pharetra vulputate, felistellusmollis orci, sed rhoncus pronin sapien nunc accuan eget." +
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. " +
+        "Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor.",
+    };
+  },
+  mounted() {},
+  methods: {
+    checkAgree() {
+      this.form.isAgreeTerms = true;
+      this.changeComponents("account-info");
+      this.next();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.agreedTermsSty {
+  width: 100%;
+  display: flex;
+  font-weight: bold;
+  justify-content: center;
+  align-items: center;
+}
+.registrationTermsTitleSty {
+  width: 100%;
+  display: flex;
+  font-weight: bold;
+  justify-content: center;
+  align-items: center;
+}
+.registrationTermsTitle {
+  font-size: 20px;
+}
+.contentForm {
+  width: 60%;
+  padding: 20px 30px 20px 30px;
+}
+</style>

src/views/navigation.vue

@@ -789,4 +789,4 @@ export default {
     float: left;
     /* background-color: rgb(1, 7, 1); */
 }
-</style>
+</style>

src/views/register.vue

@@ -1,7 +1,26 @@
 <template>
   <div>
     <top-menu :methodType="2"></top-menu>
-    <div style="overflow: auto; height: 92vh"></div>
+    <div style="height: 92vh">
+      <div class="stepsSty">
+        <el-steps ref="stepsRef" :active="activeStep" align-center>
+          <el-step title="注册条款"></el-step>
+          <el-step title="账号信息"></el-step>
+          <el-step title="入驻信息"></el-step>
+          <el-step title="注册套餐"></el-step>
+        </el-steps>
+      </div>
+      <div class="contentSty" ref="content">
+        <!-- 动态组件 -->
+        <component
+          :is="currentComponent"
+          :form="form"
+          :next="next"
+          :previous="previous"
+          :changeComponents="changeComponents"
+        ></component>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -9,18 +28,166 @@
 import topMenu from "./components/login/topMenu.vue";
 export default {
   name: "register",
-  components: { topMenu },
+  components: {
+    topMenu,
+    registrationTerms: () =>
+      import("./components/register/registrationTerms.vue"),
+    accountInfo: () => import("./components/register/accountInfo.vue"),
+    entryInformation: () =>
+      import("./components/register/entryInformation.vue"),
+    registrationPackage: () =>
+      import("./components/register/registrationPackage.vue"),
+  },
   data() {
-    return {};
+    return {
+      activeStep: 0, // 当前激活的步骤
+      title3: "入驻信息",
+      isShow: false,
+      currentComponent: "registration-terms", // 初始组件
+      // currentComponent: "account-info", // 初始组件
+      // currentComponent: "entry-information", // 初始组件
+      // currentComponent: "registration-package", // 初始组件
+
+      form: {
+        isAgreeTerms: false, //是否同意注册条款
+        //===============================================
+        registrationTypeList: [], //注册类型
+        applyAddress: "", //应用地址
+        fullName: "", //机构全称
+        shortName: "", //机构简称
+        USIC: "", //统一社会识别码
+        institutionNum: "", //机构编码
+        bindDomainName: "", //绑定域名
+        industry: "", //所属行业
+        contacts: "", //联系人
+        contactInfo: "", //联系方式
+        mailbox: "", //邮箱
+        mobileVerificationCode: "", //手机验证码
+        password: "", //账号密码
+        confirmPassword: "", //确认密码
+        serviceProviderInvitationCode: "", //服务商邀请码
+        serviceProviderUnit: "", //服务商单位
+        serviceProviderContacts: "", //服务商联系人
+        serviceProviderContactInfo: "", //联系人联系方式
+        //===============================================
+        supplyTypeList: [], //供应类型
+        legalRepresentativeName: "", //法人姓名
+        identificationType: "", //证件类型
+        identificationNum: "", //证件号码
+        businessLicense: "", //营业执照
+        validityDeadline: "", //证件有效截止日期
+        legalRepresentativeFile: "", //法人证件附件
+        businessLicenseFile: "", //营业执照附件
+        productionLicenseFile: "", //生产许可证附件
+        circulationLicense: "", //流通许可证附件
+        otherQualifications: "", //其他资质附件
+        //===============================================
+        purchaseDuration: 1, //购买时长
+        accountNum: 5, //账号数量
+        totalPrice: 0.0, //总价
+        invoiceType: "1", //发票类型
+        invoiceHeader: "1", //发票抬头：默认单位不可修改
+        USICForInvoice: "", //统一社会识别码（发票）
+        unitName: "", //单位名称
+        unitTel: "", //单位电话
+        unitAddress: "", //单位地址
+        openingBank: "", //开户银行
+        bankAccount: "", //银行账户
+        ticketRecipientTel: "", //收票人电话
+        ticketRecipientMail: "", //收票人邮箱
+      },
+    };
   },
   beforeCreate() {},
   created() {},
+  mounted() {},
   methods: {
-    toLogin() {
-      this.$router.push("/login").catch(() => {});
+    next() {
+      this.activeStep++;
+      //重置滚动条
+      this.$refs.content.scrollTop = 0;
+    },
+    previous() {
+      this.activeStep--;
+      //重置滚动条
+      this.$refs.content.scrollTop = 0;
+    },
+    changeComponents(componentName) {
+      this.currentComponent = componentName;
     },
   },
 };
 </script>
 <style lang="scss" scoped>
+.contentSty {
+  height: 76vh;
+  width: 80%;
+  margin: 0 auto;
+  overflow: auto;
+  display: flex;
+  justify-content: center;
+}
+/* 进行中状态：圈线 */
+::v-deep .el-step__head.is-process {
+  color: #1890ff;
+  border-color: #1890ff;
+}
+/* 进行中状态：圈内 */
+::v-deep .el-step__head.is-process > .el-step__icon {
+  background: #1890ff;
+  color: #fff;
+}
+/* 进行中状态：title（文字） */
+::v-deep .el-step__title.is-process {
+  color: #1890ff;
+  font-size: 14px;
+}
+
+/* 已完成状态：圈线 */
+::v-deep .el-step__head.is-finish {
+  color: #1890ff;
+  border-color: #1890ff;
+}
+/* 已完成状态：圈内 */
+::v-deep .el-step__head.is-finish > .el-step__icon {
+  background: #1890ff;
+  color: #fff;
+}
+/* 已完成状态：title（文字） */
+::v-deep .el-step__title.is-finish {
+  color: #1890ff;
+  font-size: 14px;
+}
+
+/* 等待中状态：圈线 */
+::v-deep .el-step__head.is-wait {
+  color: #e8f2ff;
+  border-color: #e8f2ff;
+}
+/* 等待中状态：圈内 */
+::v-deep .el-step__head.is-wait > .el-step__icon {
+  background: #e8f2ff;
+  color: #1890ff;
+}
+/* 等待中状态：title（文字） */
+::v-deep .el-step__title.is-wait {
+  color: #7cb4fe;
+  font-size: 14px;
+}
+
+.stepsSty {
+  height: 16vh;
+  width: 80%;
+  padding-top: 2%;
+  margin: 0 auto;
+}
+::v-deep .el-step__icon {
+  height: 54px;
+  width: 54px;
+  font-size: 40px;
+}
+::v-deep .el-step.is-center .el-step__line {
+  top: 50%;
+  border: 2px #e8f2ff solid;
+}
 </style>

src/views/supplier/loginPagePopularizeModuleConfig/index.vue

@@ -5,57 +5,65 @@
         顶部菜单栏配置
       </div>
       <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd(0)">添 加 项 目</el-button>
-      <div v-for="menu in loginMenuData" style="margin: 10px">
+      <div v-for="(menu,index) in loginMenuData" style="margin: 10px" :key="index">
         <div style="font-size: 22px;margin-bottom: 10px">
           {{ menu.name }}
         </div>
-        <!-- 操作工具栏 -->
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd(1)">新增</el-button>
-          </el-col>
-          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-        </el-row>
-        <!-- 列表 -->
-        <el-table v-loading="loading" :data="menu.data">
-          <el-table-column label="序号" align="center" prop="id"/>
-          <el-table-column label="名称" align="center" prop="name"/>
-          <!--        <el-table-column label="链接" align="center" prop="link"/>-->
-          <el-table-column label="排序" align="center" prop="sort"/>
-          <el-table-column label="状态" align="center" prop="status">
-            <template v-slot="scope">
-              <!--              <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>-->
-              <el-switch
-                  v-model="scope.row.status===1"
-              >
-              </el-switch>
-            </template>
-          </el-table-column>
-          <!--          <el-table-column label="父级ID" align="center" prop="parentId"/>-->
-          <el-table-column label="创建时间" align="center" prop="createTime">
-            <template v-slot="scope">
-              <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}') }}</span>
-            </template>
-          </el-table-column>
-          <!--        <el-table-column label="类型" align="center" prop="type"/>-->
-          <!--          <el-table-column label="图片" align="center" prop="imgUrls"/>-->
-          <!--          <el-table-column label="模块摘要" align="center" prop="digest"/>-->
-          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-            <template v-slot="scope">
-              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
-                         v-hasPermi="['supplier:login-page-popularize-module-config:update']"
-              >编辑
-              </el-button>
-              <el-button size="mini" type="text" icon="el-icon-view"
-              >预览
-              </el-button>
-              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
-                         v-hasPermi="['supplier:login-page-popularize-module-config:delete']"
-              >删除
+        <div v-if="menu.parentId === 'aboutHZL'">
+          <editor v-model="aboutHZLData.pageContent" :min-height="480"></editor>
+        </div>
+        <div v-if="menu.parentId !== 'aboutHZL'">
+          <!-- 操作工具栏 -->
+          <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+              <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd(1,menu.parentId)">新增
               </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
+            </el-col>
+            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+          </el-row>
+          <!-- 列表 -->
+          <el-table v-loading="menu.loading" :data="menu.data">
+            <el-table-column label="序号" align="center" prop="id"/>
+            <el-table-column label="名称" align="center" prop="name"/>
+            <!--        <el-table-column label="链接" align="center" prop="link"/>-->
+            <el-table-column label="排序" align="center" prop="sort"/>
+            <el-table-column label="状态" align="center" prop="status">
+              <template slot-scope="scope">
+                <el-switch :active-value="1"
+                           :inactive-value="0"
+                           v-model="scope.row.status"
+                           @change="updateStatus(scope.row)"
+                >
+                </el-switch>
+              </template>
+            </el-table-column>
+            <!--          <el-table-column label="父级ID" align="center" prop="parentId"/>-->
+            <el-table-column label="创建时间" align="center" prop="createTime">
+              <template slot-scope="scope">
+                <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}') }}</span>
+              </template>
+            </el-table-column>
+            <!--        <el-table-column label="类型" align="center" prop="type"/>-->
+            <!--          <el-table-column label="图片" align="center" prop="imgUrls"/>-->
+            <!--          <el-table-column label="模块摘要" align="center" prop="digest"/>-->
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+              <template v-slot="scope">
+                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row,scope.row.type)"
+                           v-hasPermi="['supplier:login-page-popularize-module-config:update']"
+                >编辑
+                </el-button>
+                <el-button size="mini" type="text" icon="el-icon-view" @click="preView(scope.row.type,scope.row,index)"
+                >预览
+                </el-button>
+                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                           v-hasPermi="['supplier:login-page-popularize-module-config:delete']"
+                >删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+
       </div>
 
       <!-- 分页组件 -->
@@ -65,24 +73,26 @@
     </div>
 
     <div>
-      <div style="font-size: 30px;margin-bottom: 10px;background: #1c84c6;padding: 10px;color: #ffffff">
-        中部模块配置
-      </div>
+
       <!-- 操作工具栏 -->
       <el-row :gutter="10" class="mb8">
         <el-col :span="1.5">
-          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd(3)">新增模块</el-button>
+          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd(2)">新增模块</el-button>
         </el-col>
         <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
       </el-row>
       <!-- 列表 -->
-      <el-table v-loading="loading" :data="moduleList">
+      <el-table v-loading="modObj.loading" :data="modObj.data">
         <el-table-column label="序号" align="center" prop="id"/>
         <el-table-column label="模块名称" align="center" prop="name"/>
         <el-table-column label="排序" align="center" prop="sort"/>
         <el-table-column label="状态" align="center" prop="status">
-          <template v-slot="scope">
-            <el-switch v-model="scope.row.status===1">
+          <template slot-scope="scope">
+            <el-switch :active-value="1"
+                       :inactive-value="0"
+                       v-model="scope.row.status"
+                       @change="updateStatus(scope.row)"
+            >
             </el-switch>
           </template>
         </el-table-column>
@@ -97,7 +107,7 @@
             <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row,scope.row.type)"
             >编辑
             </el-button>
-            <el-button size="mini" type="text" icon="el-icon-edit"
+            <el-button size="mini" type="text" icon="el-icon-view" @click="preView(2,scope.row,0)"
             >预览
             </el-button>
             <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
@@ -106,55 +116,95 @@
           </template>
         </el-table-column>
       </el-table>
-      <div style="padding: 0 15%" ref="sortableContainer">
-        <div shadow="hover" v-for="item in vModules" :key="item"
+      <div style="padding: 0 12%" ref="sortableContainer">
+        <!--        <div shadow="hover" v-for="(item,index) in [1,2,3,4,5,6]" :key="index"-->
+        <div shadow="hover" v-for="(item,index1) in loginModuleDataDisplayCopy" :key="index1"
              class="module-item"
              :style="{height: vModuleHeight +'px'}"
         >
-          {{ item }}
-          <div style="position: relative;text-align: center;z-index: 99999"
-               :style="{top: vModuleHeight - 80 +'px'}"
+          <div style="height: 12%;padding: 10px 10px 5px"
+               :style="{fontSize: vModuleFontSize1 +'px'}"
           >
+            {{ item.name }}
+          </div>
+          <div style="height: 78%;padding:10px 10px 10px">
+            <div style="height: 85%">
+              <img :src="item.imgUrls" width="100%" height="100%">
+            </div>
+            <div style="height: 15%;text-align: center;margin: 10px 0"
+                 :style="{fontSize: vModuleFontSize2 +'px'}"
+            >
+              {{ item.digest }}
+            </div>
+          </div>
+          <div style="text-align: center;height: 11%;">
             <el-popover placement="top" width="400" trigger="click">
-              <el-button v-for="item in moduleList">{{ item.name }}</el-button>
-              <el-button slot="reference" type="primary">选择模板</el-button>
+              <span v-for="(modItem,index2) in modObj.data" style="margin: 5px">
+                <el-button @click="selectMod(modItem,index1)" :key="index2"> {{ modItem.name }}</el-button>
+              </span>
+              <el-button size="mini" slot="reference" type="primary">选择模板</el-button>
             </el-popover>
           </div>
         </div>
       </div>
     </div>
+    <div>
+      <div style="font-size: 30px;margin-bottom: 10px;background: #1c84c6;padding: 10px;color: #ffffff">
+        底部服务配置
+      </div>
+      <editor v-model="bottomModData.pageContent" :min-height="480"></editor>
+    </div>
     <!-- 对话框(添加 / 修改) -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="700px" v-dialogDrag append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="模块名称" prop="name">
+        <el-form-item v-if="editType === 1" label="方案名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入方案名称"/>
+        </el-form-item>
+        <el-form-item v-if="editType === 2" label="模块名称" prop="name">
           <el-input v-model="form.name" placeholder="请输入模块名称"/>
         </el-form-item>
-        <el-form-item label="链接" prop="link">
-          <el-input v-model="form.link" type="textarea" placeholder="请输入内容"/>
+
+        <el-form-item v-if="editType === 1" label="方案内容" prop="pageContent">
+          <editor v-model="form.pageContent" :min-height="380"/>
+        </el-form-item>
+
+        <el-form-item v-if="editType === 2" label="模块简介" prop="digest">
+          <el-input type="textarea" :autosize="{ minRows: 4 }" v-model="form.digest" :maxlength="50"/>
+        </el-form-item>
+
+        <el-form-item v-if="editType === 2" label="主图" prop="imgUrls">
+          <imageUpload v-model="form.imgUrls"/>
+        </el-form-item>
+        <el-form-item v-if="editType === 2" label="模块详情" prop="pageContent">
+          <editor v-model="form.pageContent" :min-height="380"/>
         </el-form-item>
+        <!--<el-form-item label="链接" prop="link">-->
+        <!--  <el-input v-model="form.link" type="textarea" placeholder="请输入内容"/>-->
+        <!--</el-form-item>-->
         <el-form-item label="排序" prop="sort">
           <el-input v-model="form.sort" placeholder="请输入排序"/>
         </el-form-item>
+
         <el-form-item label="状态" prop="status">
-          <el-radio-group v-model="form.status">
+          <el-radio-group v-model="form.status+''">
             <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
                       :key="dict.value" :label="dict.value"
             >{{ dict.label }}
             </el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label="图片" prop="imgUrls">
-          <el-input v-model="form.imgUrls" placeholder="请输入图片"/>
-        </el-form-item>
-        <el-form-item label="模块摘要" prop="digest">
-          <el-input v-model="form.digest" placeholder="请输入模块摘要"/>
-        </el-form-item>
+
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button icon="el-icon-view" style="background: #c79eff;color: #f3ecec">预 览</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+
+    <el-dialog title="预览" :visible.sync="preOpen" width="1700px">
+      <PreLogin ref="preLogin"></PreLogin>
+    </el-dialog>
   </div>
 </template>
 
@@ -167,12 +217,15 @@ import {
   getLoginPagePopularizeModuleConfigPage,
   exportLoginPagePopularizeModuleConfigExcel
 } from '@/api/supplier/loginPagePopularizeModuleConfig'
-import { getConfigKey } from '@/api/infra/config'
+import { getConfigData, updateConfig } from '@/api/infra/config'
 import Sortable from 'sortablejs'
+import Editor from '@/components/Editor'
+import ImageUpload from '@/components/ImageUpload'
+import PreLogin from './preview/login'
 
 export default {
   name: 'LoginPagePopularizeModuleConfig',
-  components: {},
+  components: { Editor, ImageUpload, PreLogin },
   data() {
     return {
       // 遮罩层
@@ -185,11 +238,15 @@ export default {
       total: 0,
       // 登录页面推广模块配置列表
       list: [],
-      moduleList: [],
+      modObj: {
+        data: [],
+        loading: false
+      },
       // 弹出层标题
       title: '',
       // 是否显示弹出层
       open: false,
+      preOpen: false,
       // 查询参数
       queryParams: {
         pageNo: 1,
@@ -208,13 +265,42 @@ export default {
       form: {},
       // 表单校验
       rules: {},
+      aboutHZLData: {},
+      bottomModData: {},
       loginMenuData: [],
+      configMenuData: {},
+      loginModuleDataDisplayCopy: [],
+      loginModuleData: [],
+      configModuleData: {},
       sortableInstance: null,
-      vModules: [1, 2, 3, 4, 5, 6],
-      vModuleHeight: window.innerHeight * 0.35
+      vModuleHeight: window.innerHeight * 0.45,
+      vModuleFontSize1: window.innerHeight * 0.022,
+      vModuleFontSize2: window.innerHeight * 0.015,
+      editType: 1
+    }
+  },
+  watch: {
+    'aboutHZLData': {
+      handler: function(newValue) {
+        if (!newValue) {
+          return
+        }
+        updateLoginPagePopularizeModuleConfig(newValue)
+        // this.$modal.msgSuccess('更新成功')
+      },
+      deep: true
+    },
+    'bottomModData': {
+      handler: function(newValue) {
+        if (!newValue) {
+          return
+        }
+        updateLoginPagePopularizeModuleConfig(newValue)
+        // this.$modal.msgSuccess('更新成功')
+      },
+      deep: true
     }
   },
-  watch: {},
   mounted() {
     //监听窗口大小变化
     window.addEventListener('resize', this.adVModuleHeightHeight)
@@ -238,39 +324,102 @@ export default {
     }
   },
   created() {
-    this.getList(5, 2, this.moduleList)
-    getConfigKey('login_menu').then(res => {
-      this.loginMenuData = JSON.parse(res.data)
-      this.loginMenuData.forEach(item => {
-        item.data = []
-        this.getList(item.parentId, 1, item.data)
-      })
+    //各个模块初始化数据
+    this.getList('', 2, this.modObj)
+    this.getList('aboutHZL', 1, this.aboutHZLData)
+    this.getList('bottomMod', 3, this.bottomModData)
+    getConfigData('login_menu').then(res => {
+      if (res.data) {
+        this.configMenuData = res.data
+        this.loginMenuData = JSON.parse(res.data.value)
+        this.loginMenuData.forEach(item => {
+          this.getList(item.parentId, 1, item)
+        })
+      }
+    })
+    getConfigData('login_module').then(res => {
+      if (res.data) {
+        this.configModuleData = res.data
+        this.loginModuleData = JSON.parse(res.data.value)
+        this.loginModuleDataDisplayCopy = JSON.parse(res.data.value)
+      }
     })
   },
   methods: {
+    preView(type, data, index) {
+      this.preOpen = true
+      if (type === 1) {
+        this.$nextTick(() => {
+          this.$refs.preLogin.menuPre(data, index)
+        })
+      }
+      if (type === 2) {
+        this.$nextTick(() => {
+          this.$refs.preLogin.modulePre(data, index)
+        })
+      }
+    },
+    /**
+     * 更新配置模块的数据。
+     */
+    updateConfigModData() {
+      this.configModuleData.value = JSON.stringify(this.loginModuleData)
+      updateConfig(this.configModuleData)
+      this.$modal.msgSuccess('更新成功')
+    },
+    selectMod(item, index) {
+
+      this.loginModuleData.splice(index, 1)// 移除旧位置的项
+      this.loginModuleData.splice(index, 0, item) // 在新位置插入项
+
+      this.loginModuleDataDisplayCopy.splice(index, 1)// 移除旧位置的项
+      this.loginModuleDataDisplayCopy.splice(index, 0, item) // 在新位置插入项
+
+      this.updateConfigModData()
+    },
+    updateStatus(row) {
+      updateLoginPagePopularizeModuleConfig(row)
+      this.$modal.msgSuccess('更新成功')
+    },
     adVModuleHeightHeight() {
-      this.vModuleHeight = window.innerHeight * 0.35
+      this.vModuleHeight = window.innerHeight * 0.40
     },
     // 回调函数示例
     handleSort(event) {
       const oldIndex = event.oldIndex
       const newIndex = event.newIndex
-      const movedItem = this.vModules.splice(oldIndex, 1)[0] // 移除旧位置的项
-      this.vModules.splice(newIndex, 0, movedItem) // 在新位置插入项
-      this.$forceUpdate()
-      console.log(this.vModules)
+      const movedItem = this.loginModuleData.splice(oldIndex, 1)[0] // 移除旧位置的项
+      this.loginModuleData.splice(newIndex, 0, movedItem) // 在新位置插入项
+      this.updateConfigModData()
     },
     /** 查询列表 */
     getList(parentId, type, data) {
-      this.queryParams.parentId = parentId
-      this.queryParams.type = type
-      this.loading = true
+      if (type) {
+        this.queryParams.type = type
+        if (type === 1) {
+          data.loading = true
+        }
+      }
+      if (parentId) {
+        this.queryParams.parentId = parentId
+      }
       // 执行查询
       getLoginPagePopularizeModuleConfigPage(this.queryParams).then(response => {
-        response.data.list.forEach(item => {
-          data.push(item)
-        })
-        this.loading = false
+        if (response.data) {
+          switch (parentId) {
+            case 'aboutHZL':
+              this.aboutHZLData = response.data.list[0]
+              break
+            case 'bottomMod':
+              this.bottomModData = response.data.list[0]
+              break
+            default:
+              response.data.list.forEach(item => {
+                data.data.push(item)
+              })
+          }
+          data.loading = false
+        }
       })
     },
     /** 取消按钮 */
@@ -287,9 +436,10 @@ export default {
         sort: undefined,
         parentId: undefined,
         type: undefined,
-        status: undefined,
+        status: 0,
         imgUrls: undefined,
-        digest: undefined
+        digest: undefined,
+        pageContent: undefined
       }
       this.resetForm('form')
     },
@@ -304,19 +454,33 @@ export default {
       this.handleQuery()
     },
     /** 新增按钮操作 */
-    handleAdd(type) {
+    handleAdd(type, parentId) {
       this.reset()
+      this.editType = type
+      if (type === 1) {
+        this.form.type = 1
+        this.form.parentId = parentId
+        this.title = '新增方案'
+      }
+      if (type === 2) {
+        this.form.type = 2
+        this.title = '新增模块'
+      }
       this.open = true
-      this.title = '添加登录页面推广模块配置'
     },
     /** 修改按钮操作 */
     handleUpdate(row, type) {
       this.reset()
       const id = row.id
+      this.editType = type
+      if (type === 1) {
+        this.title = '修改方案'
+      } else if (type === 2) {
+        this.title = '修改模块'
+      }
       getLoginPagePopularizeModuleConfig(id).then(response => {
         this.form = response.data
         this.open = true
-        this.title = '修改登录页面推广模块配置'
       })
     },
     /** 提交按钮 */
@@ -330,7 +494,17 @@ export default {
           updateLoginPagePopularizeModuleConfig(this.form).then(response => {
             this.$modal.msgSuccess('修改成功')
             this.open = false
-            this.getList()
+            if (this.from.type === 1) {
+              for (let i = 0; i < this.loginMenuData.length; i++) {
+                if (this.from.parentId === this.loginMenuData[i].parentId) {
+                  this.getList(this.from.parentId, 1, this.loginMenuData[i])
+                  break
+                }
+              }
+            }
+            if (this.from.type === 2) {
+              this.getList('', 2, this.modObj)
+            }
           })
           return
         }
@@ -338,7 +512,17 @@ export default {
         createLoginPagePopularizeModuleConfig(this.form).then(response => {
           this.$modal.msgSuccess('新增成功')
           this.open = false
-          this.getList()
+          if (this.from.type === 1) {
+            for (let i = 0; i < this.loginMenuData.length; i++) {
+              if (this.from.parentId === this.loginMenuData[i].parentId) {
+                this.getList(this.from.parentId, 1, this.loginMenuData[i])
+                break
+              }
+            }
+          }
+          if (this.from.type === 2) {
+            this.getList('', 2, this.modObj)
+          }
         })
       })
     },
@@ -388,13 +572,16 @@ export default {
 .module-item {
   display: inline-block;
   width: 30%;
-  border: 1px solid #e3e3e3;
   border-radius: 10px;
-  margin: 10px 1.5%
+  margin: 1.2%;
+  box-shadow: 0 0 15px #c0cfe2;
+  /*transition: transform 0.1s ease;*/
 }
 
 .module-item:hover {
-  box-shadow: 0 0 5px #b6aeae;
+  box-shadow: 0 0 15px #c0cfe2;
+  transition: transform 0.4s ease;
+  transform: scale(1.035);
 }
 
 </style>

src/views/supplier/loginPagePopularizeModuleConfig/preview/login.scss

@@ -0,0 +1,453 @@
+/* ===== PC DESIGN ===== */
+$W: 1080;
+$H: 1920;
+$picW: 438;
+$picH: 560;
+$formW: 320;
+$tabW: $formW / 2;
+$rowH: 56;
+$buttonH: 50;
+
+// container
+$containerBgColor: #e6ebf2;
+$containerBgImage: '../../../../assets/images/bg.png';
+// container-logo
+$logoWidth: 417px;
+$logoHeight: 64px;
+// $logoImage: '../../../../assets/logo/login-logo_bak.png';
+// container-content
+$contentWidth: round($W / $H * 70) * 1vw;
+$contentHeight: round($picH / $W * 110) / 100 * ($contentWidth / 1.05);
+// $contentWidth: round($W / $H * 100) * 1vw;
+// $contentHeight: round($picH / $W * 100) / 100 * ($contentWidth / 1);
+$contentBgColor: #ffffff;
+// container-content-pic
+$picWidth: round($picW / $H * 100) * 1vw;
+$picHeight: inherit;
+$picImage: '../../../../assets/images/pic.png';
+// container-content-field
+$fieldWidth: $contentWidth - $picWidth;
+$fieldHeight: inherit;
+// container-content-field-form
+$formWidth: $formW * 1px;
+$tabWidth: $tabW * 1px;
+$rowHeight: $rowH * 1px;
+$buttonHeight: $buttonH * 1px;
+
+// - - - - - 页面基础设置
+.module-item {
+  display: inline-block;
+  width: 30%;
+  border-radius: 10px;
+  margin: 1.2%;
+  box-shadow: 0 0 15px #c0cfe2;
+  /*transition: transform 0.1s ease;*/
+}
+.container {
+  .login-code {
+    width: 33%;
+    height: 38px;
+    float: right;
+
+    img {
+      cursor: pointer;
+      width: 100%;
+      max-width: 100px;
+      height: auto;
+      vertical-align: middle;
+    }
+  }
+
+  // 元素
+  width: inherit;
+  height: inherit;
+  min-width: 1080px;
+  min-height: 620px;
+  background-color: $containerBgColor;
+  //background-image: url($containerBgImage);
+  background-size: cover;
+  // 定位
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  // 文字
+  font-size: 14px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+
+  .logo {
+    // 元素
+    width: $logoWidth;
+    height: $logoHeight;
+    // background-image: url($logoImage);
+    background-size: contain;
+    // 定位
+    position: absolute;
+    top: 50px;
+    left: 50%;
+    margin-left: -$logoWidth/2;
+  }
+
+  .content {
+    // 元素
+    width: $contentWidth;
+    height: $contentHeight;
+    background-color: #ffffff;
+    box-shadow: 0px 16px 40px rgba(0, 0, 0, 0.07);
+    // 输入框圆角
+    // border-radius: 20px;
+    // 定位
+    position: relative;
+
+    .pic {
+      // 元素
+      width: $picWidth;
+      height: $picHeight;
+      background-image: url($picImage);
+      background-repeat: no-repeat;
+      background-size: cover;
+      border-radius: 20px 0 0 20px;
+      // 定位
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+
+    .field {
+      width: $fieldWidth;
+      height: $fieldHeight;
+      // 定位
+      position: absolute;
+      top: 0;
+      left: $picWidth;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .pc-title {
+        width: 100%;
+        clear: both;
+      }
+
+      .mobile-title,
+      .mobile-switch {
+        display: none;
+      }
+
+      .form {
+        box-sizing: border-box;
+        width: $formWidth;
+
+        // - - - tab
+        :deep(.el-tabs__content) {
+          padding: 20px 0 0;
+        }
+
+        :deep(.el-tabs__item) {
+          // 元素
+          width: $tabWidth;
+          height: $rowHeight;
+          padding: 0;
+          // 文字
+          line-height: $rowHeight;
+          color: #666666;
+        }
+
+        :deep(.el-tabs__item.is-active) {
+          font-weight: bold;
+          color: #2F53EB;
+        }
+
+        :deep(.el-tabs__active-bar) {
+          height: 3px;
+          border-radius: 2px;
+        }
+
+        // - - - input
+        :deep(.el-input__inner) {
+          // 元素
+          width: 100%;
+          height: $rowHeight;
+          background: #f5f5f5;
+          border: 0;
+          border-radius: 28px;
+          // 文字
+          text-align: center;
+          line-height: 19px;
+          color: #262626;
+        }
+
+        .code:deep(.el-input__inner) {
+          padding: 0 24px;
+          // 文字
+          text-align: left;
+        }
+
+        :deep(.el-input__inner::-webkit-input-placeholder) {
+          /* WebKit browsers */
+          font-weight: 400;
+          color: #8C8C8C;
+        }
+
+        :deep(.el-input__inner:-moz-placeholder) {
+          /* Mozilla Firefox 4 to 18 */
+          font-weight: 400;
+          color: #8C8C8C;
+        }
+
+        :deep(.el-input__inner::-moz-placeholder) {
+          /* Mozilla Firefox 19+ */
+          font-weight: 400;
+          color: #8C8C8C;
+          opacity: 1;
+        }
+
+        :deep(.el-input__inner:-ms-input-placeholder) {
+          /* Internet Explorer 10+ */
+          font-weight: 400;
+          color: #8C8C8C !important;
+        }
+
+        :deep(.el-form-item) {
+          position: relative;
+
+          .button-code {
+            // 元素
+            height: $rowHeight;
+            box-sizing: border-box;
+            // 定位
+            position: absolute;
+            top: 0;
+            right: 20px;
+            z-index: 1;
+            // 文字
+            line-height: 20px;
+            font-size: 14px;
+            font-family: PingFang SC;
+            font-weight: 400;
+            color: #2F53EB;
+
+            span {
+              padding-left: 15px;
+              border-left: 2px solid #D9D9D9;
+            }
+          }
+        }
+
+        :deep(.el-form-item__error) {
+          padding-left: 24px;
+        }
+
+        .button {
+          width: 100%;
+          height: $buttonHeight;
+          background: rgba(24, 144, 255, 0.2);
+          border: 0;
+          border-radius: 24px;
+          margin-bottom: 20px;
+          // 文字
+          line-height: 26px;
+          font-size: 20px;
+          color: #FFFFFF;
+        }
+
+        .button-active {
+          background: #2F53EB;
+          box-shadow: 0px 2px 8px rgba(0, 80, 184, 0.2);
+        }
+      }
+    }
+  }
+
+  .footer {
+    // 元素
+    height: 16px;
+    line-height: 16px;
+    font-size: 12px;
+    color: #8c8c8c;
+    // 定位
+    position: absolute;
+    bottom: 30px;
+
+    a,
+    a:hover,
+    a:active {
+      color: inherit;
+      text-decoration: none;
+    }
+  }
+}
+
+// - - - - - PC 最小尺寸设置
+@media screen and (min-width: 599px) and (max-width: 1366px) {
+  .container {
+    .content {
+      width: 710px;
+      height: 397px;
+
+      .pic {
+        width: 314px;
+      }
+
+      .field {
+        width: calc(710px - 314px);
+        left: 314px;
+
+        .form {
+          width: 320px;
+
+          :deep(.el-input__inner) {
+            width: 320px;
+            height: 56px;
+          }
+
+          .button {
+            height: 50px;
+          }
+        }
+      }
+    }
+  }
+}
+
+
+/* ===== MOBILE DESIGN ===== */
+$mobileW: 375;
+$mobileH: 812;
+$mobileContentW: 327;
+$mobileContentH: 376;
+$mobileFormW: 280;
+$mobileRowH: 48;
+$mobileButtonH: 48;
+
+// container
+$mobileContainerBgImage: '../../../../assets/images/bg-mobile.png';
+// container-content
+$mobileContentWidth: round($mobileContentW / $mobileW * 100) * 1vw;
+$mobileContentHeight: round($mobileContentH / $mobileW * 100) / 100 * $mobileContentWidth;
+// container-content-field-form
+$mobileFormWidth: round($mobileFormW / $mobileW *100) * 1vw;
+$mobileRowHeight: $mobileRowH * 1px;
+$mobileButtonHeight: $mobileButtonH * 1px;
+$iconBgImage: '../../../../assets/images/icon.png';
+
+// - - - - - 移动端设置
+@media screen and (max-width: 599px) {
+  .container {
+    // 元素
+    background-image: url($mobileContainerBgImage);
+    min-width: 280px;
+    min-height: 568px;
+    // 文字
+    font-size: 17px;
+    font-family: PingFang SC;
+    font-weight: bold;
+
+    .logo {
+      display: none;
+    }
+
+    .content {
+      // 元素
+      width: $mobileContentWidth;
+      height: $mobileContentHeight;
+      min-width: 250px;
+      min-height: 340px;
+      // 定位
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .pic {
+        display: none;
+      }
+
+      .field {
+        // 元素
+        width: inherit;
+        min-height: inherit;
+        // 定位
+        left: 0;
+        display: flex;
+        flex-direction: column;
+
+        .mobile-title {
+          // 元素
+          margin: 0 0 20px;
+          display: block;
+        }
+
+        .form {
+          width: $mobileFormWidth;
+
+          // - - - tab
+          :deep(.el-tabs__header) {
+            display: none;
+          }
+
+          :deep(.el-tabs__content) {
+            padding: 0;
+          }
+
+          // - - - input
+          :deep(.el-input__inner) {
+            height: $mobileRowHeight;
+            line-height: 24px;
+            // 文字
+            text-align: center;
+            color: #262626;
+          }
+
+          :deep(.el-form-item) {
+            .button-code {
+              // 元素
+              height: $mobileRowHeight;
+            }
+          }
+
+          .button {
+            height: $mobileButtonHeight;
+            line-height: 24px;
+            color: #FFFFFF;
+          }
+        }
+
+        .mobile-switch {
+          display: block;
+          line-height: 20px;
+          font-size: 14px;
+          font-weight: 400;
+          color: #595959;
+          margin: 0;
+
+          .icon {
+            width: 14px;
+            height: 14px;
+            display: inline-block;
+            background-image: url($iconBgImage);
+            background-size: cover;
+          }
+        }
+
+        .mobile-switch:hover {
+          cursor: pointer;
+        }
+      }
+    }
+
+    .footer {
+      // 元素
+      font-size: 12px;
+      font-family: PingFang SC;
+      font-weight: 400;
+      line-height: 17px;
+      color: #333333;
+      opacity: 0.6;
+      // 定位
+      position: absolute;
+      bottom: 20px;
+    }
+  }
+
+}

src/views/supplier/loginPagePopularizeModuleConfig/preview/login.vue

@@ -0,0 +1,300 @@
+<template xmlns="">
+  <div>
+    <top-menu :methodType="1" ref="topMenu"></top-menu>
+    <div>
+      <div class="container">
+        <!-- <div class="logo"></div> -->
+        <div class="processPic">
+          <img
+              src="@/assets/images/process.gif"
+              style="width: 90%; height: 100%"
+          />
+        </div>
+        <!-- 登录区域 -->
+        <!-- <div class="content" style="margin-top: 1%; margin-left: 4%"></div> -->
+        <div class="content" style="margin-left: 6%; z-index: 1">
+          <div class="loginLeft">
+            <div style="width: 100%; height: 100%">
+              <h1 style="font-size: 32px; text-align: center; margin: 0 auto">
+                <el-skeleton-item variant="text" style="width: 50%;height:30px"/>
+              </h1>
+              <el-skeleton-item variant="image" style="width: 70%; height: 70%; margin: 5px auto 0 auto"/>
+
+              <div style="width: 100%;height: 25%;text-align: center;margin-top: 10px;">
+                <el-skeleton-item variant="text" style="width: 90%;"/>
+                <el-skeleton-item variant="text" style="width: 30%;"/>
+                <!-- <el-button @click="testLogin">测试登录</el-button> -->
+              </div>
+            </div>
+          </div>
+          <div class="loginRight">
+            <div style="width: 80%; height: 100%; margin: 40px auto">
+              <h1 style="font-size: 32px; text-align: center; margin: 0 auto">
+                <el-skeleton-item variant="text" style="width: 50%;height:30px"/>
+              </h1>
+              <el-form
+                  ref="loginForm"
+                  style="margin-left: 10px; margin-top: 20px"
+              >
+                <!-- 账号密码登录 -->
+                <div>
+                  <el-skeleton-item variant="text" style="width: 95%;height: 20px"/>
+                  <el-skeleton-item variant="text" style="width: 95%;height: 20px"/>
+                  <el-skeleton-item variant="text" style="width: 95%;height: 20px"/>
+                  <el-skeleton-item variant="text" style="width: 95%;height: 20px"/>
+                </div>
+                <!-- 下方的登录按钮 -->
+                <el-form-item style="width: 100%; margin-top: 10px">
+                  <el-button
+                      size="medium"
+                      type="primary"
+                      style="width: 95%;height: 40px"
+                  >
+                    <span style="font-size: 14px">登 录</span>
+                  </el-button>
+                </el-form-item>
+              </el-form>
+            </div>
+          </div>
+          <!-- 注册 -->
+          <!-- <div class="rightUp">
+            <img
+              src="@/assets/images/upRight1.png"
+              style="width: 100%; height: 100%"
+            />
+          </div> -->
+        </div>
+        <div class="loginTitle">
+          <span class="loginTitleStr">赋 予 装 备 智 慧 动 能 · 构 建 场 景 数 字 脉 络</span>
+        </div>
+
+      </div>
+      <div style="padding: 3% 12%">
+        <!--        <div shadow="hover" v-for="(item,index) in [1,2,3,4,5,6]" :key="index"-->
+        <div shadow="hover" v-for="(item,index1) in loginModuleData" :key="index1"
+             class="module-item"
+             :style="{height: vModuleHeight +'px'}"
+        >
+          <div style="height: 12%;padding: 10px 10px 5px"
+               :style="{fontSize: vModuleFontSize1 +'px'}"
+          >
+            <div v-if="item.name">
+              {{ item.name }}
+            </div>
+            <el-skeleton-item v-else variant="text" style="width: 80%;height:30px"/>
+          </div>
+          <div style="height: 78%;padding: 10px 10px 10px;">
+            <div style="height: 85%;">
+              <img v-if="item.imgUrls" :src="item.imgUrls" width="100%" height="100%">
+              <el-skeleton-item v-else variant="image" style="width: 100%; height: 100%;"/>
+            </div>
+            <div style="height: 15%;text-align: center;margin: 10px 0"
+                 :style="{fontSize: vModuleFontSize2 +'px'}"
+            >
+              <div v-if="item.digest">
+                {{ item.digest }}
+              </div>
+              <div v-else>
+                <el-skeleton-item variant="image" style="width: 100%; height: 15px;margin: 2px 0"/>
+                <el-skeleton-item variant="image" style="width: 100%; height: 15px;margin: 2px 0"/>
+              </div>
+            </div>
+          </div>
+          <div style="text-align: center;height: 10%;">
+            <el-button size="mini" slot="reference" type="primary">了解详情<i class="el-icon-arrow-right"></i></el-button>
+          </div>
+        </div>
+      </div>
+      <!-- footer class="footer"-->
+      <div style="margin-top: 50px;text-align: center;"
+           :style="{fontSize: bottomFontSize +'px'}"
+      >
+        <div style="margin: 10px 0">
+          <a style="margin: 0 15px">会山科技</a> |
+          <a style="margin: 0 15px">版权所有</a> |
+          <a style="margin: 0 15px">市场合作</a> |
+          <a style="margin: 0 15px">关于会助理</a> |
+          <a style="margin: 0 15px">使用协议</a> |
+          <a style="margin: 0 15px">隐私条款</a>
+        </div>
+        <div style="margin: 10px 0">
+          {{ version }} <span style="margin-left: 30px">开发者：会山科技</span>
+        </div>
+        <div style="margin: 10px 0">
+          沪 I C P 备 1 9 0 0 7 0 6 1 号 - 1
+        </div>
+        Copyright © 2023-2024 willalp.com All Rights Reserved.
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import topMenu from './topMenu.vue'
+import { getConfigData } from '@/api/infra/config'
+
+export default {
+  name: 'Login',
+  components: {
+    topMenu
+  },
+  data() {
+    return {
+      loginModuleData: [{
+        name: null,
+        imgUrls: null,
+        digest: null
+      }, {
+        name: null,
+        imgUrls: null,
+        digest: null
+      }, {
+        name: null,
+        imgUrls: null,
+        digest: null
+      }, {
+        name: null,
+        imgUrls: null,
+        digest: null
+      }, {
+        name: null,
+        imgUrls: null,
+        digest: null
+      }, {
+        name: null,
+        imgUrls: null,
+        digest: null
+      }],
+      vModuleHeight: window.innerHeight * 0.45,
+      vModuleFontSize1: window.innerHeight * 0.022,
+      vModuleFontSize2: window.innerHeight * 0.015,
+      bottomFontSize: window.innerHeight * 0.018,
+      version: '会助理平台 v2.0.2 版'
+    }
+  },
+  beforeCreate() {
+  },
+  watch: {},
+  created() {
+    //监听窗口大小变化
+    window.addEventListener('resize', this.adVModuleHeightHeight)
+    // getConfigData('login_module').then(res => {
+    //   if (res.data) {
+    //     this.loginModuleData = JSON.parse(res.data.value)
+    //   }
+    // })
+
+  },
+  methods: {
+    modulePre(data, index) {
+      console.log('开始预览')
+      this.loginModuleData.splice(index, 1, data)
+    },
+    menuPre(data,index) {
+      this.$refs.topMenu.menuPre(data,index)
+    },
+    adVModuleHeightHeight() {
+      this.vModuleHeight = window.innerHeight * 0.45
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import "login.scss";
+
+//.el-form-item {
+//  margin-bottom: 20px !important;
+//}
+
+.loginTitle {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+}
+
+.loginTitleStr {
+  position: absolute;
+  color: #4588f6;
+  font-size: 22px;
+  bottom: 12%;
+  right: 9.5%;
+}
+
+::v-deep .el-input__inner {
+  border-radius: 0px;
+  border-top-width: 0px;
+  border-left-width: 0px;
+  border-right-width: 0px;
+  border-bottom-width: 1px;
+  /*outline: medium;*/
+}
+
+.rightUp {
+  width: 12.3%;
+  height: 20%;
+  background-color: yellow;
+  right: 0px;
+  // z-index: 9999;
+  position: absolute;
+}
+
+.loginLeft {
+  width: 45%;
+  height: 80%;
+  margin: 6% 1%;
+  float: left;
+  // z-index: 1;
+  border-width: 0 4px 0 0;
+  border-style: solid;
+  border-color: #c4cbd7;
+}
+
+.loginRight {
+  width: 50%;
+  height: 100%;
+  margin: 1% 0;
+  float: left;
+  // z-index: 1;
+}
+
+.processPic {
+  //margin-top: 1%;
+  // margin-left: 3%;
+  width: 35%;
+}
+
+.oauth-login {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.oauth-login-item {
+  display: flex;
+  align-items: center;
+  margin-right: 10px;
+}
+
+.oauth-login-item img {
+  height: 25px;
+  width: 25px;
+}
+
+.oauth-login-item span:hover {
+  text-decoration: underline red;
+  color: red;
+}
+
+.sms-login-mobile-code-prefix {
+  :deep(.el-input__prefix) {
+    top: 22%;
+  }
+}
+
+.dropdown-link-text {
+  font-size: 20px;
+  font-weight: bold;
+}
+</style>

src/views/supplier/loginPagePopularizeModuleConfig/preview/topMenu.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="topMenu">
+    <div class="topLogo">
+      <img
+          src="@/assets/images/new_text_log.png"
+          style="width: 100%; height: 100%"
+      />
+    </div>
+    <div class="menuSty">
+      <el-dropdown
+          v-for="item in menuList"
+          :key="item"
+          style="margin-right: 40px"
+      >
+        <span class="el-dropdown-link">
+          {{ item.menuName }}<i class="el-icon-arrow-down el-icon--right"></i>
+        </span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item v-for="it in item.childMenu" :key="it">{{
+              it.name
+            }}
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+    <div class="topBtn">
+      <span class="mobileSty">
+        <i class="el-icon-phone-outline"></i>
+        0513-88888888
+      </span>
+      <el-button
+          type="primary"
+          class="btnSty"
+      >注册
+      </el-button
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'topMenu',
+  props: {
+    methodType: {
+      type: Number,
+      default: 2
+    }
+  },
+  data() {
+    return {
+      menuList: [
+        {
+          menuName: '行业解决方案',
+          childMenu: []
+        },
+        {
+          menuName: '行业标杆',
+          childMenu: []
+        },
+        {
+          menuName: '服务支持',
+          childMenu: []
+        },
+        {
+          menuName: '关于会助理',
+          childMenu: [{ cName: '关于会助理' }]
+        }
+      ]
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    menuPre(data, index) {
+      this.menuList[index].childMenu.splice(0, 1, data)
+      console.log(this.menuList[index])
+    },
+    /**
+     * 跳转登录页面
+     */
+    toLogin() {
+      this.$router.push('/login').catch(() => {
+      })
+    },
+    /**
+     * 跳转注册页面
+     */
+    toRegister() {
+      this.$router.push('/register').catch(() => {
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.menuSty {
+  float: left;
+  width: 40%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.mobileSty {
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: 400;
+  font-size: 18px;
+  color: #333333;
+  line-height: 18px;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+
+.btnSty {
+  font-size: 20px;
+  width: 102px;
+  height: 50px;
+  margin-left: 3%;
+}
+
+.topBtn {
+  float: left;
+  width: 28%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.topLogo {
+  float: left;
+  width: 20%;
+  height: 100%;
+  margin-left: 12%;
+}
+
+.topMenu {
+  background: #f0f7ff;
+  height: 8vh;
+}
+
+.dropdown-link-text {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.el-dropdown-link {
+  cursor: pointer;
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: 400;
+  font-size: 16px;
+  color: #333333;
+  line-height: 18px;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+
+.el-icon-arrow-down {
+  font-size: 12px;
+}
+</style>