yuanyuan 3 tahun lalu
induk
melakukan
4dd530e5c0
1 mengubah file dengan 202 tambahan dan 158 penghapusan
  1. 202 158
      src/views/DomainName.vue

+ 202 - 158
src/views/DomainName.vue

@@ -1,32 +1,17 @@
 <template>
     <div :class="action != 1 ? 'meta_domain_nameOne' : 'meta_domain_nameTwo'" class="meta_domain_name">
         <van-sticky ref="top" offset-top="0">
-            <div
-                :class="action != 1 ? 'meta_domain_name_tops' : ''"
-                class="meta_domain_name_top"
-                :style="{ height: heightNumber }"
-            >
+            <div :class="action != 1 ? 'meta_domain_name_tops' : ''" class="meta_domain_name_top"
+                :style="{ height: heightNumber }">
                 <div class="meta_domain_name_top_one" v-if="action == 1">
-                    <img
-                        :src="require('@assets/icon_fanhui@3x (1).png')"
-                        alt=""
-                        class="meta_domain_name_top_img_left"
-                        @click="$router.go(-1)"
-                    />
-                    <img
-                        :src="require('@assets/icon_shangchang@3x.png')"
-                        alt=""
-                        class="meta_domain_name_top_img_right"
-                        @click="this.$toast('升级改版中')"
-                    />
+                    <img :src="require('@assets/icon_fanhui@3x (1).png')" alt="" class="meta_domain_name_top_img_left"
+                        @click="$router.go(-1)" />
+                    <img :src="require('@assets/icon_shangchang@3x.png')" alt="" class="meta_domain_name_top_img_right"
+                        @click="this.$toast('升级改版中')" />
                 </div>
                 <div class="meta_domain_name_top_ones" v-if="action != 1">
-                    <img
-                        :src="require('@assets/icon_fanhui@3x (1).png')"
-                        alt=""
-                        class="meta_domain_name_top_img_left"
-                        @click="fallback"
-                    />
+                    <img :src="require('@assets/icon_fanhui@3x (1).png')" alt="" class="meta_domain_name_top_img_left"
+                        @click="fallback" />
                 </div>
                 <div class="meta_domain_name_top_two" v-if="action == 1">
                     <img :src="require('@assets/png-.NFT@3x.png')" alt="" class="meta_domain_name_top_two_img" />
@@ -45,32 +30,20 @@
                             <div class="meta_domain_name_top_three_con_left_two">.nft</div>
                         </div>
                         <div class="meta_domain_name_top_three_con_right">
-                            <img
-                                :src="require('@assets/icon/search@3x (2).png')"
-                                alt=""
-                                class="meta_domain_name_top_three_con_right_img"
-                            />
+                            <img :src="require('@assets/icon/search@3x (2).png')" alt=""
+                                class="meta_domain_name_top_three_con_right_img" />
                         </div>
                     </div>
                     <div class="meta_domain_name_top_three_con" v-if="action == 2">
                         <div class="meta_domain_name_top_three_con_left">
-                            <van-search
-                                v-model="value"
-                                :maxlength="16"
-                                placeholder="请输入元域名"
-                                left-icon=""
-                                :clearable="false"
-                                @update:model-value="getSearch"
-                            />
+                            <van-search v-model="value" :maxlength="16" placeholder="请输入元域名" left-icon="" :clearable="false"
+                                @update:model-value="onInput" />
                             <!-- <div class="meta_domain_name_top_three_con_left_one">请输入元域名</div> -->
                             <div class="meta_domain_name_top_three_con_left_two">.nft</div>
                         </div>
                         <div class="meta_domain_name_top_three_con_right">
-                            <img
-                                :src="require('@assets/icon/search@3x (2).png')"
-                                alt=""
-                                class="meta_domain_name_top_three_con_right_img"
-                            />
+                            <img :src="require('@assets/icon/search@3x (2).png')" alt=""
+                                class="meta_domain_name_top_three_con_right_img" />
                         </div>
                     </div>
                 </div>
@@ -79,21 +52,11 @@
                     <div class="learn_more_tip">WHAT IS RID?</div>
                 </div>
                 <div class="meta_domain_name_top_bg" :style="{ height: heightBgNumber }"></div>
-                <van-image
-                    :src="require('@assets/png-bg@3x (3).png')"
-                    width="100%"
-                    height="500px"
-                    fit="fill"
-                    class="meta_domain_name_top_bgimg"
-                    :style="{ transform: 'translateY(' + moreHeight + ')' }"
-                />
+                <van-image :src="require('@assets/png-bg@3x (3).png')" width="100%" height="500px" fit="fill"
+                    class="meta_domain_name_top_bgimg" :style="{ transform: 'translateY(' + moreHeight + ')' }" />
                 <div class="technical_support" v-if="action != 3">
                     <div class="technical_support_con">
-                        <img
-                            :src="require('@assets/logo-huachulian@3x.png')"
-                            alt=""
-                            class="technical_support_img_left"
-                        />
+                        <img :src="require('@assets/logo-huachulian@3x.png')" alt="" class="technical_support_img_left" />
                         <!-- <img
                             :src="require('@assets/logo-mayilianjie@3x.png')"
                             alt=""
@@ -258,11 +221,7 @@
         <div class="meta_domain_name_list" v-if="action == 2">
             <div class="meta_domain_name_list_con" v-for="(item, index) in list" :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_two">{{ item.sold ? '已注册' : '未注册' }}</div>
@@ -272,9 +231,9 @@
                     <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>
+                                                                                                                                                                                                                                            item.sold ? 'meta_domain_name_list_con_right_three' : 'meta_domain_name_list_con_right_two'
+                                                                                                                                                                                                                                        ">
+                    </div>
                 </div>
             </div>
         </div>
@@ -334,102 +293,112 @@
 <script>
 import { mapState } from 'vuex';
 export default {
-    data() {
-        return {
-            action: 1,
-            heightNumber: '500px',
-            paddingTop: 0,
-            heightBgNumber: '260px',
-            moreHeight: 0,
-            domain: true,
-            value: '',
-            list: [],
-            unregistered: require('@assets/png-da-lv@3x.png'),
-            registered: require('@assets/png-da-zi@3x.png')
-        };
-    },
-    computed: {
-        ...mapState(['userInfo'])
-    },
-    mounted() {
-        // this.getSearch()
-    },
-    watch: {
-        value() {
-            this.$nextTick(() => {
-                if (this.value == '') {
-                    this.list = [];
-                }
-            });
-        }
-    },
-    methods: {
-        change() {
-            this.heightNumber = 'calc(var(--safe-top) + 180px)';
-            this.action = 2;
-            this.paddingTop = 'calc(var(--safe-top) + 70px)';
-            this.heightBgNumber = 'calc(var(--safe-top) + 100px)';
-            this.moreHeight = 'calc(var(--safe-top) - 320px)';
-        },
-        learnMore() {
-            this.action = 3;
-            this.heightNumber = 'calc(var(--safe-top) + 180px)';
-            this.heightBgNumber = 'calc(var(--safe-top) + 100px)';
-            this.moreHeight = 'calc(var(--safe-top) - 320px)';
-        },
-        getSearch(value) {
-            this.value = value.toLowerCase();
-            if (value == '') {
-                this.$nextTick(() => {
-                    this.list = [];
-                });
-            } else {
-                let matching = /^[A-Za-z0-9]+$/;
-                if (matching.test(value)) {
-                    this.$http
-                        .post('/domainOrder/search', {
-                            domain: value
-                        })
-                        .then(res => {
-                            if (this.value === value.toLowerCase()) {
-                                this.list = [];
-                                this.list = this.list.concat(res);
-                            }
-                        })
-                        .catch(e => {});
-                } else {
-                    this.$toast('只能由数字和字母组成');
-                    this.list = [];
-                }
-            }
-        },
-        buy(index) {
-            if (!this.list[index].sold) {
-                this.$router.push({
-                    path: '/domainSubmit',
-                    query: {
-                        domain: this.list[index].domain
-                    }
-                });
-            } else {
-                this.$toast('持有人超链暂未开启');
-            }
-        },
-        fallback() {
-            if (this.action == '3') {
-                this.action = 1;
-                this.heightNumber = '500px';
-                this.heightBgNumber = '260px';
-                this.moreHeight = 0;
-            } else if (this.action == '2') {
-                this.action = 1;
-                this.paddingTop = 0;
-                this.heightNumber = '500px';
-                this.heightBgNumber = '260px';
-                this.moreHeight = 0;
-            }
-        }
-    }
+	data() {
+		return {
+			action: 1,
+			heightNumber: '500px',
+			paddingTop: 0,
+			heightBgNumber: '260px',
+			moreHeight: 0,
+			domain: true,
+			value: '',
+			list: [],
+			unregistered: require('@assets/png-da-lv@3x.png'),
+			registered: require('@assets/png-da-zi@3x.png'),
+			timeId: 0
+		};
+	},
+	computed: {
+		...mapState(['userInfo'])
+	},
+	mounted() {
+		// this.getSearch()
+	},
+	watch: {
+		value() {
+			this.$nextTick(() => {
+				if (this.value == '') {
+					this.list = [];
+				}
+			});
+		}
+	},
+	methods: {
+		onInput() {
+			if (this.timeId) {
+				clearTimeout(this.timeId);
+				this.timeId = 0;
+			}
+			this.timeId = setTimeout(() => {
+				this.getSearch(this.value);
+			}, 500);
+		},
+		change() {
+			this.heightNumber = 'calc(var(--safe-top) + 180px)';
+			this.action = 2;
+			this.paddingTop = 'calc(var(--safe-top) + 70px)';
+			this.heightBgNumber = 'calc(var(--safe-top) + 100px)';
+			this.moreHeight = 'calc(var(--safe-top) - 320px)';
+		},
+		learnMore() {
+			this.action = 3;
+			this.heightNumber = 'calc(var(--safe-top) + 180px)';
+			this.heightBgNumber = 'calc(var(--safe-top) + 100px)';
+			this.moreHeight = 'calc(var(--safe-top) - 320px)';
+		},
+		getSearch(value) {
+			this.value = value.toLowerCase();
+			if (value == '') {
+				this.$nextTick(() => {
+					this.list = [];
+				});
+			} else {
+				let matching = /^[A-Za-z0-9]+$/;
+				if (matching.test(value)) {
+					this.$http
+						.post('/domainOrder/search', {
+							domain: value
+						})
+						.then(res => {
+							if (this.value === value.toLowerCase()) {
+								this.list = [];
+								this.list = this.list.concat(res);
+							}
+						})
+						.catch(e => {});
+				} else {
+					this.$toast('只能由数字和字母组成');
+					this.list = [];
+				}
+			}
+		},
+		buy(index) {
+			if (!this.list[index].sold) {
+				this.$router.push({
+					path: '/domainSubmit',
+					query: {
+						domain: this.list[index].domain
+					}
+				});
+			} else {
+				this.$toast('持有人超链暂未开启');
+			}
+		},
+		fallback() {
+			if (this.action == '3') {
+				this.action = 1;
+				this.heightNumber = '500px';
+				this.heightBgNumber = '260px';
+				this.moreHeight = 0;
+			} else if (this.action == '2') {
+				this.action = 1;
+				this.paddingTop = 0;
+				this.heightNumber = '500px';
+				this.heightBgNumber = '260px';
+				this.moreHeight = 0;
+			}
+		}
+	}
 };
 </script>
 
@@ -441,6 +410,7 @@ export default {
     bottom: 0;
     z-index: 1;
 }
+
 .domain_name {
     width: 100%;
     height: 100vh;
@@ -450,6 +420,7 @@ export default {
     padding: 0px 30px;
     padding-top: calc(35vw + 122px);
     box-sizing: border-box;
+
     .domain_name_con {
         width: 100%;
         height: 38px;
@@ -460,6 +431,7 @@ export default {
         text-align: center;
         position: relative;
         border-radius: 20px;
+
         .domain_name_con_img {
             position: absolute;
             width: 18px;
@@ -467,6 +439,7 @@ export default {
             top: 9px;
             left: 12px;
         }
+
         .domain_name_con_text {
             font-size: 12px;
             font-family: ZhenyanGB-Regular, ZhenyanGB;
@@ -480,6 +453,7 @@ export default {
         }
     }
 }
+
 .domain_name_list_two {
     width: 100%;
     height: 100vh;
@@ -488,10 +462,12 @@ export default {
     background-size: 100% 100%;
     background-repeat: no-repeat;
 }
+
 .domain_name_list {
     width: 100%;
     height: 100vh;
     backdrop-filter: blur(4px);
+
     .domain_name_list_top {
         width: 100%;
         height: 50px;
@@ -499,15 +475,18 @@ export default {
         box-sizing: border-box;
         backdrop-filter: blur(8px);
     }
+
     /deep/ .van-search {
         height: 32px;
         padding: 0 !important;
         background: rgba(255, 255, 255, 0) !important;
         border-radius: 2px;
         box-sizing: border-box;
+
         .van-search__content {
             background: rgba(0, 0, 0, 0.15);
         }
+
         .van-search__action {
             padding-right: 0px;
             font-size: 14px;
@@ -515,16 +494,20 @@ export default {
             font-weight: 400;
             color: #ffffff;
         }
+
         .van-field__control {
             color: #ffffff !important;
         }
     }
+
     .domain_name_list_con {
         margin-top: 2px;
+
         // filter: blur(8px);
         .domain_name_list_conss {
             backdrop-filter: blur(8px);
         }
+
         .domain_name_list_cons {
             width: 100%;
             height: 52px;
@@ -538,6 +521,7 @@ export default {
             color: #ffffff;
             line-height: 24px;
             box-sizing: border-box;
+
             .domain_name_list_cons_buy {
                 width: 68px;
                 height: 24px;
@@ -549,6 +533,7 @@ export default {
                 line-height: 26px;
                 text-align: center;
             }
+
             .domain_name_list_cons_sold {
                 width: 68px;
                 height: 24px;
@@ -561,25 +546,31 @@ export default {
                 text-align: center;
             }
         }
+
         .domain_name_list_first {
             background: rgba(0, 0, 0, 0.15);
         }
     }
 }
+
 .meta_domain_nameTwo {
     height: var(--app-height);
 }
+
 .meta_domain_nameOne {
     min-height: var(--app-height) !important;
 }
+
 .meta_domain_name {
     // padding-top: var(--safe-top);
     width: 100%;
     background: #030001;
     position: relative;
+
     .meta_domain_name_tops {
         background: #030001;
     }
+
     .meta_domain_name_top {
         width: 100%;
         // background-image: url('../assets/png-bg@3x (2).png');
@@ -589,12 +580,14 @@ export default {
         position: relative;
         transition: 0.5s;
         z-index: 2;
+
         .meta_domain_name_top_bgimg {
             position: absolute;
             top: 0;
             left: 0;
             transition: 0.5s;
         }
+
         .meta_domain_name_top_bg {
             position: absolute;
             left: 0;
@@ -603,6 +596,7 @@ export default {
             width: 100%;
             background: linear-gradient(180deg, rgba(3, 0, 1, 0.8) 0%, rgba(3, 0, 1, 0.3) 51%, rgba(3, 0, 1, 0) 100%);
         }
+
         .meta_domain_name_top_one {
             width: 100%;
             padding: 0px 21px 0px 20px;
@@ -613,25 +607,30 @@ export default {
             margin-bottom: 62px;
             position: relative;
             z-index: 3;
+
             .meta_domain_name_top_img_left {
                 width: 24px;
                 height: 24px;
             }
+
             .meta_domain_name_top_img_right {
                 width: 24px;
                 height: 24px;
             }
         }
+
         .meta_domain_name_top_ones {
             position: absolute;
             left: 20px;
             top: calc(var(--safe-top) + 24px);
             z-index: 4;
+
             .meta_domain_name_top_img_left {
                 width: 24px;
                 height: 24px;
             }
         }
+
         .meta_domain_name_top_two {
             position: relative;
             width: 100%;
@@ -639,17 +638,20 @@ export default {
             justify-content: center;
             margin-bottom: 54px;
             z-index: 3;
+
             .meta_domain_name_top_two_img {
                 width: 220px;
                 height: 100px;
             }
         }
+
         .meta_domain_name_top_three {
             width: 100%;
             padding: 0px 38px 0px 37px;
             box-sizing: border-box;
             position: relative;
             z-index: 3;
+
             .meta_domain_name_top_three_con {
                 width: 100%;
                 height: 38px;
@@ -660,6 +662,7 @@ export default {
                 // backdrop-filter: blur(2px);
                 display: flex;
                 justify-content: space-between;
+
                 .meta_domain_name_top_three_con_left {
                     width: calc(100vw - 147px);
                     display: flex;
@@ -667,37 +670,45 @@ export default {
                     align-items: center;
                     padding: 0px 10px;
                     position: relative;
+
                     /deep/ .van-search {
                         padding: 0px !important;
                         width: 100%;
                         height: 100%;
                         background: none !important;
+
                         .van-search__content {
                             padding-left: 0px !important;
                             background: none !important;
                         }
+
                         .van-cell__value {
                             font-size: 15px;
                             font-weight: bold;
                             color: #ffffff;
                             line-height: 24px;
                         }
+
                         .van-search__action {
                             color: #ffffff;
                         }
+
                         .van-field__control {
                             color: #ffffff !important;
                         }
+
                         input::placeholder {
                             color: #ffffff;
                         }
                     }
+
                     .meta_domain_name_top_three_con_left_one {
                         font-size: 15px;
                         font-weight: bold;
                         color: #ffffff;
                         line-height: 24px;
                     }
+
                     .meta_domain_name_top_three_con_left_two {
                         position: absolute;
                         right: 10px;
@@ -707,6 +718,7 @@ export default {
                         line-height: 24px;
                     }
                 }
+
                 .meta_domain_name_top_three_con_right {
                     margin-top: -2px;
                     margin-right: -2px;
@@ -714,6 +726,7 @@ export default {
                     height: 38px;
                     background: #ffffff;
                     border-radius: 0px 8px 8px 0px;
+
                     .meta_domain_name_top_three_con_right_img {
                         width: 30px;
                         height: 30px;
@@ -723,12 +736,14 @@ export default {
                 }
             }
         }
+
         .learn_more {
             padding-top: calc(var(--safe-top) + 52px);
             text-align: center;
             // padding-left: 30px;
             position: relative;
             z-index: 3;
+
             .learn_more_title {
                 font-size: 38px;
                 font-weight: bold;
@@ -736,6 +751,7 @@ export default {
                 line-height: 38px;
                 margin-bottom: 8px;
             }
+
             .learn_more_tip {
                 font-size: 12px;
                 font-weight: bold;
@@ -744,38 +760,46 @@ export default {
                 letter-spacing: 10px;
             }
         }
+
         .technical_support {
             width: 100%;
             position: absolute;
             bottom: 12px;
             display: flex;
             justify-content: center;
+
             .technical_support_con {
                 display: flex;
             }
+
             .technical_support_img_left {
                 width: 70px;
                 height: 32px;
                 // margin-right: 10px;
             }
+
             .technical_support_img_right {
                 width: 66px;
                 height: 32px;
             }
         }
     }
+
     .learn_more_list {
         padding: 40px 30px 70px 46px;
         box-sizing: border-box;
         position: relative;
         z-index: 2;
+
         // background: #030001;
         .learn_more_list_con {
             margin-bottom: 30px;
         }
+
         .learn_more_list_one {
             position: relative;
             margin-bottom: 12px;
+
             .learn_more_list_one_img {
                 width: 10px;
                 height: 18px;
@@ -783,6 +807,7 @@ export default {
                 top: 3px;
                 left: -12px;
             }
+
             .learn_more_list_one_title {
                 font-size: 14px;
                 font-weight: bold;
@@ -790,8 +815,10 @@ export default {
                 line-height: 24px;
             }
         }
+
         .learn_more_list_two {
             position: relative;
+
             .learn_more_list_two_img {
                 width: 10px;
                 height: 18px;
@@ -799,6 +826,7 @@ export default {
                 top: 0;
                 left: -12px;
             }
+
             .learn_more_list_two_title {
                 font-size: 10px;
                 font-weight: 600;
@@ -806,6 +834,7 @@ export default {
                 line-height: 16px;
             }
         }
+
         .learn_more_list_three {
             margin-top: 20px;
             font-size: 10px;
@@ -814,6 +843,7 @@ export default {
             line-height: 16px;
         }
     }
+
     .learn_more_btn {
         width: 100%;
         position: absolute;
@@ -822,15 +852,18 @@ export default {
         display: flex;
         justify-content: center;
         z-index: 2;
+
         .learn_more_btn_con {
             display: flex;
         }
+
         .learn_more_btn_img {
             width: 10px;
             height: 18px;
             margin-right: 6px;
             margin-top: 3px;
         }
+
         .learn_more_btn_title {
             font-size: 14px;
             font-weight: bold;
@@ -838,6 +871,7 @@ export default {
             line-height: 24px;
         }
     }
+
     .meta_domain_name_list {
         // background: #030001;
         padding: 40px 30px;
@@ -845,23 +879,28 @@ export default {
         box-sizing: border-box;
         position: relative;
         z-index: 2;
+
         .meta_domain_name_list_con {
             display: flex;
             justify-content: space-between;
             margin-bottom: 30px;
+
             .meta_domain_name_list_con_left {
                 display: flex;
+
                 .meta_domain_name_list_con_left_img {
                     width: 10px;
                     height: 34px;
                     margin-right: 8px;
                 }
+
                 .meta_domain_name_list_con_left_one {
                     font-size: 12px;
                     font-weight: bold;
                     color: #ffffff;
                     line-height: 17px;
                 }
+
                 .meta_domain_name_list_con_left_two {
                     font-size: 10px;
                     font-weight: bold;
@@ -869,9 +908,11 @@ export default {
                     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;
@@ -884,12 +925,14 @@ export default {
                     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;
@@ -898,6 +941,7 @@ export default {
                 }
             }
         }
+
         .meta_domain_name_bg {
             width: 100%;
             height: 280px;