sale

.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
 VUE_APP_PUBLIC_PATH=/
 ASSETS_PATH=raex

src/components/product/SaleInfo.vue

@@ -20,27 +20,32 @@
         teleport="#app"
         ref="action"
         v-model:show="show"
-        :title="`当前寄售(${total}份)`"
+        :title="`当前${salable ? '寄售' : '全部'}(${totalElements}份)`"
     >
         <template #description>
-            <div>仅展示可购买的</div>
+            <div class="sale-sub" :class="{ prim: salable }" @click="changeSalable">
+                <img v-if="salable" src="@assets/icon_gouxuan_sale_pre.png" alt="" />
+                <img v-else src="@assets/icon_gouxuan_sale.png" alt="" />
+                <span>仅展示可购买的</span>
+            </div>
         </template>
-        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getData">
+        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getData">
             <div @click="goDetail(item)" class="product-info" v-for="(item, index) in list" :key="index">
                 <div class="top">
                     <div class="user">
                         <van-image width="24" height="24" radius="24" :src="item.ownerAvatar" fit="cover" />
                         <span>{{ item.owner }}</span>
                         <span class="status out" v-if="item.inPaying">支付中</span>
+                        <span class="status out" v-else-if="!item.salable">仅展示</span>
                         <span class="status prim" v-else>寄售</span>
                     </div>
-                    <div class="price">¥{{ item.price }}</div>
+                    <div class="price" v-if="item.salable">¥{{ item.price }}</div>
                 </div>
                 <div class="bottom">
                     <div class="name">{{ item.name }}</div>
                     <div class="num" v-if="getNum(item)">#{{ getNum(item) }}</div>
                     <div class="buy" v-if="!item.soldOut">
-                        <span>去购买</span>
+                        <span>{{ !item.salable ? '去看看' : '去购买' }}</span>
 
                         <img src="../../assets/icon-jiantou2.png" alt="" />
                     </div>
@@ -77,7 +82,8 @@ export default {
             showInfo: {
                 price: 0
             },
-            total: 0
+            total: 0,
+            salable: true
         };
     },
     mixins: [list],
@@ -97,6 +103,14 @@ export default {
         }
     },
     methods: {
+        changeSalable() {
+            if (this.salable) {
+                this.salable = '';
+            } else {
+                this.salable = true;
+            }
+            this.getData(true);
+        },
         getMarketData() {
             return this.$http
                 .post(
@@ -104,9 +118,10 @@ export default {
                     {
                         query: {
                             source: 'TRANSFER',
-                            salable: true
+                            salable: true,
+                            prefixName: this.search
                         },
-                        search: this.search,
+                        // search: this.search,
                         sort: 'price,asc',
                         size: 1,
                         page: 0
@@ -138,9 +153,10 @@ export default {
             return {
                 query: {
                     source: 'TRANSFER',
-                    salable: true
+                    salable: this.salable,
+                    prefixName: this.search
                 },
-                search: this.search,
+                // search: this.search,
                 sort: 'price,asc'
             };
         },
@@ -346,4 +362,24 @@ export default {
         }
     }
 }
+
+.sale-sub {
+    .flex();
+    img {
+        width: 16px;
+        height: 16px;
+    }
+    span {
+        font-size: 12px;
+        color: #939599;
+        line-height: 24px;
+        margin-left: 2px;
+    }
+
+    &.prim {
+        span {
+            color: #000000;
+        }
+    }
+}
 </style>

src/styles/app.less

@@ -308,6 +308,8 @@ input:-webkit-autofill {
     }
 }
 .saleSheet {
+    min-height: 61.8vh;
+    max-height: 61.8vh;
     .van-action-sheet__header {
         border-bottom-width: 0px;
     }