铸造者

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

@@ -1,6 +1,7 @@
 <template>
   <div class="scroll-wrapper" ref="scroll">
     <router-view class="scroll-content" ref="content" />
+
     <!-- <app-bar></app-bar> -->
   </div>
 </template>
@@ -16,6 +17,7 @@ export default {
     return {
       changeCheck: this.changeCheck,
       bs: computed(() => this.bs),
+      setKeeps: this.setKeeps,
     };
   },
   data() {
@@ -27,6 +29,7 @@ export default {
       checkEvent: null,
       bs: null,
       timer: null,
+      keeps: [],
     };
   },
   watch: {
@@ -48,6 +51,10 @@ export default {
     }, 1000);
   },
   methods: {
+    setKeeps(keeps) {
+      console.log(keeps);
+      this.keeps = keeps;
+    },
     init() {
       this.bs = new BetterScroll(this.$refs.scroll, {
         scrollY: true,

src/main/nine-space/src/assets/svgs/icon-sosuo.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon-sosuo</title>
+    <g id="第九空间" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="搜索到标题" transform="translate(-36.000000, -106.000000)" fill="#939599">
+            <g id="编组-2" transform="translate(36.000000, 106.000000)">
+                <path d="M7.74074074,1 C11.4635491,1 14.4814815,4.01793243 14.4814815,7.74074074 C14.4814815,9.41564444 13.8706128,10.9478721 12.8595169,12.1267824 L14.8481294,14.1148335 C15.0506235,14.3173276 15.0506235,14.6456354 14.8481294,14.8481294 C14.6681347,15.0281242 14.3887316,15.0481236 14.1866461,14.9081277 L14.1148335,14.8481294 L12.1267824,12.8595169 C10.9478721,13.8706128 9.41564444,14.4814815 7.74074074,14.4814815 C4.01793243,14.4814815 1,11.4635491 1,7.74074074 C1,4.01793243 4.01793243,1 7.74074074,1 Z M7.74074074,2.03703704 C4.59067217,2.03703704 2.03703704,4.59067217 2.03703704,7.74074074 C2.03703704,10.8908093 4.59067217,13.4444444 7.74074074,13.4444444 C10.8908093,13.4444444 13.4444444,10.8908093 13.4444444,7.74074074 C13.4444444,4.59067217 10.8908093,2.03703704 7.74074074,2.03703704 Z" id="形状结合"></path>
+            </g>
+        </g>
+    </g>
+</svg>

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

@@ -11,6 +11,7 @@ export default {
 <style lang="less" scoped>
 .van-cell {
   /deep/ .van-cell__title {
+    flex: 2;
     span {
       font-size: 20px;
       font-family: ZhenyanGB-Regular, ZhenyanGB;

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

@@ -9,8 +9,8 @@
     class="info"
   >
     <van-image
-      width="88"
-      height="88"
+      :width="size === 'large' ? 88 : 70"
+      :height="size === 'large' ? 88 : 70"
       :src="getImg(info.avatar)"
       fit="cover"
       radius="100"
@@ -23,6 +23,7 @@
       <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 }">
@@ -30,9 +31,9 @@
           <span>已售{{ info.sales }}</span>
           <i class="font_family icon-a-icon-dianzan2"></i>
         </div>
-        <div class="text4">
-          <span>粉丝</span>
-          <span>{{ info.followers }}</span>
+        <div class="text4" v-else>
+          <span>已售</span>
+          <span>{{ info.sales }}</span>
         </div>
         <van-button
           v-if="!isFollow"
@@ -67,6 +68,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    size: {
+      type: String,
+      default: "normal",
+    },
   },
   computed: {
     NOInfo() {
@@ -118,6 +123,8 @@ export default {
   .content {
     flex-grow: 1;
     padding-left: 12px;
+    display: flex;
+    flex-direction: column;
 
     .text1 {
       font-size: 16px;
@@ -182,7 +189,7 @@ export default {
           color: #fff;
           &:first-child {
             color: #939599;
-            margin-right: 5px;
+            margin-right: 2px;
           }
         }
       }

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

@@ -11,7 +11,7 @@ export default {
           value: "DEFAULT",
         },
         {
-          label: "数字盲合",
+          label: "数字盲盒",
           value: "BLIND_BOX",
         },
         {

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

@@ -147,10 +147,37 @@ const routes = [
       title: "第九空间",
     },
   },
+  {
+    path: "/productSearch",
+    name: "productSearch",
+    component: () => import("../views/product/Search.vue"),
+    meta: {
+      pageType: Page.Every,
+      title: "第九空间",
+    },
+  },
   {
     path: "/creatorDetail",
     name: "creatorDetail",
-    component: () => import("../views/CreatorDetail.vue"),
+    component: () => import("../views/creator/Detail.vue"),
+    meta: {
+      pageType: Page.Every,
+      title: "第九空间",
+    },
+  },
+  {
+    path: "/creatorList",
+    name: "creatorList",
+    component: () => import("../views/creator/List.vue"),
+    meta: {
+      pageType: Page.Every,
+      title: "第九空间",
+    },
+  },
+  {
+    path: "/creatorSearch",
+    name: "creatorSearch",
+    component: () => import("../views/creator/Search.vue"),
     meta: {
       pageType: Page.Every,
       title: "第九空间",

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

@@ -31,19 +31,21 @@
   --van-uploader-file-background-color: transparent;
   --van-active-color: @bg3;
   --van-image-placeholder-background-color: @bg2;
+  --van-search-background-color: #181818;
+  --van-search-content-background-color: #0f0f0f;
 }
 
-
-[contenteditable="true"], input, textarea {
-    -webkit-user-select: auto!important;
-    -khtml-user-select: auto!important;
-    -moz-user-select: auto!important;
-    -ms-user-select: auto!important;
-    -o-user-select: auto!important;
-    user-select: auto!important;
+[contenteditable="true"],
+input,
+textarea {
+  -webkit-user-select: auto !important;
+  -khtml-user-select: auto !important;
+  -moz-user-select: auto !important;
+  -ms-user-select: auto !important;
+  -o-user-select: auto !important;
+  user-select: auto !important;
 }
 
-
 .van-divider::after,
 .van-divider::before {
   height: 5px;

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

@@ -6,7 +6,7 @@
           <div class="btn" @click="$router.push('/discover')">收藏探索</div>
           <div class="btn active">铸造者</div>
         </div>
-        <div class="search">
+        <div class="search" @click="$router.push('/creatorSearch')">
           <img src="../assets/svgs/search.svg" alt="" />
         </div>
       </div>
@@ -61,7 +61,7 @@ export default {
           document.body.appendChild(this.stiky);
         });
       } else {
-        // this.$refs.top.$el.appendChild(this.stiky);
+        this.$refs.top.$el.appendChild(this.stiky);
       }
     },
     getList() {

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

@@ -6,7 +6,7 @@
           <div class="btn active">收藏探索</div>
           <div class="btn" @click="$router.push('/creator')">铸造者</div>
         </div>
-        <div class="search">
+        <div class="search" @click="$router.push('/productSearch')">
           <img src="../assets/svgs/search.svg" alt="" />
         </div>
       </div>
@@ -179,7 +179,7 @@ export default {
           document.body.appendChild(this.stiky);
         });
       } else {
-        // this.$refs.top.$el.appendChild(this.stiky);
+        this.$refs.top.$el.appendChild(this.stiky);
       }
     },
     changeActive(active) {

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

@@ -66,11 +66,15 @@
     </div> -->
 
     <div class="casting">
-      <page-title title="最受欢迎铸造者"></page-title>
+      <page-title
+        title="最受欢迎铸造者"
+        :to="{ path: '/creatorList' }"
+      ></page-title>
       <template v-for="(item, index) in miners" :key="index">
         <creator-info
           :rank="index < 3 ? index + 1 : 0"
           v-model:info="miners[index]"
+          size="large"
         ></creator-info>
       </template>
     </div>

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

@@ -15,7 +15,7 @@
             width="78"
             height="78"
             :src="
-              info.avatar || require('../assets/svgs/img_default_photo.svg')
+              info.avatar || require('../../assets/svgs/img_default_photo.svg')
             "
             fit="cover"
             @click="$router.push('/setting')"
@@ -24,7 +24,7 @@
             <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="" />
+              <img @click="copy" src="../../assets/svgs/copy_icon.svg" alt="" />
             </div>
           </div>
         </div>
@@ -76,7 +76,7 @@
         </div>
         <div class="flex1"></div>
         <div class="search">
-          <img src="../assets/svgs/search.svg" alt="" />
+          <img src="../../assets/svgs/search.svg" alt="" />
         </div>
       </div>
 

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

@@ -0,0 +1,191 @@
+<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>
+          </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>
+</template>
+
+<script>
+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) {
+        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;
+          setTimeout(() => {
+            this.bs.value.refresh();
+          }, 500);
+        });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.follow {
+  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;
+  }
+}
+/deep/.van-tabs {
+  .van-tabs__nav {
+    padding-left: 16px;
+  }
+}
+// /deep/.van-tab {
+// flex-grow: 0;
+// padding: 0 0 0 0;
+// margin-right: 50px;
+
+.tab {
+  position: relative;
+  padding-right: 14px;
+  .van-icon {
+    position: absolute;
+    right: 0;
+
+    &.van-icon-arrow-down {
+      top: 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;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,178 @@
+<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>
+  </div>
+</template>
+
+<script>
+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);
+    },
+  },
+  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;
+          setTimeout(() => {
+            this.bs.value.refresh();
+          }, 500);
+        });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.search {
+  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;
+  }
+}
+/deep/.van-tabs {
+  .van-tabs__nav {
+    padding-left: 16px;
+  }
+}
+// /deep/.van-tab {
+// flex-grow: 0;
+// padding: 0 0 0 0;
+// margin-right: 50px;
+
+.tab {
+  position: relative;
+  padding-right: 14px;
+  .van-icon {
+    position: absolute;
+    right: 0;
+
+    &.van-icon-arrow-down {
+      top: 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;
+      }
+    }
+  }
+}
+/deep/.van-search {
+  .van-field__left-icon {
+    display: flex;
+    align-items: center;
+  }
+  .van-icon {
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

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

@@ -5,7 +5,7 @@
         <div class="name">{{ pageName }}</div>
       </div>
       <van-tabs
-        v-model:active="source"
+        v-model:active="sort"
         :ellipsis="false"
         line-width="16"
         line-height="2"
@@ -13,10 +13,27 @@
       >
         <van-tab
           :title="item.label"
-          :name="item.value"
+          :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"
-        ></van-tab>
+        >
+          <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">
@@ -42,20 +59,25 @@ export default {
     return {
       list: [],
       empty: false,
-      source: "",
+      sort: "id,desc",
       type: "",
       sourceOptions: [
         {
           label: "全部",
-          value: "",
+          value: "id,desc",
         },
         {
-          label: "新品",
-          value: "OFFICIAL,USER",
+          label: "最新",
+          value: "createdAt,desc",
         },
         {
-          label: "转让",
-          value: "TRANSFER",
+          label: "最热",
+          value: "likes,desc",
+        },
+        {
+          label: "价格",
+          value: ["price,desc", "price,asc"],
+          type: "select",
         },
       ],
     };
@@ -69,8 +91,18 @@ export default {
     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) {
@@ -78,7 +110,7 @@ export default {
           document.body.appendChild(this.stiky);
         });
       } else {
-        // this.$refs.top.$el.appendChild(this.stiky);
+        this.$refs.top.$el.appendChild(this.stiky);
       }
     },
     getList() {
@@ -93,11 +125,10 @@ export default {
             page: 0,
             size: 20,
             query: {
-              source: this.source,
               type: this.type,
               onShelf: true,
             },
-            sort: "createdAt,desc",
+            sort: this.sort,
           },
           { body: "json" }
         )
@@ -126,8 +157,8 @@ export default {
   align-items: center;
   .name {
     font-size: 20px;
-    font-weight: bold;
-    color: #ffffff;
+    // font-weight: bold;
+    color: @prim;
     line-height: 30px;
   }
 }
@@ -136,9 +167,42 @@ export default {
     padding-left: 16px;
   }
 }
-/deep/.van-tab {
-  flex-grow: 0;
-  padding: 0 0 0 0;
-  margin-right: 50px;
+// /deep/.van-tab {
+// flex-grow: 0;
+// padding: 0 0 0 0;
+// margin-right: 50px;
+
+.tab {
+  position: relative;
+  padding-right: 14px;
+  .van-icon {
+    position: absolute;
+    right: 0;
+
+    &.van-icon-arrow-down {
+      top: 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;
+      }
+    }
+  }
 }
 </style>

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

@@ -0,0 +1,186 @@
+<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>
+  </div>
+</template>
+
+<script>
+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: "",
+    };
+  },
+  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);
+    },
+  },
+  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(
+          "/collection/all",
+          {
+            page: 0,
+            size: 20,
+            query: {
+              onShelf: true,
+            },
+            sort: "createdAt,desc",
+            search: this.search,
+          },
+          { body: "json" }
+        )
+        .then((res) => {
+          this.list = res.content;
+          this.empty = res.empty;
+          setTimeout(() => {
+            this.bs.value.refresh();
+          }, 500);
+        });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.search {
+  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;
+  }
+}
+/deep/.van-tabs {
+  .van-tabs__nav {
+    padding-left: 16px;
+  }
+}
+// /deep/.van-tab {
+// flex-grow: 0;
+// padding: 0 0 0 0;
+// margin-right: 50px;
+
+.tab {
+  position: relative;
+  padding-right: 14px;
+  .van-icon {
+    position: absolute;
+    right: 0;
+
+    &.van-icon-arrow-down {
+      top: 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;
+      }
+    }
+  }
+}
+/deep/.van-search {
+  .van-field__left-icon {
+    display: flex;
+    align-items: center;
+  }
+  .van-icon {
+    display: flex;
+    align-items: center;
+  }
+}
+</style>