筛选分类

.env.development

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

src/components/asset/assetInfo.vue

@@ -1,31 +1,12 @@
 <template>
     <div class="product" @click="goAsset">
-        <van-image
-            v-if="opened === false"
-            width="21.3vw"
-            height="21.3vw"
-            radius="8"
-            :src="require('../../assets/manghe.png')"
-            fit="cover"
-        />
+        <van-image v-if="opened === false" width="21.3vw" height="21.3vw" radius="8"
+            :src="require('../../assets/manghe.png')" fit="cover" />
         <template v-else>
-            <van-image
-                class="icon-img"
-                radius="8"
-                width="21.3vw"
-                height="21.3vw"
-                :src="getImg(changeImgs(info.pic))"
-                fit="contain"
-            />
-            <van-image
-                class="more-img"
-                radius="8"
-                width="21.3vw"
-                height="21.3vw"
-                :src="getImg(changeImgs(info.pic))"
-                fit="contain"
-                v-if="isMore"
-            />
+            <van-image class="icon-img" radius="8" width="21.3vw" height="21.3vw" :src="getImg(changeImgs(info.pic))"
+                fit="contain" />
+            <van-image class="more-img" radius="8" width="21.3vw" height="21.3vw" :src="getImg(changeImgs(info.pic))"
+                fit="contain" v-if="isMore" />
         </template>
 
         <div class="number" v-if="info.number && opened">编号：{{ info.number }}</div>
@@ -34,19 +15,11 @@
             <!-- <div class="status status1" v-if="info.consignment">寄售中</div> -->
             <img v-if="isLock" class="status-img" src="../../assets/png-shangsuo.png" alt="" />
             <img v-else-if="info.consignment" class="status-img" src="../../assets/png-jishouzhong.png" alt="" />
-            <img
-                v-else-if="info.status === 'NORMAL' && info.publicShow"
-                class="status-img"
-                src="../../assets/png-jinzhanshi.png"
-                alt=""
-            />
-            <!-- <img v-else-if="info.status === 'PENDING'" class="status-img" src="../../assets/png-shenhe.png" alt="" /> -->
-            <img
-                v-else-if="info.status === 'AUCTIONING'"
-                class="status-img"
-                src="../../assets/png-paimaizhong.png"
-                alt=""
-            />
+            <img v-else-if="info.status === 'NORMAL' && info.publicShow" class="status-img"
+                src="../../assets/png-jinzhanshi.png" alt="" />
+            <img v-else-if="info.status === 'PENDING'" class="status-imgs" src="../../assets/png-shenhe@3x.png" alt="" />
+            <img v-else-if="info.status === 'AUCTIONING'" class="status-img" src="../../assets/png-paimaizhong.png"
+                alt="" />
             <!-- <img v-if="info.consignment" class="status-img" src="../../assets/png-jishouzhong.png" alt="" />
             <div class="status" v-else-if="info.status === 'NORMAL'">
                 {{ info.publicShow ? '仅展示' : '未展示' }}
@@ -75,7 +48,7 @@
                     {{ info.publicShow ? '仅展示' : '未展示' }}
                 </div>
                 <div class="status" v-else>
-                    {{ getLabelName(info.status, assetStatusOptions) }}
+                    {{ q(info.status, assetStatusOptions) }}
                 </div>
             </template>
             <div v-else class="status" style="min-height: 24px;"></div> -->
@@ -175,6 +148,7 @@ export default {
     &:nth-child(3n + 1) {
         padding-right: 7.5vw;
     }
+
     &:nth-child(3n + 2) {
         padding-right: 7.5vw;
     }
@@ -185,12 +159,14 @@ export default {
         z-index: 1;
         box-shadow: 2px -2px 4px 0px rgba(0, 0, 0, 0.3);
     }
+
     .more-img {
         position: absolute;
         top: calc(5.3vw - 5px);
         left: 5px;
         z-index: 0;
     }
+
     .content {
         // padding: 6px 10px 8px;
         padding: 5.3vw 0 0;
@@ -214,6 +190,7 @@ export default {
                 width: 8px;
             }
         }
+
         .status {
             line-height: 24px;
             padding: 10px 0 8px;
@@ -226,10 +203,12 @@ export default {
         display: flex;
         justify-content: space-between;
         align-items: center;
+
         .text1 {
             font-weight: 400;
             color: @text3;
             line-height: 117px;
+
             span {
                 &:last-child {
                     color: #fff;
@@ -239,9 +218,11 @@ export default {
         }
     }
 }
+
 .price-content {
     display: flex;
     align-items: center;
+
     .text1 {
         font-size: @font1;
         color: @text3;
@@ -256,9 +237,11 @@ export default {
     line-height: 4.5vw;
     align-items: center;
     overflow: hidden;
+
     span {
         // margin-left: 4px;
     }
+
     .van-image {
         flex-shrink: 0;
     }
@@ -281,6 +264,7 @@ export default {
     white-space: nowrap;
     z-index: 2;
 }
+
 .touying {
     position: absolute;
     width: 25.6vw;
@@ -289,6 +273,7 @@ export default {
     top: 21.3vw;
     z-index: 0;
 }
+
 .status-img {
     width: 22px;
     height: 14px;
@@ -297,6 +282,16 @@ export default {
     top: 5.3vw;
     z-index: 3;
 }
+
+.status-imgs {
+    width: 42px;
+    height: 14px;
+    position: absolute;
+    left: 0;
+    top: 5.3vw;
+    z-index: 3;
+}
+
 .status {
     background-color: #fff;
     font-size: 12px;
@@ -310,13 +305,16 @@ export default {
     z-index: 3;
     padding: 0 10px;
     transform: scaleX(0.8);
+
     &.status1 {
         color: #3ab200;
     }
+
     &.status2 {
         color: #ff4f50;
     }
 }
+
 .num-icon {
     font-size: 12px;
     font-weight: bold;
@@ -330,6 +328,7 @@ export default {
     left: 0;
     border-radius: 8px 0 8px 0;
     z-index: 2;
+
     span {
         transform: scale(0.8);
     }

src/router/index.js

@@ -346,7 +346,7 @@ const routes = [
         meta: {
             pageType: Page.Every,
             tabColor: '#181818',
-            menuPage: true
+            // menuPage: true
         }
     },
     {

src/views/order/Orders.vue

@@ -179,6 +179,10 @@ export default {
                     status: 'FINISH,NOT_PAID',
                     name: '全部'
                 },
+                {
+                    status: 'NOT_PAID',
+                    name: '审核中'
+                },
                 {
                     status: 'NOT_PAID',
                     name: '待支付'

src/views/product/MetaDomain.vue

@@ -3,12 +3,8 @@
         <van-sticky>
             <div class="padding-safe-top">
                 <div class="page_top_one">
-                    <img
-                        :src="require('../../assets/icon-back@3x.png')"
-                        alt=""
-                        class="page_top_one_img"
-                        @click="$router.go(-1)"
-                    />
+                    <img :src="require('../../assets/icon-back@3x.png')" alt="" class="page_top_one_img"
+                        @click="$router.go(-1)" />
                     RID元域名买卖市场
                 </div>
                 <!-- <div class="page_top_two">
@@ -37,17 +33,11 @@
                         >
                         </van-tab>
                     </van-tabs> -->
-                    <van-field
-                        v-model="value"
-                        :clearable="false"
-                        enterkeyhint="search"
-                        ref="fieldRef"
-                        :left-icon="require('@assets/icon_sosuo@3x.png')"
-                        placeholder="搜索该类目下的元域名"
-                        extra
-                        @keyup="onInput"
-                    >
-                        <template #extra> <div class="flex_text">.nft</div> </template>>
+                    <van-field v-model="value" :clearable="false" enterkeyhint="search" ref="fieldRef"
+                        :left-icon="require('@assets/icon_sosuo@3x.png')" placeholder="搜索该类目下的元域名" extra @keyup="onInput">
+                        <template #extra>
+                            <div class="flex_text">.nft</div>
+                        </template>>
                     </van-field>
                     <div class="page_top_three_btn" @click="screening">
                         <div class="page_top_three_btn_con">筛选</div>
@@ -65,41 +55,20 @@
                 </div>
             </div>
         </van-sticky>
-        <van-pull-refresh
-            v-if="domainList.length == 0"
-            success-text="加载成功"
-            success-duration="500"
-            class="search"
-            v-model="isLoading"
-            :head-height="80"
-            @refresh="onRefresh"
-        >
-            <van-list
-                style="padding-bottom: 100px"
-                class="box-list"
-                v-model:loading="loading"
-                :finished="finished"
-                finished-text=""
-                @load="getList"
-            >
+        <van-pull-refresh v-if="domainList.length == 0" success-text="加载成功" success-duration="500" class="search"
+            v-model="isLoading" :head-height="80" @refresh="onRefresh">
+            <van-list style="padding-bottom: 100px" class="box-list" v-model:loading="loading" :finished="finished"
+                finished-text="" @load="getList">
                 <template v-for="(item, index) in list" :key="item.id">
                     <product-info v-model:info="list[index]" domain></product-info>
                 </template>
-                <van-empty
-                    :image="require('@assets/empty_img_asset_dark.png')"
-                    v-if="empty"
-                    description="没有任何藏品哦~"
-                />
+                <van-empty :image="require('@assets/empty_img_asset_dark.png')" v-if="empty" description="没有任何藏品哦~" />
             </van-list>
         </van-pull-refresh>
         <div class="meta_domain_name_list" v-else>
             <div class="meta_domain_name_list_con" v-for="(item, index) in domainList" :key="item.id">
                 <div class="meta_domain_name_list_con_left">
-                    <img
-                        :src="item.sold ? registered : unregistered"
-                        alt=""
-                        class="meta_domain_name_list_con_left_img"
-                    />
+                    <img :src="item.sold ? registered : unregistered" alt="" class="meta_domain_name_list_con_left_img" />
                     <div>
                         <div class="meta_domain_name_list_con_left_one">{{ item.domain }}</div>
                         <div class="meta_domain_name_list_con_left_con">
@@ -112,11 +81,9 @@
                 </div>
                 <div class="meta_domain_name_list_con_right" @click="buy(index)">
                     <div class="meta_domain_name_list_con_right_one">{{ item.sold ? '超链' : '购买' }}</div>
-                    <div
-                        :class="
-                            item.sold ? 'meta_domain_name_list_con_right_three' : 'meta_domain_name_list_con_right_two'
-                        "
-                    ></div>
+                    <div :class="
+                        item.sold ? 'meta_domain_name_list_con_right_three' : 'meta_domain_name_list_con_right_two'
+                    "></div>
                 </div>
             </div>
         </div>
@@ -125,88 +92,79 @@
             <div class="select-right padding-safe-top">
                 <div class="select-right_classification">
                     <div class="select-right_classification_title">
-                        <img
-                            :src="require('../../assets/png-mingcheng@3x.png')"
-                            alt=""
-                            class="select-right_classification_title_img"
-                        />
+                        <img :src="require('../../assets/png-mingcheng@3x.png')" alt=""
+                            class="select-right_classification_title_img" />
                         <div class="select-right_classification_title_text">元域名分类</div>
                     </div>
                     <div class="select-right_classification_list">
-                        <div
-                            v-for="(item, index) in domainNameList"
-                            :key="index"
-                            class="select-right_classification_list_con"
-                            @click="domainNameType = item.type"
-                            :class="domainNameType === item.type ? 'select-right_classification_list_cons' : ''"
-                        >
-                            <img
-                                :src="require('../../assets/png-da-zi@3x.png')"
-                                alt=""
-                                class="select-right_classification_list_con_img"
-                            />
-                            <div
-                                class="select-right_classification_list_con_text"
-                                :class="
-                                    domainNameType === item.type ? 'select-right_classification_list_con_texts' : ''
-                                "
-                            >
+                        <div v-for="(item, index) in domainNameList" :key="index"
+                            class="select-right_classification_list_con" @click="domainNameType = item.type"
+                            :class="domainNameType === item.type ? 'select-right_classification_list_cons' : ''">
+                            <img :src="require('../../assets/png-da-zi@3x.png')" alt=""
+                                class="select-right_classification_list_con_img" />
+                            <div class="select-right_classification_list_con_text" :class="
+                                domainNameType === item.type ? 'select-right_classification_list_con_texts' : ''
+                            ">
                                 {{ item.name }}
                             </div>
-                            <img
-                                :src="require('../../assets/xingzhuangjiehe@3x.png')"
-                                alt=""
-                                class="select-right_classification_list_con_imgTwo"
-                                v-if="domainNameType === item.type"
-                            />
+                            <img :src="require('../../assets/xingzhuangjiehe@3x.png')" alt=""
+                                class="select-right_classification_list_con_imgTwo" v-if="domainNameType === item.type" />
                         </div>
                     </div>
                 </div>
                 <div class="select-right_classification select-right_classifications">
                     <div class="select-right_classification_title">
-                        <img
-                            :src="require('../../assets/png-xiyoudu@3x.png')"
-                            alt=""
-                            class="select-right_classification_title_img"
-                        />
+                        <img :src="require('../../assets/png-xiyoudu@3x.png')" alt=""
+                            class="select-right_classification_title_img" />
                         <div class="select-right_classification_title_text">稀有度分类</div>
                     </div>
                     <div class="select-right_classification_list">
-                        <div
-                            v-for="(item, index) in rarityList"
-                            :key="index"
-                            class="select-right_classification_list_con"
+                        <div v-for="(item, index) in rarityList" :key="index" class="select-right_classification_list_con"
                             @click="rarityType = item.type"
-                            :class="rarityType === item.type ? 'select-right_classification_list_conss' : ''"
-                        >
-                            <img
-                                :src="require('../../assets/png-da-lv@3x.png')"
-                                alt=""
-                                class="select-right_classification_list_con_img"
-                            />
-                            <div
-                                class="select-right_classification_list_con_text"
-                                :class="rarityType === item.type ? 'select-right_classification_list_con_textss' : ''"
-                            >
+                            :class="rarityType === item.type ? 'select-right_classification_list_conss' : ''">
+                            <img :src="require('../../assets/png-da-lv@3x.png')" alt=""
+                                class="select-right_classification_list_con_img" />
+                            <div class="select-right_classification_list_con_text"
+                                :class="rarityType === item.type ? 'select-right_classification_list_con_textss' : ''">
                                 {{ item.name }}
                             </div>
-                            <img
-                                :src="require('../../assets/xingzhuangjiehe@3x@3x (1).png')"
-                                alt=""
-                                class="select-right_classification_list_con_imgTwo"
-                                v-if="rarityType === item.type"
-                            />
+                            <img :src="require('../../assets/xingzhuangjiehe@3x@3x (1).png')" alt=""
+                                class="select-right_classification_list_con_imgTwo" v-if="rarityType === item.type" />
                         </div>
                     </div>
                 </div>
-                <div class="select-right_bottom" style="z-index: 20">
-                    <van-button type="primary" plain round @click="refreash">重置</van-button>
-                    <van-button type="primary" round @click="submit">确认筛选</van-button>
+                <div class="select-right_classification select-right_classifications">
+                    <div class="select-right_classification_title">
+                        <img :src="require('../../assets/png-tese@3x.png')" alt=""
+                            class="select-right_classification_title_img" />
+                        <div class="select-right_classification_title_text">特色分类</div>
+                    </div>
+                    <div class="select-right_classification_list">
+                        <div v-for="(item, index) in characteristicList" :key="index"
+                            class="select-right_classification_list_con" @click="characteristicType = item.type"
+                            :class="characteristicType === item.type ? 'select-right_classification_list_consss' : ''">
+                            <img :src="require('../../assets/png-da-zi@3x (4).png')" alt=""
+                                class="select-right_classification_list_con_img" />
+                            <div class="select-right_classification_list_con_text"
+                                :class="characteristicType === item.type ? 'select-right_classification_list_con_textsss' : ''">
+                                {{ item.name }}
+                            </div>
+                            <img :src="require('../../assets/shuxingtese@3x.png')" alt=""
+                                class="select-right_classification_list_con_imgTwo"
+                                v-if="characteristicType === item.type" />
+                        </div>
+                    </div>
                 </div>
             </div>
             <!-- </van-popup> -->
         </div>
         <div class="page_listone_bg" v-if="show" @click="showStatus"></div>
+        <div class="select-right_bottom" style="z-index: 99" :style="{ width: domainWidth }">
+            <div class="select-right_bottom_con">
+                <van-button type="primary" plain round @click="refreash">重置</van-button>
+                <van-button type="primary" round @click="submit">确认筛选</van-button>
+            </div>
+        </div>
         <img src="../../assets/icon_zhiding.png" @click="goTop" class="goTop" v-if="bodyScroll > 100" alt="" />
     </div>
 </template>
@@ -222,6 +180,7 @@ export default {
             domainNameType: 'LIKE',
             scrollTop: 0,
             rarityType: '',
+            characteristicType: '',
             show: false,
             domainPrice: false,
             source: true,
@@ -269,6 +228,24 @@ export default {
                     type: 'RID'
                 }
             ],
+            characteristicList: [
+                {
+                    name: '三位数字',
+                    type: 'RID3N'
+                },
+                {
+                    name: '四位数字',
+                    type: 'RID4N'
+                },
+                {
+                    name: '五位数字',
+                    type: 'RID5N'
+                },
+                {
+                    name: '五位以上数字',
+                    type: 'RID6N'
+                }
+            ],
             loading: false,
             finished: false,
             page: 0,
@@ -329,11 +306,17 @@ export default {
         },
         refreash() {
             (this.domainNameType = 'LIKE'), (this.rarityType = '');
+            this.characteristicType = ''
             this.dressing = false;
             this.domainPrice = false;
             this.getList(true);
         },
         submit() {
+            if(this.rarityType != '' && this.characteristicType != ''){
+                this.$toast('稀有度分类和特色分类只能筛选一类');
+                this.refreash();
+                return
+            }
             this.domainWidth = '0px';
             this.show = false;
             this.dressing = true;
@@ -363,6 +346,12 @@ export default {
                         prefixName: this.rarityType
                     };
                 }
+                if (this.characteristicType != '') {
+                    query = {
+                        ...query,
+                        prefixName: this.characteristicType
+                    };
+                }
                 if (this.domainNameType == 'SELL') {
                     query = {
                         ...query,
@@ -457,7 +446,7 @@ export default {
                     });
                     this.domainList = res;
                 })
-                .catch(e => {});
+                .catch(e => { });
         },
         onRefresh() {
             this.getList(true).then(() => {
@@ -716,12 +705,12 @@ export default {
         width: calc(84vw + 1px);
         height: var(--app-height);
         box-sizing: border-box;
-        overflow: auto;
+        overflow-y: auto;
         .bottom(100px);
         position: relative;
 
         .select-right_classification {
-            padding-top: 50px;
+            padding-top: 30px;
 
             .select-right_classification_title {
                 padding-left: 10px;
@@ -756,7 +745,7 @@ export default {
                     background: rgba(255, 255, 255, 0.1);
                     border-radius: 4px;
                     position: relative;
-                    margin-bottom: 32px;
+                    margin-bottom: 26px;
                     display: flex;
                     align-items: center;
                     box-sizing: border-box;
@@ -798,10 +787,17 @@ export default {
 
                     .select-right_classification_list_con_texts {
                         font-weight: bold;
+                        color: #FF29F7;
                     }
 
                     .select-right_classification_list_con_textss {
                         font-weight: bold;
+                        color: #00FE1E;
+                    }
+
+                    .select-right_classification_list_con_textsss {
+                        font-weight: bold;
+                        color: #22FFE7;
                     }
 
                     .select-right_classification_list_con_imgTwo {
@@ -828,43 +824,21 @@ export default {
                     box-sizing: border-box;
                     color: #ffffff;
                 }
+
+                .select-right_classification_list_consss {
+                    height: 38px;
+                    background: rgba(90, 253, 255, 0.1);
+                    border: 1px solid #22FFE7;
+                    box-sizing: border-box;
+                    color: #faf0ff;
+                }
             }
         }
 
         .select-right_classifications {
-            padding-top: 18px;
+            padding-top: 14px;
         }
 
-        .select-right_bottom {
-            position: absolute;
-            bottom: 34px;
-            left: 0;
-            right: 0;
-            width: 100%;
-            padding: 9px 16px;
-            // background: #161414;
-            .bottom(9px);
-            box-sizing: border-box;
-            .flex();
-            z-index: 20;
-
-            .van-button {
-                font-weight: bold;
-                color: #ffffff;
-
-                &:nth-child(1) {
-                    width: 100px;
-                    border: 1px solid #fe18fe;
-                    background: rgba(254, 24, 255, 0.3);
-                }
-
-                &:nth-child(2) {
-                    background: #fe18ff;
-                    flex-grow: 1;
-                    margin-left: 10px;
-                }
-            }
-        }
     }
 
     .meta_domain_name_list {
@@ -977,7 +951,7 @@ export default {
     position: fixed;
     top: 0;
     right: 0;
-    z-index: 9999;
+    z-index: 99;
     transition: 0.5s;
 }
 
@@ -987,7 +961,7 @@ export default {
     position: fixed;
     top: 0;
     left: 0;
-    z-index: 2001;
+    z-index: 20;
     background: rgba(0, 0, 0, 0.2);
 }
 
@@ -1001,4 +975,38 @@ export default {
     display: block;
     z-index: 20;
 }
+
+.select-right_bottom {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    background: rgba(0, 0, 0, 0);
+    backdrop-filter: blur(10px);
+    transition: 0.5s;
+    // background: #161414;
+
+    .select-right_bottom_con {
+        display: flex;
+        padding: 9px 16px;
+        .bottom(9px);
+        box-sizing: border-box;
+    }
+
+    .van-button {
+        font-weight: bold;
+        color: #ffffff;
+
+        &:nth-child(1) {
+            width: 100px;
+            border: 1px solid #fe18fe;
+            background: rgba(254, 24, 255, 0.3);
+        }
+
+        &:nth-child(2) {
+            background: #fe18ff;
+            flex-grow: 1;
+            margin-left: 10px;
+        }
+    }
+}
 </style>