Merge branch 'master' of http://git.izouma.com/xiongzhu/raex_front into dev

src/components/AppBar.vue

@@ -160,7 +160,8 @@ export default {
         },
         back() {
             if (!fromRoute || !fromRoute.name) {
-                this.$router.replace('/home');
+                // this.$router.replace('/home');
+                this.$router.go(-1);
             } else if (window.history.length <= 1) {
                 this.$router.replace('/home');
                 return false;

src/components/asset/assetInfo.vue

@@ -40,6 +40,7 @@
                 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/components/product/ProductBanner.vue

@@ -1,20 +1,10 @@
 <template>
-    <div class="detail-top" :style="bgImgStyle">
-        <img src="@assets/png-bg-shangping.png" v-if="windowVertical" class="bg-img" />
-
-        <div class="detail-info" :style="{ paddingBottom: windowVertical ? '50px' : '0px' }">
-            <three-mode
-                :info="info.model3d"
-                :windowVertical="windowVertical"
-                v-if="!!info.model3d"
-                :pageType="pageType"
-            ></three-mode>
-            <swiper
-                @swiper="setSwiperRef"
-                :style="{ width: BannerWidth, height: BannerWidth }"
-                class="mySwiper"
-                v-else-if="banners.length > 0"
-            >
+    <div class="detail-top">
+        <img src="@assets/png-bg-shangping.png" class="bg-img" />
+
+        <div class="detail-info">
+            <three-mode :info="info.model3d" v-if="!!info.model3d" :pageType="pageType"></three-mode>
+            <swiper @swiper="setSwiperRef" class="mySwiper" v-else-if="banners.length > 0">
                 <swiper-slide v-for="(item, index) in banners" :key="index">
                     <!-- <img :src="item" /> -->
 
@@ -23,8 +13,8 @@
                     </div> -->
                     <van-image
                         v-if="opened === false"
-                        :width="imgWidth"
-                        :height="imgWidth"
+                        width="calc(100vw - 134px)"
+                        height="calc(100vw - 134px)"
                         :src="require('../../assets/manghe.png')"
                         fit="contain"
                     />
@@ -38,7 +28,6 @@
                         loop
                         ref="videoRef"
                         autoplay
-                        :style="{ width: imgWidth, height: imgWidth }"
                     >
                         您的浏览器不支持 video 标签。
                     </video>
@@ -46,8 +35,8 @@
                         v-else
                         @click="preview(index, changeImgs(banners))"
                         :src="getImg(item.url, '', 1200)"
-                        :width="imgWidth"
-                        :height="imgWidth"
+                        width="calc(100vw - 134px)"
+                        height="calc(100vw - 134px)"
                         :fit="info.type === 'PICTURE' ? 'cover' : 'contain'"
                     />
                     <!-- <div class="video-icon" v-if="isVideo(item)" @click="changeMuted">
@@ -66,14 +55,16 @@
                 </swiper-slide>
             </swiper>
 
-            <div
-                class="share-content"
-                :style="{ marginTop: windowVertical ? '20px' : '10px' }"
-                v-if="pageType !== 'auction'"
-            >
-                <div class="setAvatar" @click="setAvatar" v-if="pageType == 'asset' && onlyImg">
-                    <img src="../../assets/icon-sheweitouxiang.png" alt="" />
-                    <span>设为头像</span>
+            <div class="share-content" v-if="pageType !== 'auction'">
+                <div class="setAvatar" v-if="pageType == 'asset' && onlyImg">
+                    <div class="setAvatar_con" @click="setAvatar">
+                        <img src="../../assets/icon-sheweitouxiang.png" alt="" />
+                        <span>设为头像</span>
+                    </div>
+                    <!-- <div class="setAvatar_con" @click="setNickname">
+                        <img src="../../assets/icon-sheweitouxiang.png" alt="" />
+                        <span>设为昵称</span>
+                    </div> -->
                 </div>
 
                 <like-button v-if="pageType == 'product'" :isLike="info.liked" @click="likeProduct">
@@ -138,10 +129,6 @@ export default {
         assignment: {
             type: Boolean,
             default: false
-        },
-        windowVertical: {
-            type: Boolean,
-            default: true
         }
     },
     data() {
@@ -150,7 +137,6 @@ export default {
             playing: true
         };
     },
-    inject: ['appHeight', 'safeTop'],
     mixins: [product, asset],
     components: {
         Swiper,
@@ -182,29 +168,6 @@ export default {
                 }
             }
             return false;
-        },
-        bgImgStyle() {
-            if (!this.windowVertical) {
-                return {
-                    height: `calc(${this.appHeight} - ${this.safeTop})`,
-                    width: `calc(${this.appHeight} - ${this.safeTop} - 50px)`
-                };
-            }
-            return {};
-        },
-        imgWidth() {
-            if (this.windowVertical) {
-                return 'calc(100vw - 134px)';
-            } else {
-                return `calc(${this.appHeight} - ${this.safeTop} - 120px)`;
-            }
-        },
-        BannerWidth() {
-            if (this.windowVertical) {
-                return 'calc(100vw - 124px)';
-            } else {
-                return `calc(${this.appHeight} - ${this.safeTop} - 110px)`;
-            }
         }
     },
     mounted() {
@@ -262,6 +225,11 @@ export default {
             this.updateUser({ avatar: this.banners[0].url, useCollectionPic: true }).then(res => {
                 this.$toast.success('设置成功');
             });
+        },
+        setNickname() {
+            this.updateUser({ nickname: this.info.name }).then(res => {
+                this.$toast.success('设置成功');
+            });
         }
     }
 };
@@ -269,9 +237,10 @@ export default {
 
 <style lang="less" scoped>
 @radius: 30px;
+
 .detail-top {
     position: relative;
-    flex-shrink: 0;
+
     .detail-info {
         position: absolute;
         top: 50%;
@@ -282,23 +251,27 @@ export default {
         align-items: center;
         padding-bottom: 50px;
     }
+
     .bg-img {
         display: block;
         width: 100vw;
     }
+
     .mySwiper {
         border-radius: @radius;
         border: 2px solid #ffffff;
         padding: 5px;
         overflow: hidden;
         .detail-animate();
-        // width: calc(100vw - 124px);
+        width: calc(100vw - 124px);
+
         .swiper-slide {
             display: flex;
             align-items: center;
             justify-content: center;
             position: relative;
             overflow: hidden;
+
             /deep/ .van-image {
                 border: 2px solid #2f2f2f;
                 border-radius: @radius;
@@ -312,6 +285,8 @@ export default {
 .swiper-video {
     border: 2px solid #2f2f2f;
     border-radius: @radius;
+    width: calc(100vw - 134px);
+    height: calc(100vw - 134px);
     display: block;
     overflow: hidden;
 }
@@ -320,6 +295,7 @@ export default {
     display: flex;
     margin-top: 20px;
 }
+
 .share-icon {
     img {
         width: 18px;
@@ -327,6 +303,7 @@ export default {
         display: inline-block;
         vertical-align: middle;
     }
+
     span {
         font-size: @font1;
         color: #949699;
@@ -357,22 +334,32 @@ export default {
 
 .setAvatar {
     .flex();
-    img {
-        width: 18px;
-        height: 18px;
-        display: block;
-    }
 
-    span {
-        font-size: 12px;
-        color: #949699;
-        line-height: 24px;
-        margin-left: 3px;
+    .setAvatar_con {
+        .flex();
+
+        img {
+            width: 18px;
+            height: 18px;
+            display: block;
+        }
+
+        span {
+            font-size: 12px;
+            color: #949699;
+            line-height: 24px;
+            margin-left: 3px;
+        }
     }
+
+    // .setAvatar_con:first-of-type {
+    //     margin-right: 30px;
+    // }
 }
 
 .swiper-slide {
     position: relative;
+
     .video-icon {
         position: absolute;
         top: 10px;
@@ -381,6 +368,7 @@ export default {
         background-color: rgba(255, 255, 255, 0.1);
         padding: 2px 5px;
         border-radius: 4px;
+
         img {
             width: 20px;
             height: 20px;
@@ -396,6 +384,7 @@ export default {
         z-index: 999;
         background-color: rgba(255, 255, 255, 0.1);
         border-radius: 100px;
+
         .van-icon {
             color: #fff;
             font-size: 64px;
@@ -403,4 +392,4 @@ export default {
         }
     }
 }
-</style>
+</style>

src/views/Discover.vue

@@ -179,17 +179,23 @@
                     <van-tab v-for="(item, index) in selectOptions" :key="index" :title="item.label" :name="item.value">
                     </van-tab>
                 </van-tabs>
-            </van-sticky>
-            <div class="meta_domain_classify" v-if="sort == 'domain'">
-                <div class="meta_domain_classify_con" :class="{ domainClassify: domainClassify == '1' }">买卖市场</div>
-                <div
-                    @click="$router.push('/ranking')"
-                    class="meta_domain_classify_con"
-                    :class="{ domainClassify: domainClassify == '2' }"
-                >
-                    持仓排名
+                <div class="meta_domain_classify" v-if="sort == 'domain'">
+                    <div
+                        @click="buyingSelling"
+                        class="meta_domain_classify_con"
+                        :class="{ domainClassify: domainClassify == 1 }"
+                    >
+                        最新发布
+                    </div>
+                    <div
+                        @click="positionRanking"
+                        class="meta_domain_classify_con"
+                        :class="{ domainClassify: domainClassify == 2 }"
+                    >
+                        最多点赞
+                    </div>
                 </div>
-            </div>
+            </van-sticky>
             <van-list
                 style="padding-bottom: 100px"
                 class="box-list"
@@ -334,6 +340,14 @@ export default {
         });
     },
     methods: {
+        buyingSelling() {
+            this.domainClassify = 1;
+            this.getList(true);
+        },
+        positionRanking() {
+            this.domainClassify = 2;
+            this.getList(true);
+        },
         getInit() {
             this.$toast.loading({
                 message: '加载中...',
@@ -428,7 +442,11 @@ export default {
                 query = {
                     type: 'DOMAIN'
                 };
-                sort = 'likes,desc';
+                if (this.domainClassify == 1) {
+                    sort = 'createdAt,desc';
+                } else {
+                    sort = 'likes,desc';
+                }
             } else if (this.sort === 'art_Exhibition') {
                 url = 'showroom/all';
                 query = {

src/views/DomainName.vue

@@ -1,8 +1,8 @@
 <template>
     <div :class="action != 1 ? 'meta_domain_nameOne' : 'meta_domain_nameTwo'" class="meta_domain_name">
-        <van-sticky ref="top" :offset-top="action == 1 ? '' : '0'">
+        <van-sticky ref="top" :offset-top="action == 1 ? '' : '0'" :class="action == 3 ? 'learn_more_bg' : ''">
             <div
-                :class="action != 1 ? 'meta_domain_name_tops' : ''"
+                :class="action == 3 ? 'meta_domain_name_tops' : ''"
                 class="meta_domain_name_top"
                 :style="{ height: heightNumber }"
             >
@@ -569,7 +569,7 @@ export default {
 }
 
 .learn_more_img {
-    margin-top: 20px;
+    // margin-top: 20px;
     vertical-align: middle;
 }
 
@@ -687,7 +687,8 @@ export default {
     position: relative;
 
     .meta_domain_name_tops {
-        background: #030001;
+        // background: #030001;
+        padding-bottom: 20px;
     }
 
     .meta_domain_name_top {
@@ -1156,4 +1157,7 @@ export default {
 /deep/.van-sticky--fixed {
     background-color: transparent;
 }
+/deep/ .learn_more_bg {
+    background: linear-gradient(90deg, #1b0222 0%, #23042e 100%, #23042e 100%) !important;
+}
 </style>

src/views/asset/Detail.vue

@@ -164,6 +164,14 @@
                         <div class="page-title"><img src="@assets/icon-miaoshu.png" alt="" />作品描述</div>
                     </template>
                     <div v-if="info.detail" class="page-text page-detail" v-html="info.detail"></div>
+                    <p v-else-if="info.type == 'DOMAIN' && !info.detail">
+                        <van-image
+                            :src="require('@assets/metadomain_name_details.jpg')"
+                            width="100%"
+                            class="page-text page-detail"
+                        >
+                        </van-image>
+                    </p>
                     <div v-else class="textName">铸造者未设置</div>
                 </van-collapse-item>
                 <van-collapse-item name="enablinglist" class="goods-info" v-if="info.empower">

src/views/product/MetaDomain.vue

@@ -3,8 +3,12 @@
         <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">
@@ -33,11 +37,17 @@
                         >
                         </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>
@@ -55,20 +65,41 @@
                 </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">
@@ -81,9 +112,11 @@
                 </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>
@@ -92,41 +125,77 @@
             <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' : ''">{{
-                                                                item.name }}</div>
-                            <img :src="require('../../assets/xingzhuangjiehe@3x.png')" alt=""
-                                class="select-right_classification_list_con_imgTwo" v-if="domainNameType === item.type" />
+                        <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"
+                            />
                         </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' : ''">{{
-                                                                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" />
+                            :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"
+                            />
                         </div>
                     </div>
                 </div>
@@ -138,276 +207,280 @@
             <!-- </van-popup> -->
         </div>
         <div class="page_listone_bg" v-if="show" @click="showStatus"></div>
+        <img src="../../assets/icon_zhiding.png" @click="goTop" class="goTop" v-if="bodyScroll > 100" alt="" />
     </div>
 </template>
 
 <script>
 import ProductInfo from '../../components/product/productInfo.vue';
 export default {
-	name: 'metaDomain',
-	inject: ['setKeeps', 'scrollWrapper', 'changeScroll'],
-	data() {
-		return {
-			domainWidth: '0px',
-			domainNameType: 'LIKE',
-			scrollTop: 0,
-			rarityType: '',
-			show: false,
-			domainPrice: false,
-			source: true,
-			domainNameList: [
-				{
-					name: '热度排行',
-					type: 'LIKE'
-				},
-				{
-					name: '最新发布',
-					type: 'RELEASE'
-				},
-				{
-					name: '寄售中',
-					type: 'SELL'
-				},
-				{
-					name: '仅展示',
-					type: 'SEE'
-				}
-			],
-			rarityList: [
-				{
-					name: '1个字符',
-					type: 'RID1'
-				},
-				{
-					name: '2个字符',
-					type: 'RID2'
-				},
-				{
-					name: '3个字符',
-					type: 'RID3'
-				},
-				{
-					name: '4个字符',
-					type: 'RID4'
-				},
-				{
-					name: '5个字符',
-					type: 'RID5'
-				},
-				{
-					name: '6个字符及以上',
-					type: 'RID'
-				}
-			],
-			loading: false,
-			finished: false,
-			page: 0,
-			empty: false,
-			list: [],
-			domainList: [],
-			dressing: false,
-			search: '',
-			value: '',
-			unregistered: require('@assets/png-da-lv@3x.png'),
-			registered: require('@assets/png-da-zi@3x.png')
-		};
-	},
-	components: {
-		ProductInfo
-	},
-	methods: {
-		onInput(e) {
-			if (e.key === 'Enter') {
-				this.$nextTick(() => {
-					this.getSearch();
-				});
-				this.$refs.fieldRef.blur();
-			}
-		},
-		priceOrder() {
-			this.source = !this.source;
-			this.getList(true);
-		},
-		showStatus() {
-			this.show = false;
-			this.domainWidth = '0px';
-		},
-		screening() {
-			this.show = true;
-			this.domainWidth = 'calc(84vw + 1px)';
-			this.search = '';
-			this.value = '';
-		},
-		domainName(value) {
-			this.payType = value;
-		},
-		getSearch(value) {
-			this.search = this.value;
-			let matching = /^[A-Za-z0-9]+$/;
-			if (matching.test(this.search)) {
-				this.getList(true);
-			} else {
-				if (this.search == '') {
-					this.refreash();
-				} else {
-					this.$toast('只能由数字和字母组成');
-				}
-			}
-		},
-		refreash() {
-			(this.domainNameType = 'LIKE'), (this.rarityType = '');
-			this.dressing = false;
-			this.domainPrice = false;
-			this.getList(true);
-		},
-		submit() {
-			this.domainWidth = '0px';
-			this.show = false;
-			this.dressing = true;
-			this.getList(true);
-			if (this.domainNameType == 'SELL') {
-				this.domainPrice = true;
-			} else {
-				this.domainPrice = false;
-			}
-		},
-		getList(isFirst = false) {
-			if (isFirst) {
-				this.page = 0;
-				this.list = [];
-			}
-			this.loading = true;
-			this.finished = false;
-			this.empty = false;
-			let query = {
-				type: 'DOMAIN'
-			};
-			let sort = 'likes,desc';
-			if (this.dressing) {
-				if (this.rarityType != '') {
-					query = {
-						...query,
-						prefixName: this.rarityType
-					};
-				}
-				if (this.domainNameType == 'SELL') {
-					query = {
-						...query,
-						salable: true
-					};
-					if (this.source) {
-						sort = 'price,desc';
-					} else {
-						sort = 'price,asc';
-					}
-				}
-				if (this.domainNameType == 'SEE') {
-					query = {
-						...query,
-						salable: false
-					};
-				}
-				if (this.domainNameType == 'RELEASE') {
-					query = {
-						...query
-					};
-					sort = 'createdAt,desc';
-				}
-			}
-			let url = 'collection/all';
-			return this.$http
-				.post(
-					url,
-					{
-						page: this.page,
-						size: 20,
-						query: query,
-						sort: sort,
-						search: this.search
-					},
-					{ body: 'json' }
-				)
-				.then(res => {
-					if (res.first) {
-						this.list = [];
-						this.page = 0;
-					}
-					this.list = [...this.list, ...res.content];
-					this.empty = res.empty;
-					if (this.search != '' && res.empty == true) {
-						this.empty = false;
-						this.getDomain();
-					} else {
-						this.domainList = [];
-					}
-					this.loading = false;
-					this.finished = res.last;
-					if (!this.finished) {
-						this.page = this.page + 1;
-					}
-				});
-		},
-		buy(index) {
-			if (!this.domainList[index].sold) {
-				this.$router.push({
-					path: '/domainSubmit',
-					query: {
-						domain: this.domainList[index].domain
-					}
-				});
-			} else {
-				this.$toast('持有人超链暂未开启');
-			}
-		},
-		pad(n, width, z) {
-			z = z || '0';
-			n = n + '';
-			return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
-		},
-		getDomain() {
-			this.$http
-				.post('/domainOrder/search', {
-					domain: this.search
-				})
-				.then(res => {
-					res.forEach(item => {
-						if (item.endTime) {
-							item.endTime = this.dayjs(item.endTime).diff(this.dayjs(), 'second');
-							item.endTime =
-								Math.floor(item.endTime / 24 / 3600) +
-								'天' +
-								this.pad(parseInt(item.endTime / 3600) % 24, 2) +
-								'时' +
-								this.pad(parseInt(item.endTime / 60) % 60, 2) +
-								'分';
-						}
-					});
-					this.domainList = res;
-				})
-				.catch(e => {});
-		},
-		onRefresh() {
-			this.getList(true).then(() => {
-				this.isLoading = false;
-			});
-		}
-	},
-	activated() {
-		this.$nextTick(() => {
-			this.changeScroll(this.scrollTop);
-		});
-	},
-	beforeRouteLeave(to, from, next) {
-		if (to.name === 'productDetail') {
-			console.log('fahsdasdcffad');
-			this.scrollTop = this.scrollWrapper.scrollTop;
-			this.setKeeps(['metaDomain']);
-		} else {
-			this.scrollTop = 0;
-			this.setKeeps(['metaDomain'], false);
-		}
-		next();
-	}
+    name: 'metaDomain',
+    inject: ['setKeeps', 'scrollWrapper', 'changeScroll', 'bodyScroll'],
+    data() {
+        return {
+            domainWidth: '0px',
+            domainNameType: 'LIKE',
+            scrollTop: 0,
+            rarityType: '',
+            show: false,
+            domainPrice: false,
+            source: true,
+            domainNameList: [
+                {
+                    name: '热度排行',
+                    type: 'LIKE'
+                },
+                {
+                    name: '最新发布',
+                    type: 'RELEASE'
+                },
+                {
+                    name: '寄售中',
+                    type: 'SELL'
+                },
+                {
+                    name: '仅展示',
+                    type: 'SEE'
+                }
+            ],
+            rarityList: [
+                {
+                    name: '1个字符',
+                    type: 'RID1'
+                },
+                {
+                    name: '2个字符',
+                    type: 'RID2'
+                },
+                {
+                    name: '3个字符',
+                    type: 'RID3'
+                },
+                {
+                    name: '4个字符',
+                    type: 'RID4'
+                },
+                {
+                    name: '5个字符',
+                    type: 'RID5'
+                },
+                {
+                    name: '6个字符及以上',
+                    type: 'RID'
+                }
+            ],
+            loading: false,
+            finished: false,
+            page: 0,
+            empty: false,
+            list: [],
+            domainList: [],
+            dressing: false,
+            search: '',
+            value: '',
+            unregistered: require('@assets/png-da-lv@3x.png'),
+            registered: require('@assets/png-da-zi@3x.png')
+        };
+    },
+    components: {
+        ProductInfo
+    },
+    methods: {
+        onInput(e) {
+            if (e.key === 'Enter') {
+                this.$nextTick(() => {
+                    this.getSearch();
+                });
+                this.$refs.fieldRef.blur();
+            }
+        },
+        goTop() {
+            this.changeScroll(0, true);
+        },
+        priceOrder() {
+            this.source = !this.source;
+            this.getList(true);
+        },
+        showStatus() {
+            this.show = false;
+            this.domainWidth = '0px';
+        },
+        screening() {
+            this.show = true;
+            this.domainWidth = 'calc(84vw + 1px)';
+            this.search = '';
+            this.value = '';
+        },
+        domainName(value) {
+            this.payType = value;
+        },
+        getSearch(value) {
+            this.search = this.value;
+            let matching = /^[A-Za-z0-9]+$/;
+            if (matching.test(this.search)) {
+                this.getList(true);
+            } else {
+                if (this.search == '') {
+                    this.refreash();
+                } else {
+                    this.$toast('只能由数字和字母组成');
+                }
+            }
+        },
+        refreash() {
+            (this.domainNameType = 'LIKE'), (this.rarityType = '');
+            this.dressing = false;
+            this.domainPrice = false;
+            this.getList(true);
+        },
+        submit() {
+            this.domainWidth = '0px';
+            this.show = false;
+            this.dressing = true;
+            this.getList(true);
+            if (this.domainNameType == 'SELL') {
+                this.domainPrice = true;
+            } else {
+                this.domainPrice = false;
+            }
+        },
+        getList(isFirst = false) {
+            if (isFirst) {
+                this.page = 0;
+                this.list = [];
+            }
+            this.loading = true;
+            this.finished = false;
+            this.empty = false;
+            let query = {
+                type: 'DOMAIN'
+            };
+            let sort = 'likes,desc';
+            if (this.dressing) {
+                if (this.rarityType != '') {
+                    query = {
+                        ...query,
+                        prefixName: this.rarityType
+                    };
+                }
+                if (this.domainNameType == 'SELL') {
+                    query = {
+                        ...query,
+                        salable: true
+                    };
+                    if (this.source) {
+                        sort = 'price,desc';
+                    } else {
+                        sort = 'price,asc';
+                    }
+                }
+                if (this.domainNameType == 'SEE') {
+                    query = {
+                        ...query,
+                        salable: false
+                    };
+                }
+                if (this.domainNameType == 'RELEASE') {
+                    query = {
+                        ...query
+                    };
+                    sort = 'createdAt,desc';
+                }
+            }
+            let url = 'collection/all';
+            return this.$http
+                .post(
+                    url,
+                    {
+                        page: this.page,
+                        size: 20,
+                        query: query,
+                        sort: sort,
+                        search: this.search
+                    },
+                    { body: 'json' }
+                )
+                .then(res => {
+                    if (res.first) {
+                        this.list = [];
+                        this.page = 0;
+                    }
+                    this.list = [...this.list, ...res.content];
+                    this.empty = res.empty;
+                    if (this.search != '' && res.empty == true) {
+                        this.empty = false;
+                        this.getDomain();
+                    } else {
+                        this.domainList = [];
+                    }
+                    this.loading = false;
+                    this.finished = res.last;
+                    if (!this.finished) {
+                        this.page = this.page + 1;
+                    }
+                });
+        },
+        buy(index) {
+            if (!this.domainList[index].sold) {
+                this.$router.push({
+                    path: '/domainSubmit',
+                    query: {
+                        domain: this.domainList[index].domain
+                    }
+                });
+            } else {
+                this.$toast('持有人超链暂未开启');
+            }
+        },
+        pad(n, width, z) {
+            z = z || '0';
+            n = n + '';
+            return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
+        },
+        getDomain() {
+            this.$http
+                .post('/domainOrder/search', {
+                    domain: this.search
+                })
+                .then(res => {
+                    res.forEach(item => {
+                        if (item.endTime) {
+                            item.endTime = this.dayjs(item.endTime).diff(this.dayjs(), 'second');
+                            item.endTime =
+                                Math.floor(item.endTime / 24 / 3600) +
+                                '天' +
+                                this.pad(parseInt(item.endTime / 3600) % 24, 2) +
+                                '时' +
+                                this.pad(parseInt(item.endTime / 60) % 60, 2) +
+                                '分';
+                        }
+                    });
+                    this.domainList = res;
+                })
+                .catch(e => {});
+        },
+        onRefresh() {
+            this.getList(true).then(() => {
+                this.isLoading = false;
+            });
+        }
+    },
+    activated() {
+        this.$nextTick(() => {
+            this.changeScroll(this.scrollTop);
+        });
+    },
+    beforeRouteLeave(to, from, next) {
+        if (to.name === 'productDetail') {
+            console.log('fahsdasdcffad');
+            this.scrollTop = this.scrollWrapper.scrollTop;
+            this.setKeeps(['metaDomain']);
+        } else {
+            this.scrollTop = 0;
+            this.setKeeps(['metaDomain'], false);
+        }
+        next();
+    }
 };
 </script>
 
@@ -917,4 +990,15 @@ export default {
     z-index: 2001;
     background: rgba(0, 0, 0, 0.2);
 }
+
+.goTop {
+    position: fixed;
+    right: 16px;
+    bottom: 70px;
+    bottom: calc(env(safe-area-inset-bottom) + 70px);
+    width: 44px;
+    height: 44px;
+    display: block;
+    z-index: 20;
+}
 </style>

src/views/user/Rank.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="rank">
-        <img src="../../assets/top50.png" class="top-img" alt="" />
+        <img src="../../assets/top50.jpg" class="top-img" alt="" />
         <!-- <div class="top-text">
             <div class="text1">TOP50</div>
             <div class="text2">探索官</div>
@@ -99,7 +99,7 @@ export default {
                     .filter(item => {
                         return item.userId !== '1435297' && item.userId !== '4273750';
                     })
-                    .slice(0, 20);
+                    .slice(0, 30);
             });
         },
         getTop() {
@@ -109,7 +109,7 @@ export default {
             });
             return this.$http.get('/user/topTen').then(res => {
                 this.$toast.clear();
-                this.list = res.slice(0, 5);
+                this.list = res.slice(0, 30);
             });
         },
         changeRare(active) {