Sfoglia il codice sorgente

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

yuanyuan 3 anni fa
parent
commit
9df0194daf
1 ha cambiato i file con 308 aggiunte e 358 eliminazioni
  1. 308 358
      src/views/product/MetaDomain.vue

+ 308 - 358
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,65 +92,41 @@
             <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>
@@ -201,266 +144,270 @@
 <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;
-            if (this.search == '') {
-                this.refreash();
-            } else {
-                this.getList(true);
-            }
-        },
-        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 {
-            console.log('fahsdasdcffad11111111');
-            this.scrollTop = 0;
-            this.setKeeps(['metaDomain'], false);
-        }
-        next();
-    }
+	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();
+	}
 };
 </script>
 
@@ -775,12 +722,15 @@ export default {
                         font-weight: 400;
                         text-align: center;
                     }
-                    .select-right_classification_list_con_texts{
+
+                    .select-right_classification_list_con_texts {
                         font-weight: bold;
                     }
-                    .select-right_classification_list_con_textss{
+
+                    .select-right_classification_list_con_textss {
                         font-weight: bold;
                     }
+
                     .select-right_classification_list_con_imgTwo {
                         width: 16px;
                         height: 14px;