|
|
@@ -0,0 +1,538 @@
|
|
|
+<template>
|
|
|
+ <div class="page">
|
|
|
+ <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)" />
|
|
|
+ 元域名二级市场
|
|
|
+ </div>
|
|
|
+ <!-- <div class="page_top_two">
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in domainNameList"
|
|
|
+ :key="index"
|
|
|
+ @click="domainName(item.type)"
|
|
|
+ class="page_top_two_con"
|
|
|
+ >
|
|
|
+ <img class="page_top_two_con_img" :src="payType === item.type ? icons[0] : icons[1]" alt="" />
|
|
|
+ <div
|
|
|
+ class="page_top_two_con_text"
|
|
|
+ :class="payType === item.type ? 'page_top_two_con_textOne' : 'page_top_two_con_textTwo'"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ <div class="page_top_three">
|
|
|
+ <!-- <van-tabs class="darkTabs" v-model:active="type" line-width="24" line-height="2" @click="changeTab">
|
|
|
+ <van-tab
|
|
|
+ :title="item.label"
|
|
|
+ :name="item.value"
|
|
|
+ :key="index"
|
|
|
+ v-for="(item, index) in typeOptions"
|
|
|
+ >
|
|
|
+ </van-tab>
|
|
|
+ </van-tabs> -->
|
|
|
+ <van-search v-model="value" :left-icon="require('@assets/icon_sosuo@3x.png')" placeholder="搜索该类目下的元域名"
|
|
|
+ show-action @search="getSearch">
|
|
|
+ <template #action>
|
|
|
+ <div>.nft</div>
|
|
|
+ </template>
|
|
|
+ </van-search>
|
|
|
+ <div class="page_top_three_btn" @click="show = true">
|
|
|
+ <div class="page_top_three_btn_con">筛选</div>
|
|
|
+ <img :src="require('../../assets/shaixuan@3x.png')" alt="" class="page_top_three_btn_img" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-sticky>
|
|
|
+ <van-pull-refresh 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-list>
|
|
|
+ </van-pull-refresh>
|
|
|
+ <van-popup v-model:show="show" position="right">
|
|
|
+ <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" />
|
|
|
+ <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">{{ 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" />
|
|
|
+ <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"
|
|
|
+ @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">{{ 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>
|
|
|
+ <div class="select-right_bottom">
|
|
|
+ <van-button type="primary" plain round @click="refreash">重置</van-button>
|
|
|
+ <van-button type="primary" round @click="submit">确认筛选</van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-popup>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import ProductInfo from '../../components/product/productInfo.vue';
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ domainNameType: 'LIKE',
|
|
|
+ rarityType: 'ONE',
|
|
|
+ show: false,
|
|
|
+ domainNameList: [
|
|
|
+ {
|
|
|
+ name: '最多点赞',
|
|
|
+ type: 'LIKE'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '最新发布',
|
|
|
+ type: 'RELEASE'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '寄售中',
|
|
|
+ type: 'SELL'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '仅展示',
|
|
|
+ type: 'SEE'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ rarityList: [
|
|
|
+ {
|
|
|
+ name: '1个字符',
|
|
|
+ type: 'ONE'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '2个字符',
|
|
|
+ type: 'TWO'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '3个字符',
|
|
|
+ type: 'THREE'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '4个字符',
|
|
|
+ type: 'FOUR'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '5个字符',
|
|
|
+ type: 'FIVE'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '6个字符及以上',
|
|
|
+ type: 'SIX'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ loading: false,
|
|
|
+ finished: false,
|
|
|
+ page: 0,
|
|
|
+ empty: false,
|
|
|
+ list: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ ProductInfo
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ domainName(value) {
|
|
|
+ this.payType = value;
|
|
|
+ },
|
|
|
+ getSearch() { },
|
|
|
+ refreash() {
|
|
|
+ (this.domainNameType = ''), (this.rarityType = '');
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ if (this.domainNameType == '' || this.rarityType == '') {
|
|
|
+ this.$toast('请选择筛选分类');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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 = 'createdAt,desc';
|
|
|
+ let url = 'collection/all';
|
|
|
+ return this.$http
|
|
|
+ .post(
|
|
|
+ url,
|
|
|
+ {
|
|
|
+ page: this.page,
|
|
|
+ size: 20,
|
|
|
+ query: query,
|
|
|
+ sort: sort
|
|
|
+ },
|
|
|
+ { body: 'json' }
|
|
|
+ )
|
|
|
+ .then(res => {
|
|
|
+ if (res.first) {
|
|
|
+ this.list = [];
|
|
|
+ this.page = 0;
|
|
|
+ }
|
|
|
+ this.list = [...this.list, ...res.content];
|
|
|
+ this.empty = res.empty;
|
|
|
+ this.loading = false;
|
|
|
+ this.finished = res.last;
|
|
|
+ if (!this.finished) {
|
|
|
+ this.page = this.page + 1;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onRefresh() {
|
|
|
+ this.getList(true).then(() => {
|
|
|
+ this.isLoading = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.page {
|
|
|
+ background: #000000;
|
|
|
+
|
|
|
+ .padding-safe-top {
|
|
|
+ background: #161414 !important;
|
|
|
+
|
|
|
+ .page_top_one {
|
|
|
+ height: 50px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 50px;
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 5px;
|
|
|
+
|
|
|
+ .page_top_one_img {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ position: absolute;
|
|
|
+ top: 13px;
|
|
|
+ left: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .page_top_two {
|
|
|
+ display: flex;
|
|
|
+ overflow-x: auto;
|
|
|
+ padding-left: 16px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+
|
|
|
+ .page_top_two_con {
|
|
|
+ width: calc(25vw + 4.25px);
|
|
|
+ height: 36px;
|
|
|
+ margin-right: 16px;
|
|
|
+ position: relative;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .page_top_two_con_img {
|
|
|
+ width: 100%;
|
|
|
+ height: 36px;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .page_top_two_con_text {
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 36px;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .page_top_two_con_textOne {
|
|
|
+ color: #00fe1e;
|
|
|
+ }
|
|
|
+
|
|
|
+ .page_top_two_con_textTwo {
|
|
|
+ color: rgba(0, 254, 30, 0.5);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .page_top_three {
|
|
|
+ padding: 0px 20px 12px 16px;
|
|
|
+ height: 32px;
|
|
|
+ padding-bottom: 12px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .page_top_three_btn {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .page_top_three_btn_con {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #00fe1e;
|
|
|
+ line-height: 24px;
|
|
|
+ text-shadow: 0px 0px 4px #00fe1e;
|
|
|
+ margin-right: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .page_top_three_btn_img {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .van-tabs {
|
|
|
+ background: #161414;
|
|
|
+ padding-top: 2px;
|
|
|
+
|
|
|
+ .van-tabs__nav {
|
|
|
+ background: #161414;
|
|
|
+ }
|
|
|
+
|
|
|
+ .van-tab {
|
|
|
+ margin-right: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .van-tabs__wrap {
|
|
|
+ height: 20px !important;
|
|
|
+ overflow: visible;
|
|
|
+ }
|
|
|
+
|
|
|
+ .van-tabs__nav--line {
|
|
|
+ padding-bottom: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .van-tabs__line {
|
|
|
+ bottom: -6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .van-search {
|
|
|
+ width: calc(68vw + 2px);
|
|
|
+ height: 32px;
|
|
|
+ background: #232121;
|
|
|
+ border-radius: 8px;
|
|
|
+ backdrop-filter: blur(2px);
|
|
|
+ padding: 0;
|
|
|
+
|
|
|
+ .van-search__content {
|
|
|
+ border-radius: 8px;
|
|
|
+ height: 32px;
|
|
|
+ padding: 0 10px;
|
|
|
+ background: #232121;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .van-field__left-icon {
|
|
|
+ margin-right: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .van-search__field {
|
|
|
+ padding-right: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .van-field__control {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .van-search__action {
|
|
|
+ // height: 32px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #656464;
|
|
|
+ background: #232121;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .van-field__control::placeholder {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #656464;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .search {
|
|
|
+ padding-bottom: 50px;
|
|
|
+ margin-top: 9px;
|
|
|
+ z-index: 1;
|
|
|
+ background: #000000;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .box-list {
|
|
|
+ padding: 0 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .select-right {
|
|
|
+ width: calc(84vw + 1px);
|
|
|
+ height: var(--app-height);
|
|
|
+ background: #222426;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: auto;
|
|
|
+ .bottom(100px);
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .select-right_classification {
|
|
|
+ padding-top: 50px;
|
|
|
+
|
|
|
+ .select-right_classification_title {
|
|
|
+ padding-left: 10px;
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 26px;
|
|
|
+
|
|
|
+ .select-right_classification_title_img {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ margin-right: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .select-right_classification_title_text {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .select-right_classification_list {
|
|
|
+ padding-left: 28px;
|
|
|
+ padding-right: 16px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .select-right_classification_list_con {
|
|
|
+ width: calc(32vw);
|
|
|
+ height: 36px;
|
|
|
+ background: #2d2b2b;
|
|
|
+ border-radius: 4px;
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 32px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ color: #939599;
|
|
|
+
|
|
|
+ .select-right_classification_list_con_img {
|
|
|
+ width: 10px;
|
|
|
+ height: 32px;
|
|
|
+ padding-top: 1px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .select-right_classification_list_con_text {
|
|
|
+ width: calc(32vw - 16px);
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .select-right_classification_list_con_imgTwo {
|
|
|
+ width: 16px;
|
|
|
+ height: 14px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .select-right_classification_list_cons {
|
|
|
+ height: 38px;
|
|
|
+ background: rgba(254, 24, 255, 0.2);
|
|
|
+ border: 1px solid #fe18ff;
|
|
|
+ box-sizing: border-box;
|
|
|
+ color: #faf0ff;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .select-right_classification_list_conss {
|
|
|
+ height: 38px;
|
|
|
+ background: rgba(0, 254, 30, 0.2);
|
|
|
+ border: 1px solid #00fe1e;
|
|
|
+ box-sizing: border-box;
|
|
|
+ color: #ffffff;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .select-right_classifications {
|
|
|
+ padding-top: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .select-right_bottom {
|
|
|
+ position: fixed;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
