v1.7版本页面新增开发修改

components/SimpleDeviceParams/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="simple-device-params">
+    
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

components/SimpleLogin/index.vue

@@ -338,20 +338,40 @@ export default {
           }
         }
       }
+
+      .control {
+        font-size: 3.2vw;
+
+        .forget,
+        .regist {
+          cursor: pointer;
+        }
+        .forget {
+          color: #666;
+
+          &:hover {
+            @include themify($themes) {
+              color: themed('color');
+            }
+          }
+        }
+        .regist {
+          @include themify($themes) {
+            color: themed('color');
+          }
+        }
+      }
       .submit {
         width: 62vw;
         height: 8.8vw;
-        @include themify($themes) {
-          background: themed('color');
-        }
         font-size: 3.2vw;
         color: #fff;
         text-align: center;
         line-height: 8.8vw;
         transition: all 0.4s;
 
-        &:hover {
-          background-color: #b60c1a;
+        @include themify($themes) {
+          background: themed('color');
         }
       }
     }

components/SimpleRadio/index.vue

@@ -0,0 +1,272 @@
+<template>
+  <div class="simple-radio">
+    <template v-for="(item, index) in list">
+      <div
+        class="simple-radio__item"
+        :class="[
+          'simple-radio-theme-' + type,
+          { active: item.value === value },
+        ]"
+        :key="index"
+        @click="onClick(item)"
+      >
+        <span class="simple-radio__con"></span>
+        <span class="simple-radio__label" v-text="item.name"></span>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
+  props: {
+    value: {
+      type: Number,
+      default: 0,
+    },
+    list: {
+      type: Array,
+      default: [],
+    },
+    type: {
+      type: String,
+      default: 'rect',
+    },
+  },
+  methods: {
+    onClick(item) {
+      this.$emit('change', item.value)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+// pc端
+@media screen and (min-width: 768px) {
+  .simple-radio {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: wrap;
+
+    .simple-radio__item {
+      cursor: pointer;
+      margin-right: 40px;
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      .simple-radio__label {
+        font-size: 14px;
+        color: #666;
+      }
+
+      &.simple-radio-theme-rect {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 117px;
+        height: 46px;
+        box-sizing: border-box;
+        border: 1px solid #c2c2c2;
+        border-radius: 2px;
+        position: relative;
+        overflow: hidden;
+
+        &.active {
+          @include themify($themes) {
+            border-color: themed('color');
+          }
+
+          .simple-radio__con {
+            position: absolute;
+            right: -20px;
+            bottom: -20px;
+            width: 40px;
+            height: 40px;
+
+            color: #fff;
+            transform: rotateZ(45deg);
+            @include themify($themes) {
+              background: themed('color');
+            }
+
+            &::after {
+              content: '选中';
+              position: absolute;
+              left: -5px;
+              top: 0;
+              display: block;
+              font-size: 10px;
+              transform: rotateZ(-90deg) scale(0.8);
+            }
+          }
+        }
+      }
+
+      &.simple-radio-theme-defalut {
+        position: relative;
+        padding-left: 24px;
+
+        &.active {
+          .simple-radio__con {
+            &::before {
+              @include themify($themes) {
+                background: themed('color');
+              }
+            }
+          }
+        }
+
+        .simple-radio__con {
+          position: absolute;
+          left: 0;
+          top: 50%;
+          width: 18px;
+          height: 18px;
+          box-sizing: border-box;
+          border-radius: 50%;
+          transform: translateY(-50%);
+
+          @include themify($themes) {
+            border: 1px solid themed('color');
+          }
+
+          &::before {
+            display: block;
+            content: '';
+            width: 8px;
+            height: 8px;
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            border-radius: 50%;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 移动端
+@media screen and (max-width: 768px) {
+  .simple-radio {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: wrap;
+
+    .simple-radio__item {
+      cursor: pointer;
+
+      .simple-radio__label {
+        font-size: 3.4vw;
+        color: #666;
+      }
+
+      &.simple-radio-theme-rect {
+        margin-right: 2.4vw;
+        margin-bottom: 2.4vw;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 27vw;
+        height: 11.8vw;
+        box-sizing: border-box;
+        border: 1px solid #c2c2c2;
+        border-radius: 0.4vw;
+        position: relative;
+        overflow: hidden;
+
+        &:nth-child(3n) {
+          margin-right: 0;
+        }
+
+        &.active {
+          @include themify($themes) {
+            border-color: themed('color');
+          }
+
+          .simple-radio__con {
+            position: absolute;
+            right: -20px;
+            bottom: -20px;
+            width: 40px;
+            height: 40px;
+
+            color: #fff;
+            transform: rotateZ(45deg);
+            @include themify($themes) {
+              background: themed('color');
+            }
+
+            &::after {
+              content: '选中';
+              position: absolute;
+              left: -5px;
+              top: 0;
+              display: block;
+              font-size: 10px;
+              transform: rotateZ(-90deg) scale(0.8);
+            }
+          }
+        }
+      }
+
+      &.simple-radio-theme-defalut {
+        position: relative;
+        padding-left: 6vw;
+        margin-right: 7.2vw;
+
+        &:nth-child(4n) {
+          margin-right: 0;
+        }
+
+        &.active {
+          .simple-radio__con {
+            &::before {
+              @include themify($themes) {
+                background: themed('color');
+              }
+            }
+          }
+        }
+
+        .simple-radio__con {
+          position: absolute;
+          left: 0;
+          top: 50%;
+          width: 3.6vw;
+          height: 3.6vw;
+          box-sizing: border-box;
+          border-radius: 50%;
+          transform: translateY(-50%);
+
+          @include themify($themes) {
+            border: 1px solid themed('color');
+          }
+
+          &::before {
+            display: block;
+            content: '';
+            width: 1.8vw;
+            height: 1.8vw;
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            border-radius: 50%;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

components/SimpleStep/index.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="simple-step">
+    <div
+      class="simple-step__item"
+      v-for="(item, index) in list"
+      :key="index"
+      :class="{ active: index === active }"
+    >
+      <span v-text="item[label]"></span>
+      <span class="simple-step__line"></span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'simple-step',
+  props: {
+    list: {
+      type: Array,
+      default: [],
+    },
+    label: {
+      type: String,
+      default: 'label',
+    },
+    active: {
+      type: Number,
+      default: 0,
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+// pc端
+@media screen and (min-width: 768px) {
+  .simple-step {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    padding: 24px 0;
+
+    .simple-step__item {
+      font-size: 24px;
+      color: #282828;
+
+      position: relative;
+      padding-bottom: 4px;
+      cursor: pointer;
+
+      &.active {
+        .simple-step__line {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          height: 3px;
+          @include themify($themes) {
+            background-color: themed('color');
+          }
+        }
+      }
+    }
+  }
+}
+
+// 移动端
+@media screen and (max-width: 768px) {
+  .simple-step {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    padding: 8vw 0 6vw;
+
+    .simple-step__item {
+      font-size: 4.2vw;
+      color: #999;
+
+      position: relative;
+      padding-bottom: 1.2vw;
+      cursor: pointer;
+
+      &.active {
+        color: #282828;
+
+        .simple-step__line {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          height: 0.5vw;
+          @include themify($themes) {
+            background-color: themed('color');
+          }
+        }
+      }
+    }
+  }
+}
+</style>

components/SimpleUploadImage/index.vue

@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <el-upload
+      :class="{ 'el-upload-hidden': !chooseState }"
+      :list-type="listType"
+      :action="action"
+      :headers="headers"
+      :on-success="uploadImageSuccess"
+      :on-remove="handleImageRemove"
+      :before-upload="beforeUpload"
+      :on-error="uploadError"
+      :on-preview="handlePictureCardPreview"
+      :limit="limit"
+      :multiple="multiple"
+      :accept="accept"
+      :file-list="imageList"
+    >
+      <div v-if="tip" slot="tip" class="el-upload__tip">{{ tip }}</div>
+      <i slot="default" class="el-icon-plus" />
+    </el-upload>
+    <el-dialog :visible.sync="dialogVisible">
+      <img width="100%" :src="dialogImageUrl" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+// import { mapGetters } from 'vuex'
+export default {
+  name: 'SimpleUploadImage',
+  props: {
+    tip: {
+      type: String,
+      default: '',
+    },
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
+    limit: {
+      type: Number,
+      default: 1,
+    },
+    accept: {
+      type: String,
+      default: '.jpg,.png,.gif',
+    },
+    listType: {
+      type: String,
+      default: 'picture-card',
+    },
+    imageList: {
+      type: Array,
+      default: () => [],
+    },
+    uuid: {
+      type: Number,
+      default: 0,
+    },
+    beforeUpload: {
+      type: Function,
+      default: () => true,
+    },
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      dialogImageUrl: '',
+    }
+  },
+  computed: {
+    // ...mapGetters(['token']),
+    chooseState() {
+      return this.imageList.length < this.limit
+    },
+    action() {
+      return process.env.VUE_APP_UPLOAD_API + '/upload/image'
+    },
+    headers() {
+      return {
+        // 'X-Token': this.token,
+      }
+    },
+  },
+  methods: {
+    // 上传成功
+    uploadImageSuccess(response, file, fileList) {
+      this.$emit('success', { response, file, fileList })
+    },
+    // 删除
+    handleImageRemove(file, fileList) {
+      this.$emit('remove', { file, fileList })
+    },
+    // 上传失败
+    uploadError(err, file, fileList) {
+      this.$emit('error', { err, file, fileList })
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url
+      this.dialogVisible = true
+    },
+  },
+}
+</script>

nuxt.config.js

@@ -24,11 +24,17 @@ export default {
   },
 
   // Global CSS: https://go.nuxtjs.dev/config-css
-  css: ['vant/lib/index.css', 'swiper/css/swiper.css', '@/styles/global.css'],
+  css: [
+    'vant/lib/index.css',
+    'element-ui/lib/theme-chalk/index.css',
+    'swiper/css/swiper.css',
+    '@/styles/global.css',
+  ],
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
   plugins: [
     '@/plugins/vant',
+    '@/plugins/element-ui',
     '@/plugins/axios',
     '@/plugins/vue-filters',
     '@/plugins/storage',
@@ -41,7 +47,7 @@ export default {
   buildModules: [
     '@nuxtjs/style-resources',
     // https://go.nuxtjs.dev/tailwindcss
-    '@nuxtjs/tailwindcss'
+    '@nuxtjs/tailwindcss',
   ],
 
   // Modules: https://go.nuxtjs.dev/config-modules
@@ -63,8 +69,8 @@ export default {
       chunk: ({ isDev }) => (isDev ? '[name].js' : '[id].[contenthash].js'),
     },
     styleResources: {
-      scss: './themes/themeMixin.scss'
-    }
+      scss: './themes/themeMixin.scss',
+    },
   },
 
   // 配置 Nuxt.js 应用是开发模式还是生产模式

package-lock.json

@@ -3177,6 +3177,14 @@
       "integrity": "sha512-VUeSMD8nEGBWaZK4lizI1sf3yEC7pnAQ/mrI7pC2fBz2s/tq5jWWEngTwaf0Gruu/OoXRGLGg1XFqpYBiGTYJA==",
       "dev": true
     },
+    "async-validator": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-1.8.5.tgz",
+      "integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
+      "requires": {
+        "babel-runtime": "6.x"
+      }
+    },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
@@ -3257,6 +3265,11 @@
         "is-retry-allowed": "^2.2.0"
       }
     },
+    "babel-helper-vue-jsx-merge-props": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+      "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
+    },
     "babel-loader": {
       "version": "8.2.4",
       "resolved": "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.2.4.tgz",
@@ -3268,6 +3281,38 @@
         "schema-utils": "^2.6.5"
       }
     },
+    "babel-plugin-component": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/babel-plugin-component/-/babel-plugin-component-1.1.1.tgz",
+      "integrity": "sha512-WUw887kJf2GH80Ng/ZMctKZ511iamHNqPhd9uKo14yzisvV7Wt1EckIrb8oq/uCz3B3PpAW7Xfl7AkTLDYT6ag==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "7.0.0-beta.35"
+      },
+      "dependencies": {
+        "@babel/helper-module-imports": {
+          "version": "7.0.0-beta.35",
+          "resolved": "https://registry.npmmirror.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0-beta.35.tgz",
+          "integrity": "sha512-vaC1KyIZSuyWb3Lj277fX0pxivyHwuDU4xZsofqgYAbkDxNieMg2vuhzP5AgMweMY7fCQUMTi+BgPqTLjkxXFg==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "7.0.0-beta.35",
+            "lodash": "^4.2.0"
+          }
+        },
+        "@babel/types": {
+          "version": "7.0.0-beta.35",
+          "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.0.0-beta.35.tgz",
+          "integrity": "sha512-y9XT11CozHDgjWcTdxmhSj13rJVXpa5ZXwjjOiTedjaM0ba5ItqdS02t31EhPl7HtOWxsZkYCCUNrSfrOisA6w==",
+          "dev": true,
+          "requires": {
+            "esutils": "^2.0.2",
+            "lodash": "^4.2.0",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
     "babel-plugin-dynamic-import-node": {
       "version": "2.3.3",
       "resolved": "https://registry.npmmirror.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
@@ -3303,6 +3348,27 @@
         "@babel/helper-define-polyfill-provider": "^0.3.1"
       }
     },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmmirror.com/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npmmirror.com/core-js/-/core-js-2.6.12.tgz",
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+        },
+        "regenerator-runtime": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+        }
+      }
+    },
     "balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -5206,6 +5272,26 @@
       "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.106.tgz",
       "integrity": "sha512-ZYfpVLULm67K7CaaGP7DmjyeMY4naxsbTy+syVVxT6QHI1Ww8XbJjmr9fDckrhq44WzCrcC5kH3zGpdusxwwqg=="
     },
+    "element-ui": {
+      "version": "2.15.9",
+      "resolved": "https://registry.npmmirror.com/element-ui/-/element-ui-2.15.9.tgz",
+      "integrity": "sha512-dx45nQLt4Hn87/Z9eRr3ex6KFZbxlFAwEU3QoW3wA5EsYftvHTyL9Pq7VnXXD7hu1Eiaup2jcs6kp+/VSFmXuA==",
+      "requires": {
+        "async-validator": "~1.8.1",
+        "babel-helper-vue-jsx-merge-props": "^2.0.0",
+        "deepmerge": "^1.2.0",
+        "normalize-wheel": "^1.0.1",
+        "resize-observer-polyfill": "^1.5.0",
+        "throttle-debounce": "^1.0.1"
+      },
+      "dependencies": {
+        "deepmerge": {
+          "version": "1.5.2",
+          "resolved": "https://registry.npmmirror.com/deepmerge/-/deepmerge-1.5.2.tgz",
+          "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ=="
+        }
+      }
+    },
     "elliptic": {
       "version": "6.5.4",
       "resolved": "https://registry.npmmirror.com/elliptic/-/elliptic-6.5.4.tgz",
@@ -8339,6 +8425,11 @@
       "resolved": "https://registry.npmmirror.com/normalize-url/-/normalize-url-3.3.0.tgz",
       "integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg=="
     },
+    "normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA=="
+    },
     "npm-run-path": {
       "version": "4.0.1",
       "resolved": "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-4.0.1.tgz",
@@ -11754,6 +11845,11 @@
       "resolved": "https://registry.npmmirror.com/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.22.0",
       "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.0.tgz",
@@ -13071,6 +13167,11 @@
         }
       }
     },
+    "throttle-debounce": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
+      "integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg=="
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmmirror.com/through/-/through-2.3.8.tgz",

package.json

@@ -19,6 +19,7 @@
     "@vant/touch-emulator": "^1.3.2",
     "clipboard": "^2.0.10",
     "core-js": "^3.19.3",
+    "element-ui": "^2.15.9",
     "js-cookie": "^3.0.1",
     "nuxt": "^2.15.8",
     "swiper": "^5.4.5",
@@ -32,6 +33,7 @@
   "devDependencies": {
     "@nuxtjs/style-resources": "^1.2.1",
     "@nuxtjs/tailwindcss": "^4.2.1",
+    "babel-plugin-component": "^1.1.1",
     "cross-env": "^7.0.3",
     "eslint-config-prettier": "^8.3.0",
     "node-sass": "^6.0.1",

pages/_template/app/form/club-register.vue

@@ -7,22 +7,117 @@
         v-text="supplierInfo.shopName + '正品授权申请'"
       ></div>
     </div>
+    <div class="page-content">
+      <template v-if="true">
+        <!-- 进步条 -->
+        <SimpleStep :list="stepList" :active="step" />
+
+        <div class="step-list py-4">
+          <keep-alive>
+            <!-- 账号注册表单 -->
+            <template><FormClubRegister v-if="step === 0" /></template>
+            <!-- 机构认证表单 -->
+            <template><FormClubInfo v-if="step === 1" /></template>
+            <!-- 设备认证表单 -->
+            <template><FormClubDevice v-if="step === 2" /></template>
+          </keep-alive>
+        </div>
+      </template>
+      <!-- 机构已认证 || 机构认证中 -->
+      <template v-else>
+        <div class="message">
+          <div class="status-icon danger"></div>
+          <div class="status">机构已认证</div>
+          <div class="tip">提示：可点击认证记录看查看详情</div>
+        </div>
+      </template>
+
+      <!-- 操作 -->
+      <div class="control flex flex-col items-center">
+        <div
+          class="button prev flex justify-center items-center mb-2"
+          @click="onPrevStep"
+          v-if="step > 0"
+        >
+          上一步
+        </div>
+        <div
+          class="button next flex justify-center items-center"
+          @click="onNextStep"
+        >
+          下一步
+        </div>
+        <div class="record mt-2" @click="toRecord">认证记录</div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import SimpleStep from '@/components/SimpleStep'
+import FormClubRegister from './components/form-club-register.vue'
+import FormClubInfo from './components/form-club-info.vue'
+import FormClubDevice from './components/form-club-device.vue'
 import { mapGetters } from 'vuex'
 export default {
   layout: 'app',
+  components: {
+    SimpleStep,
+    FormClubRegister,
+    FormClubInfo,
+    FormClubDevice,
+  },
   computed: {
     ...mapGetters(['supplierInfo', 'authUserId', 'routePrefix']),
   },
+  data() {
+    return {
+      step: 0,
+      stepList: [
+        {
+          label: '账号注册',
+          id: 0,
+          recordRoute: '/record/club/detail',
+        },
+        {
+          label: '机构认证',
+          id: 1,
+          recordRoute: '/record/club/detail',
+        },
+        {
+          label: '设备认证',
+          id: 2,
+          recordRoute: '/record/device',
+        },
+      ],
+    }
+  },
+  methods: {
+    onNextStep() {
+      if (this.step < this.stepList.length - 1) {
+        this.step++
+      }
+    },
+    onPrevStep() {
+      if (this.step > 0) {
+        this.step--
+      }
+    },
+    toRecord() {
+      const step = this.stepList.find((item) => item.id === this.step)
+      this.$router.push(`${this.routePrefix + step.recordRoute}`)
+    },
+  },
 }
 </script>
 
 <style lang="scss" scoped>
 // pc 端
 @media screen and (min-width: 768px) {
+  .page {
+    background: #fff;
+  }
+
   .page-top {
     height: 360px;
     @include themify($themes) {
@@ -41,5 +136,178 @@ export default {
       color: #fff;
     }
   }
+  .page-content {
+    width: 1200px;
+    margin: 0 auto;
+    overflow: hidden;
+    min-height: calc(100vh - 80px - 80px - 360px);
+    box-sizing: border-box;
+    padding-bottom: 40px;
+
+    .message {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      margin-top: 60px;
+      .status-icon {
+        width: 88px;
+        height: 88px;
+        background-repeat: no-repeat;
+        background-size: 75px auto;
+        background-position: center;
+
+        &.success {
+          background-image: url(https://static.caimei365.com/www/authentic/pc/icon-auth-primary.png);
+        }
+        &.warning {
+          background-image: url(https://static.caimei365.com/www/authentic/pc/icon-auth-warning.png);
+        }
+        &.danger {
+          background-image: url(https://static.caimei365.com/www/authentic/pc/icon-auth-danger.png);
+        }
+      }
+
+      .status {
+        font-size: 18px;
+        color: #282828;
+        margin: 12px 0;
+      }
+
+      .tip {
+        color: #999999;
+        font-size: 14px;
+      }
+    }
+
+    .control {
+      margin-top: 62px;
+      .button {
+        width: 295px;
+        height: 50px;
+
+        cursor: pointer;
+
+        &.prev {
+          @include themify($themes) {
+            border: 1px solid themed('color');
+            color: themed('color');
+          }
+        }
+        &.next {
+          @include themify($themes) {
+            background-color: themed('color');
+            color: #fff;
+          }
+        }
+      }
+      .record {
+        font-size: 14px;
+        cursor: pointer;
+        @include themify($themes) {
+          color: themed('color');
+        }
+      }
+    }
+
+    .step-list {
+      width: 700px;
+      margin: 0 auto;
+    }
+  }
+}
+
+// 移动端
+@media screen and (max-width: 768px) {
+  .page {
+    background: #fff;
+  }
+
+  .page-top {
+    height: 46vw;
+    @include themify($themes) {
+      background: themed('banner-home-h5');
+      background-size: auto 46vw;
+    }
+    .logo {
+      display: block;
+      width: 14.8vw;
+      height: 14.8vw;
+      border-radius: 50%;
+      background: #fff;
+    }
+    .name {
+      font-size: 4vw;
+      color: #fff;
+    }
+  }
+
+  .page-content {
+    padding: 0 7vw 7vw;
+
+    .message {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      .status-icon {
+        width: 88px;
+        height: 88px;
+        background-repeat: no-repeat;
+        background-size: 75px auto;
+        background-position: center;
+
+        &.success {
+          background-image: url(https://static.caimei365.com/www/authentic/pc/icon-auth-primary.png);
+        }
+        &.warning {
+          background-image: url(https://static.caimei365.com/www/authentic/pc/icon-auth-warning.png);
+        }
+        &.danger {
+          background-image: url(https://static.caimei365.com/www/authentic/pc/icon-auth-danger.png);
+        }
+      }
+
+      .status {
+        font-size: 18px;
+        color: #282828;
+        margin: 12px 0;
+      }
+
+      .tip {
+        color: #999999;
+        font-size: 14px;
+      }
+    }
+
+    .control {
+      .button {
+        width: 85.6vw;
+        height: 12vw;
+
+        cursor: pointer;
+
+        &.prev {
+          @include themify($themes) {
+            border: 1px solid themed('color');
+            color: themed('color');
+          }
+        }
+        &.next {
+          @include themify($themes) {
+            background-color: themed('color');
+            color: #fff;
+          }
+        }
+      }
+      .record {
+        font-size: 3.4vw;
+        cursor: pointer;
+        @include themify($themes) {
+          color: themed('color');
+        }
+      }
+    }
+  }
 }
 </style>

pages/_template/app/form/components/form-club-device.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="club-device">
+    <template v-for="i in 2">
+      <div :key="i">
+        <el-form :model="formData" :rules="rules">
+          <el-form-item :label="`设备名称${i}:`">
+            <el-select
+              v-model="formData.deviceName"
+              filterable
+              allow-create
+              placeholder="请输入新设备名称或选择已有设备"
+            >
+              <el-option label="中国" :value="1"> </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item prop="mobile" label="设备图片:">
+            <br />
+            <el-input v-show="false"></el-input>
+            <SimpleUploadImage :limit="1" />
+          </el-form-item>
+          <el-form-item label="所属品牌:">
+            <el-select v-model="formData.deviceName" placeholder="请选择品牌">
+              <el-option label="中国" :value="1"> </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item prop="mobile" label="购买渠道:">
+            <el-input placeholder="请输入购买渠道"></el-input>
+          </el-form-item>
+          <el-form-item prop="mobile" label="发票:">
+            <br />
+            <el-input v-show="false"></el-input>
+            <SimpleUploadImage :limit="1" />
+          </el-form-item>
+          <el-form-item prop="mobile" label="设备SN码:">
+            <el-input placeholder="请输入设备SN码"></el-input>
+          </el-form-item>
+          <el-form-item prop="mobile" label="设备参数:">
+            <br />
+            <div class="device-param-list">
+              <span class="add-param">添加参数</span>
+              <template v-for="i in 3">
+                <div :key="i">
+                  <div class="param flex justify-between mb-4">
+                    <el-input placeholder="例如：品牌" class="mr-2"></el-input>
+                    <el-input placeholder="请输入参数信息"></el-input>
+                    <span class="remove el-icon-close"></span>
+                  </div>
+                </div>
+              </template>
+            </div>
+          </el-form-item>
+        </el-form>
+        <el-divider></el-divider>
+      </div>
+    </template>
+
+    <div class="add-device">
+      <div class="add-icon"></div>
+      添加设备
+    </div>
+  </div>
+</template>
+
+<script>
+import SimpleUploadImage from '@/components/SimpleUploadImage'
+export default {
+  components: {
+    SimpleUploadImage,
+  },
+  data() {
+    return {
+      formData: {
+        deviceName: '',
+      },
+      rules: {},
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.el-select {
+  width: 100%;
+}
+.device-param-list {
+  position: relative;
+  .add-param {
+    position: absolute;
+    cursor: pointer;
+    top: -40px;
+    right: 0;
+    text-decoration: underline;
+    font-size: 14px;
+    @include themify($themes) {
+      color: themed('color');
+    }
+  }
+
+  .param {
+    position: relative;
+    .remove {
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 20px;
+      height: 20px;
+      background: #f94b4b;
+      border-radius: 2px;
+      cursor: pointer;
+      color: #fff;
+      font-size: 14px;
+      text-align: center;
+      line-height: 20px;
+    }
+  }
+}
+
+.add-device {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 162px;
+  height: 46px;
+  border-radius: 4px;
+  box-sizing: border-box;
+  font-size: 18px;
+  margin: 0 auto;
+  cursor: pointer;
+
+  @include themify($themes) {
+    border: 1px solid themed('color');
+    color: themed('color');
+  }
+
+  .add-icon {
+    width: 20px;
+    height: 20px;
+    position: relative;
+    margin-right: 16px;
+
+    &::before,
+    &::after {
+      position: absolute;
+      width: 3px;
+      height: 20px;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      border-radius: 1px;
+      content: '';
+      display: block;
+      @include themify($themes) {
+        background: themed('color');
+      }
+    }
+    &::after {
+      transform: translate(-50%, -50%) rotateZ(90deg);
+    }
+  }
+}
+</style>

pages/_template/app/form/components/form-club-info.vue

@@ -0,0 +1,219 @@
+<template>
+  <div class="club-info">
+    <el-form :model="formData" :rules="rules" ref="form" label-position="left">
+      <el-form-item prop="mobile" label="机构名称:">
+        <el-input placeholder="请输入机构名称"></el-input>
+      </el-form-item>
+      <el-form-item prop="mobile" label="联系电话:">
+        <el-input placeholder="请输入对外联系电话"></el-input>
+      </el-form-item>
+      <el-form-item prop="mobile" label="所在地区:">
+        <br />
+        <div class="flex items-center justify-between">
+          <el-select placeholder="请选择" v-model="formData.a">
+            <el-option label="湖北" :value="1"> </el-option>
+            <el-option label="广东" :value="1"> </el-option>
+          </el-select>
+          <el-select placeholder="请选择" v-model="formData.b" class="mx-2">
+            <el-option label="湖北" :value="1"> </el-option>
+            <el-option label="广东" :value="1"> </el-option>
+          </el-select>
+          <el-select placeholder="请选择" v-model="formData.c">
+            <el-option label="湖北" :value="1"> </el-option>
+            <el-option label="广东" :value="1"> </el-option>
+          </el-select>
+        </div>
+        <el-input
+          class="mt-4"
+          type="textarea"
+          :rows="4"
+          placeholder="建议您如实填写详细收货地址，例如：街道名称，门牌号码，楼层和房间号等信息"
+        ></el-input>
+      </el-form-item>
+      <el-form-item prop="mobile" label="">
+        <div class="normal-row">
+          <div class="label">
+            所在位置:<span>（提示:打开地图，将定位图标移到具体位置）</span>
+          </div>
+          <div class="postion-btn">定位</div>
+        </div>
+        <!-- <el-input placeholder="地图坐标" v-show="false"></el-input> -->
+      </el-form-item>
+      <el-form-item prop="mobile" label="logo:">
+        <br />
+        <el-input v-show="false"></el-input>
+        <SimpleUploadImage :limit="1" />
+      </el-form-item>
+      <el-form-item prop="mobile">
+        <div class="normal-row">
+          <div class="label">门头照:<span>（可上传6张）</span></div>
+          <el-input v-show="false"></el-input>
+          <SimpleUploadImage :limit="6" />
+        </div>
+      </el-form-item>
+
+      <el-form-item label="机构类型:">
+        <br />
+        <SimpleRadio
+          :list="clubTypeList"
+          type="defalut"
+          v-model="formData.clubType"
+        />
+      </el-form-item>
+
+      <el-form-item label="医美类型:">
+        <br />
+        <SimpleRadio
+          :list="medicalTypeList"
+          type="rect"
+          v-model="formData.medicalType"
+        />
+      </el-form-item>
+
+      <el-form-item label="医疗许可证:" prop="licenseImage">
+        <br />
+        <el-input v-show="false" v-model="formData.licenseImage" />
+        <SimpleUploadImage :limit="1" />
+      </el-form-item>
+
+      <el-form-item label="员工人数:" prop="memberCount">
+        <el-input
+          v-model.number="formData.memberCount"
+          placeholder="请输入员工人数"
+          clearable
+        />
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import SimpleUploadImage from '@/components/SimpleUploadImage'
+import SimpleRadio from '@/components/SimpleRadio'
+export default {
+  components: {
+    SimpleUploadImage,
+    SimpleRadio,
+  },
+  data() {
+    return {
+      clubTypeList: [
+        { value: 1, name: '医美' },
+        { value: 2, name: '生美' },
+        { value: 3, name: '项目公司' },
+        { value: 4, name: '个人' },
+        { value: 5, name: '其他' },
+      ],
+      medicalTypeList: [
+        { value: 1, name: '诊所' },
+        { value: 2, name: '门诊' },
+        { value: 3, name: '医院' },
+        { value: 4, name: '其他' },
+      ],
+      formData: {
+        clubType: 1,
+        medicalType: 1,
+        licenseImage: '',
+        memberCount: '',
+        a: '',
+        b: '',
+        c: '',
+      },
+      rules: {},
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+// pc端
+@media screen and (min-width: 768px) {
+  .normal-row {
+    position: relative;
+    .label {
+      font-size: 14px;
+      color: #606266;
+
+      span {
+        color: #b2b2b2;
+      }
+    }
+    .postion-btn {
+      position: absolute;
+      top: 50%;
+      right: 0;
+      transform: translateY(-50%);
+      width: 62px;
+      height: 28px;
+      line-height: 28px;
+      font-size: 14px;
+      color: #fff;
+      background: #1890ff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      border-radius: 4px;
+
+      &::before {
+        content: '';
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        background: url(https://static.caimei365.com/www/authentic/pc/icon-position.png)
+          no-repeat center;
+        background-size: 16px 16px;
+      }
+    }
+  }
+}
+
+// 移动端
+@media screen and (max-width: 768px) {
+  ::v-deep {
+    .el-form-item__label {
+      font-size: 3.4vw;
+    }
+  }
+
+  .normal-row {
+    position: relative;
+    .label {
+      font-size: 14px;
+      color: #606266;
+
+      span {
+        color: #b2b2b2;
+        font-size: 2.6vw;
+      }
+    }
+    .postion-btn {
+      position: absolute;
+      top: 50%;
+      right: 0;
+      transform: translateY(-50%);
+      width: 14vw;
+      height: 6.8vw;
+      line-height: 6.8vw;
+      font-size: 3.2vw;
+      color: #fff;
+      background: #1890ff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      border-radius: 0.4vw;
+
+      &::before {
+        content: '';
+        display: inline-block;
+        width: 3.58vw;
+        height: 3.58vw;
+        background: url(https://static.caimei365.com/www/authentic/pc/icon-position.png)
+          no-repeat center;
+        background-size: 3.58vw;
+      }
+    }
+  }
+}
+</style>

pages/_template/app/form/components/form-club-register.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="club-register">
+    <el-form :model="formData" :rules="rules" ref="form" label-width="0">
+      <el-form-item prop="mobile">
+        <el-input v-model="formData.mobile" placeholder="手机号"></el-input>
+      </el-form-item>
+      <el-form-item prop="verifyCode">
+        <div class="verifyCode flex justify-between">
+          <el-input
+            v-model="formData.verifyCode"
+            placeholder="验证码"
+          ></el-input>
+          <div class="send ml-8">获取验证码</div>
+        </div>
+      </el-form-item>
+      <el-form-item prop="password">
+        <el-input v-model="formData.password" placeholder="密码"></el-input>
+      </el-form-item>
+      <el-form-item prop="confirmPwd">
+        <el-input
+          v-model="formData.confirmPwd"
+          placeholder="再次输入密码"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      formData: {
+        mobile: '',
+        verifyCode: '',
+        password: '',
+        confirmPwd: '',
+      },
+      rules: {
+        mobile: [
+          { required: true, message: '手机号不能为空', trigger: ['blur'] },
+        ],
+      },
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.verifyCode {
+  .send {
+    cursor: pointer;
+    white-space: nowrap;
+    @include themify($themes) {
+      color: themed('color');
+    }
+  }
+}
+</style>

pages/_template/app/record/club/detail.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="page">
+    <div class="page-top flex flex-col justify-center items-center">
+      <img class="logo" :src="supplierInfo.logo" />
+      <div class="name mt-2" v-text="supplierInfo.shopName + '认证记录'"></div>
+    </div>
+    <div class="page-content">
+      <div class="page-title">机构认证</div>
+      <div class="row">
+        <div class="col">机构名称：</div>
+        <div class="col">机构名称</div>
+      </div>
+      <div class="row">
+        <div class="col">联系电话：</div>
+        <div class="col">15889586666</div>
+      </div>
+      <div class="row">
+        <div class="col">所在地区：</div>
+        <div class="col">广东省深圳市福田区上步南路锦峰大厦A座</div>
+      </div>
+      <div class="row">
+        <div class="col">所在位置：</div>
+        <div class="col">广东省深圳市福田区上步南路锦峰大厦A座</div>
+      </div>
+      <div class="row">
+        <div class="col">logo：</div>
+        <div class="col">
+          <el-image
+            src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpe"
+          ></el-image>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">logo：</div>
+        <div class="col">
+          <el-image
+            src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpe"
+          ></el-image>
+          <el-image
+            src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpe"
+          ></el-image>
+          <el-image
+            src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpe"
+          ></el-image>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">机构类型：</div>
+        <div class="col">医美</div>
+      </div>
+      <div class="row">
+        <div class="col">医美类型：</div>
+        <div class="col">诊所</div>
+      </div>
+      <div class="row">
+        <div class="col">员工人数：</div>
+        <div class="col">12</div>
+      </div>
+      <div class="row">
+        <div class="col">状态：</div>
+        <div class="col">认证中</div>
+      </div>
+
+      <div class="control flex flex-col items-center">
+        <div
+          class="button edit flex justify-center items-center mb-2"
+          @click="onEdit"
+        >
+          编辑
+        </div>
+        <div
+          class="button search flex justify-center items-center"
+          @click="onToDeviceList"
+        >
+          查看认证设备
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  layout: 'app',
+  computed: {
+    ...mapGetters(['supplierInfo', 'authUserId', 'routePrefix']),
+  },
+  methods: {
+    onToDeviceList() {
+      this.$router.push(`${this.routePrefix}/record/device`)
+    },
+    onEdit() {
+      this.$router.push(`${this.routePrefix}/record/club/edit`)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@media screen and (min-width: 768px) {
+  .page {
+    background: #fff;
+  }
+
+  .page-top {
+    height: 360px;
+    @include themify($themes) {
+      background: themed('banner-club-register');
+      background-size: auto 360px;
+    }
+    .logo {
+      display: block;
+      width: 120px;
+      height: 120px;
+      border-radius: 50%;
+      background: #fff;
+    }
+    .name {
+      font-size: 30px;
+      color: #fff;
+    }
+  }
+  .page-content {
+    width: 700px;
+    margin: 0 auto;
+    overflow: hidden;
+    min-height: calc(100vh - 80px - 80px - 360px);
+    box-sizing: border-box;
+    padding-bottom: 40px;
+
+    .page-title {
+      font-size: 24px;
+      font-weight: bold;
+      text-align: center;
+      padding: 40px 0;
+    }
+
+    .row {
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+      font-size: 18px;
+      margin: 24px 0;
+
+      .col {
+        &:first-child {
+          width: 90px;
+          color: #666;
+        }
+
+        &:last-child {
+          color: #282828;
+        }
+      }
+
+      .el-image {
+        width: 120px;
+        height: 120px;
+        margin-right: 12px;
+      }
+    }
+
+    .control {
+      margin-top: 62px;
+      .button {
+        width: 295px;
+        height: 50px;
+
+        cursor: pointer;
+
+        &.edit {
+          @include themify($themes) {
+            border: 1px solid themed('color');
+            color: themed('color');
+          }
+        }
+
+        &.search {
+          @include themify($themes) {
+            background-color: themed('color');
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

pages/_template/app/record/club/edit.vue

@@ -0,0 +1,243 @@
+<template>
+  <div class="club-info page">
+    <div class="page-top flex flex-col justify-center items-center">
+      <img class="logo" :src="supplierInfo.logo" />
+      <div class="name mt-2" v-text="supplierInfo.shopName + '认证记录'"></div>
+    </div>
+    <div class="page-content">
+      <div class="page-title">机构认证</div>
+      <el-form
+        :model="formData"
+        :rules="rules"
+        ref="form"
+        label-position="left"
+      >
+        <el-form-item prop="mobile" label="机构名称:">
+          <el-input placeholder="请输入机构名称"></el-input>
+        </el-form-item>
+        <el-form-item prop="mobile" label="联系电话:">
+          <el-input placeholder="请输入对外联系电话"></el-input>
+        </el-form-item>
+        <el-form-item prop="mobile" label="所在地区:">
+          <br />
+          <div class="flex items-center justify-between">
+            <el-select placeholder="请选择" v-model="formData.a">
+              <el-option label="湖北" :value="1"> </el-option>
+              <el-option label="广东" :value="1"> </el-option>
+            </el-select>
+            <el-select placeholder="请选择" v-model="formData.b">
+              <el-option label="湖北" :value="1"> </el-option>
+              <el-option label="广东" :value="1"> </el-option>
+            </el-select>
+            <el-select placeholder="请选择" v-model="formData.c">
+              <el-option label="湖北" :value="1"> </el-option>
+              <el-option label="广东" :value="1"> </el-option>
+            </el-select>
+          </div>
+          <el-input
+            class="mt-4"
+            type="textarea"
+            :rows="4"
+            placeholder="建议您如实填写详细收货地址，例如：街道名称，门牌号码，楼层和房间号等信息"
+          ></el-input>
+        </el-form-item>
+        <el-form-item prop="mobile" label="">
+          <div class="normal-row">
+            <div class="label">
+              所在位置:<span>（提示：打开地图，将定位图标移到具体位置）</span>
+            </div>
+            <div class="postion-btn">定位</div>
+          </div>
+          <!-- <el-input placeholder="地图坐标" v-show="false"></el-input> -->
+        </el-form-item>
+        <el-form-item prop="mobile" label="logo:">
+          <br />
+          <el-input v-show="false"></el-input>
+          <SimpleUploadImage :limit="1" />
+        </el-form-item>
+        <el-form-item prop="mobile">
+          <div class="normal-row">
+            <div class="label">门头照:<span>（可上传6张）</span></div>
+            <el-input v-show="false"></el-input>
+            <SimpleUploadImage :limit="6" />
+          </div>
+        </el-form-item>
+
+        <el-form-item label="机构类型:">
+          <br />
+          <SimpleRadio
+            :list="clubTypeList"
+            type="defalut"
+            spacing="40px"
+            v-model="formData.clubType"
+          />
+        </el-form-item>
+
+        <el-form-item label="医美类型:">
+          <br />
+          <SimpleRadio
+            :list="medicalTypeList"
+            type="rect"
+            v-model="formData.medicalType"
+          />
+        </el-form-item>
+
+        <el-form-item label="医疗许可证:" prop="licenseImage">
+          <br />
+          <el-input v-show="false" v-model="formData.licenseImage" />
+          <SimpleUploadImage :limit="1" />
+        </el-form-item>
+
+        <el-form-item label="员工人数:" prop="memberCount">
+          <el-input
+            v-model.number="formData.memberCount"
+            placeholder="请输入员工人数"
+            clearable
+          />
+        </el-form-item>
+      </el-form>
+      <div class="control flex flex-col items-center">
+        <div class="button submit flex justify-center items-center">提交</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import SimpleUploadImage from '@/components/SimpleUploadImage'
+import SimpleRadio from '@/components/SimpleRadio'
+import { mapGetters } from 'vuex'
+export default {
+  layout: 'app',
+  components: {
+    SimpleUploadImage,
+    SimpleRadio,
+  },
+  computed: {
+    ...mapGetters(['supplierInfo', 'authUserId', 'routePrefix']),
+  },
+  data() {
+    return {
+      clubTypeList: [
+        { value: 1, name: '医美' },
+        { value: 2, name: '生美' },
+        { value: 3, name: '项目公司' },
+        { value: 4, name: '个人' },
+        { value: 5, name: '其他' },
+      ],
+      medicalTypeList: [
+        { value: 1, name: '诊所' },
+        { value: 2, name: '门诊' },
+        { value: 3, name: '医院' },
+        { value: 4, name: '其他' },
+      ],
+      formData: {
+        clubType: 1,
+        medicalType: 1,
+        licenseImage: '',
+        memberCount: '',
+        a: '',
+        b: '',
+        c: '',
+      },
+      rules: {},
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@media screen and (min-width: 768px) {
+  .page {
+    background: #fff;
+  }
+  .page-top {
+    height: 360px;
+    @include themify($themes) {
+      background: themed('banner-club-register');
+      background-size: auto 360px;
+    }
+    .logo {
+      display: block;
+      width: 120px;
+      height: 120px;
+      border-radius: 50%;
+      background: #fff;
+    }
+    .name {
+      font-size: 30px;
+      color: #fff;
+    }
+  }
+  .page-content {
+    width: 700px;
+    margin: 0 auto;
+    overflow: hidden;
+    min-height: calc(100vh - 80px - 80px - 360px);
+    box-sizing: border-box;
+    padding-bottom: 40px;
+
+    .page-title {
+      font-size: 24px;
+      font-weight: bold;
+      text-align: center;
+      padding: 40px 0;
+    }
+
+    .control {
+      margin-top: 62px;
+      .button {
+        width: 295px;
+        height: 50px;
+
+        cursor: pointer;
+
+        &.submit {
+          @include themify($themes) {
+            background-color: themed('color');
+            color: #fff;
+          }
+        }
+      }
+    }
+    .normal-row {
+      position: relative;
+      .label {
+        font-size: 14px;
+        color: #606266;
+
+        span {
+          color: #b2b2b2;
+        }
+      }
+      .postion-btn {
+        position: absolute;
+        top: 50%;
+        right: 0;
+        transform: translateY(-50%);
+        width: 62px;
+        height: 28px;
+        line-height: 28px;
+        font-size: 14px;
+        color: #fff;
+        background: #1890ff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        border-radius: 4px;
+
+        &::before {
+          content: '';
+          display: inline-block;
+          width: 16px;
+          height: 16px;
+          background: url(https://static.caimei365.com/www/authentic/pc/icon-position.png)
+            no-repeat center;
+          background-size: 16px 16px;
+        }
+      }
+    }
+  }
+}
+</style>

pages/_template/app/record/device/detail.vue

@@ -0,0 +1,178 @@
+<template>
+  <div class="page">
+    <div class="page-top flex flex-col justify-center items-center">
+      <img class="logo" :src="supplierInfo.logo" />
+      <div class="name mt-2" v-text="supplierInfo.shopName + '认证记录'"></div>
+    </div>
+    <div class="page-content">
+      <div class="page-title">设备认证</div>
+      <div class="row">
+        <div class="col">设备名称：</div>
+        <div class="col">RADIO4丽肤提意大利进口动态四极射频抗衰塑形</div>
+      </div>
+      <div class="row">
+        <div class="col">设备图片：</div>
+        <div class="col">
+          <el-image
+            src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpe"
+          ></el-image>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">所属品牌：</div>
+        <div class="col">华熙生物</div>
+      </div>
+      <div class="row">
+        <div class="col">购买渠道：</div>
+        <div class="col">医院</div>
+      </div>
+      <div class="row">
+        <div class="col">发票：</div>
+        <div class="col">
+          <el-image
+            src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpe"
+          ></el-image>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">设备SN码：</div>
+        <div class="col">SN2626562612</div>
+      </div>
+      <div class="row">
+        <div class="col">设备参数：</div>
+        <div class="col">
+          <div class="params-list">
+            <div class="param">
+              <div class="param-name">NDHUIWM：</div>
+              <div class="param-content">中胚层产品</div>
+            </div>
+            <div class="param">
+              <div class="param-name">NDHUIWM：</div>
+              <div class="param-content">中胚层产品</div>
+            </div>
+            <div class="param">
+              <div class="param-name">NDHUIWM：</div>
+              <div class="param-content">中胚层产品</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">状态：</div>
+        <div class="col">认证中</div>
+      </div>
+
+      <div class="row">
+        <div class="col">原因：</div>
+        <div class="col">未通过原因</div>
+      </div>
+
+      <div class="control flex flex-col items-center">
+        <div class="button edit flex justify-center items-center">编辑</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  layout: 'app',
+  computed: {
+    ...mapGetters(['supplierInfo', 'authUserId', 'routePrefix']),
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@media screen and (min-width: 768px) {
+  .page {
+    background: #fff;
+  }
+
+  .page-top {
+    height: 360px;
+    @include themify($themes) {
+      background: themed('banner-club-register');
+      background-size: auto 360px;
+    }
+    .logo {
+      display: block;
+      width: 120px;
+      height: 120px;
+      border-radius: 50%;
+      background: #fff;
+    }
+    .name {
+      font-size: 30px;
+      color: #fff;
+    }
+  }
+  .page-content {
+    width: 700px;
+    margin: 0 auto;
+    overflow: hidden;
+    min-height: calc(100vh - 80px - 80px - 360px);
+    box-sizing: border-box;
+    padding-bottom: 40px;
+
+    .page-title {
+      font-size: 24px;
+      font-weight: bold;
+      text-align: center;
+      padding: 40px 0;
+    }
+
+    .params-list {
+      .param {
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+        margin-bottom: 8px;
+      }
+    }
+
+    .row {
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+      font-size: 18px;
+      margin: 24px 0;
+
+      .col {
+        &:first-child {
+          width: 90px;
+          color: #666;
+        }
+
+        &:last-child {
+          color: #282828;
+        }
+      }
+
+      .el-image {
+        width: 120px;
+        height: 120px;
+        margin-right: 12px;
+      }
+    }
+
+    .control {
+      margin-top: 62px;
+      .button {
+        width: 295px;
+        height: 50px;
+
+        cursor: pointer;
+
+        &.edit {
+          @include themify($themes) {
+            border: 1px solid themed('color');
+            color: themed('color');
+          }
+        }
+      }
+    }
+  }
+}
+</style>

pages/_template/app/record/device/edit.vue

@@ -0,0 +1,178 @@
+<template>
+  <div class="club-device page">
+    <div class="page-top flex flex-col justify-center items-center">
+      <img class="logo" :src="supplierInfo.logo" />
+      <div class="name mt-2" v-text="supplierInfo.shopName + '认证记录'"></div>
+    </div>
+    <div class="page-content">
+      <div class="page-title">设备认证</div>
+      <el-form :model="formData" :rules="rules">
+        <el-form-item label="设备名称：">
+          <el-select
+            v-model="formData.deviceName"
+            filterable
+            allow-create
+            placeholder="请输入新设备名称或选择已有设备"
+          >
+            <el-option label="中国" :value="1"> </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="mobile" label="设备图片:">
+          <br />
+          <el-input v-show="false"></el-input>
+          <SimpleUploadImage :limit="1" />
+        </el-form-item>
+        <el-form-item label="所属品牌:">
+          <el-select v-model="formData.deviceName" placeholder="请选择品牌">
+            <el-option label="中国" :value="1"> </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="mobile" label="购买渠道:">
+          <el-input placeholder="请输入购买渠道"></el-input>
+        </el-form-item>
+        <el-form-item prop="mobile" label="发票:">
+          <br />
+          <el-input v-show="false"></el-input>
+          <SimpleUploadImage :limit="1" />
+        </el-form-item>
+        <el-form-item prop="mobile" label="设备SN码:">
+          <el-input placeholder="请输入设备SN码"></el-input>
+        </el-form-item>
+        <el-form-item prop="mobile" label="设备参数:">
+          <br />
+          <div class="device-param-list">
+            <span class="add-param">添加参数</span>
+            <template v-for="i in 3">
+              <div :key="i">
+                <div class="param flex justify-between mb-4">
+                  <el-input placeholder="例如：品牌" class="mr-2"></el-input>
+                  <el-input placeholder="请输入参数信息"></el-input>
+                  <span class="remove el-icon-close"></span>
+                </div>
+              </div>
+            </template>
+          </div>
+        </el-form-item>
+      </el-form>
+      <div class="control flex flex-col items-center">
+        <div class="button submit flex justify-center items-center">提交</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import SimpleUploadImage from '@/components/SimpleUploadImage'
+import { mapGetters } from 'vuex'
+export default {
+  layout: 'app',
+  components: {
+    SimpleUploadImage,
+  },
+  data() {
+    return {
+      formData: {
+        deviceName: '',
+      },
+      rules: {},
+    }
+  },
+  computed: {
+    ...mapGetters(['supplierInfo', 'authUserId', 'routePrefix']),
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@media screen and (min-width: 768px) {
+  .page {
+    background: #fff;
+  }
+  .page-top {
+    height: 360px;
+    @include themify($themes) {
+      background: themed('banner-club-register');
+      background-size: auto 360px;
+    }
+    .logo {
+      display: block;
+      width: 120px;
+      height: 120px;
+      border-radius: 50%;
+      background: #fff;
+    }
+    .name {
+      font-size: 30px;
+      color: #fff;
+    }
+  }
+  .page-content {
+    width: 700px;
+    margin: 0 auto;
+    overflow: hidden;
+    min-height: calc(100vh - 80px - 80px - 360px);
+    box-sizing: border-box;
+    padding-bottom: 40px;
+
+    .page-title {
+      font-size: 24px;
+      font-weight: bold;
+      text-align: center;
+      padding: 40px 0;
+    }
+
+    .el-select {
+      width: 100%;
+    }
+    .control {
+      margin-top: 62px;
+      .button {
+        width: 295px;
+        height: 50px;
+
+        cursor: pointer;
+
+        &.submit {
+          @include themify($themes) {
+            background-color: themed('color');
+            color: #fff;
+          }
+        }
+      }
+    }
+
+    .device-param-list {
+      position: relative;
+      .add-param {
+        position: absolute;
+        cursor: pointer;
+        top: -40px;
+        right: 0;
+        text-decoration: underline;
+        font-size: 14px;
+        @include themify($themes) {
+          color: themed('color');
+        }
+      }
+
+      .param {
+        position: relative;
+        .remove {
+          position: absolute;
+          right: 0;
+          top: 0;
+          width: 20px;
+          height: 20px;
+          background: #f94b4b;
+          border-radius: 2px;
+          cursor: pointer;
+          color: #fff;
+          font-size: 14px;
+          text-align: center;
+          line-height: 20px;
+        }
+      }
+    }
+  }
+}
+</style>

pages/_template/app/record/device/index.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="page">
+    <div class="page-top flex flex-col justify-center items-center">
+      <img class="logo" :src="supplierInfo.logo" />
+      <div class="name mt-2" v-text="supplierInfo.shopName + '认证记录'"></div>
+    </div>
+    <div class="page-content">
+      <div class="page-title">设备认证</div>
+
+      <div class="device-list">
+        <div class="device" @click="toEdit">
+          <div class="name">
+            <span class="label">设备名称 1：</span>
+            <span class="content">B-BEAUTY童颜皮肤管理（海宁店）</span>
+          </div>
+          <div class="status success">
+            <span class="label">状态：</span>
+            <span class="content">认证中</span>
+          </div>
+        </div>
+        <div class="device">
+          <div class="name">
+            <span class="label">设备名称 1：</span>
+            <span class="content">B-BEAUTY童颜皮肤管理（海宁店）</span>
+          </div>
+          <div class="status warning">
+            <span class="label">状态：</span>
+            <span class="content">认证通过</span>
+          </div>
+        </div>
+        <div class="device">
+          <div class="name">
+            <span class="label">设备名称 1：</span>
+            <span class="content">B-BEAUTY童颜皮肤管理（海宁店）</span>
+          </div>
+          <div class="status danger">
+            <span class="label">状态：</span>
+            <span class="content">认证未通过</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  layout: 'app',
+  computed: {
+    ...mapGetters(['supplierInfo', 'authUserId', 'routePrefix']),
+  },
+  methods: {
+    toEdit() {
+      this.$router.push(`${this.routePrefix}/record/device/edit`)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@media screen and (min-width: 768px) {
+  .page {
+    background: #fff;
+  }
+
+  .page-top {
+    height: 360px;
+    @include themify($themes) {
+      background: themed('banner-club-register');
+      background-size: auto 360px;
+    }
+    .logo {
+      display: block;
+      width: 120px;
+      height: 120px;
+      border-radius: 50%;
+      background: #fff;
+    }
+    .name {
+      font-size: 30px;
+      color: #fff;
+    }
+  }
+  .page-content {
+    width: 700px;
+    margin: 0 auto;
+    overflow: hidden;
+    min-height: calc(100vh - 80px - 80px - 360px);
+    box-sizing: border-box;
+    padding-bottom: 40px;
+
+    .page-title {
+      font-size: 24px;
+      font-weight: bold;
+      text-align: center;
+      padding: 40px 0;
+    }
+
+    .device-list {
+      .device {
+        position: relative;
+        padding: 36px 0 12px;
+        border-bottom: 1px solid #c2c2c2;
+        cursor: pointer;
+
+        .name {
+          margin-bottom: 8px;
+        }
+
+        .label {
+          font-size: 18px;
+          color: #666;
+        }
+
+        .content {
+          font-size: 18px;
+          color: #282828;
+        }
+        .status {
+          &.success {
+            .content {
+              color: #f3920d;
+            }
+          }
+          &.warning {
+            .content {
+              color: #1890ff;
+            }
+          }
+          &.danger {
+            .content {
+              color: #f94b4b;
+            }
+          }
+        }
+
+        &::after {
+          content: '';
+          position: absolute;
+          right: 0;
+          top: 50%;
+          transform: translateY(-50%);
+          display: block;
+          width: 20px;
+          height: 20px;
+          background: url(https://static.caimei365.com/www/authentic/pc/icon-detail-more.png)
+            no-repeat center;
+          background-size: 18px;
+        }
+      }
+    }
+  }
+}
+</style>

pages/_template/app/record/message.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="flex justify-center page">
+    <div class="page-content flex flex-col items-center">
+      <div class="icon-submit-succsss"></div>
+      <div class="tip mt-4 mb-6">提交成功</div>
+      <div class="label text-center">
+        审核通过后，用户可通过正品授权入口或扫二维码查看 机构及设备正品授权信息
+      </div>
+      <div class="record-btn mt-4" @click="toClubRecord">认证记录</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  layout: 'app',
+  computed: {
+    ...mapGetters(['supplierInfo', 'authUserId', 'routePrefix']),
+  },
+  methods: {
+    toClubRecord() {
+      this.$router.push(`${this.routePrefix}/record/club/detail`)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@media screen and (min-width: 768px) {
+  .page {
+    min-height: calc(100vh - 80px - 80px);
+    background: #fff;
+  }
+  .page-content {
+    width: 432px;
+    padding-top: 140px;
+
+    .icon-submit-succsss {
+      width: 64px;
+      height: 64px;
+      background: url(https://static.caimei365.com/www/authentic/pc/icon-submit-success.png)
+        no-repeat center;
+      background-size: 64px;
+    }
+
+    .tip {
+      font-size: 24px;
+      font-weight: bold;
+      color: #1890ff;
+    }
+    .label {
+      font-size: 18px;
+      color: #282828;
+      line-height: 1.6;
+    }
+    .record-btn {
+      width: 98px;
+      height: 36px;
+      color: #fff;
+      font-size: 14px;
+      text-align: center;
+      line-height: 36px;
+      border-radius: 4px;
+      cursor: pointer;
+      @include themify($themes) {
+        background: themed('color');
+      }
+    }
+  }
+}
+</style>

pages/_template/app/record/search.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="page">
+    <div class="page-top flex flex-col justify-center items-center">
+      <img class="logo" :src="supplierInfo.logo" />
+      <div class="name mt-2" v-text="supplierInfo.shopName + '认证记录'"></div>
+    </div>
+    <div class="page-content">
+      <el-form>
+        <el-form-item label="手机号:">
+          <el-input placeholder="请输入注册账号手机"></el-input>
+        </el-form-item>
+      </el-form>
+      <div class="control flex flex-col items-center">
+        <div
+          class="button search flex justify-center items-center"
+          @click="onSearch"
+        >
+          查询
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  layout: 'app',
+  computed: {
+    ...mapGetters(['supplierInfo', 'authUserId', 'routePrefix']),
+  },
+  methods: {
+    onSearch() {
+      this.$router.push(`${this.routePrefix}/record/club/detail`)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@media screen and (min-width: 768px) {
+  .page {
+    background: #fff;
+  }
+
+  .page-top {
+    height: 360px;
+    @include themify($themes) {
+      background: themed('banner-club-register');
+      background-size: auto 360px;
+    }
+    .logo {
+      display: block;
+      width: 120px;
+      height: 120px;
+      border-radius: 50%;
+      background: #fff;
+    }
+    .name {
+      font-size: 30px;
+      color: #fff;
+    }
+  }
+  .page-content {
+    width: 700px;
+    margin: 0 auto;
+    overflow: hidden;
+    min-height: calc(100vh - 80px - 80px - 360px);
+    box-sizing: border-box;
+    padding-bottom: 40px;
+    padding-top: 70px;
+
+    .control {
+      margin-top: 62px;
+      .button {
+        width: 295px;
+        height: 50px;
+
+        cursor: pointer;
+
+        &.search {
+          @include themify($themes) {
+            background-color: themed('color');
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

plugins/element-ui.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import ElementUI from 'element-ui'
+
+Vue.use(ElementUI)