详情

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

@@ -24,9 +24,11 @@
         <i class="font_family icon-icon_jiage"></i>{{ info.price }}
       </div>
       <div class="text">
-        <div class="text1">
-          {{ info.type === "BLIND_BOX" ? `已售 ${info.sale}份` : "" }}
+        <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>
@@ -122,8 +124,13 @@ export default {
       font-weight: 400;
       color: #939599;
       line-height: 24px;
+      span {
+        &:last-child {
+          color: @prim;
+          font-size: 16px;
+        }
+      }
     }
   }
 }
-
 </style>

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

@@ -66,31 +66,55 @@
       </div>
     </div>
 
-    <van-sticky>
+    <van-sticky ref="top" @change="change">
       <div class="menu">
-        <div class="menu-item" :class="{ active: type === 'DEFAULT' }">
+        <div
+          class="menu-item"
+          @click="changeMenu('DEFAULT')"
+          :class="{ active: type === 'DEFAULT' }"
+        >
           藏品类目
         </div>
-        <div class="menu-item" :class="{ active: type === 'BLIND_BOX' }">
+        <div
+          class="menu-item"
+          @click="changeMenu('BLIND_BOX')"
+          :class="{ active: type === 'BLIND_BOX' }"
+        >
           盲盒类目
         </div>
         <div class="flex1"></div>
-        <div class="search">
+        <div
+          class="search"
+          @click="$router.push(`/productSearch?minterId=${info.id}`)"
+        >
           <img src="../../assets/svgs/search.svg" alt="" />
         </div>
       </div>
 
-      <van-tabs v-model:active="status" line-width="16" line-height="2">
-        <van-tab title="全部"></van-tab>
-        <van-tab title="售卖"></van-tab>
+      <van-tabs
+        v-model:active="onShelf"
+        @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>
 </template>
 
 <script>
 import { mapState } from "vuex";
+import productInfo from "../../components/product/productInfo.vue";
 export default {
+  components: { productInfo },
   computed: {
     ...mapState(["userInfo"]),
   },
@@ -99,13 +123,35 @@ export default {
     return {
       info: {},
       type: "DEFAULT",
-      status: 0,
+      onShelf: "",
+      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) => {
@@ -125,9 +171,7 @@ export default {
       });
       this.$http.get("/user/get/" + this.$route.query.id).then((res) => {
         this.info = res;
-        setTimeout(() => {
-          this.bs.value.refresh();
-        }, 500);
+        this.getList();
       });
     },
     follow() {
@@ -143,6 +187,38 @@ export default {
         });
       }
     },
+    getList() {
+      this.$toast.loading({
+        message: "加载中...",
+        forbidClick: true,
+      });
+      this.$http
+        .post(
+          "/collection/all",
+          {
+            page: 0,
+            size: 20,
+            query: {
+              type: this.type,
+              onShelf: this.onShelf,
+              minterId: this.info.id,
+            },
+            sort: this.sort,
+          },
+          { body: "json" }
+        )
+        .then((res) => {
+          this.list = res.content;
+          this.empty = res.empty;
+          setTimeout(() => {
+            this.bs.value.refresh();
+          }, 500);
+        });
+    },
+    changeMenu(menu) {
+      this.type = menu;
+      this.getList();
+    },
   },
 };
 </script>
@@ -284,4 +360,8 @@ export default {
     min-width: 70px;
   }
 }
+
+.list {
+  padding: 8px 8px 100px;
+}
 </style>

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

@@ -20,7 +20,13 @@
       <div class="title">{{ info.name }}</div>
       <div class="info-bottom">
         <span class="text1" v-if="info.type !== 'DEFAULT'"> 编号 338392 </span>
-        <van-button type="primary" plain size="mini">选择其他编号</van-button>
+        <van-button
+          v-if="info.type !== 'DEFAULT'"
+          type="primary"
+          plain
+          size="mini"
+          >选择其他编号</van-button
+        >
         <like-button :isLike="liked" @click="likeProduct">
           {{ info.likes }}
         </like-button>
@@ -76,7 +82,7 @@
       <div class="page-text" v-html="info.detail"></div>
     </div>
 
-    <div class="btn van-safe-area-bottom" ref="btn" v-if="info.stock">
+    <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
@@ -128,6 +134,9 @@ export default {
     properties() {
       return this.info.properties || [];
     },
+    isBuy() {
+      return this.info.stock && this.info.onShelf;
+    },
   },
   mounted() {
     this.getProduct();
@@ -147,7 +156,9 @@ export default {
         this.info = res;
         this.$nextTick(() => {
           this.checkLike();
-          this.btn = this.$refs.btn;
+          if (this.isBuy) {
+            this.btn = this.$refs.btn;
+          }
           document.body.appendChild(this.$refs.btn);
         });
 
@@ -267,6 +278,7 @@ export default {
     display: flex;
     position: relative;
     margin-top: 4px;
+    height: 24px;
     .text1 {
       font-size: 14px;
       color: #949699;

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

@@ -40,6 +40,7 @@ export default {
       search: "",
       stiky: null,
       type: "",
+      minterId: "",
     };
   },
   beforeRouteLeave(to, from, next) {
@@ -66,6 +67,9 @@ export default {
     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];
     });
@@ -94,6 +98,8 @@ export default {
             size: 20,
             query: {
               onShelf: true,
+              type: this.type,
+              minterId: this.minterId,
             },
             sort: "createdAt,desc",
             search: this.search,
@@ -135,6 +141,9 @@ export default {
     padding-left: 16px;
   }
 }
+.list {
+  padding: 8px 8px 100px;
+}
 // /deep/.van-tab {
 // flex-grow: 0;
 // padding: 0 0 0 0;