展示柜

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

@@ -41,7 +41,7 @@ export default {
         this.timer = setTimeout(() => {
           this.bs.refresh();
           this.bs.scrollTo(0, 0);
-        }, 500);
+        }, 100);
       }
     },
   },

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

@@ -1,58 +1,59 @@
 <template>
-  <van-overlay :show="show" @click="show = false" z-index="99">
-    <div class="wrapper">
-      <div class="content" ref="post" @click.stop>
-        <van-image
-          :src="getImg(info.pics)"
-          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 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)"
+            width="80vw"
+            height="80vw"
+            fit="cover"
+            @load="loadImg"
+          />
+          <div class="info">
+            <div class="name van-multi-ellipsis--l2">
+              {{ info.name }}
             </div>
-            <div class="text1">
-              <span>已售 {{ info.sale }}</span>
-              <span>剩余 {{ info.stock }}</span>
+            <div class="text">
+              <div class="price">
+                <img src="../assets/svgs/jiage.svg" alt="" />
+                <span>{{ info.price }}</span>
+              </div>
+              <div class="text1">
+                <span>已售 {{ info.sale }}</span>
+                <span>剩余 {{ info.stock }}</span>
+              </div>
             </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 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>
+            <vue-qrcode
+              :value="url"
+              :options="{ width: 70, margin: 2 }"
+              class="code"
+            ></vue-qrcode>
+          </div>
         </div>
-      </div>
 
-      <div class="img" ref="wrap"></div>
-
-      <div class="tips">长按图片保存</div>
+        <div class="tips">长按图片保存</div>
+      </div>
+    </van-overlay>
+    <div class="share" @click="init">
+      <img src="../assets/svgs/icon-share.svg" alt="" />
+      <span>分享</span>
     </div>
-  </van-overlay>
-  <div class="share" ref="share" @click="init">
-    <img src="../assets/svgs/icon-share.svg" alt="" />
-    <span>分享</span>
   </div>
 </template>
 <script>
@@ -72,6 +73,7 @@ export default {
     return {
       show: false,
       share: null,
+      img: false,
     };
   },
   computed: {
@@ -95,20 +97,25 @@ export default {
   },
   methods: {
     init() {
-      this.$toast.loading({
-        message: "加载中...",
-        forbidClick: true,
-      });
+      if (!this.img) {
+        this.$toast.loading({
+          message: "加载中...",
+          forbidClick: true,
+        });
+      }
+
       this.show = true;
     },
     loadImg() {
       setTimeout(() => {
         html2canvas(this.$refs.post).then((canvas) => {
-          console.log(canvas);
           this.$toast.clear();
           this.$refs.wrap.appendChild(canvas);
+          this.$nextTick(() => {
+            this.img = true;
+          });
         });
-      }, 500);
+      }, 100);
     },
   },
 };
@@ -128,6 +135,14 @@ export default {
   border-radius: 8px;
 }
 
+.img {
+  /deep/ canvas {
+    overflow: hidden;
+    border-radius: 8px;
+    display: block;
+  }
+}
+
 .info {
   padding: 12px 10px;
   .name {

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

@@ -0,0 +1,155 @@
+<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"
+    />
+
+    <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>
+        {{ 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>
+        <div class="flex1"></div>
+        <like-button :isLike="info.liked" @click="likeProduct">
+          {{ info.likes }}
+        </like-button> -->
+      </div>
+    </div>
+  </router-link>
+</template>
+
+<script>
+import asset from "../../mixins/asset";
+
+export default {
+  mixins: [asset],
+  props: {
+    info: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  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("取消收藏");
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.product {
+  width: calc(50vw - 24px);
+  margin: 8px;
+  background-color: @bg2;
+  display: inline-block;
+
+  .van-image {
+    border-radius: 8px 8px 0px 0px;
+    overflow: hidden;
+    display: block;
+  }
+  .content {
+    padding: 10px;
+
+    .name {
+      font-size: 16px;
+      font-weight: bold;
+      color: #ffffff;
+      line-height: 24px;
+    }
+
+    .status {
+      font-size: 16px;
+      color: #939599;
+      line-height: 24px;
+      margin-top: 6px;
+    }
+
+    .price {
+      font-size: 24px;
+      font-family: OSP;
+      color: @prim;
+      line-height: 22px;
+      padding: 7px 0;
+
+      i {
+        vertical-align: text-bottom;
+        font-size: 10px;
+      }
+    }
+  }
+
+  .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/product/productInfo.vue

@@ -12,7 +12,7 @@
     <van-image
       width="100%"
       height="calc(45vw - 21.6px)"
-      :src="getImg(info.pics)"
+      :src="getImg(info.pics || info.pic)"
       fit="cover"
     />
 

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

@@ -0,0 +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",
+        },
+      ],
+    };
+  },
+};

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

@@ -183,6 +183,15 @@ const routes = [
       title: "第九空间",
     },
   },
+  {
+    path: "/assetDetail",
+    name: "assetDetail",
+    component: () => import("../views/asset/Detail.vue"),
+    meta: {
+      pageType: Page.Every,
+      title: "第九空间",
+    },
+  },
   {
     path: "/submit",
     name: "submit",
@@ -191,6 +200,15 @@ const routes = [
       title: "第九空间",
     },
   },
+  {
+    path: "/creatorDetail",
+    name: "creatorDetail",
+    component: () => import("../views/creator/Detail.vue"),
+    meta: {
+      pageType: Page.Every,
+      title: "第九空间",
+    },
+  },
   {
     path: "/orders",
     name: "orders",

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

@@ -84,7 +84,7 @@ export default {
           this.miners = res.content;
           setTimeout(() => {
             this.bs.value.refresh();
-          }, 500);
+          }, 100);
         });
     },
   },

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

@@ -136,7 +136,7 @@ export default {
       Promise.all([this.getBanner(), this.getList()]).then(() => {
         setTimeout(() => {
           this.bs.value.refresh();
-        }, 500);
+        }, 100);
       });
     },
     getBanner() {

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

@@ -147,7 +147,7 @@ export default {
       setTimeout(() => {
         this.$toast.clear();
         this.bs.value.refresh();
-      }, 500);
+      }, 100);
     });
   },
   methods: {

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

@@ -23,45 +23,64 @@
         </div>
       </div>
 
-      <van-tabs v-model:active="type" line-width="16" line-height="2">
-        <van-tab title="全部"></van-tab>
-        <van-tab title="售卖"></van-tab>
-        <van-tab title="仅展示"></van-tab>
-        <van-tab title="综合排序"></van-tab>
+      <van-tabs
+        v-model:active="type"
+        line-width="16"
+        line-height="2"
+        :ellipsis="false"
+      >
+        <van-tab
+          :title="item.label"
+          :name="item.type"
+          :key="index"
+          v-for="(item, index) in typeOptions"
+        ></van-tab>
       </van-tabs>
     </van-sticky>
 
     <div class="box-list">
-      <product-info></product-info>
-      <product-info></product-info>
-      <product-info></product-info>
-      <product-info></product-info>
-      <product-info></product-info>
-      <product-info></product-info>
+      <template v-for="(item, index) in list" :key="index">
+        <asset-info :info="item"></asset-info>
+      </template>
     </div>
   </div>
 </template>
 
 <script>
-import ProductInfo from "../components/product/productInfo.vue";
+import AssetInfo from "../components/asset/assetInfo.vue";
+import asset from "../mixins/asset";
 
 export default {
   name: "discover",
+  mixins: [asset],
   inject: ["bs"],
   components: {
-    ProductInfo,
+    AssetInfo,
   },
   data() {
     return {
       active: "explore",
       stiky: null,
-      type: 0,
+      type: "DEFAULT",
+      empty: false,
+      list: [],
+      typeOptions: [
+        {
+          label: "藏品类目",
+          type: "DEFAULT",
+        },
+        {
+          label: "盲盒类目",
+          type: "BLIND_BOX",
+        },
+      ],
     };
   },
   mounted() {
     this.$nextTick(() => {
       this.stiky = this.$refs.top.$el.childNodes[0];
     });
+    this.getList();
   },
   beforeUnmount() {
     if (this.stiky.parentNode.nodeName == "BODY") {
@@ -71,6 +90,33 @@ export default {
     }
   },
   methods: {
+    getList() {
+      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,
+            },
+            sort: "createdAt,desc",
+          },
+          { body: "json" }
+        )
+        .then((res) => {
+          this.list = res.content;
+          this.empty = res.empty;
+          setTimeout(() => {
+            this.bs.value.refresh();
+          }, 100);
+        });
+    },
     change(isFixed) {
       if (isFixed) {
         this.$nextTick(() => {
@@ -196,7 +242,8 @@ export default {
 .box-list {
   // display: flex;
   // flex-wrap: wrap;
-  padding: 0 8px;
+  padding: 8px;
+  min-height: 100vh;
 }
 
 .discover {
@@ -205,11 +252,19 @@ export default {
 
 /deep/.van-tab {
   color: #fff;
+  flex-grow: 0;
+  padding: 0 0 0 0;
+  margin-right: 30px;
 
   &.van-tab--active {
     color: @prim;
   }
 }
+/deep/.van-tabs {
+  .van-tabs__nav {
+    padding-left: 16px;
+  }
+}
 
 /deep/ .van-tabs__line {
   bottom: 20px;

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

@@ -6,7 +6,7 @@
         width="74"
         height="104"
         :radius="6"
-        :src="getImg(info.pics)"
+        :src="getImg(info.pics || info.pic)"
         fit="cover"
       />
       <div class="product-content">
@@ -59,6 +59,7 @@
           round
           color="linear-gradient(135deg, #FDFB60 0%, #FF8F3E 100%)"
           @click="submit"
+          :disabled="orderId"
         >
           立即支付
         </van-button>
@@ -98,6 +99,7 @@ export default {
         require("../assets/svgs/icon_gouxuan_pre.svg"),
       ],
       bottom: null,
+      orderId: 0,
     };
   },
   computed: {
@@ -114,13 +116,42 @@ export default {
       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);
-    });
+    if (this.$route.query.id) {
+      this.$http.get("/collection/get/" + this.$route.query.id).then((res) => {
+        this.info = res;
+        setTimeout(() => {
+          this.$toast.clear();
+          this.bs.value.refresh();
+        }, 100);
+
+        // this.$http('/sysConfig/get/gas_fee')
+      });
+    } else {
+      this.$http.get("/order/get/" + this.$route.query.orderId).then((res) => {
+        this.info = res;
+        this.orderId = res.id;
+        setTimeout(() => {
+          this.bs.value.refresh();
+        }, 100);
+        this.$dialog
+          .alert({
+            title: "提示",
+            message:
+              res.status === "NOT_PAID" || res.status === "CANCELLED"
+                ? "订单支付失败,点击重新下单"
+                : "订单已支付,点击查看订单详情",
+          })
+          .then(() => {
+            if (res.status === "NOT_PAID" || res.status === "CANCELLED") {
+              this.$router.back();
+            } else {
+              this.$router.replace("/orderDetail?id" + res.id);
+            }
+            // on close
+          });
+      });
+    }
+
     this.bottom = this.$refs.bottom;
     document.body.appendChild(this.$refs.bottom);
   },
@@ -134,9 +165,13 @@ export default {
       this.$http
         .post("/order/create?collectionId=" + this.$route.query.id + "&qty=1")
         .then((res) => {
-          document.location.replace(
-            path.resolve(this.$baseUrl, "payOrder/alipay?id=" + res.id)
-          );
+          this.orderId = res.id;
+          this.$router.replace("/submit?orderId=" + res.id);
+          this.$nextTick(() => {
+            document.location.replace(
+              path.resolve(this.$baseUrl, "payOrder/alipay?id=" + res.id)
+            );
+          });
         })
         .catch((e) => {
           if (e) {

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

@@ -0,0 +1,448 @@
+<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">
+        <!-- <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>已售 {{ info.sale }}</span>
+          <span>剩余 {{ info.stock }}</span>
+        </div> -->
+        <div class="status">
+          {{ getLabelName(info.status, assetStatusOptions) }}
+        </div>
+      </div>
+      <div class="title">{{ info.name }}</div>
+      <div class="info-bottom">
+        <span class="text1"> 编号 {{ info.number }} </span>
+        <!-- <van-button
+          type="primary"
+          plain
+          size="mini"
+          >选择其他编号</van-button
+        >
+        <like-button :isLike="info.liked" @click="likeProduct">
+          {{ info.likes }}
+        </like-button> -->
+      </div>
+    </div>
+
+    <driver />
+    <van-cell
+      is-link
+      class="creator"
+      :to="{
+        path: '/creatorDetail',
+        query: {
+          id: info.minterId,
+        },
+      }"
+    >
+      <template #icon>
+        <van-image
+          width="40"
+          height="40"
+          :src="info.minterAvatar"
+          fit="cover"
+          radius="100"
+        />
+      </template>
+      <template #title>
+        <div class="text1">{{ 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"
+          :src="info.minterAvatar"
+          fit="cover"
+          radius="100"
+        />
+      </template>
+      <template #title>
+        <div class="text1">{{ info.minter }}</div>
+        <div class="text2">持有者</div>
+      </template>
+    </van-cell>
+    <driver />
+
+    <div class="goods">
+      <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>
+      <div class="page-title">链上信息</div>
+      <div class="page-text">
+        Hash地址：{{ info.txHash }}<br />
+        区块高度： {{ info.blockNumber }}<br />
+        令牌ID： {{ info.tokenId }}
+      </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" v-if="isBuy">
+      <div class="btns">
+        <van-button type="primary" block round @click="buy"
+          >立即购买</van-button
+        >
+      </div>
+    </div>
+
+    <!-- <driver /> -->
+
+    <!-- <van-collapse v-model="activeName" accordion>
+      <van-collapse-item title="交易记录" name="1">
+        <van-cell title="单元格" value="内容"> </van-cell>
+      </van-collapse-item>
+    </van-collapse> -->
+
+    <driver />
+
+    <post :info="info" />
+  </div>
+</template>
+
+<script>
+import { Swiper, SwiperSlide } from "swiper/vue";
+
+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";
+
+// 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 || [];
+    },
+    isBuy() {
+      return this.info.stock && this.info.onShelf;
+    },
+  },
+  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);
+      });
+    },
+    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;
+}
+.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;
+    }
+  }
+
+  .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;
+      }
+    }
+  }
+
+  .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;
+    }
+    .van-button {
+      font-size: 13px;
+      color: #fdfb60;
+      line-height: 24px;
+      background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      border-width: 0px;
+      margin-left: 10px;
+    }
+
+    .like {
+      position: absolute;
+      right: 0;
+    }
+  }
+}
+
+/deep/.creator {
+  align-items: center;
+  padding: 24px 16px 24px;
+  .van-cell__title {
+    margin-left: 12px;
+    .text1 {
+      font-size: 16px;
+      line-height: 24px;
+    }
+    .text2 {
+      font-size: 12px;
+      color: #939599;
+      line-height: 22px;
+    }
+  }
+
+  .van-cell__value {
+    font-size: 13px;
+  }
+}
+
+/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;
+  }
+}
+.goods {
+  padding: 20px 16px;
+
+  .page-title {
+    &:not(:first-child) {
+      padding-top: 16px;
+    }
+  }
+}
+
+.page-title {
+  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;
+}
+.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;
+  }
+
+  .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;
+}
+
+.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;
+  }
+}
+.status {
+  font-size: 22px;
+  font-weight: bold;
+  color: #fdfb60;
+  line-height: 24px;
+}
+</style>

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

@@ -212,7 +212,7 @@ export default {
           this.empty = res.empty;
           setTimeout(() => {
             this.bs.value.refresh();
-          }, 500);
+          }, 100);
         });
     },
     changeMenu(menu) {

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

@@ -120,7 +120,7 @@ export default {
           this.empty = res.empty;
           setTimeout(() => {
             this.bs.value.refresh();
-          }, 500);
+          }, 100);
         });
     },
   },

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

@@ -97,7 +97,7 @@ export default {
           this.empty = res.empty;
           setTimeout(() => {
             this.bs.value.refresh();
-          }, 500);
+          }, 100);
         });
     },
   },

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

@@ -43,7 +43,7 @@
     </div>
     <div class="info-item" v-if="info.txHash">
       <div class="text1">链上hash</div>
-      <div class="text1">{{ info.txHash }}</div>
+      <div class="van-ellipsis">{{ info.txHash }}</div>
     </div>
 
     <div class="info-item" v-if="info.gasUsed">
@@ -102,7 +102,7 @@ export default {
       this.info = res;
       setTimeout(() => {
         this.bs.value.refresh();
-      }, 500);
+      }, 100);
     });
   },
   methods: {
@@ -186,6 +186,10 @@ export default {
   height: 60px;
   align-items: center;
   border-bottom: 1px solid #202122;
+  .text1 {
+    flex-shrink: 0;
+    margin-right: 10px;
+  }
 }
 .tips-item {
   display: flex;
@@ -197,6 +201,8 @@ export default {
     font-size: 13px;
     color: #939599;
     line-height: 24px;
+    flex-shrink: 0;
+    margin-right: 10px;
   }
   .text2 {
     font-size: 13px;

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

@@ -121,7 +121,7 @@ export default {
           this.empty = res.empty;
           setTimeout(() => {
             this.bs.value.refresh();
-          }, 500);
+          }, 100);
         });
     },
     changeStatus(name) {

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

@@ -168,7 +168,7 @@ export default {
         setTimeout(() => {
           this.$toast.clear();
           this.bs.value.refresh();
-        }, 500);
+        }, 100);
       });
     },
     likeProduct() {

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

@@ -137,7 +137,7 @@ export default {
           this.empty = res.empty;
           setTimeout(() => {
             this.bs.value.refresh();
-          }, 500);
+          }, 100);
         });
     },
   },

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

@@ -111,7 +111,7 @@ export default {
           this.empty = res.empty;
           setTimeout(() => {
             this.bs.value.refresh();
-          }, 500);
+          }, 100);
         });
     },
   },

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

@@ -36,7 +36,7 @@ export default {
       this.empty = res.length === 0;
       setTimeout(() => {
         this.bs.value.refresh();
-      }, 500);
+      }, 100);
     });
   },
 };

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

@@ -50,7 +50,7 @@ export default {
         this.empty = res.length === 0;
         setTimeout(() => {
           this.bs.value.refresh();
-        }, 500);
+        }, 100);
       });
     },
   },

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

@@ -97,7 +97,7 @@ export default {
         this.empty = res.length === 0;
         setTimeout(() => {
           this.bs.value.refresh();
-        }, 500);
+        }, 100);
       });
     },
   },