.

src/main/nine-space/.eslintrc.js

@@ -1,14 +1,17 @@
 module.exports = {
-  root: true,
-  env: {
-    node: true,
-  },
-  extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/prettier"],
-  parserOptions: {
-    parser: "babel-eslint",
-  },
-  rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
-  },
+    root: true,
+    env: {
+        node: true
+    },
+    extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/prettier'],
+    parserOptions: {
+        parser: 'babel-eslint'
+    },
+    rules: {
+        'no-console': 'off',
+        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+        'no-unused-vars': 'off',
+        'no-empty': ['error', { allowEmptyCatch: true }],
+        'vue/custom-event-name-casing': 0
+    }
 };

src/main/nine-space/.prettierrc.js

@@ -0,0 +1,22 @@
+module.exports = {
+    printWidth: 120,
+    singleQuote: true,
+    tabWidth: 4,
+    arrowParens: 'avoid',
+    trailingComma: 'none',
+    endOfLine: 'auto',
+    overrides: [
+        {
+            files: '*.html',
+            options: {
+                parser: 'html'
+            }
+        },
+        {
+            files: '*.vue',
+            options: {
+                parser: 'vue'
+            }
+        }
+    ]
+};

src/main/nine-space/babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"],
+    presets: ['@vue/cli-plugin-babel/preset']
 };

src/main/nine-space/src/App.vue

@@ -1,108 +1,108 @@
 <template>
-  <div class="scroll-wrapper" ref="scroll">
-    <router-view class="scroll-content" ref="content" />
-    <!-- <app-bar></app-bar> -->
-  </div>
+    <div class="scroll-wrapper" ref="scroll">
+        <router-view class="scroll-content" ref="content" />
+        <!-- <app-bar></app-bar> -->
+    </div>
 </template>
 
 <script>
-import BetterScroll from "better-scroll";
-import Pulldown from "@better-scroll/pull-down";
-import { computed } from "@vue/reactivity";
+import BetterScroll from 'better-scroll';
+import Pulldown from '@better-scroll/pull-down';
+import { computed } from '@vue/reactivity';
 BetterScroll.use(Pulldown);
 export default {
-  name: "App",
-  provide() {
-    return {
-      changeCheck: this.changeCheck,
-      bs: computed(() => this.bs),
-    };
-  },
-  data() {
-    return {
-      beforePullDown: true,
-      finished: false,
-      loading: false,
-      refreshing: false,
-      checkEvent: null,
-      bs: null,
-      timer: null,
-    };
-  },
-  watch: {
-    $route() {
-      if (this.bs) {
-        if (this.timer) {
-          clearTimeout(this.timer);
-        }
-        this.timer = setTimeout(() => {
-          this.bs.refresh();
-          this.bs.scrollTo(0, 0);
-        }, 500);
-      }
+    name: 'App',
+    provide() {
+        return {
+            changeCheck: this.changeCheck,
+            bs: computed(() => this.bs)
+        };
     },
-  },
-  mounted() {
-    this.timer = setTimeout(() => {
-      this.init();
-    }, 1000);
-  },
-  methods: {
-    init() {
-      this.bs = new BetterScroll(this.$refs.scroll, {
-        scrollY: true,
-        click: true,
-      });
+    data() {
+        return {
+            beforePullDown: true,
+            finished: false,
+            loading: false,
+            refreshing: false,
+            checkEvent: null,
+            bs: null,
+            timer: null
+        };
     },
-    onLoad() {
-      this.loading = true;
-      if (this.checkEvent) {
-        this.checkEvent()
-          .then(() => {
-            this.loading = false;
-            this.bs.finishPullUp();
-            this.bs.closePullUp();
-            this.bs.refresh();
-          })
-          .catch(() => {
-            this.bs.finishPullUp();
-            this.loading = false;
-            this.bs.refresh();
-          });
-      } else {
-        this.loading = false;
-        if (this.bs) {
-          this.bs.finishPullUp();
-          // this.bs.closePullUp();
-          this.bs.refresh();
+    watch: {
+        $route() {
+            if (this.bs) {
+                if (this.timer) {
+                    clearTimeout(this.timer);
+                }
+                this.timer = setTimeout(() => {
+                    this.bs.refresh();
+                    this.bs.scrollTo(0, 0);
+                }, 500);
+            }
         }
-      }
-    },
-    changeCheck(found) {
-      if (found) {
-        this.checkEvent = found;
-        this.onRefresh();
-      } else {
-        this.checkEvent = null;
-      }
     },
-    onRefresh() {
-      if (this.bs) {
-        this.bs.openPullUp();
-      }
-      this.onLoad();
+    mounted() {
+        this.timer = setTimeout(() => {
+            this.init();
+        }, 1000);
     },
-  },
+    methods: {
+        init() {
+            this.bs = new BetterScroll(this.$refs.scroll, {
+                scrollY: true,
+                click: true
+            });
+        },
+        onLoad() {
+            this.loading = true;
+            if (this.checkEvent) {
+                this.checkEvent()
+                    .then(() => {
+                        this.loading = false;
+                        this.bs.finishPullUp();
+                        this.bs.closePullUp();
+                        this.bs.refresh();
+                    })
+                    .catch(() => {
+                        this.bs.finishPullUp();
+                        this.loading = false;
+                        this.bs.refresh();
+                    });
+            } else {
+                this.loading = false;
+                if (this.bs) {
+                    this.bs.finishPullUp();
+                    // this.bs.closePullUp();
+                    this.bs.refresh();
+                }
+            }
+        },
+        changeCheck(found) {
+            if (found) {
+                this.checkEvent = found;
+                this.onRefresh();
+            } else {
+                this.checkEvent = null;
+            }
+        },
+        onRefresh() {
+            if (this.bs) {
+                this.bs.openPullUp();
+            }
+            this.onLoad();
+        }
+    }
 };
 </script>
 
 <style lang="less" scoped>
 .scroll-content {
-  min-height: 100vh;
-  box-sizing: border-box;
-  // padding-top: 46px;
+    min-height: 100vh;
+    box-sizing: border-box;
+    // padding-top: 46px;
 }
 .scroll-wrapper {
-  background-color: @bg;
+    background-color: @bg;
 }
 </style>

src/main/nine-space/src/assets/svgs/bg-png.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="160px" height="160px" viewBox="0 0 160 160" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>bg-png</title>
+    <g id="第九空间" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="实名认证" transform="translate(-106.000000, -470.000000)">
+            <g id="编组-4" transform="translate(0.000000, 166.000000)">
+                <g id="编组-3" transform="translate(0.000000, 284.000000)">
+                    <g id="bg-png" transform="translate(106.000000, 20.000000)">
+                        <rect id="Rectangle-12" fill="#1F2021" transform="translate(80.000000, 80.000000) scale(1, -1) translate(-80.000000, -80.000000) " x="0" y="0" width="160" height="160" rx="12"></rect>
+                        <text id="点击上传" font-family="PingFangSC-Regular, PingFang SC" font-size="13" font-weight="normal" fill="#939599">
+                            <tspan x="54" y="106">点击上传</tspan>
+                        </text>
+                        <g id="编组" transform="translate(68.000000, 60.000000)" stroke="#939599" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6">
+                            <g id="编组-6" transform="translate(2.000000, 2.000000)">
+                                <line x1="0" y1="10" x2="20" y2="10" id="直线-2"></line>
+                                <line x1="10" y1="-1.24344979e-14" x2="10" y2="20" id="直线-2"></line>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/main/nine-space/src/components/AppBar.vue

@@ -1,27 +1,27 @@
 <template>
-  <van-nav-bar
-    title="第九空间"
-    fixed
-    left-text=" "
-    right-text=" "
-    :left-arrow="false"
-    ref="bar"
-    z-index="20"
-    safe-area-inset-top
-    :border="false"
-  />
+    <van-nav-bar
+        title="第九空间"
+        fixed
+        left-text=" "
+        right-text=" "
+        :left-arrow="false"
+        ref="bar"
+        z-index="20"
+        safe-area-inset-top
+        :border="false"
+    />
 </template>
 
 <script>
 export default {
-  mounted() {
-    this.$nextTick(() => {
-      document.body.appendChild(this.$refs.bar.$el);
-    });
-  },
-  unmounted() {
-    document.body.removeChild(this.$refs.bar.$el);
-  },
+    mounted() {
+        this.$nextTick(() => {
+            document.body.appendChild(this.$refs.bar.$el);
+        });
+    },
+    unmounted() {
+        document.body.removeChild(this.$refs.bar.$el);
+    }
 };
 </script>
 

src/main/nine-space/src/components/Driver.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="driver"></div>
+    <div class="driver"></div>
 </template>
 
 <script>
@@ -8,7 +8,7 @@ export default {};
 
 <style lang="less" scoped>
 .driver {
-  height: 5px;
-  background-color: @bg2;
+    height: 5px;
+    background-color: @bg2;
 }
 </style>

src/main/nine-space/src/components/HelloWorld.vue

@@ -1,138 +1,118 @@
 <template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br />
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
-        >vue-cli documentation</a
-      >.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
-          target="_blank"
-          rel="noopener"
-          >babel</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa"
-          target="_blank"
-          rel="noopener"
-          >pwa</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
-          target="_blank"
-          rel="noopener"
-          >router</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
-          target="_blank"
-          rel="noopener"
-          >vuex</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
-          target="_blank"
-          rel="noopener"
-          >eslint</a
-        >
-      </li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li>
-        <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
-      </li>
-      <li>
-        <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
-          >Forum</a
-        >
-      </li>
-      <li>
-        <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
-          >Community Chat</a
-        >
-      </li>
-      <li>
-        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
-          >Twitter</a
-        >
-      </li>
-      <li>
-        <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
-      </li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li>
-        <a href="https://router.vuejs.org" target="_blank" rel="noopener"
-          >vue-router</a
-        >
-      </li>
-      <li>
-        <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-devtools#vue-devtools"
-          target="_blank"
-          rel="noopener"
-          >vue-devtools</a
-        >
-      </li>
-      <li>
-        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
-          >vue-loader</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-          rel="noopener"
-          >awesome-vue</a
-        >
-      </li>
-    </ul>
-  </div>
+    <div class="hello">
+        <h1>{{ msg }}</h1>
+        <p>
+            For a guide and recipes on how to configure / customize this project,<br />
+            check out the
+            <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+        </p>
+        <h3>Installed CLI Plugins</h3>
+        <ul>
+            <li>
+                <a
+                    href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
+                    target="_blank"
+                    rel="noopener"
+                    >babel</a
+                >
+            </li>
+            <li>
+                <a
+                    href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa"
+                    target="_blank"
+                    rel="noopener"
+                    >pwa</a
+                >
+            </li>
+            <li>
+                <a
+                    href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
+                    target="_blank"
+                    rel="noopener"
+                    >router</a
+                >
+            </li>
+            <li>
+                <a
+                    href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
+                    target="_blank"
+                    rel="noopener"
+                    >vuex</a
+                >
+            </li>
+            <li>
+                <a
+                    href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
+                    target="_blank"
+                    rel="noopener"
+                    >eslint</a
+                >
+            </li>
+        </ul>
+        <h3>Essential Links</h3>
+        <ul>
+            <li>
+                <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
+            </li>
+            <li>
+                <a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a>
+            </li>
+            <li>
+                <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a>
+            </li>
+            <li>
+                <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a>
+            </li>
+            <li>
+                <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
+            </li>
+        </ul>
+        <h3>Ecosystem</h3>
+        <ul>
+            <li>
+                <a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a>
+            </li>
+            <li>
+                <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
+            </li>
+            <li>
+                <a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener"
+                    >vue-devtools</a
+                >
+            </li>
+            <li>
+                <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a>
+            </li>
+            <li>
+                <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a>
+            </li>
+        </ul>
+    </div>
 </template>
 
 <script>
 export default {
-  name: "HelloWorld",
-  props: {
-    msg: String,
-  },
+    name: 'HelloWorld',
+    props: {
+        msg: String
+    }
 };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="less">
 h3 {
-  margin: 40px 0 0;
+    margin: 40px 0 0;
 }
 ul {
-  list-style-type: none;
-  padding: 0;
+    list-style-type: none;
+    padding: 0;
 }
 li {
-  display: inline-block;
-  margin: 0 10px;
+    display: inline-block;
+    margin: 0 10px;
 }
 a {
-  color: #42b983;
+    color: #42b983;
 }
 </style>

src/main/nine-space/src/components/LikeButton.vue

@@ -1,86 +1,83 @@
 <template>
-  <div class="like" @click.stop="like">
-    <img v-if="isLike" src="../assets/svgs/like.svg" alt="" />
-    <img v-else src="../assets/svgs/dislike.svg" alt="" />
-    <span><slot>16</slot></span>
-  </div>
+    <div class="like" @click.stop="like">
+        <img v-if="isLike" src="../assets/svgs/like.svg" alt="" />
+        <img v-else src="../assets/svgs/dislike.svg" alt="" />
+        <span><slot>16</slot></span>
+    </div>
 </template>
 
 <script>
 export default {
-  props: {
-    isLike: {
-      type: Boolean,
-      default: false,
+    props: {
+        isLike: {
+            type: Boolean,
+            default: false
+        }
     },
-  },
-  methods: {
-    like() {
-      this.$el.children[0].className += "rubberBand";
-      setTimeout(() => {
-        this.$el.children[0].className = this.$el.children[0].className.replace(
-          /rubberBand/g,
-          ""
-        );
-      }, 1000);
-    },
-  },
+    methods: {
+        like() {
+            this.$el.children[0].className += 'rubberBand';
+            setTimeout(() => {
+                this.$el.children[0].className = this.$el.children[0].className.replace(/rubberBand/g, '');
+            }, 1000);
+        }
+    }
 };
 </script>
 
 <style lang="less" scoped>
 .like {
-  display: inline-block;
-  color: #949699;
-  line-height: 24px;
+    display: inline-block;
+    color: #949699;
+    line-height: 24px;
 
-  img {
-    vertical-align: middle;
-    margin-right: 3px;
-  }
+    img {
+        vertical-align: middle;
+        margin-right: 3px;
+    }
 
-  span {
-    vertical-align: middle;
-  }
+    span {
+        vertical-align: middle;
+    }
 }
 
 @keyframes rubberBand {
-  from {
-    -webkit-transform: scale3d(1, 1, 1);
-    transform: scale3d(1, 1, 1);
-  }
+    from {
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+    }
 
-  30% {
-    -webkit-transform: scale3d(1.25, 0.75, 1);
-    transform: scale3d(1.25, 0.75, 1);
-  }
+    30% {
+        -webkit-transform: scale3d(1.25, 0.75, 1);
+        transform: scale3d(1.25, 0.75, 1);
+    }
 
-  40% {
-    -webkit-transform: scale3d(0.75, 1.25, 1);
-    transform: scale3d(0.75, 1.25, 1);
-  }
+    40% {
+        -webkit-transform: scale3d(0.75, 1.25, 1);
+        transform: scale3d(0.75, 1.25, 1);
+    }
 
-  50% {
-    -webkit-transform: scale3d(1.15, 0.85, 1);
-    transform: scale3d(1.15, 0.85, 1);
-  }
+    50% {
+        -webkit-transform: scale3d(1.15, 0.85, 1);
+        transform: scale3d(1.15, 0.85, 1);
+    }
 
-  65% {
-    -webkit-transform: scale3d(0.95, 1.05, 1);
-    transform: scale3d(0.95, 1.05, 1);
-  }
+    65% {
+        -webkit-transform: scale3d(0.95, 1.05, 1);
+        transform: scale3d(0.95, 1.05, 1);
+    }
 
-  75% {
-    -webkit-transform: scale3d(1.05, 0.95, 1);
-    transform: scale3d(1.05, 0.95, 1);
-  }
+    75% {
+        -webkit-transform: scale3d(1.05, 0.95, 1);
+        transform: scale3d(1.05, 0.95, 1);
+    }
 
-  to {
-    -webkit-transform: scale3d(1, 1, 1);
-    transform: scale3d(1, 1, 1);
-  }
+    to {
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+    }
 }
 .rubberBand {
-  animation: rubberBand ease-in-out 1s;
+    animation: rubberBand ease-in-out 1s;
 }
 </style>

src/main/nine-space/src/components/PageTitle.vue

@@ -1,27 +1,21 @@
 <template>
-  <van-cell
-    :title="title"
-    :border="false"
-    value="查看全部"
-    :url="url"
-    is-link
-  />
+    <van-cell :title="title" :border="false" value="查看全部" :url="url" is-link />
 </template>
 
 <script>
 export default {
-  props: ["title", "url"],
+    props: ['title', 'url']
 };
 </script>
 
 <style lang="less" scoped>
 .van-cell {
-  /deep/ .van-cell__title {
-    span {
-      font-size: 20px;
-      font-family: ZhenyanGB-Regular, ZhenyanGB;
+    /deep/ .van-cell__title {
+        span {
+            font-size: 20px;
+            font-family: ZhenyanGB-Regular, ZhenyanGB;
+        }
     }
-  }
-  padding: 30px 16px 20px 16px;
+    padding: 30px 16px 20px 16px;
 }
 </style>

src/main/nine-space/src/components/creator/CreatorInfo.vue

@@ -1,157 +1,154 @@
 <template>
-  <div class="info">
-    <van-image
-      width="88"
-      height="88"
-      src="https://bpic.588ku.com/illus_water_img/21/09/08/e769eb69326977dc1a5f488dfb988ba4.jpg"
-      fit="cover"
-      radius="100"
-    />
-
-    <img v-if="rank" class="NOImg" :src="NOInfo.img1" alt="" />
-
-    <div class="content">
-      <div class="text1 van-ellipsis">创作者姓名</div>
-      <div class="text2 van-ellipsis--l2">
-        介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍
-      </div>
-
-      <div class="text3">
-        <div class="sale" v-if="rank" :style="{ color: NOInfo.color }">
-          <img class="icon" :src="NOInfo.img2" alt="" />
-          <span>已售400</span>
-          <i class="font_family icon-a-icon-dianzan2"></i>
+    <div class="info">
+        <van-image
+            width="88"
+            height="88"
+            src="https://bpic.588ku.com/illus_water_img/21/09/08/e769eb69326977dc1a5f488dfb988ba4.jpg"
+            fit="cover"
+            radius="100"
+        />
+
+        <img v-if="rank" class="NOImg" :src="NOInfo.img1" alt="" />
+
+        <div class="content">
+            <div class="text1 van-ellipsis">创作者姓名</div>
+            <div class="text2 van-ellipsis--l2">介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍</div>
+
+            <div class="text3">
+                <div class="sale" v-if="rank" :style="{ color: NOInfo.color }">
+                    <img class="icon" :src="NOInfo.img2" alt="" />
+                    <span>已售400</span>
+                    <i class="font_family icon-a-icon-dianzan2"></i>
+                </div>
+                <div class="text4">
+                    <span>粉丝</span>
+                    <span>233</span>
+                </div>
+                <van-button plain type="primary" size="mini" round>关注</van-button>
+            </div>
         </div>
-        <div class="text4">
-          <span>粉丝</span>
-          <span>233</span>
-        </div>
-        <van-button plain type="primary" size="mini" round>关注</van-button>
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
 export default {
-  props: {
-    rank: {
-      type: Number,
-      default: 0,
-    },
-  },
-  computed: {
-    NOInfo() {
-      if (this.rank) {
-        const colors = ["#FF8E12", "#C37BFF", "#3ACEFF"];
-        return {
-          img1: require(`../../assets/svgs/NO${this.rank}.svg`),
-          img2: require(`../../assets/svgs/NOicon${this.rank}.svg`),
-          color: colors[this.rank - 1],
-        };
-      }
-      return {};
+    props: {
+        rank: {
+            type: Number,
+            default: 0
+        }
     },
-  },
+    computed: {
+        NOInfo() {
+            if (this.rank) {
+                const colors = ['#FF8E12', '#C37BFF', '#3ACEFF'];
+                return {
+                    img1: require(`../../assets/svgs/NO${this.rank}.svg`),
+                    img2: require(`../../assets/svgs/NOicon${this.rank}.svg`),
+                    color: colors[this.rank - 1]
+                };
+            }
+            return {};
+        }
+    }
 };
 </script>
 
 <style lang="less" scoped>
 .info {
-  display: flex;
-  padding: 24px 16px;
-  position: relative;
-
-  .content {
-    flex-grow: 1;
-    padding-left: 12px;
-
-    .text1 {
-      font-size: 16px;
-      font-weight: bold;
-      color: #ffffff;
-      line-height: 24px;
-    }
-
-    .text2 {
-      font-size: 14px;
-      color: #939599;
-      line-height: 20px;
-      margin: 6px 0;
-    }
-
-    .text3 {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .sale {
-        display: flex;
-        align-items: center;
-        font-size: 14px;
-        line-height: 24px;
-
-        .font_family {
-          font-size: 18px;
-          margin-left: 2px;
+    display: flex;
+    padding: 24px 16px;
+    position: relative;
+
+    .content {
+        flex-grow: 1;
+        padding-left: 12px;
+
+        .text1 {
+            font-size: 16px;
+            font-weight: bold;
+            color: #ffffff;
+            line-height: 24px;
         }
 
-        .icon {
-          display: block;
-          width: 18px;
+        .text2 {
+            font-size: 14px;
+            color: #939599;
+            line-height: 20px;
+            margin: 6px 0;
         }
 
-        span {
-          transform: translateX(3px);
+        .text3 {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .sale {
+                display: flex;
+                align-items: center;
+                font-size: 14px;
+                line-height: 24px;
+
+                .font_family {
+                    font-size: 18px;
+                    margin-left: 2px;
+                }
+
+                .icon {
+                    display: block;
+                    width: 18px;
+                }
+
+                span {
+                    transform: translateX(3px);
+                }
+            }
+
+            .van-button--mini {
+                min-width: 70px;
+                border: solid 0px transparent;
+                padding: 1px;
+                background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, #fdfb60, #ff8f3e);
+                background-origin: border-box;
+                box-sizing: border-box;
+                background-clip: content-box, border-box;
+            }
+
+            .text4 {
+                span {
+                    font-size: 14px;
+                    &:first-child {
+                        color: #939599;
+                        margin-right: 5px;
+                    }
+                }
+            }
         }
-      }
-
-      .van-button--mini {
-        min-width: 70px;
-        border: solid 0px transparent;
-        padding: 1px;
-        background-image: linear-gradient(@bg, @bg),
-          linear-gradient(135deg, #fdfb60, #ff8f3e);
-        background-origin: border-box;
-        box-sizing: border-box;
-        background-clip: content-box, border-box;
-      }
-
-      .text4 {
-        span {
-          font-size: 14px;
-          &:first-child {
-            color: #939599;
-            margin-right: 5px;
-          }
-        }
-      }
     }
-  }
-
-  .van-image {
-    flex-shrink: 0;
-  }
-
-  .NOImg {
-    position: absolute;
-    width: 98px;
-    display: block;
-    left: 10px;
-    top: 14px;
-  }
+
+    .van-image {
+        flex-shrink: 0;
+    }
+
+    .NOImg {
+        position: absolute;
+        width: 98px;
+        display: block;
+        left: 10px;
+        top: 14px;
+    }
 }
 
 .info + .info {
-  position: relative;
-  &::before {
-    content: "";
-    position: absolute;
-    left: 8px;
-    right: 0;
-    top: 0;
-    height: 1px;
-    background-color: #202122;
-  }
+    position: relative;
+    &::before {
+        content: '';
+        position: absolute;
+        left: 8px;
+        right: 0;
+        top: 0;
+        height: 1px;
+        background-color: #202122;
+    }
 }
 </style>

src/main/nine-space/src/components/product/productInfo.vue

@@ -1,82 +1,80 @@
 <template>
-  <div class="product" @click="click">
-    <van-image
-      width="100%"
-      height="calc(45vw - 21.6px)"
-      src="https://bpic.588ku.com/illus_water_img/21/09/08/e769eb69326977dc1a5f488dfb988ba4.jpg"
-      fit="cover"
-    />
+    <div class="product" @click="click">
+        <van-image
+            width="100%"
+            height="calc(45vw - 21.6px)"
+            src="https://bpic.588ku.com/illus_water_img/21/09/08/e769eb69326977dc1a5f488dfb988ba4.jpg"
+            fit="cover"
+        />
 
-    <div class="content">
-      <div class="name van-ellipsis">
-        游戏《百分之一》游戏《百分之一》游戏《百分之一》
-      </div>
-      <div class="price"><i class="font_family icon-icon_jiage"></i>320</div>
-      <div class="text">
-        <div class="text1">已售 23份</div>
-        <like-button>20</like-button>
-      </div>
+        <div class="content">
+            <div class="name van-ellipsis">游戏《百分之一》游戏《百分之一》游戏《百分之一》</div>
+            <div class="price"><i class="font_family icon-icon_jiage"></i>320</div>
+            <div class="text">
+                <div class="text1">已售 23份</div>
+                <like-button>20</like-button>
+            </div>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
 export default {
-  setup() {
-    const click = function () {
-      console.log("wyt6w");
-    };
+    setup() {
+        const click = function () {
+            console.log('wyt6w');
+        };
 
-    return { click };
-  },
+        return { click };
+    }
 };
 </script>
 
 <style lang="less" scoped>
 .product {
-  width: calc(50vw - 24px);
-  margin: 8px;
-  background-color: @bg2;
-  display: inline-block;
-
-  .van-image {
-    border-radius: 8px 8px 0px 0px;
-    overflow: hidden;
-    display: block;
-  }
-  .content {
-    padding: 10px;
+    width: calc(50vw - 24px);
+    margin: 8px;
+    background-color: @bg2;
+    display: inline-block;
 
-    .name {
-      font-size: 16px;
-      font-weight: bold;
-      color: #ffffff;
-      line-height: 24px;
+    .van-image {
+        border-radius: 8px 8px 0px 0px;
+        overflow: hidden;
+        display: block;
     }
+    .content {
+        padding: 10px;
+
+        .name {
+            font-size: 16px;
+            font-weight: bold;
+            color: #ffffff;
+            line-height: 24px;
+        }
 
-    .price {
-      font-size: 24px;
-      font-family: OSP;
-      color: @prim;
-      line-height: 22px;
-      padding: 7px 0;
+        .price {
+            font-size: 24px;
+            font-family: OSP;
+            color: @prim;
+            line-height: 22px;
+            padding: 7px 0;
 
-      i {
-        vertical-align: text-bottom;
-        font-size: 10px;
-      }
+            i {
+                vertical-align: text-bottom;
+                font-size: 10px;
+            }
+        }
     }
-  }
 
-  .text {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    .text1 {
-      font-weight: 400;
-      color: #939599;
-      line-height: 24px;
+    .text {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .text1 {
+            font-weight: 400;
+            color: #939599;
+            line-height: 24px;
+        }
     }
-  }
 }
 </style>

src/main/nine-space/src/components/product/productSmall.vue

@@ -1,79 +1,77 @@
 <template>
-  <div class="product" @click="click">
-    <van-image
-      width="100%"
-      height="calc(37.2vw - 17.9px)"
-      src="https://bpic.588ku.com/illus_water_img/21/09/08/e769eb69326977dc1a5f488dfb988ba4.jpg"
-      fit="cover"
-    />
+    <div class="product" @click="click">
+        <van-image
+            width="100%"
+            height="calc(37.2vw - 17.9px)"
+            src="https://bpic.588ku.com/illus_water_img/21/09/08/e769eb69326977dc1a5f488dfb988ba4.jpg"
+            fit="cover"
+        />
 
-    <div class="content">
-      <div class="name van-ellipsis">
-        游戏《百分之一》游戏《百分之一》游戏《百分之一》
-      </div>
-      <div class="text">
-        <div class="price"><i class="font_family icon-icon_jiage"></i>320</div>
-        <like-button>20</like-button>
-      </div>
+        <div class="content">
+            <div class="name van-ellipsis">游戏《百分之一》游戏《百分之一》游戏《百分之一》</div>
+            <div class="text">
+                <div class="price"><i class="font_family icon-icon_jiage"></i>320</div>
+                <like-button>20</like-button>
+            </div>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
 export default {
-  setup() {
-    const click = function () {
-      console.log("wyt6w");
-    };
+    setup() {
+        const click = function () {
+            console.log('wyt6w');
+        };
 
-    return { click };
-  },
+        return { click };
+    }
 };
 </script>
 
 <style lang="less" scoped>
 .product {
-  width: calc(50vw - 24px);
-  margin: 0 8px;
-  position: relative;
-
-  .van-image {
-    border-radius: 8px;
-    overflow: hidden;
-    display: block;
-  }
-  .content {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    padding: 3px 10px;
-    background-color: rgba(0, 0, 0, 0.6);
+    width: calc(50vw - 24px);
+    margin: 0 8px;
+    position: relative;
 
-    .name {
-      font-size: 16px;
-      font-weight: bold;
-      color: #ffffff;
-      line-height: 24px;
+    .van-image {
+        border-radius: 8px;
+        overflow: hidden;
+        display: block;
     }
+    .content {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        padding: 3px 10px;
+        background-color: rgba(0, 0, 0, 0.6);
 
-    .price {
-      font-size: 24px;
-      font-family: OSP;
-      color: @prim;
-      line-height: 22px;
+        .name {
+            font-size: 16px;
+            font-weight: bold;
+            color: #ffffff;
+            line-height: 24px;
+        }
 
-      i {
-        vertical-align: text-bottom;
-        font-size: 10px;
-      }
+        .price {
+            font-size: 24px;
+            font-family: OSP;
+            color: @prim;
+            line-height: 22px;
+
+            i {
+                vertical-align: text-bottom;
+                font-size: 10px;
+            }
+        }
     }
-  }
 
-  .text {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
+    .text {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
 }
 </style>

src/main/nine-space/src/main.js

@@ -1,29 +1,29 @@
-import { createApp } from "vue";
-import App from "./App.vue";
-import "./registerServiceWorker";
-import router from "./router";
-import store from "./store";
-import Vant from "vant";
-import { ConfigProvider } from "vant";
-import "vant/lib/index.css";
-import "./styles/app.less";
-import "./styles/font.less";
-import http from "./plugins/http";
-import PageTitle from "./components/PageTitle";
-import LikeButton from "./components/LikeButton.vue";
-import Driver from "./components/Driver.vue";
-import common from "./mixins/common";
-import VueClipboard from "vue-clipboard2";
+import { createApp } from 'vue';
+import App from './App.vue';
+import './registerServiceWorker';
+import router from './router';
+import store from './store';
+import Vant from 'vant';
+import { ConfigProvider } from 'vant';
+import 'vant/lib/index.css';
+import './styles/app.less';
+import './styles/font.less';
+import http from './plugins/http';
+import PageTitle from './components/PageTitle';
+import LikeButton from './components/LikeButton.vue';
+import Driver from './components/Driver.vue';
+import common from './mixins/common';
+import VueClipboard from 'vue-clipboard2';
 
 createApp(App)
-  .use(Vant)
-  .use(http)
-  .use(ConfigProvider)
-  .use(VueClipboard)
-  .mixin(common)
-  .component("page-title", PageTitle)
-  .component("like-button", LikeButton)
-  .component("driver", Driver)
-  .use(store)
-  .use(router)
-  .mount("#app");
+    .use(Vant)
+    .use(http)
+    .use(ConfigProvider)
+    .use(VueClipboard)
+    .mixin(common)
+    .component('page-title', PageTitle)
+    .component('like-button', LikeButton)
+    .component('driver', Driver)
+    .use(store)
+    .use(router)
+    .mount('#app');

src/main/nine-space/src/mixins/common.js

@@ -1,56 +1,56 @@
 export default {
-  computed: {
-    isLogin() {
-      return !!this.$store.state.userInfo;
+    computed: {
+        isLogin() {
+            return !!this.$store.state.userInfo;
+        },
+        authStatus() {
+            return this.$store.state.authStatus;
+        }
     },
-    authStatus() {
-      return this.$store.state.authStatus;
+    data() {
+        return {
+            AuthStatus: []
+        };
     },
-  },
-  data() {
-    return {
-      AuthStatus: [],
-    };
-  },
-  methods: {
-    updateUser(info, sucess = true) {
-      if (info) {
-        return this.$http
-          .post(
-            "/user/save",
-            {
-              ...this.$store.state.userInfo,
-              ...info,
-            },
-            {
-              body: "json",
+    methods: {
+        updateUser(info, sucess = true) {
+            if (info) {
+                return this.$http
+                    .post(
+                        '/user/save',
+                        {
+                            ...this.$store.state.userInfo,
+                            ...info
+                        },
+                        {
+                            body: 'json'
+                        }
+                    )
+                    .then(() => {
+                        return this.$store.dispatch('getUserInfo');
+                    })
+                    .then(() => {
+                        if (sucess) {
+                            this.$toast.success('更新成功');
+                        }
+                        return Promise.resolve();
+                    })
+                    .catch(e => {
+                        if (e) {
+                            this.$toast(e.error);
+                        }
+                        return Promise.reject();
+                    });
             }
-          )
-          .then(() => {
-            return this.$store.dispatch("getUserInfo");
-          })
-          .then(() => {
-            if (sucess) {
-              this.$toast.success("更新成功");
-            }
-            return Promise.resolve();
-          })
-          .catch((e) => {
-            if (e) {
-              this.$toast(e.error);
-            }
-            return Promise.reject();
-          });
-      }
-    },
-    updateFile(file) {
-      return this.$http
-        .post("/upload/base64", {
-          base64: file.content,
-        })
-        .then((res) => {
-          return Promise.resolve(res);
-        });
-    },
-  },
+        },
+        updateFile(file) {
+            return this.$http
+                .post('/upload/base64', {
+                    base64: file.content
+                })
+                .then(res => {
+                    return Promise.resolve(res);
+                });
+        }
+    }
 };

src/main/nine-space/src/mixins/phone.js

@@ -1,77 +1,77 @@
 //手机号码相关
 export default {
-  data() {
-    return {
-      phonePattern: /^[1][3,4,5,7,8,9][0-9]{9}$/,
-      isSend: false,
-      msgCode: "",
-      sendNum: 60,
-      timer: null,
-    };
-  },
-  methods: {
-    sendMsg(phone) {
-      this.isSend = true;
-      this.setTime(60);
-      this.$http
-        .get("/sms/sendVerify", {
-          phone: phone,
-        })
-        .then((res) => {
-          this.msgCode = res;
-          this.$toast.success("发送成功");
-        })
-        .catch((e) => {
-          if (e) {
-            this.$toast(e.error);
-          }
-          this.setTime(0);
-        });
+    data() {
+        return {
+            phonePattern: /^[1][3,4,5,7,8,9][0-9]{9}$/,
+            isSend: false,
+            msgCode: '',
+            sendNum: 60,
+            timer: null
+        };
     },
-    setTime(num) {
-      this.sendNum = num;
-      if (this.timer) {
-        clearTimeout(this.timer);
-      }
+    methods: {
+        sendMsg(phone) {
+            this.isSend = true;
+            this.setTime(60);
+            this.$http
+                .get('/sms/sendVerify', {
+                    phone: phone
+                })
+                .then(res => {
+                    this.msgCode = res;
+                    this.$toast.success('发送成功');
+                })
+                .catch(e => {
+                    if (e) {
+                        this.$toast(e.error);
+                    }
+                    this.setTime(0);
+                });
+        },
+        setTime(num) {
+            this.sendNum = num;
+            if (this.timer) {
+                clearTimeout(this.timer);
+            }
 
-      if (num <= 0) {
-        this.isSend = false;
-        return;
-      } else {
-        this.timer = setTimeout(() => {
-          this.setTime(num - 1);
-        }, 1000);
-      }
-    },
-    verifyMsg(phone, code) {
-      return this.$http
-        .get("/sms/verify", {
-          phone: phone,
-          code: code,
-        })
-        .catch((e) => {
-          if (e) {
-            this.$toast(e.error);
-          }
-          return Promise.reject();
-        });
-    },
-    loginByPhone(phone, psd) {
-      return this.$http
-        .post("/auth/phonePwdLogin", {
-          phone: phone,
-          password: psd,
-        })
-        .catch((e) => {
-          if (e) {
-            this.$toast(e.error);
-          }
-          return Promise.reject();
-        })
-        .then((res) => {
-          localStorage.setItem("nineToken", res);
-          return this.$store.dispatch("getUserInfo");
-        });
-    },
-  },
+            if (num <= 0) {
+                this.isSend = false;
+                return;
+            } else {
+                this.timer = setTimeout(() => {
+                    this.setTime(num - 1);
+                }, 1000);
+            }
+        },
+        verifyMsg(phone, code) {
+            return this.$http
+                .get('/sms/verify', {
+                    phone: phone,
+                    code: code
+                })
+                .catch(e => {
+                    if (e) {
+                        this.$toast(e.error);
+                    }
+                    return Promise.reject();
+                });
+        },
+        loginByPhone(phone, psd) {
+            return this.$http
+                .post('/auth/phonePwdLogin', {
+                    phone: phone,
+                    password: psd
+                })
+                .catch(e => {
+                    if (e) {
+                        this.$toast(e.error);
+                    }
+                    return Promise.reject();
+                })
+                .then(res => {
+                    localStorage.setItem('nineToken', res);
+                    return this.$store.dispatch('getUserInfo');
+                });
+        }
+    }
 };

src/main/nine-space/src/plugins/http.js

@@ -1,5 +1,5 @@
-import axios from "axios";
-import qs from "qs";
+import axios from 'axios';
+import qs from 'qs';
 /* eslint-disable */
 let baseUrl = "http://localhost:8080";
 switch (process.env.NODE_ENV) {

src/main/nine-space/src/registerServiceWorker.js

@@ -1,34 +1,32 @@
 /* eslint-disable no-console */
 
-import { register } from "register-service-worker";
+import { register } from 'register-service-worker';
 
-if (process.env.NODE_ENV === "production") {
-  register(`${process.env.BASE_URL}service-worker.js`, {
-    ready() {
-      console.log(
-        "App is being served from cache by a service worker.\n" +
-          "For more details, visit https://goo.gl/AFskqB"
-      );
-    },
-    registered() {
-      console.log("Service worker has been registered.");
-    },
-    cached() {
-      console.log("Content has been cached for offline use.");
-    },
-    updatefound() {
-      console.log("New content is downloading.");
-    },
-    updated() {
-      console.log("New content is available; please refresh.");
-    },
-    offline() {
-      console.log(
-        "No internet connection found. App is running in offline mode."
-      );
-    },
-    error(error) {
-      console.error("Error during service worker registration:", error);
-    },
-  });
+if (process.env.NODE_ENV === 'production') {
+    register(`${process.env.BASE_URL}service-worker.js`, {
+        ready() {
+            console.log(
+                'App is being served from cache by a service worker.\n' +
+                    'For more details, visit https://goo.gl/AFskqB'
+            );
+        },
+        registered() {
+            console.log('Service worker has been registered.');
+        },
+        cached() {
+            console.log('Content has been cached for offline use.');
+        },
+        updatefound() {
+            console.log('New content is downloading.');
+        },
+        updated() {
+            console.log('New content is available; please refresh.');
+        },
+        offline() {
+            console.log('No internet connection found. App is running in offline mode.');
+        },
+        error(error) {
+            console.error('Error during service worker registration:', error);
+        }
+    });
 }

src/main/nine-space/src/router/Page.js

@@ -1,4 +1,4 @@
 export const Page = {
-  Login: 1,
-  Every: 2,
+    Login: 1,
+    Every: 2
 };

src/main/nine-space/src/router/index.js

@@ -1,134 +1,134 @@
-import { createRouter, createWebHistory } from "vue-router";
-import store from "../store";
-import { Page } from "./Page";
-import { Dialog } from "vant";
+import { createRouter, createWebHistory } from 'vue-router';
+import store from '../store';
+import { Page } from './Page';
+import { Dialog } from 'vant';
 
 const routes = [
-  {
-    path: "/",
-    redirect: "home",
-  },
-  {
-    path: "/",
-    component: () => import("../views/Index.vue"),
-    children: [
-      {
-        path: "/home",
-        name: "home",
-        component: () => import("../views/Home.vue"),
-        meta: {
-          pageType: Page.Every,
-          title: "第九空间",
-        },
-      },
-      {
-        path: "/discover",
-        name: "discover",
-        component: () => import("../views/Discover.vue"),
+    {
+        path: '/',
+        redirect: 'home'
+    },
+    {
+        path: '/',
+        component: () => import('../views/Index.vue'),
+        children: [
+            {
+                path: '/home',
+                name: 'home',
+                component: () => import('../views/Home.vue'),
+                meta: {
+                    pageType: Page.Every,
+                    title: '第九空间'
+                }
+            },
+            {
+                path: '/discover',
+                name: 'discover',
+                component: () => import('../views/Discover.vue'),
+                meta: {
+                    pageType: Page.Every,
+                    title: '第九空间'
+                }
+            },
+            {
+                path: '/store',
+                name: 'store',
+                component: () => import('../views/Store.vue'),
+                meta: {
+                    pageType: Page.Every,
+                    title: '第九空间'
+                }
+            },
+            {
+                path: '/mine',
+                name: 'mine',
+                component: () => import('../views/Mine.vue'),
+                meta: {
+                    pageType: Page.Every,
+                    title: '第九空间'
+                }
+            }
+        ]
+    },
+    {
+        path: '/login',
+        name: 'userLogin',
+        component: () => import('../views/user/Login.vue'),
         meta: {
-          pageType: Page.Every,
-          title: "第九空间",
-        },
-      },
-      {
-        path: "/store",
-        name: "store",
-        component: () => import("../views/Store.vue"),
+            pageType: Page.Login,
+            title: '登录'
+        }
+    },
+    {
+        path: '/register',
+        name: 'userRegister',
+        component: () => import('../views/user/Register.vue'),
         meta: {
-          pageType: Page.Every,
-          title: "第九空间",
-        },
-      },
-      {
-        path: "/mine",
-        name: "mine",
-        component: () => import("../views/Mine.vue"),
+            pageType: Page.Login,
+            title: '注册'
+        }
+    },
+    {
+        path: '/forget',
+        name: 'userForget',
+        component: () => import('../views/user/Forget.vue'),
         meta: {
-          pageType: Page.Every,
-          title: "第九空间",
-        },
-      },
-    ],
-  },
-  {
-    path: "/login",
-    name: "userLogin",
-    component: () => import("../views/user/Login.vue"),
-    meta: {
-      pageType: Page.Login,
-      title: "登录",
+            pageType: Page.Login,
+            title: '忘记密码'
+        }
     },
-  },
-  {
-    path: "/register",
-    name: "userRegister",
-    component: () => import("../views/user/Register.vue"),
-    meta: {
-      pageType: Page.Login,
-      title: "注册",
+    {
+        path: '/verified',
+        name: 'userVerified',
+        component: () => import('../views/user/Verified.vue')
     },
-  },
-  {
-    path: "/forget",
-    name: "userForget",
-    component: () => import("../views/user/Forget.vue"),
-    meta: {
-      pageType: Page.Login,
-      title: "忘记密码",
+    {
+        path: '/setting',
+        name: 'userSetting',
+        component: () => import('../views/user/Setting.vue')
     },
-  },
-  {
-    path: "/verified",
-    name: "userVerified",
-    component: () => import("../views/user/Verified.vue"),
-  },
-  {
-    path: "/setting",
-    name: "userSetting",
-    component: () => import("../views/user/Setting.vue"),
-  },
-  {
-    path: "/changeText",
-    name: "userChangeText",
-    component: () => import("../views/user/ChangeText.vue"),
-  },
-  {
-    path: "/detail",
-    name: "detail",
-    component: () => import("../views/Detail.vue"),
-    meta: {
-      pageType: Page.Every,
-      title: "第九空间",
+    {
+        path: '/changeText',
+        name: 'userChangeText',
+        component: () => import('../views/user/ChangeText.vue')
     },
-  },
+    {
+        path: '/detail',
+        name: 'detail',
+        component: () => import('../views/Detail.vue'),
+        meta: {
+            pageType: Page.Every,
+            title: '第九空间'
+        }
+    }
 ];
 
 const router = createRouter({
-  history: createWebHistory(process.env.BASE_URL),
-  routes,
+    history: createWebHistory(process.env.BASE_URL),
+    routes
 });
 
 router.beforeEach((to, from, next) => {
-  if (!store.state.userInfo && to.meta.pageType !== Page.Login) {
-    store
-      .dispatch("getUserInfo")
-      .then(() => {
+    if (!store.state.userInfo && to.meta.pageType !== Page.Login) {
+        store
+            .dispatch('getUserInfo')
+            .then(() => {
+                next();
+            })
+            .catch(() => {
+                if (to.meta.pageType != Page.Every) {
+                    Dialog.alert({
+                        message: '用户未登录'
+                    }).then(() => {
+                        next('/login');
+                    });
+                } else {
+                    next();
+                }
+            });
+    } else {
         next();
-      })
-      .catch(() => {
-        if (to.meta.pageType != Page.Every) {
-          Dialog.alert({
-            message: "用户未登录",
-          }).then(() => {
-            next("/login");
-          });
-        } else {
-          next();
-        }
-      });
-  } else {
-    next();
-  }
+    }
 });
 
 export default router;

src/main/nine-space/src/store/index.js

@@ -1,32 +1,32 @@
-import { createStore } from "vuex";
-import http from "../plugins/http";
+import { createStore } from 'vuex';
+import http from '../plugins/http';
 
 export default createStore({
-  state: {
-    finished: false,
-    userInfo: null,
-  },
-  mutations: {
-    setFinished(state, finished) {
-      state.finished = finished;
+    state: {
+        finished: false,
+        userInfo: null
     },
-    setUserInfo(state, userInfo) {
-      state.userInfo = userInfo;
+    mutations: {
+        setFinished(state, finished) {
+            state.finished = finished;
+        },
+        setUserInfo(state, userInfo) {
+            state.userInfo = userInfo;
+        }
     },
-  },
-  actions: {
-    getUserInfo(context) {
-      return http.http
-        .get("/user/my")
-        .then((res) => {
-          context.commit("setUserInfo", res);
-          return Promise.resolve();
-        })
-        .catch(() => {
-          context.commit("setUserInfo", null);
-          return Promise.reject();
-        });
+    actions: {
+        getUserInfo(context) {
+            return http.http
+                .get('/user/my')
+                .then(res => {
+                    context.commit('setUserInfo', res);
+                    return Promise.resolve();
+                })
+                .catch(() => {
+                    context.commit('setUserInfo', null);
+                    return Promise.reject();
+                });
+        }
     },
-  },
-  modules: {},
+    modules: {}
 });

src/main/nine-space/src/styles/app.less

@@ -29,14 +29,22 @@
   --van-uploader-upload-active-color: transparent;
   --van-uploader-upload-background-color: transparent;
   --van-uploader-file-background-color: transparent;
+  --van-active-color: @bg3;
 }
 input,
+input:hover,
+input:visited,
+input:active,
+input:focus,
 select,
 button {
   outline: none;
   border: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   -webkit-appearance: none;
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+  -webkit-user-select: none;
+  user-select: none;
+  -moz-user-focus: none;
 }
 .van-divider::after,
 .van-divider::before {

src/main/nine-space/src/views/About.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
+    <div class="about">
+        <h1>This is an about page</h1>
+    </div>
 </template>

src/main/nine-space/src/views/Creator.vue

@@ -1,16 +1,16 @@
 <template>
-  <div>
-    <creator-info></creator-info>
-    <creator-info></creator-info>
-    <creator-info></creator-info>
-    <creator-info></creator-info>
-  </div>
+    <div>
+        <creator-info></creator-info>
+        <creator-info></creator-info>
+        <creator-info></creator-info>
+        <creator-info></creator-info>
+    </div>
 </template>
 
 <script>
-import CreatorInfo from "../components/creator/CreatorInfo.vue";
+import CreatorInfo from '../components/creator/CreatorInfo.vue';
 export default {
-  components: { CreatorInfo },
+    components: { CreatorInfo }
 };
 </script>
 

src/main/nine-space/src/views/Detail.vue

@@ -1,302 +1,301 @@
 <template>
-  <div class="detail">
-    <swiper pagination class="mySwiper">
-      <swiper-slide><img src="../assets/detail.jpg" /></swiper-slide>
-      <swiper-slide><img src="../assets/detail.jpg" /></swiper-slide>
-      <swiper-slide><img src="../assets/detail.jpg" /></swiper-slide>
-      <swiper-slide><img src="../assets/detail.jpg" /></swiper-slide>
-      <swiper-slide><img src="../assets/detail.jpg" /></swiper-slide>
-      <swiper-slide><img src="../assets/detail.jpg" /></swiper-slide>
-    </swiper>
+    <div class="detail">
+        <swiper pagination class="mySwiper">
+            <swiper-slide><img src="../assets/detail.jpg" /></swiper-slide>
+            <swiper-slide><img src="../assets/detail.jpg" /></swiper-slide>
+            <swiper-slide><img src="../assets/detail.jpg" /></swiper-slide>
+            <swiper-slide><img src="../assets/detail.jpg" /></swiper-slide>
+            <swiper-slide><img src="../assets/detail.jpg" /></swiper-slide>
+            <swiper-slide><img src="../assets/detail.jpg" /></swiper-slide>
+        </swiper>
 
-    <div class="info">
-      <div class="price-line">
-        <div class="price"><i class="font_family icon-icon_jiage"></i>320</div>
-        <div class="sub">含 <span>5%</span> 版税</div>
-        <div class="text">
-          <span>已售 23</span>
-          <span>剩余 50</span>
+        <div class="info">
+            <div class="price-line">
+                <div class="price"><i class="font_family icon-icon_jiage"></i>320</div>
+                <div class="sub">含 <span>5%</span> 版税</div>
+                <div class="text">
+                    <span>已售 23</span>
+                    <span>剩余 50</span>
+                </div>
+            </div>
+            <div class="title">游戏《百分之一》精美皮肤---恶魔的礼物</div>
+            <div class="info-bottom">
+                <span class="text1"> 编号 338392 </span>
+                <van-button type="primary" plain size="mini">选择其他编号</van-button>
+                <like-button>20</like-button>
+            </div>
         </div>
-      </div>
-      <div class="title">游戏《百分之一》精美皮肤---恶魔的礼物</div>
-      <div class="info-bottom">
-        <span class="text1"> 编号 338392 </span>
-        <van-button type="primary" plain size="mini">选择其他编号</van-button>
-        <like-button>20</like-button>
-      </div>
-    </div>
 
-    <driver />
-    <van-cell value="进入主页" is-link class="creator">
-      <template #icon>
-        <van-image
-          width="40"
-          height="40"
-          src="https://bpic.588ku.com/illus_water_img/21/09/08/e769eb69326977dc1a5f488dfb988ba4.jpg"
-          fit="cover"
-          radius="100"
-        />
-      </template>
-      <template #title>
-        <div class="text1">铸造者昵称</div>
-        <div class="text2">铸造者</div>
-      </template>
-    </van-cell>
+        <driver />
+        <van-cell value="进入主页" is-link class="creator">
+            <template #icon>
+                <van-image
+                    width="40"
+                    height="40"
+                    src="https://bpic.588ku.com/illus_water_img/21/09/08/e769eb69326977dc1a5f488dfb988ba4.jpg"
+                    fit="cover"
+                    radius="100"
+                />
+            </template>
+            <template #title>
+                <div class="text1">铸造者昵称</div>
+                <div class="text2">铸造者</div>
+            </template>
+        </van-cell>
 
-    <driver />
+        <driver />
 
-    <div class="goods">
-      <div class="page-title">商品特性</div>
-      <div class="specific-list">
-        <div class="specific-item">
-          <div class="text1">数字权益卡</div>
-          <div class="text2">打开可见</div>
-        </div>
-        <div class="specific-item">
-          <div class="text1">属性</div>
-          <div class="text2">S级</div>
-        </div>
-        <div class="specific-item">
-          <div class="text1">限量发售</div>
-          <div class="text2">100份</div>
+        <div class="goods">
+            <div class="page-title">商品特性</div>
+            <div class="specific-list">
+                <div class="specific-item">
+                    <div class="text1">数字权益卡</div>
+                    <div class="text2">打开可见</div>
+                </div>
+                <div class="specific-item">
+                    <div class="text1">属性</div>
+                    <div class="text2">S级</div>
+                </div>
+                <div class="specific-item">
+                    <div class="text1">限量发售</div>
+                    <div class="text2">100份</div>
+                </div>
+            </div>
+            <div class="page-title">链上信息</div>
+            <div class="page-text">
+                创世“由艺术大师天野喜孝为游戏”百分之一“倾情绘制，天野喜孝是日本知名画家，插画师，角色设计师，普任”最终幻想“系列多部作品的角色设计
+            </div>
+            <div class="page-title" style="padding-top: 30px">作品描述</div>
+            <div class="page-text">
+                品名：数字权益卡<br />
+                款式：基础版*3+待解锁隐藏款*2<br />
+                尺寸：1080x1920<br />
+                类型：个人创作 <br />
+                创建时间：2021-08-20<br />
+                创世“由艺术大师天野喜孝为游戏”百分之一“倾情绘制，天野喜孝是日本知名画家，插画师，角色设计师，普任”最终幻想“系列多部作品的角色设计
+            </div>
         </div>
-      </div>
-      <div class="page-title">链上信息</div>
-      <div class="page-text">
-        创世“由艺术大师天野喜孝为游戏”百分之一“倾情绘制，天野喜孝是日本知名画家，插画师，角色设计师，普任”最终幻想“系列多部作品的角色设计
-      </div>
-      <div class="page-title" style="padding-top: 30px">作品描述</div>
-      <div class="page-text">
-        品名：数字权益卡<br />
-        款式：基础版*3+待解锁隐藏款*2<br />
-        尺寸：1080x1920<br />
-        类型：个人创作 <br />
-        创建时间：2021-08-20<br />
-        创世“由艺术大师天野喜孝为游戏”百分之一“倾情绘制，天野喜孝是日本知名画家，插画师，角色设计师，普任”最终幻想“系列多部作品的角色设计
-      </div>
-    </div>
 
-    <driver />
+        <driver />
 
-    <van-collapse v-model="activeName" accordion>
-      <van-collapse-item title="交易记录" name="1">
-        <van-cell title="单元格" value="内容"> </van-cell>
-      </van-collapse-item>
-    </van-collapse>
+        <van-collapse v-model="activeName" accordion>
+            <van-collapse-item title="交易记录" name="1">
+                <van-cell title="单元格" value="内容"> </van-cell>
+            </van-collapse-item>
+        </van-collapse>
 
-    <driver />
-  </div>
+        <driver />
+    </div>
 </template>
 
 <script>
-import { Swiper, SwiperSlide } from "swiper/vue";
+import { Swiper, SwiperSlide } from 'swiper/vue';
 
-import "swiper/swiper.min.css";
-import "swiper/swiper-bundle.min.css";
+import 'swiper/swiper.min.css';
+import 'swiper/swiper-bundle.min.css';
 
-import SwiperCore, { Pagination } from "swiper";
+import SwiperCore, { Pagination } from 'swiper';
 
 // install Swiper modules
 SwiperCore.use([Pagination]);
 
 export default {
-  components: {
-    Swiper,
-    SwiperSlide,
-  },
-  data() {
-    return {
-      activeName: "1",
-    };
-  },
+    components: {
+        Swiper,
+        SwiperSlide
+    },
+    data() {
+        return {
+            activeName: '1'
+        };
+    }
 };
 </script>
 
 <style lang="less" scoped>
 .detail {
-  padding-bottom: 100px;
+    padding-bottom: 100px;
 }
 .info {
-  height: 164px;
-  background-color: @bg;
-  border-radius: 20px 20px 0 0;
-  transform: translateY(-16px);
-  position: relative;
-  z-index: 2;
-  padding: 16px;
-  box-sizing: border-box;
+    height: 164px;
+    background-color: @bg;
+    border-radius: 20px 20px 0 0;
+    transform: translateY(-16px);
+    position: relative;
+    z-index: 2;
+    padding: 16px;
+    box-sizing: border-box;
 
-  .price {
-    font-size: 36px;
-    font-family: OSP;
-    color: #fdfb60;
-    line-height: 36px;
-    transform: translateY(3px);
+    .price {
+        font-size: 36px;
+        font-family: OSP;
+        color: #fdfb60;
+        line-height: 36px;
+        transform: translateY(3px);
 
-    .font_family {
-      font-size: 10px;
-      line-height: 24px;
-      vertical-align: middle;
+        .font_family {
+            font-size: 10px;
+            line-height: 24px;
+            vertical-align: middle;
+        }
     }
-  }
 
-  .price-line {
-    display: flex;
-    align-items: flex-end;
-    .sub {
-      flex-grow: 1;
-      margin-left: 5px;
-      font-size: 14px;
-      color: #949699;
-      line-height: 16px;
-      span {
-        color: #fff;
-      }
-    }
+    .price-line {
+        display: flex;
+        align-items: flex-end;
+        .sub {
+            flex-grow: 1;
+            margin-left: 5px;
+            font-size: 14px;
+            color: #949699;
+            line-height: 16px;
+            span {
+                color: #fff;
+            }
+        }
 
-    .text {
-      font-size: 14px;
-      color: #939599;
-      line-height: 16px;
-      span {
-        margin-left: 10px;
-      }
+        .text {
+            font-size: 14px;
+            color: #939599;
+            line-height: 16px;
+            span {
+                margin-left: 10px;
+            }
+        }
     }
-  }
-
-  .title {
-    font-size: 20px;
-    font-weight: bold;
-    color: #ffffff;
-    line-height: 28px;
-    margin-top: 12px;
-  }
 
-  .info-bottom {
-    display: flex;
-    position: relative;
-    margin-top: 4px;
-    .text1 {
-      font-size: 14px;
-      color: #949699;
-      line-height: 24px;
-    }
-    .van-button {
-      font-size: 13px;
-      color: #fdfb60;
-      line-height: 24px;
-      background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      border-width: 0px;
-      margin-left: 10px;
+    .title {
+        font-size: 20px;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 28px;
+        margin-top: 12px;
     }
 
-    .like {
-      position: absolute;
-      right: 0;
+    .info-bottom {
+        display: flex;
+        position: relative;
+        margin-top: 4px;
+        .text1 {
+            font-size: 14px;
+            color: #949699;
+            line-height: 24px;
+        }
+        .van-button {
+            font-size: 13px;
+            color: #fdfb60;
+            line-height: 24px;
+            background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            border-width: 0px;
+            margin-left: 10px;
+        }
+
+        .like {
+            position: absolute;
+            right: 0;
+        }
     }
-  }
 }
 
 /deep/.creator {
-  align-items: center;
-  padding: 24px 16px 24px;
-  .van-cell__title {
-    margin-left: 12px;
-    .text1 {
-      font-size: 16px;
-      line-height: 24px;
+    align-items: center;
+    padding: 24px 16px 24px;
+    .van-cell__title {
+        margin-left: 12px;
+        .text1 {
+            font-size: 16px;
+            line-height: 24px;
+        }
+        .text2 {
+            font-size: 12px;
+            color: #939599;
+            line-height: 22px;
+        }
     }
-    .text2 {
-      font-size: 12px;
-      color: #939599;
-      line-height: 22px;
-    }
-  }
 
-  .van-cell__value {
-    font-size: 13px;
-  }
+    .van-cell__value {
+        font-size: 13px;
+    }
 }
 
 /deep/ .mySwiper {
-  width: 100vw;
-  height: 100vw;
-  z-index: 1;
+    width: 100vw;
+    height: 100vw;
+    z-index: 1;
 
-  .swiper-pagination {
-    bottom: 22px;
-  }
+    .swiper-pagination {
+        bottom: 22px;
+    }
 
-  .swiper-pagination-bullet {
-    width: 6px;
-    height: 2px;
-    border-radius: 1px;
-    background: #d7d7d7;
-  }
+    .swiper-pagination-bullet {
+        width: 6px;
+        height: 2px;
+        border-radius: 1px;
+        background: #d7d7d7;
+    }
 
-  .swiper-pagination-bullet-active {
-    background: @prim;
-  }
+    .swiper-pagination-bullet-active {
+        background: @prim;
+    }
 
-  .swiper-slide img {
-    display: block;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    border-radius: 4px;
-  }
+    .swiper-slide img {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: 4px;
+    }
 }
 .goods {
-  padding: 20px 16px;
+    padding: 20px 16px;
 }
 
 .page-title {
-  font-size: 18px;
-  font-weight: bold;
-  color: #ffffff;
-  line-height: 28px;
+    font-size: 18px;
+    font-weight: bold;
+    color: #ffffff;
+    line-height: 28px;
 }
 .specific-list {
-  padding: 16px 0 32px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+    padding: 16px 0 32px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 }
 .specific-item {
-  width: 94px;
-  height: 62px;
-  border-radius: 4px;
-  border: solid 0px transparent;
-  padding: 1px;
-  background-image: linear-gradient(@bg, @bg),
-    linear-gradient(135deg, #fdfb60, #ff8f3e);
-  background-origin: border-box;
-  box-sizing: border-box;
-  background-clip: content-box, border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
+    width: 94px;
+    height: 62px;
+    border-radius: 4px;
+    border: solid 0px transparent;
+    padding: 1px;
+    background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, #fdfb60, #ff8f3e);
+    background-origin: border-box;
+    box-sizing: border-box;
+    background-clip: content-box, border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
 
-  .text1 {
-    font-size: 14px;
-    color: #939599;
-    line-height: 24px;
-  }
+    .text1 {
+        font-size: 14px;
+        color: #939599;
+        line-height: 24px;
+    }
 
-  .text2 {
-    font-size: 14px;
-    color: #ffffff;
-    line-height: 24px;
-  }
+    .text2 {
+        font-size: 14px;
+        color: #ffffff;
+        line-height: 24px;
+    }
 }
 
 .page-text {
-  font-size: 14px;
-  color: #ffffff;
-  line-height: 28px;
-  margin-top: 10px;
+    font-size: 14px;
+    color: #ffffff;
+    line-height: 28px;
+    margin-top: 10px;
 }
 </style>

src/main/nine-space/src/views/Discover.vue

@@ -1,289 +1,264 @@
 <template>
-  <div class="discover">
-    <van-sticky ref="top" @change="change">
-      <div class="top">
-        <div class="top-btn">
-          <div
-            class="btn"
-            :class="{ active: active === 'explore' }"
-            @click="changeActive('explore')"
-          >
-            收藏探索
-          </div>
-          <div
-            class="btn"
-            :class="{ active: active === 'creator' }"
-            @click="changeActive('creator')"
-          >
-            铸造者
-          </div>
-        </div>
-        <div class="search">
-          <img src="../assets/svgs/search.svg" alt="" />
-        </div>
-      </div>
+    <div class="discover">
+        <van-sticky ref="top" @change="change">
+            <div class="top">
+                <div class="top-btn">
+                    <div class="btn" :class="{ active: active === 'explore' }" @click="changeActive('explore')">
+                        收藏探索
+                    </div>
+                    <div class="btn" :class="{ active: active === 'creator' }" @click="changeActive('creator')">
+                        铸造者
+                    </div>
+                </div>
+                <div class="search">
+                    <img src="../assets/svgs/search.svg" alt="" />
+                </div>
+            </div>
 
-      <van-tabs
-        v-if="active === 'creator'"
-        v-model:active="type"
-        line-width="16"
-        line-height="2"
-      >
-        <van-tab title="全部"></van-tab>
-        <van-tab title="最新"></van-tab>
-        <van-tab title="人气"></van-tab>
-        <van-tab title="关注"></van-tab>
-      </van-tabs>
-    </van-sticky>
+            <van-tabs v-if="active === 'creator'" v-model:active="type" line-width="16" line-height="2">
+                <van-tab title="全部"></van-tab>
+                <van-tab title="最新"></van-tab>
+                <van-tab title="人气"></van-tab>
+                <van-tab title="关注"></van-tab>
+            </van-tabs>
+        </van-sticky>
 
-    <template v-if="active === 'explore'">
-      <swiper pagination class="mySwiper">
-        <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
-        <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
-        <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
-        <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
-        <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
-        <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
-      </swiper>
+        <template v-if="active === 'explore'">
+            <swiper pagination class="mySwiper">
+                <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
+                <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
+                <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
+                <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
+                <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
+                <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
+            </swiper>
 
-      <van-grid :border="false">
-        <van-grid-item text="精选推荐">
-          <template v-slot:icon>
-            <img
-              class="grid-img"
-              src="../assets/svgs/info_icon_jingxuanxilie.svg"
-            />
-          </template>
-        </van-grid-item>
-        <van-grid-item text="原创系列">
-          <template v-slot:icon>
-            <img
-              class="grid-img"
-              src="../assets/svgs/info_icon_yuanchangxilie.svg"
-            />
-          </template>
-        </van-grid-item>
-        <van-grid-item text="数字盲盒">
-          <template v-slot:icon>
-            <img
-              class="grid-img"
-              src="../assets/svgs/info_icon_manghexilie.svg"
-            />
-          </template>
-        </van-grid-item>
-        <van-grid-item text="拍卖系列">
-          <template v-slot:icon>
-            <img
-              class="grid-img"
-              src="../assets/svgs/info_icon_paimaixilie.svg"
-            />
-          </template>
-        </van-grid-item>
-      </van-grid>
+            <van-grid :border="false">
+                <van-grid-item text="精选推荐">
+                    <template v-slot:icon>
+                        <img class="grid-img" src="../assets/svgs/info_icon_jingxuanxilie.svg" />
+                    </template>
+                </van-grid-item>
+                <van-grid-item text="原创系列">
+                    <template v-slot:icon>
+                        <img class="grid-img" src="../assets/svgs/info_icon_yuanchangxilie.svg" />
+                    </template>
+                </van-grid-item>
+                <van-grid-item text="数字盲盒">
+                    <template v-slot:icon>
+                        <img class="grid-img" src="../assets/svgs/info_icon_manghexilie.svg" />
+                    </template>
+                </van-grid-item>
+                <van-grid-item text="拍卖系列">
+                    <template v-slot:icon>
+                        <img class="grid-img" src="../assets/svgs/info_icon_paimaixilie.svg" />
+                    </template>
+                </van-grid-item>
+            </van-grid>
 
-      <div class="title">本期推荐</div>
-      <div class="box-list">
-        <product-info></product-info>
-        <product-info></product-info>
-        <product-info></product-info>
-        <product-info></product-info>
-        <product-info></product-info>
-        <product-info></product-info>
-      </div>
-    </template>
+            <div class="title">本期推荐</div>
+            <div class="box-list">
+                <product-info></product-info>
+                <product-info></product-info>
+                <product-info></product-info>
+                <product-info></product-info>
+                <product-info></product-info>
+                <product-info></product-info>
+            </div>
+        </template>
 
-    <creator v-else> </creator>
-  </div>
+        <creator v-else> </creator>
+    </div>
 </template>
 
 <script>
-import { Swiper, SwiperSlide } from "swiper/vue";
+import { Swiper, SwiperSlide } from 'swiper/vue';
 
-import "swiper/swiper.min.css";
-import "swiper/swiper-bundle.min.css";
+import 'swiper/swiper.min.css';
+import 'swiper/swiper-bundle.min.css';
 
-import SwiperCore, { Pagination } from "swiper";
+import SwiperCore, { Pagination } from 'swiper';
 
 // install Swiper modules
 SwiperCore.use([Pagination]);
 
-import ProductInfo from "../components/product/productInfo.vue";
-import Creator from "./Creator.vue";
+import ProductInfo from '../components/product/productInfo.vue';
+import Creator from './Creator.vue';
 
 export default {
-  name: "discover",
-  inject: ["bs"],
-  components: {
-    Swiper,
-    SwiperSlide,
-    ProductInfo,
-    Creator,
-  },
-  data() {
-    return {
-      active: "explore",
-      stiky: null,
-      type: 0,
-    };
-  },
-  beforeUnmount() {
-    if (this.stiky.parentNode.nodeName == "BODY") {
-      this.$nextTick(() => {
-        document.body.removeChild(this.stiky);
-      });
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.stiky = this.$refs.top.$el.childNodes[0];
-    });
-  },
-  methods: {
-    change(isFixed) {
-      if (isFixed) {
+    name: 'discover',
+    inject: ['bs'],
+    components: {
+        Swiper,
+        SwiperSlide,
+        ProductInfo,
+        Creator
+    },
+    data() {
+        return {
+            active: 'explore',
+            stiky: null,
+            type: 0
+        };
+    },
+    beforeUnmount() {
+        if (this.stiky.parentNode.nodeName == 'BODY') {
+            this.$nextTick(() => {
+                document.body.removeChild(this.stiky);
+            });
+        }
+    },
+    mounted() {
         this.$nextTick(() => {
-          document.body.appendChild(this.stiky);
+            this.stiky = this.$refs.top.$el.childNodes[0];
         });
-      } else {
-        this.$refs.top.$el.appendChild(this.stiky);
-      }
     },
-    changeActive(active) {
-      this.active = active;
-      this.$nextTick(() => {
-        this.bs.value.scrollTo(0, 0);
-        this.bs.value.refresh();
-      });
-    },
-  },
+    methods: {
+        change(isFixed) {
+            if (isFixed) {
+                this.$nextTick(() => {
+                    document.body.appendChild(this.stiky);
+                });
+            } else {
+                this.$refs.top.$el.appendChild(this.stiky);
+            }
+        },
+        changeActive(active) {
+            this.active = active;
+            this.$nextTick(() => {
+                this.bs.value.scrollTo(0, 0);
+                this.bs.value.refresh();
+            });
+        }
+    }
 };
 </script>
 
 <style lang="less" scoped>
 .top {
-  display: flex;
-  padding: 10px 16px;
-  background-color: @bg;
-  .top-btn {
-    flex-grow: 1;
-    .btn {
-      font-size: 16px;
-      font-family: ZhenyanGB;
-      font-weight: 400;
-      line-height: 26px;
-      display: inline-block;
-      vertical-align: text-bottom;
+    display: flex;
+    padding: 10px 16px;
+    background-color: @bg;
+    .top-btn {
+        flex-grow: 1;
+        .btn {
+            font-size: 16px;
+            font-family: ZhenyanGB;
+            font-weight: 400;
+            line-height: 26px;
+            display: inline-block;
+            vertical-align: text-bottom;
 
-      &.active {
-        color: @prim;
-        font-size: 20px;
-        font-weight: bold;
-        line-height: 30px;
-      }
-    }
+            &.active {
+                color: @prim;
+                font-size: 20px;
+                font-weight: bold;
+                line-height: 30px;
+            }
+        }
 
-    .btn + .btn {
-      margin-left: 30px;
+        .btn + .btn {
+            margin-left: 30px;
+        }
     }
-  }
 }
 
 .discover {
-  background-color: @bg3;
+    background-color: @bg3;
 }
 
 /deep/ .mySwiper {
-  width: calc(100vw - 32px);
-  height: calc(41vw - 13px);
+    width: calc(100vw - 32px);
+    height: calc(41vw - 13px);
 
-  .swiper-pagination {
-    bottom: 12px;
-  }
+    .swiper-pagination {
+        bottom: 12px;
+    }
 
-  .swiper-pagination-bullet {
-    width: 6px;
-    height: 2px;
-    border-radius: 1px;
-    background: #d7d7d7;
-  }
+    .swiper-pagination-bullet {
+        width: 6px;
+        height: 2px;
+        border-radius: 1px;
+        background: #d7d7d7;
+    }
 
-  .swiper-pagination-bullet-active {
-    background: @prim;
-  }
+    .swiper-pagination-bullet-active {
+        background: @prim;
+    }
 }
 
 .swiper-slide {
-  text-align: center;
-  font-size: 18px;
+    text-align: center;
+    font-size: 18px;
 
-  /* Center slide text vertically */
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  -webkit-align-items: center;
-  align-items: center;
+    /* Center slide text vertically */
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    -webkit-align-items: center;
+    align-items: center;
 }
 
 .swiper-slide img {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: 4px;
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 4px;
 }
 .grid-img {
-  display: block;
+    display: block;
 }
 .van-grid {
-  margin-top: 12px;
+    margin-top: 12px;
 }
 /deep/ .van-grid-item__content {
-  padding: 14px 20px 16px;
+    padding: 14px 20px 16px;
 }
 /deep/ .van-grid-item__text {
-  color: #fff;
-  font-size: 13px;
-  line-height: 18px;
-  margin-top: 4px;
+    color: #fff;
+    font-size: 13px;
+    line-height: 18px;
+    margin-top: 4px;
 }
 
 .title {
-  padding: 16px 20px 8px;
-  color: @prim;
-  font-size: 18px;
-  font-weight: bold;
+    padding: 16px 20px 8px;
+    color: @prim;
+    font-size: 18px;
+    font-weight: bold;
 }
 
 .box-list {
-  // display: flex;
-  // flex-wrap: wrap;
-  padding: 0 8px;
+    // display: flex;
+    // flex-wrap: wrap;
+    padding: 0 8px;
 }
 
 .discover {
-  padding-bottom: 50px;
+    padding-bottom: 50px;
 }
 
 /deep/.van-tab {
-  color: #fff;
-  flex: 0;
-  padding: 20px;
-  flex-shrink: 0;
-  min-width: 74px;
+    color: #fff;
+    flex: 0;
+    padding: 20px;
+    flex-shrink: 0;
+    min-width: 74px;
 
-  &.van-tab--active {
-    color: @prim;
-  }
+    &.van-tab--active {
+        color: @prim;
+    }
 }
 
 /deep/ .van-tabs__line {
-  bottom: 20px;
+    bottom: 20px;
 }
 </style>

src/main/nine-space/src/views/Home.vue

@@ -1,135 +1,135 @@
 <template>
-  <div class="home">
-    <swiper
-      :effect="'coverflow'"
-      :grabCursor="true"
-      :centeredSlides="true"
-      :slidesPerView="'auto'"
-      :coverflowEffect="{
-        rotate: 0,
-        stretch: 0,
-        depth: -100,
-        modifier: 1,
-        slideShadows: true,
-      }"
-      loop
-      class="mySwiper"
-    >
-      <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
-      <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
-      <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
-      <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
-    </swiper>
-
-    <page-title title="最HOT收藏品"></page-title>
-
-    <div class="hot">
-      <product-info></product-info>
-      <div class="hot-right">
-        <product-small></product-small>
-        <product-small></product-small>
-      </div>
+    <div class="home">
+        <swiper
+            :effect="'coverflow'"
+            :grabCursor="true"
+            :centeredSlides="true"
+            :slidesPerView="'auto'"
+            :coverflowEffect="{
+                rotate: 0,
+                stretch: 0,
+                depth: -100,
+                modifier: 1,
+                slideShadows: true
+            }"
+            loop
+            class="mySwiper"
+        >
+            <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
+            <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
+            <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
+            <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
+        </swiper>
+
+        <page-title title="最HOT收藏品"></page-title>
+
+        <div class="hot">
+            <product-info></product-info>
+            <div class="hot-right">
+                <product-small></product-small>
+                <product-small></product-small>
+            </div>
+        </div>
+
+        <div class="casting">
+            <page-title title="最受欢迎铸造者"></page-title>
+
+            <creator-info :rank="1"></creator-info>
+            <creator-info :rank="2"></creator-info>
+            <creator-info :rank="3"></creator-info>
+        </div>
+
+        <div class="box">
+            <page-title title="数字盲盒"></page-title>
+            <div class="box-list">
+                <product-info></product-info>
+                <product-info></product-info>
+                <product-info></product-info>
+                <product-info></product-info>
+                <product-info></product-info>
+                <product-info></product-info>
+            </div>
+        </div>
     </div>
-
-    <div class="casting">
-      <page-title title="最受欢迎铸造者"></page-title>
-
-      <creator-info :rank="1"></creator-info>
-      <creator-info :rank="2"></creator-info>
-      <creator-info :rank="3"></creator-info>
-    </div>
-
-    <div class="box">
-      <page-title title="数字盲盒"></page-title>
-      <div class="box-list">
-        <product-info></product-info>
-        <product-info></product-info>
-        <product-info></product-info>
-        <product-info></product-info>
-        <product-info></product-info>
-        <product-info></product-info>
-      </div>
-    </div>
-  </div>
 </template>
 
 <script>
 // @ is an alias to /src
 
-import { Swiper, SwiperSlide } from "swiper/vue";
+import { Swiper, SwiperSlide } from 'swiper/vue';
 
 // Import Swiper styles
 
-import "swiper/swiper.min.css";
-import "swiper/swiper-bundle.min.css";
+import 'swiper/swiper.min.css';
+import 'swiper/swiper-bundle.min.css';
 
-import SwiperCore, { EffectCoverflow } from "swiper";
-import ProductInfo from "../components/product/productInfo.vue";
-import ProductSmall from "../components/product/productSmall.vue";
-import CreatorInfo from "../components/creator/CreatorInfo.vue";
+import SwiperCore, { EffectCoverflow } from 'swiper';
+import ProductInfo from '../components/product/productInfo.vue';
+import ProductSmall from '../components/product/productSmall.vue';
+import CreatorInfo from '../components/creator/CreatorInfo.vue';
 
 // install Swiper modules
 SwiperCore.use([EffectCoverflow]);
 
 export default {
-  name: "Home",
-  inject: ["changeCheck"],
-  components: {
-    Swiper,
-    SwiperSlide,
-    ProductInfo,
-    ProductSmall,
-    CreatorInfo,
-  },
+    name: 'Home',
+    inject: ['changeCheck'],
+    components: {
+        Swiper,
+        SwiperSlide,
+        ProductInfo,
+        ProductSmall,
+        CreatorInfo
+    }
 };
 </script>
 
 <style lang="less" scoped>
 .swiper {
-  width: 100%;
-  padding-top: 50px;
-  padding-bottom: 50px;
+    width: 100%;
+    padding-top: 50px;
+    padding-bottom: 50px;
 }
 
 .swiper-slide {
-  background-position: center;
-  background-size: cover;
-  width: calc(100vw - 66px);
-  height: calc(45vw - 29px);
-
-  img {
+    background-position: center;
+    background-size: cover;
     width: calc(100vw - 66px);
     height: calc(45vw - 29px);
-    display: block;
-  }
+
+    img {
+        width: calc(100vw - 66px);
+        height: calc(45vw - 29px);
+        display: block;
+    }
 }
 
 .swiper-slide img {
-  display: block;
-  width: 100%;
+    display: block;
+    width: 100%;
 }
 .home {
-  padding: 10px 0 100px;
+    padding: 10px 0 100px;
 }
 
 .hot {
-  display: flex;
-  padding: 0 8px;
-
-  .hot-right {
     display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-  }
+    padding: 0 8px;
+
+    .hot-right {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
 }
 
 .box-list {
-  padding: 0 8px;
-  display: flex;
-  flex-wrap: wrap;
+    padding: 0 8px;
+    display: flex;
+    flex-wrap: wrap;
 
-  .product {
-    margin-bottom: 16px;
-  }
+    .product {
+        margin-bottom: 16px;
+    }
 }
 </style>

src/main/nine-space/src/views/Index.vue

@@ -1,83 +1,71 @@
 <template>
-  <div class="index">
-    <router-view class="container" />
-    <van-tabbar
-      v-model="active"
-      z-index="20"
-      safe-area-inset-bottom
-      route
-      placeholder
-      ref="tabbar"
-    >
-      <van-tabbar-item
-        v-for="item in menus"
-        :name="item.name"
-        :to="`/${item.name}`"
-        :key="item.name"
-      >
-        <span>{{ item.title }}</span>
-        <template #icon="props">
-          <img :src="props.active ? item.preIcon : item.icon" />
-        </template>
-      </van-tabbar-item>
-    </van-tabbar>
-  </div>
+    <div class="index">
+        <router-view class="container" />
+        <van-tabbar v-model="active" z-index="20" safe-area-inset-bottom route placeholder ref="tabbar">
+            <van-tabbar-item v-for="item in menus" :name="item.name" :to="`/${item.name}`" :key="item.name">
+                <span>{{ item.title }}</span>
+                <template #icon="props">
+                    <img :src="props.active ? item.preIcon : item.icon" />
+                </template>
+            </van-tabbar-item>
+        </van-tabbar>
+    </div>
 </template>
 
 <script>
-import { ref } from "vue";
+import { ref } from 'vue';
 export default {
-  setup() {
-    const menus = [
-      {
-        name: "home",
-        title: "首页",
-        icon: require("../assets/svgs/tabbar_icon_01.svg"),
-        preIcon: require("../assets/svgs/tabbar_icon_01_pre.svg"),
-      },
-      {
-        name: "discover",
-        title: "发现",
-        icon: require("../assets/svgs/tabbar_icon_02.svg"),
-        preIcon: require("../assets/svgs/tabbar_icon_02_pre.svg"),
-      },
-      {
-        name: "store",
-        title: "柜子",
-        icon: require("../assets/svgs/tabbar_icon_03.svg"),
-        preIcon: require("../assets/svgs/tabbar_icon_03_pre.svg"),
-      },
-      {
-        name: "mine",
-        title: "我的",
-        icon: require("../assets/svgs/tabbar_icon_04.svg"),
-        preIcon: require("../assets/svgs/tabbar_icon_04_pre.svg"),
-      },
-    ];
-    const active = ref("home");
-    return { active, menus };
-  },
-  data() {
-    return {
-      menu: null,
-    };
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.menu = this.$refs.tabbar.$el.childNodes[0];
-      document.body.appendChild(this.menu);
-    });
-  },
-  beforeUnmount() {
-    if (this.menu) {
-      document.body.removeChild(this.menu);
+    setup() {
+        const menus = [
+            {
+                name: 'home',
+                title: '首页',
+                icon: require('../assets/svgs/tabbar_icon_01.svg'),
+                preIcon: require('../assets/svgs/tabbar_icon_01_pre.svg')
+            },
+            {
+                name: 'discover',
+                title: '发现',
+                icon: require('../assets/svgs/tabbar_icon_02.svg'),
+                preIcon: require('../assets/svgs/tabbar_icon_02_pre.svg')
+            },
+            {
+                name: 'store',
+                title: '柜子',
+                icon: require('../assets/svgs/tabbar_icon_03.svg'),
+                preIcon: require('../assets/svgs/tabbar_icon_03_pre.svg')
+            },
+            {
+                name: 'mine',
+                title: '我的',
+                icon: require('../assets/svgs/tabbar_icon_04.svg'),
+                preIcon: require('../assets/svgs/tabbar_icon_04_pre.svg')
+            }
+        ];
+        const active = ref('home');
+        return { active, menus };
+    },
+    data() {
+        return {
+            menu: null
+        };
+    },
+    mounted() {
+        this.$nextTick(() => {
+            this.menu = this.$refs.tabbar.$el.childNodes[0];
+            document.body.appendChild(this.menu);
+        });
+    },
+    beforeUnmount() {
+        if (this.menu) {
+            document.body.removeChild(this.menu);
+        }
     }
-  },
 };
 </script>
 
 <style lang="less" scoped>
 .container {
-  box-sizing: border-box;
+    box-sizing: border-box;
 }
 </style>

src/main/nine-space/src/views/Mine.vue

@@ -1,384 +1,341 @@
 <template>
-  <div class="mine">
-    <div class="userInfo" v-if="isLogin">
-      <van-image
-        width="100%"
-        height="35vw"
-        :src="userInfo.bg"
-        fit="cover"
-        class="top-img"
-      />
-      <div class="userInfo-content">
-        <div class="userInfo-top">
-          <van-image
-            round
-            width="78"
-            height="78"
-            :src="
-              userInfo.avatar || require('../assets/svgs/img_default_photo.svg')
-            "
-            fit="cover"
-            @click="$router.push('/setting')"
-          />
-          <div class="text">
-            <div class="text1 van-ellipsis">{{ userInfo.nickname }}</div>
-            <div class="text2">
-              <span>{{ userInfo.id }}</span>
-              <img @click="copy" src="../assets/svgs/copy_icon.svg" alt="" />
-            </div>
-          </div>
-        </div>
+    <div class="mine">
+        <div class="userInfo" v-if="isLogin">
+            <van-image width="100%" height="35vw" :src="userInfo.bg" fit="cover" class="top-img" />
+            <div class="userInfo-content">
+                <div class="userInfo-top">
+                    <van-image
+                        round
+                        width="78"
+                        height="78"
+                        :src="userInfo.avatar || require('../assets/svgs/img_default_photo.svg')"
+                        fit="cover"
+                        @click="$router.push('/setting')"
+                    />
+                    <div class="text">
+                        <div class="text1 van-ellipsis">{{ userInfo.nickname }}</div>
+                        <div class="text2">
+                            <span>{{ userInfo.id }}</span>
+                            <img @click="copy" src="../assets/svgs/copy_icon.svg" alt="" />
+                        </div>
+                    </div>
+                </div>
 
-        <div class="sub">
-          {{ userInfo.intro }}
-        </div>
+                <div class="sub">
+                    {{ userInfo.intro }}
+                </div>
 
-        <div class="btns">
-          <div class="collect">
-            <div class="text1">2111</div>
-            <div class="text2">关注</div>
-          </div>
-          <div class="collect">
-            <div class="text1">2111</div>
-            <div class="text2">粉丝</div>
-          </div>
-          <div class="flex1"></div>
-          <van-button
-            plain
-            color="#fff"
-            size="mini"
-            :icon="require('../assets/svgs/person.svg')"
-            round
-            @click="Re"
-          >
-            未认证
-          </van-button>
-          <van-button
-            plain
-            @click="$router.push('/setting')"
-            color="#fff"
-            size="mini"
-            round
-            >编辑资料</van-button
-          >
+                <div class="btns">
+                    <div class="collect">
+                        <div class="text1">2111</div>
+                        <div class="text2">关注</div>
+                    </div>
+                    <div class="collect">
+                        <div class="text1">2111</div>
+                        <div class="text2">粉丝</div>
+                    </div>
+                    <div class="flex1"></div>
+                    <van-button
+                        plain
+                        color="#fff"
+                        size="mini"
+                        :icon="require('../assets/svgs/person.svg')"
+                        round
+                        @click="$router.push('/verified')"
+                    >
+                        未认证
+                    </van-button>
+                    <van-button plain @click="$router.push('/setting')" color="#fff" size="mini" round
+                        >编辑资料</van-button
+                    >
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-    <div class="top" v-else>
-      <van-image
-        round
-        width="78"
-        height="78"
-        :src="require('../assets/svgs/img_default_photo.svg')"
-        fit="cover"
-        @click="$router.push('/login')"
-      />
+        <div class="top" v-else>
+            <van-image
+                round
+                width="78"
+                height="78"
+                :src="require('../assets/svgs/img_default_photo.svg')"
+                fit="cover"
+                @click="$router.push('/login')"
+            />
 
-      <div class="text">
-        <div class="text1" @click="$router.push('/login')">点击登录</div>
-        <div class="text2">立即登录获取精彩服务</div>
-      </div>
-    </div>
-    <van-cell
-      class="title"
-      title="商品订单"
-      :border="false"
-      is-link
-      value="查看全部"
-    />
-    <van-grid :border="false" :gutter="10">
-      <van-grid-item text="全部订单" :border="false">
-        <template v-slot:icon>
-          <img class="grid-img" src="../assets/svgs/info_icon_dingdan.svg" />
-        </template>
-      </van-grid-item>
-      <van-grid-item text="待支付" :border="false">
-        <template v-slot:icon>
-          <img class="grid-img" src="../assets/svgs/info_icon_daizhifu.svg" />
-        </template>
-      </van-grid-item>
-      <van-grid-item text="交易中" :border="false">
-        <template v-slot:icon>
-          <img
-            class="grid-img"
-            src="../assets/svgs/info_icon_dingdan_daishouhuo.svg"
-          />
-        </template>
-      </van-grid-item>
-      <van-grid-item text="已完成" :border="false">
-        <template v-slot:icon>
-          <img class="grid-img" src="../assets/svgs/info_icon_yiwancheng.svg" />
-        </template>
-      </van-grid-item>
-    </van-grid>
+            <div class="text">
+                <div class="text1" @click="$router.push('/login')">点击登录</div>
+                <div class="text2">立即登录获取精彩服务</div>
+            </div>
+        </div>
+        <van-cell class="title" title="商品订单" :border="false" is-link value="查看全部" />
+        <van-grid :border="false" :gutter="10">
+            <van-grid-item text="全部订单" :border="false">
+                <template v-slot:icon>
+                    <img class="grid-img" src="../assets/svgs/info_icon_dingdan.svg" />
+                </template>
+            </van-grid-item>
+            <van-grid-item text="待支付" :border="false">
+                <template v-slot:icon>
+                    <img class="grid-img" src="../assets/svgs/info_icon_daizhifu.svg" />
+                </template>
+            </van-grid-item>
+            <van-grid-item text="交易中" :border="false">
+                <template v-slot:icon>
+                    <img class="grid-img" src="../assets/svgs/info_icon_dingdan_daishouhuo.svg" />
+                </template>
+            </van-grid-item>
+            <van-grid-item text="已完成" :border="false">
+                <template v-slot:icon>
+                    <img class="grid-img" src="../assets/svgs/info_icon_yiwancheng.svg" />
+                </template>
+            </van-grid-item>
+        </van-grid>
 
-    <van-cell class="title" title="我的服务" :border="false" />
+        <van-cell class="title" title="我的服务" :border="false" />
 
-    <van-cell-group :border="false" class="menu">
-      <van-cell title="钱包" is-link>
-        <template #icon>
-          <van-icon
-            :name="require('../assets/svgs/icon-qiabao.svg')"
-            class="search-icon"
-          />
-        </template>
-      </van-cell>
+        <van-cell-group :border="false" class="menu">
+            <van-cell title="钱包" is-link>
+                <template #icon>
+                    <van-icon :name="require('../assets/svgs/icon-qiabao.svg')" class="search-icon" />
+                </template>
+            </van-cell>
 
-      <van-cell title="积分" is-link>
-        <template #icon>
-          <van-icon
-            :name="require('../assets/svgs/icon-jifen.svg')"
-            class="search-icon"
-          />
-        </template>
-      </van-cell>
-      <van-cell title="我赞过的" is-link>
-        <template #icon>
-          <van-icon
-            :name="require('../assets/svgs/icon-dianzan.svg')"
-            class="search-icon"
-          />
-        </template>
-      </van-cell>
-      <van-cell title="地址管理" is-link>
-        <template #icon>
-          <van-icon
-            :name="require('../assets/svgs/icon_dizhi.svg')"
-            class="search-icon"
-          />
-        </template>
-      </van-cell>
-      <van-cell title="了解更多" is-link>
-        <template #icon>
-          <van-icon
-            :name="require('../assets/svgs/icon_liaojiegengduo.svg')"
-            class="search-icon"
-          />
-        </template>
-      </van-cell>
-      <van-cell title="关于我们" is-link>
-        <template #icon>
-          <van-icon
-            :name="require('../assets/svgs/icon-guanyuwomen.svg')"
-            class="search-icon"
-          />
-        </template>
-      </van-cell>
-      <van-cell title="账号与安全" is-link>
-        <template #icon>
-          <van-icon
-            :name="require('../assets/svgs/icon-anquan.svg')"
-            class="search-icon"
-          />
-        </template>
-      </van-cell>
-    </van-cell-group>
-  </div>
+            <van-cell title="积分" is-link>
+                <template #icon>
+                    <van-icon :name="require('../assets/svgs/icon-jifen.svg')" class="search-icon" />
+                </template>
+            </van-cell>
+            <van-cell title="我赞过的" is-link>
+                <template #icon>
+                    <van-icon :name="require('../assets/svgs/icon-dianzan.svg')" class="search-icon" />
+                </template>
+            </van-cell>
+            <van-cell title="地址管理" is-link>
+                <template #icon>
+                    <van-icon :name="require('../assets/svgs/icon_dizhi.svg')" class="search-icon" />
+                </template>
+            </van-cell>
+            <van-cell title="了解更多" is-link>
+                <template #icon>
+                    <van-icon :name="require('../assets/svgs/icon_liaojiegengduo.svg')" class="search-icon" />
+                </template>
+            </van-cell>
+            <van-cell title="关于我们" is-link>
+                <template #icon>
+                    <van-icon :name="require('../assets/svgs/icon-guanyuwomen.svg')" class="search-icon" />
+                </template>
+            </van-cell>
+            <van-cell title="账号与安全" is-link>
+                <template #icon>
+                    <van-icon :name="require('../assets/svgs/icon-anquan.svg')" class="search-icon" />
+                </template>
+            </van-cell>
+        </van-cell-group>
+    </div>
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapState } from 'vuex';
 export default {
-  computed: {
-    ...mapState(["userInfo"]),
-  },
-  methods: {
-    copy() {
-      this.$copyText(this.userInfo.id).then(
-        (e) => {
-          this.$toast.success("复制成功");
-          console.log(e);
-        },
-        (e) => {
-          this.$toast("复制失败");
-          console.log(e);
-        }
-      );
+    computed: {
+        ...mapState(['userInfo'])
     },
-  },
+    methods: {
+        copy() {
+            this.$copyText(this.userInfo.id).then(
+                e => {
+                    this.$toast.success('复制成功');
+                    console.log(e);
+                },
+                e => {
+                    this.$toast('复制失败');
+                    console.log(e);
+                }
+            );
+        }
+    }
 };
 </script>
 
 <style lang="less" scoped>
 .mine {
-  padding-bottom: 98px;
-  background-color: @bg2;
+    padding-bottom: 98px;
+    background-color: @bg2;
 }
 .top {
-  display: flex;
-  align-items: center;
-  padding: 26px 16px 30px;
-  border-bottom: 5px solid @bg3;
+    display: flex;
+    align-items: center;
+    padding: 26px 16px 30px;
+    border-bottom: 5px solid @bg3;
 
-  .text {
-    margin-left: 12px;
+    .text {
+        margin-left: 12px;
 
-    .text1 {
-      font-size: 24px;
-      font-weight: bold;
-      color: #ffffff;
-      line-height: 34px;
-    }
+        .text1 {
+            font-size: 24px;
+            font-weight: bold;
+            color: #ffffff;
+            line-height: 34px;
+        }
 
-    .text2 {
-      font-size: 16px;
-      color: #949699;
-      line-height: 24px;
-      margin-top: 6px;
+        .text2 {
+            font-size: 16px;
+            color: #949699;
+            line-height: 24px;
+            margin-top: 6px;
+        }
     }
-  }
 }
 
 /deep/ .title {
-  padding: 20px 16px 10px;
-  .van-cell__title {
-    span {
-      font-size: 20px;
-      font-weight: bold;
-      line-height: 28px;
+    padding: 20px 16px 10px;
+    .van-cell__title {
+        span {
+            font-size: 20px;
+            font-weight: bold;
+            line-height: 28px;
+        }
     }
-  }
 
-  .van-cell__value {
-    span {
-      font-size: 13px;
-      line-height: 28px;
+    .van-cell__value {
+        span {
+            font-size: 13px;
+            line-height: 28px;
+        }
     }
-  }
 
-  .van-icon {
-    line-height: 28px;
-  }
+    .van-icon {
+        line-height: 28px;
+    }
 }
 
 .grid-img {
-  display: block;
+    display: block;
 }
 
 /deep/ .van-grid-item {
-  .van-grid-item__text {
-    font-size: 13px;
-    color: #ffffff;
-    line-height: 18px;
-    margin-top: 4px;
-  }
+    .van-grid-item__text {
+        font-size: 13px;
+        color: #ffffff;
+        line-height: 18px;
+        margin-top: 4px;
+    }
 }
 
 /deep/.menu {
-  .van-cell {
-    padding: 22px 20px 24px;
+    .van-cell {
+        padding: 22px 20px 24px;
 
-    &::after {
-      left: 52px;
-      right: 16px;
+        &::after {
+            left: 52px;
+            right: 16px;
+        }
     }
-  }
 
-  .van-cell__title {
-    span {
-      font-weight: bold;
+    .van-cell__title {
+        span {
+            font-weight: bold;
+        }
     }
-  }
 }
 
 .search-icon {
-  width: 24px;
-  height: 24px;
-  margin-right: 10px;
-  /deep/.van-icon__image {
     width: 24px;
     height: 24px;
-    display: block;
-  }
+    margin-right: 10px;
+    /deep/.van-icon__image {
+        width: 24px;
+        height: 24px;
+        display: block;
+    }
 }
 .userInfo {
-  padding-top: 35vw;
-  border-bottom: 5px solid @bg3;
-  position: relative;
+    padding-top: 35vw;
+    border-bottom: 5px solid @bg3;
+    position: relative;
 
-  .top-img {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 1;
-  }
+    .top-img {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 1;
+    }
 }
 .userInfo-content {
-  padding: 0 16px;
-  z-index: 2;
-  position: relative;
-  transform: translateY(-8px);
-  .sub {
-    font-size: 14px;
-    color: #939599;
-    line-height: 22px;
-    padding: 16px 0;
-  }
-
-  .btns {
-    display: flex;
-    // padding-bottom: 16px;
-    align-items: center;
-    .collect {
-      width: 20%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      .text1 {
-        font-size: 16px;
-        color: #ffffff;
-        line-height: 24px;
-      }
-      .text2 {
+    padding: 0 16px;
+    z-index: 2;
+    position: relative;
+    transform: translateY(-8px);
+    .sub {
         font-size: 14px;
         color: #939599;
-        line-height: 24px;
-      }
+        line-height: 22px;
+        padding: 16px 0;
     }
 
-    /deep/.van-button {
-      width: 90px;
-      .van-icon__image {
-        display: block;
-        width: 18px;
-        height: 18px;
-      }
-    }
-    .van-button + .van-button {
-      margin-left: 10px;
+    .btns {
+        display: flex;
+        // padding-bottom: 16px;
+        align-items: center;
+        .collect {
+            width: 20%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            .text1 {
+                font-size: 16px;
+                color: #ffffff;
+                line-height: 24px;
+            }
+            .text2 {
+                font-size: 14px;
+                color: #939599;
+                line-height: 24px;
+            }
+        }
+
+        /deep/.van-button {
+            width: 90px;
+            .van-icon__image {
+                display: block;
+                width: 18px;
+                height: 18px;
+            }
+        }
+        .van-button + .van-button {
+            margin-left: 10px;
+        }
     }
-  }
 }
 .userInfo-top {
-  display: flex;
-  align-items: center;
-  .van-image {
-    border: 5px solid #fff;
-    flex-shrink: 0;
-  }
-
-  .text {
-    margin: 0 40px 0 12px;
-    overflow: hidden;
-    .text1 {
-      font-size: 24px;
-      font-weight: bold;
-      color: #ffffff;
-      line-height: 34px;
+    display: flex;
+    align-items: center;
+    .van-image {
+        border: 5px solid #fff;
+        flex-shrink: 0;
     }
-    .text2 {
-      font-size: 16px;
-      color: #949699;
-      line-height: 24px;
-      display: flex;
-      align-items: center;
-      margin-top: 6px;
-      img {
-        display: block;
-        margin-left: 6px;
-      }
+
+    .text {
+        margin: 0 40px 0 12px;
+        overflow: hidden;
+        .text1 {
+            font-size: 24px;
+            font-weight: bold;
+            color: #ffffff;
+            line-height: 34px;
+        }
+        .text2 {
+            font-size: 16px;
+            color: #949699;
+            line-height: 24px;
+            display: flex;
+            align-items: center;
+            margin-top: 6px;
+            img {
+                display: block;
+                margin-left: 6px;
+            }
+        }
     }
-  }
 }
 </style>

src/main/nine-space/src/views/Store.vue

@@ -1,217 +1,209 @@
 <template>
-  <div class="discover">
-    <van-sticky ref="top" @change="change">
-      <div class="top">
-        <div class="top-btn">
-          <div
-            class="btn"
-            :class="{ active: active === 'explore' }"
-            @click="changeActive('explore')"
-          >
-            我拥有的
-          </div>
-          <div
-            class="btn"
-            :class="{ active: active === 'creator' }"
-            @click="changeActive('creator')"
-          >
-            我卖出的
-          </div>
+    <div class="discover">
+        <van-sticky ref="top" @change="change">
+            <div class="top">
+                <div class="top-btn">
+                    <div class="btn" :class="{ active: active === 'explore' }" @click="changeActive('explore')">
+                        我拥有的
+                    </div>
+                    <div class="btn" :class="{ active: active === 'creator' }" @click="changeActive('creator')">
+                        我卖出的
+                    </div>
+                </div>
+                <div class="search">
+                    <img src="../assets/svgs/search.svg" alt="" />
+                </div>
+            </div>
+
+            <van-tabs v-model:active="type" line-width="16" line-height="2">
+                <van-tab title="全部"></van-tab>
+                <van-tab title="售卖"></van-tab>
+                <van-tab title="仅展示"></van-tab>
+                <van-tab title="综合排序"></van-tab>
+            </van-tabs>
+        </van-sticky>
+
+        <div class="box-list">
+            <product-info></product-info>
+            <product-info></product-info>
+            <product-info></product-info>
+            <product-info></product-info>
+            <product-info></product-info>
+            <product-info></product-info>
         </div>
-        <div class="search">
-          <img src="../assets/svgs/search.svg" alt="" />
-        </div>
-      </div>
-
-      <van-tabs v-model:active="type" line-width="16" line-height="2">
-        <van-tab title="全部"></van-tab>
-        <van-tab title="售卖"></van-tab>
-        <van-tab title="仅展示"></van-tab>
-        <van-tab title="综合排序"></van-tab>
-      </van-tabs>
-    </van-sticky>
-
-    <div class="box-list">
-      <product-info></product-info>
-      <product-info></product-info>
-      <product-info></product-info>
-      <product-info></product-info>
-      <product-info></product-info>
-      <product-info></product-info>
     </div>
-  </div>
 </template>
 
 <script>
-import ProductInfo from "../components/product/productInfo.vue";
+import ProductInfo from '../components/product/productInfo.vue';
 
 export default {
-  name: "discover",
-  inject: ["bs"],
-  components: {
-    ProductInfo,
-  },
-  data() {
-    return {
-      active: "explore",
-      stiky: null,
-      type: 0,
-    };
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.stiky = this.$refs.top.$el.childNodes[0];
-    });
-  },
-  beforeUnmount() {
-    if (this.stiky.parentNode.nodeName == "BODY") {
-      this.$nextTick(() => {
-        document.body.removeChild(this.stiky);
-      });
-    }
-  },
-  methods: {
-    change(isFixed) {
-      if (isFixed) {
+    name: 'discover',
+    inject: ['bs'],
+    components: {
+        ProductInfo
+    },
+    data() {
+        return {
+            active: 'explore',
+            stiky: null,
+            type: 0
+        };
+    },
+    mounted() {
         this.$nextTick(() => {
-          document.body.appendChild(this.stiky);
+            this.stiky = this.$refs.top.$el.childNodes[0];
         });
-      } else {
-        this.$refs.top.$el.appendChild(this.stiky);
-      }
     },
-    changeActive(active) {
-      this.active = active;
-      this.$nextTick(() => {
-        this.bs.value.scrollTo(0, 0);
-        this.bs.value.refresh();
-      });
+    beforeUnmount() {
+        if (this.stiky.parentNode.nodeName == 'BODY') {
+            this.$nextTick(() => {
+                document.body.removeChild(this.stiky);
+            });
+        }
     },
-  },
+    methods: {
+        change(isFixed) {
+            if (isFixed) {
+                this.$nextTick(() => {
+                    document.body.appendChild(this.stiky);
+                });
+            } else {
+                this.$refs.top.$el.appendChild(this.stiky);
+            }
+        },
+        changeActive(active) {
+            this.active = active;
+            this.$nextTick(() => {
+                this.bs.value.scrollTo(0, 0);
+                this.bs.value.refresh();
+            });
+        }
+    }
 };
 </script>
 
 <style lang="less" scoped>
 .top {
-  display: flex;
-  padding: 10px 16px;
-  background-color: @bg;
-  .top-btn {
-    flex-grow: 1;
-    .btn {
-      font-size: 16px;
-      font-family: ZhenyanGB;
-      font-weight: 400;
-      line-height: 26px;
-      display: inline-block;
-      vertical-align: text-bottom;
-
-      &.active {
-        color: @prim;
-        font-size: 20px;
-        font-weight: bold;
-        line-height: 30px;
-      }
-    }
-
-    .btn + .btn {
-      margin-left: 30px;
+    display: flex;
+    padding: 10px 16px;
+    background-color: @bg;
+    .top-btn {
+        flex-grow: 1;
+        .btn {
+            font-size: 16px;
+            font-family: ZhenyanGB;
+            font-weight: 400;
+            line-height: 26px;
+            display: inline-block;
+            vertical-align: text-bottom;
+
+            &.active {
+                color: @prim;
+                font-size: 20px;
+                font-weight: bold;
+                line-height: 30px;
+            }
+        }
+
+        .btn + .btn {
+            margin-left: 30px;
+        }
     }
-  }
 }
 
 .discover {
-  background-color: @bg3;
+    background-color: @bg3;
 }
 
 /deep/ .mySwiper {
-  width: calc(100vw - 32px);
-  height: calc(41vw - 13px);
-
-  .swiper-pagination {
-    bottom: 12px;
-  }
-
-  .swiper-pagination-bullet {
-    width: 6px;
-    height: 2px;
-    border-radius: 1px;
-    background: #d7d7d7;
-  }
-
-  .swiper-pagination-bullet-active {
-    background: @prim;
-  }
+    width: calc(100vw - 32px);
+    height: calc(41vw - 13px);
+
+    .swiper-pagination {
+        bottom: 12px;
+    }
+
+    .swiper-pagination-bullet {
+        width: 6px;
+        height: 2px;
+        border-radius: 1px;
+        background: #d7d7d7;
+    }
+
+    .swiper-pagination-bullet-active {
+        background: @prim;
+    }
 }
 
 .swiper-slide {
-  text-align: center;
-  font-size: 18px;
-
-  /* Center slide text vertically */
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  -webkit-align-items: center;
-  align-items: center;
+    text-align: center;
+    font-size: 18px;
+
+    /* Center slide text vertically */
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    -webkit-align-items: center;
+    align-items: center;
 }
 
 .swiper-slide img {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: 4px;
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 4px;
 }
 .grid-img {
-  display: block;
+    display: block;
 }
 .van-grid {
-  margin-top: 12px;
+    margin-top: 12px;
 }
 /deep/ .van-grid-item__content {
-  padding: 14px 20px 16px;
+    padding: 14px 20px 16px;
 }
 /deep/ .van-grid-item__text {
-  color: #fff;
-  font-size: 13px;
-  line-height: 18px;
-  margin-top: 4px;
+    color: #fff;
+    font-size: 13px;
+    line-height: 18px;
+    margin-top: 4px;
 }
 
 .title {
-  padding: 16px 20px 8px;
-  color: @prim;
-  font-size: 18px;
-  font-weight: bold;
+    padding: 16px 20px 8px;
+    color: @prim;
+    font-size: 18px;
+    font-weight: bold;
 }
 
 .box-list {
-  // display: flex;
-  // flex-wrap: wrap;
-  padding: 0 8px;
+    // display: flex;
+    // flex-wrap: wrap;
+    padding: 0 8px;
 }
 
 .discover {
-  padding-bottom: 50px;
+    padding-bottom: 50px;
 }
 
 /deep/.van-tab {
-  color: #fff;
+    color: #fff;
 
-  &.van-tab--active {
-    color: @prim;
-  }
+    &.van-tab--active {
+        color: @prim;
+    }
 }
 
 /deep/ .van-tabs__line {
-  bottom: 20px;
+    bottom: 20px;
 }
 </style>

src/main/nine-space/src/views/user/ChangeText.vue

@@ -1,66 +1,64 @@
 <template>
-  <div class="change">
-    <div class="title">{{ type === "nickname" ? "昵称" : "简介" }}</div>
-    <van-field
-      v-model="message"
-      :rows="type === 'nickname' ? 1 : 4"
-      type="textarea"
-      :maxlength="type === 'nickname' ? 10 : 50"
-      :placeholder="
-        type === 'nickname' ? '请输入昵称' : '请添加介绍，让大家了解你'
-      "
-      :show-word-limit="type !== 'nickname'"
-      clearable
-    />
-    <div class="btn">
-      <van-button
-        type="primary"
-        block
-        round
-        :disabled="!message"
-        color="linear-gradient(to right, #FDFB60, #FF8F3E)"
-        @click="save"
-        >保存</van-button
-      >
+    <div class="change">
+        <div class="title">{{ type === 'nickname' ? '昵称' : '简介' }}</div>
+        <van-field
+            v-model="message"
+            :rows="type === 'nickname' ? 1 : 4"
+            type="textarea"
+            :maxlength="type === 'nickname' ? 10 : 50"
+            :placeholder="type === 'nickname' ? '请输入昵称' : '请添加介绍，让大家了解你'"
+            :show-word-limit="type !== 'nickname'"
+            clearable
+        />
+        <div class="btn">
+            <van-button
+                type="primary"
+                block
+                round
+                :disabled="!message"
+                color="linear-gradient(to right, #FDFB60, #FF8F3E)"
+                @click="save"
+                >保存</van-button
+            >
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapState } from 'vuex';
 export default {
-  computed: {
-    ...mapState(["userInfo"]),
-  },
-  data() {
-    return {
-      type: "nickname",
-      message: "",
-    };
-  },
-  mounted() {
-    this.type = this.$route.query.type;
-    this.message = this.userInfo[this.type];
-  },
-  methods: {
-    save() {
-      if (this.message) {
-        this.updateUser({ [this.type]: this.message }).then(() => {
-          setTimeout(() => {
-            this.$router.back();
-          }, 1500);
-        });
-      }
+    computed: {
+        ...mapState(['userInfo'])
     },
-  },
+    data() {
+        return {
+            type: 'nickname',
+            message: ''
+        };
+    },
+    mounted() {
+        this.type = this.$route.query.type;
+        this.message = this.userInfo[this.type];
+    },
+    methods: {
+        save() {
+            if (this.message) {
+                this.updateUser({ [this.type]: this.message }).then(() => {
+                    setTimeout(() => {
+                        this.$router.back();
+                    }, 1500);
+                });
+            }
+        }
+    }
 };
 </script>
 
 <style lang="less" scoped>
 .title {
-  padding: 23px 16px;
+    padding: 23px 16px;
 }
 .btn {
-  padding: 100px 50px;
+    padding: 100px 50px;
 }
 </style>

src/main/nine-space/src/views/user/Forget.vue

@@ -1,184 +1,165 @@
 <template>
-  <div class="login">
-    <div class="tabs">
-      <div class="tab active">设置新密码</div>
+    <div class="login">
+        <div class="tabs">
+            <div class="tab active">设置新密码</div>
+        </div>
+
+        <van-form @submit="submit">
+            <van-field
+                type="tel"
+                name="用户名"
+                placeholder="请输入用户名"
+                v-model="form.phone"
+                :maxlength="11"
+                :rules="[{ required: true, message: '请填写用户名' }]"
+            >
+                <template #left-icon>
+                    <img :src="require('../../assets/svgs/login_icon_zhanghao.svg')" class="icon" />
+                </template>
+            </van-field>
+
+            <van-field
+                type="digit"
+                name="验证码"
+                placeholder="请输入验证码"
+                v-model="form.code"
+                :maxlength="4"
+                :rules="[{ required: true, message: '请输入验证码' }]"
+            >
+                <template #left-icon>
+                    <img :src="require('../../assets/svgs/login_icon_code.svg')" class="icon" />
+                </template>
+                <template #button>
+                    <van-button class="sub-code" size="small" plain type="primary">发送验证码</van-button>
+                </template>
+            </van-field>
+
+            <van-field
+                type="password"
+                name="密码"
+                placeholder="请输入密码"
+                v-model="form.password"
+                :rules="[{ required: true, message: '请填写密码' }]"
+            >
+                <template #left-icon>
+                    <img :src="require('../../assets/svgs/login_icon_mima.svg')" class="icon" />
+                </template>
+            </van-field>
+
+            <van-field
+                type="password"
+                name="密码"
+                placeholder="请再次输入密码"
+                v-model="form.password2"
+                :rules="[{ required: true, message: '请再次填写密码' }]"
+            >
+                <template #left-icon>
+                    <img :src="require('../../assets/svgs/login_icon_mima.svg')" class="icon" />
+                </template>
+            </van-field>
+
+            <div class="button">
+                <van-button
+                    round
+                    block
+                    native-type="submit"
+                    color="linear-gradient(to right, #FDFB60, #FF8F3E)"
+                    class="sure"
+                    >找回密码</van-button
+                >
+                <van-button class="del" round block plain @click="$router.replace('/login')"
+                    >想起密码，立即登陆</van-button
+                >
+            </div>
+        </van-form>
     </div>
-
-    <van-form @submit="submit">
-      <van-field
-        type="tel"
-        name="用户名"
-        placeholder="请输入用户名"
-        v-model="form.phone"
-        :maxlength="11"
-        :rules="[{ required: true, message: '请填写用户名' }]"
-      >
-        <template #left-icon>
-          <img
-            :src="require('../../assets/svgs/login_icon_zhanghao.svg')"
-            class="icon"
-          />
-        </template>
-      </van-field>
-
-      <van-field
-        type="digit"
-        name="验证码"
-        placeholder="请输入验证码"
-        v-model="form.code"
-        :maxlength="4"
-        :rules="[{ required: true, message: '请输入验证码' }]"
-      >
-        <template #left-icon>
-          <img
-            :src="require('../../assets/svgs/login_icon_code.svg')"
-            class="icon"
-          />
-        </template>
-        <template #button>
-          <van-button class="sub-code" size="small" plain type="primary"
-            >发送验证码</van-button
-          >
-        </template>
-      </van-field>
-
-      <van-field
-        type="password"
-        name="密码"
-        placeholder="请输入密码"
-        v-model="form.password"
-        :rules="[{ required: true, message: '请填写密码' }]"
-      >
-        <template #left-icon>
-          <img
-            :src="require('../../assets/svgs/login_icon_mima.svg')"
-            class="icon"
-          />
-        </template>
-      </van-field>
-
-      <van-field
-        type="password"
-        name="密码"
-        placeholder="请再次输入密码"
-        v-model="form.password2"
-        :rules="[{ required: true, message: '请再次填写密码' }]"
-      >
-        <template #left-icon>
-          <img
-            :src="require('../../assets/svgs/login_icon_mima.svg')"
-            class="icon"
-          />
-        </template>
-      </van-field>
-
-      <div class="button">
-        <van-button
-          round
-          block
-          native-type="submit"
-          color="linear-gradient(to right, #FDFB60, #FF8F3E)"
-          class="sure"
-          >找回密码</van-button
-        >
-        <van-button
-          class="del"
-          round
-          block
-          plain
-          @click="$router.replace('/login')"
-          >想起密码，立即登陆</van-button
-        >
-      </div>
-    </van-form>
-  </div>
 </template>
 
 <script>
 export default {
-  data() {
-    return {
-      active: "phone",
-      form: {
-        phone: "",
-        password: "",
-        password2: "",
-        code: "",
-      },
-    };
-  },
-  methods: {
-    submit() {
-      console.log("63772");
+    data() {
+        return {
+            active: 'phone',
+            form: {
+                phone: '',
+                password: '',
+                password2: '',
+                code: ''
+            }
+        };
     },
-  },
+    methods: {
+        submit() {
+            console.log('63772');
+        }
+    }
 };
 </script>
 
 <style lang="less" scoped>
 .login {
-  padding: 40px 50px 100px;
+    padding: 40px 50px 100px;
 }
 
 .tabs {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  .tab {
-    font-size: 18px;
-    color: #c8c9cc;
-    line-height: 25px;
-
-    &.active {
-      font-size: 24px;
-      font-weight: bold;
-      color: #ffffff;
-      line-height: 33px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .tab {
+        font-size: 18px;
+        color: #c8c9cc;
+        line-height: 25px;
+
+        &.active {
+            font-size: 24px;
+            font-weight: bold;
+            color: #ffffff;
+            line-height: 33px;
+        }
     }
-  }
 }
 
 .icon {
-  display: block;
-  margin-top: 12px;
+    display: block;
+    margin-top: 12px;
 }
 /deep/ .van-form {
-  margin-top: 28px;
-  .van-cell {
-    padding: 0px 0;
+    margin-top: 28px;
+    .van-cell {
+        padding: 0px 0;
 
-    .van-field__left-icon {
-      margin-right: 8px;
+        .van-field__left-icon {
+            margin-right: 8px;
+        }
     }
-  }
 
-  .van-cell + .van-cell {
-    margin-top: 20px;
-  }
-  .van-field__body {
-    height: 44px;
-    align-items: center;
-  }
+    .van-cell + .van-cell {
+        margin-top: 20px;
+    }
+    .van-field__body {
+        height: 44px;
+        align-items: center;
+    }
 }
 .button {
-  margin-top: 60px;
+    margin-top: 60px;
 
-  .del {
-    margin-top: 20px;
-    border-color: #ffffff;
-  }
+    .del {
+        margin-top: 20px;
+        border-color: #ffffff;
+    }
 
-  .sure {
-    color: @bg !important;
-  }
+    .sure {
+        color: @bg !important;
+    }
 
-  .van-button {
-    font-weight: bold;
-  }
+    .van-button {
+        font-weight: bold;
+    }
 }
 
 .sub-code {
-  padding-right: 0;
-  border-width: 0;
+    padding-right: 0;
+    border-width: 0;
 }
 </style>

src/main/nine-space/src/views/user/Login.vue

@@ -1,241 +1,213 @@
 <template>
-  <div class="login">
-    <div class="tabs">
-      <div
-        class="tab"
-        :class="{ active: active === 'phone' }"
-        @click="active = 'phone'"
-      >
-        账号密码登陆
-      </div>
-      <div
-        class="tab"
-        :class="{ active: active === 'code' }"
-        @click="active = 'code'"
-      >
-        验证码登陆
-      </div>
-    </div>
+    <div class="login">
+        <div class="tabs">
+            <div class="tab" :class="{ active: active === 'phone' }" @click="active = 'phone'">账号密码登陆</div>
+            <div class="tab" :class="{ active: active === 'code' }" @click="active = 'code'">验证码登陆</div>
+        </div>
 
-    <van-form @submit="submit" ref="form">
-      <van-field
-        type="tel"
-        name="用户名"
-        placeholder="请输入手机号码"
-        v-model="form.phone"
-        :rules="[
-          { required: true, message: '请输入手机号码' },
-          {
-            pattern: phonePattern,
-            message: '手机号码格式错误',
-          },
-        ]"
-      >
-        <template #left-icon>
-          <img
-            :src="require('../../assets/svgs/login_icon_zhanghao.svg')"
-            class="icon"
-          />
-        </template>
-      </van-field>
-      <van-field
-        type="password"
-        name="密码"
-        placeholder="请输入密码"
-        v-model="form.password"
-        :rules="[{ required: true, message: '请填写密码' }]"
-        v-if="active === 'phone'"
-      >
-        <template #left-icon>
-          <img
-            :src="require('../../assets/svgs/login_icon_mima.svg')"
-            class="icon"
-          />
-        </template>
-      </van-field>
+        <van-form @submit="submit" ref="form">
+            <van-field
+                type="tel"
+                name="用户名"
+                placeholder="请输入手机号码"
+                v-model="form.phone"
+                :rules="[
+                    { required: true, message: '请输入手机号码' },
+                    {
+                        pattern: phonePattern,
+                        message: '手机号码格式错误'
+                    }
+                ]"
+            >
+                <template #left-icon>
+                    <img :src="require('../../assets/svgs/login_icon_zhanghao.svg')" class="icon" />
+                </template>
+            </van-field>
+            <van-field
+                type="password"
+                name="密码"
+                placeholder="请输入密码"
+                v-model="form.password"
+                :rules="[{ required: true, message: '请填写密码' }]"
+                v-if="active === 'phone'"
+            >
+                <template #left-icon>
+                    <img :src="require('../../assets/svgs/login_icon_mima.svg')" class="icon" />
+                </template>
+            </van-field>
 
-      <van-field
-        type="code"
-        name="验证码"
-        placeholder="请输入验证码"
-        v-model="form.code"
-        v-else
-        :rules="[{ required: true, message: '请输入验证码' }]"
-      >
-        <template #left-icon>
-          <img
-            :src="require('../../assets/svgs/login_icon_code.svg')"
-            class="icon"
-          />
-        </template>
-        <template #button>
-          <van-button
-            class="sub-code"
-            size="small"
-            plain
-            type="primary"
-            @click="sendPhone"
-            :disabled="isSend"
-          >
-            {{ isSend ? `已发送(${sendNum})S` : "发送验证码" }}
-          </van-button>
-        </template>
-      </van-field>
-      <div class="button">
-        <van-button plain class="forget" @click="$router.replace('/forget')">
-          忘记密码？
-        </van-button>
+            <van-field
+                type="code"
+                name="验证码"
+                placeholder="请输入验证码"
+                v-model="form.code"
+                v-else
+                :rules="[{ required: true, message: '请输入验证码' }]"
+            >
+                <template #left-icon>
+                    <img :src="require('../../assets/svgs/login_icon_code.svg')" class="icon" />
+                </template>
+                <template #button>
+                    <van-button
+                        class="sub-code"
+                        size="small"
+                        plain
+                        type="primary"
+                        @click="sendPhone"
+                        :disabled="isSend"
+                    >
+                        {{ isSend ? `已发送(${sendNum})S` : '发送验证码' }}
+                    </van-button>
+                </template>
+            </van-field>
+            <div class="button">
+                <van-button plain class="forget" @click="$router.replace('/forget')"> 忘记密码？ </van-button>
 
-        <van-button
-          round
-          block
-          native-type="submit"
-          color="linear-gradient(to right, #FDFB60, #FF8F3E)"
-          class="sure"
-          >登录</van-button
-        >
-        <van-button
-          class="del"
-          round
-          block
-          plain
-          @click="$router.replace('/register')"
-          >暂无账号，立即注册</van-button
-        >
-      </div>
-    </van-form>
-  </div>
+                <van-button
+                    round
+                    block
+                    native-type="submit"
+                    color="linear-gradient(to right, #FDFB60, #FF8F3E)"
+                    class="sure"
+                    >登录</van-button
+                >
+                <van-button class="del" round block plain @click="$router.replace('/register')"
+                    >暂无账号，立即注册</van-button
+                >
+            </div>
+        </van-form>
+    </div>
 </template>
 
 <script>
-import phone from "../../mixins/phone";
+import phone from '../../mixins/phone';
 export default {
-  mixins: [phone],
-  data() {
-    return {
-      active: "phone",
-      form: {
-        phone: "",
-        password: "",
-        code: "",
-      },
-    };
-  },
-  methods: {
-    sendPhone() {
-      this.$refs.form.validate("手机号码").then(() => {
-        this.sendMsg(this.form.phone);
-      });
-    },
-    submit() {
-      this.$toast.loading({
-        message: "加载中...",
-        forbidClick: true,
-      });
-      this.check().then(() => {
-        this.$toast.success("登录成功");
-        setTimeout(() => {
-          this.$router.back();
-        }, 1500);
-      });
-    },
-    check() {
-      if (this.active === "phone") {
-        return this.loginByPhone(this.form.phone, this.form.password);
-      } else {
-        return this.$http
-          .post("/auth/phoneLogin", {
-            phone: this.form.phone,
-            code: this.form.code,
-          })
-          .catch((e) => {
-            if (e) {
-              this.$toast(e.error);
+    mixins: [phone],
+    data() {
+        return {
+            active: 'phone',
+            form: {
+                phone: '',
+                password: '',
+                code: ''
             }
-            return Promise.reject();
-          })
-          .then((res) => {
-            localStorage.setItem("nineToken", res);
-            return this.$store.dispatch("getUserInfo");
-          });
-      }
+        };
     },
-  },
+    methods: {
+        sendPhone() {
+            this.$refs.form.validate('手机号码').then(() => {
+                this.sendMsg(this.form.phone);
+            });
+        },
+        submit() {
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+            this.check().then(() => {
+                this.$toast.success('登录成功');
+                setTimeout(() => {
+                    this.$router.back();
+                }, 1500);
+            });
+        },
+        check() {
+            if (this.active === 'phone') {
+                return this.loginByPhone(this.form.phone, this.form.password);
+            } else {
+                return this.$http
+                    .post('/auth/phoneLogin', {
+                        phone: this.form.phone,
+                        code: this.form.code
+                    })
+                    .catch(e => {
+                        if (e) {
+                            this.$toast(e.error);
+                        }
+                        return Promise.reject();
+                    })
+                    .then(res => {
+                        localStorage.setItem('nineToken', res);
+                        return this.$store.dispatch('getUserInfo');
+                    });
+            }
+        }
+    }
 };
 </script>
 
 <style lang="less" scoped>
 .login {
-  padding: 40px 50px 100px;
+    padding: 40px 50px 100px;
 }
 
 .tabs {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  .tab {
-    font-size: 18px;
-    color: #c8c9cc;
-    line-height: 25px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .tab {
+        font-size: 18px;
+        color: #c8c9cc;
+        line-height: 25px;
 
-    &.active {
-      font-size: 24px;
-      font-weight: bold;
-      color: #ffffff;
-      line-height: 33px;
+        &.active {
+            font-size: 24px;
+            font-weight: bold;
+            color: #ffffff;
+            line-height: 33px;
+        }
     }
-  }
 }
 
 .icon {
-  display: block;
-  margin-top: 12px;
+    display: block;
+    margin-top: 12px;
 }
 /deep/ .van-form {
-  margin-top: 28px;
-  .van-cell {
-    padding: 0px 0;
+    margin-top: 28px;
+    .van-cell {
+        padding: 0px 0;
 
-    .van-field__left-icon {
-      margin-right: 8px;
+        .van-field__left-icon {
+            margin-right: 8px;
+        }
     }
-  }
 
-  .van-cell + .van-cell {
-    margin-top: 20px;
-  }
-  .van-field__body {
-    height: 44px;
-    align-items: center;
-  }
+    .van-cell + .van-cell {
+        margin-top: 20px;
+    }
+    .van-field__body {
+        height: 44px;
+        align-items: center;
+    }
 }
 .button {
-  margin-top: 60px;
-  position: relative;
+    margin-top: 60px;
+    position: relative;
 
-  .del {
-    margin-top: 20px;
-    border-color: #ffffff;
-  }
+    .del {
+        margin-top: 20px;
+        border-color: #ffffff;
+    }
 
-  .sure {
-    color: @bg !important;
-  }
+    .sure {
+        color: @bg !important;
+    }
 
-  .van-button {
-    font-weight: bold;
-  }
+    .van-button {
+        font-weight: bold;
+    }
 }
 
 .sub-code {
-  padding-right: 0;
-  border-width: 0;
+    padding-right: 0;
+    border-width: 0;
 }
 
 .forget {
-  position: absolute;
-  font-weight: normal !important;
-  right: 0;
-  top: -65px;
+    position: absolute;
+    font-weight: normal !important;
+    right: 0;
+    top: -65px;
 }
 </style>

src/main/nine-space/src/views/user/Register.vue

@@ -1,242 +1,222 @@
 <template>
-  <div class="login">
-    <div class="tabs">
-      <div class="tab active">用户注册</div>
+    <div class="login">
+        <div class="tabs">
+            <div class="tab active">用户注册</div>
+        </div>
+
+        <van-form @submit="submit" ref="form">
+            <van-field
+                type="tel"
+                name="手机号码"
+                placeholder="请输入手机号码"
+                v-model="form.phone"
+                :maxlength="11"
+                :rules="[
+                    { required: true, message: '请输入手机号码' },
+                    {
+                        pattern: phonePattern,
+                        message: '手机号码格式错误'
+                    }
+                ]"
+            >
+                <template #left-icon>
+                    <img :src="require('../../assets/svgs/login_icon_zhanghao.svg')" class="icon" />
+                </template>
+            </van-field>
+
+            <van-field
+                type="digit"
+                name="验证码"
+                placeholder="请输入验证码"
+                v-model="form.code"
+                :maxlength="4"
+                :rules="[{ required: true, message: '请输入验证码' }]"
+            >
+                <template #left-icon>
+                    <img :src="require('../../assets/svgs/login_icon_code.svg')" class="icon" />
+                </template>
+                <template #button>
+                    <van-button
+                        @click="sendPhone"
+                        class="sub-code"
+                        size="small"
+                        plain
+                        :disabled="isSend"
+                        type="primary"
+                    >
+                        {{ isSend ? `已发送(${sendNum})S` : '发送验证码' }}
+                    </van-button>
+                </template>
+            </van-field>
+
+            <van-field
+                type="password"
+                name="密码"
+                placeholder="请输入密码"
+                v-model="form.password"
+                :rules="[{ required: true, message: '请填写密码' }]"
+            >
+                <template #left-icon>
+                    <img :src="require('../../assets/svgs/login_icon_mima.svg')" class="icon" />
+                </template>
+            </van-field>
+
+            <van-field
+                type="password"
+                name="密码"
+                placeholder="请再次输入密码"
+                v-model="form.password2"
+                :rules="[
+                    { required: true, message: '请再次填写密码' },
+                    {
+                        validator: val => {
+                            if (val == form.password) {
+                                return true;
+                            } else {
+                                return false;
+                            }
+                        },
+                        message: '两次密码输入不一致'
+                    }
+                ]"
+            >
+                <template #left-icon>
+                    <img :src="require('../../assets/svgs/login_icon_mima.svg')" class="icon" />
+                </template>
+            </van-field>
+
+            <div class="button">
+                <van-button
+                    round
+                    block
+                    native-type="submit"
+                    color="linear-gradient(to right, #FDFB60, #FF8F3E)"
+                    class="sure"
+                    >登录</van-button
+                >
+                <van-button class="del" round block plain @click="$router.replace('/login')"
+                    >已有账号，立即登陆</van-button
+                >
+            </div>
+        </van-form>
     </div>
-
-    <van-form @submit="submit" ref="form">
-      <van-field
-        type="tel"
-        name="手机号码"
-        placeholder="请输入手机号码"
-        v-model="form.phone"
-        :maxlength="11"
-        :rules="[
-          { required: true, message: '请输入手机号码' },
-          {
-            pattern: phonePattern,
-            message: '手机号码格式错误',
-          },
-        ]"
-      >
-        <template #left-icon>
-          <img
-            :src="require('../../assets/svgs/login_icon_zhanghao.svg')"
-            class="icon"
-          />
-        </template>
-      </van-field>
-
-      <van-field
-        type="digit"
-        name="验证码"
-        placeholder="请输入验证码"
-        v-model="form.code"
-        :maxlength="4"
-        :rules="[{ required: true, message: '请输入验证码' }]"
-      >
-        <template #left-icon>
-          <img
-            :src="require('../../assets/svgs/login_icon_code.svg')"
-            class="icon"
-          />
-        </template>
-        <template #button>
-          <van-button
-            @click="sendPhone"
-            class="sub-code"
-            size="small"
-            plain
-            :disabled="isSend"
-            type="primary"
-          >
-            {{ isSend ? `已发送(${sendNum})S` : "发送验证码" }}
-          </van-button>
-        </template>
-      </van-field>
-
-      <van-field
-        type="password"
-        name="密码"
-        placeholder="请输入密码"
-        v-model="form.password"
-        :rules="[{ required: true, message: '请填写密码' }]"
-      >
-        <template #left-icon>
-          <img
-            :src="require('../../assets/svgs/login_icon_mima.svg')"
-            class="icon"
-          />
-        </template>
-      </van-field>
-
-      <van-field
-        type="password"
-        name="密码"
-        placeholder="请再次输入密码"
-        v-model="form.password2"
-        :rules="[
-          { required: true, message: '请再次填写密码' },
-          {
-            validator: (val) => {
-              if (val == form.password) {
-                return true;
-              } else {
-                return false;
-              }
-            },
-            message: '两次密码输入不一致',
-          },
-        ]"
-      >
-        <template #left-icon>
-          <img
-            :src="require('../../assets/svgs/login_icon_mima.svg')"
-            class="icon"
-          />
-        </template>
-      </van-field>
-
-      <div class="button">
-        <van-button
-          round
-          block
-          native-type="submit"
-          color="linear-gradient(to right, #FDFB60, #FF8F3E)"
-          class="sure"
-          >登录</van-button
-        >
-        <van-button
-          class="del"
-          round
-          block
-          plain
-          @click="$router.replace('/login')"
-          >已有账号，立即登陆</van-button
-        >
-      </div>
-    </van-form>
-  </div>
 </template>
 
 <script>
-import phone from "../../mixins/phone";
+import phone from '../../mixins/phone';
 export default {
-  mixins: [phone],
-  data() {
-    return {
-      active: "phone",
-      form: {
-        phone: "",
-        password: "",
-        password2: "",
-        code: "",
-      },
-    };
-  },
-  methods: {
-    sendPhone() {
-      this.$refs.form.validate("手机号码").then(() => {
-        this.sendMsg(this.form.phone);
-      });
-    },
-    submit() {
-      this.$toast.loading({
-        message: "加载中...",
-        forbidClick: true,
-      });
-      this.verifyMsg(this.form.phone, this.form.code)
-        .then(() => {
-          return this.$http.post(
-            "/auth/phoneRegister?phone=" +
-              this.form.phone +
-              "&password=" +
-              this.form.password
-          );
-        })
-        .then(() => {
-          return this.loginByPhone(this.form.phone, this.form.password);
-        })
-        .then(() => {
-          this.$toast.success("注册成功");
-          setTimeout(() => {
-            this.$router.back();
-          }, 1500);
-        })
-        .catch((e) => {
-          if (e) {
-            this.$toast(e.error);
-          }
-        });
+    mixins: [phone],
+    data() {
+        return {
+            active: 'phone',
+            form: {
+                phone: '',
+                password: '',
+                password2: '',
+                code: ''
+            }
+        };
     },
-  },
+    methods: {
+        sendPhone() {
+            this.$refs.form.validate('手机号码').then(() => {
+                this.sendMsg(this.form.phone);
+            });
+        },
+        submit() {
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+            this.verifyMsg(this.form.phone, this.form.code)
+                .then(() => {
+                    return this.$http.post(
+                        '/auth/phoneRegister?phone=' + this.form.phone + '&password=' + this.form.password
+                    );
+                })
+                .then(() => {
+                    return this.loginByPhone(this.form.phone, this.form.password);
+                })
+                .then(() => {
+                    this.$toast.success('注册成功');
+                    setTimeout(() => {
+                        this.$router.back();
+                    }, 1500);
+                })
+                .catch(e => {
+                    if (e) {
+                        this.$toast(e.error);
+                    }
+                });
+        }
+    }
 };
 </script>
 
 <style lang="less" scoped>
 .login {
-  padding: 40px 50px 100px;
+    padding: 40px 50px 100px;
 }
 
 .tabs {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  .tab {
-    font-size: 18px;
-    color: #c8c9cc;
-    line-height: 25px;
-
-    &.active {
-      font-size: 24px;
-      font-weight: bold;
-      color: #ffffff;
-      line-height: 33px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .tab {
+        font-size: 18px;
+        color: #c8c9cc;
+        line-height: 25px;
+
+        &.active {
+            font-size: 24px;
+            font-weight: bold;
+            color: #ffffff;
+            line-height: 33px;
+        }
     }
-  }
 }
 
 .icon {
-  display: block;
-  margin-top: 12px;
+    display: block;
+    margin-top: 12px;
 }
 /deep/ .van-form {
-  margin-top: 28px;
-  .van-cell {
-    padding: 0px 0;
+    margin-top: 28px;
+    .van-cell {
+        padding: 0px 0;
 
-    .van-field__left-icon {
-      margin-right: 8px;
+        .van-field__left-icon {
+            margin-right: 8px;
+        }
     }
-  }
 
-  .van-cell + .van-cell {
-    margin-top: 20px;
-  }
-  .van-field__body {
-    height: 44px;
-    align-items: center;
-  }
+    .van-cell + .van-cell {
+        margin-top: 20px;
+    }
+    .van-field__body {
+        height: 44px;
+        align-items: center;
+    }
 }
 .button {
-  margin-top: 60px;
+    margin-top: 60px;
 
-  .del {
-    margin-top: 20px;
-    border-color: #ffffff;
-  }
+    .del {
+        margin-top: 20px;
+        border-color: #ffffff;
+    }
 
-  .sure {
-    color: @bg !important;
-  }
+    .sure {
+        color: @bg !important;
+    }
 
-  .van-button {
-    font-weight: bold;
-  }
+    .van-button {
+        font-weight: bold;
+    }
 }
 
 .sub-code {
-  padding-right: 0;
-  border-width: 0;
+    padding-right: 0;
+    border-width: 0;
 }
 </style>

src/main/nine-space/src/views/user/Setting.vue

@@ -1,161 +1,159 @@
 <template>
-  <div class="setting">
-    <div class="tabs">编辑资料</div>
+    <div class="setting">
+        <div class="tabs">编辑资料</div>
 
-    <van-cell-group>
-      <van-cell title="头像" is-link>
-        <template #value>
-          <van-image
-            round
-            width="36"
-            height="36"
-            :src="
-              userInfo.avatar ||
-              require('../../assets/svgs/img_default_photo.svg')
-            "
-            fit="cover"
-          />
+        <van-cell-group>
+            <van-cell title="头像" is-link>
+                <template #value>
+                    <van-image
+                        round
+                        width="36"
+                        height="36"
+                        :src="userInfo.avatar || require('../../assets/svgs/img_default_photo.svg')"
+                        fit="cover"
+                    />
 
-          <van-uploader class="avatar" :after-read="afterRead" />
-        </template>
-      </van-cell>
-      <van-cell
-        title="昵称"
-        @click="$router.push('/changeText?type=nickname')"
-        is-link
-        :value="userInfo.nickname"
-      />
-      <van-cell
-        title="性别"
-        :class="{ not: !userInfo.sex }"
-        is-link
-        :value="userInfo.sex || '未设置'"
-        @click="show = true"
-      />
-      <van-cell
-        title="简介"
-        :class="[userInfo.intro ? 'intro' : 'not']"
-        @click="$router.push('/changeText?type=intro')"
-        is-link
-        :value="userInfo.intro || '请添加介绍'"
-      />
-      <van-cell title="主页背景" class="not" is-link>
-        <template #value>
-          <span> 更换背景图片</span>
-          <van-uploader class="avatar" :after-read="afterRead2" />
-        </template>
-      </van-cell>
-      <van-cell class="not" title="编码" :value="userInfo.id" />
-    </van-cell-group>
+                    <van-uploader class="avatar" :after-read="afterRead" />
+                </template>
+            </van-cell>
+            <van-cell
+                title="昵称"
+                @click="$router.push('/changeText?type=nickname')"
+                is-link
+                :value="userInfo.nickname"
+            />
+            <van-cell
+                title="性别"
+                :class="{ not: !userInfo.sex }"
+                is-link
+                :value="userInfo.sex || '未设置'"
+                @click="show = true"
+            />
+            <van-cell
+                title="简介"
+                :class="[userInfo.intro ? 'intro' : 'not']"
+                @click="$router.push('/changeText?type=intro')"
+                is-link
+                :value="userInfo.intro || '请添加介绍'"
+            />
+            <van-cell title="主页背景" class="not" is-link>
+                <template #value>
+                    <span> 更换背景图片</span>
+                    <van-uploader class="avatar" :after-read="afterRead2" />
+                </template>
+            </van-cell>
+            <van-cell class="not" title="编码" :value="userInfo.id" />
+        </van-cell-group>
 
-    <van-action-sheet
-      v-model:show="show"
-      :actions="actions"
-      cancel-text="取消"
-      close-on-click-action
-      @select="chooseSex"
-    />
-  </div>
+        <van-action-sheet
+            v-model:show="show"
+            :actions="actions"
+            cancel-text="取消"
+            close-on-click-action
+            @select="chooseSex"
+        />
+    </div>
 </template>
 
 <script>
-import { mapState } from "vuex";
-import { ref } from "vue";
+import { mapState } from 'vuex';
+import { ref } from 'vue';
 export default {
-  computed: {
-    ...mapState(["userInfo"]),
-  },
-  setup() {
-    //性别
-    const show = ref(false);
-    const actions = [{ name: "男" }, { name: "女" }];
-
-    return {
-      show,
-      actions,
-    };
-  },
-  methods: {
-    chooseSex(val) {
-      this.updateUser({ sex: val.name });
-    },
-    afterRead(e) {
-      this.updateFile(e).then((img) => {
-        this.updateUser({ avatar: img });
-      });
+    computed: {
+        ...mapState(['userInfo'])
     },
-    afterRead2(e) {
-      this.updateFile(e).then((img) => {
-        this.updateUser({ bg: img });
-      });
+    setup() {
+        //性别
+        const show = ref(false);
+        const actions = [{ name: '男' }, { name: '女' }];
+
+        return {
+            show,
+            actions
+        };
     },
-  },
+    methods: {
+        chooseSex(val) {
+            this.updateUser({ sex: val.name });
+        },
+        afterRead(e) {
+            this.updateFile(e).then(img => {
+                this.updateUser({ avatar: img });
+            });
+        },
+        afterRead2(e) {
+            this.updateFile(e).then(img => {
+                this.updateUser({ bg: img });
+            });
+        }
+    }
 };
 </script>
 
 <style lang="less" scoped>
 .setting {
-  padding: 10px 16px 100px;
+    padding: 10px 0 100px;
 }
 
 .tabs {
-  font-size: 20px;
-  font-weight: bold;
-  color: #ffffff;
-  line-height: 30px;
+    font-size: 20px;
+    font-weight: bold;
+    color: #ffffff;
+    line-height: 30px;
+    padding: 0 16px;
 }
 
 .avatar {
-  position: absolute;
-  right: 0;
-  top: 0;
-  opacity: 0;
-  bottom: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    opacity: 0;
+    bottom: 0;
 }
 
 /deep/ .van-cell {
-  align-items: center;
-  height: 70px;
-  position: relative;
-  .van-cell__title {
-    span {
-      font-weight: bold;
-      font-size: 14px;
+    align-items: center;
+    height: 70px;
+    position: relative;
+    .van-cell__title {
+        span {
+            font-weight: bold;
+            font-size: 14px;
+        }
     }
-  }
 
-  .van-cell__value {
-    span {
-      font-size: 16px;
-      color: #ffffff;
-      line-height: 24px;
+    .van-cell__value {
+        span {
+            font-size: 16px;
+            color: #ffffff;
+            line-height: 24px;
+        }
     }
-  }
 
-  &.not {
-    .van-cell__value {
-      span {
-        font-size: 13px;
-        color: #939599;
-        line-height: 24px;
-      }
+    &.not {
+        .van-cell__value {
+            span {
+                font-size: 13px;
+                color: #939599;
+                line-height: 24px;
+            }
+        }
     }
-  }
 
-  &.intro {
-    overflow: hidden;
-    .van-cell__value {
-      span {
-        font-size: 13px;
-        color: #fff;
-        line-height: 24px;
-        display: -webkit-box;
+    &.intro {
         overflow: hidden;
-        text-overflow: ellipsis;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-      }
+        .van-cell__value {
+            span {
+                font-size: 13px;
+                color: #fff;
+                line-height: 24px;
+                display: -webkit-box;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                -webkit-line-clamp: 2;
+                -webkit-box-orient: vertical;
+            }
+        }
     }
-  }
 }
 </style>

src/main/nine-space/src/views/user/Verified.vue

@@ -1,16 +1,20 @@
 <template>
   <div class="login">
     <div class="tabs">
-      <div class="tab active">实名认证</div>
+      <div class="text1">实名认证</div>
+      <div class="text2">
+        <span>账户实名认证后不能修改，</span>
+        <span>请使用本人身份信息完成认证</span>
+      </div>
     </div>
 
-    <van-form @submit="submit">
+    <van-form @submit="submit" @failed="failed" ref="form">
       <van-field
         type="tel"
         label="姓名"
         name="姓名"
         placeholder="请输入您真实姓名"
-        v-model="form.name"
+        v-model="form.realName"
         :rules="[{ required: true, message: '请输入您真实姓名' }]"
       >
       </van-field>
@@ -22,7 +26,13 @@
         placeholder="请输入您的手机号码"
         v-model="form.phone"
         :maxlength="11"
-        :rules="[{ required: true, message: '请输入您的手机号码' }]"
+        :rules="[
+          { required: true, message: '请输入您的手机号码' },
+          {
+            pattern: phonePattern,
+            message: '手机号码格式错误',
+          },
+        ]"
       >
       </van-field>
 
@@ -31,7 +41,7 @@
         label="电子邮箱"
         name="电子邮箱"
         placeholder="请输入电子邮箱"
-        v-model="form.mail"
+        v-model="form.email"
         :rules="[{ required: true, message: '请输入电子邮箱' }]"
       >
       </van-field>
@@ -41,25 +51,67 @@
         label="身份证号"
         name="身份证号"
         placeholder="请输入身份证号"
-        v-model="form.no"
+        v-model="form.idNo"
         :rules="[{ required: true, message: '请输入身份证号' }]"
       >
       </van-field>
 
-      <div class="img">
-        <div class="img-label">身份证照片<br />（正面照）</div>
-        <van-uploader :after-read="afterRead" />
-      </div>
-      <div class="img">
-        <div class="img-label">身份证照片<br />（反面照）</div>
-        <van-uploader :after-read="afterRead" />
-      </div>
+      <van-field
+        label="身份证照片（正面照）"
+        name="正面照"
+        v-model="form.idFront"
+        class="img"
+        :rules="[
+          {
+            validator: (val) => {
+              return !!this.form.idFront;
+            },
+            message: '请上传身份证正面照片',
+          },
+        ]"
+      >
+        <template #input>
+          <div class="img-content">
+            <van-image
+              :src="form.idFront || require('../../assets/svgs/bg-png.svg')"
+              fit="cover"
+              radius="20"
+            />
+            <van-uploader name="idFront" :after-read="afterRead" />
+          </div>
+        </template>
+      </van-field>
+      <van-field
+        label="身份证照片（反面照）"
+        name="反面照"
+        v-model="form.idBack"
+        class="img"
+        :rules="[
+          {
+            validator: (val) => {
+              return !!this.form.idBack;
+            },
+            message: '请上传身份证反面照片',
+          },
+        ]"
+      >
+        <template #input>
+          <div class="img-content">
+            <van-image
+              :src="form.idBack || require('../../assets/svgs/bg-png.svg')"
+              fit="cover"
+              radius="20"
+            />
+            <van-uploader name="idBack" :after-read="afterRead" />
+          </div>
+        </template>
+      </van-field>
 
-      <div class="button">
+      <div class="button" ref="btn">
         <van-button
           round
           block
-          native-type="submit"
+          @click="submit"
           color="linear-gradient(to right, #FDFB60, #FF8F3E)"
           class="sure"
         >
@@ -71,24 +123,55 @@
 </template>
 
 <script>
+import { mapState } from "vuex";
 export default {
+  computed: {
+    ...mapState(["userInfo"]),
+  },
+  inject: ["bs"],
   data() {
     return {
       active: "phone",
       form: {
-        name: "",
+        realName: "",
         phone: "",
-        mail: "",
-        no: "",
+        email: "",
+        idNo: "",
+        idFront: "",
+        idBack: "",
+        status: "",
       },
     };
   },
+  mounted() {
+    document.body.appendChild(this.$refs.btn);
+  },
+  unmounted() {
+    document.body.removeChild(this.$refs.btn);
+  },
   methods: {
     submit() {
-      console.log("63772");
+      this.$refs.form
+        .validate()
+        .then(() => {
+          let form = { ...this.form };
+          form.userId = this.userInfo.id;
+          form.status = "PENDING";
+          this.$http.post("/identityAuth/save").then(() => {
+            this.$toast.success("更新成功");
+          });
+        })
+        .catch(() => {
+          this.bs.value.refresh();
+        });
     },
-    afterRead(file) {
-      console.log(file);
+    afterRead(file, e) {
+      this.updateFile(file).then((img) => {
+        this.form[e.name] = img;
+      });
+    },
+    failed() {
+      console.log("验证失败");
     },
   },
 };
@@ -96,26 +179,32 @@ export default {
 
 <style lang="less" scoped>
 .login {
-  padding: 10px 16px 100px;
+  padding: 10px 16px 150px;
 }
 
 .tabs {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  .tab {
-    font-size: 18px;
-    color: #c8c9cc;
-    line-height: 25px;
-
-    &.active {
-      font-size: 24px;
-      font-weight: bold;
-      color: #ffffff;
-      line-height: 33px;
+  padding-bottom: 12px;
+  .text1 {
+    font-size: 20px;
+    font-weight: bold;
+    color: #ffffff;
+    line-height: 30px;
+  }
+  .text2 {
+    font-size: 12px;
+    color: #939599;
+    line-height: 22px;
+    margin-top: 4px;
+    span {
+      &:last-child {
+        color: @prim;
+      }
     }
   }
 }
+.van-cell::after {
+  border-bottom-color: #202122;
+}
 
 .icon {
   display: block;
@@ -179,4 +268,40 @@ export default {
     min-width: 86px;
   }
 }
+
+.img-content {
+  position: relative;
+  /deep/.van-uploader {
+    position: absolute;
+    left: 0;
+    top: 0;
+    opacity: 0;
+    .van-uploader__upload {
+      width: 160px;
+      height: 160px;
+    }
+  }
+}
+
+.button {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: @bg2;
+  padding: 6px 42px;
+  z-index: 20;
+}
+
+/deep/.img {
+  &.van-cell {
+    margin-top: 20px;
+    .van-field__body {
+      height: 160px;
+    }
+    .van-field__label {
+      margin-top: 5px;
+    }
+  }
+}
 </style>

src/main/nine-space/src/views/user/Waiting.vue

@@ -0,0 +1,3 @@
+<template>
+    <div></div>
+</template>

src/main/nine-space/vue.config.js

@@ -1,28 +1,21 @@
-const path = require("path");
+const path = require('path');
 module.exports = {
-  publicPath: process.env.NODE_ENV === "production" ? "/9th/" : "/",
-  devServer: {
-    port: 8081,
-    disableHostCheck: true,
-  },
-  pluginOptions: {
-    "style-resources-loader": {
-      preProcessor: "less",
-      patterns: [path.resolve(__dirname, "./src/styles/common/*.less")],
+    publicPath: process.env.NODE_ENV === 'production' ? '/9th/' : '/',
+    devServer: {
+        port: 8081,
+        disableHostCheck: true
     },
-  },
-  chainWebpack: (config) => {
-    if (process.env.NODE_ENV === "development") {
-      config.output.filename("[name].[hash].js").end();
-    }
-  },
-  transpileDependencies: [
-    "element-ui",
-    "swiper",
-    "ssr-window",
-    "dom7",
-    "vue-awesome-swiper",
-    "vuex",
-  ],
-  runtimeCompiler: true,
+    pluginOptions: {
+        'style-resources-loader': {
+            preProcessor: 'less',
+            patterns: [path.resolve(__dirname, './src/styles/common/*.less')]
+        }
+    },
+    chainWebpack: config => {
+        if (process.env.NODE_ENV === 'development') {
+            config.output.filename('[name].[hash].js').end();
+        }
+    },
+    transpileDependencies: ['element-ui', 'swiper', 'ssr-window', 'dom7', 'vue-awesome-swiper', 'vuex'],
+    runtimeCompiler: true
 };