|
|
@@ -5,7 +5,7 @@
|
|
|
<div class="page_top_one">
|
|
|
<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">
|
|
|
<div
|
|
|
@@ -33,21 +33,30 @@
|
|
|
>
|
|
|
</van-tab>
|
|
|
</van-tabs> -->
|
|
|
- <van-search v-model="value" :clearable="false" :left-icon="require('@assets/icon_sosuo@3x.png')" placeholder="搜索该类目下的元域名"
|
|
|
- show-action @search="getSearch">
|
|
|
+ <van-search v-model="value" :clearable="false" :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" @click="screening">
|
|
|
<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 class="domain_price" v-if="domainPrice">
|
|
|
+ <div class="domain_price_con" @click="priceOrder">
|
|
|
+ <div>价格排序</div>
|
|
|
+ <div class="tab">
|
|
|
+ <van-icon size="8" name="arrow-up" :class="source?'tab_text':''" />
|
|
|
+ <van-icon size="8" name="arrow-down" :class="source?'':'tab_text'" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</van-sticky>
|
|
|
- <van-pull-refresh success-text="加载成功" success-duration="500" class="search" v-model="isLoading" :head-height="80"
|
|
|
- @refresh="onRefresh">
|
|
|
+ <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">
|
|
|
@@ -56,7 +65,30 @@
|
|
|
<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="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" />
|
|
|
+ <div>
|
|
|
+ <div class="meta_domain_name_list_con_left_one">{{ item.domain }}</div>
|
|
|
+ <div class="meta_domain_name_list_con_left_con">
|
|
|
+ <div class="meta_domain_name_list_con_left_two">{{ item.sold ? '已注册' : '未注册' }}</div>
|
|
|
+ <div v-if="item.sold" class="meta_domain_name_list_con_left_three">
|
|
|
+ 剩余时长 {{ item.endTime }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="page_listone" :style="{ width: domainWidth }">
|
|
|
+ <!-- <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">
|
|
|
@@ -94,26 +126,34 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="select-right_bottom">
|
|
|
+ <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>
|
|
|
</div>
|
|
|
- </van-popup>
|
|
|
+ <!-- </van-popup> -->
|
|
|
+ </div>
|
|
|
+ <div class="page_listone_bg" v-if="show" @click="showStatus"></div>
|
|
|
</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: '最多点赞',
|
|
|
+ name: '热度排行',
|
|
|
type: 'LIKE'
|
|
|
},
|
|
|
{
|
|
|
@@ -160,33 +200,59 @@ export default {
|
|
|
page: 0,
|
|
|
empty: false,
|
|
|
list: [],
|
|
|
+ domainList: [],
|
|
|
dressing: false,
|
|
|
- search: '',
|
|
|
- value: ''
|
|
|
+ search: '',
|
|
|
+ value: '',
|
|
|
+ unregistered: require('@assets/png-da-lv@3x.png'),
|
|
|
+ registered: require('@assets/png-da-zi@3x.png')
|
|
|
};
|
|
|
},
|
|
|
components: {
|
|
|
ProductInfo
|
|
|
},
|
|
|
methods: {
|
|
|
+ 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) {
|
|
|
- console.log("dhdgdgddg",value)
|
|
|
- this.search = value
|
|
|
- console.log("ajhasdgasdgag",this.search)
|
|
|
- this.getList(true);
|
|
|
- },
|
|
|
+ this.search = value;
|
|
|
+ if (value == '') {
|
|
|
+ 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);
|
|
|
- this.show = false;
|
|
|
+ if (this.domainNameType == 'SELL') {
|
|
|
+ this.domainPrice = true;
|
|
|
+ } else {
|
|
|
+ this.domainPrice = false;
|
|
|
+ }
|
|
|
},
|
|
|
getList(isFirst = false) {
|
|
|
if (isFirst) {
|
|
|
@@ -212,6 +278,11 @@ export default {
|
|
|
...query,
|
|
|
salable: true
|
|
|
};
|
|
|
+ if (this.source) {
|
|
|
+ sort = 'price,desc';
|
|
|
+ } else {
|
|
|
+ sort = 'price,asc';
|
|
|
+ }
|
|
|
}
|
|
|
if (this.domainNameType == 'SEE') {
|
|
|
query = {
|
|
|
@@ -246,6 +317,12 @@ export default {
|
|
|
}
|
|
|
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) {
|
|
|
@@ -253,10 +330,64 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
+ 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') {
|
|
|
+ this.scrollTop = this.scrollWrapper.scrollTop;
|
|
|
+ this.setKeeps(['metaDomain']);
|
|
|
+ } else {
|
|
|
+ this.scrollTop = 0;
|
|
|
+ this.setKeeps(['metaDomain'], false);
|
|
|
+ }
|
|
|
+ next();
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
@@ -336,6 +467,34 @@ export default {
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
|
|
|
+ .domain_price {
|
|
|
+ width: 100%;
|
|
|
+ height: 44px;
|
|
|
+ padding: 10px 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .domain_price_con {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #43CE00;
|
|
|
+ line-height: 24px;
|
|
|
+
|
|
|
+ .tab {
|
|
|
+ color: #939599;
|
|
|
+ margin-left: 6px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab_text {
|
|
|
+ color: #43CE00;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.page_top_three_btn {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -382,7 +541,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
/deep/ .van-search {
|
|
|
- width: calc(68vw + 2px);
|
|
|
+ width: calc(68vw + 10px);
|
|
|
height: 32px;
|
|
|
background: #232121;
|
|
|
border-radius: 8px;
|
|
|
@@ -445,9 +604,10 @@ export default {
|
|
|
}
|
|
|
|
|
|
.select-right {
|
|
|
+ background: rgba(170, 170, 170, 0.1) !important;
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
width: calc(84vw + 1px);
|
|
|
height: var(--app-height);
|
|
|
- background: #222426;
|
|
|
box-sizing: border-box;
|
|
|
overflow: auto;
|
|
|
.bottom(100px);
|
|
|
@@ -486,7 +646,7 @@ export default {
|
|
|
.select-right_classification_list_con {
|
|
|
width: calc(32vw);
|
|
|
height: 36px;
|
|
|
- background: #2d2b2b;
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
border-radius: 4px;
|
|
|
position: relative;
|
|
|
margin-bottom: 32px;
|
|
|
@@ -494,6 +654,27 @@ export default {
|
|
|
align-items: center;
|
|
|
box-sizing: border-box;
|
|
|
color: #939599;
|
|
|
+ line-height: 36px;
|
|
|
+
|
|
|
+ .tab {
|
|
|
+ height: 15px;
|
|
|
+ position: relative;
|
|
|
+ top: 0;
|
|
|
+ right: 30px;
|
|
|
+ color: #939599;
|
|
|
+
|
|
|
+ .van-icon {
|
|
|
+ position: absolute;
|
|
|
+
|
|
|
+ &.van-icon-arrow-down {
|
|
|
+ top: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.van-icon-arrow-up {
|
|
|
+ bottom: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
.select-right_classification_list_con_img {
|
|
|
width: 10px;
|
|
|
@@ -548,7 +729,7 @@ export default {
|
|
|
right: 0;
|
|
|
width: 100%;
|
|
|
padding: 9px 16px;
|
|
|
- background: #161414;
|
|
|
+ // background: #161414;
|
|
|
.bottom(9px);
|
|
|
box-sizing: border-box;
|
|
|
.flex();
|
|
|
@@ -572,5 +753,128 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .meta_domain_name_list {
|
|
|
+ // background: #030001;
|
|
|
+ padding: 20px;
|
|
|
+ padding-bottom: 40px;
|
|
|
+ // padding-bottom: 0px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+
|
|
|
+ .meta_domain_name_list_con {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 26px;
|
|
|
+
|
|
|
+ .meta_domain_name_list_con_left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .meta_domain_name_list_con_left_img {
|
|
|
+ width: 10px;
|
|
|
+ height: 38px;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .meta_domain_name_list_con_left_one {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 24px;
|
|
|
+ margin-bottom: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .meta_domain_name_list_con_left_con {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .meta_domain_name_list_con_left_two {
|
|
|
+ width: 38px;
|
|
|
+ height: 17px;
|
|
|
+ background: #1e1e1e;
|
|
|
+ border-radius: 2px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 10px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #939599;
|
|
|
+ line-height: 17px;
|
|
|
+ margin-right: 7px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .meta_domain_name_list_con_left_three {
|
|
|
+ height: 17px;
|
|
|
+ background: #1e1e1e;
|
|
|
+ border-radius: 2px;
|
|
|
+ padding: 0px 4px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #939599;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 10px;
|
|
|
+ line-height: 17px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .meta_domain_name_list_con_right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .meta_domain_name_list_con_right_one {
|
|
|
+ width: 48px;
|
|
|
+ height: 24px;
|
|
|
+ background: #686666;
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 25px;
|
|
|
+ text-align: center;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .meta_domain_name_list_con_right_two {
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ background: #00fe1e;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .meta_domain_name_list_con_right_three {
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ background: #e32ff9;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .meta_domain_name_bg {
|
|
|
+ width: 100%;
|
|
|
+ height: 280px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.page_listone {
|
|
|
+ background: rgba(0, 0, 0, 0.6);
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ z-index: 9999;
|
|
|
+ transition: 0.5s;
|
|
|
+}
|
|
|
+
|
|
|
+.page_listone_bg {
|
|
|
+ width: 100%;
|
|
|
+ height: var(--app-height);
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 2001;
|
|
|
+ background: rgba(0, 0, 0, 0.2);
|
|
|
}
|
|
|
</style>
|
