二手市场筛选

.env.development

@@ -1,4 +1,4 @@
-VUE_APP_BASE_URL=https://test.raex.vip
+VUE_APP_BASE_URL=https://www.raex.vip
 NODE_ENV=development
 PUBLIC_PATH=/
 ASSETS_PATH=raex

src/components/product/productInfo.vue

@@ -10,6 +10,7 @@
     >
         <van-image width="100%" height="calc(50vw - 24px)" :src="getImg(changeImgs(info.pic, 600))" fit="cover" />
 
+        <div class="number" v-if="info.number">编号：{{ info.number }}</div>
         <div class="content">
             <div class="name van-ellipsis">
                 {{ info.name }}
@@ -226,4 +227,16 @@ export default {
         margin-right: 3px;
     }
 }
+
+.number {
+    position: absolute;
+    top: calc(50vw - 46px);
+    left: 0;
+    right: 0;
+    font-size: 12px;
+    color: #939599;
+    line-height: 22px;
+    background-color: fade(#000, 80%);
+    padding: 0 10px;
+}
 </style>

src/views/product/List.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="follow">
-        <van-sticky ref="top" :offset-top="bar.value.show ? 46 : 0">
+        <van-sticky ref="top" class="list-top" :offset-top="bar.value.show ? 46 : 0">
             <div class="top" v-if="!minterId">
                 <div class="name">{{ title || pageName }}</div>
                 <img src="@assets/icon-sosuo.png" alt="" @click="goSearch" class="search" />
@@ -12,6 +12,7 @@
                 line-width="16"
                 line-height="2"
                 @change="getData(true)"
+                :class="{ trans: source == 'TRANSFER' }"
             >
                 <van-tab
                     :title="item.label"
@@ -31,6 +32,7 @@
                     </template>
                 </van-tab>
             </van-tabs>
+            <van-checkbox @change="getData(true)" class="sala" v-model="salable">仅看在售</van-checkbox>
         </van-sticky>
 
         <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
@@ -83,7 +85,8 @@ export default {
                 }
             ],
             url: '/collection/all',
-            title: ''
+            title: '',
+            salable: false
         };
     },
     computed: {
@@ -115,7 +118,8 @@ export default {
                     source: this.source,
                     onShelf: true,
                     del: false,
-                    minterId: this.minterId
+                    minterId: this.minterId,
+                    salable: this.salable || ''
                 },
                 sort: this.sortOptions[this.title] || this.sort
             };
@@ -190,7 +194,45 @@ export default {
     }
 }
 
+/deep/.trans {
+    .van-tab {
+        margin-right: 30px;
+    }
+}
+
 .van-tabs {
     background-color: @bg;
 }
+
+.list-top {
+    position: relative;
+}
+/deep/.sala {
+    position: absolute;
+    right: 16px;
+    top: 63px;
+    .van-checkbox__icon {
+        color: #fff;
+        transform: scale(0.6);
+
+        .van-icon {
+            border-color: @text3;
+        }
+
+        &.van-checkbox__icon--checked {
+            .van-icon {
+                border-width: 0;
+                .linear();
+                &::before {
+                    color: #fff;
+                }
+            }
+        }
+    }
+    .van-checkbox__label {
+        color: @text3;
+        margin-left: 0px;
+        font-size: @font1;
+    }
+}
 </style>