下单

src/main/java/com/izouma/nineth/security/WebSecurityConfig.java

@@ -80,7 +80,9 @@ public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
                 .antMatchers("/MP_verify*").permitAll()
                 .antMatchers("/payOrder/**").permitAll()
                 .antMatchers("/notify/**").permitAll()
+                .antMatchers("/banner/all").permitAll()
                 .antMatchers("/collection/all").permitAll()
+                .antMatchers("/collection/get/**").permitAll()
                 .antMatchers("/user/all").permitAll()
                 // all other requests need to be authenticated
                 .anyRequest().authenticated().and()

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

@@ -13,5 +13,6 @@ module.exports = {
     "no-unused-vars": "off",
     "no-empty": ["error", { allowEmptyCatch: true }],
     "vue/custom-event-name-casing": 0,
+    "vue/no-parsing-error": ["error"],
   },
 };

src/main/nine-space/src/assets/svgs/icon_gouxuan_huise.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon_gouxuan_huise</title>
+    <g id="第九空间" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="确认订单" transform="translate(-335.000000, -530.000000)" stroke="#C8C9CC">
+            <g id="icon_gouxuan" transform="translate(335.000000, 530.000000)">
+                <circle cx="12" cy="12" r="8.5"></circle>
+            </g>
+        </g>
+    </g>
+</svg>

src/main/nine-space/src/assets/svgs/icon_gouxuan_pre.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon_gouxuan_pre</title>
+    <defs>
+        <linearGradient x1="6.08107286%" y1="11.0398276%" x2="94.0756092%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#FDFB60" offset="0%"></stop>
+            <stop stop-color="#FF8F3E" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="第九空间" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="确认订单" transform="translate(-337.000000, -470.000000)">
+            <g id="编组-2" transform="translate(0.000000, 452.000000)">
+                <g id="icon/gouxuan_pre" transform="translate(337.000000, 18.000000)">
+                    <circle id="椭圆形" fill="url(#linearGradient-1)" cx="12" cy="12" r="9"></circle>
+                    <polyline id="路径" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" transform="translate(11.989749, 11.318245) rotate(-315.000000) translate(-11.989749, -11.318245) " points="10.2397494 14.8182451 13.7397494 14.8182451 13.7397494 7.81824507"></polyline>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

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

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>png-decp</title>
+    <g id="第九空间" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="确认订单" transform="translate(-16.000000, -590.000000)" fill="#E50020" fill-rule="nonzero">
+            <g id="编组-2" transform="translate(0.000000, 572.000000)">
+                <g id="编组-4" transform="translate(16.000000, 18.000000)">
+                    <path d="M8.15073047,4.12105664 L8.14707812,4.12032617 C9.34636221,3.53262766 10.6644591,3.22781372 12,3.22932057 C13.3823262,3.22932057 14.6898652,3.55051758 15.8529434,4.12032617 L15.8492695,4.12032617 L11.9992695,9.15686523 L8.15073047,4.12105664 Z M10.6983477,14.2029434 L5.13670898,14.2029434 L5.13670898,16.2731348 L10.6983477,16.2731348 L10.6983477,20.6738652 C6.59897852,20.0637305 3.42657422,16.6178086 3.23957422,12.3945391 L10.6983477,12.3945391 L10.6983477,14.2029434 L10.6983477,14.2029434 Z M6.21765234,5.40805664 L6.21765234,5.41246094 L9.97230469,10.3243262 L3.39142578,10.3243262 C3.76212015,8.41706721 4.75665323,6.68727621 6.21842578,5.40732617 L6.21765234,5.40805664 Z M20.6085742,10.3243262 L14.0276953,10.3243262 L17.7823047,5.41246094 L17.7801133,5.4065957 C19.2424785,6.68658909 20.2375337,8.41665112 20.6085742,10.3243262 L20.6085742,10.3243262 Z M20.4883047,14.2036738 C19.6171348,17.5711133 16.7974609,20.1539434 13.3016738,20.6738652 L13.3016738,16.2738652 L18.8632695,16.2738652 L18.8632695,14.2029434 L13.3016738,14.2029434 L13.3016738,12.3945391 L22.9897305,12.3945391 C22.9948867,12.2632695 23,12.132 23,12 C23,5.92507813 18.0749219,1 12,1 C5.92507812,1 1,5.92507813 1,12 C1,18.0749219 5.92507812,23 12,23 C17.3203262,23 21.7584609,19.2226172 22.7792695,14.2029434 L20.4883262,14.2029434 L20.4883047,14.2036738 Z" id="png-decp"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/main/nine-space/src/assets/svgs/wechat.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组</title>
+    <g id="第九空间" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="确认订单" transform="translate(-16.000000, -530.000000)" fill-rule="nonzero">
+            <g id="编组-2" transform="translate(0.000000, 512.000000)">
+                <g id="编组" transform="translate(16.000000, 18.000000)">
+                    <path d="M12,0 C5.37391303,0 0,5.37391303 0,12 C0,18.626087 5.37391303,24 12,24 C18.626087,24 24,18.626087 24,12 C24,5.37391303 18.626087,0 12,0 Z" id="路径" fill="#28C445"></path>
+                    <path d="M9.72173914,15.0782609 C9.02608696,15.0782609 8.46956523,14.9391304 7.80869564,14.7826087 L5.89565217,15.7565217 L6.4347826,14.0695652 C5.06086956,13.0956522 4.22608697,11.826087 4.22608697,10.3130435 C4.22608697,7.65217392 6.71304349,5.56521738 9.72173914,5.56521738 C12.4173913,5.56521738 14.8,7.2347826 15.2695652,9.47826087 C15.0956522,9.46086957 14.9217391,9.44347825 14.7478261,9.44347825 C12.1391304,9.47826087 10.0869565,11.4434783 10.0869565,13.8782609 C10.0869565,14.2782609 10.1565218,14.6608696 10.2608696,15.0434783 C10.0869565,15.0608696 9.89565219,15.0782609 9.72173914,15.0782609 L9.72173914,15.0782609 Z" id="路径" fill="#FFFFFF"></path>
+                    <path d="M17.8608696,17.0260869 L18.2782609,18.4173913 L16.7826087,17.5826087 C16.2434783,17.7217391 15.6869565,17.8608696 15.1304348,17.8608696 C12.5043478,17.8608696 10.4347826,16.0521739 10.4347826,13.8086957 C10.4173913,11.5826087 12.4869565,9.77391303 15.0956522,9.77391303 C17.5826087,9.77391303 19.7739131,11.6 19.7739131,13.826087 C19.7739131,15.0782609 18.9565218,16.1913043 17.8608696,17.0260869 L17.8608696,17.0260869 Z" id="路径" fill="#FFFFFF"></path>
+                    <path d="M7.98500852,8.4 C7.59250427,8.4 7.2,8.65945945 7.2,9.04864863 C7.2,9.43783781 7.59250425,9.69729729 7.98500852,9.69729729 C8.37751279,9.69729729 8.63918229,9.43783784 8.63918229,9.04864863 C8.63918229,8.64324322 8.37751279,8.4 7.98500852,8.4 Z M13.3001704,12.1621622 C13.0385009,12.1621622 12.7931857,12.4378378 12.7931857,12.6810811 C12.7931857,12.9567568 13.0548552,13.2 13.3001704,13.2 C13.6926746,13.2 13.9543441,12.9405405 13.9543441,12.6810811 C13.9543441,12.4216216 13.6926746,12.1621622 13.3001704,12.1621622 Z M11.6156729,9.69729729 C12.0081772,9.69729729 12.2698467,9.42162161 12.2698467,9.04864863 C12.2698467,8.65945945 12.0081772,8.4 11.6156729,8.4 C11.2231686,8.4 10.8306644,8.65945945 10.8306644,9.04864863 C10.8306644,9.43783781 11.2231687,9.69729729 11.6156729,9.69729729 Z M16.1458262,12.1621622 C15.8841567,12.1621622 15.6388416,12.4378378 15.6388416,12.6810811 C15.6388416,12.9567568 15.9005111,13.2 16.1458262,13.2 C16.5383305,13.2 16.8,12.9405405 16.8,12.6810811 C16.8,12.4216216 16.5383305,12.1621622 16.1458262,12.1621622 Z" id="形状" fill="#28C445"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/main/nine-space/src/assets/svgs/zhifubao.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组</title>
+    <g id="第九空间" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="确认订单" transform="translate(-16.000000, -470.000000)" fill-rule="nonzero">
+            <g id="编组-2" transform="translate(0.000000, 452.000000)">
+                <g id="编组" transform="translate(16.000000, 18.000000)">
+                    <path d="M0.0266370566,11.9433962 C0.0266370566,18.5493896 5.35405104,23.8768036 11.9600444,23.8768036 C18.5660377,23.8768036 23.8934517,18.5493896 23.8934517,11.9433962 C23.8934517,5.33740288 18.5660377,0.00998889623 11.9600444,0.00998889623 C5.35405104,0.00998889623 0.0266370566,5.33740288 0.0266370566,11.9433962 Z" id="路径" fill="#5A9EF7"></path>
+                    <path d="M14.4745838,13.4350721 C14.4745838,13.4350721 14.9007769,12.8384018 15.32697,11.6450611 C15.7957825,10.4517203 15.8384018,9.76981132 15.8384018,9.76981132 L12.4288568,9.72719202 L12.4288568,8.57647058 L16.5629301,8.53385128 L16.5629301,7.68146505 L12.3862375,7.68146505 L12.3862375,5.80621531 L10.3405105,5.80621531 L10.3405105,7.68146505 L6.41953384,7.68146505 L6.41953384,8.53385128 L10.2978912,8.49123195 L10.2978912,9.76981132 L7.22930077,9.76981132 L7.22930077,10.4517203 L13.6221976,10.4517203 C13.5795783,10.8779135 13.4517203,11.2614873 13.3238624,11.6450611 C13.0681465,12.2843507 12.8124307,12.8810211 12.8124306,12.8810211 C12.8124306,12.8810211 9.82907878,11.8155383 8.20954494,11.8155383 C6.63263041,11.8155383 4.71476137,12.454828 4.50166483,14.2874584 C4.33118759,16.1200888 5.39667037,17.1429523 6.9309656,17.4839068 C8.42264151,17.8248613 9.82907881,17.4839068 11.0650388,16.8872364 C12.3009989,16.290566 13.4943396,14.9267481 13.4943396,14.9267481 L19.8446171,18.0379578 C19.8446171,18.0379578 20.2281909,17.4412874 20.5265261,16.8872364 C20.7396226,16.5036626 20.9100999,16.0774695 21.0805771,15.6938957 L14.4745838,13.4350721 L14.4745838,13.4350721 Z M7.91120977,16.4610433 C5.65238624,16.4610433 5.22619313,15.3529412 5.22619313,14.5857936 C5.22619313,13.818646 5.69500557,12.9236404 7.61287458,12.7957825 C9.48812431,12.6679245 12.0879023,14.1596004 12.0879023,14.1596004 C12.0879023,14.1596004 10.1700333,16.4610433 7.91120977,16.4610433 L7.91120977,16.4610433 Z" id="形状" fill="#FFFFFF"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

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

@@ -1,7 +1,6 @@
 <template>
-  <div class="like" @click.stop="like">
-    <img v-if="isLike" src="../assets/svgs/like.svg" alt="" />
-    <img v-else src="../assets/svgs/dislike.svg" alt="" />
+  <div class="like" @click.prevent="like">
+    <img :src="isLike ? likeImg : disLikeImg" alt="" />
     <span><slot>16</slot></span>
   </div>
 </template>
@@ -14,15 +13,22 @@ export default {
       default: false,
     },
   },
+  data() {
+    return {
+      likeImg: require("../assets/svgs/like.svg"),
+      disLikeImg: require("../assets/svgs/dislike.svg"),
+    };
+  },
   methods: {
     like() {
-      this.$el.children[0].className += "rubberBand";
-      setTimeout(() => {
-        this.$el.children[0].className = this.$el.children[0].className.replace(
-          /rubberBand/g,
-          ""
-        );
-      }, 1000);
+      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");
+      });
     },
   },
 };
@@ -37,6 +43,9 @@ export default {
   img {
     vertical-align: middle;
     margin-right: 3px;
+    width: 18px;
+    height: 18px;
+    display: inline-block;
   }
 
   span {

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

@@ -3,7 +3,7 @@
     <van-image
       width="88"
       height="88"
-      src="https://bpic.588ku.com/illus_water_img/21/09/08/e769eb69326977dc1a5f488dfb988ba4.jpg"
+      :src="getImg(info.avatar)"
       fit="cover"
       radius="100"
     />
@@ -11,20 +11,20 @@
     <img v-if="rank" class="NOImg" :src="NOInfo.img1" alt="" />
 
     <div class="content">
-      <div class="text1 van-ellipsis">创作者姓名</div>
+      <div class="text1 van-ellipsis">{{ info.nickname }}</div>
       <div class="text2 van-ellipsis--l2">
-        介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍
+        {{ info.intro }}
       </div>
 
       <div class="text3">
         <div class="sale" v-if="rank" :style="{ color: NOInfo.color }">
           <img class="icon" :src="NOInfo.img2" alt="" />
-          <span>已售400</span>
+          <span>已售{{ info.sales }}</span>
           <i class="font_family icon-a-icon-dianzan2"></i>
         </div>
         <div class="text4">
           <span>粉丝</span>
-          <span>233</span>
+          <span>{{ info.followers }}</span>
         </div>
         <van-button plain type="primary" size="mini" round>关注</van-button>
       </div>
@@ -39,6 +39,12 @@ export default {
       type: Number,
       default: 0,
     },
+    info: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
   },
   computed: {
     NOInfo() {

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

@@ -1,25 +1,38 @@
 <template>
-  <div class="product" @click="click">
+  <router-link
+    :to="{
+      path: '/detail',
+      query: {
+        id: info.id,
+      },
+    }"
+    class="product"
+    @click="click"
+  >
     <van-image
       width="100%"
       height="calc(45vw - 21.6px)"
-      src="https://bpic.588ku.com/illus_water_img/21/09/08/e769eb69326977dc1a5f488dfb988ba4.jpg"
+      :src="getImg(info.pics)"
       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="price"><i class="font_family icon-icon_jiage"></i>320</div>
       <div class="text">
         <div class="text1">
-          {{ info.type === "BLIND_BOX" ? "已售 23份" : "" }}
+          {{ info.type === "BLIND_BOX" ? `已售 ${info.sale}份` : "" }}
         </div>
-        <like-button>20</like-button>
+        <like-button :isLike="info.liked" @click="likeProduct">
+          {{ info.likes }}
+        </like-button>
       </div>
     </div>
-  </div>
+  </router-link>
 </template>
 
 <script>
@@ -39,6 +52,29 @@ export default {
 
     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>
 
@@ -89,4 +125,5 @@ export default {
     }
   }
 }
+
 </style>

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

@@ -61,5 +61,38 @@ export default {
           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();
+      }
+    },
   },
 };

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

@@ -106,6 +106,14 @@ const routes = [
       title: "第九空间",
     },
   },
+  {
+    path: "/submit",
+    name: "submit",
+    component: () => import("../views/Submit.vue"),
+    meta: {
+      title: "第九空间",
+    },
+  },
 ];
 
 const router = createRouter({
@@ -122,11 +130,16 @@ router.beforeEach((to, from, next) => {
       })
       .catch(() => {
         if (to.meta.pageType != Page.Every) {
-          Dialog.alert({
-            message: "用户未登录",
-          }).then(() => {
-            next("/login");
-          });
+          Dialog.confirm({
+            title: "提示",
+            message: "用户未登录,是否立即登录",
+          })
+            .then(() => {
+              next("/login");
+            })
+            .catch(() => {
+              next(false);
+            });
         } else {
           next();
         }

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

@@ -67,3 +67,31 @@ input:-webkit-autofill {
 .flex1 {
   flex-grow: 1;
 }
+.van-dialog {
+  border-radius: 8px;
+  .van-dialog__header {
+    font-size: 16px;
+    font-weight: bold;
+    padding-top: 20px;
+  }
+  .van-hairline--left::after {
+    border-color: #f2f4f5;
+  }
+  .van-hairline--top::after {
+    border-color: #f2f4f5;
+  }
+
+  .van-dialog__message--has-title {
+    padding: 20px 40px 30px;
+  }
+}
+.van-dialog__footer {
+  .van-button--default {
+    color: #626366;
+  }
+  .van-dialog__confirm {
+    .van-button__text {
+      color: #ffa746;
+    }
+  }
+}

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

@@ -1,28 +1,29 @@
 <template>
   <div class="detail">
-    <swiper pagination class="mySwiper">
-      <swiper-slide><img src="../assets/detail.jpg" /></swiper-slide>
-      <swiper-slide><img src="../assets/detail.jpg" /></swiper-slide>
-      <swiper-slide><img src="../assets/detail.jpg" /></swiper-slide>
-      <swiper-slide><img src="../assets/detail.jpg" /></swiper-slide>
-      <swiper-slide><img src="../assets/detail.jpg" /></swiper-slide>
-      <swiper-slide><img src="../assets/detail.jpg" /></swiper-slide>
+    <swiper 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">
-        <div class="price"><i class="font_family icon-icon_jiage"></i>320</div>
+        <div class="price">
+          <i class="font_family icon-icon_jiage"></i>{{ info.price }}
+        </div>
         <div class="sub">含 <span>5%</span> 版税</div>
         <div class="text">
-          <span>已售 23</span>
-          <span>剩余 50</span>
+          <span>已售 {{ info.sale }}</span>
+          <span>剩余 {{ info.stock }}</span>
         </div>
       </div>
-      <div class="title">游戏《百分之一》精美皮肤---恶魔的礼物</div>
+      <div class="title">{{ info.name }}</div>
       <div class="info-bottom">
         <span class="text1"> 编号 338392 </span>
         <van-button type="primary" plain size="mini">选择其他编号</van-button>
-        <like-button>20</like-button>
+        <like-button :isLike="liked" @click="likeProduct">
+          {{ info.likes }}
+        </like-button>
       </div>
     </div>
 
@@ -32,13 +33,13 @@
         <van-image
           width="40"
           height="40"
-          src="https://bpic.588ku.com/illus_water_img/21/09/08/e769eb69326977dc1a5f488dfb988ba4.jpg"
+          :src="info.minterAvatar"
           fit="cover"
           radius="100"
         />
       </template>
       <template #title>
-        <div class="text1">铸造者昵称</div>
+        <div class="text1">{{ info.minter }}</div>
         <div class="text2">铸造者</div>
       </template>
     </van-cell>
@@ -48,41 +49,38 @@
     <div class="goods">
       <div class="page-title">商品特性</div>
       <div class="specific-list">
-        <div class="specific-item">
-          <div class="text1">数字权益卡</div>
-          <div class="text2">打开可见</div>
-        </div>
-        <div class="specific-item">
-          <div class="text1">属性</div>
-          <div class="text2">S级</div>
-        </div>
-        <div class="specific-item">
-          <div class="text1">限量发售</div>
-          <div class="text2">100份</div>
+        <div
+          class="specific-item"
+          v-for="(item, index) in properties"
+          :key="index"
+        >
+          <div class="text1">{{ item.name }}</div>
+          <div class="text2">{{ item.value }}</div>
         </div>
       </div>
-      <div class="page-title">链上信息</div>
-      <div class="page-text">
-        创世“由艺术大师天野喜孝为游戏”百分之一“倾情绘制，天野喜孝是日本知名画家，插画师，角色设计师，普任”最终幻想“系列多部作品的角色设计
-      </div>
-      <div class="page-title" style="padding-top: 30px">作品描述</div>
+      <!-- <div class="page-title">链上信息</div>
       <div class="page-text">
-        品名：数字权益卡<br />
-        款式：基础版*3+待解锁隐藏款*2<br />
-        尺寸：1080x1920<br />
-        类型：个人创作 <br />
-        创建时间：2021-08-20<br />
         创世“由艺术大师天野喜孝为游戏”百分之一“倾情绘制，天野喜孝是日本知名画家，插画师，角色设计师，普任”最终幻想“系列多部作品的角色设计
+      </div> -->
+      <div class="page-title">作品描述</div>
+      <div class="page-text" v-html="info.detail"></div>
+    </div>
+
+    <div class="btn van-safe-area-bottom" ref="btn">
+      <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>
+    </van-collapse> -->
 
     <driver />
   </div>
@@ -104,11 +102,92 @@ export default {
     Swiper,
     SwiperSlide,
   },
+  inject: ["bs"],
   data() {
     return {
       activeName: "1",
+      info: {},
+      liked: false,
     };
   },
+  computed: {
+    banners() {
+      return this.info.pics || [];
+    },
+    properties() {
+      return this.info.properties || [];
+    },
+  },
+  mounted() {
+    this.getProduct();
+    document.body.appendChild(this.$refs.btn);
+  },
+  unmounted() {
+    if (this.$refs.btn) {
+      document.body.removeChild(this.$refs.btn);
+    }
+  },
+  methods: {
+    getProduct() {
+      this.$toast.loading({
+        message: "加载中...",
+        forbidClick: true,
+      });
+      this.$http.get("/collection/get/" + this.$route.query.id).then((res) => {
+        this.info = res;
+        this.$nextTick(() => {
+          this.checkLike();
+        });
+
+        setTimeout(() => {
+          this.$toast.clear();
+          this.bs.value.refresh();
+        }, 500);
+      });
+    },
+    checkLike() {
+      if (!this.isLogin) {
+        return;
+      }
+      this.$http
+        .post(
+          "/like/all",
+          {
+            query: {
+              collectionId: this.info.id,
+              userId: this.$store.state.id,
+            },
+          },
+          { body: "json" }
+        )
+        .then((res) => {
+          this.liked = !res.empty;
+        });
+    },
+    likeProduct() {
+      if (!this.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>
 
@@ -117,13 +196,13 @@ export default {
   padding-bottom: 100px;
 }
 .info {
-  height: 164px;
+  // height: 164px;
   background-color: @bg;
   border-radius: 20px 20px 0 0;
   transform: translateY(-16px);
   position: relative;
   z-index: 2;
-  padding: 16px;
+  padding: 16px 16px 0;
   box-sizing: border-box;
 
   .price {
@@ -250,6 +329,12 @@ export default {
 }
 .goods {
   padding: 20px 16px;
+
+  .page-title {
+    &:not(:first-child) {
+      padding-top: 16px;
+    }
+  }
 }
 
 .page-title {
@@ -259,7 +344,7 @@ export default {
   line-height: 28px;
 }
 .specific-list {
-  padding: 16px 0 32px;
+  padding: 16px 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -299,4 +384,22 @@ export default {
   line-height: 28px;
   margin-top: 10px;
 }
+
+.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;
+  }
+}
 </style>

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

@@ -42,11 +42,9 @@
     <div class="box">
       <page-title title="最HOT收藏品"></page-title>
       <div class="box-list">
-        <product-info
-          v-for="item in products"
-          :key="item.id"
-          :info="item"
-        ></product-info>
+        <template v-for="(item, index) in products" :key="item.id">
+          <product-info v-model:info="products[index]"></product-info
+        ></template>
       </div>
     </div>
 
@@ -92,7 +90,7 @@ SwiperCore.use([EffectCoverflow]);
 
 export default {
   name: "Home",
-  inject: ["changeCheck"],
+  inject: ["bs"],
   components: {
     Swiper,
     SwiperSlide,
@@ -108,16 +106,27 @@ export default {
     };
   },
   mounted() {
-    this.$http.post("/banner/all", {}, { body: "json" }).then((res) => {
-      this.banners = res.content;
-    });
-    this.getProduct("BLIND_BOX").then((res) => {
-      this.box = res;
+    this.$toast.loading({
+      message: "加载中...",
+      forbidClick: true,
     });
-    this.getProduct().then((res) => {
-      this.products = res;
+    Promise.all([
+      this.$http.post("/banner/all", {}, { body: "json" }).then((res) => {
+        this.banners = res.content;
+      }),
+      this.getProduct("BLIND_BOX").then((res) => {
+        this.box = res;
+      }),
+      this.getProduct().then((res) => {
+        this.products = res;
+      }),
+      this.getMiner(),
+    ]).then(() => {
+      setTimeout(() => {
+        this.$toast.clear();
+        this.bs.value.refresh();
+      }, 500);
     });
-    this.getMiner();
   },
   methods: {
     getProduct(type = "DEFAULT") {
@@ -129,6 +138,7 @@ export default {
             size: 4,
             query: {
               type: type,
+              onShelf: true,
             },
             sort: "createdAt,desc",
           },

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

@@ -0,0 +1,277 @@
+<template>
+  <div class="submit">
+    <div class="pageTitle">{{ info.minter }}</div>
+    <div class="product">
+      <van-image
+        width="74"
+        height="104"
+        :radius="6"
+        :src="getImg(info.pics)"
+        fit="cover"
+      />
+      <div class="product-content">
+        <div class="text1">
+          {{ info.name }}
+        </div>
+        <div class="no"></div>
+        <div class="price">¥{{ info.price }}</div>
+      </div>
+    </div>
+
+    <div class="list">
+      <div class="info">
+        <div class="text1">商品费用</div>
+        <div class="text2">¥320</div>
+      </div>
+      <div class="info">
+        <div class="text1">GAS费用</div>
+        <div class="text2">¥1</div>
+      </div>
+
+      <van-field
+        type="text"
+        label="订单留言"
+        placeholder="选填"
+        v-model="message"
+      />
+
+      <div class="pay">
+        <div
+          class="pay-item"
+          @click="payType = item.type"
+          v-for="(item, index) in payInfos"
+          :key="index"
+        >
+          <img :src="item.icon" alt="" />
+          <span>{{ item.name }}</span>
+          <img :src="payType === item.type ? icons[1] : icons[0]" alt="" />
+        </div>
+      </div>
+    </div>
+
+    <div class="bottom van-safe-area-bottom" ref="bottom">
+      <div class="bottom-content">
+        <span class="text">总计</span>
+        <span class="price">
+          <i class="font_family icon-icon_jiage"></i>{{ money }}
+        </span>
+        <van-button
+          round
+          color="linear-gradient(135deg, #FDFB60 0%, #FF8F3E 100%)"
+          @click="submit"
+        >
+          立即支付
+        </van-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Submit",
+  inject: ["bs"],
+  data() {
+    return {
+      info: {},
+      message: "",
+      payType: "ALIPAY",
+      payInfos: [
+        {
+          icon: require("../assets/svgs/zhifubao.svg"),
+          name: "支付宝",
+          type: "ALIPAY",
+        },
+        {
+          icon: require("../assets/svgs/wechat.svg"),
+          name: "微信",
+          type: "WEIXIN",
+        },
+        // {
+        //   icon: require("../assets/svgs/png-decp.svg"),
+        //   name: "DCEP",
+        // },
+      ],
+      icons: [
+        require("../assets/svgs/icon_gouxuan_huise.svg"),
+        require("../assets/svgs/icon_gouxuan_pre.svg"),
+      ],
+    };
+  },
+  computed: {
+    money() {
+      if (this.info.price) {
+        return this.info.price + 1;
+      } else {
+        return 0;
+      }
+    },
+  },
+  mounted() {
+    this.$toast.loading({
+      message: "加载中...",
+      forbidClick: true,
+    });
+    this.$http.get("/collection/get/" + this.$route.query.id).then((res) => {
+      this.info = res;
+      setTimeout(() => {
+        this.$toast.clear();
+        this.bs.value.refresh();
+      }, 500);
+    });
+    document.body.appendChild(this.$refs.bottom);
+  },
+  unmounted() {
+    if (this.$refs.bottom) {
+      document.body.removeChild(this.$refs.bottom);
+    }
+  },
+  methods: {
+    submit() {
+      this.$http
+        .post("/order/create?collectionId=" + this.$route.query.id + "&qty=1")
+        .then((res) => {
+          window.location.href =
+            this.$baseUrl + "/payOrder/alipay?id=" + res.id;
+        });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.submit {
+  padding: 20px 16px;
+}
+
+.pageTitle {
+  font-size: 14px;
+  color: #ffffff;
+  line-height: 22px;
+}
+
+.info {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 60px;
+  border-bottom: 1px solid #202122;
+  .text1 {
+    font-size: 14px;
+    color: #ffffff;
+    line-height: 24px;
+  }
+
+  .text2 {
+    font-size: 16px;
+    font-weight: bold;
+    color: #fdfb60;
+    line-height: 24px;
+  }
+
+  .text3 {
+    font-size: 14px;
+    color: #939599;
+    line-height: 20px;
+  }
+}
+
+.product {
+  display: flex;
+  padding: 12px 0 20px;
+  .product-content {
+    flex-grow: 1;
+    margin-left: 10px;
+    display: flex;
+    flex-direction: column;
+    .no {
+      flex-grow: 1;
+      padding: 4px 0 8px;
+      font-size: 14px;
+      color: #939599;
+      line-height: 24px;
+    }
+
+    .text1 {
+      font-size: 16px;
+      font-weight: bold;
+      color: #ffffff;
+      line-height: 22px;
+    }
+
+    .price {
+      font-size: 16px;
+      font-weight: bold;
+      color: #ffffff;
+      line-height: 24px;
+    }
+  }
+}
+
+/deep/.van-field {
+  padding: 20px 0;
+  .van-field__label {
+    font-size: 14px;
+    color: #ffffff;
+    line-height: 24px;
+  }
+  .van-field__control {
+    text-align: right;
+    color: #939599;
+  }
+}
+
+.pay-item {
+  display: flex;
+  align-items: center;
+  height: 60px;
+  border-top: 1px solid #202122;
+  span {
+    font-size: 14px;
+    font-weight: bold;
+    color: #ffffff;
+    line-height: 24px;
+    flex-grow: 1;
+    padding: 0 10px;
+  }
+}
+
+.bottom {
+  position: fixed;
+  bottom: 0px;
+  left: 0;
+  right: 0;
+  background-color: @bg;
+  z-index: 20;
+  border-top: 1px solid #313233;
+
+  .bottom-content {
+    padding: 6px 16px;
+    display: flex;
+    align-items: center;
+
+    .van-button {
+      width: 210px;
+      color: #333230 !important;
+    }
+    .text {
+      font-size: 14px;
+      color: #939599;
+      line-height: 20px;
+    }
+
+    .price {
+      font-size: 34px;
+      font-family: OSP;
+      font-weight: normal;
+      color: #fdfb60;
+      line-height: 34px;
+      flex-grow: 1;
+      margin: 0 10px;
+      .font_family {
+        font-size: 10px;
+      }
+    }
+  }
+}
+</style>