展示

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

@@ -1,18 +1,18 @@
 module.exports = {
-  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,
-    "vue/no-parsing-error": ["error"],
-  },
+    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,
+        'vue/no-parsing-error': ['error']
+    }
 };

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,115 +1,115 @@
 <template>
-  <div class="scroll-wrapper" ref="scroll">
-    <router-view class="scroll-content" ref="content" />
+    <div class="scroll-wrapper" ref="scroll">
+        <router-view class="scroll-content" ref="content" />
 
-    <!-- <app-bar></app-bar> -->
-  </div>
+        <!-- <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),
-      setKeeps: this.setKeeps,
-    };
-  },
-  data() {
-    return {
-      beforePullDown: true,
-      finished: false,
-      loading: false,
-      refreshing: false,
-      checkEvent: null,
-      bs: null,
-      timer: null,
-      keeps: [],
-    };
-  },
-  watch: {
-    $route() {
-      if (this.bs) {
-        if (this.timer) {
-          clearTimeout(this.timer);
-        }
-        this.timer = setTimeout(() => {
-          this.bs.refresh();
-          this.bs.scrollTo(0, 0);
-        }, 100);
-      }
-    },
-  },
-  mounted() {
-    this.timer = setTimeout(() => {
-      this.init();
-    }, 1000);
-  },
-  methods: {
-    setKeeps(keeps) {
-      console.log(keeps);
-      this.keeps = keeps;
+    name: 'App',
+    provide() {
+        return {
+            changeCheck: this.changeCheck,
+            bs: computed(() => this.bs),
+            setKeeps: this.setKeeps
+        };
     },
-    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,
+            keeps: []
+        };
     },
-    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);
+                }, 100);
+            }
         }
-      }
     },
-    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: {
+        setKeeps(keeps) {
+            console.log(keeps);
+            this.keeps = keeps;
+        },
+        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/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,95 +1,94 @@
 <template>
-  <div class="like" @click.prevent="like">
-    <img :src="isLike ? likeImg : disLikeImg" alt="" />
-    <span><slot>16</slot></span>
-  </div>
+    <div class="like" @click.prevent="like">
+        <img :src="isLike ? likeImg : disLikeImg" alt="" />
+        <span><slot>16</slot></span>
+    </div>
 </template>
 
 <script>
 export default {
-  props: {
-    isLike: {
-      type: Boolean,
-      default: false,
+    props: {
+        isLike: {
+            type: Boolean,
+            default: false
+        }
     },
-  },
-  data() {
-    return {
-      likeImg: require("../assets/svgs/like.svg"),
-      disLikeImg: require("../assets/svgs/dislike.svg"),
-    };
-  },
-  methods: {
-    like() {
-      this.checkLogin().then(() => {
-        this.$el.children[0].className += "rubberBand";
-        setTimeout(() => {
-          this.$el.children[0].className =
-            this.$el.children[0].className.replace(/rubberBand/g, "");
-        }, 1000);
-        this.$emit("like");
-      });
+    data() {
+        return {
+            likeImg: require('../assets/svgs/like.svg'),
+            disLikeImg: require('../assets/svgs/dislike.svg')
+        };
     },
-  },
+    methods: {
+        like() {
+            this.checkLogin().then(() => {
+                this.$el.children[0].className += 'rubberBand';
+                setTimeout(() => {
+                    this.$el.children[0].className = this.$el.children[0].className.replace(/rubberBand/g, '');
+                }, 1000);
+                this.$emit('like');
+            });
+        }
+    }
 };
 </script>
 
 <style lang="less" scoped>
 .like {
-  display: inline-block;
-  color: #949699;
-  line-height: 24px;
-
-  img {
-    vertical-align: middle;
-    margin-right: 3px;
-    width: 18px;
-    height: 18px;
     display: inline-block;
-  }
+    color: #949699;
+    line-height: 24px;
+
+    img {
+        vertical-align: middle;
+        margin-right: 3px;
+        width: 18px;
+        height: 18px;
+        display: inline-block;
+    }
 
-  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,22 +1,22 @@
 <template>
-  <van-cell :title="title" :border="false" value="查看全部" :to="to" is-link />
+    <van-cell :title="title" :border="false" value="查看全部" :to="to" is-link />
 </template>
 
 <script>
 export default {
-  props: ["title", "to"],
+    props: ['title', 'to']
 };
 </script>
 
 <style lang="less" scoped>
 .van-cell {
-  /deep/ .van-cell__title {
-    flex: 2;
-    span {
-      font-size: 20px;
-      font-family: ZhenyanGB-Regular, ZhenyanGB;
+    /deep/ .van-cell__title {
+        flex: 2;
+        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/Post.vue

@@ -1,238 +1,228 @@
 <template>
-  <div ref="share">
-    <van-overlay :show="show" @click="show = false" z-index="99">
-      <div class="wrapper">
-        <div class="img" ref="wrap"></div>
-        <div class="content" v-if="!img" ref="post" @click.stop>
-          <van-image
-            :src="getImg(info.pics || info.pic)"
-            width="80vw"
-            height="80vw"
-            fit="cover"
-            @load="loadImg"
-          />
-          <div class="info">
-            <div class="name van-multi-ellipsis--l2">
-              {{ info.name }}
-            </div>
-            <div class="text">
-              <div class="price">
-                <img src="../assets/svgs/jiage.svg" alt="" />
-                <span>{{ info.price }}</span>
-              </div>
-              <div class="text1" v-if="info.stock">
-                <span>已售 {{ info.sale }}</span>
-                <span>剩余 {{ info.stock }}</span>
-              </div>
-            </div>
-          </div>
-          <div class="minter">
-            <div class="minter-content">
-              <van-image
-                width="30"
-                height="30"
-                round
-                :src="info.minterAvatar"
-                fit="cover"
-              />
-              <div class="text1">{{ info.minter }}</div>
-              <div class="text2">铸造者</div>
-            </div>
+    <div ref="share">
+        <van-overlay :show="show" @click="show = false" z-index="99">
+            <div class="wrapper">
+                <div class="img" ref="wrap"></div>
+                <div class="content" v-if="!img" ref="post" @click.stop>
+                    <van-image
+                        :src="getImg(info.pics || info.pic)"
+                        width="80vw"
+                        height="80vw"
+                        fit="cover"
+                        @load="loadImg"
+                    />
+                    <div class="info">
+                        <div class="name van-multi-ellipsis--l2">
+                            {{ info.name }}
+                        </div>
+                        <div class="text">
+                            <div class="price">
+                                <img src="../assets/svgs/jiage.svg" alt="" />
+                                <span>{{ info.price }}</span>
+                            </div>
+                            <div class="text1" v-if="info.stock">
+                                <span>已售 {{ info.sale }}</span>
+                                <span>剩余 {{ info.stock }}</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="minter">
+                        <div class="minter-content">
+                            <van-image width="30" height="30" round :src="info.minterAvatar" fit="cover" />
+                            <div class="text1">{{ info.minter }}</div>
+                            <div class="text2">铸造者</div>
+                        </div>
 
-            <vue-qrcode
-              :value="url"
-              :options="{ width: 70, margin: 2 }"
-              class="code"
-            ></vue-qrcode>
-          </div>
-        </div>
+                        <vue-qrcode :value="url" :options="{ width: 70, margin: 2 }" class="code"></vue-qrcode>
+                    </div>
+                </div>
 
-        <div class="tips">长按图片保存</div>
-      </div>
-    </van-overlay>
-    <!-- <div class="share" @click="init">
+                <div class="tips">长按图片保存</div>
+            </div>
+        </van-overlay>
+        <!-- <div class="share" @click="init">
       <img src="../assets/svgs/icon-share.svg" alt="" />
       <span>分享</span>
     </div> -->
-  </div>
+    </div>
 </template>
 <script>
-import vueQrcode from "@chenfengyuan/vue-qrcode";
-import html2canvas from "html2canvas";
-const path = require("path");
+import vueQrcode from '@chenfengyuan/vue-qrcode';
+import html2canvas from 'html2canvas';
+const path = require('path');
 export default {
-  props: {
-    info: {
-      type: Object,
-      default: () => {
-        return {};
-      },
+    props: {
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        },
+        pageUrl: {
+            type: String,
+            default: 'productDetail'
+        }
     },
-    pageUrl: {
-      type: String,
-      default: "productDetail",
+    data() {
+        return {
+            show: false,
+            share: null,
+            img: false
+        };
     },
-  },
-  data() {
-    return {
-      show: false,
-      share: null,
-      img: false,
-    };
-  },
-  computed: {
-    url() {
-      return path.resolve(this.$baseUrl, this.pageUrl + "?id=" + this.info.id);
+    computed: {
+        url() {
+            return path.resolve(this.$baseUrl, this.pageUrl + '?id=' + this.info.id);
+        }
     },
-  },
-  components: {
-    vueQrcode,
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.share = this.$refs.share;
-      document.body.appendChild(this.share);
-    });
-  },
-  beforeUnmount() {
-    if (this.share) {
-      document.body.removeChild(this.share);
-    }
-  },
-  methods: {
-    init() {
-      if (!this.img) {
-        this.$toast.loading({
-          message: "加载中...",
-          forbidClick: true,
-        });
-      }
-
-      this.show = true;
+    components: {
+        vueQrcode
     },
-    loadImg() {
-      setTimeout(() => {
-        html2canvas(this.$refs.post).then((canvas) => {
-          this.$toast.clear();
-          this.$refs.wrap.appendChild(canvas);
-          this.$nextTick(() => {
-            this.img = true;
-          });
+    mounted() {
+        this.$nextTick(() => {
+            this.share = this.$refs.share;
+            document.body.appendChild(this.share);
         });
-      }, 100);
     },
-  },
+    beforeUnmount() {
+        if (this.share) {
+            document.body.removeChild(this.share);
+        }
+    },
+    methods: {
+        init() {
+            if (!this.img) {
+                this.$toast.loading({
+                    message: '加载中...',
+                    forbidClick: true
+                });
+            }
+
+            this.show = true;
+        },
+        loadImg() {
+            setTimeout(() => {
+                html2canvas(this.$refs.post).then(canvas => {
+                    this.$toast.clear();
+                    this.$refs.wrap.appendChild(canvas);
+                    this.$nextTick(() => {
+                        this.img = true;
+                    });
+                });
+            }, 100);
+        }
+    }
 };
 </script>
 <style lang="less" scoped>
 .wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    height: 100%;
 }
 
 .content {
-  width: 80vw;
-  background: #19191b;
-  border-radius: 8px;
+    width: 80vw;
+    background: #19191b;
+    border-radius: 8px;
 }
 
 .img {
-  /deep/ canvas {
-    overflow: hidden;
-    border-radius: 8px;
-    display: block;
-  }
+    /deep/ canvas {
+        overflow: hidden;
+        border-radius: 8px;
+        display: block;
+    }
 }
 
 .info {
-  padding: 12px 10px;
-  .name {
-    font-size: 18px;
-    font-weight: bold;
-    color: #ffffff;
-    line-height: 24px;
-  }
-  .text {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-    margin-top: 6px;
-
-    .price {
-      span {
-        font-size: 32px;
-        font-family: OSP-DIN, OSP;
-        color: #fdfb60;
-        line-height: 36px;
-      }
+    padding: 12px 10px;
+    .name {
+        font-size: 18px;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 24px;
     }
-    .text1 {
-      font-size: 14px;
-      color: #939599;
-      line-height: 24px;
-      span + span {
-        margin-left: 10px;
-      }
+    .text {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+        margin-top: 6px;
+
+        .price {
+            span {
+                font-size: 32px;
+                font-family: OSP-DIN, OSP;
+                color: #fdfb60;
+                line-height: 36px;
+            }
+        }
+        .text1 {
+            font-size: 14px;
+            color: #939599;
+            line-height: 24px;
+            span + span {
+                margin-left: 10px;
+            }
+        }
     }
-  }
 }
 
 .code {
-  border-radius: 6px;
+    border-radius: 6px;
 }
 
 .minter {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 10px;
-  border-top: 2px solid #202122;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 10px;
+    border-top: 2px solid #202122;
 
-  .minter-content {
-    .text1 {
-      font-size: 14px;
-      color: #ffffff;
-      line-height: 24px;
-      margin-top: 6px;
-    }
-    .text2 {
-      font-size: 12px;
-      color: #939599;
-      line-height: 22px;
+    .minter-content {
+        .text1 {
+            font-size: 14px;
+            color: #ffffff;
+            line-height: 24px;
+            margin-top: 6px;
+        }
+        .text2 {
+            font-size: 12px;
+            color: #939599;
+            line-height: 22px;
+        }
     }
-  }
 }
 
 .tips {
-  font-size: 13px;
-  color: #939599;
-  line-height: 22px;
-  margin-top: 16px;
+    font-size: 13px;
+    color: #939599;
+    line-height: 22px;
+    margin-top: 16px;
 }
 
 .share {
-  position: fixed;
-  right: 16px;
-  bottom: 20vh;
-  width: 48px;
-  height: 48px;
-  background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
-  z-index: 20;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  border-radius: 100px;
-  justify-content: center;
-  span {
-    font-size: 12px;
-    color: #333230;
-    line-height: 17px;
-  }
-  img {
-    display: block;
-  }
+    position: fixed;
+    right: 16px;
+    bottom: 20vh;
+    width: 48px;
+    height: 48px;
+    background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
+    z-index: 20;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-radius: 100px;
+    justify-content: center;
+    span {
+        font-size: 12px;
+        color: #333230;
+        line-height: 17px;
+    }
+    img {
+        display: block;
+    }
 }
 </style>

src/main/nine-space/src/components/asset/assetInfo.vue

@@ -1,44 +1,33 @@
 <template>
-  <router-link
-    :to="{
-      path: '/assetDetail',
-      query: {
-        id: info.id,
-      },
-    }"
-    class="product"
-    @click="click"
-  >
-    <van-image
-      width="100%"
-      height="calc(45vw - 21.6px)"
-      :src="getImg(info.pic)"
-      fit="cover"
-    />
+    <router-link
+        :to="{
+            path: '/assetDetail',
+            query: {
+                id: info.id
+            }
+        }"
+        class="product"
+        @click="click"
+    >
+        <van-image width="100%" height="calc(45vw - 21.6px)" :src="getImg(info.pic)" fit="cover" />
 
-    <div class="content">
-      <div class="name van-ellipsis">
-        {{ info.name }}
-      </div>
-      <div class="price" v-if="info.status === 'ON_SALE'">
-        <i class="font_family icon-icon_jiage"></i>{{ info.price }}
-      </div>
-      <div class="status" v-else-if="info.status === 'NORMAL'">
-        {{ info.publicShow ? "仅展示" : "未展示" }}
-      </div>
-      <div class="status" v-else>
-        {{ getLabelName(info.status, assetStatusOptions) }}
-      </div>
-      <div class="text">
-        <van-image
-          width="18"
-          height="18"
-          :radius="100"
-          :src="info.minterAvatar"
-          fit="cover"
-        />
-        <span>{{ info.minter }}</span>
-        <!-- <div class="text1" v-if="info.type === 'BLIND_BOX'">
+        <div class="content">
+            <div class="name van-ellipsis">
+                {{ info.name }}
+            </div>
+            <div class="price" v-if="info.status === 'ON_SALE'">
+                <i class="font_family icon-icon_jiage"></i>{{ info.price }}
+            </div>
+            <div class="status" v-else-if="info.status === 'NORMAL'">
+                {{ info.publicShow ? '仅展示' : '未展示' }}
+            </div>
+            <div class="status" v-else>
+                {{ getLabelName(info.status, assetStatusOptions) }}
+            </div>
+            <div class="text">
+                <van-image width="18" height="18" :radius="100" :src="info.minterAvatar" fit="cover" />
+                <span>{{ info.minter }}</span>
+                <!-- <div class="text1" v-if="info.type === 'BLIND_BOX'">
           <span>{{ info.sale }}/ </span>
           <span>{{ info.stock }}</span>
         </div>
@@ -46,114 +35,114 @@
         <like-button :isLike="info.liked" @click="likeProduct">
           {{ info.likes }}
         </like-button> -->
-      </div>
-    </div>
-  </router-link>
+            </div>
+        </div>
+    </router-link>
 </template>
 
 <script>
-import asset from "../../mixins/asset";
+import asset from '../../mixins/asset';
 
 export default {
-  mixins: [asset],
-  props: {
-    info: {
-      type: Object,
-      default: () => {
-        return {};
-      },
+    mixins: [asset],
+    props: {
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        }
     },
-  },
-  setup() {
-    const click = function () {
-      console.log("wyt6w");
-    };
+    setup() {
+        const click = function () {
+            console.log('wyt6w');
+        };
 
-    return { click };
-  },
-  methods: {
-    likeProduct() {
-      if (!this.info.liked) {
-        this.$http.get(`/collection/${this.info.id}/like`).then(() => {
-          this.$emit("update:info", {
-            ...this.info,
-            liked: true,
-            likes: this.info.likes + 1,
-          });
-          this.$toast.success("收藏成功");
-        });
-      } else {
-        this.$http.get(`/collection/${this.info.id}/unlike`).then(() => {
-          this.$emit("update:info", {
-            ...this.info,
-            liked: false,
-            likes: this.info.likes - 1,
-          });
-          this.$toast.success("取消收藏");
-        });
-      }
+        return { click };
     },
-  },
+    methods: {
+        likeProduct() {
+            if (!this.info.liked) {
+                this.$http.get(`/collection/${this.info.id}/like`).then(() => {
+                    this.$emit('update:info', {
+                        ...this.info,
+                        liked: true,
+                        likes: this.info.likes + 1
+                    });
+                    this.$toast.success('收藏成功');
+                });
+            } else {
+                this.$http.get(`/collection/${this.info.id}/unlike`).then(() => {
+                    this.$emit('update:info', {
+                        ...this.info,
+                        liked: false,
+                        likes: this.info.likes - 1
+                    });
+                    this.$toast.success('取消收藏');
+                });
+            }
+        }
+    }
 };
 </script>
 
 <style lang="less" scoped>
 .product {
-  width: calc(50vw - 24px);
-  margin: 8px;
-  background-color: @bg2;
-  display: inline-block;
-  border-radius: 8px;
-  overflow: hidden;
-
-  .van-image {
+    width: calc(50vw - 24px);
+    margin: 8px;
+    background-color: @bg2;
+    display: inline-block;
+    border-radius: 8px;
     overflow: hidden;
-    display: block;
-  }
-  .content {
-    padding: 10px;
 
-    .name {
-      font-size: 16px;
-      font-weight: bold;
-      color: #ffffff;
-      line-height: 24px;
+    .van-image {
+        overflow: hidden;
+        display: block;
     }
+    .content {
+        padding: 10px;
 
-    .status {
-      font-size: 16px;
-      color: #939599;
-      line-height: 24px;
-      margin-top: 6px;
-    }
+        .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;
+        .status {
+            font-size: 16px;
+            color: #939599;
+            line-height: 24px;
+            margin-top: 6px;
+        }
 
-      i {
-        vertical-align: text-bottom;
-        font-size: 10px;
-      }
-    }
-  }
+        .price {
+            font-size: 24px;
+            font-family: OSP;
+            color: @prim;
+            line-height: 22px;
+            padding: 7px 0;
 
-  .text {
-    display: flex;
-    // justify-content: space-between;
-    align-items: center;
-    .van-image {
-      border-radius: 100px;
+            i {
+                vertical-align: text-bottom;
+                font-size: 10px;
+            }
+        }
     }
-    span {
-      font-size: 12px;
-      color: #939599;
-      line-height: 24px;
-      margin-left: 5px;
+
+    .text {
+        display: flex;
+        // justify-content: space-between;
+        align-items: center;
+        .van-image {
+            border-radius: 100px;
+        }
+        span {
+            font-size: 12px;
+            color: #939599;
+            line-height: 24px;
+            margin-left: 5px;
+        }
     }
-  }
 }
 </style>

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

@@ -1,224 +1,222 @@
 <template>
-  <router-link
-    :to="{
-      path: '/creatorDetail',
-      query: {
-        id: info.id,
-      },
-    }"
-    class="info"
-  >
-    <van-image
-      :width="size === 'large' ? 88 : 70"
-      :height="size === 'large' ? 88 : 70"
-      :src="getImg(info.avatar)"
-      fit="cover"
-      radius="100"
-    />
-
-    <img v-if="rank" class="NOImg" :src="NOInfo.img1" alt="" />
-
-    <div class="content">
-      <div class="text1 van-ellipsis">{{ info.nickname }}</div>
-      <div class="text2 van-ellipsis--l2">
-        {{ info.intro }}
-      </div>
-      <div class="flex1"></div>
-
-      <div class="text3">
-        <div class="sale" v-if="rank" :style="{ color: NOInfo.color }">
-          <img class="icon" :src="NOInfo.img2" alt="" />
-          <span>已售{{ info.sales }}</span>
-          <i class="font_family icon-a-icon-dianzan2"></i>
+    <router-link
+        :to="{
+            path: '/creatorDetail',
+            query: {
+                id: info.id
+            }
+        }"
+        class="info"
+    >
+        <van-image
+            :width="size === 'large' ? 88 : 70"
+            :height="size === 'large' ? 88 : 70"
+            :src="getImg(info.avatar)"
+            fit="cover"
+            radius="100"
+        />
+
+        <img v-if="rank" class="NOImg" :src="NOInfo.img1" alt="" />
+
+        <div class="content">
+            <div class="text1 van-ellipsis">{{ info.nickname }}</div>
+            <div class="text2 van-ellipsis--l2">
+                {{ info.intro }}
+            </div>
+            <div class="flex1"></div>
+
+            <div class="text3">
+                <div class="sale" v-if="rank" :style="{ color: NOInfo.color }">
+                    <img class="icon" :src="NOInfo.img2" alt="" />
+                    <span>已售{{ info.sales }}</span>
+                    <i class="font_family icon-a-icon-dianzan2"></i>
+                </div>
+                <div class="text4" v-else>
+                    <span>已售</span>
+                    <span>{{ info.sales }}</span>
+                </div>
+                <van-button
+                    v-if="!isFollow"
+                    @click.prevent="follow"
+                    :class="{ follow: info.follow }"
+                    plain
+                    type="primary"
+                    size="mini"
+                    round
+                >
+                    {{ info.follow ? '已关注' : '关注' }}
+                </van-button>
+            </div>
         </div>
-        <div class="text4" v-else>
-          <span>已售</span>
-          <span>{{ info.sales }}</span>
-        </div>
-        <van-button
-          v-if="!isFollow"
-          @click.prevent="follow"
-          :class="{ follow: info.follow }"
-          plain
-          type="primary"
-          size="mini"
-          round
-        >
-          {{ info.follow ? "已关注" : "关注" }}
-        </van-button>
-      </div>
-    </div>
-  </router-link>
+    </router-link>
 </template>
 
 <script>
 export default {
-  props: {
-    rank: {
-      type: Number,
-      default: 0,
-    },
-    info: {
-      type: Object,
-      default: () => {
-        return {};
-      },
-    },
-    isFollow: {
-      type: Boolean,
-      default: false,
-    },
-    size: {
-      type: String,
-      default: "normal",
+    props: {
+        rank: {
+            type: Number,
+            default: 0
+        },
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        },
+        isFollow: {
+            type: Boolean,
+            default: false
+        },
+        size: {
+            type: String,
+            default: 'normal'
+        }
     },
-  },
-  computed: {
-    NOInfo() {
-      if (this.rank) {
-        const colors = ["#FF8E12", "#C37BFF", "#3ACEFF"];
-        return {
-          img1: require(`../../assets/NO${this.rank}.png`),
-          img2: require(`../../assets/svgs/NOicon${this.rank}.svg`),
-          color: colors[this.rank - 1],
-        };
-      }
-      return {};
+    computed: {
+        NOInfo() {
+            if (this.rank) {
+                const colors = ['#FF8E12', '#C37BFF', '#3ACEFF'];
+                return {
+                    img1: require(`../../assets/NO${this.rank}.png`),
+                    img2: require(`../../assets/svgs/NOicon${this.rank}.svg`),
+                    color: colors[this.rank - 1]
+                };
+            }
+            return {};
+        }
     },
-  },
-  methods: {
-    follow() {
-      this.checkLogin().then(() => {
-        if (!this.info.follow) {
-          this.$http.get(`/user/${this.info.id}/follow`).then((res) => {
-            this.$emit("update:info", {
-              ...this.info,
-              follow: true,
-              followers: this.info.followers + 1,
+    methods: {
+        follow() {
+            this.checkLogin().then(() => {
+                if (!this.info.follow) {
+                    this.$http.get(`/user/${this.info.id}/follow`).then(res => {
+                        this.$emit('update:info', {
+                            ...this.info,
+                            follow: true,
+                            followers: this.info.followers + 1
+                        });
+                        this.$toast.success('关注成功');
+                    });
+                } else {
+                    this.$http.get(`/user/${this.info.id}/unfollow`).then(() => {
+                        this.$emit('update:info', {
+                            ...this.info,
+                            follow: false,
+                            followers: this.info.followers - 1
+                        });
+                        this.$toast.success('取消关注');
+                    });
+                }
             });
-            this.$toast.success("关注成功");
-          });
-        } else {
-          this.$http.get(`/user/${this.info.id}/unfollow`).then(() => {
-            this.$emit("update:info", {
-              ...this.info,
-              follow: false,
-              followers: this.info.followers - 1,
-            });
-            this.$toast.success("取消关注");
-          });
         }
-      });
-    },
-  },
+    }
 };
 </script>
 
 <style lang="less" scoped>
 .info {
-  display: flex;
-  padding: 24px 16px;
-  position: relative;
-
-  .content {
-    flex-grow: 1;
-    padding-left: 12px;
     display: flex;
-    flex-direction: column;
-
-    .text1 {
-      font-size: 16px;
-      font-weight: bold;
-      color: #ffffff;
-      line-height: 24px;
-    }
+    padding: 24px 16px;
+    position: relative;
 
-    .text2 {
-      font-size: 14px;
-      color: #939599;
-      line-height: 20px;
-      margin: 6px 0;
-    }
-
-    .text3 {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .sale {
+    .content {
+        flex-grow: 1;
+        padding-left: 12px;
         display: flex;
-        align-items: center;
-        font-size: 14px;
-        line-height: 24px;
+        flex-direction: column;
 
-        .font_family {
-          font-size: 18px;
-          margin-left: 2px;
+        .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);
-        }
-      }
-
-      .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;
-
-        &.follow {
-          background-image: linear-gradient(@bg, @bg),
-            linear-gradient(135deg, #939599, #939599);
-          color: #939599;
+        .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;
+
+                &.follow {
+                    background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, #939599, #939599);
+                    color: #939599;
+                }
+            }
+
+            .text4 {
+                span {
+                    font-size: 14px;
+                    color: #fff;
+                    &:first-child {
+                        color: #939599;
+                        margin-right: 2px;
+                    }
+                }
+            }
         }
-      }
+    }
 
-      .text4 {
-        span {
-          font-size: 14px;
-          color: #fff;
-          &:first-child {
-            color: #939599;
-            margin-right: 2px;
-          }
-        }
-      }
+    .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/order/OrderInfo.vue

@@ -1,170 +1,162 @@
 <template>
-  <router-link
-    :to="{
-      path: '/orderDetail',
-      query: {
-        id: info.id,
-      },
-    }"
-    class="orderInfo"
-    @click="click"
-  >
-    <div class="order-top">
-      <span>{{ info.minter }}</span>
-      <span class="status">{{ getLabelName(info.status, statusOptions) }}</span>
-    </div>
-    <div class="order">
-      <van-image
-        :radius="6"
-        width="74"
-        height="104"
-        :src="getImg(info.pic)"
-        fit="cover"
-      />
+    <router-link
+        :to="{
+            path: '/orderDetail',
+            query: {
+                id: info.id
+            }
+        }"
+        class="orderInfo"
+        @click="click"
+    >
+        <div class="order-top">
+            <span>{{ info.minter }}</span>
+            <span class="status">{{ getLabelName(info.status, statusOptions) }}</span>
+        </div>
+        <div class="order">
+            <van-image :radius="6" width="74" height="104" :src="getImg(info.pic)" fit="cover" />
 
-      <div class="content">
-        <div class="name van-multi-ellipsis--l2">
-          {{ info.name }}
+            <div class="content">
+                <div class="name van-multi-ellipsis--l2">
+                    {{ info.name }}
+                </div>
+                <div class="text">编号:{{ info.collectionId }}</div>
+                <div class="flex1"></div>
+                <div class="price">¥{{ info.price }}</div>
+            </div>
+        </div>
+        <div class="total-price">
+            <span>实际支付</span>
+            <span>¥{{ info.totalPrice }}</span>
         </div>
-        <div class="text">编号:{{ info.collectionId }}</div>
-        <div class="flex1"></div>
-        <div class="price">¥{{ info.price }}</div>
-      </div>
-    </div>
-    <div class="total-price">
-      <span>实际支付</span>
-      <span>¥{{ info.totalPrice }}</span>
-    </div>
 
-    <div class="btns">
-      <van-button color="#939599" @click.prevent="" plain size="mini" round>
-        删除订单
-      </van-button>
-    </div>
-  </router-link>
+        <div class="btns">
+            <van-button color="#939599" @click.prevent="" plain size="mini" round> 删除订单 </van-button>
+        </div>
+    </router-link>
 </template>
 
 <script>
-import order from "../../mixins/order";
+import order from '../../mixins/order';
 export default {
-  props: {
-    info: {
-      type: Object,
-      default: () => {
-        return {};
-      },
+    props: {
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        }
     },
-  },
-  setup() {
-    const click = function () {
-      console.log("wyt6w");
-    };
+    setup() {
+        const click = function () {
+            console.log('wyt6w');
+        };
 
-    return { click };
-  },
-  mixins: [order],
-  methods: {
-    likeProduct() {
-      if (!this.info.liked) {
-        this.$http.get(`/collection/${this.info.id}/like`).then(() => {
-          this.$emit("update:info", {
-            ...this.info,
-            liked: true,
-            likes: this.info.likes + 1,
-          });
-          this.$toast.success("收藏成功");
-        });
-      } else {
-        this.$http.get(`/collection/${this.info.id}/unlike`).then(() => {
-          this.$emit("update:info", {
-            ...this.info,
-            liked: false,
-            likes: this.info.likes - 1,
-          });
-          this.$toast.success("取消收藏");
-        });
-      }
+        return { click };
     },
-  },
+    mixins: [order],
+    methods: {
+        likeProduct() {
+            if (!this.info.liked) {
+                this.$http.get(`/collection/${this.info.id}/like`).then(() => {
+                    this.$emit('update:info', {
+                        ...this.info,
+                        liked: true,
+                        likes: this.info.likes + 1
+                    });
+                    this.$toast.success('收藏成功');
+                });
+            } else {
+                this.$http.get(`/collection/${this.info.id}/unlike`).then(() => {
+                    this.$emit('update:info', {
+                        ...this.info,
+                        liked: false,
+                        likes: this.info.likes - 1
+                    });
+                    this.$toast.success('取消收藏');
+                });
+            }
+        }
+    }
 };
 </script>
 
 <style lang="less" scoped>
 .orderInfo {
-  background: #181818;
-  border-radius: 12px;
-  color: #fff;
-  padding: 16px 10px 0;
-  margin: 20px 16px 0;
-  display: block;
+    background: #181818;
+    border-radius: 12px;
+    color: #fff;
+    padding: 16px 10px 0;
+    margin: 20px 16px 0;
+    display: block;
 }
 
 .order-top {
-  display: flex;
-  justify-content: space-between;
-  span {
-    font-size: 14px;
-    color: #ffffff;
-    line-height: 22px;
-  }
+    display: flex;
+    justify-content: space-between;
+    span {
+        font-size: 14px;
+        color: #ffffff;
+        line-height: 22px;
+    }
 
-  .status {
-    color: @prim;
-  }
+    .status {
+        color: @prim;
+    }
 }
 
 .order {
-  display: flex;
-  padding: 16px 0;
-  .van-image {
-    flex-shrink: 0;
-  }
-  .content {
-    flex-grow: 1;
-    margin-left: 10px;
     display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    .name {
-      font-size: 16px;
-      font-weight: bold;
-      line-height: 22px;
-    }
-    .text {
-      font-size: 14px;
-      color: #939599;
-      line-height: 24px;
-      margin-top: 4px;
+    padding: 16px 0;
+    .van-image {
+        flex-shrink: 0;
     }
+    .content {
+        flex-grow: 1;
+        margin-left: 10px;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        .name {
+            font-size: 16px;
+            font-weight: bold;
+            line-height: 22px;
+        }
+        .text {
+            font-size: 14px;
+            color: #939599;
+            line-height: 24px;
+            margin-top: 4px;
+        }
 
-    .price {
-      font-size: 16px;
-      font-weight: bold;
-      line-height: 24px;
+        .price {
+            font-size: 16px;
+            font-weight: bold;
+            line-height: 24px;
+        }
     }
-  }
 }
 .total-price {
-  font-size: 14px;
-  font-weight: bold;
-  color: #ffffff;
-  line-height: 60px;
-  text-align: right;
-  span {
-    &:last-child {
-      color: @prim;
-      margin-left: 10px;
-      font-size: 16px;
+    font-size: 14px;
+    font-weight: bold;
+    color: #ffffff;
+    line-height: 60px;
+    text-align: right;
+    span {
+        &:last-child {
+            color: @prim;
+            margin-left: 10px;
+            font-size: 16px;
+        }
     }
-  }
 }
 .btns {
-  border-top: 1px solid #202122;
-  padding: 16px 0;
-  display: flex;
-  flex-direction: row-reverse;
-  .van-button {
-    padding: 3px 17px;
-  }
+    border-top: 1px solid #202122;
+    padding: 16px 0;
+    display: flex;
+    flex-direction: row-reverse;
+    .van-button {
+        padding: 3px 17px;
+    }
 }
 </style>

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

@@ -1,137 +1,130 @@
 <template>
-  <router-link
-    :to="{
-      path: '/productDetail',
-      query: {
-        id: info.id,
-      },
-    }"
-    class="product"
-    @click="click"
-  >
-    <van-image
-      width="100%"
-      height="calc(45vw - 21.6px)"
-      :src="getImg(info.pics || info.pic)"
-      fit="cover"
-    />
+    <router-link
+        :to="{
+            path: '/productDetail',
+            query: {
+                id: info.id
+            }
+        }"
+        class="product"
+        @click="click"
+    >
+        <van-image width="100%" height="calc(45vw - 21.6px)" :src="getImg(info.pics || info.pic)" fit="cover" />
 
-    <div class="content">
-      <div class="name van-ellipsis">
-        {{ info.name }}
-      </div>
-      <div class="price">
-        <i class="font_family icon-icon_jiage"></i>{{ info.price }}
-      </div>
-      <div class="text">
-        <div class="text1" v-if="info.type === 'BLIND_BOX'">
-          <span>{{ info.sale }}/ </span>
-          <span>{{ info.stock }}</span>
+        <div class="content">
+            <div class="name van-ellipsis">
+                {{ info.name }}
+            </div>
+            <div class="price"><i class="font_family icon-icon_jiage"></i>{{ info.price }}</div>
+            <div class="text">
+                <div class="text1" v-if="info.type === 'BLIND_BOX'">
+                    <span>{{ info.sale }}/ </span>
+                    <span>{{ info.stock }}</span>
+                </div>
+                <div class="flex1"></div>
+                <like-button :isLike="info.liked" @click="likeProduct">
+                    {{ info.likes }}
+                </like-button>
+            </div>
         </div>
-        <div class="flex1"></div>
-        <like-button :isLike="info.liked" @click="likeProduct">
-          {{ info.likes }}
-        </like-button>
-      </div>
-    </div>
-  </router-link>
+    </router-link>
 </template>
 
 <script>
 export default {
-  props: {
-    info: {
-      type: Object,
-      default: () => {
-        return {};
-      },
+    props: {
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        }
     },
-  },
-  setup() {
-    const click = function () {
-      console.log("wyt6w");
-    };
+    setup() {
+        const click = function () {
+            console.log('wyt6w');
+        };
 
-    return { click };
-  },
-  methods: {
-    likeProduct() {
-      if (!this.info.liked) {
-        this.$http.get(`/collection/${this.info.id}/like`).then(() => {
-          this.$emit("update:info", {
-            ...this.info,
-            liked: true,
-            likes: this.info.likes + 1,
-          });
-          this.$toast.success("收藏成功");
-        });
-      } else {
-        this.$http.get(`/collection/${this.info.id}/unlike`).then(() => {
-          this.$emit("update:info", {
-            ...this.info,
-            liked: false,
-            likes: this.info.likes - 1,
-          });
-          this.$toast.success("取消收藏");
-        });
-      }
+        return { click };
     },
-  },
+    methods: {
+        likeProduct() {
+            if (!this.info.liked) {
+                this.$http.get(`/collection/${this.info.id}/like`).then(() => {
+                    this.$emit('update:info', {
+                        ...this.info,
+                        liked: true,
+                        likes: this.info.likes + 1
+                    });
+                    this.$toast.success('收藏成功');
+                });
+            } else {
+                this.$http.get(`/collection/${this.info.id}/unlike`).then(() => {
+                    this.$emit('update:info', {
+                        ...this.info,
+                        liked: false,
+                        likes: this.info.likes - 1
+                    });
+                    this.$toast.success('取消收藏');
+                });
+            }
+        }
+    }
 };
 </script>
 
 <style lang="less" scoped>
 .product {
-  width: calc(50vw - 24px);
-  margin: 8px;
-  background-color: @bg2;
-  display: inline-block;
-  border-radius: 8px;
-  overflow: hidden;
-
-  .van-image {
+    width: calc(50vw - 24px);
+    margin: 8px;
+    background-color: @bg2;
+    display: inline-block;
+    border-radius: 8px;
     overflow: hidden;
-    display: block;
-  }
-  .content {
-    padding: 10px;
 
-    .name {
-      font-size: 16px;
-      font-weight: bold;
-      color: #ffffff;
-      line-height: 24px;
+    .van-image {
+        overflow: hidden;
+        display: block;
     }
+    .content {
+        padding: 10px;
 
-    .price {
-      font-size: 24px;
-      font-family: OSP;
-      color: @prim;
-      line-height: 22px;
-      padding: 7px 0;
+        .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;
 
-      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;
-      span {
-        &:last-child {
-          color: #fff;
-          font-size: 14px;
+    .text {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .text1 {
+            font-weight: 400;
+            color: #939599;
+            line-height: 24px;
+            span {
+                &:last-child {
+                    color: #fff;
+                    font-size: 14px;
+                }
+            }
         }
-      }
     }
-  }
 }
 </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/asset.js

@@ -1,28 +1,28 @@
 export default {
-  data() {
-    return {
-      assetStatusOptions: [
-        {
-          label: "仅展示",
-          value: "NORMAL",
-        },
-        {
-          label: "出售中",
-          value: "ON_SALE",
-        },
-        {
-          label: "盲盒中",
-          value: "IN_BLIND_BOX",
-        },
-        {
-          label: "转让中",
-          value: "TRANSFERRING",
-        },
-        {
-          label: "已转让",
-          value: "TRANSFERRED",
-        },
-      ],
-    };
-  },
+    data() {
+        return {
+            assetStatusOptions: [
+                {
+                    label: '仅展示',
+                    value: 'NORMAL'
+                },
+                {
+                    label: '出售中',
+                    value: 'ON_SALE'
+                },
+                {
+                    label: '盲盒中',
+                    value: 'IN_BLIND_BOX'
+                },
+                {
+                    label: '转让中',
+                    value: 'TRANSFERRING'
+                },
+                {
+                    label: '已转让',
+                    value: 'TRANSFERRED'
+                }
+            ]
+        };
+    }
 };

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

@@ -1,113 +1,111 @@
 export default {
-  computed: {
-    isLogin() {
-      return !!this.$store.state.userInfo;
-    },
-    authStatus() {
-      let status = this.$store.state.userInfo?.authStatus;
+    computed: {
+        isLogin() {
+            return !!this.$store.state.userInfo;
+        },
+        authStatus() {
+            let status = this.$store.state.userInfo?.authStatus;
 
-      return this.AuthStatus.has(status)
-        ? this.AuthStatus.get(status)
-        : "未认证";
+            return this.AuthStatus.has(status) ? this.AuthStatus.get(status) : '未认证';
+        }
+    },
+    data() {
+        return {
+            AuthStatus: new Map([
+                ['NOT_AUTH', '未认证'],
+                ['PENDING', '认证中'],
+                ['SUCCESS', '已认证'],
+                ['FAIL', '认证失败']
+            ])
+        };
     },
-  },
-  data() {
-    return {
-      AuthStatus: new Map([
-        ["NOT_AUTH", "未认证"],
-        ["PENDING", "认证中"],
-        ["SUCCESS", "已认证"],
-        ["FAIL", "认证失败"],
-      ]),
-    };
-  },
-  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("更新成功");
+        },
+        updateFile(file) {
+            return this.$http
+                .post('/upload/base64', {
+                    base64: file.content
+                })
+                .then(res => {
+                    return Promise.resolve(res);
+                });
+        },
+        getImg(imgs = '') {
+            if (!imgs) {
+                imgs = '';
             }
-            return Promise.resolve();
-          })
-          .catch((e) => {
-            if (e) {
-              this.$toast(e.error);
+            if (!(imgs instanceof Array)) {
+                imgs = imgs.split(',');
             }
-            return Promise.reject();
-          });
-      }
-    },
-    updateFile(file) {
-      return this.$http
-        .post("/upload/base64", {
-          base64: file.content,
-        })
-        .then((res) => {
-          return Promise.resolve(res);
-        });
-    },
-    getImg(imgs = "") {
-      if (!imgs) {
-        imgs = "";
-      }
-      if (!(imgs instanceof Array)) {
-        imgs = imgs.split(",");
-      }
 
-      imgs = imgs.filter((item) => {
-        return !!item;
-      });
-      if (imgs.length > 0) {
-        return imgs[0];
-      } else {
-        return "";
-      }
-    },
-    checkLogin() {
-      if (this.isLogin) {
-        return Promise.resolve();
-      } else {
-        this.$dialog
-          .confirm({
-            title: "提示",
-            message: "用户未登录,是否立即登录",
-            confirmButtonText: "立即登录",
-          })
-          .then(() => {
-            this.$router.push("/login");
-          });
-        return Promise.reject();
-      }
-    },
-    getLabelName(val = "", list = []) {
-      let info = list.find((item) => {
-        return item.value === val;
-      });
+            imgs = imgs.filter(item => {
+                return !!item;
+            });
+            if (imgs.length > 0) {
+                return imgs[0];
+            } else {
+                return '';
+            }
+        },
+        checkLogin() {
+            if (this.isLogin) {
+                return Promise.resolve();
+            } else {
+                this.$dialog
+                    .confirm({
+                        title: '提示',
+                        message: '用户未登录,是否立即登录',
+                        confirmButtonText: '立即登录'
+                    })
+                    .then(() => {
+                        this.$router.push('/login');
+                    });
+                return Promise.reject();
+            }
+        },
+        getLabelName(val = '', list = []) {
+            let info = list.find(item => {
+                return item.value === val;
+            });
 
-      return info ? info.label : "";
-    },
-    scrollRefreash() {
-      if (this.bs.value) {
-        setTimeout(() => {
-          this.$toast.clear();
-          this.bs.value.refresh();
-        }, 50);
-      }
-    },
-  },
+            return info ? info.label : '';
+        },
+        scrollRefreash() {
+            if (this.bs.value) {
+                setTimeout(() => {
+                    this.$toast.clear();
+                    this.bs.value.refresh();
+                }, 50);
+            }
+        }
+    }
 };

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

@@ -1,16 +1,16 @@
 export default {
-  data() {
-    return {
-      statusOptions: [
-        { label: "未支付", value: "NOT_PAID" },
-        { label: "交易中", value: "PROCESSING" },
-        { label: "已完成", value: "FINISH" },
-        { label: "已取消", value: "CANCELLED" },
-      ],
-      payMethodOptions: [
-        { label: "微信", value: "WEIXIN" },
-        { label: "支付宝", value: "ALIPAY" },
-      ],
-    };
-  },
+    data() {
+        return {
+            statusOptions: [
+                { label: '未支付', value: 'NOT_PAID' },
+                { label: '交易中', value: 'PROCESSING' },
+                { label: '已完成', value: 'FINISH' },
+                { label: '已取消', value: 'CANCELLED' }
+            ],
+            payMethodOptions: [
+                { label: '微信', value: 'WEIXIN' },
+                { label: '支付宝', value: 'ALIPAY' }
+            ]
+        };
+    }
 };

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/mixins/product.js

@@ -1,24 +1,24 @@
 export default {
-  data() {
-    return {
-      typeOptions: [
-        {
-          label: "精选推荐",
-          value: "",
-        },
-        {
-          label: "原创系列",
-          value: "DEFAULT",
-        },
-        {
-          label: "数字盲盒",
-          value: "BLIND_BOX",
-        },
-        {
-          label: "拍卖系列",
-          value: "AUCTION",
-        },
-      ],
-    };
-  },
+    data() {
+        return {
+            typeOptions: [
+                {
+                    label: '精选推荐',
+                    value: ''
+                },
+                {
+                    label: '原创系列',
+                    value: 'DEFAULT'
+                },
+                {
+                    label: '数字盲盒',
+                    value: 'BLIND_BOX'
+                },
+                {
+                    label: '拍卖系列',
+                    value: 'AUCTION'
+                }
+            ]
+        };
+    }
 };

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,320 +1,320 @@
-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: '/creator',
+                name: 'creator',
+                component: () => import('../views/Creator.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/account/Login.vue'),
         meta: {
-          pageType: Page.Every,
-          title: "第九空间",
-        },
-      },
-      {
-        path: "/creator",
-        name: "creator",
-        component: () => import("../views/Creator.vue"),
+            pageType: Page.Login,
+            title: '登录'
+        }
+    },
+    {
+        path: '/register',
+        name: 'userRegister',
+        component: () => import('../views/account/Register.vue'),
         meta: {
-          pageType: Page.Every,
-          title: "第九空间",
-        },
-      },
-      {
-        path: "/store",
-        name: "store",
-        component: () => import("../views/Store.vue"),
+            pageType: Page.Login,
+            title: '注册'
+        }
+    },
+    {
+        path: '/forget',
+        name: 'userForget',
+        component: () => import('../views/account/Forget.vue'),
         meta: {
-          pageType: Page.Every,
-          title: "第九空间",
-        },
-      },
-      {
-        path: "/mine",
-        name: "mine",
-        component: () => import("../views/Mine.vue"),
+            pageType: Page.Login,
+            title: '忘记密码'
+        }
+    },
+    {
+        path: '/changePhone',
+        name: 'changePhone',
+        component: () => import('../views/account/ChangePhone.vue'),
         meta: {
-          pageType: Page.Every,
-          title: "第九空间",
-        },
-      },
-    ],
-  },
-  {
-    path: "/login",
-    name: "userLogin",
-    component: () => import("../views/account/Login.vue"),
-    meta: {
-      pageType: Page.Login,
-      title: "登录",
+            title: '修改密码'
+        }
+    },
+    {
+        path: '/verified',
+        name: 'userVerified',
+        component: () => import('../views/account/Verified.vue')
+    },
+    {
+        path: '/verifiedSuc',
+        name: 'verifiedSuc',
+        component: () => import('../views/account/VerifiedSuc.vue')
+    },
+    {
+        path: '/setting',
+        name: 'userSetting',
+        component: () => import('../views/account/Setting.vue')
     },
-  },
-  {
-    path: "/register",
-    name: "userRegister",
-    component: () => import("../views/account/Register.vue"),
-    meta: {
-      pageType: Page.Login,
-      title: "注册",
+    {
+        path: '/changeText',
+        name: 'userChangeText',
+        component: () => import('../views/account/ChangeText.vue')
     },
-  },
-  {
-    path: "/forget",
-    name: "userForget",
-    component: () => import("../views/account/Forget.vue"),
-    meta: {
-      pageType: Page.Login,
-      title: "忘记密码",
+    {
+        path: '/waiting',
+        name: 'userWaiting',
+        component: () => import('../views/account/Waiting.vue')
     },
-  },
-  {
-    path: "/changePhone",
-    name: "changePhone",
-    component: () => import("../views/account/ChangePhone.vue"),
-    meta: {
-      title: "修改密码",
+    {
+        path: '/security',
+        name: 'security',
+        component: () => import('../views/account/Security.vue')
     },
-  },
-  {
-    path: "/verified",
-    name: "userVerified",
-    component: () => import("../views/account/Verified.vue"),
-  },
-  {
-    path: "/verifiedSuc",
-    name: "verifiedSuc",
-    component: () => import("../views/account/VerifiedSuc.vue"),
-  },
-  {
-    path: "/setting",
-    name: "userSetting",
-    component: () => import("../views/account/Setting.vue"),
-  },
-  {
-    path: "/changeText",
-    name: "userChangeText",
-    component: () => import("../views/account/ChangeText.vue"),
-  },
-  {
-    path: "/waiting",
-    name: "userWaiting",
-    component: () => import("../views/account/Waiting.vue"),
-  },
-  {
-    path: "/security",
-    name: "security",
-    component: () => import("../views/account/Security.vue"),
-  },
-  {
-    path: "/tradingPassword",
-    name: "tradingPassword",
-    component: () => import("../views/account/TradingPassword.vue"),
-  },
-  {
-    path: "/productDetail",
-    name: "productDetail",
-    component: () => import("../views/product/Detail.vue"),
-    meta: {
-      pageType: Page.Every,
-      title: "第九空间",
+    {
+        path: '/tradingPassword',
+        name: 'tradingPassword',
+        component: () => import('../views/account/TradingPassword.vue')
     },
-  },
-  {
-    path: "/productList",
-    name: "productList",
-    component: () => import("../views/product/List.vue"),
-    meta: {
-      pageType: Page.Every,
-      title: "第九空间",
+    {
+        path: '/productDetail',
+        name: 'productDetail',
+        component: () => import('../views/product/Detail.vue'),
+        meta: {
+            pageType: Page.Every,
+            title: '第九空间'
+        }
     },
-  },
-  {
-    path: "/productSearch",
-    name: "productSearch",
-    component: () => import("../views/product/Search.vue"),
-    meta: {
-      pageType: Page.Every,
-      title: "第九空间",
+    {
+        path: '/productList',
+        name: 'productList',
+        component: () => import('../views/product/List.vue'),
+        meta: {
+            pageType: Page.Every,
+            title: '第九空间'
+        }
     },
-  },
-  {
-    path: "/creatorDetail",
-    name: "creatorDetail",
-    component: () => import("../views/creator/Detail.vue"),
-    meta: {
-      pageType: Page.Every,
-      title: "第九空间",
+    {
+        path: '/productSearch',
+        name: 'productSearch',
+        component: () => import('../views/product/Search.vue'),
+        meta: {
+            pageType: Page.Every,
+            title: '第九空间'
+        }
     },
-  },
-  {
-    path: "/creatorList",
-    name: "creatorList",
-    component: () => import("../views/creator/List.vue"),
-    meta: {
-      pageType: Page.Every,
-      title: "第九空间",
+    {
+        path: '/creatorDetail',
+        name: 'creatorDetail',
+        component: () => import('../views/creator/Detail.vue'),
+        meta: {
+            pageType: Page.Every,
+            title: '第九空间'
+        }
     },
-  },
-  {
-    path: "/creatorSearch",
-    name: "creatorSearch",
-    component: () => import("../views/creator/Search.vue"),
-    meta: {
-      pageType: Page.Every,
-      title: "第九空间",
+    {
+        path: '/creatorList',
+        name: 'creatorList',
+        component: () => import('../views/creator/List.vue'),
+        meta: {
+            pageType: Page.Every,
+            title: '第九空间'
+        }
     },
-  },
-  {
-    path: "/assetDetail",
-    name: "assetDetail",
-    component: () => import("../views/asset/Detail.vue"),
-    meta: {
-      pageType: Page.Every,
-      title: "第九空间",
+    {
+        path: '/creatorSearch',
+        name: 'creatorSearch',
+        component: () => import('../views/creator/Search.vue'),
+        meta: {
+            pageType: Page.Every,
+            title: '第九空间'
+        }
     },
-  },
-  {
-    path: "/submit",
-    name: "submit",
-    component: () => import("../views/Submit.vue"),
-    meta: {
-      title: "第九空间",
+    {
+        path: '/assetDetail',
+        name: 'assetDetail',
+        component: () => import('../views/asset/Detail.vue'),
+        meta: {
+            pageType: Page.Every,
+            title: '第九空间'
+        }
     },
-  },
-  {
-    path: "/creatorDetail",
-    name: "creatorDetail",
-    component: () => import("../views/creator/Detail.vue"),
-    meta: {
-      pageType: Page.Every,
-      title: "第九空间",
+    {
+        path: '/submit',
+        name: 'submit',
+        component: () => import('../views/Submit.vue'),
+        meta: {
+            title: '第九空间'
+        }
     },
-  },
-  {
-    path: "/orders",
-    name: "orders",
-    component: () => import("../views/order/Orders.vue"),
-    meta: {
-      title: "第九空间",
+    {
+        path: '/creatorDetail',
+        name: 'creatorDetail',
+        component: () => import('../views/creator/Detail.vue'),
+        meta: {
+            pageType: Page.Every,
+            title: '第九空间'
+        }
     },
-  },
-  {
-    path: "/orderDetail",
-    name: "orderDetail",
-    component: () => import("../views/order/Detail.vue"),
-    meta: {
-      title: "第九空间",
+    {
+        path: '/orders',
+        name: 'orders',
+        component: () => import('../views/order/Orders.vue'),
+        meta: {
+            title: '第九空间'
+        }
     },
-  },
-  {
-    path: "/mineFollows",
-    name: "mineFollows",
-    component: () => import("../views/user/Follows.vue"),
-    meta: {
-      title: "第九空间",
+    {
+        path: '/orderDetail',
+        name: 'orderDetail',
+        component: () => import('../views/order/Detail.vue'),
+        meta: {
+            title: '第九空间'
+        }
     },
-  },
-  {
-    path: "/mineFollowers",
-    name: "mineFollowers",
-    component: () => import("../views/user/Followers.vue"),
-    meta: {
-      title: "第九空间",
+    {
+        path: '/mineFollows',
+        name: 'mineFollows',
+        component: () => import('../views/user/Follows.vue'),
+        meta: {
+            title: '第九空间'
+        }
     },
-  },
-  {
-    path: "/mineLikes",
-    name: "mineLikes",
-    component: () => import("../views/user/Likes.vue"),
-    meta: {
-      title: "第九空间",
+    {
+        path: '/mineFollowers',
+        name: 'mineFollowers',
+        component: () => import('../views/user/Followers.vue'),
+        meta: {
+            title: '第九空间'
+        }
     },
-  },
-  {
-    path: "/mineWallet",
-    name: "mineWallet",
-    component: () => import("../views/user/Wallet.vue"),
-    meta: {
-      title: "第九空间",
+    {
+        path: '/mineLikes',
+        name: 'mineLikes',
+        component: () => import('../views/user/Likes.vue'),
+        meta: {
+            title: '第九空间'
+        }
     },
-  },
-  {
-    path: "/minePoint",
-    name: "minePoint",
-    component: () => import("../views/user/Point.vue"),
-    meta: {
-      title: "第九空间",
+    {
+        path: '/mineWallet',
+        name: 'mineWallet',
+        component: () => import('../views/user/Wallet.vue'),
+        meta: {
+            title: '第九空间'
+        }
     },
-  },
+    {
+        path: '/minePoint',
+        name: 'minePoint',
+        component: () => import('../views/user/Point.vue'),
+        meta: {
+            title: '第九空间'
+        }
+    }
 ];
 
 const router = createRouter({
-  history: createWebHistory(process.env.BASE_URL),
-  routes,
+    history: createWebHistory(process.env.BASE_URL),
+    routes
 });
 
 router.beforeEach((to, from, next) => {
-  if (/^\/http/.test(to.path)) {
-    let url = to.path.replace("/", "");
-    let params = [];
-    if (to.query) {
-      for (let key in to.query) {
-        // eslint-disable-next-line no-prototype-builtins
-        if (to.query.hasOwnProperty(key)) {
-          params.push(`${key}=${to.query[key]}`);
+    if (/^\/http/.test(to.path)) {
+        let url = to.path.replace('/', '');
+        let params = [];
+        if (to.query) {
+            for (let key in to.query) {
+                // eslint-disable-next-line no-prototype-builtins
+                if (to.query.hasOwnProperty(key)) {
+                    params.push(`${key}=${to.query[key]}`);
+                }
+            }
         }
-      }
-    }
-    if (params.length > 0) {
-      url += `?${params.join("&")}`;
+        if (params.length > 0) {
+            url += `?${params.join('&')}`;
+        }
+        window.open(url);
+        return;
     }
-    window.open(url);
-    return;
-  }
-  if (!store.state.userInfo && to.meta.pageType !== Page.Login) {
-    store
-      .dispatch("getUserInfo")
-      .then(() => {
-        next();
-      })
-      .catch(() => {
-        if (to.meta.pageType != Page.Every) {
-          Dialog.confirm({
-            title: "提示",
-            message: "用户未登录,是否立即登录",
-          })
+    if (!store.state.userInfo && to.meta.pageType !== Page.Login) {
+        store
+            .dispatch('getUserInfo')
             .then(() => {
-              next("/login");
+                next();
             })
             .catch(() => {
-              next(false);
+                if (to.meta.pageType != Page.Every) {
+                    Dialog.confirm({
+                        title: '提示',
+                        message: '用户未登录,是否立即登录'
+                    })
+                        .then(() => {
+                            next('/login');
+                        })
+                        .catch(() => {
+                            next(false);
+                        });
+                } else {
+                    next();
+                }
             });
-        } else {
-          next();
-        }
-      });
-  } 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/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,142 +1,137 @@
 <template>
-  <div class="discover">
-    <van-sticky ref="top" @change="change">
-      <div class="top">
-        <div class="top-btn">
-          <div class="btn" @click="$router.push('/discover')">收藏探索</div>
-          <div class="btn active">铸造者</div>
-        </div>
-        <div class="search" @click="$router.push('/creatorSearch')">
-          <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" @click="$router.push('/discover')">收藏探索</div>
+                    <div class="btn active">铸造者</div>
+                </div>
+                <div class="search" @click="$router.push('/creatorSearch')">
+                    <img src="../assets/svgs/search.svg" alt="" />
+                </div>
+            </div>
 
-      <van-tabs
-        v-model:active="sort"
-        @change="getList"
-        line-width="16"
-        line-height="2"
-      >
-        <van-tab title="全部" name="createdAt,desc"></van-tab>
-        <van-tab title="最新" name="createdAt,desc"></van-tab>
-        <van-tab title="人气" name="followers,desc"></van-tab>
-      </van-tabs>
-    </van-sticky>
+            <van-tabs v-model:active="sort" @change="getList" line-width="16" line-height="2">
+                <van-tab title="全部" name="createdAt,desc"></van-tab>
+                <van-tab title="最新" name="createdAt,desc"></van-tab>
+                <van-tab title="人气" name="followers,desc"></van-tab>
+            </van-tabs>
+        </van-sticky>
 
-    <template v-for="(item, index) in miners" :key="index">
-      <creator-info v-model:info="miners[index]"></creator-info>
-    </template>
-  </div>
+        <template v-for="(item, index) in miners" :key="index">
+            <creator-info v-model:info="miners[index]"></creator-info>
+        </template>
+    </div>
 </template>
 
 <script>
-import CreatorInfo from "../components/creator/CreatorInfo.vue";
+import CreatorInfo from '../components/creator/CreatorInfo.vue';
 export default {
-  components: { CreatorInfo },
-  inject: ["bs"],
-  data() {
-    return {
-      miners: [],
-      stiky: null,
-      sort: "createdAt,desc",
-    };
-  },
-  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];
-    });
-    this.getList();
-  },
-  methods: {
-    change(isFixed) {
-      if (isFixed) {
-        this.$nextTick(() => {
-          document.body.appendChild(this.stiky);
-        });
-      } else {
-        this.$refs.top.$el.appendChild(this.stiky);
-      }
+    components: { CreatorInfo },
+    inject: ['bs'],
+    data() {
+        return {
+            miners: [],
+            stiky: null,
+            sort: 'createdAt,desc'
+        };
     },
-    getList() {
-      this.$toast.loading({
-        message: "加载中...",
-        forbidClick: true,
-      });
-      this.$http
-        .post(
-          "/user/all",
-          {
-            page: 0,
-            query: { hasRole: "ROLE_MINTER" },
-            size: 20,
-            sort: this.sort,
-          },
-          { body: "json" }
-        )
-        .then((res) => {
-          this.miners = res.content;
-          this.scrollRefreash();
+    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];
         });
+        this.getList();
     },
-  },
+    methods: {
+        change(isFixed) {
+            if (isFixed) {
+                this.$nextTick(() => {
+                    document.body.appendChild(this.stiky);
+                });
+            } else {
+                this.$refs.top.$el.appendChild(this.stiky);
+            }
+        },
+        getList() {
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+            this.$http
+                .post(
+                    '/user/all',
+                    {
+                        page: 0,
+                        query: { hasRole: 'ROLE_MINTER' },
+                        size: 20,
+                        sort: this.sort
+                    },
+                    { body: 'json' }
+                )
+                .then(res => {
+                    this.miners = res.content;
+                    this.scrollRefreash();
+                });
+        }
+    }
 };
 </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;
-  padding-bottom: 100px;
-  min-height: 100vh;
+    background-color: @bg3;
+    padding-bottom: 100px;
+    min-height: 100vh;
 }
 
 /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/Discover.vue

@@ -1,316 +1,304 @@
 <template>
-  <div class="discover">
-    <van-sticky ref="top" @change="change">
-      <div class="top">
-        <div class="top-btn">
-          <div class="btn active">收藏探索</div>
-          <div class="btn" @click="$router.push('/creator')">铸造者</div>
-        </div>
-        <div class="search" @click="$router.push('/productSearch')">
-          <img src="../assets/svgs/search.svg" alt="" />
-        </div>
-      </div>
-    </van-sticky>
+    <div class="discover">
+        <van-sticky ref="top" @change="change">
+            <div class="top">
+                <div class="top-btn">
+                    <div class="btn active">收藏探索</div>
+                    <div class="btn" @click="$router.push('/creator')">铸造者</div>
+                </div>
+                <div class="search" @click="$router.push('/productSearch')">
+                    <img src="../assets/svgs/search.svg" alt="" />
+                </div>
+            </div>
+        </van-sticky>
 
-    <swiper pagination class="mySwiper" v-if="banners.length > 0">
-      <swiper-slide v-for="item in banners" :key="item.id">
-        <img :src="item.pic" />
-      </swiper-slide>
-    </swiper>
+        <swiper pagination class="mySwiper" v-if="banners.length > 0">
+            <swiper-slide v-for="item in banners" :key="item.id">
+                <img :src="item.pic" />
+            </swiper-slide>
+        </swiper>
 
-    <van-grid :border="false">
-      <van-grid-item text="精选推荐" :to="{ path: '/productList' }">
-        <template v-slot:icon>
-          <img
-            class="grid-img"
-            src="../assets/svgs/info_icon_jingxuanxilie.svg"
-          />
-        </template>
-      </van-grid-item>
-      <van-grid-item
-        text="原创系列"
-        :to="{
-          path: '/productList',
-          query: {
-            type: 'DEFAULT',
-          },
-        }"
-      >
-        <template v-slot:icon>
-          <img
-            class="grid-img"
-            src="../assets/svgs/info_icon_yuanchangxilie.svg"
-          />
-        </template>
-      </van-grid-item>
-      <van-grid-item
-        text="数字盲盒"
-        :to="{
-          path: '/productList',
-          query: {
-            type: 'BLIND_BOX',
-          },
-        }"
-      >
-        <template v-slot:icon>
-          <img
-            class="grid-img"
-            src="../assets/svgs/info_icon_manghexilie.svg"
-          />
-        </template>
-      </van-grid-item>
-      <van-grid-item
-        text="拍卖系列"
-        :to="{
-          path: '/productList',
-          query: {
-            type: 'AUCTION',
-          },
-        }"
-      >
-        <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="精选推荐" :to="{ path: '/productList' }">
+                <template v-slot:icon>
+                    <img class="grid-img" src="../assets/svgs/info_icon_jingxuanxilie.svg" />
+                </template>
+            </van-grid-item>
+            <van-grid-item
+                text="原创系列"
+                :to="{
+                    path: '/productList',
+                    query: {
+                        type: 'DEFAULT'
+                    }
+                }"
+            >
+                <template v-slot:icon>
+                    <img class="grid-img" src="../assets/svgs/info_icon_yuanchangxilie.svg" />
+                </template>
+            </van-grid-item>
+            <van-grid-item
+                text="数字盲盒"
+                :to="{
+                    path: '/productList',
+                    query: {
+                        type: 'BLIND_BOX'
+                    }
+                }"
+            >
+                <template v-slot:icon>
+                    <img class="grid-img" src="../assets/svgs/info_icon_manghexilie.svg" />
+                </template>
+            </van-grid-item>
+            <van-grid-item
+                text="拍卖系列"
+                :to="{
+                    path: '/productList',
+                    query: {
+                        type: 'AUCTION'
+                    }
+                }"
+            >
+                <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">
-      <template v-for="(item, index) in list" :key="item.id">
-        <product-info v-model:info="list[index]"></product-info>
-      </template>
+        <div class="title">本期推荐</div>
+        <div class="box-list">
+            <template v-for="(item, index) in list" :key="item.id">
+                <product-info v-model:info="list[index]"></product-info>
+            </template>
+        </div>
     </div>
-  </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 ProductInfo from '../components/product/productInfo.vue';
 
 export default {
-  name: "discover",
-  inject: ["bs"],
-  components: {
-    Swiper,
-    SwiperSlide,
-    ProductInfo,
-  },
-  data() {
-    return {
-      stiky: null,
-      banners: [],
-      list: [],
-    };
-  },
-  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];
-    });
-    this.getInit();
-  },
-  methods: {
-    getInit() {
-      this.$toast.loading({
-        message: "加载中...",
-        forbidClick: true,
-      });
-      Promise.all([this.getBanner(), this.getList()]).then(() => {});
+    name: 'discover',
+    inject: ['bs'],
+    components: {
+        Swiper,
+        SwiperSlide,
+        ProductInfo
     },
-    getBanner() {
-      this.$http
-        .post(
-          "/banner/all",
-          {
-            query: {
-              type: "DISCOVER",
-            },
-            sort: "createdAt,desc",
-          },
-          { body: "json" }
-        )
-        .then((res) => {
-          this.banners = res.content;
-        });
+    data() {
+        return {
+            stiky: null,
+            banners: [],
+            list: []
+        };
     },
-    getList() {
-      this.$http
-        .post(
-          "/collection/all",
-          {
-            page: 0,
-            size: 20,
-            query: {
-              onShelf: true,
-              del: false,
-            },
-            sort: "createdAt,desc",
-          },
-          { body: "json" }
-        )
-        .then((res) => {
-          this.list = res.content;
-          this.scrollRefreash();
-        });
+    beforeUnmount() {
+        if (this.stiky.parentNode.nodeName == 'BODY') {
+            this.$nextTick(() => {
+                document.body.removeChild(this.stiky);
+            });
+        }
     },
-    change(isFixed) {
-      if (isFixed) {
+    mounted() {
         this.$nextTick(() => {
-          document.body.appendChild(this.stiky);
+            this.stiky = this.$refs.top.$el.childNodes[0];
         });
-      } else {
-        this.$refs.top.$el.appendChild(this.stiky);
-      }
+        this.getInit();
     },
-  },
+    methods: {
+        getInit() {
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+            Promise.all([this.getBanner(), this.getList()]).then(() => {});
+        },
+        getBanner() {
+            this.$http
+                .post(
+                    '/banner/all',
+                    {
+                        query: {
+                            type: 'DISCOVER'
+                        },
+                        sort: 'createdAt,desc'
+                    },
+                    { body: 'json' }
+                )
+                .then(res => {
+                    this.banners = res.content;
+                });
+        },
+        getList() {
+            this.$http
+                .post(
+                    '/collection/all',
+                    {
+                        page: 0,
+                        size: 20,
+                        query: {
+                            onShelf: true,
+                            del: false
+                        },
+                        sort: 'createdAt,desc'
+                    },
+                    { body: 'json' }
+                )
+                .then(res => {
+                    this.list = res.content;
+                    this.scrollRefreash();
+                });
+        },
+        change(isFixed) {
+            if (isFixed) {
+                this.$nextTick(() => {
+                    document.body.appendChild(this.stiky);
+                });
+            } else {
+                this.$refs.top.$el.appendChild(this.stiky);
+            }
+        }
+    }
 };
 </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;
-  padding-bottom: 100px;
+    background-color: @bg3;
+    padding-bottom: 100px;
 }
 
 /deep/ .mySwiper {
-  width: calc(100vw - 32px);
-  height: calc(41vw - 13px);
-  padding-top: 12px;
+    width: calc(100vw - 32px);
+    height: calc(41vw - 13px);
+    padding-top: 12px;
 
-  .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 0 16px;
+    padding: 14px 0 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/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,436 +1,392 @@
 <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" @click="$router.push('/mineFollows')">
-            <div class="text1">{{ userInfo.follows }}</div>
-            <div class="text2">关注</div>
-          </div>
-          <div class="collect" @click="$router.push('/mineFollowers')">
-            <div class="text1">{{ userInfo.followers }}</div>
-            <div class="text2">粉丝</div>
-          </div>
-          <div class="flex1"></div>
-          <van-button
-            plain
-            color="#939599"
-            size="mini"
-            :icon="require('../assets/svgs/renzheng_icon.svg')"
-            round
-            @click="$router.push('/verifiedSuc')"
-            v-if="authStatus === '已认证'"
-            class="verid"
-          >
-            {{ authStatus }}
-          </van-button>
-          <van-button
-            plain
-            color="#939599"
-            size="mini"
-            :icon="require('../assets/svgs/person.svg')"
-            round
-            v-else
-            @click="goAuth"
-          >
-            {{ authStatus }}
-          </van-button>
-          <van-button
-            plain
-            @click="$router.push('/setting')"
-            color="#939599"
-            size="mini"
-            round
-            >编辑资料</van-button
-          >
+                <div class="btns">
+                    <div class="collect" @click="$router.push('/mineFollows')">
+                        <div class="text1">{{ userInfo.follows }}</div>
+                        <div class="text2">关注</div>
+                    </div>
+                    <div class="collect" @click="$router.push('/mineFollowers')">
+                        <div class="text1">{{ userInfo.followers }}</div>
+                        <div class="text2">粉丝</div>
+                    </div>
+                    <div class="flex1"></div>
+                    <van-button
+                        plain
+                        color="#939599"
+                        size="mini"
+                        :icon="require('../assets/svgs/renzheng_icon.svg')"
+                        round
+                        @click="$router.push('/verifiedSuc')"
+                        v-if="authStatus === '已认证'"
+                        class="verid"
+                    >
+                        {{ authStatus }}
+                    </van-button>
+                    <van-button
+                        plain
+                        color="#939599"
+                        size="mini"
+                        :icon="require('../assets/svgs/person.svg')"
+                        round
+                        v-else
+                        @click="goAuth"
+                    >
+                        {{ authStatus }}
+                    </van-button>
+                    <van-button plain @click="$router.push('/setting')" color="#939599" 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="查看全部"
-      :to="{ path: '/orders' }"
-    />
-    <van-grid column-num="3" :border="false" :gutter="10">
-      <van-grid-item text="全部订单" :border="false" :to="{ path: '/orders' }">
-        <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">
+            <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="查看全部" :to="{ path: '/orders' }" />
+        <van-grid column-num="3" :border="false" :gutter="10">
+            <van-grid-item text="全部订单" :border="false" :to="{ path: '/orders' }">
+                <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"
-        :to="{
-          path: '/orders',
-          query: {
-            type: 'PROCESSING',
-          },
-        }"
-      >
-        <template v-slot:icon>
-          <img
-            class="grid-img"
-            src="../assets/svgs/info_icon_dingdan_daishouhuo.svg"
-          />
-        </template>
-      </van-grid-item>
-      <van-grid-item
-        text="已完成"
-        :to="{
-          path: '/orders',
-          query: {
-            type: 'FINISH',
-          },
-        }"
-        :border="false"
-      >
-        <template v-slot:icon>
-          <img class="grid-img" src="../assets/svgs/info_icon_yiwancheng.svg" />
-        </template>
-      </van-grid-item>
-    </van-grid>
+            <van-grid-item
+                text="交易中"
+                :border="false"
+                :to="{
+                    path: '/orders',
+                    query: {
+                        type: 'PROCESSING'
+                    }
+                }"
+            >
+                <template v-slot:icon>
+                    <img class="grid-img" src="../assets/svgs/info_icon_dingdan_daishouhuo.svg" />
+                </template>
+            </van-grid-item>
+            <van-grid-item
+                text="已完成"
+                :to="{
+                    path: '/orders',
+                    query: {
+                        type: 'FINISH'
+                    }
+                }"
+                :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 :to="{ path: '/mineWallet' }">
-        <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 :to="{ path: '/mineWallet' }">
+                <template #icon>
+                    <van-icon :name="require('../assets/svgs/icon-qiabao.svg')" class="search-icon" />
+                </template>
+            </van-cell>
 
-      <van-cell title="积分" is-link :to="{ path: '/minePoint' }">
-        <template #icon>
-          <van-icon
-            :name="require('../assets/svgs/icon-jifen.svg')"
-            class="search-icon"
-          />
-        </template>
-      </van-cell>
-      <van-cell title="我赞过的" :to="{ path: '/mineLikes' }" 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 :to="{ path: '/security' }">
-        <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 :to="{ path: '/minePoint' }">
+                <template #icon>
+                    <van-icon :name="require('../assets/svgs/icon-jifen.svg')" class="search-icon" />
+                </template>
+            </van-cell>
+            <van-cell title="我赞过的" :to="{ path: '/mineLikes' }" 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 :to="{ path: '/security' }">
+                <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"]),
-  },
-  mounted() {
-    this.$store.dispatch("getUserInfo");
-  },
-  methods: {
-    copy() {
-      this.$copyText(this.userInfo.id).then(
-        (e) => {
-          this.$toast.success("复制成功");
-          console.log(e);
-        },
-        (e) => {
-          this.$toast("复制失败");
-          console.log(e);
-        }
-      );
+    computed: {
+        ...mapState(['userInfo'])
     },
-    goAuth() {
-      if (this.authStatus === "认证中" || this.authStatus === "认证失败") {
-        this.$router.push("/waiting");
-      } else if (this.authStatus === "未认证") {
-        this.$router.push("/verified");
-      }
+    mounted() {
+        this.$store.dispatch('getUserInfo');
     },
-  },
+    methods: {
+        copy() {
+            this.$copyText(this.userInfo.id).then(
+                e => {
+                    this.$toast.success('复制成功');
+                    console.log(e);
+                },
+                e => {
+                    this.$toast('复制失败');
+                    console.log(e);
+                }
+            );
+        },
+        goAuth() {
+            if (this.authStatus === '认证中' || this.authStatus === '认证失败') {
+                this.$router.push('/waiting');
+            } else if (this.authStatus === '未认证') {
+                this.$router.push('/verified');
+            }
+        }
+    }
 };
 </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;
-      }
-      color: #fff !important;
-    }
-    .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;
+            }
+        }
 
-    .verid {
-      color: #d8d8d8;
-      line-height: 24px;
-      background: linear-gradient(45deg, #fdfb60 0%, #ff8f3e 100%);
-      background-clip: text;
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
+        /deep/.van-button {
+            width: 90px;
+            .van-icon__image {
+                display: block;
+                width: 18px;
+                height: 18px;
+            }
+            color: #fff !important;
+        }
+        .van-button + .van-button {
+            margin-left: 10px;
+        }
+
+        .verid {
+            color: #d8d8d8;
+            line-height: 24px;
+            background: linear-gradient(45deg, #fdfb60 0%, #ff8f3e 100%);
+            background-clip: text;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
     }
-  }
 }
 .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,44 +1,34 @@
 <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
+    <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">
+                </div>
+                <!-- <div class="search">
           <img src="../assets/svgs/search.svg" alt="" />
         </div> -->
-      </div>
+            </div>
 
-      <van-tabs
-        v-model:active="type"
-        line-width="16"
-        line-height="2"
-        :ellipsis="false"
-        @change="getList"
-      >
-        <van-tab
-          :title="item.label"
-          :name="item.type"
-          :key="index"
-          v-for="(item, index) in typeOptions"
-        ></van-tab>
-      </van-tabs>
+            <van-tabs v-model:active="type" line-width="16" line-height="2" :ellipsis="false" @change="getList">
+                <van-tab
+                    :title="item.label"
+                    :name="item.type"
+                    :key="index"
+                    v-for="(item, index) in typeOptions"
+                ></van-tab>
+            </van-tabs>
 
-      <!-- <van-button
+            <!-- <van-button
         color="#272828"
         round
         size="mini"
@@ -49,283 +39,283 @@
       >
         全部
       </van-button> -->
-    </van-sticky>
+        </van-sticky>
 
-    <div class="box-list">
-      <template v-for="(item, index) in list" :key="index">
-        <asset-info :info="item"></asset-info>
-      </template>
+        <div class="box-list">
+            <template v-for="(item, index) in list" :key="index">
+                <asset-info :info="item"></asset-info>
+            </template>
 
-      <van-empty v-if="empty" description="您还没有任何藏品哦~" />
+            <van-empty v-if="empty" description="您还没有任何藏品哦~" />
+        </div>
+        <van-action-sheet
+            ref="action"
+            v-model:show="showSelect"
+            description="选择筛选方式"
+            :actions="actions"
+            cancel-text="取消"
+            close-on-click-action
+            @open="open"
+        />
     </div>
-    <van-action-sheet
-      ref="action"
-      v-model:show="showSelect"
-      description="选择筛选方式"
-      :actions="actions"
-      cancel-text="取消"
-      close-on-click-action
-      @open="open"
-    />
-  </div>
 </template>
 
 <script>
-import AssetInfo from "../components/asset/assetInfo.vue";
-import asset from "../mixins/asset";
+import AssetInfo from '../components/asset/assetInfo.vue';
+import asset from '../mixins/asset';
 
 export default {
-  name: "discover",
-  mixins: [asset],
-  inject: ["bs"],
-  components: {
-    AssetInfo,
-  },
-  data() {
-    return {
-      active: "explore",
-      stiky: null,
-      type: "DEFAULT",
-      empty: false,
-      list: [],
-      typeOptions: [
-        {
-          label: "藏品类目",
-          type: "DEFAULT",
-        },
-        {
-          label: "盲盒类目",
-          type: "BLIND_BOX",
-        },
-      ],
-      showSelect: false,
-      actions: [{ name: "选项一" }, { name: "选项二" }, { name: "选项三" }],
-      action: null,
-    };
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.stiky = this.$refs.top.$el.childNodes[0];
-    });
-    this.checkLogin()
-      .then(() => {
-        this.getList();
-      })
-      .catch(() => {
-        this.empty = true;
-      });
-  },
-  beforeUnmount() {
-    if (this.stiky.parentNode.nodeName == "BODY") {
-      this.$nextTick(() => {
-        document.body.removeChild(this.stiky);
-      });
-    }
-    if (this.action) {
-      document.body.removeChild(this.action);
-    }
-  },
-  methods: {
-    open() {
-      this.$nextTick(() => {
-        this.action = document.getElementsByClassName("van-action-sheet")[0];
-        console.log(this.action);
-        document.body.appendChild(this.action);
-      });
+    name: 'discover',
+    mixins: [asset],
+    inject: ['bs'],
+    components: {
+        AssetInfo
     },
-    getList() {
-      if (!this.isLogin) {
-        return;
-      }
-      this.$toast.loading({
-        message: "加载中...",
-        forbidClick: true,
-      });
-      this.empty = false;
-      this.$http
-        .post(
-          "/asset/all",
-          {
-            page: 0,
-            size: 20,
-            query: {
-              userId: this.$store.state.userInfo.id,
-              type: this.type,
-            },
-            sort: "createdAt,desc",
-          },
-          { body: "json" }
-        )
-        .then((res) => {
-          this.list = res.content;
-          this.empty = res.empty;
-          this.scrollRefreash();
-        });
+    data() {
+        return {
+            active: 'explore',
+            stiky: null,
+            type: 'DEFAULT',
+            empty: false,
+            list: [],
+            typeOptions: [
+                {
+                    label: '藏品类目',
+                    type: 'DEFAULT'
+                },
+                {
+                    label: '盲盒类目',
+                    type: 'BLIND_BOX'
+                }
+            ],
+            showSelect: false,
+            actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }],
+            action: null
+        };
     },
-    change(isFixed) {
-      if (isFixed) {
+    mounted() {
         this.$nextTick(() => {
-          document.body.appendChild(this.stiky);
+            this.stiky = this.$refs.top.$el.childNodes[0];
         });
-      } else {
-        this.$refs.top.$el.appendChild(this.stiky);
-      }
+        this.checkLogin()
+            .then(() => {
+                this.getList();
+            })
+            .catch(() => {
+                this.empty = true;
+            });
     },
-    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);
+            });
+        }
+        if (this.action) {
+            document.body.removeChild(this.action);
+        }
     },
-  },
+    methods: {
+        open() {
+            this.$nextTick(() => {
+                this.action = document.getElementsByClassName('van-action-sheet')[0];
+                console.log(this.action);
+                document.body.appendChild(this.action);
+            });
+        },
+        getList() {
+            if (!this.isLogin) {
+                return;
+            }
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+            this.empty = false;
+            this.$http
+                .post(
+                    '/asset/all',
+                    {
+                        page: 0,
+                        size: 20,
+                        query: {
+                            userId: this.$store.state.userInfo.id,
+                            type: this.type
+                        },
+                        sort: 'createdAt,desc'
+                    },
+                    { body: 'json' }
+                )
+                .then(res => {
+                    this.list = res.content;
+                    this.empty = res.empty;
+                    this.scrollRefreash();
+                });
+        },
+        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;
+        }
     }
-  }
 }
 .select {
-  position: absolute;
-  right: 16px;
-  bottom: 9px;
-  color: #939599 !important;
-  min-width: 96px;
+    position: absolute;
+    right: 16px;
+    bottom: 9px;
+    color: #939599 !important;
+    min-width: 96px;
 }
 /deep/.van-sticky {
-  position: relative;
+    position: relative;
 }
 
 .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: 8px;
-  min-height: 100vh;
+    // display: flex;
+    // flex-wrap: wrap;
+    padding: 8px;
+    min-height: 100vh;
 }
 
 .discover {
-  padding-bottom: 50px;
+    padding-bottom: 50px;
 }
 
 /deep/.van-tab {
-  color: #fff;
-  flex-grow: 0;
-  padding: 0 0 0 0;
-  margin-right: 30px;
+    color: #fff;
+    flex-grow: 0;
+    padding: 0 0 0 0;
+    margin-right: 30px;
 
-  &.van-tab--active {
-    color: @prim;
-  }
+    &.van-tab--active {
+        color: @prim;
+    }
 }
 /deep/.van-tabs {
-  .van-tabs__nav {
-    padding-left: 16px;
-  }
+    .van-tabs__nav {
+        padding-left: 16px;
+    }
 }
 
 /deep/ .van-tabs__line {
-  bottom: 20px;
+    bottom: 20px;
 }
 
 /deep/.van-action-sheet__description::after {
-  border-bottom: 1px solid #f2f2f2;
+    border-bottom: 1px solid #f2f2f2;
 }
 </style>

src/main/nine-space/src/views/account/ChangePhone.vue

@@ -1,265 +1,252 @@
 <template>
-  <div class="login">
-    <div class="tabs">
-      <div class="tab active">{{ step ? "绑定新号码" : "修改手机号" }}</div>
-      <div class="text">修改手机号即同时修改登录账户名称</div>
+    <div class="login">
+        <div class="tabs">
+            <div class="tab active">{{ step ? '绑定新号码' : '修改手机号' }}</div>
+            <div class="text">修改手机号即同时修改登录账户名称</div>
+        </div>
+
+        <van-form v-if="step === 0" @submit="next">
+            <van-cell class="phone" :title="phone" label="修改手机号需先验证当前手机号" />
+            <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="sendBefPhone"
+                        class="sub-code"
+                        size="small"
+                        plain
+                        type="primary"
+                        :disabled="isSend"
+                    >
+                        {{ isSend ? `已发送(${sendNum})S` : '发送验证码' }}
+                    </van-button>
+                </template>
+            </van-field>
+
+            <div class="button">
+                <van-button
+                    round
+                    block
+                    native-type="submit"
+                    color="linear-gradient(to right, #FDFB60, #FF8F3E)"
+                    class="sure"
+                    >下一步</van-button
+                >
+            </div>
+        </van-form>
+
+        <van-form v-else ref="form" @submit="submit">
+            <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
+                        type="primary"
+                        :disabled="isSend"
+                    >
+                        {{ isSend ? `已发送(${sendNum})S` : '发送验证码' }}
+                    </van-button>
+                </template>
+            </van-field>
+
+            <div class="button">
+                <van-button
+                    round
+                    block
+                    native-type="submit"
+                    color="linear-gradient(to right, #FDFB60, #FF8F3E)"
+                    class="sure"
+                    >确定修改</van-button
+                >
+            </div>
+        </van-form>
     </div>
-
-    <van-form v-if="step === 0" @submit="next">
-      <van-cell
-        class="phone"
-        :title="phone"
-        label="修改手机号需先验证当前手机号"
-      />
-      <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="sendBefPhone"
-            class="sub-code"
-            size="small"
-            plain
-            type="primary"
-            :disabled="isSend"
-          >
-            {{ isSend ? `已发送(${sendNum})S` : "发送验证码" }}
-          </van-button>
-        </template>
-      </van-field>
-
-      <div class="button">
-        <van-button
-          round
-          block
-          native-type="submit"
-          color="linear-gradient(to right, #FDFB60, #FF8F3E)"
-          class="sure"
-          >下一步</van-button
-        >
-      </div>
-    </van-form>
-
-    <van-form v-else ref="form" @submit="submit">
-      <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
-            type="primary"
-            :disabled="isSend"
-          >
-            {{ isSend ? `已发送(${sendNum})S` : "发送验证码" }}
-          </van-button>
-        </template>
-      </van-field>
-
-      <div class="button">
-        <van-button
-          round
-          block
-          native-type="submit"
-          color="linear-gradient(to right, #FDFB60, #FF8F3E)"
-          class="sure"
-          >确定修改</van-button
-        >
-      </div>
-    </van-form>
-  </div>
 </template>
 
 <script>
-import { mapState } from "vuex";
-import phone from "../../mixins/phone";
+import { mapState } from 'vuex';
+import phone from '../../mixins/phone';
 export default {
-  mixins: [phone],
-  data() {
-    return {
-      step: 0,
-      form: {
-        phone: "",
-        code: "",
-      },
-    };
-  },
-  computed: {
-    ...mapState(["userInfo"]),
-    phone() {
-      let phone = this.userInfo.phone || "";
-      return phone.substr(0, 3) + "****" + phone.substr(7, 6);
+    mixins: [phone],
+    data() {
+        return {
+            step: 0,
+            form: {
+                phone: '',
+                code: ''
+            }
+        };
     },
-  },
-  methods: {
-    sendBefPhone() {
-      this.sendMsg(this.userInfo.phone);
+    computed: {
+        ...mapState(['userInfo']),
+        phone() {
+            let phone = this.userInfo.phone || '';
+            return phone.substr(0, 3) + '****' + phone.substr(7, 6);
+        }
     },
-    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("/user/bindPhone?phone=" + this.form.phone);
-        })
-        .then(() => {
-          this.$toast.success("修改成功");
-          setTimeout(() => {
-            this.$router.back();
-          }, 1500);
-        })
-        .catch((e) => {
-          if (e) {
-            this.$toast(e.error);
-          }
-        });
-    },
-    next() {
-      this.verifyMsg(this.userInfo.phone, this.form.code).then((res) => {
-        this.setTime(0);
-        this.step = 1;
-      });
-    },
-  },
+    methods: {
+        sendBefPhone() {
+            this.sendMsg(this.userInfo.phone);
+        },
+        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('/user/bindPhone?phone=' + this.form.phone);
+                })
+                .then(() => {
+                    this.$toast.success('修改成功');
+                    setTimeout(() => {
+                        this.$router.back();
+                    }, 1500);
+                })
+                .catch(e => {
+                    if (e) {
+                        this.$toast(e.error);
+                    }
+                });
+        },
+        next() {
+            this.verifyMsg(this.userInfo.phone, this.form.code).then(res => {
+                this.setTime(0);
+                this.step = 1;
+            });
+        }
+    }
 };
 </script>
 
 <style lang="less" scoped>
 .login {
-  padding: 40px 16px 100px;
+    padding: 40px 16px 100px;
 }
 
 .van-form {
-  padding: 0 30px;
+    padding: 0 30px;
 }
 
 .tabs {
-  .tab {
-    font-size: 18px;
-    color: #c8c9cc;
-    line-height: 25px;
-
-    &.active {
-      font-size: 24px;
-      font-weight: bold;
-      color: #ffffff;
-      line-height: 33px;
+    .tab {
+        font-size: 18px;
+        color: #c8c9cc;
+        line-height: 25px;
+
+        &.active {
+            font-size: 24px;
+            font-weight: bold;
+            color: #ffffff;
+            line-height: 33px;
+        }
     }
-  }
 
-  .text {
-    font-size: 12px;
-    color: #939599;
-    line-height: 22px;
-    margin-top: 4px;
-  }
+    .text {
+        font-size: 12px;
+        color: #939599;
+        line-height: 22px;
+        margin-top: 4px;
+    }
 }
 
 .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: 120px;
+    margin-top: 120px;
 
-  .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;
 }
 
 /deep/.phone {
-  .van-cell__title > span {
-    font-size: 20px;
-    font-weight: bold;
-  }
+    .van-cell__title > span {
+        font-size: 20px;
+        font-weight: bold;
+    }
 
-  .van-cell__label {
-    color: #939599;
-  }
+    .van-cell__label {
+        color: #939599;
+    }
 }
 </style>

src/main/nine-space/src/views/account/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/account/Forget.vue

@@ -1,112 +1,100 @@
 <template>
-  <div class="login">
-    <div class="tabs">
-      <div class="tab active">设置新密码</div>
-    </div>
-
-    <van-form ref="form" @submit="submit">
-      <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
+    <div class="login">
+        <div class="tabs">
+            <div class="tab active">设置新密码</div>
+        </div>
+
+        <van-form ref="form" @submit="submit">
+            <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
@@ -114,121 +102,119 @@
           @click="$router.replace('/login')"
           >想起密码，立即登陆</van-button
         > -->
-      </div>
-    </van-form>
-  </div>
+            </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.$http
-        .post(
-          `/user/changePassword?password=${this.form.password}&code=${this.form.code}`
-        )
-        .then((res) => {
-          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.$http
+                .post(`/user/changePassword?password=${this.form.password}&code=${this.form.code}`)
+                .then(res => {
+                    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/account/Login.vue

@@ -1,285 +1,251 @@
 <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>
-
-    <van-form @submit="submit" ref="form" v-if="active === 'phone'">
-      <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: '请填写密码' }]"
-      >
-        <template #left-icon>
-          <img
-            :src="require('../../assets/svgs/login_icon_mima.svg')"
-            class="icon"
-          />
-        </template>
-      </van-field>
-
-      <div class="button">
-        <!-- <van-button plain class="forget" @click="$router.replace('/forget')">
+    <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" v-if="active === 'phone'">
+            <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: '请填写密码' }]"
+            >
+                <template #left-icon>
+                    <img :src="require('../../assets/svgs/login_icon_mima.svg')" class="icon" />
+                </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>
-
-    <van-form @submit="submit" ref="code" v-else>
-      <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="code"
-        name="验证码"
-        placeholder="请输入验证码"
-        v-model="form.code"
-        :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
+                    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>
+
+        <van-form @submit="submit" ref="code" v-else>
+            <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="code"
+                name="验证码"
+                placeholder="请输入验证码"
+                v-model="form.code"
+                :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.code.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.code.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;
-
-    &.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;
-  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/account/Register.vue

@@ -1,243 +1,223 @@
 <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((res) => {
-          localStorage.setItem("nineToken", res);
-          return this.$store.dispatch("getUserInfo");
-        })
-        .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(res => {
+                    localStorage.setItem('nineToken', res);
+                    return this.$store.dispatch('getUserInfo');
+                })
+                .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/account/Security.vue

@@ -1,61 +1,55 @@
 <template>
-  <div class="page">
-    <div class="title">账户与安全</div>
-    <van-cell-group>
-      <van-cell title="修改登录密码" :to="{ path: '/forget' }" is-link />
-      <van-cell
-        title="修改支付密码"
-        :to="{ path: '/tradingPassword' }"
-        is-link
-      />
-      <van-cell title="修改手机号" :to="{ path: '/changePhone' }" is-link />
-    </van-cell-group>
-    <div class="logout">
-      <van-button type="primary" @click="logout" plain block round
-        >退出登录</van-button
-      >
+    <div class="page">
+        <div class="title">账户与安全</div>
+        <van-cell-group>
+            <van-cell title="修改登录密码" :to="{ path: '/forget' }" is-link />
+            <van-cell title="修改支付密码" :to="{ path: '/tradingPassword' }" is-link />
+            <van-cell title="修改手机号" :to="{ path: '/changePhone' }" is-link />
+        </van-cell-group>
+        <div class="logout">
+            <van-button type="primary" @click="logout" plain block round>退出登录</van-button>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
 export default {
-  methods: {
-    logout() {
-      this.$dialog
-        .confirm({
-          title: "提示",
-          message: "确认要退出登录吗?",
-        })
-        .then(() => {
-          localStorage.removeItem("nineToken");
-          this.$router.go(-1);
-        });
-    },
-  },
+    methods: {
+        logout() {
+            this.$dialog
+                .confirm({
+                    title: '提示',
+                    message: '确认要退出登录吗?'
+                })
+                .then(() => {
+                    localStorage.removeItem('nineToken');
+                    this.$router.go(-1);
+                });
+        }
+    }
 };
 </script>
 
 <style lang="less" scoped>
 .title {
-  background-color: #181818;
-  padding: 10px 16px;
-  font-size: 20px;
-  font-weight: bold;
-  color: #ffffff;
-  line-height: 30px;
+    background-color: #181818;
+    padding: 10px 16px;
+    font-size: 20px;
+    font-weight: bold;
+    color: #ffffff;
+    line-height: 30px;
 }
 .page {
-  background-color: #0f0f0f;
+    background-color: #0f0f0f;
 }
 
 .van-cell-group {
-  background-color: #181818;
+    background-color: #181818;
 }
 .van-cell {
-  padding: 23px 16px;
+    padding: 23px 16px;
 }
 .logout {
-  padding: 50px 30px 50px;
+    padding: 50px 30px 50px;
 }
 </style>

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

@@ -1,162 +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 0 100px;
+    padding: 10px 0 100px;
 }
 
 .tabs {
-  font-size: 20px;
-  font-weight: bold;
-  color: #ffffff;
-  line-height: 30px;
-  padding: 0 16px;
+    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/account/TradingPassword.vue

@@ -1,297 +1,277 @@
 <template>
-  <div class="login">
-    <div class="tabs">
-      <div class="tab active">修改交易密码</div>
-      <div class="text">修改验证当前账号的手机号码才可以修改</div>
-    </div>
+    <div class="login">
+        <div class="tabs">
+            <div class="tab active">修改交易密码</div>
+            <div class="text">修改验证当前账号的手机号码才可以修改</div>
+        </div>
 
-    <van-form v-if="step === 0" @submit="next">
-      <van-cell
-        class="phone"
-        :title="phone"
-        label="修改交易密码需先验证当前手机号"
-      />
-      <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="sendBefPhone"
-            class="sub-code"
-            size="small"
-            plain
-            type="primary"
-            :disabled="isSend"
-          >
-            {{ isSend ? `已发送(${sendNum})S` : "发送验证码" }}
-          </van-button>
-        </template>
-      </van-field>
+        <van-form v-if="step === 0" @submit="next">
+            <van-cell class="phone" :title="phone" label="修改交易密码需先验证当前手机号" />
+            <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="sendBefPhone"
+                        class="sub-code"
+                        size="small"
+                        plain
+                        type="primary"
+                        :disabled="isSend"
+                    >
+                        {{ isSend ? `已发送(${sendNum})S` : '发送验证码' }}
+                    </van-button>
+                </template>
+            </van-field>
 
-      <div class="button">
-        <van-button
-          round
-          block
-          native-type="submit"
-          color="linear-gradient(to right, #FDFB60, #FF8F3E)"
-          class="sure"
-          >下一步</van-button
-        >
-      </div>
-    </van-form>
+            <div class="button">
+                <van-button
+                    round
+                    block
+                    native-type="submit"
+                    color="linear-gradient(to right, #FDFB60, #FF8F3E)"
+                    class="sure"
+                    >下一步</van-button
+                >
+            </div>
+        </van-form>
 
-    <van-form v-else ref="form" @submit="submit">
-      <div class="input">
-        <div class="text1">请输入交易密码</div>
-        <van-password-input
-          :value="password"
-          :focused="showKeyboard"
-          @focus="showKeyboard = true"
-        />
-        <!-- 数字键盘 -->
-        <van-number-keyboard
-          v-model="password"
-          :show="showKeyboard"
-          @blur="showKeyboard = false"
-          maxlength="6"
-        />
-      </div>
+        <van-form v-else ref="form" @submit="submit">
+            <div class="input">
+                <div class="text1">请输入交易密码</div>
+                <van-password-input :value="password" :focused="showKeyboard" @focus="showKeyboard = true" />
+                <!-- 数字键盘 -->
+                <van-number-keyboard
+                    v-model="password"
+                    :show="showKeyboard"
+                    @blur="showKeyboard = false"
+                    maxlength="6"
+                />
+            </div>
 
-      <div class="input">
-        <div class="text1">请再次输入交易密码</div>
-        <van-password-input
-          :value="password2"
-          :focused="showKeyboard2"
-          @focus="showKeyboard2 = true"
-        />
-        <!-- 数字键盘 -->
-        <van-number-keyboard
-          v-model="password2"
-          :show="showKeyboard2"
-          @blur="showKeyboard2 = false"
-          maxlength="6"
-        />
-      </div>
+            <div class="input">
+                <div class="text1">请再次输入交易密码</div>
+                <van-password-input :value="password2" :focused="showKeyboard2" @focus="showKeyboard2 = true" />
+                <!-- 数字键盘 -->
+                <van-number-keyboard
+                    v-model="password2"
+                    :show="showKeyboard2"
+                    @blur="showKeyboard2 = false"
+                    maxlength="6"
+                />
+            </div>
 
-      <div class="button">
-        <van-button
-          round
-          block
-          native-type="submit"
-          color="linear-gradient(to right, #FDFB60, #FF8F3E)"
-          class="sure"
-          >确定修改</van-button
-        >
-      </div>
-    </van-form>
-  </div>
+            <div class="button">
+                <van-button
+                    round
+                    block
+                    native-type="submit"
+                    color="linear-gradient(to right, #FDFB60, #FF8F3E)"
+                    class="sure"
+                    >确定修改</van-button
+                >
+            </div>
+        </van-form>
+    </div>
 </template>
 
 <script>
-import { mapState } from "vuex";
-import phone from "../../mixins/phone";
-import { ref } from "vue";
+import { mapState } from 'vuex';
+import phone from '../../mixins/phone';
+import { ref } from 'vue';
 export default {
-  mixins: [phone],
-  data() {
-    return {
-      step: 0,
-      form: {
-        phone: "",
-        code: "",
-      },
-      password: "",
-      password2: "",
-      showKeyboard: false,
-      showKeyboard2: false,
-    };
-  },
-  computed: {
-    ...mapState(["userInfo"]),
-    phone() {
-      let phone = this.userInfo.phone || "";
-      return phone.substr(0, 3) + "****" + phone.substr(7, 6);
-    },
-  },
-  methods: {
-    sendBefPhone() {
-      this.sendMsg(this.userInfo.phone);
-    },
-    sendPhone() {
-      this.$refs.form.validate("手机号码").then(() => {
-        this.sendMsg(this.form.phone);
-      });
-    },
-    submit() {
-      if (!this.password || !this.password2) {
-        this.$toast("密码不能为空");
-        return;
-      }
-      if (this.password2 !== this.password) {
-        this.$toast("两次密码不一致");
-        return;
-      }
-      this.$toast.loading({
-        message: "加载中...",
-        forbidClick: true,
-      });
-      this.$http
-        .post(
-          "/user/setTradeCode?code=" +
-            this.form.code +
-            "&tradeCode=" +
-            this.password
-        )
-        .then(() => {
-          this.$toast.success("设置成功");
-          setTimeout(() => {
-            this.$router.back();
-          }, 1500);
-        })
-        .catch((e) => {
-          if (e) {
-            this.$toast(e.error);
-          }
-        });
+    mixins: [phone],
+    data() {
+        return {
+            step: 0,
+            form: {
+                phone: '',
+                code: ''
+            },
+            password: '',
+            password2: '',
+            showKeyboard: false,
+            showKeyboard2: false
+        };
     },
-    next() {
-      this.step = 1;
+    computed: {
+        ...mapState(['userInfo']),
+        phone() {
+            let phone = this.userInfo.phone || '';
+            return phone.substr(0, 3) + '****' + phone.substr(7, 6);
+        }
     },
-  },
+    methods: {
+        sendBefPhone() {
+            this.sendMsg(this.userInfo.phone);
+        },
+        sendPhone() {
+            this.$refs.form.validate('手机号码').then(() => {
+                this.sendMsg(this.form.phone);
+            });
+        },
+        submit() {
+            if (!this.password || !this.password2) {
+                this.$toast('密码不能为空');
+                return;
+            }
+            if (this.password2 !== this.password) {
+                this.$toast('两次密码不一致');
+                return;
+            }
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+            this.$http
+                .post('/user/setTradeCode?code=' + this.form.code + '&tradeCode=' + this.password)
+                .then(() => {
+                    this.$toast.success('设置成功');
+                    setTimeout(() => {
+                        this.$router.back();
+                    }, 1500);
+                })
+                .catch(e => {
+                    if (e) {
+                        this.$toast(e.error);
+                    }
+                });
+        },
+        next() {
+            this.step = 1;
+        }
+    }
 };
 </script>
 
 <style lang="less" scoped>
 .login {
-  padding: 40px 16px 100px;
+    padding: 40px 16px 100px;
 }
 
 .van-form {
-  padding: 0 30px;
+    padding: 0 30px;
 }
 
 .tabs {
-  .tab {
-    font-size: 18px;
-    color: #c8c9cc;
-    line-height: 25px;
+    .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;
+        }
     }
-  }
 
-  .text {
-    font-size: 12px;
-    color: #939599;
-    line-height: 22px;
-    margin-top: 4px;
-  }
+    .text {
+        font-size: 12px;
+        color: #939599;
+        line-height: 22px;
+        margin-top: 4px;
+    }
 }
 
 .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: 120px;
+    margin-top: 120px;
 
-  .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;
 }
 
 /deep/.phone {
-  .van-cell__title > span {
-    font-size: 20px;
-    font-weight: bold;
-  }
+    .van-cell__title > span {
+        font-size: 20px;
+        font-weight: bold;
+    }
 
-  .van-cell__label {
-    color: #939599;
-  }
+    .van-cell__label {
+        color: #939599;
+    }
 }
 
 /deep/ .van-password-input {
-  margin: 0 0;
-  .van-password-input__security {
-    border: 1px solid #939599;
-    height: 42px;
-    border-radius: 2px;
-    li {
-      background-color: transparent;
-      &:not(:last-child) {
-        border-right: 1px solid #939599;
-      }
-      i {
-        background-color: #fff;
-      }
+    margin: 0 0;
+    .van-password-input__security {
+        border: 1px solid #939599;
+        height: 42px;
+        border-radius: 2px;
+        li {
+            background-color: transparent;
+            &:not(:last-child) {
+                border-right: 1px solid #939599;
+            }
+            i {
+                background-color: #fff;
+            }
+        }
     }
-  }
 }
 /deep/.van-number-keyboard__body {
-  background-color: #4a4a4a;
-  .van-key {
-    background-color: @bg;
-    &:active {
-      background-color: @bg3;
+    background-color: #4a4a4a;
+    .van-key {
+        background-color: @bg;
+        &:active {
+            background-color: @bg3;
+        }
     }
-  }
 }
 
 .input {
-  margin-top: 20px;
-  .text1 {
-    font-size: 14px;
-    color: #ffffff;
-    line-height: 24px;
-    margin-bottom: 6px;
-  }
+    margin-top: 20px;
+    .text1 {
+        font-size: 14px;
+        color: #ffffff;
+        line-height: 24px;
+        margin-bottom: 6px;
+    }
 }
 </style>

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

@@ -1,321 +1,320 @@
 <template>
-  <div class="login">
-    <div class="tabs">
-      <div class="text1">实名认证</div>
-      <div class="text2">
-        <span>账户实名认证后不能修改，</span>
-        <span>请使用本人身份信息完成认证</span>
-      </div>
-    </div>
+    <div class="login">
+        <div class="tabs">
+            <div class="text1">实名认证</div>
+            <div class="text2">
+                <span>账户实名认证后不能修改，</span>
+                <span>请使用本人身份信息完成认证</span>
+            </div>
+        </div>
 
-    <van-form @submit="submit" @failed="failed" ref="form">
-      <van-field
-        label="姓名"
-        name="姓名"
-        placeholder="请输入您真实姓名"
-        v-model="form.realName"
-        :rules="[{ required: true, message: '请输入您真实姓名' }]"
-      >
-      </van-field>
+        <van-form @submit="submit" @failed="failed" ref="form">
+            <van-field
+                label="姓名"
+                name="姓名"
+                placeholder="请输入您真实姓名"
+                v-model="form.realName"
+                :rules="[{ required: true, message: '请输入您真实姓名' }]"
+            >
+            </van-field>
 
-      <van-field
-        type="tel"
-        label="手机号码"
-        name="手机号码"
-        placeholder="请输入您的手机号码"
-        v-model="form.phone"
-        :maxlength="11"
-        :rules="[
-          { required: true, message: '请输入您的手机号码' },
-          {
-            pattern: phonePattern,
-            message: '手机号码格式错误',
-          },
-        ]"
-      >
-      </van-field>
+            <van-field
+                type="tel"
+                label="手机号码"
+                name="手机号码"
+                placeholder="请输入您的手机号码"
+                v-model="form.phone"
+                :maxlength="11"
+                :rules="[
+                    { required: true, message: '请输入您的手机号码' },
+                    {
+                        pattern: phonePattern,
+                        message: '手机号码格式错误'
+                    }
+                ]"
+            >
+            </van-field>
 
-      <van-field
-        label="电子邮箱"
-        name="电子邮箱"
-        placeholder="请输入电子邮箱"
-        v-model="form.email"
-        :rules="[
-          { required: true, message: '请输入电子邮箱' },
-          {
-            pattern: emailPattern,
-            message: '电子邮箱格式错误',
-          },
-        ]"
-      >
-      </van-field>
+            <van-field
+                label="电子邮箱"
+                name="电子邮箱"
+                placeholder="请输入电子邮箱"
+                v-model="form.email"
+                :rules="[
+                    { required: true, message: '请输入电子邮箱' },
+                    {
+                        pattern: emailPattern,
+                        message: '电子邮箱格式错误'
+                    }
+                ]"
+            >
+            </van-field>
 
-      <van-field
-        type="digit"
-        label="身份证号"
-        name="身份证号"
-        placeholder="请输入身份证号"
-        v-model="form.idNo"
-        :rules="[{ required: true, message: '请输入身份证号' }]"
-      >
-      </van-field>
+            <van-field
+                type="digit"
+                label="身份证号"
+                name="身份证号"
+                placeholder="请输入身份证号"
+                v-model="form.idNo"
+                :rules="[{ required: true, message: '请输入身份证号' }]"
+            >
+            </van-field>
 
-      <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>
+            <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" ref="btn">
-        <van-button
-          round
-          block
-          @click="submit"
-          color="linear-gradient(to right, #FDFB60, #FF8F3E)"
-          class="sure"
-        >
-          提交审核
-        </van-button>
-      </div>
-    </van-form>
-  </div>
+            <div class="button" ref="btn">
+                <van-button
+                    round
+                    block
+                    @click="submit"
+                    color="linear-gradient(to right, #FDFB60, #FF8F3E)"
+                    class="sure"
+                >
+                    提交审核
+                </van-button>
+            </div>
+        </van-form>
+    </div>
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapState } from 'vuex';
 export default {
-  computed: {
-    ...mapState(["userInfo"]),
-  },
-  inject: ["bs"],
-  data() {
-    return {
-      active: "phone",
-      emailPattern:
-        /^([a-zA-Z0-9]+[_|_|\-|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,6}$/,
-      form: {
-        realName: "",
-        phone: "",
-        email: "",
-        idNo: "",
-        idFront: "",
-        idBack: "",
-        status: "",
-      },
-      btn: null,
-    };
-  },
-  mounted() {
-    this.btn = this.$refs.btn;
-    document.body.appendChild(this.btn);
-  },
-  beforeUnmount() {
-    if (this.btn) {
-      document.body.removeChild(this.btn);
-    }
-  },
-  methods: {
-    submit() {
-      this.$refs.form
-        .validate()
-        .then(() => {
-          let form = { ...this.form };
-          form.userId = this.userInfo.id;
-          form.status = "PENDING";
-          this.$http
-            .post("/identityAuth/apply", {
-              ...form,
-            })
-            .then(() => {
-              this.$router.replace("/Waiting");
-            });
-        })
-        .catch(() => {
-          this.bs.value.refresh();
-        });
+    computed: {
+        ...mapState(['userInfo'])
     },
-    afterRead(file, e) {
-      this.updateFile(file).then((img) => {
-        this.form[e.name] = img;
-      });
+    inject: ['bs'],
+    data() {
+        return {
+            active: 'phone',
+            emailPattern: /^([a-zA-Z0-9]+[_|_|\-|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,6}$/,
+            form: {
+                realName: '',
+                phone: '',
+                email: '',
+                idNo: '',
+                idFront: '',
+                idBack: '',
+                status: ''
+            },
+            btn: null
+        };
+    },
+    mounted() {
+        this.btn = this.$refs.btn;
+        document.body.appendChild(this.btn);
     },
-    failed() {
-      console.log("验证失败");
+    beforeUnmount() {
+        if (this.btn) {
+            document.body.removeChild(this.btn);
+        }
     },
-  },
+    methods: {
+        submit() {
+            this.$refs.form
+                .validate()
+                .then(() => {
+                    let form = { ...this.form };
+                    form.userId = this.userInfo.id;
+                    form.status = 'PENDING';
+                    this.$http
+                        .post('/identityAuth/apply', {
+                            ...form
+                        })
+                        .then(() => {
+                            this.$router.replace('/Waiting');
+                        });
+                })
+                .catch(() => {
+                    this.bs.value.refresh();
+                });
+        },
+        afterRead(file, e) {
+            this.updateFile(file).then(img => {
+                this.form[e.name] = img;
+            });
+        },
+        failed() {
+            console.log('验证失败');
+        }
+    }
 };
 </script>
 
 <style lang="less" scoped>
 .login {
-  padding: 10px 16px 150px;
+    padding: 10px 16px 150px;
 }
 
 .tabs {
-  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;
-      }
+    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;
+    border-bottom-color: #202122;
 }
 
 .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-field__body {
-    height: 70px;
-    align-items: center;
-  }
+    .van-field__body {
+        height: 70px;
+        align-items: center;
+    }
 
-  .van-field__label {
-    font-size: 14px;
-    font-weight: bold;
-    color: #ffffff;
-    line-height: 24px;
-    margin-top: 25px;
-  }
+    .van-field__label {
+        font-size: 14px;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 24px;
+        margin-top: 25px;
+    }
 }
 .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;
 }
 
 .img {
-  display: flex;
-  padding: 20px 0 10px;
+    display: flex;
+    padding: 20px 0 10px;
 
-  .img-label {
-    font-size: 14px;
-    font-weight: bold;
-    color: #ffffff;
-    line-height: 20px;
-    margin: 5px 12px 5px 0;
-    min-width: 86px;
-  }
+    .img-label {
+        font-size: 14px;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+        margin: 5px 12px 5px 0;
+        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;
+    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;
+    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;
+    &.van-cell {
+        margin-top: 20px;
+        .van-field__body {
+            height: 160px;
+        }
+        .van-field__label {
+            margin-top: 5px;
+        }
     }
-  }
 }
 </style>

src/main/nine-space/src/views/account/VerifiedSuc.vue

@@ -1,109 +1,109 @@
 <template>
-  <div class="page">
-    <div class="tabs">
-      <div class="text1">实名认证已完成</div>
-      <div class="text2">
-        <span>账户实名认证后不能修改</span>
-      </div>
+    <div class="page">
+        <div class="tabs">
+            <div class="text1">实名认证已完成</div>
+            <div class="text2">
+                <span>账户实名认证后不能修改</span>
+            </div>
+        </div>
+        <div class="info">
+            <div class="text1">姓名</div>
+            <div class="text2">{{ form.realName }}</div>
+        </div>
+        <div class="info">
+            <div class="text1">手机号码</div>
+            <div class="text2">{{ form.phone }}</div>
+        </div>
+        <div class="info">
+            <div class="text1">电子邮箱</div>
+            <div class="text2">{{ form.email }}</div>
+        </div>
+        <div class="info">
+            <div class="text1">身份证号</div>
+            <div class="text2">{{ form.idNo }}</div>
+        </div>
+        <div class="info">
+            <div class="text1">身份证照片</div>
+            <div class="text2">已上传</div>
+        </div>
     </div>
-    <div class="info">
-      <div class="text1">姓名</div>
-      <div class="text2">{{ form.realName }}</div>
-    </div>
-    <div class="info">
-      <div class="text1">手机号码</div>
-      <div class="text2">{{ form.phone }}</div>
-    </div>
-    <div class="info">
-      <div class="text1">电子邮箱</div>
-      <div class="text2">{{ form.email }}</div>
-    </div>
-    <div class="info">
-      <div class="text1">身份证号</div>
-      <div class="text2">{{ form.idNo }}</div>
-    </div>
-    <div class="info">
-      <div class="text1">身份证照片</div>
-      <div class="text2">已上传</div>
-    </div>
-  </div>
 </template>
 
 <script>
 export default {
-  data() {
-    return {
-      form: {},
-    };
-  },
-  mounted() {
-    this.$http
-      .post(
-        "/identityAuth/all",
-        {
-          query: {
-            userId: this.$store.state.userInfo.id,
-          },
-        },
-        { body: "json" }
-      )
-      .then((res) => {
-        if (!res.empty) {
-          this.form = res.content[0];
-        }
-      });
-  },
+    data() {
+        return {
+            form: {}
+        };
+    },
+    mounted() {
+        this.$http
+            .post(
+                '/identityAuth/all',
+                {
+                    query: {
+                        userId: this.$store.state.userInfo.id
+                    }
+                },
+                { body: 'json' }
+            )
+            .then(res => {
+                if (!res.empty) {
+                    this.form = res.content[0];
+                }
+            });
+    }
 };
 </script>
 <style lang="less" scoped>
 .page {
-  padding: 10px 16px 150px;
+    padding: 10px 16px 150px;
 }
 .tabs {
-  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;
-  }
+    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;
+    }
 }
 
 .info {
-  display: flex;
-  align-items: center;
-  height: 70px;
-  position: relative;
-  .text1 {
-    font-size: 14px;
-    font-weight: bold;
-    color: #939599;
-    line-height: 24px;
-    min-width: 90px;
-  }
+    display: flex;
+    align-items: center;
+    height: 70px;
+    position: relative;
+    .text1 {
+        font-size: 14px;
+        font-weight: bold;
+        color: #939599;
+        line-height: 24px;
+        min-width: 90px;
+    }
 
-  .text2 {
-    font-size: 16px;
-    color: #939599;
-    line-height: 24px;
-  }
+    .text2 {
+        font-size: 16px;
+        color: #939599;
+        line-height: 24px;
+    }
 
-  &:not(:last-child) {
-    &::after {
-      content: "";
-      position: absolute;
-      left: 90px;
-      right: 0px;
-      bottom: 0;
-      height: 1px;
-      background-color: #202122;
+    &:not(:last-child) {
+        &::after {
+            content: '';
+            position: absolute;
+            left: 90px;
+            right: 0px;
+            bottom: 0;
+            height: 1px;
+            background-color: #202122;
+        }
     }
-  }
 }
 </style>

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

@@ -1,76 +1,76 @@
 <template>
-  <div class="page">
-    <img class="img" :src="statusInfo.img" alt="" />
-    <div class="title">{{ statusInfo.title }}</div>
-    <div class="sub">
-      {{ statusInfo.sub }}
-    </div>
+    <div class="page">
+        <img class="img" :src="statusInfo.img" alt="" />
+        <div class="title">{{ statusInfo.title }}</div>
+        <div class="sub">
+            {{ statusInfo.sub }}
+        </div>
 
-    <div class="btn" v-if="authStatus === '认证失败'">
-      <van-button type="primary" block plain round> 重新申请 </van-button>
+        <div class="btn" v-if="authStatus === '认证失败'">
+            <van-button type="primary" block plain round> 重新申请 </van-button>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapState } from 'vuex';
 export default {
-  computed: {
-    ...mapState(["userInfo"]),
-    statusInfo() {
-      if (this.userInfo.authStatus) {
-        return { ...this.info }[this.userInfo.authStatus];
-      } else {
-        return {};
-      }
+    computed: {
+        ...mapState(['userInfo']),
+        statusInfo() {
+            if (this.userInfo.authStatus) {
+                return { ...this.info }[this.userInfo.authStatus];
+            } else {
+                return {};
+            }
+        }
+    },
+    data() {
+        return {
+            info: {
+                PENDING: {
+                    img: require('../../assets/svgs/shenqing_shenhezhong.svg'),
+                    title: '资料审核中',
+                    sub: '平台将于3日内完成资料审核，并将审核结果以短信的形式通知您'
+                },
+                FAIL: {
+                    img: require('../../assets/svgs/shenqing_weitongguo.svg'),
+                    title: '资料审核失败',
+                    sub: '很遗憾，您的资料审核失败，请检查您填写的资料是否正确以及上传照片是否清晰'
+                }
+            }
+        };
     },
-  },
-  data() {
-    return {
-      info: {
-        PENDING: {
-          img: require("../../assets/svgs/shenqing_shenhezhong.svg"),
-          title: "资料审核中",
-          sub: "平台将于3日内完成资料审核，并将审核结果以短信的形式通知您",
-        },
-        FAIL: {
-          img: require("../../assets/svgs/shenqing_weitongguo.svg"),
-          title: "资料审核失败",
-          sub: "很遗憾，您的资料审核失败，请检查您填写的资料是否正确以及上传照片是否清晰",
-        },
-      },
-    };
-  },
-  mounted() {
-    this.$store.dispatch("getUserInfo");
-  },
+    mounted() {
+        this.$store.dispatch('getUserInfo');
+    }
 };
 </script>
 
 <style lang="less" scoped>
 .page {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 50px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 50px;
 
-  .title {
-    font-size: 20px;
-    color: #ffffff;
-    line-height: 30px;
-    margin-top: 38px;
-  }
-  .sub {
-    font-size: 14px;
-    color: #939599;
-    line-height: 24px;
-    margin-top: 16px;
-    text-align: center;
-  }
+    .title {
+        font-size: 20px;
+        color: #ffffff;
+        line-height: 30px;
+        margin-top: 38px;
+    }
+    .sub {
+        font-size: 14px;
+        color: #939599;
+        line-height: 24px;
+        margin-top: 16px;
+        text-align: center;
+    }
 
-  .btn {
-    margin-top: 60px;
-    width: 100%;
-  }
+    .btn {
+        margin-top: 60px;
+        width: 100%;
+    }
 }
 </style>

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

@@ -1,33 +1,31 @@
 <template>
-  <div class="detail">
-    <swiper pagination class="mySwiper" v-if="banners.length > 0">
-      <swiper-slide v-for="(item, index) in banners" :key="index">
-        <img :src="item" />
-      </swiper-slide>
-    </swiper>
-
-    <div class="info">
-      <div class="price-line">
-        <template v-if="info.status === 'ON_SALE'">
-          <div class="price">
-            <i class="font_family icon-icon_jiage"></i>{{ info.price }}
-          </div>
-          <div class="sub" v-if="info.royalties">
-            含 <span>{{ info.royalties }}%</span> 版税
-          </div>
-        </template>
-
-        <div class="status" v-else-if="info.status == 'NORMAL'">
-          {{ info.publicShow ? "仅展示" : "未展示" }}
-        </div>
-        <div class="status" v-else>
-          {{ getLabelName(info.status, assetStatusOptions) }}
-        </div>
-      </div>
-      <div class="title">{{ info.name }}</div>
-      <div class="info-bottom">
-        <span class="text1" v-if="info.number"> 编号 {{ info.number }} </span>
-        <!-- <van-button
+    <div class="detail">
+        <swiper pagination class="mySwiper" v-if="banners.length > 0">
+            <swiper-slide v-for="(item, index) in banners" :key="index">
+                <img :src="item" />
+            </swiper-slide>
+        </swiper>
+
+        <div class="info">
+            <div class="price-line">
+                <template v-if="info.status === 'ON_SALE'">
+                    <div class="price"><i class="font_family icon-icon_jiage"></i>{{ info.price }}</div>
+                    <div class="sub" v-if="info.royalties">
+                        含 <span>{{ info.royalties }}%</span> 版税
+                    </div>
+                </template>
+
+                <div class="status" v-else-if="info.status == 'NORMAL'">
+                    {{ info.publicShow ? '仅展示' : '未展示' }}
+                </div>
+                <div class="status" v-else>
+                    {{ getLabelName(info.status, assetStatusOptions) }}
+                </div>
+            </div>
+            <div class="title">{{ info.name }}</div>
+            <div class="info-bottom">
+                <span class="text1" v-if="info.number"> 编号 {{ info.number }} </span>
+                <!-- <van-button
           type="primary"
           plain
           size="mini"
@@ -36,442 +34,434 @@
         <like-button :isLike="info.liked" @click="likeProduct">
           {{ info.likes }}
         </like-button> -->
-      </div>
-    </div>
+            </div>
+        </div>
 
-    <driver />
-    <div class="user">
-      <van-cell
-        is-link
-        class="creator"
-        :to="{
-          path: '/creatorDetail',
-          query: {
-            id: info.minterId,
-          },
-        }"
-      >
-        <template #icon>
-          <van-image
-            width="40"
-            height="40"
-            class="user-img"
-            :src="info.minterAvatar"
-            fit="cover"
-            radius="100"
-          />
-        </template>
-        <template #title>
-          <div class="text1 van-ellipsis">{{ info.minter }}</div>
-          <div class="text2">铸造者</div>
-        </template>
-      </van-cell>
-      <van-cell
-        is-link
-        class="creator"
-        :to="{
-          path: '/creatorDetail',
-          query: {
-            id: info.minterId,
-          },
-        }"
-      >
-        <template #icon>
-          <van-image
-            width="40"
-            height="40"
-            class="user-img"
-            :src="info.minterAvatar"
-            fit="cover"
-            radius="100"
-          />
-        </template>
-        <template #title>
-          <div class="text1 van-ellipsis">{{ info.minter }}</div>
-          <div class="text2">持有者</div>
-        </template>
-      </van-cell>
-    </div>
-    <driver />
-
-    <div class="goods">
-      <template v-if="properties.length > 0">
-        <div class="page-title">商品特性</div>
-        <div class="specific-list">
-          <div
-            class="specific-item"
-            v-for="(item, index) in properties"
-            :key="index"
-          >
-            <div class="text1">{{ item.name }}</div>
-            <div class="text2">{{ item.value }}</div>
-          </div>
+        <driver />
+        <div class="user">
+            <van-cell
+                is-link
+                class="creator"
+                :to="{
+                    path: '/creatorDetail',
+                    query: {
+                        id: info.minterId
+                    }
+                }"
+            >
+                <template #icon>
+                    <van-image
+                        width="40"
+                        height="40"
+                        class="user-img"
+                        :src="info.minterAvatar"
+                        fit="cover"
+                        radius="100"
+                    />
+                </template>
+                <template #title>
+                    <div class="text1 van-ellipsis">{{ info.minter }}</div>
+                    <div class="text2">铸造者</div>
+                </template>
+            </van-cell>
+            <van-cell
+                is-link
+                class="creator"
+                :to="{
+                    path: '/creatorDetail',
+                    query: {
+                        id: info.minterId
+                    }
+                }"
+            >
+                <template #icon>
+                    <van-image
+                        width="40"
+                        height="40"
+                        class="user-img"
+                        :src="info.minterAvatar"
+                        fit="cover"
+                        radius="100"
+                    />
+                </template>
+                <template #title>
+                    <div class="text1 van-ellipsis">{{ info.minter }}</div>
+                    <div class="text2">持有者</div>
+                </template>
+            </van-cell>
+        </div>
+        <driver />
+
+        <div class="goods">
+            <template v-if="properties.length > 0">
+                <div class="page-title">商品特性</div>
+                <div class="specific-list">
+                    <div class="specific-item" v-for="(item, index) in properties" :key="index">
+                        <div class="text1">{{ item.name }}</div>
+                        <div class="text2">{{ item.value }}</div>
+                    </div>
+                </div>
+            </template>
+            <div class="page-title">链上信息</div>
+            <div class="page-text">
+                Hash地址：{{ info.txHash }}<br />
+                区块高度： {{ info.blockNumber }}<br />
+                令牌ID： {{ info.tokenId }}
+            </div>
+            <template v-if="info.detail">
+                <div class="page-title">作品描述</div>
+                <div class="page-text" v-html="info.detail"></div>
+            </template>
         </div>
-      </template>
-      <div class="page-title">链上信息</div>
-      <div class="page-text">
-        Hash地址：{{ info.txHash }}<br />
-        区块高度： {{ info.blockNumber }}<br />
-        令牌ID： {{ info.tokenId }}
-      </div>
-      <template v-if="info.detail">
-        <div class="page-title">作品描述</div>
-        <div class="page-text" v-html="info.detail"></div>
-      </template>
-    </div>
 
-    <div class="btn van-safe-area-bottom" ref="btn" v-if="isBuy">
-      <div class="btns">
-        <van-button type="primary" block round @click="buy"
-          >立即购买</van-button
-        >
-      </div>
-    </div>
+        <div class="btn van-safe-area-bottom" ref="btn" v-if="isBuy">
+            <div class="btns">
+                <van-button type="primary" block round @click="buy">立即购买</van-button>
+            </div>
+        </div>
 
-    <!-- <driver /> -->
+        <!-- <driver /> -->
 
-    <!-- <van-collapse v-model="activeName" accordion>
+        <!-- <van-collapse v-model="activeName" accordion>
       <van-collapse-item title="交易记录" name="1">
         <van-cell title="单元格" value="内容"> </van-cell>
       </van-collapse-item>
     </van-collapse> -->
 
-    <driver />
+        <driver />
 
-    <post :info="info" pageUrl="assetDetail" />
-  </div>
+        <post :info="info" pageUrl="assetDetail" />
+    </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 Post from "../../components/Post.vue";
-import asset from "../../mixins/asset";
+import SwiperCore, { Pagination } from 'swiper';
+import Post from '../../components/Post.vue';
+import asset from '../../mixins/asset';
 
 // install Swiper modules
 SwiperCore.use([Pagination]);
 
 export default {
-  components: {
-    Swiper,
-    SwiperSlide,
-    Post,
-  },
-  inject: ["bs"],
-  mixins: [asset],
-  data() {
-    return {
-      activeName: "1",
-      info: {},
-      liked: false,
-      btn: null,
-    };
-  },
-  computed: {
-    banners() {
-      return this.info.pic || [];
-    },
-    properties() {
-      return this.info.properties || [];
+    components: {
+        Swiper,
+        SwiperSlide,
+        Post
     },
-    isBuy() {
-      return this.info.stock && this.info.onShelf;
+    inject: ['bs'],
+    mixins: [asset],
+    data() {
+        return {
+            activeName: '1',
+            info: {},
+            liked: false,
+            btn: null
+        };
     },
-  },
-  mounted() {
-    this.getProduct();
-  },
-  beforeUnmount() {
-    if (this.btn) {
-      document.body.removeChild(this.btn);
-    }
-  },
-  methods: {
-    getProduct() {
-      this.$toast.loading({
-        message: "加载中...",
-        forbidClick: true,
-      });
-      this.$http.get("/asset/get/" + this.$route.query.id).then((res) => {
-        this.info = res;
-        this.$nextTick(() => {
-          if (this.isBuy) {
-            this.btn = this.$refs.btn;
-          }
-          document.body.appendChild(this.$refs.btn);
-        });
-
-        setTimeout(() => {
-          this.$toast.clear();
-          this.bs.value.refresh();
-        }, 100);
-      });
+    computed: {
+        banners() {
+            return this.info.pic || [];
+        },
+        properties() {
+            return this.info.properties || [];
+        },
+        isBuy() {
+            return this.info.stock && this.info.onShelf;
+        }
     },
-    likeProduct() {
-      if (!this.info.liked) {
-        this.$http.get(`/collection/${this.info.id}/like`).then(() => {
-          this.getProduct();
-          this.$toast.success("收藏成功");
-        });
-      } else {
-        this.$http.get(`/collection/${this.info.id}/unlike`).then(() => {
-          this.getProduct();
-          this.$toast.success("取消收藏");
-        });
-      }
+    mounted() {
+        this.getProduct();
     },
-    buy() {
-      this.checkLogin().then(() => {
-        this.$router.push({
-          path: "/submit",
-          query: {
-            id: this.$route.query.id,
-          },
-        });
-      });
+    beforeUnmount() {
+        if (this.btn) {
+            document.body.removeChild(this.btn);
+        }
     },
-  },
+    methods: {
+        getProduct() {
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+            this.$http.get('/asset/get/' + this.$route.query.id).then(res => {
+                this.info = res;
+                this.$nextTick(() => {
+                    if (this.isBuy) {
+                        this.btn = this.$refs.btn;
+                    }
+                    document.body.appendChild(this.$refs.btn);
+                });
+
+                setTimeout(() => {
+                    this.$toast.clear();
+                    this.bs.value.refresh();
+                }, 100);
+            });
+        },
+        likeProduct() {
+            if (!this.info.liked) {
+                this.$http.get(`/collection/${this.info.id}/like`).then(() => {
+                    this.getProduct();
+                    this.$toast.success('收藏成功');
+                });
+            } else {
+                this.$http.get(`/collection/${this.info.id}/unlike`).then(() => {
+                    this.getProduct();
+                    this.$toast.success('取消收藏');
+                });
+            }
+        },
+        buy() {
+            this.checkLogin().then(() => {
+                this.$router.push({
+                    path: '/submit',
+                    query: {
+                        id: this.$route.query.id
+                    }
+                });
+            });
+        }
+    }
 };
 </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 16px 0;
-  box-sizing: border-box;
-
-  .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;
+    // height: 164px;
+    background-color: @bg;
+    border-radius: 20px 20px 0 0;
+    transform: translateY(-16px);
+    position: relative;
+    z-index: 2;
+    padding: 16px 16px 0;
+    box-sizing: border-box;
+
+    .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;
+        }
     }
-  }
 
-  .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;
     }
-  }
 
-  .title {
-    font-size: 20px;
-    font-weight: bold;
-    color: #ffffff;
-    line-height: 28px;
-    margin-top: 12px;
-  }
-
-  .info-bottom {
-    display: flex;
-    position: relative;
-    margin-top: 4px;
-    height: 24px;
-    .text1 {
-      font-size: 14px;
-      color: #949699;
-      line-height: 24px;
+    .info-bottom {
+        display: flex;
+        position: relative;
+        margin-top: 4px;
+        height: 24px;
+        .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;
+        }
     }
-    .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;
+}
+
+/deep/.creator {
+    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;
+        }
     }
 
-    .like {
-      position: absolute;
-      right: 0;
+    .van-cell__value {
+        font-size: 13px;
     }
-  }
 }
 
-/deep/.creator {
-  align-items: center;
-  padding: 24px 16px 24px;
-  .van-cell__title {
-    margin-left: 12px;
-    .text1 {
-      font-size: 16px;
-      line-height: 24px;
+/deep/ .mySwiper {
+    width: 100vw;
+    height: 100vw;
+    z-index: 1;
+
+    .swiper-pagination {
+        bottom: 22px;
     }
-    .text2 {
-      font-size: 12px;
-      color: #939599;
-      line-height: 22px;
+
+    .swiper-pagination-bullet {
+        width: 6px;
+        height: 2px;
+        border-radius: 1px;
+        background: #d7d7d7;
     }
-  }
 
-  .van-cell__value {
-    font-size: 13px;
-  }
-}
+    .swiper-pagination-bullet-active {
+        background: @prim;
+    }
 
-/deep/ .mySwiper {
-  width: 100vw;
-  height: 100vw;
-  z-index: 1;
-
-  .swiper-pagination {
-    bottom: 22px;
-  }
-
-  .swiper-pagination-bullet {
-    width: 6px;
-    height: 2px;
-    border-radius: 1px;
-    background: #d7d7d7;
-  }
-
-  .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 {
-    &:not(:first-child) {
-      padding-top: 16px;
+    .page-title {
+        &:not(:first-child) {
+            padding-top: 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;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+    padding: 16px 0;
+    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;
-
-  .text1 {
-    font-size: 14px;
-    color: #939599;
-    line-height: 24px;
-  }
+    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;
 
-  .text2 {
-    font-size: 14px;
-    color: #ffffff;
-    line-height: 24px;
-  }
+    .text1 {
+        font-size: 14px;
+        color: #939599;
+        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;
-  word-break: break-all;
+    font-size: 14px;
+    color: #ffffff;
+    line-height: 28px;
+    margin-top: 10px;
+    word-break: break-all;
 }
 
 .btn {
-  position: fixed;
-  z-index: 20;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: #202122ee;
-  .btns {
-    padding: 6px 42px;
-  }
-  .van-button {
-    background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
-    color: #333230;
-    font-size: 16px;
-    border-width: 0px;
-  }
+    position: fixed;
+    z-index: 20;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: #202122ee;
+    .btns {
+        padding: 6px 42px;
+    }
+    .van-button {
+        background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
+        color: #333230;
+        font-size: 16px;
+        border-width: 0px;
+    }
 }
 .status {
-  font-size: 22px;
-  font-weight: bold;
-  color: #fdfb60;
-  line-height: 24px;
+    font-size: 22px;
+    font-weight: bold;
+    color: #fdfb60;
+    line-height: 24px;
 }
 
 .user {
-  display: flex;
-  .creator {
-    width: 50%;
-  }
-
-  .user-img {
-    flex-shrink: 0;
-  }
-
-  /deep/.van-cell__title {
-    margin-left: 10px;
-    overflow: hidden;
-  }
-}
+    display: flex;
+    .creator {
+        width: 50%;
+    }
 
+    .user-img {
+        flex-shrink: 0;
+    }
+
+    /deep/.van-cell__title {
+        margin-left: 10px;
+        overflow: hidden;
+    }
+}
 </style>

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

@@ -1,60 +1,52 @@
 <template>
-  <div class="mine">
-    <div class="userInfo">
-      <van-image
-        width="100%"
-        height="35vw"
-        :src="info.bg"
-        fit="cover"
-        class="top-img"
-      />
-      <div class="userInfo-content">
-        <div class="userInfo-top">
-          <van-image
-            round
-            width="78"
-            height="78"
-            :src="
-              info.avatar || require('../../assets/svgs/img_default_photo.svg')
-            "
-            fit="cover"
-            @click="$router.push('/setting')"
-          />
-          <div class="text">
-            <div class="text1 van-ellipsis">{{ info.nickname }}</div>
-            <div class="text2">
-              <span>{{ info.id }}</span>
-              <img @click="copy" src="../../assets/svgs/copy_icon.svg" alt="" />
-            </div>
-          </div>
-        </div>
+    <div class="mine">
+        <div class="userInfo">
+            <van-image width="100%" height="35vw" :src="info.bg" fit="cover" class="top-img" />
+            <div class="userInfo-content">
+                <div class="userInfo-top">
+                    <van-image
+                        round
+                        width="78"
+                        height="78"
+                        :src="info.avatar || require('../../assets/svgs/img_default_photo.svg')"
+                        fit="cover"
+                        @click="$router.push('/setting')"
+                    />
+                    <div class="text">
+                        <div class="text1 van-ellipsis">{{ info.nickname }}</div>
+                        <div class="text2">
+                            <span>{{ info.id }}</span>
+                            <img @click="copy" src="../../assets/svgs/copy_icon.svg" alt="" />
+                        </div>
+                    </div>
+                </div>
 
-        <div class="sub">
-          {{ info.intro }}
-        </div>
+                <div class="sub">
+                    {{ info.intro }}
+                </div>
 
-        <div class="btns">
-          <div class="collect">
-            <div class="text1">{{ info.follows }}</div>
-            <div class="text2">关注</div>
-          </div>
-          <div class="collect">
-            <div class="text1">{{ info.followers }}</div>
-            <div class="text2">粉丝</div>
-          </div>
-          <div class="flex1"></div>
-          <van-button
-            class="follow"
-            @click="follow"
-            plain
-            type="primary"
-            size="mini"
-            round
-            :class="{ followed: info.follow }"
-          >
-            {{ info.follow ? "已关注" : "关注" }}
-          </van-button>
-          <!-- <van-button
+                <div class="btns">
+                    <div class="collect">
+                        <div class="text1">{{ info.follows }}</div>
+                        <div class="text2">关注</div>
+                    </div>
+                    <div class="collect">
+                        <div class="text1">{{ info.followers }}</div>
+                        <div class="text2">粉丝</div>
+                    </div>
+                    <div class="flex1"></div>
+                    <van-button
+                        class="follow"
+                        @click="follow"
+                        plain
+                        type="primary"
+                        size="mini"
+                        round
+                        :class="{ followed: info.follow }"
+                    >
+                        {{ info.follow ? '已关注' : '关注' }}
+                    </van-button>
+                    <!-- <van-button
             plain
             @click="$router.push('/setting')"
             color="#939599"
@@ -62,305 +54,287 @@
             round
             >分享</van-button
           > -->
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
 
-    <van-sticky ref="top" @change="change">
-      <div class="menu">
-        <div
-          class="menu-item"
-          @click="changeMenu('DEFAULT')"
-          :class="{ active: type === 'DEFAULT' }"
-        >
-          藏品类目
-        </div>
-        <div
-          class="menu-item"
-          @click="changeMenu('BLIND_BOX')"
-          :class="{ active: type === 'BLIND_BOX' }"
-        >
-          盲盒类目
-        </div>
-        <div class="flex1"></div>
-        <div
-          class="search"
-          @click="$router.push(`/productSearch?minterId=${info.id}`)"
-        >
-          <img src="../../assets/svgs/search.svg" alt="" />
-        </div>
-      </div>
+        <van-sticky ref="top" @change="change">
+            <div class="menu">
+                <div class="menu-item" @click="changeMenu('DEFAULT')" :class="{ active: type === 'DEFAULT' }">
+                    藏品类目
+                </div>
+                <div class="menu-item" @click="changeMenu('BLIND_BOX')" :class="{ active: type === 'BLIND_BOX' }">
+                    盲盒类目
+                </div>
+                <div class="flex1"></div>
+                <div class="search" @click="$router.push(`/productSearch?minterId=${info.id}`)">
+                    <img src="../../assets/svgs/search.svg" alt="" />
+                </div>
+            </div>
 
-      <van-tabs
-        v-model:active="salable"
-        @change="getList"
-        line-width="16"
-        line-height="2"
-      >
-        <van-tab title="全部" name=""></van-tab>
-        <van-tab title="售卖" :name="true"></van-tab>
-      </van-tabs>
-    </van-sticky>
-    <div class="list">
-      <template v-for="(item, index) in list" :key="index">
-        <product-info v-model:info="list[index]"></product-info
-      ></template>
-      <van-empty v-if="empty" description="没有任何收藏品哦~" />
+            <van-tabs v-model:active="salable" @change="getList" line-width="16" line-height="2">
+                <van-tab title="全部" name=""></van-tab>
+                <van-tab title="售卖" :name="true"></van-tab>
+            </van-tabs>
+        </van-sticky>
+        <div class="list">
+            <template v-for="(item, index) in list" :key="index">
+                <product-info v-model:info="list[index]"></product-info
+            ></template>
+            <van-empty v-if="empty" description="没有任何收藏品哦~" />
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
-import { mapState } from "vuex";
-import productInfo from "../../components/product/productInfo.vue";
+import { mapState } from 'vuex';
+import productInfo from '../../components/product/productInfo.vue';
 export default {
-  components: { productInfo },
-  computed: {
-    ...mapState(["userInfo"]),
-  },
-  inject: ["bs"],
-  data() {
-    return {
-      info: {},
-      type: "DEFAULT",
-      salable: "",
-      stiky: null,
-      list: [],
-      empty: false,
-    };
-  },
-  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];
-    });
-    this.getInfo();
-  },
-  methods: {
-    change(isFixed) {
-      if (isFixed) {
-        this.$nextTick(() => {
-          document.body.appendChild(this.stiky);
-        });
-      } else {
-        this.$refs.top.$el.appendChild(this.stiky);
-      }
-    },
-    copy() {
-      this.$copyText(this.info.id).then(
-        (e) => {
-          this.$toast.success("复制成功");
-          console.log(e);
-        },
-        (e) => {
-          this.$toast("复制失败");
-          console.log(e);
-        }
-      );
+    components: { productInfo },
+    computed: {
+        ...mapState(['userInfo'])
     },
-    getInfo() {
-      this.$toast.loading({
-        message: "加载中...",
-        forbidClick: true,
-      });
-      this.$http.get("/user/get/" + this.$route.query.id).then((res) => {
-        this.info = res;
-        this.getList();
-      });
+    inject: ['bs'],
+    data() {
+        return {
+            info: {},
+            type: 'DEFAULT',
+            salable: '',
+            stiky: null,
+            list: [],
+            empty: false
+        };
     },
-    follow() {
-      if (!this.info.follow) {
-        this.$http.get(`/user/${this.info.id}/follow`).then((res) => {
-          this.getInfo();
-          this.$toast.success("关注成功");
-        });
-      } else {
-        this.$http.get(`/user/${this.info.id}/unfollow`).then(() => {
-          this.getInfo();
-          this.$toast.success("取消关注");
-        });
-      }
+    beforeUnmount() {
+        if (this.stiky.parentNode.nodeName == 'BODY') {
+            this.$nextTick(() => {
+                document.body.removeChild(this.stiky);
+            });
+        }
     },
-    getList() {
-      this.$toast.loading({
-        message: "加载中...",
-        forbidClick: true,
-      });
-      this.$http
-        .post(
-          "/collection/all",
-          {
-            page: 0,
-            size: 20,
-            query: {
-              type: this.type,
-              salable: this.salable,
-              minterId: this.info.id,
-              del: false,
-            },
-            sort: this.sort,
-          },
-          { body: "json" }
-        )
-        .then((res) => {
-          this.list = res.content;
-          this.empty = res.empty;
-          this.scrollRefreash();
+    mounted() {
+        this.$nextTick(() => {
+            this.stiky = this.$refs.top.$el.childNodes[0];
         });
+        this.getInfo();
     },
-    changeMenu(menu) {
-      this.type = menu;
-      this.getList();
-    },
-  },
+    methods: {
+        change(isFixed) {
+            if (isFixed) {
+                this.$nextTick(() => {
+                    document.body.appendChild(this.stiky);
+                });
+            } else {
+                this.$refs.top.$el.appendChild(this.stiky);
+            }
+        },
+        copy() {
+            this.$copyText(this.info.id).then(
+                e => {
+                    this.$toast.success('复制成功');
+                    console.log(e);
+                },
+                e => {
+                    this.$toast('复制失败');
+                    console.log(e);
+                }
+            );
+        },
+        getInfo() {
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+            this.$http.get('/user/get/' + this.$route.query.id).then(res => {
+                this.info = res;
+                this.getList();
+            });
+        },
+        follow() {
+            if (!this.info.follow) {
+                this.$http.get(`/user/${this.info.id}/follow`).then(res => {
+                    this.getInfo();
+                    this.$toast.success('关注成功');
+                });
+            } else {
+                this.$http.get(`/user/${this.info.id}/unfollow`).then(() => {
+                    this.getInfo();
+                    this.$toast.success('取消关注');
+                });
+            }
+        },
+        getList() {
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+            this.$http
+                .post(
+                    '/collection/all',
+                    {
+                        page: 0,
+                        size: 20,
+                        query: {
+                            type: this.type,
+                            salable: this.salable,
+                            minterId: this.info.id,
+                            del: false
+                        },
+                        sort: this.sort
+                    },
+                    { body: 'json' }
+                )
+                .then(res => {
+                    this.list = res.content;
+                    this.empty = res.empty;
+                    this.scrollRefreash();
+                });
+        },
+        changeMenu(menu) {
+            this.type = menu;
+            this.getList();
+        }
+    }
 };
 </script>
 
 <style lang="less" scoped>
 .mine {
-  background-color: #0f0f0f;
+    background-color: #0f0f0f;
 }
 .userInfo {
-  padding-top: 35vw;
-  position: relative;
+    padding-top: 35vw;
+    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: row-reverse;
-      align-items: center;
-      justify-content: flex-end;
-      .text1 {
-        font-size: 16px;
-        color: #ffffff;
-        line-height: 24px;
-        margin-left: 6px;
-      }
-      .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: 70px;
-      .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: row-reverse;
+            align-items: center;
+            justify-content: flex-end;
+            .text1 {
+                font-size: 16px;
+                color: #ffffff;
+                line-height: 24px;
+                margin-left: 6px;
+            }
+            .text2 {
+                font-size: 14px;
+                color: #939599;
+                line-height: 24px;
+            }
+        }
 
-    .follow {
-      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;
-      &.followed {
-        background-image: linear-gradient(@bg, @bg),
-          linear-gradient(135deg, #939599, #939599);
-        color: #939599;
-      }
+        /deep/.van-button {
+            width: 70px;
+            .van-icon__image {
+                display: block;
+                width: 18px;
+                height: 18px;
+            }
+        }
+        .van-button + .van-button {
+            margin-left: 10px;
+        }
+
+        .follow {
+            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;
+            &.followed {
+                background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, #939599, #939599);
+                color: #939599;
+            }
+        }
     }
-  }
 }
 .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;
+            }
+        }
     }
-  }
 }
 .menu {
-  display: flex;
-  height: 50px;
-  align-items: center;
-  padding: 0 16px;
-  border-bottom: 1px solid #202122;
-  .menu-item {
-    font-size: 16px;
-    font-weight: bold;
-    color: #939599;
-    line-height: 24px;
-    margin-right: 30px;
-    &.active {
-      color: @prim;
-      font-size: 18px;
+    display: flex;
+    height: 50px;
+    align-items: center;
+    padding: 0 16px;
+    border-bottom: 1px solid #202122;
+    .menu-item {
+        font-size: 16px;
+        font-weight: bold;
+        color: #939599;
+        line-height: 24px;
+        margin-right: 30px;
+        &.active {
+            color: @prim;
+            font-size: 18px;
+        }
     }
-  }
 }
 /deep/ .van-tabs {
-  .van-tabs__nav {
-    background-color: #0f0f0f;
-  }
-  .van-tab {
-    flex-grow: 0;
-    flex-shrink: 0;
-    min-width: 70px;
-  }
+    .van-tabs__nav {
+        background-color: #0f0f0f;
+    }
+    .van-tab {
+        flex-grow: 0;
+        flex-shrink: 0;
+        min-width: 70px;
+    }
 }
 
 .list {
-  padding: 8px 8px 100px;
+    padding: 8px 8px 100px;
 }
 </style>

src/main/nine-space/src/views/creator/List.vue

@@ -1,152 +1,140 @@
 <template>
-  <div class="follow">
-    <van-sticky ref="top" @change="change">
-      <div class="top">
-        <div class="name">铸造者</div>
-      </div>
-      <van-tabs
-        v-model:active="sort"
-        :ellipsis="false"
-        line-width="16"
-        line-height="2"
-        @change="getList"
-      >
-        <van-tab
-          :title="item.label"
-          :name="
-            item.type === 'select'
-              ? sort === item.value[0]
-                ? item.value[1]
-                : item.value[0]
-              : item.value
-          "
-          :title-class="
-            item.type === 'select' && sort === item.value[0] ? '' : 'asc'
-          "
-          :key="index"
-          v-for="(item, index) in sourceOptions"
-        >
-          <template v-if="item.type === 'select'" #title>
-            <div class="tab">
-              <span>{{ item.label }}</span>
-              <van-icon size="8" name="arrow-up" />
-              <van-icon size="8" name="arrow-down" />
+    <div class="follow">
+        <van-sticky ref="top" @change="change">
+            <div class="top">
+                <div class="name">铸造者</div>
             </div>
-          </template>
-        </van-tab>
-      </van-tabs>
-    </van-sticky>
-    <div class="list">
-      <template v-for="(item, index) in list" :key="index">
-        <creator-info v-model:info="list[index]"></creator-info>
-      </template>
-      <van-empty v-if="empty" description="没有任何藏品哦~" />
+            <van-tabs v-model:active="sort" :ellipsis="false" line-width="16" line-height="2" @change="getList">
+                <van-tab
+                    :title="item.label"
+                    :name="
+                        item.type === 'select' ? (sort === item.value[0] ? item.value[1] : item.value[0]) : item.value
+                    "
+                    :title-class="item.type === 'select' && sort === item.value[0] ? '' : 'asc'"
+                    :key="index"
+                    v-for="(item, index) in sourceOptions"
+                >
+                    <template v-if="item.type === 'select'" #title>
+                        <div class="tab">
+                            <span>{{ item.label }}</span>
+                            <van-icon size="8" name="arrow-up" />
+                            <van-icon size="8" name="arrow-down" />
+                        </div>
+                    </template>
+                </van-tab>
+            </van-tabs>
+        </van-sticky>
+        <div class="list">
+            <template v-for="(item, index) in list" :key="index">
+                <creator-info v-model:info="list[index]"></creator-info>
+            </template>
+            <van-empty v-if="empty" description="没有任何藏品哦~" />
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
-import CreatorInfo from "../../components/creator/CreatorInfo.vue";
+import CreatorInfo from '../../components/creator/CreatorInfo.vue';
 export default {
-  components: { CreatorInfo },
-  inject: ["bs"],
-  data() {
-    return {
-      list: [],
-      empty: false,
-      sort: "id,desc",
-      sourceOptions: [
-        {
-          label: "全部",
-          value: "id,desc",
-        },
-        {
-          label: "最新",
-          value: "createdAt,desc",
-        },
-        {
-          label: "最热",
-          value: "likes,desc",
-        },
-        {
-          label: "销量",
-          value: ["sales,desc", "sales,asc"],
-          type: "select",
-        },
-      ],
-    };
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.stiky = this.$refs.top.$el.childNodes[0];
-    });
-    this.getList();
-  },
-  beforeUnmount() {
-    if (this.stiky.parentNode.nodeName == "BODY") {
-      this.$nextTick(() => {
-        document.body.removeChild(this.stiky);
-      });
-    }
-  },
-  methods: {
-    change(isFixed) {
-      if (isFixed) {
+    components: { CreatorInfo },
+    inject: ['bs'],
+    data() {
+        return {
+            list: [],
+            empty: false,
+            sort: 'id,desc',
+            sourceOptions: [
+                {
+                    label: '全部',
+                    value: 'id,desc'
+                },
+                {
+                    label: '最新',
+                    value: 'createdAt,desc'
+                },
+                {
+                    label: '最热',
+                    value: 'likes,desc'
+                },
+                {
+                    label: '销量',
+                    value: ['sales,desc', 'sales,asc'],
+                    type: 'select'
+                }
+            ]
+        };
+    },
+    mounted() {
         this.$nextTick(() => {
-          document.body.appendChild(this.stiky);
+            this.stiky = this.$refs.top.$el.childNodes[0];
         });
-      } else {
-        this.$refs.top.$el.appendChild(this.stiky);
-      }
+        this.getList();
     },
-    getList() {
-      this.$toast.loading({
-        message: "加载中...",
-        forbidClick: true,
-      });
-      this.$http
-        .post(
-          "/user/all",
-          {
-            page: 0,
-            query: { hasRole: "ROLE_MINTER" },
-            size: 20,
-            sort: this.sort,
-          },
-          { body: "json" }
-        )
-        .then((res) => {
-          this.list = res.content;
-          this.empty = res.empty;
-          this.scrollRefreash();
-        });
+    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);
+            }
+        },
+        getList() {
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+            this.$http
+                .post(
+                    '/user/all',
+                    {
+                        page: 0,
+                        query: { hasRole: 'ROLE_MINTER' },
+                        size: 20,
+                        sort: this.sort
+                    },
+                    { body: 'json' }
+                )
+                .then(res => {
+                    this.list = res.content;
+                    this.empty = res.empty;
+                    this.scrollRefreash();
+                });
+        }
+    }
 };
 </script>
 
 <style lang="less" scoped>
 .follow {
-  background-color: #0f0f0f;
-  padding-bottom: 100px;
+    background-color: #0f0f0f;
+    padding-bottom: 100px;
 }
 .top {
-  background-color: #181818;
-  padding: 0 16px;
-  height: 50px;
-  display: flex;
-  align-items: center;
-  .name {
-    font-size: 20px;
-    // font-weight: bold;
-    color: @prim;
-    line-height: 30px;
-  }
+    background-color: #181818;
+    padding: 0 16px;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    .name {
+        font-size: 20px;
+        // font-weight: bold;
+        color: @prim;
+        line-height: 30px;
+    }
 }
 /deep/.van-tabs {
-  .van-tabs__nav {
-    padding-left: 16px;
-  }
+    .van-tabs__nav {
+        padding-left: 16px;
+    }
 }
 // /deep/.van-tab {
 // flex-grow: 0;
@@ -154,36 +142,36 @@ export default {
 // margin-right: 50px;
 
 .tab {
-  position: relative;
-  padding-right: 14px;
-  .van-icon {
-    position: absolute;
-    right: 0;
+    position: relative;
+    padding-right: 14px;
+    .van-icon {
+        position: absolute;
+        right: 0;
 
-    &.van-icon-arrow-down {
-      top: 8px;
-    }
+        &.van-icon-arrow-down {
+            top: 8px;
+        }
 
-    &.van-icon-arrow-up {
-      bottom: 8px;
+        &.van-icon-arrow-up {
+            bottom: 8px;
+        }
     }
-  }
 }
 /deep/.van-tab--active {
-  .tab {
-    .van-icon-arrow-up {
-      color: #646566;
-    }
-  }
-  &.asc {
     .tab {
-      .van-icon-arrow-up {
-        color: @prim;
-      }
-      .van-icon-arrow-down {
-        color: #646566;
-      }
+        .van-icon-arrow-up {
+            color: #646566;
+        }
+    }
+    &.asc {
+        .tab {
+            .van-icon-arrow-up {
+                color: @prim;
+            }
+            .van-icon-arrow-down {
+                color: #646566;
+            }
+        }
     }
-  }
 }
 </style>

src/main/nine-space/src/views/creator/Search.vue

@@ -1,129 +1,129 @@
 <template>
-  <div class="search">
-    <van-sticky ref="top" @change="change">
-      <van-search
-        ref="top"
-        shape="round"
-        v-model="search"
-        placeholder="请输入"
-        show-action
-        autofocus
-        :left-icon="require('../../assets/svgs/icon-sosuo.svg')"
-        @search="getList"
-        @cancel="$router.go(-1)"
-      />
-    </van-sticky>
-    <div class="list">
-      <template v-for="(item, index) in list" :key="index">
-        <creator-info v-model:info="list[index]"></creator-info>
-      </template>
-      <van-empty v-if="empty" description="没有任何收藏者哦~" />
+    <div class="search">
+        <van-sticky ref="top" @change="change">
+            <van-search
+                ref="top"
+                shape="round"
+                v-model="search"
+                placeholder="请输入"
+                show-action
+                autofocus
+                :left-icon="require('../../assets/svgs/icon-sosuo.svg')"
+                @search="getList"
+                @cancel="$router.go(-1)"
+            />
+        </van-sticky>
+        <div class="list">
+            <template v-for="(item, index) in list" :key="index">
+                <creator-info v-model:info="list[index]"></creator-info>
+            </template>
+            <van-empty v-if="empty" description="没有任何收藏者哦~" />
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
-import CreatorInfo from "../../components/creator/CreatorInfo.vue";
+import CreatorInfo from '../../components/creator/CreatorInfo.vue';
 export default {
-  name: "Search",
-  components: { CreatorInfo },
-  inject: ["bs", "setKeeps"],
-  data() {
-    return {
-      list: [],
-      empty: false,
-      search: "",
-      stiky: null,
-      type: "",
-    };
-  },
-  beforeRouteLeave(to, from, next) {
-    if (to.name !== "productDetail") {
-      this.setKeeps([]);
-    }
-    next();
-  },
-  beforeUnmount() {
-    if (this.stiky.parentNode.nodeName == "BODY") {
-      this.$nextTick(() => {
-        document.body.removeChild(this.stiky);
-      });
-    }
-  },
-  computed: {
-    pageName() {
-      return this.getLabelName(this.type, this.typeOptions);
+    name: 'Search',
+    components: { CreatorInfo },
+    inject: ['bs', 'setKeeps'],
+    data() {
+        return {
+            list: [],
+            empty: false,
+            search: '',
+            stiky: null,
+            type: ''
+        };
     },
-  },
-  mounted() {
-    this.setKeeps(["Search"]);
-    if (this.$route.query.type) {
-      this.type = this.$route.query.type;
-    }
-    this.$nextTick(() => {
-      this.stiky = this.$refs.top.$el.childNodes[0];
-    });
-  },
-  methods: {
-    change(isFixed) {
-      if (isFixed) {
-        this.$nextTick(() => {
-          document.body.appendChild(this.stiky);
-        });
-      } else {
-        this.$refs.top.$el.appendChild(this.stiky);
-      }
+    beforeRouteLeave(to, from, next) {
+        if (to.name !== 'productDetail') {
+            this.setKeeps([]);
+        }
+        next();
+    },
+    beforeUnmount() {
+        if (this.stiky.parentNode.nodeName == 'BODY') {
+            this.$nextTick(() => {
+                document.body.removeChild(this.stiky);
+            });
+        }
     },
-    getList(search) {
-      this.search = search;
-      this.$toast.loading({
-        message: "加载中...",
-        forbidClick: true,
-      });
-      this.$http
-        .post(
-          "/user/all",
-          {
-            page: 0,
-            query: { hasRole: "ROLE_MINTER" },
-            size: 20,
-            sort: "createdAt,desc",
-            search: this.search,
-          },
-          { body: "json" }
-        )
-        .then((res) => {
-          this.list = res.content;
-          this.empty = res.empty;
-          this.scrollRefreash();
+    computed: {
+        pageName() {
+            return this.getLabelName(this.type, this.typeOptions);
+        }
+    },
+    mounted() {
+        this.setKeeps(['Search']);
+        if (this.$route.query.type) {
+            this.type = this.$route.query.type;
+        }
+        this.$nextTick(() => {
+            this.stiky = this.$refs.top.$el.childNodes[0];
         });
     },
-  },
+    methods: {
+        change(isFixed) {
+            if (isFixed) {
+                this.$nextTick(() => {
+                    document.body.appendChild(this.stiky);
+                });
+            } else {
+                this.$refs.top.$el.appendChild(this.stiky);
+            }
+        },
+        getList(search) {
+            this.search = search;
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+            this.$http
+                .post(
+                    '/user/all',
+                    {
+                        page: 0,
+                        query: { hasRole: 'ROLE_MINTER' },
+                        size: 20,
+                        sort: 'createdAt,desc',
+                        search: this.search
+                    },
+                    { body: 'json' }
+                )
+                .then(res => {
+                    this.list = res.content;
+                    this.empty = res.empty;
+                    this.scrollRefreash();
+                });
+        }
+    }
 };
 </script>
 
 <style lang="less" scoped>
 .search {
-  background-color: #0f0f0f;
-  padding-bottom: 100px;
+    background-color: #0f0f0f;
+    padding-bottom: 100px;
 }
 .top {
-  background-color: #181818;
-  padding: 0 16px;
-  height: 50px;
-  display: flex;
-  align-items: center;
-  .name {
-    font-size: 20px;
-    // font-weight: bold;
-    color: @prim;
-    line-height: 30px;
-  }
+    background-color: #181818;
+    padding: 0 16px;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    .name {
+        font-size: 20px;
+        // font-weight: bold;
+        color: @prim;
+        line-height: 30px;
+    }
 }
 /deep/.van-tabs {
-  .van-tabs__nav {
-    padding-left: 16px;
-  }
+    .van-tabs__nav {
+        padding-left: 16px;
+    }
 }
 // /deep/.van-tab {
 // flex-grow: 0;
@@ -131,46 +131,46 @@ export default {
 // margin-right: 50px;
 
 .tab {
-  position: relative;
-  padding-right: 14px;
-  .van-icon {
-    position: absolute;
-    right: 0;
+    position: relative;
+    padding-right: 14px;
+    .van-icon {
+        position: absolute;
+        right: 0;
 
-    &.van-icon-arrow-down {
-      top: 8px;
-    }
+        &.van-icon-arrow-down {
+            top: 8px;
+        }
 
-    &.van-icon-arrow-up {
-      bottom: 8px;
+        &.van-icon-arrow-up {
+            bottom: 8px;
+        }
     }
-  }
 }
 /deep/.van-tab--active {
-  .tab {
-    .van-icon-arrow-up {
-      color: #646566;
-    }
-  }
-  &.asc {
     .tab {
-      .van-icon-arrow-up {
-        color: @prim;
-      }
-      .van-icon-arrow-down {
-        color: #646566;
-      }
+        .van-icon-arrow-up {
+            color: #646566;
+        }
+    }
+    &.asc {
+        .tab {
+            .van-icon-arrow-up {
+                color: @prim;
+            }
+            .van-icon-arrow-down {
+                color: #646566;
+            }
+        }
     }
-  }
 }
 /deep/.van-search {
-  .van-field__left-icon {
-    display: flex;
-    align-items: center;
-  }
-  .van-icon {
-    display: flex;
-    align-items: center;
-  }
+    .van-field__left-icon {
+        display: flex;
+        align-items: center;
+    }
+    .van-icon {
+        display: flex;
+        align-items: center;
+    }
 }
 </style>

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

@@ -1,219 +1,207 @@
 <template>
-  <div class="order">
-    <div class="order-top">
-      <div class="text1">{{ getLabelName(info.status, statusOptions) }}</div>
-      <div class="text2">
-        {{
-          info.status === "FINISH"
-            ? "交易成功啦！交易后的藏品将在您的柜子中展"
-            : "支付成功，等待平台确认交易"
-        }}
-      </div>
-    </div>
-    <driver />
-    <div class="product">
-      <div class="product-name">{{ info.minter }}</div>
-      <div class="product-info">
-        <van-image
-          :radius="6"
-          width="74"
-          height="104"
-          :src="getImg(info.pic)"
-          fit="cover"
-        />
-        <div class="product-content">
-          <div class="text1 van-multi-ellipsis--l2">{{ info.name }}</div>
-          <div class="text2" v-if="info.number">编号:{{ info.number }}</div>
-          <div class="flex1"></div>
-          <div class="price">¥{{ info.price }}</div>
+    <div class="order">
+        <div class="order-top">
+            <div class="text1">{{ getLabelName(info.status, statusOptions) }}</div>
+            <div class="text2">
+                {{
+                    info.status === 'FINISH' ? '交易成功啦！交易后的藏品将在您的柜子中展' : '支付成功，等待平台确认交易'
+                }}
+            </div>
+        </div>
+        <driver />
+        <div class="product">
+            <div class="product-name">{{ info.minter }}</div>
+            <div class="product-info">
+                <van-image :radius="6" width="74" height="104" :src="getImg(info.pic)" fit="cover" />
+                <div class="product-content">
+                    <div class="text1 van-multi-ellipsis--l2">{{ info.name }}</div>
+                    <div class="text2" v-if="info.number">编号:{{ info.number }}</div>
+                    <div class="flex1"></div>
+                    <div class="price">¥{{ info.price }}</div>
+                </div>
+            </div>
+        </div>
+        <div class="info-item">
+            <div class="text1">商品费用</div>
+            <div class="text1">¥{{ info.price }}</div>
+        </div>
+        <div class="info-item">
+            <div class="text1">GAS费用</div>
+            <div class="text1">¥{{ info.gasPrice }}</div>
+        </div>
+        <div class="info-item">
+            <div class="text1">实际支付</div>
+            <div class="text1">¥{{ info.totalPrice }}</div>
+        </div>
+        <div class="info-item" v-if="info.txHash">
+            <div class="text1">链上hash</div>
+            <div class="van-ellipsis">{{ info.txHash }}</div>
         </div>
-      </div>
-    </div>
-    <div class="info-item">
-      <div class="text1">商品费用</div>
-      <div class="text1">¥{{ info.price }}</div>
-    </div>
-    <div class="info-item">
-      <div class="text1">GAS费用</div>
-      <div class="text1">¥{{ info.gasPrice }}</div>
-    </div>
-    <div class="info-item">
-      <div class="text1">实际支付</div>
-      <div class="text1">¥{{ info.totalPrice }}</div>
-    </div>
-    <div class="info-item" v-if="info.txHash">
-      <div class="text1">链上hash</div>
-      <div class="van-ellipsis">{{ info.txHash }}</div>
-    </div>
 
-    <div class="info-item" v-if="info.gasUsed">
-      <div class="text1">消耗gas</div>
-      <div class="text1">{{ info.gasUsed }}</div>
-    </div>
+        <div class="info-item" v-if="info.gasUsed">
+            <div class="text1">消耗gas</div>
+            <div class="text1">{{ info.gasUsed }}</div>
+        </div>
 
-    <div class="info-item">
-      <div class="text1">支付方式</div>
-      <div class="text1">
-        {{ getLabelName(info.payMethod, payMethodOptions) }}支付
-      </div>
-    </div>
+        <div class="info-item">
+            <div class="text1">支付方式</div>
+            <div class="text1">{{ getLabelName(info.payMethod, payMethodOptions) }}支付</div>
+        </div>
 
-    <div class="tips-item">
-      <div class="text1">订单编号</div>
-      <div class="text2">
-        <van-button @click="copy" color="#939599" plain size="mini"
-          >复制</van-button
-        >
-        <span>{{ info.id }}</span>
-      </div>
-    </div>
-    <div class="tips-item">
-      <div class="text1">创建时间</div>
-      <div class="text2">
-        {{ info.createdAt }}
-      </div>
-    </div>
-    <div class="tips-item">
-      <div class="text1">付款时间</div>
-      <div class="text2">
-        {{ info.payTime }}
-      </div>
+        <div class="tips-item">
+            <div class="text1">订单编号</div>
+            <div class="text2">
+                <van-button @click="copy" color="#939599" plain size="mini">复制</van-button>
+                <span>{{ info.id }}</span>
+            </div>
+        </div>
+        <div class="tips-item">
+            <div class="text1">创建时间</div>
+            <div class="text2">
+                {{ info.createdAt }}
+            </div>
+        </div>
+        <div class="tips-item">
+            <div class="text1">付款时间</div>
+            <div class="text2">
+                {{ info.payTime }}
+            </div>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
-import order from "../../mixins/order";
+import order from '../../mixins/order';
 export default {
-  name: "detail",
-  inject: ["bs"],
-  data() {
-    return {
-      info: {},
-    };
-  },
-  mixins: [order],
-  mounted() {
-    this.$toast.loading({
-      message: "加载中...",
-      forbidClick: true,
-    });
-    this.$http.get("/order/get/" + this.$route.query.id).then((res) => {
-      this.info = res;
-      this.scrollRefreash();
-    });
-  },
-  methods: {
-    copy() {
-      this.$copyText(this.info.id).then(
-        (e) => {
-          this.$toast.success("复制成功");
-          console.log(e);
-        },
-        (e) => {
-          this.$toast("复制失败");
-          console.log(e);
-        }
-      );
+    name: 'detail',
+    inject: ['bs'],
+    data() {
+        return {
+            info: {}
+        };
+    },
+    mixins: [order],
+    mounted() {
+        this.$toast.loading({
+            message: '加载中...',
+            forbidClick: true
+        });
+        this.$http.get('/order/get/' + this.$route.query.id).then(res => {
+            this.info = res;
+            this.scrollRefreash();
+        });
     },
-  },
+    methods: {
+        copy() {
+            this.$copyText(this.info.id).then(
+                e => {
+                    this.$toast.success('复制成功');
+                    console.log(e);
+                },
+                e => {
+                    this.$toast('复制失败');
+                    console.log(e);
+                }
+            );
+        }
+    }
 };
 </script>
 <style lang="less" scoped>
 .order {
-  padding-bottom: 50px;
+    padding-bottom: 50px;
 }
 .order-top {
-  padding: 26px 16px 20px;
-  .text1 {
-    font-size: 24px;
-    font-weight: bold;
-    color: @prim;
-    line-height: 34px;
-  }
-  .text2 {
-    font-size: 14px;
-    color: #ffffff;
-    line-height: 24px;
-  }
-}
-.product {
-  padding: 0 16px 20px;
-  border-bottom: 1px solid #202122;
-  .product-name {
-    padding: 15px 0 12px;
-  }
-  .product-info {
-    display: flex;
-
-    .van-image {
-      flex-shrink: 0;
-    }
-    .product-content {
-      flex-grow: 1;
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-      margin-left: 10px;
-      .text1 {
-        font-size: 16px;
+    padding: 26px 16px 20px;
+    .text1 {
+        font-size: 24px;
         font-weight: bold;
-        color: #ffffff;
-        line-height: 22px;
-      }
-
-      .text2 {
+        color: @prim;
+        line-height: 34px;
+    }
+    .text2 {
         font-size: 14px;
-        color: #939599;
-        line-height: 24px;
-        margin-top: 4px;
-      }
-      .price {
-        font-size: 16px;
-        font-weight: bold;
         color: #ffffff;
         line-height: 24px;
-      }
     }
-  }
+}
+.product {
+    padding: 0 16px 20px;
+    border-bottom: 1px solid #202122;
+    .product-name {
+        padding: 15px 0 12px;
+    }
+    .product-info {
+        display: flex;
+
+        .van-image {
+            flex-shrink: 0;
+        }
+        .product-content {
+            flex-grow: 1;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            margin-left: 10px;
+            .text1 {
+                font-size: 16px;
+                font-weight: bold;
+                color: #ffffff;
+                line-height: 22px;
+            }
+
+            .text2 {
+                font-size: 14px;
+                color: #939599;
+                line-height: 24px;
+                margin-top: 4px;
+            }
+            .price {
+                font-size: 16px;
+                font-weight: bold;
+                color: #ffffff;
+                line-height: 24px;
+            }
+        }
+    }
 }
 .info-item {
-  display: flex;
-  justify-content: space-between;
-  padding: 0 16px;
-  height: 60px;
-  align-items: center;
-  border-bottom: 1px solid #202122;
-  .text1 {
-    flex-shrink: 0;
-    margin-right: 10px;
-  }
+    display: flex;
+    justify-content: space-between;
+    padding: 0 16px;
+    height: 60px;
+    align-items: center;
+    border-bottom: 1px solid #202122;
+    .text1 {
+        flex-shrink: 0;
+        margin-right: 10px;
+    }
 }
 .tips-item {
-  display: flex;
-  justify-content: space-between;
-  height: 40px;
-  align-items: center;
-  padding: 0 16px;
-  .text1 {
-    font-size: 13px;
-    color: #939599;
-    line-height: 24px;
-    flex-shrink: 0;
-    margin-right: 10px;
-  }
-  .text2 {
-    font-size: 13px;
-    span {
-      vertical-align: middle;
+    display: flex;
+    justify-content: space-between;
+    height: 40px;
+    align-items: center;
+    padding: 0 16px;
+    .text1 {
+        font-size: 13px;
+        color: #939599;
+        line-height: 24px;
+        flex-shrink: 0;
+        margin-right: 10px;
     }
+    .text2 {
+        font-size: 13px;
+        span {
+            vertical-align: middle;
+        }
 
-    .van-button {
-      vertical-align: middle;
-      margin-right: 5px;
-      height: 20px;
-      font-size: 13px;
+        .van-button {
+            vertical-align: middle;
+            margin-right: 5px;
+            height: 20px;
+            font-size: 13px;
+        }
     }
-  }
 }
 </style>

src/main/nine-space/src/views/order/Orders.vue

@@ -1,256 +1,237 @@
 <template>
-  <div class="discover">
-    <van-sticky ref="top" @change="change">
-      <div class="top">
-        <div class="top-btn">
-          <div
-            class="btn"
-            :class="{ active: type === 'DEFAULT' }"
-            @click="changeActive('DEFAULT')"
-          >
-            商品订单
-          </div>
-          <div
-            class="btn"
-            :class="{ active: type === 'BLIND_BOX' }"
-            @click="changeActive('BLIND_BOX')"
-          >
-            盲盒订单
-          </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: type === 'DEFAULT' }" @click="changeActive('DEFAULT')">
+                        商品订单
+                    </div>
+                    <div class="btn" :class="{ active: type === 'BLIND_BOX' }" @click="changeActive('BLIND_BOX')">
+                        盲盒订单
+                    </div>
+                </div>
+                <!-- <div class="search">
+                    <img src="../../assets/svgs/search.svg" alt="" />
+                </div> -->
+            </div>
 
-      <van-tabs
-        v-model:active="status"
-        :ellipsis="false"
-        line-width="16"
-        line-height="2"
-        @click="changeStatus"
-      >
-        <van-tab
-          v-for="(item, index) in tabs"
-          :key="index"
-          :title="item.name"
-          :name="item.status"
-        ></van-tab>
-      </van-tabs>
-    </van-sticky>
+            <van-tabs v-model:active="status" :ellipsis="false" line-width="16" line-height="2" @click="changeStatus">
+                <van-tab v-for="(item, index) in tabs" :key="index" :title="item.name" :name="item.status"></van-tab>
+            </van-tabs>
+        </van-sticky>
 
-    <div class="list">
-      <order-info v-for="item in list" :key="item.id" :info="item"></order-info>
-    </div>
+        <div class="list">
+            <order-info v-for="item in list" :key="item.id" :info="item"></order-info>
+        </div>
 
-    <van-empty v-if="empty" description="还没有订单哦~" />
-  </div>
+        <van-empty v-if="empty" description="还没有订单哦~" />
+    </div>
 </template>
 
 <script>
-import OrderInfo from "../../components/order/OrderInfo.vue";
+import OrderInfo from '../../components/order/OrderInfo.vue';
 export default {
-  name: "discover",
-  inject: ["bs"],
-  components: {
-    OrderInfo,
-  },
-  data() {
-    return {
-      active: "explore",
-      stiky: null,
-      status: "PROCESSING,FINISH",
-      type: "DEFAULT",
-      list: [],
-      tabs: [
-        {
-          status: "PROCESSING,FINISH",
-          name: "全部",
-        },
-        {
-          status: "PROCESSING",
-          name: "交易中",
-        },
-        {
-          status: "FINISH",
-          name: "已完成",
-        },
-      ],
-      empty: false,
-    };
-  },
-  beforeUnmount() {
-    if (this.stiky.parentNode.nodeName == "BODY") {
-      this.$nextTick(() => {
-        document.body.removeChild(this.stiky);
-      });
-    }
-  },
-  mounted() {
-    if (this.$route.query.status) {
-      this.status = this.$route.query.status;
-    }
-    this.$nextTick(() => {
-      this.stiky = this.$refs.top.$el.childNodes[0];
-    });
-    this.getList();
-  },
-  methods: {
-    getList() {
-      this.$toast.loading({
-        message: "加载中...",
-        forbidClick: true,
-      });
-      this.empty = false;
-      this.$http
-        .post(
-          "/order/all",
-          {
-            size: 20,
-            query: {
-              userId: this.$store.state.userInfo.id,
-              status: this.status,
-              type: this.type,
-            },
-            sort: "createdAt,desc",
-          },
-          { body: "json" }
-        )
-        .then((res) => {
-          this.list = res.content;
-          this.empty = res.empty;
-          this.scrollRefreash();
-        });
+    name: 'discover',
+    inject: ['bs'],
+    components: {
+        OrderInfo
     },
-    changeStatus(name) {
-      this.$router.replace({
-        path: "/orders",
-        query: {
-          status: name,
-          type: this.type,
-        },
-      });
-      this.$nextTick(() => {
-        this.bs.value.scrollTo(0, 0);
-      });
-      this.getList();
+    data() {
+        return {
+            active: 'explore',
+            stiky: null,
+            status: 'PROCESSING,FINISH',
+            type: 'DEFAULT',
+            list: [],
+            tabs: [
+                {
+                    status: 'PROCESSING,FINISH',
+                    name: '全部'
+                },
+                {
+                    status: 'PROCESSING',
+                    name: '交易中'
+                },
+                {
+                    status: 'FINISH',
+                    name: '已完成'
+                }
+            ],
+            empty: false
+        };
     },
-    change(isFixed) {
-      if (isFixed) {
+    beforeUnmount() {
+        if (this.stiky.parentNode.nodeName == 'BODY') {
+            this.$nextTick(() => {
+                document.body.removeChild(this.stiky);
+            });
+        }
+    },
+    mounted() {
+        if (this.$route.query.status) {
+            this.status = this.$route.query.status;
+        }
         this.$nextTick(() => {
-          document.body.appendChild(this.stiky);
+            this.stiky = this.$refs.top.$el.childNodes[0];
         });
-      } else {
-        this.$refs.top.$el.appendChild(this.stiky);
-      }
+        this.getList();
     },
-    changeActive(active) {
-      if (this.type === active) {
-        return;
-      }
-      this.type = active;
-      this.$router.replace({
-        path: "/orders",
-        query: {
-          type: active,
-          status: this.status,
+    methods: {
+        getList() {
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+            this.empty = false;
+            this.$http
+                .post(
+                    '/order/all',
+                    {
+                        size: 20,
+                        query: {
+                            userId: this.$store.state.userInfo.id,
+                            status: this.status,
+                            type: this.type
+                        },
+                        sort: 'createdAt,desc'
+                    },
+                    { body: 'json' }
+                )
+                .then(res => {
+                    this.list = res.content;
+                    this.empty = res.empty;
+                    this.scrollRefreash();
+                });
         },
-      });
-      this.$nextTick(() => {
-        this.bs.value.scrollTo(0, 0);
-      });
-      this.getList();
-    },
-  },
+        changeStatus(name) {
+            this.$router.replace({
+                path: '/orders',
+                query: {
+                    status: name,
+                    type: this.type
+                }
+            });
+            this.$nextTick(() => {
+                this.bs.value.scrollTo(0, 0);
+            });
+            this.getList();
+        },
+        change(isFixed) {
+            if (isFixed) {
+                this.$nextTick(() => {
+                    document.body.appendChild(this.stiky);
+                });
+            } else {
+                this.$refs.top.$el.appendChild(this.stiky);
+            }
+        },
+        changeActive(active) {
+            if (this.type === active) {
+                return;
+            }
+            this.type = active;
+            this.$router.replace({
+                path: '/orders',
+                query: {
+                    type: active,
+                    status: this.status
+                }
+            });
+            this.$nextTick(() => {
+                this.bs.value.scrollTo(0, 0);
+            });
+            this.getList();
+        }
+    }
 };
 </script>
 
 <style lang="less" scoped>
 .top {
-  display: flex;
-  padding: 10px 16px;
-  background-color: @bg;
-  border-bottom: 1px solid #202122;
-  .top-btn {
-    flex-grow: 1;
-    .btn {
-      font-size: 16px;
-      line-height: 26px;
-      display: inline-block;
-      vertical-align: text-bottom;
+    display: flex;
+    padding: 10px 16px;
+    background-color: @bg;
+    border-bottom: 1px solid #202122;
+    .top-btn {
+        flex-grow: 1;
+        .btn {
+            font-size: 16px;
+            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;
-  min-height: 100vh;
+    background-color: @bg3;
+    min-height: 100vh;
 }
 
 .list {
-  padding-bottom: 100px;
+    padding-bottom: 100px;
 }
 
 .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-tabs__nav--line.van-tabs__nav--complete {
-  padding-left: 16px;
-  padding-right: 16px;
+    padding-left: 16px;
+    padding-right: 16px;
 }
 /deep/.van-tab {
-  color: #fff;
-  flex-grow: 0;
-  padding: 20px 0;
-  flex-shrink: 0;
-  margin-right: 50px;
+    color: #fff;
+    flex-grow: 0;
+    padding: 20px 0;
+    flex-shrink: 0;
+    margin-right: 50px;
 
-  &.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/product/List.vue

@@ -1,170 +1,155 @@
 <template>
-  <div class="follow">
-    <van-sticky ref="top" @change="change">
-      <div class="top">
-        <div class="name">{{ pageName }}</div>
-      </div>
-      <van-tabs
-        v-model:active="sort"
-        :ellipsis="false"
-        line-width="16"
-        line-height="2"
-        @change="getList"
-      >
-        <van-tab
-          :title="item.label"
-          :name="
-            item.type === 'select'
-              ? sort === item.value[0]
-                ? item.value[1]
-                : item.value[0]
-              : item.value
-          "
-          :title-class="
-            item.type === 'select' && sort === item.value[0] ? '' : 'asc'
-          "
-          :key="index"
-          v-for="(item, index) in sourceOptions"
-        >
-          <template v-if="item.type === 'select'" #title>
-            <div class="tab">
-              <span>{{ item.label }}</span>
-              <van-icon size="8" name="arrow-up" />
-              <van-icon size="8" name="arrow-down" />
+    <div class="follow">
+        <van-sticky ref="top" @change="change">
+            <div class="top">
+                <div class="name">{{ pageName }}</div>
             </div>
-          </template>
-        </van-tab>
-      </van-tabs>
-    </van-sticky>
-    <div class="list">
-      <template v-for="(item, index) in list" :key="index">
-        <product-info
-          v-model:info="list[index]"
-          @update:info="init"
-        ></product-info>
-      </template>
-      <van-empty v-if="empty" description="没有任何藏品哦~" />
+            <van-tabs v-model:active="sort" :ellipsis="false" line-width="16" line-height="2" @change="getList">
+                <van-tab
+                    :title="item.label"
+                    :name="
+                        item.type === 'select' ? (sort === item.value[0] ? item.value[1] : item.value[0]) : item.value
+                    "
+                    :title-class="item.type === 'select' && sort === item.value[0] ? '' : 'asc'"
+                    :key="index"
+                    v-for="(item, index) in sourceOptions"
+                >
+                    <template v-if="item.type === 'select'" #title>
+                        <div class="tab">
+                            <span>{{ item.label }}</span>
+                            <van-icon size="8" name="arrow-up" />
+                            <van-icon size="8" name="arrow-down" />
+                        </div>
+                    </template>
+                </van-tab>
+            </van-tabs>
+        </van-sticky>
+        <div class="list">
+            <template v-for="(item, index) in list" :key="index">
+                <product-info v-model:info="list[index]" @update:info="init"></product-info>
+            </template>
+            <van-empty v-if="empty" description="没有任何藏品哦~" />
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
-import ProductInfo from "../../components/product/productInfo.vue";
-import product from "../../mixins/product";
+import ProductInfo from '../../components/product/productInfo.vue';
+import product from '../../mixins/product';
 export default {
-  components: { ProductInfo },
-  inject: ["bs"],
-  mixins: [product],
-  data() {
-    return {
-      list: [],
-      empty: false,
-      sort: "id,desc",
-      type: "",
-      sourceOptions: [
-        {
-          label: "全部",
-          value: "id,desc",
-        },
-        {
-          label: "最新",
-          value: "createdAt,desc",
-        },
-        {
-          label: "最热",
-          value: "likes,desc",
-        },
-        {
-          label: "价格",
-          value: ["price,desc", "price,asc"],
-          type: "select",
-        },
-      ],
-    };
-  },
-  computed: {
-    pageName() {
-      return this.getLabelName(this.type, this.typeOptions);
+    components: { ProductInfo },
+    inject: ['bs'],
+    mixins: [product],
+    data() {
+        return {
+            list: [],
+            empty: false,
+            sort: 'id,desc',
+            type: '',
+            sourceOptions: [
+                {
+                    label: '全部',
+                    value: 'id,desc'
+                },
+                {
+                    label: '最新',
+                    value: 'createdAt,desc'
+                },
+                {
+                    label: '最热',
+                    value: 'likes,desc'
+                },
+                {
+                    label: '价格',
+                    value: ['price,desc', 'price,asc'],
+                    type: 'select'
+                }
+            ]
+        };
     },
-  },
-  mounted() {
-    if (this.$route.query.type) {
-      this.type = this.$route.query.type;
-    }
-    this.$nextTick(() => {
-      this.stiky = this.$refs.top.$el.childNodes[0];
-    });
-    this.getList();
-  },
-  beforeUnmount() {
-    if (this.stiky.parentNode.nodeName == "BODY") {
-      this.$nextTick(() => {
-        document.body.removeChild(this.stiky);
-      });
-    }
-  },
-  methods: {
-    change(isFixed) {
-      if (isFixed) {
+    computed: {
+        pageName() {
+            return this.getLabelName(this.type, this.typeOptions);
+        }
+    },
+    mounted() {
+        if (this.$route.query.type) {
+            this.type = this.$route.query.type;
+        }
         this.$nextTick(() => {
-          document.body.appendChild(this.stiky);
+            this.stiky = this.$refs.top.$el.childNodes[0];
         });
-      } else {
-        this.$refs.top.$el.appendChild(this.stiky);
-      }
+        this.getList();
     },
-    getList() {
-      this.$toast.loading({
-        message: "加载中...",
-        forbidClick: true,
-      });
-      this.$http
-        .post(
-          "/collection/all",
-          {
-            page: 0,
-            size: 20,
-            query: {
-              type: this.type,
-              onShelf: true,
-              del: false
-            },
-            sort: this.sort,
-          },
-          { body: "json" }
-        )
-        .then((res) => {
-          this.list = res.content;
-          this.empty = res.empty;
-          this.scrollRefreash();
-        });
+    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);
+            }
+        },
+        getList() {
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+            this.$http
+                .post(
+                    '/collection/all',
+                    {
+                        page: 0,
+                        size: 20,
+                        query: {
+                            type: this.type,
+                            onShelf: true,
+                            del: false
+                        },
+                        sort: this.sort
+                    },
+                    { body: 'json' }
+                )
+                .then(res => {
+                    this.list = res.content;
+                    this.empty = res.empty;
+                    this.scrollRefreash();
+                });
+        }
+    }
 };
 </script>
 
 <style lang="less" scoped>
 .follow {
-  background-color: #0f0f0f;
-  padding-bottom: 100px;
+    background-color: #0f0f0f;
+    padding-bottom: 100px;
 }
 .top {
-  background-color: #181818;
-  padding: 0 16px;
-  height: 50px;
-  display: flex;
-  align-items: center;
-  .name {
-    font-size: 20px;
-    // font-weight: bold;
-    color: @prim;
-    line-height: 30px;
-  }
+    background-color: #181818;
+    padding: 0 16px;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    .name {
+        font-size: 20px;
+        // font-weight: bold;
+        color: @prim;
+        line-height: 30px;
+    }
 }
 /deep/.van-tabs {
-  .van-tabs__nav {
-    padding-left: 16px;
-  }
+    .van-tabs__nav {
+        padding-left: 16px;
+    }
 }
 // /deep/.van-tab {
 // flex-grow: 0;
@@ -172,36 +157,36 @@ export default {
 // margin-right: 50px;
 
 .tab {
-  position: relative;
-  padding-right: 14px;
-  .van-icon {
-    position: absolute;
-    right: 0;
+    position: relative;
+    padding-right: 14px;
+    .van-icon {
+        position: absolute;
+        right: 0;
 
-    &.van-icon-arrow-down {
-      top: 8px;
-    }
+        &.van-icon-arrow-down {
+            top: 8px;
+        }
 
-    &.van-icon-arrow-up {
-      bottom: 8px;
+        &.van-icon-arrow-up {
+            bottom: 8px;
+        }
     }
-  }
 }
 /deep/.van-tab--active {
-  .tab {
-    .van-icon-arrow-up {
-      color: #646566;
-    }
-  }
-  &.asc {
     .tab {
-      .van-icon-arrow-up {
-        color: @prim;
-      }
-      .van-icon-arrow-down {
-        color: #646566;
-      }
+        .van-icon-arrow-up {
+            color: #646566;
+        }
+    }
+    &.asc {
+        .tab {
+            .van-icon-arrow-up {
+                color: @prim;
+            }
+            .van-icon-arrow-down {
+                color: #646566;
+            }
+        }
     }
-  }
 }
 </style>

src/main/nine-space/src/views/product/Search.vue

@@ -1,147 +1,144 @@
 <template>
-  <div class="search">
-    <van-sticky ref="top" @change="change">
-      <van-search
-        ref="top"
-        shape="round"
-        v-model="search"
-        placeholder="请输入"
-        show-action
-        autofocus
-        :left-icon="require('../../assets/svgs/icon-sosuo.svg')"
-        @search="getList"
-        @cancel="$router.go(-1)"
-      />
-    </van-sticky>
-    <div class="list">
-      <template v-for="(item, index) in list" :key="index">
-        <product-info
-          v-model:info="list[index]"
-          @update:info="init"
-        ></product-info>
-      </template>
-      <van-empty v-if="empty" description="没有任何藏品哦~" />
+    <div class="search">
+        <van-sticky ref="top" @change="change">
+            <van-search
+                ref="top"
+                shape="round"
+                v-model="search"
+                placeholder="请输入"
+                show-action
+                autofocus
+                :left-icon="require('../../assets/svgs/icon-sosuo.svg')"
+                @search="getList"
+                @cancel="$router.go(-1)"
+            />
+        </van-sticky>
+        <div class="list">
+            <template v-for="(item, index) in list" :key="index">
+                <product-info v-model:info="list[index]" @update:info="init"></product-info>
+            </template>
+            <van-empty v-if="empty" description="没有任何藏品哦~" />
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
-import ProductInfo from "../../components/product/productInfo.vue";
-import product from "../../mixins/product";
+import ProductInfo from '../../components/product/productInfo.vue';
+import product from '../../mixins/product';
 export default {
-  name: "Search",
-  components: { ProductInfo },
-  inject: ["bs", "setKeeps"],
-  mixins: [product],
-  data() {
-    return {
-      list: [],
-      empty: false,
-      search: "",
-      stiky: null,
-      type: "",
-      minterId: "",
-    };
-  },
-  beforeRouteLeave(to, from, next) {
-    if (to.name !== "productDetail") {
-      this.setKeeps([]);
-    }
-    next();
-    // ...
-  },
-  beforeUnmount() {
-    if (this.stiky.parentNode.nodeName == "BODY") {
-      this.$nextTick(() => {
-        document.body.removeChild(this.stiky);
-      });
-    }
-  },
-  computed: {
-    pageName() {
-      return this.getLabelName(this.type, this.typeOptions);
+    name: 'Search',
+    components: { ProductInfo },
+    inject: ['bs', 'setKeeps'],
+    mixins: [product],
+    data() {
+        return {
+            list: [],
+            empty: false,
+            search: '',
+            stiky: null,
+            type: '',
+            minterId: ''
+        };
     },
-  },
-  mounted() {
-    this.setKeeps(["Search"]);
-    if (this.$route.query.type) {
-      this.type = this.$route.query.type;
-    }
-    if (this.$route.query.minterId) {
-      this.minterId = this.$route.query.minterId;
-    }
-    this.$nextTick(() => {
-      this.stiky = this.$refs.top.$el.childNodes[0];
-    });
-  },
-  methods: {
-    change(isFixed) {
-      if (isFixed) {
-        this.$nextTick(() => {
-          document.body.appendChild(this.stiky);
-        });
-      } else {
-        this.$refs.top.$el.appendChild(this.stiky);
-      }
+    beforeRouteLeave(to, from, next) {
+        if (to.name !== 'productDetail') {
+            this.setKeeps([]);
+        }
+        next();
+        // ...
+    },
+    beforeUnmount() {
+        if (this.stiky.parentNode.nodeName == 'BODY') {
+            this.$nextTick(() => {
+                document.body.removeChild(this.stiky);
+            });
+        }
     },
-    getList(search) {
-      this.search = search;
-      this.$toast.loading({
-        message: "加载中...",
-        forbidClick: true,
-      });
-      this.$http
-        .post(
-          "/collection/all",
-          {
-            page: 0,
-            size: 20,
-            query: {
-              onShelf: true,
-              type: this.type,
-              minterId: this.minterId,
-              del: false,
-            },
-            sort: "createdAt,desc",
-            search: this.search,
-          },
-          { body: "json" }
-        )
-        .then((res) => {
-          this.list = res.content;
-          this.empty = res.empty;
-          this.scrollRefreash();
+    computed: {
+        pageName() {
+            return this.getLabelName(this.type, this.typeOptions);
+        }
+    },
+    mounted() {
+        this.setKeeps(['Search']);
+        if (this.$route.query.type) {
+            this.type = this.$route.query.type;
+        }
+        if (this.$route.query.minterId) {
+            this.minterId = this.$route.query.minterId;
+        }
+        this.$nextTick(() => {
+            this.stiky = this.$refs.top.$el.childNodes[0];
         });
     },
-  },
+    methods: {
+        change(isFixed) {
+            if (isFixed) {
+                this.$nextTick(() => {
+                    document.body.appendChild(this.stiky);
+                });
+            } else {
+                this.$refs.top.$el.appendChild(this.stiky);
+            }
+        },
+        getList(search) {
+            this.search = search;
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+            this.$http
+                .post(
+                    '/collection/all',
+                    {
+                        page: 0,
+                        size: 20,
+                        query: {
+                            onShelf: true,
+                            type: this.type,
+                            minterId: this.minterId,
+                            del: false
+                        },
+                        sort: 'createdAt,desc',
+                        search: this.search
+                    },
+                    { body: 'json' }
+                )
+                .then(res => {
+                    this.list = res.content;
+                    this.empty = res.empty;
+                    this.scrollRefreash();
+                });
+        }
+    }
 };
 </script>
 
 <style lang="less" scoped>
 .search {
-  background-color: #0f0f0f;
-  padding-bottom: 100px;
+    background-color: #0f0f0f;
+    padding-bottom: 100px;
 }
 .top {
-  background-color: #181818;
-  padding: 0 16px;
-  height: 50px;
-  display: flex;
-  align-items: center;
-  .name {
-    font-size: 20px;
-    // font-weight: bold;
-    color: @prim;
-    line-height: 30px;
-  }
+    background-color: #181818;
+    padding: 0 16px;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    .name {
+        font-size: 20px;
+        // font-weight: bold;
+        color: @prim;
+        line-height: 30px;
+    }
 }
 /deep/.van-tabs {
-  .van-tabs__nav {
-    padding-left: 16px;
-  }
+    .van-tabs__nav {
+        padding-left: 16px;
+    }
 }
 .list {
-  padding: 8px 8px 100px;
+    padding: 8px 8px 100px;
 }
 // /deep/.van-tab {
 // flex-grow: 0;
@@ -149,46 +146,46 @@ export default {
 // margin-right: 50px;
 
 .tab {
-  position: relative;
-  padding-right: 14px;
-  .van-icon {
-    position: absolute;
-    right: 0;
+    position: relative;
+    padding-right: 14px;
+    .van-icon {
+        position: absolute;
+        right: 0;
 
-    &.van-icon-arrow-down {
-      top: 8px;
-    }
+        &.van-icon-arrow-down {
+            top: 8px;
+        }
 
-    &.van-icon-arrow-up {
-      bottom: 8px;
+        &.van-icon-arrow-up {
+            bottom: 8px;
+        }
     }
-  }
 }
 /deep/.van-tab--active {
-  .tab {
-    .van-icon-arrow-up {
-      color: #646566;
-    }
-  }
-  &.asc {
     .tab {
-      .van-icon-arrow-up {
-        color: @prim;
-      }
-      .van-icon-arrow-down {
-        color: #646566;
-      }
+        .van-icon-arrow-up {
+            color: #646566;
+        }
+    }
+    &.asc {
+        .tab {
+            .van-icon-arrow-up {
+                color: @prim;
+            }
+            .van-icon-arrow-down {
+                color: #646566;
+            }
+        }
     }
-  }
 }
 /deep/.van-search {
-  .van-field__left-icon {
-    display: flex;
-    align-items: center;
-  }
-  .van-icon {
-    display: flex;
-    align-items: center;
-  }
+    .van-field__left-icon {
+        display: flex;
+        align-items: center;
+    }
+    .van-icon {
+        display: flex;
+        align-items: center;
+    }
 }
 </style>

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

@@ -1,60 +1,60 @@
 <template>
-  <div class="follow">
-    <van-sticky>
-      <div class="top">
-        <div class="name">我的粉丝</div>
-      </div>
-    </van-sticky>
-    <div class="list">
-      <template v-for="(item, index) in list" :key="index">
-        <creator-info isFollow v-model:info="list[index]"></creator-info>
-      </template>
-      <van-empty v-if="empty" description="还没有任何粉丝关注你哦~" />
+    <div class="follow">
+        <van-sticky>
+            <div class="top">
+                <div class="name">我的粉丝</div>
+            </div>
+        </van-sticky>
+        <div class="list">
+            <template v-for="(item, index) in list" :key="index">
+                <creator-info isFollow v-model:info="list[index]"></creator-info>
+            </template>
+            <van-empty v-if="empty" description="还没有任何粉丝关注你哦~" />
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
-import CreatorInfo from "../../components/creator/CreatorInfo.vue";
+import CreatorInfo from '../../components/creator/CreatorInfo.vue';
 export default {
-  components: { CreatorInfo },
-  inject: ["bs"],
-  data() {
-    return {
-      list: [],
-      empty: false,
-    };
-  },
-  mounted() {
-    this.$toast.loading({
-      message: "加载中...",
-      forbidClick: true,
-    });
-    this.empty = false;
-    this.$http.get("/user/myFollowers").then((res) => {
-      this.list = res;
-      this.empty = res.length === 0;
-      this.scrollRefreash();
-    });
-  },
+    components: { CreatorInfo },
+    inject: ['bs'],
+    data() {
+        return {
+            list: [],
+            empty: false
+        };
+    },
+    mounted() {
+        this.$toast.loading({
+            message: '加载中...',
+            forbidClick: true
+        });
+        this.empty = false;
+        this.$http.get('/user/myFollowers').then(res => {
+            this.list = res;
+            this.empty = res.length === 0;
+            this.scrollRefreash();
+        });
+    }
 };
 </script>
 
 <style lang="less" scoped>
 .follow {
-  background-color: #0f0f0f;
+    background-color: #0f0f0f;
 }
 .top {
-  background-color: #181818;
-  padding: 0 16px;
-  height: 50px;
-  display: flex;
-  align-items: center;
-  .name {
-    font-size: 20px;
-    font-weight: bold;
-    color: #ffffff;
-    line-height: 30px;
-  }
+    background-color: #181818;
+    padding: 0 16px;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    .name {
+        font-size: 20px;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 30px;
+    }
 }
 </style>

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

@@ -1,75 +1,72 @@
 <template>
-  <div class="follow">
-    <van-sticky>
-      <div class="top">
-        <div class="name">我关注的</div>
-      </div>
-    </van-sticky>
-    <div class="list">
-      <template v-for="(item, index) in list" :key="index">
-        <creator-info
-          v-model:info="list[index]"
-          @update:info="init"
-        ></creator-info>
-      </template>
-      <van-empty v-if="empty" description="你还没有任何关注哦~" />
+    <div class="follow">
+        <van-sticky>
+            <div class="top">
+                <div class="name">我关注的</div>
+            </div>
+        </van-sticky>
+        <div class="list">
+            <template v-for="(item, index) in list" :key="index">
+                <creator-info v-model:info="list[index]" @update:info="init"></creator-info>
+            </template>
+            <van-empty v-if="empty" description="你还没有任何关注哦~" />
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
-import CreatorInfo from "../../components/creator/CreatorInfo.vue";
+import CreatorInfo from '../../components/creator/CreatorInfo.vue';
 export default {
-  components: { CreatorInfo },
-  inject: ["bs"],
-  data() {
-    return {
-      list: [],
-      empty: false,
-    };
-  },
-  computed: {
-    showList() {
-      return [...this.list].filter((item) => {
-        return item.follow;
-      });
+    components: { CreatorInfo },
+    inject: ['bs'],
+    data() {
+        return {
+            list: [],
+            empty: false
+        };
     },
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    init() {
-      this.$toast.loading({
-        message: "加载中...",
-        forbidClick: true,
-      });
-      this.empty = false;
-      this.$http.get("/user/myFollows").then((res) => {
-        this.list = res;
-        this.empty = res.length === 0;
-        this.scrollRefreash();
-      });
+    computed: {
+        showList() {
+            return [...this.list].filter(item => {
+                return item.follow;
+            });
+        }
     },
-  },
+    mounted() {
+        this.init();
+    },
+    methods: {
+        init() {
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+            this.empty = false;
+            this.$http.get('/user/myFollows').then(res => {
+                this.list = res;
+                this.empty = res.length === 0;
+                this.scrollRefreash();
+            });
+        }
+    }
 };
 </script>
 
 <style lang="less" scoped>
 .follow {
-  background-color: #0f0f0f;
+    background-color: #0f0f0f;
 }
 .top {
-  background-color: #181818;
-  padding: 0 16px;
-  height: 50px;
-  display: flex;
-  align-items: center;
-  .name {
-    font-size: 20px;
-    font-weight: bold;
-    color: #ffffff;
-    line-height: 30px;
-  }
+    background-color: #181818;
+    padding: 0 16px;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    .name {
+        font-size: 20px;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 30px;
+    }
 }
 </style>

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

@@ -1,136 +1,125 @@
 <template>
-  <div class="follow">
-    <van-sticky ref="top" @change="change">
-      <div class="top">
-        <div class="name">我赞过的</div>
-      </div>
-      <van-tabs
-        v-model:active="type"
-        :ellipsis="false"
-        line-width="16"
-        line-height="2"
-      >
-        <van-tab
-          :title="item.label"
-          :name="item.type"
-          :key="index"
-          v-for="(item, index) in typeOptions"
-        ></van-tab>
-      </van-tabs>
-    </van-sticky>
-    <div class="list">
-      <template v-for="(item, index) in showList" :key="index">
-        <product-info
-          v-model:info="list[item.index]"
-          @update:info="init"
-        ></product-info>
-      </template>
-      <van-empty
-        v-if="showList.length === 0"
-        description="你还没有赞过任何藏品哦~"
-      />
+    <div class="follow">
+        <van-sticky ref="top" @change="change">
+            <div class="top">
+                <div class="name">我赞过的</div>
+            </div>
+            <van-tabs v-model:active="type" :ellipsis="false" line-width="16" line-height="2">
+                <van-tab
+                    :title="item.label"
+                    :name="item.type"
+                    :key="index"
+                    v-for="(item, index) in typeOptions"
+                ></van-tab>
+            </van-tabs>
+        </van-sticky>
+        <div class="list">
+            <template v-for="(item, index) in showList" :key="index">
+                <product-info v-model:info="list[item.index]" @update:info="init"></product-info>
+            </template>
+            <van-empty v-if="showList.length === 0" description="你还没有赞过任何藏品哦~" />
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
-import ProductInfo from "../../components/product/productInfo.vue";
+import ProductInfo from '../../components/product/productInfo.vue';
 export default {
-  components: { ProductInfo },
-  inject: ["bs"],
-  data() {
-    return {
-      list: [],
-      empty: false,
-      type: "",
-      typeOptions: [
-        {
-          label: "全部",
-          type: "",
-        },
-        {
-          label: "收藏品",
-          type: "DEFAULT",
-        },
-        {
-          label: "数字盲盒",
-          type: "BLIND_BOX",
-        },
-      ],
-    };
-  },
-  computed: {
-    showList() {
-      return [...this.list]
-        .map((item, index) => {
-          return {
-            ...item,
-            index,
-          };
-        })
-        .filter((item) => {
-          return !this.type || this.type === item.type;
-        });
+    components: { ProductInfo },
+    inject: ['bs'],
+    data() {
+        return {
+            list: [],
+            empty: false,
+            type: '',
+            typeOptions: [
+                {
+                    label: '全部',
+                    type: ''
+                },
+                {
+                    label: '收藏品',
+                    type: 'DEFAULT'
+                },
+                {
+                    label: '数字盲盒',
+                    type: 'BLIND_BOX'
+                }
+            ]
+        };
     },
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    change(isFixed) {
-      if (isFixed) {
-        this.$nextTick(() => {
-          document.body.appendChild(this.stiky);
-        });
-      } else {
-        // this.$refs.top.$el.appendChild(this.stiky);
-      }
+    computed: {
+        showList() {
+            return [...this.list]
+                .map((item, index) => {
+                    return {
+                        ...item,
+                        index
+                    };
+                })
+                .filter(item => {
+                    return !this.type || this.type === item.type;
+                });
+        }
     },
-    init() {
-      this.$toast.loading({
-        message: "加载中...",
-        forbidClick: true,
-      });
-      this.empty = false;
-      this.$http.get("/collection/myLikes").then((res) => {
-        this.list = res;
-        this.empty = res.length === 0;
-        this.scrollRefreash();
-      });
+    mounted() {
+        this.init();
     },
-  },
+    methods: {
+        change(isFixed) {
+            if (isFixed) {
+                this.$nextTick(() => {
+                    document.body.appendChild(this.stiky);
+                });
+            } else {
+                // this.$refs.top.$el.appendChild(this.stiky);
+            }
+        },
+        init() {
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+            this.empty = false;
+            this.$http.get('/collection/myLikes').then(res => {
+                this.list = res;
+                this.empty = res.length === 0;
+                this.scrollRefreash();
+            });
+        }
+    }
 };
 </script>
 
 <style lang="less" scoped>
 .follow {
-  background-color: #0f0f0f;
-  padding-bottom: 100px;
+    background-color: #0f0f0f;
+    padding-bottom: 100px;
 }
 .list {
-  padding: 8px;
+    padding: 8px;
 }
 .top {
-  background-color: #181818;
-  padding: 0 16px;
-  height: 50px;
-  display: flex;
-  align-items: center;
-  .name {
-    font-size: 20px;
-    font-weight: bold;
-    color: #ffffff;
-    line-height: 30px;
-  }
+    background-color: #181818;
+    padding: 0 16px;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    .name {
+        font-size: 20px;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 30px;
+    }
 }
 /deep/.van-tabs {
-  .van-tabs__nav {
-    padding-left: 16px;
-  }
+    .van-tabs__nav {
+        padding-left: 16px;
+    }
 }
 /deep/.van-tab {
-  flex-grow: 0;
-  padding: 0 0 0 0;
-  margin-right: 50px;
+    flex-grow: 0;
+    padding: 0 0 0 0;
+    margin-right: 50px;
 }
 </style>

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

@@ -1,197 +1,187 @@
 <template>
-  <div class="wallet">
-    <div class="top">
-      <div class="text1">我的积分</div>
-      <div class="text2">
-        <img src="../../assets/svgs/icon_jiage.svg" alt="" />
-        <span>465.26</span>
-      </div>
-      <img src="../../assets/svgs/topBg.svg" class="top-img" alt="" />
-    </div>
+    <div class="wallet">
+        <div class="top">
+            <div class="text1">我的积分</div>
+            <div class="text2">
+                <img src="../../assets/svgs/icon_jiage.svg" alt="" />
+                <span>465.26</span>
+            </div>
+            <img src="../../assets/svgs/topBg.svg" class="top-img" alt="" />
+        </div>
 
-    <div class="title">
-      <span>积分记录</span>
-      <van-popover
-        v-model:show="showPopover"
-        :actions="actions"
-        theme="dark"
-        @select="onSelect"
-      >
-        <template #reference>
-          <van-button
-            class="select"
-            size="mini"
-            color="#1C1E25"
-            icon-position="right"
-            :icon="require('../../assets/svgs/icon_shaixuan_sanjiao.svg')"
-            >2021年9月</van-button
-          >
-        </template>
-      </van-popover>
-    </div>
-    <div class="list">
-      <div class="info">
-        <div class="info-text">
-          <div class="text1">提现</div>
-          <div class="text2">奶盖</div>
-          <div class="text2">09-03 09:56</div>
+        <div class="title">
+            <span>积分记录</span>
+            <van-popover v-model:show="showPopover" :actions="actions" theme="dark" @select="onSelect">
+                <template #reference>
+                    <van-button
+                        class="select"
+                        size="mini"
+                        color="#1C1E25"
+                        icon-position="right"
+                        :icon="require('../../assets/svgs/icon_shaixuan_sanjiao.svg')"
+                        >2021年9月</van-button
+                    >
+                </template>
+            </van-popover>
         </div>
-        <div class="text3">-320</div>
-      </div>
-      <div class="info">
-        <div class="info-text">
-          <div class="text1">提现</div>
-          <div class="text2">奶盖</div>
-          <div class="text2">09-03 09:56</div>
+        <div class="list">
+            <div class="info">
+                <div class="info-text">
+                    <div class="text1">提现</div>
+                    <div class="text2">奶盖</div>
+                    <div class="text2">09-03 09:56</div>
+                </div>
+                <div class="text3">-320</div>
+            </div>
+            <div class="info">
+                <div class="info-text">
+                    <div class="text1">提现</div>
+                    <div class="text2">奶盖</div>
+                    <div class="text2">09-03 09:56</div>
+                </div>
+                <div class="text3">-320</div>
+            </div>
         </div>
-        <div class="text3">-320</div>
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
-import { ref } from "vue";
+import { ref } from 'vue';
 export default {
-  setup() {
-    const showPopover = ref(false);
+    setup() {
+        const showPopover = ref(false);
 
-    // 通过 actions 属性来定义菜单选项
-    const actions = [
-      { text: "选项一" },
-      { text: "选项二" },
-      { text: "选项三" },
-    ];
+        // 通过 actions 属性来定义菜单选项
+        const actions = [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }];
 
-    return {
-      actions,
-      showPopover,
-    };
-  },
-  methods: {
-    onSelect(action) {
-      console.log(action);
+        return {
+            actions,
+            showPopover
+        };
     },
-  },
+    methods: {
+        onSelect(action) {
+            console.log(action);
+        }
+    }
 };
 </script>
 
 <style lang="less" scoped>
 .top {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 50px 16px 53px;
-  background-color: @bg3;
-  position: relative;
-  .text1 {
-    font-size: 13px;
-    color: #939599;
-    line-height: 18px;
-  }
-  .text2 {
-    span {
-      font-size: 36px;
-      font-family: DIN;
-      font-weight: bold;
-      color: #fdfb60;
-      line-height: 44px;
-      background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
-      background-clip: text;
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 50px 16px 53px;
+    background-color: @bg3;
+    position: relative;
+    .text1 {
+        font-size: 13px;
+        color: #939599;
+        line-height: 18px;
+    }
+    .text2 {
+        span {
+            font-size: 36px;
+            font-family: DIN;
+            font-weight: bold;
+            color: #fdfb60;
+            line-height: 44px;
+            background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
+            background-clip: text;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
     }
-  }
 
-  .btns {
-    margin-top: 20px;
-    .van-button {
-      width: 90px;
+    .btns {
+        margin-top: 20px;
+        .van-button {
+            width: 90px;
 
-      &.van-button--primary {
-        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;
-      }
-    }
+            &.van-button--primary {
+                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;
+            }
+        }
 
-    .van-button + .van-button {
-      margin-left: 32px;
+        .van-button + .van-button {
+            margin-left: 32px;
+        }
     }
-  }
 }
 
 .top-img {
-  display: block;
-  width: 100%;
-  position: absolute;
-  bottom: 0;
-  left: 0;
+    display: block;
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
 }
 
 .title {
-  padding: 20px 16px;
-  font-size: 16px;
-  font-weight: bold;
-  color: #ffffff;
-  line-height: 22px;
-  display: flex;
-  justify-content: space-between;
+    padding: 20px 16px;
+    font-size: 16px;
+    font-weight: bold;
+    color: #ffffff;
+    line-height: 22px;
+    display: flex;
+    justify-content: space-between;
 }
 .select {
-  min-width: 100px;
-  height: 32px;
-  color: #939599 !important;
+    min-width: 100px;
+    height: 32px;
+    color: #939599 !important;
 
-  /deep/.van-icon__image {
-    width: 20px;
-    height: 20px;
-    display: block;
-  }
+    /deep/.van-icon__image {
+        width: 20px;
+        height: 20px;
+        display: block;
+    }
 }
 
 .info {
-  display: flex;
-  padding: 0 16px;
-  height: 90px;
-  align-items: center;
-  position: relative;
-  .info-text {
-    flex-grow: 1;
-    .text1 {
-      font-size: 14px;
-      color: #ffffff;
-      line-height: 20px;
-      margin-bottom: 4px;
-    }
+    display: flex;
+    padding: 0 16px;
+    height: 90px;
+    align-items: center;
+    position: relative;
+    .info-text {
+        flex-grow: 1;
+        .text1 {
+            font-size: 14px;
+            color: #ffffff;
+            line-height: 20px;
+            margin-bottom: 4px;
+        }
 
-    .text2 {
-      font-size: 12px;
-      color: #969799;
-      line-height: 17px;
-      margin-bottom: 2px;
+        .text2 {
+            font-size: 12px;
+            color: #969799;
+            line-height: 17px;
+            margin-bottom: 2px;
+        }
     }
-  }
 
-  .text3 {
-    font-size: 16px;
-    font-weight: bold;
-    color: #ffffff;
-    line-height: 24px;
-  }
+    .text3 {
+        font-size: 16px;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 24px;
+    }
 
-  &::before {
-    content: "";
-    position: absolute;
-    left: 16px;
-    right: 16px;
-    top: 0;
-    height: 1px;
-    background-color: #202122;
-  }
+    &::before {
+        content: '';
+        position: absolute;
+        left: 16px;
+        right: 16px;
+        top: 0;
+        height: 1px;
+        background-color: #202122;
+    }
 }
 </style>

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

@@ -1,201 +1,191 @@
 <template>
-  <div class="wallet">
-    <div class="top">
-      <div class="text1">个人账户余额</div>
-      <div class="text2">
-        <img src="../../assets/svgs/icon_jiage.svg" alt="" />
-        <span>465.26</span>
-      </div>
-      <div class="btns">
-        <van-button plain round color="#939599" size="mini">提现</van-button>
-        <van-button plain round type="primary" size="mini">充值</van-button>
-      </div>
-      <img src="../../assets/svgs/topBg.svg" class="top-img" alt="" />
-    </div>
+    <div class="wallet">
+        <div class="top">
+            <div class="text1">个人账户余额</div>
+            <div class="text2">
+                <img src="../../assets/svgs/icon_jiage.svg" alt="" />
+                <span>465.26</span>
+            </div>
+            <div class="btns">
+                <van-button plain round color="#939599" size="mini">提现</van-button>
+                <van-button plain round type="primary" size="mini">充值</van-button>
+            </div>
+            <img src="../../assets/svgs/topBg.svg" class="top-img" alt="" />
+        </div>
 
-    <div class="title">
-      <span>收入明细</span>
-      <van-popover
-        v-model:show="showPopover"
-        :actions="actions"
-        theme="dark"
-        @select="onSelect"
-      >
-        <template #reference>
-          <van-button
-            class="select"
-            size="mini"
-            color="#1C1E25"
-            icon-position="right"
-            :icon="require('../../assets/svgs/icon_shaixuan_sanjiao.svg')"
-            >2021年9月</van-button
-          >
-        </template>
-      </van-popover>
-    </div>
-    <div class="list">
-      <div class="info">
-        <div class="info-text">
-          <div class="text1">提现</div>
-          <div class="text2">奶盖</div>
-          <div class="text2">09-03 09:56</div>
+        <div class="title">
+            <span>收入明细</span>
+            <van-popover v-model:show="showPopover" :actions="actions" theme="dark" @select="onSelect">
+                <template #reference>
+                    <van-button
+                        class="select"
+                        size="mini"
+                        color="#1C1E25"
+                        icon-position="right"
+                        :icon="require('../../assets/svgs/icon_shaixuan_sanjiao.svg')"
+                        >2021年9月</van-button
+                    >
+                </template>
+            </van-popover>
         </div>
-        <div class="text3">-320</div>
-      </div>
-      <div class="info">
-        <div class="info-text">
-          <div class="text1">提现</div>
-          <div class="text2">奶盖</div>
-          <div class="text2">09-03 09:56</div>
+        <div class="list">
+            <div class="info">
+                <div class="info-text">
+                    <div class="text1">提现</div>
+                    <div class="text2">奶盖</div>
+                    <div class="text2">09-03 09:56</div>
+                </div>
+                <div class="text3">-320</div>
+            </div>
+            <div class="info">
+                <div class="info-text">
+                    <div class="text1">提现</div>
+                    <div class="text2">奶盖</div>
+                    <div class="text2">09-03 09:56</div>
+                </div>
+                <div class="text3">-320</div>
+            </div>
         </div>
-        <div class="text3">-320</div>
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
-import { ref } from "vue";
+import { ref } from 'vue';
 export default {
-  setup() {
-    const showPopover = ref(false);
+    setup() {
+        const showPopover = ref(false);
 
-    // 通过 actions 属性来定义菜单选项
-    const actions = [
-      { text: "选项一" },
-      { text: "选项二" },
-      { text: "选项三" },
-    ];
+        // 通过 actions 属性来定义菜单选项
+        const actions = [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }];
 
-    return {
-      actions,
-      showPopover,
-    };
-  },
-  methods: {
-    onSelect(action) {
-      console.log(action);
+        return {
+            actions,
+            showPopover
+        };
     },
-  },
+    methods: {
+        onSelect(action) {
+            console.log(action);
+        }
+    }
 };
 </script>
 
 <style lang="less" scoped>
 .top {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 50px 16px 53px;
-  background-color: @bg3;
-  position: relative;
-  .text1 {
-    font-size: 13px;
-    color: #939599;
-    line-height: 18px;
-  }
-  .text2 {
-    span {
-      font-size: 36px;
-      font-family: DIN;
-      font-weight: bold;
-      color: #fdfb60;
-      line-height: 44px;
-      background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
-      background-clip: text;
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 50px 16px 53px;
+    background-color: @bg3;
+    position: relative;
+    .text1 {
+        font-size: 13px;
+        color: #939599;
+        line-height: 18px;
+    }
+    .text2 {
+        span {
+            font-size: 36px;
+            font-family: DIN;
+            font-weight: bold;
+            color: #fdfb60;
+            line-height: 44px;
+            background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
+            background-clip: text;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
     }
-  }
 
-  .btns {
-    margin-top: 20px;
-    .van-button {
-      width: 90px;
+    .btns {
+        margin-top: 20px;
+        .van-button {
+            width: 90px;
 
-      &.van-button--primary {
-        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;
-      }
-    }
+            &.van-button--primary {
+                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;
+            }
+        }
 
-    .van-button + .van-button {
-      margin-left: 32px;
+        .van-button + .van-button {
+            margin-left: 32px;
+        }
     }
-  }
 }
 
 .top-img {
-  display: block;
-  width: 100%;
-  position: absolute;
-  bottom: 0;
-  left: 0;
+    display: block;
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
 }
 
 .title {
-  padding: 20px 16px;
-  font-size: 16px;
-  font-weight: bold;
-  color: #ffffff;
-  line-height: 22px;
-  display: flex;
-  justify-content: space-between;
+    padding: 20px 16px;
+    font-size: 16px;
+    font-weight: bold;
+    color: #ffffff;
+    line-height: 22px;
+    display: flex;
+    justify-content: space-between;
 }
 .select {
-  min-width: 100px;
-  height: 32px;
-  color: #939599 !important;
+    min-width: 100px;
+    height: 32px;
+    color: #939599 !important;
 
-  /deep/.van-icon__image {
-    width: 20px;
-    height: 20px;
-    display: block;
-  }
+    /deep/.van-icon__image {
+        width: 20px;
+        height: 20px;
+        display: block;
+    }
 }
 
 .info {
-  display: flex;
-  padding: 0 16px;
-  height: 90px;
-  align-items: center;
-  position: relative;
-  .info-text {
-    flex-grow: 1;
-    .text1 {
-      font-size: 14px;
-      color: #ffffff;
-      line-height: 20px;
-      margin-bottom: 4px;
-    }
+    display: flex;
+    padding: 0 16px;
+    height: 90px;
+    align-items: center;
+    position: relative;
+    .info-text {
+        flex-grow: 1;
+        .text1 {
+            font-size: 14px;
+            color: #ffffff;
+            line-height: 20px;
+            margin-bottom: 4px;
+        }
 
-    .text2 {
-      font-size: 12px;
-      color: #969799;
-      line-height: 17px;
-      margin-bottom: 2px;
+        .text2 {
+            font-size: 12px;
+            color: #969799;
+            line-height: 17px;
+            margin-bottom: 2px;
+        }
     }
-  }
 
-  .text3 {
-    font-size: 16px;
-    font-weight: bold;
-    color: #ffffff;
-    line-height: 24px;
-  }
+    .text3 {
+        font-size: 16px;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 24px;
+    }
 
-  &::before {
-    content: "";
-    position: absolute;
-    left: 16px;
-    right: 16px;
-    top: 0;
-    height: 1px;
-    background-color: #202122;
-  }
+    &::before {
+        content: '';
+        position: absolute;
+        left: 16px;
+        right: 16px;
+        top: 0;
+        height: 1px;
+        background-color: #202122;
+    }
 }
 </style>

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
 };