Merge branch 'dev' of http://git.izouma.com/xiongzhu/raex_front into 绿洲水稻

src/App.vue

@@ -259,25 +259,37 @@ export default {
 <style lang="less" scoped>
 .scroll-content {
     box-sizing: border-box;
+
     // padding-top: 46px;
     &.index {
         background-color: #0f0f0f;
     }
 }
+
 .scroll-wrapper {
     background-color: @bg;
+
     &.digitalOrganization {
         background: #272b2e;
     }
+
     &.store {
         background-color: #0f0f0f;
     }
+
+    &.quotationRecord {
+        background: #0f0f0f;
+    }
+
     &.ranking {
         background: #010225;
     }
-    &.metaDomain {
+
+    &.metaDomain,
+    &.shoppingCart {
         background: #000000;
     }
+
     &.home {
         background-color: var(--bg);
     }
@@ -323,9 +335,11 @@ export default {
         background-color: #181818;
     }
 }
+
 .scroll-wrappers {
     background-color: #272b2e;
 }
+
 .appSwiper {
     position: fixed;
     width: 100vw;
@@ -341,6 +355,7 @@ export default {
     transition: opacity 0.8s ease-in-out;
     background-color: #000;
     --swiper-theme-color: #fff;
+
     .swiper-slide {
         img {
             width: 100%;
@@ -368,6 +383,7 @@ export default {
         right: 30px;
     }
 }
+
 .v-enter-active,
 .v-leave-active {
     transition: opacity 0.5s ease;

src/components/AppBar.vue

@@ -11,6 +11,7 @@
         id="navBar"
         :class="{ dark: tabColor }"
         ref="navBar"
+        :style="{ backgroundColor: tabColor }"
     >
         <template #left>
             <div class="back">
@@ -128,6 +129,7 @@ export default {
             }
         },
         getColor(color = '') {
+            console.log('2777171');
             if (this.$route.meta.tabColor) {
                 if (window.cordova && StatusBar && StatusBar.isVisible) {
                     StatusBar.styleLightContent();
@@ -188,6 +190,9 @@ export default {
     .van-nav-bar {
         line-height: initial !important;
     }
+    .van-nav-bar {
+        --van-nav-bar-background-color: #fff;
+    }
 }
 .back {
     padding-right: 12px;

src/components/PayMethodPick.vue

@@ -1,22 +1,47 @@
 <template>
     <div>
         <template v-for="(item, index) in payConfig" :key="index">
-            <div
-                class="pay-item"
-                @click="pick(item)"
-                v-if="item.show && (item.key === 'BALANCE' ? showBalance : true)"
-                :key="index"
-                :class="{ not: !item.enabled }"
-            >
-                <div class="img-icon">
-                    <img class="icon" :src="item.icon" alt="" />
+            <div v-if="!cart">
+                <div
+                    class="pay-item"
+                    @click="pick(item)"
+                    v-if="item.show && (item.key === 'BALANCE' ? showBalance : true)"
+                    :key="index"
+                    :class="{ not: !item.enabled }"
+                >
+                    <div class="img-icon">
+                        <img class="icon" :src="item.icon" alt="" />
+                    </div>
+                    <span>{{ item.name }}</span>
+                    <img
+                        class="choose-icon"
+                        :src="
+                            item.enabled ? (checked === item.key ? (isStar ? icons[3] : icons[1]) : icons[0]) : icons[2]
+                        "
+                        alt=""
+                    />
+                </div>
+            </div>
+            <div v-else>
+                <div
+                    class="pay-items"
+                    @click="pick(item)"
+                    v-if="item.show && (item.key === 'BALANCE' ? showBalance : true)"
+                    :key="index"
+                    :class="{ not: !item.enabled }"
+                >
+                    <div class="img-icon">
+                        <img class="icon" :src="item.icon" alt="" />
+                    </div>
+                    <span>{{ item.name }}</span>
+                    <img
+                        class="choose-icon"
+                        :src="
+                            item.enabled ? (checked === item.key ? (isStar ? icons[3] : icons[1]) : icons[0]) : icons[2]
+                        "
+                        alt=""
+                    />
                 </div>
-                <span>{{ item.name }}</span>
-                <img
-                    class="choose-icon"
-                    :src="item.enabled ? (checked === item.key ? (isStar ? icons[3] : icons[1]) : icons[0]) : icons[2]"
-                    alt=""
-                />
             </div>
         </template>
     </div>
@@ -37,6 +62,10 @@ export default {
         isStar: {
             type: Boolean,
             default: false
+        },
+        cart: {
+            type: Boolean,
+            default: false
         }
     },
     computed: {
@@ -126,17 +155,20 @@ export default {
     align-items: center;
     height: 60px;
     border-bottom: 1px solid @tabBorder;
+
     .icon {
         height: 24px;
         width: 24px;
         object-fit: contain;
         display: block;
     }
+
     .img-icon {
         // width: 45px;
         .flex();
         justify-content: center;
     }
+
     span {
         font-size: 14px;
         font-weight: bold;
@@ -145,6 +177,47 @@ export default {
         flex-grow: 1;
         padding: 0 10px;
     }
+
+    .choose-icon {
+        width: 24px;
+        height: 24px;
+    }
+
+    &.not {
+        span {
+            color: @text3;
+        }
+    }
+}
+
+.pay-items {
+    display: flex;
+    align-items: center;
+    height: 48px;
+    padding: 0px 16px;
+    background: #ffffff;
+    .icon {
+        height: 24px;
+        width: 24px;
+        object-fit: contain;
+        display: block;
+    }
+
+    .img-icon {
+        // width: 45px;
+        .flex();
+        justify-content: center;
+    }
+
+    span {
+        font-size: 14px;
+        font-weight: bold;
+        color: @text0;
+        line-height: 24px;
+        flex-grow: 1;
+        padding: 0 10px;
+    }
+
     .choose-icon {
         width: 24px;
         height: 24px;

src/components/asset/domainOwned.vue

@@ -0,0 +1,112 @@
+<template>
+    <div class="product" @click="goAsset">
+        <div class="product_left">
+            <van-image class="icon-img" width="40" height="40" :src="getImg(changeImgs(info.pic))" fit="contain" />
+            <img
+                :src="info.consignment ? require('@assets/png-da-lv@3x.png') : require('@assets/png-da-zi@3x.png')"
+                alt=""
+                class="name_img"
+            />
+            <div class="product_left_title">
+                <div class="product_left_name">{{ info.name }}</div>
+                <div class="product_left_time">剩余时长&nbsp;{{ info.endTime }}</div>
+            </div>
+        </div>
+        <div class="product_right">
+            <div class="product_right_con product_right_shenhe" v-if="info.status === 'PENDING'">审核中</div>
+            <div class="product_right_con product_right_jishou" v-else-if="info.consignment">寄售中</div>
+            <div class="product_right_con" v-else-if="info.status === 'NORMAL' && info.publicShow">仅展示</div>
+            <div class="product_right_con" v-else>未展示</div>
+        </div>
+    </div>
+</template>
+
+<script>
+import asset from '../../mixins/asset';
+import product from '../../mixins/product';
+
+export default {
+    mixins: [asset, product],
+    props: {
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        }
+    },
+    computed: {},
+    methods: {
+        goAsset() {
+            this.$router.push({
+                path: '/assetDetail',
+                query: {
+                    id: this.info.assetId || this.info.id
+                }
+            });
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.product {
+    width: 100%;
+    margin-bottom: 16px;
+    background: #1e1e1e;
+    border-radius: 8px;
+    display: flex;
+    justify-content: space-between;
+    height: 64px;
+    padding: 0px 12px;
+    box-sizing: border-box;
+
+    .product_left {
+        display: flex;
+        align-items: center;
+
+        .name_img {
+            width: 10px;
+            height: 38px;
+            margin-left: 8px;
+            margin-right: 8px;
+        }
+
+        .product_left_title {
+            width: 50vw;
+        }
+
+        .product_left_name {
+            width: 100%;
+            font-size: 14px;
+            font-weight: bold;
+            color: #ffffff;
+            line-height: 24px;
+            margin-bottom: 2px;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+
+        .product_left_time {
+            font-size: 10px;
+            font-weight: 400;
+            color: #939599;
+            line-height: 17px;
+        }
+    }
+    .product_right_con {
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 24px;
+        padding-top: 29px;
+        color: #939599;
+    }
+    .product_right_shenhe {
+        color: #ffc432;
+    }
+    .product_right_jishou {
+        color: #00fe1e;
+    }
+}
+</style>

src/components/asset/ownedBuy.vue

@@ -0,0 +1,208 @@
+<template>
+    <div class="product">
+        <div class="product_top">
+            <div class="product_top_left">
+                <div class="product_top_left_one">
+                    <van-image
+                        width="20"
+                        height="20"
+                        class="user-img"
+                        :src="info.minterAvatar || require('@assets/svgs/img_default_photo.svg')"
+                        fit="cover"
+                        radius="100"
+                    />
+                    <div class="product_top_left_one_name">持有者昵称</div>
+                </div>
+                <div class="product_top_left_two">
+                    <van-image
+                        class="icon-img"
+                        width="40"
+                        height="40"
+                        :src="getImg(changeImgs(info.pic))"
+                        fit="contain"
+                    />
+                    <img :src="require('@assets/png-da-zi@3x.png')" alt="" class="name_img" />
+                    <div class="product_left_title">
+                        <div class="product_left_name">{{ info.name }}</div>
+                        <div class="product_left_time">剩余时长&nbsp;{{ info.endTime }}</div>
+                    </div>
+                </div>
+                <div class="product_top_left_three">02-20 22:08</div>
+            </div>
+            <div class="product_top_right">
+                <div class="product_top_right_title">已出价</div>
+                <div class="product_top_right_price">¥1000</div>
+            </div>
+        </div>
+        <div class="product_bottom">
+            <div class="product_bottom_con" @click="btn">不想买了</div>
+            <!-- <div class="product_bottom_cons">23:59后可取消出价</div> -->
+        </div>
+    </div>
+</template>
+
+<script>
+import asset from '../../mixins/asset';
+import product from '../../mixins/product';
+import { Dialog } from 'vant';
+export default {
+    mixins: [asset, product],
+    props: {
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        }
+    },
+    computed: {},
+    methods: {
+        btn() {
+            Dialog.confirm({
+                title: '确认不想买该藏品了',
+                message: '一个工作日内将原路退回您的出价金额',
+                cancelButtonText: '再想想',
+                cancelButtonColor: '#3AB200',
+                confirmButtonColor: '#626366'
+            })
+                .then(() => {})
+                .catch(() => {
+                    // on cancel
+                });
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.product {
+    width: 100%;
+    padding: 10px 12px;
+    box-sizing: border-box;
+    background: #1c1c1c;
+    border-radius: 8px;
+    margin-bottom: 16px;
+
+    .product_top {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        .product_top_left_one {
+            display: flex;
+            align-items: center;
+            margin-bottom: 7px;
+
+            .product_top_left_one_name {
+                margin-left: 6px;
+                font-size: 12px;
+                font-weight: 400;
+                color: #939599;
+                line-height: 24px;
+            }
+        }
+
+        .product_top_left_two {
+            display: flex;
+            align-items: center;
+            margin-bottom: 11px;
+
+            .name_img {
+                width: 10px;
+                height: 38px;
+                margin-left: 8px;
+                margin-right: 8px;
+            }
+
+            .product_left_name {
+                width: calc(45vw);
+                font-size: 14px;
+                font-weight: bold;
+                color: #ffffff;
+                line-height: 24px;
+                margin-bottom: 2px;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+
+            .product_left_time {
+                max-width: 114px;
+                height: 17px;
+                background: #232323;
+                border-radius: 2px;
+                text-align: center;
+                font-size: 10px;
+                font-weight: 400;
+                color: #939599;
+                line-height: 17px;
+            }
+        }
+
+        .product_top_left_three {
+            font-size: 12px;
+            font-weight: 400;
+            color: #939599;
+            line-height: 24px;
+        }
+
+        .product_top_right {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+
+            .product_top_right_title {
+                font-size: 12px;
+                font-weight: 400;
+                color: #00fc1d;
+                line-height: 24px;
+            }
+
+            .product_top_right_price {
+                font-size: 16px;
+                font-weight: bold;
+                color: #ffffff;
+                line-height: 24px;
+            }
+        }
+    }
+
+    .product_bottom {
+        border-top: solid 1px #242424;
+        padding-top: 10px;
+        display: flex;
+        justify-content: end;
+
+        .product_bottom_con {
+            width: 100px;
+            height: 32px;
+            background: #2c2c2c;
+            border-radius: 16px;
+            font-size: 14px;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 32px;
+            text-align: center;
+        }
+
+        .product_bottom_cons {
+            width: 162px;
+            height: 32px;
+            background: #2c2c2c;
+            border-radius: 16px;
+            font-size: 14px;
+            font-weight: 400;
+            color: #939599;
+            line-height: 32px;
+            text-align: center;
+        }
+    }
+
+    /deep/ .van-dialog {
+        .van-dialog__message {
+            font-size: 12px !important;
+            color: #626366 !important;
+        }
+    }
+}
+</style>

src/components/asset/receiveQuotation.vue

@@ -0,0 +1,119 @@
+<template>
+    <div class="product">
+        <div class="product_top">
+            <van-image class="icon-img" width="40" height="40" :src="getImg(changeImgs(info.pic))" fit="contain" />
+            <img :src="require('@assets/png-da-zi@3x.png')" alt="" class="name_img" />
+            <div class="product_left_title">
+                <div class="product_left_name">{{ info.name }}</div>
+                <div class="product_left_time">剩余时长&nbsp;{{ info.endTime }}</div>
+            </div>
+        </div>
+        <div class="product_bottom">
+            <div class="product_bottom_left">共10条报价</div>
+            <div class="product_bottom_right" @click="viewQuote">
+                <div class="product_bottom_right_text">查看报价</div>
+                <img :src="require('@assets/icon-back@3x(3).png')" alt="" class="product_bottom_right_img" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import asset from '../../mixins/asset';
+import product from '../../mixins/product';
+
+export default {
+    mixins: [asset, product],
+    props: {
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        }
+    },
+    computed: {},
+    methods: {
+        viewQuote() {
+            this.$router.push({
+                path: '/quotationRecord',
+                query: {
+                    id: this.info.id
+                }
+            });
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.product {
+    padding: 12px 12px 8px;
+    box-sizing: border-box;
+    background: #1c1c1c;
+    border-radius: 8px;
+    margin-bottom: 16px;
+
+    .product_top {
+        display: flex;
+        align-items: center;
+        margin-bottom: 11px;
+
+        .name_img {
+            width: 10px;
+            height: 38px;
+            margin-left: 8px;
+            margin-right: 8px;
+        }
+
+        .product_left_name {
+            font-size: 14px;
+            font-weight: bold;
+            color: #ffffff;
+            line-height: 24px;
+            margin-bottom: 2px;
+        }
+
+        .product_left_time {
+            max-width: 114px;
+            height: 17px;
+            background: #232323;
+            border-radius: 2px;
+            text-align: center;
+            font-size: 10px;
+            font-weight: 400;
+            color: #939599;
+            line-height: 17px;
+        }
+    }
+
+    .product_bottom {
+        display: flex;
+        justify-content: space-between;
+
+        .product_bottom_left {
+            font-size: 12px;
+            font-weight: 400;
+            color: #939599;
+            line-height: 24px;
+        }
+
+        .product_bottom_right {
+            display: flex;
+            align-items: center;
+
+            .product_bottom_right_text {
+                font-size: 12px;
+                font-weight: 400;
+                color: #00fe1e;
+                line-height: 24px;
+            }
+
+            .product_bottom_right_img {
+                width: 16px;
+                height: 16px;
+            }
+        }
+    }
+}
+</style>

src/components/order/DomainInfo.vue

@@ -2,7 +2,15 @@
     <div class="orderInfo" @click="pay(info.orderStatus)">
         <div class="order-top">
             <span>{{ info.domainName }}</span>
-            <span class="status">{{ getLabelName(info.orderStatus, statusDomain) }}</span>
+            <span v-if="info.status == 'SUCCESS' && info.orderStatus == 'FINISH'" class="status">{{
+                getLabelName(info.orderStatus, statusDomain)
+            }}</span>
+            <span v-if="info.status == 'PENDING' && info.orderStatus == 'NOT_PAID'" class="status">{{
+                getLabelName(info.orderStatus, statusDomain)
+            }}</span>
+            <span v-if="info.status == 'PENDING' && info.orderStatus == 'FINISH'" class="status">{{
+                getLabelName(info.status, statusDomain)
+            }}</span>
         </div>
         <!-- <div class="order">
             <van-image :radius="6" width="80" height="80" :src="getImg(changeImgs(info.pic))" fit="cover" />

src/components/product/ProductTitle.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="product-title" :class="{ isSmall }">
-        <span><slot></slot></span>
+        <slot></slot>
         <img class="img1" src="@assets/png-biaokuag-01.png" alt="" />
         <img class="img2" src="@assets/png-biaokuag-02.png" alt="" />
     </div>

src/main.js

@@ -144,7 +144,7 @@ if (query.invitor) {
 if (query.from) {
     store.commit('setFrom', query.from);
 }
-store.commit('setFrom', 'scanCode');
+// store.commit('setFrom', 'scanCode');
 if (query.inviteCode) {
     store.commit('setInviteCode', query.inviteCode);
 }

src/mixins/order.js

@@ -25,8 +25,8 @@ export default {
                     value: 'NOT_PAID'
                 },
                 {
-                    label: '交易中',
-                    value: 'PROCESSING'
+                    label: '审核中',
+                    value: 'PENDING'
                 },
                 {
                     label: '已完成',

src/router/index.js

@@ -187,7 +187,8 @@ const routes = [
         meta: {
             pageType: Page.Login,
             title: '登录',
-            tabColor: '#181818'
+            tabColor: '#181818',
+            menuPage: false
         }
     },
     {
@@ -424,6 +425,16 @@ const routes = [
             // tabColor: '#161414'
         }
     },
+    {
+        path: '/quotationRecord',
+        name: 'quotationRecord',
+        component: () => import('../views/product/QuotationRecord.vue'),
+        meta: {
+            pageType: Page.Every,
+            menuPage: true
+            // tabColor: '#161414'
+        }
+    },
     {
         path: '/auction',
         name: 'auction',
@@ -754,6 +765,20 @@ const routes = [
         component: () => import('../views/user/Wallet.vue'),
         meta: {}
     },
+    {
+        path: '/shoppingCart',
+        name: 'shoppingCart',
+        component: () => import('../views/user/ShoppingCart.vue'),
+        meta: {
+            menuPage: true
+        }
+    },
+    {
+        path: '/shoppingCartSubmit',
+        name: 'shoppingCartSubmit',
+        component: () => import('../views/user/ShoppingCartSubmit.vue'),
+        meta: {}
+    },
     {
         path: '/minePoint',
         name: 'minePoint',
@@ -914,7 +939,7 @@ router.beforeEach((to, from, next) => {
         sessionStorage.setItem('invitor', to.query.invitor);
     }
     if (to.meta.pageType != Page.Every && to.path !== '/collectionDetail' && to.path !== '/castingDetail') {
-        if (!store.state.userInfo && to.meta.pageType !== Page.Login) {
+        if (!store.state.userInfo && to.meta.pageType != Page.Login) {
             store
                 .dispatch('getUserInfo')
                 .then(() => {

src/styles/theme.less

@@ -1,6 +1,7 @@
 :root {
     --bg: #f5f7fa;
     --bg2: #fff;
+    --bg3: #F5F7FA;
     --border: #f5f7fa;
     --btnplaintBg: #f5f7fa;
     --btnplaintBorder: #f5f7fa;
@@ -25,6 +26,7 @@
 .darkTheme {
     --bg: #000000;
     --bg2: #1c1c1e;
+    --bg3: #2D2D2F;
     --border: #ffffff10;
     --btnplaintBg: #ffffff10;
     --btnplaintBorder: rgba(255, 255, 255, 0);

src/views/Discover.vue

@@ -440,7 +440,8 @@ export default {
             } else if (this.sort === 'domain') {
                 url = '/collection/all';
                 query = {
-                    type: 'DOMAIN'
+                    type: 'DOMAIN',
+                    onShelf: true
                 };
                 if (this.domainClassify == 1) {
                     sort = 'createdAt,desc';

src/views/DomainName.vue

@@ -89,7 +89,14 @@
                         </div>
                     </div>
                 </div>
-                <van-notice-bar speed="30" v-if="action == 1">
+                <van-notice-bar speed="30" v-if="action == 1" class="van-notice-bar-one">
+                    <div v-for="(item, index) in domainLists" :key="index" class="domainName_list_cons">
+                        恭喜<span>“{{ item.nickName }}”</span>艺术家通过元域名市场购买获得<span
+                            >“{{ item.domainName }}”</span
+                        >
+                    </div>
+                </van-notice-bar>
+                <van-notice-bar speed="30" v-if="action == 1" class="van-notice-bar-two">
                     <div v-for="(item, index) in domainList" :key="index" class="domainName_list_con">
                         <van-image :src="item.userAvatar" class="domainName_list_con_img" fit="cover" />
                         <div>{{ item.domainName }}&nbsp;&nbsp;已被购买</div>
@@ -377,6 +384,7 @@ export default {
             domain: true,
             value: '',
             domainList: [],
+            domainLists: [],
             list: [],
             unregistered: require('@assets/png-da-lv@3x.png'),
             registered: require('@assets/png-da-zi@3x.png'),
@@ -411,6 +419,15 @@ export default {
                 this.domainList = res.content;
             })
             .catch(e => {});
+        this.$http
+            .post('/domainOrder/newestOrder')
+            .then(res => {
+                res.forEach(item => {
+                    item.domainName = item.domainName.split(' ')[1].trim();
+                });
+                this.domainLists = res;
+            })
+            .catch(e => {});
     },
     watch: {
         value() {
@@ -456,6 +473,7 @@ export default {
                     this.list = [];
                 });
             } else {
+                // let matching = /^[A-Za-z0-9_\u4e00-\u9fa5]+$/;
                 let matching = /^[A-Za-z0-9]+$/;
                 if (matching.test(value)) {
                     this.$http
@@ -750,6 +768,7 @@ export default {
                 line-height: 17px;
                 text-align: center;
             }
+
             .meta_domain_name_top_one_con_tips {
                 margin-bottom: 12px;
             }
@@ -775,6 +794,7 @@ export default {
             margin-bottom: 54px;
             z-index: 3;
             margin-top: -11px;
+
             .meta_domain_name_top_two_img {
                 width: 220px;
                 height: 100px;
@@ -874,7 +894,7 @@ export default {
         }
 
         /deep/ .van-notice-bar {
-            margin-top: 60px;
+            // margin-top: 60px;
             position: relative;
             z-index: 3;
             background: none !important;
@@ -888,6 +908,30 @@ export default {
                 height: 26px !important;
             }
 
+            .domainName_list_cons {
+                padding: 0px 12px;
+                font-size: 11px;
+                font-weight: 400;
+                background: linear-gradient(
+                    90deg,
+                    rgba(226, 116, 249, 0.9) 0%,
+                    rgba(226, 116, 249, 0.4) 48%,
+                    rgba(255, 255, 255, 0.1) 100%
+                );
+                border-radius: 19px;
+                border: 1px solid #f4aeff;
+                backdrop-filter: blur(4px);
+                box-sizing: border-box;
+                display: flex;
+                align-items: center;
+                margin-right: 16px;
+                text-align: center;
+
+                span {
+                    color: #00fe1e;
+                }
+            }
+
             .domainName_list_con {
                 padding: 0px 12px;
                 font-size: 11px;
@@ -915,6 +959,14 @@ export default {
             }
         }
 
+        .van-notice-bar-one {
+            margin-top: 43px;
+        }
+
+        .van-notice-bar-two {
+            margin-top: 16px;
+        }
+
         .learn_more {
             padding-top: calc(var(--safe-top) + 52px);
             text-align: center;
@@ -1157,6 +1209,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;
 }

src/views/Home.vue

@@ -46,7 +46,16 @@
             class="fuka animate__animated animate__infinite animate__tada"
             @click="goCheck"
         />
-
+        <van-notice-bar :scrollable="false">
+            <img :src="darkTheme ? announcementBlack : announcementWhite" alt="" class="van-notice-bar-img" />
+            <van-swipe vertical class="notice-swipe" :autoplay="2000" :touchable="false" :show-indicators="false">
+                <van-swipe-item v-for="(item, index) in domainList" :key="index"
+                    >恭喜<span>“{{ item.nickName }}”</span>艺术家通过元域名市场购买获得<span
+                        >“{{ item.domainName }}”</span
+                    ></van-swipe-item
+                >
+            </van-swipe>
+        </van-notice-bar>
         <div class="card news">
             <div class="news-title" @click="$router.push('/newsList')">
                 <div class="news-left">
@@ -311,7 +320,7 @@ export default {
         ActivityRecord
     },
     computed: {
-        ...mapState(['userInfo']),
+        ...mapState(['userInfo', 'darkTheme']),
         isNewCollections() {
             let products = [...this.products];
             let flag = false;
@@ -355,6 +364,9 @@ export default {
             hideMore: false,
             hotUsers: [],
             HotCollects: [],
+            domainList: [],
+            announcementWhite: require('@assets/icon-gonggao@3x.png'),
+            announcementBlack: require('@assets/icon-gonggaohei@3x.png'),
             acitivities: [],
             fuActivity: false,
             domainSwitch: false
@@ -383,6 +395,15 @@ export default {
                 ''
             );
         });
+        this.$http.post('/domainOrder/newestOrder').then(res => {
+            res.forEach(item => {
+                item.domainName = item.domainName.split(' ')[1].trim();
+                if (item.nickName.length > 4) {
+                    item.nickName = item.nickName.slice(0, 4) + '...';
+                }
+            });
+            this.domainList = res;
+        });
     },
     methods: {
         download() {
@@ -720,6 +741,40 @@ export default {
     background-color: #181818;
 }
 
+/deep/ .van-notice-bar {
+    background: var(--bg2);
+    margin: 16px 16px 0;
+    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+    border-radius: 16px;
+    padding: 0px 10px;
+
+    .van-notice-bar__content {
+        display: flex;
+        align-items: center;
+    }
+
+    .van-notice-bar-img {
+        width: 18px;
+        height: 18px;
+        margin-right: 8px;
+    }
+
+    .notice-swipe {
+        width: calc(74vw);
+        height: 28px;
+        background: var(--bg3);
+        border-radius: 10px;
+        padding: 0px 10px;
+        font-size: 11px;
+        line-height: 28px;
+        color: var(--text0);
+
+        span {
+            color: #f600ff;
+        }
+    }
+}
+
 .top {
     display: flex;
     padding: 9px 16px;

src/views/Mine.vue

@@ -141,6 +141,13 @@
                     <img src="@assets/icon_qianbao@3x.png" alt="" />
                     <span>我的钱包</span>
                 </div>
+                <!-- <div class="order-info" @click="$router.push('/shoppingCart')">
+                    <div class="order-infos">
+                        <img src="@assets/icon_gouwuche@3x.png" alt="" />
+                        <div class="shopping_cart_number">11</div>
+                    </div>
+                    <span>购物车</span>
+                </div> -->
                 <!-- <div class="order-info" @click="$router.push('/auctionOrders')">
                 <img src="@assets/info_icon_paimaidingdan.png" alt="" />
                 <span>拍卖订单</span>
@@ -595,6 +602,7 @@ export default {
     background: #ffffff;
     position: relative;
     border-radius: 8px;
+
     .toiIlluminate_imgOne {
         width: 96px;
         height: 100px;
@@ -602,6 +610,7 @@ export default {
         right: 0px;
         top: 0px;
     }
+
     .toiIlluminate_imgTwo {
         width: 40px;
         height: 129px;
@@ -609,6 +618,7 @@ export default {
         left: 0px;
         bottom: 0px;
     }
+
     .risk-box_id {
         padding-top: 30px;
         padding-left: 20px;
@@ -618,11 +628,13 @@ export default {
         color: #000000;
         line-height: 34px;
         position: relative;
+
         .risk-box_id_one {
             position: relative;
             z-index: 2002;
             margin-bottom: 30px;
         }
+
         .risk-box_id_two {
             width: 84px;
             height: 14px;
@@ -633,6 +645,7 @@ export default {
             bottom: 0px;
         }
     }
+
     .risk-box_tip {
         padding-left: 20px;
         margin-bottom: 12px;
@@ -642,9 +655,11 @@ export default {
         color: #939599;
         line-height: 20px;
     }
+
     .risk-box_title {
         margin-bottom: 10px;
     }
+
     .risk-box_title_con {
         font-size: 14px;
         font-family: PingFangSC-Regular, PingFang SC;
@@ -655,6 +670,7 @@ export default {
         padding-right: 20px;
         position: relative;
     }
+
     .risk-box_title_con::after {
         content: '';
         width: 6px;
@@ -665,12 +681,14 @@ export default {
         top: 6px;
         left: 18px;
     }
+
     .to_illuminate {
         margin-top: 40px;
         padding: 0px 20px;
         margin-bottom: 10px;
         position: relative;
         z-index: 2002;
+
         .to_illuminate_con {
             height: 38px;
             background: #3ab200;
@@ -683,6 +701,7 @@ export default {
             text-align: center;
         }
     }
+
     .perfect_tip {
         font-size: 12px;
         font-family: PingFangSC-Regular, PingFang SC;
@@ -693,6 +712,7 @@ export default {
         padding-bottom: 14px;
     }
 }
+
 .wrapper {
     height: 260px;
     width: calc(100vw);
@@ -701,6 +721,7 @@ export default {
     background: #ffffff;
     border-radius: 16px 16px 0px 0px;
     position: relative;
+
     .privacy_off_img {
         width: 24px;
         height: 24px;
@@ -708,15 +729,18 @@ export default {
         top: 16px;
         right: 16px;
     }
+
     .wrapper_img {
         display: flex;
         justify-content: center;
+
         .privacy_img {
             width: 64px;
             height: 64px;
             padding-top: 22px;
         }
     }
+
     .wrapper_title {
         font-size: 16px;
         font-family: PingFangSC-Medium, PingFang SC;
@@ -727,6 +751,7 @@ export default {
         margin-bottom: 8px;
         text-align: center;
     }
+
     .wrapper_tip {
         padding: 0px 16px;
         font-size: 14px;
@@ -737,16 +762,19 @@ export default {
         text-align: center;
         margin-bottom: 28px;
     }
+
     .wrapper_division {
         width: 100%;
         height: 1px;
         background: #f2f4f5;
         margin-bottom: 9px;
     }
+
     .wrapper_btn {
         padding: 0px 16px;
         display: flex;
         justify-content: space-between;
+
         .wrapper_btn_left {
             width: calc(50vw - 83.5px);
             height: 38px;
@@ -760,6 +788,7 @@ export default {
             line-height: 38px;
             text-align: center;
         }
+
         .wrapper_btn_right {
             width: calc(50vw - 83.5px);
             height: 38px;
@@ -774,16 +803,19 @@ export default {
         }
     }
 }
+
 .toiIlluminate_Three {
     display: flex;
     justify-content: center;
     padding-top: 70px;
+
     // transform: translateY(70px);
     .toiIlluminate_imgThree {
         width: 40px;
         height: 40px;
     }
 }
+
 .mine {
     background-color: #272b2e;
     padding-top: 0 !important;
@@ -812,6 +844,7 @@ export default {
             font-weight: bold;
             color: @text0;
             line-height: 24px;
+
             img {
                 width: 18px;
                 height: 18px;
@@ -842,6 +875,7 @@ export default {
 /deep/ .title {
     padding: 12px 12px 6px;
     border-bottom: 1px solid @bg3;
+
     .van-cell__title {
         span {
             font-size: @font3;
@@ -862,17 +896,20 @@ export default {
         line-height: 28px;
     }
 }
+
 .orderList {
     width: 100%;
     padding: 0px 16px;
     box-sizing: border-box;
     margin-top: 2px;
+
     .orderList_con {
         width: 100%;
         background: #2d3134;
         border-radius: 4px;
         .flex();
     }
+
     // padding: 0 12px;
     .order-info {
         padding: 16px 0 14px;
@@ -883,15 +920,36 @@ export default {
         align-items: center;
         justify-content: center;
 
+        .order-infos {
+            position: relative;
+
+            .shopping_cart_number {
+                width: 19px;
+                height: 14px;
+                background: #ff4f50;
+                border-radius: 8px;
+                font-size: 10px;
+                font-weight: bold;
+                color: #ffffff;
+                line-height: 14px;
+                text-align: center;
+                position: absolute;
+                right: -7px;
+                top: 0;
+            }
+        }
+
         .order-info-box {
             .flex();
             width: 132px;
         }
+
         img {
             width: 28px;
             height: 28px;
             // margin-right: 8px;
         }
+
         span {
             font-size: 13px;
             font-weight: 400;
@@ -900,6 +958,7 @@ export default {
             margin-top: 4px;
         }
     }
+
     // .order-info + .order-info {
     //     // margin-left: 20px;
     //     &::before {
@@ -928,8 +987,10 @@ export default {
         }
     }
 }
+
 .orderList {
     .flex();
+
     // padding: 0 12px;
     .menu-info {
         padding: 16px 0;
@@ -943,11 +1004,13 @@ export default {
             .flex();
             width: 132px;
         }
+
         img {
             width: 28px;
             height: 28px;
             margin-right: 8px;
         }
+
         span {
             font-size: 14px;
             font-weight: bold;
@@ -955,6 +1018,7 @@ export default {
             line-height: 24px;
         }
     }
+
     .menu-info + .menu-info {
         // margin-left: 20px;
         &::before {
@@ -983,6 +1047,7 @@ export default {
         }
     }
 }
+
 .grid-img {
     display: block;
 }
@@ -999,6 +1064,7 @@ export default {
         margin-top: 4px;
         white-space: nowrap;
     }
+
     .van-grid-item__content {
         padding: 4.2vw 2.1vw;
     }
@@ -1026,12 +1092,14 @@ export default {
     height: 28px;
     // margin-right: 10px;
     display: block;
+
     /deep/.van-icon__image {
         width: 28px;
         height: 28px;
         display: block;
     }
 }
+
 .userInfo {
     padding-top: 52vw;
     // border-bottom: 1px solid @bg2;
@@ -1044,6 +1112,7 @@ export default {
         left: 0;
         z-index: 1;
         overflow: visible;
+
         &::after {
             content: '';
             position: absolute;
@@ -1056,11 +1125,13 @@ export default {
         }
     }
 }
+
 .userInfo-content {
     padding: 0 16px;
     z-index: 2;
     position: relative;
     transform: translateY(-103px);
+
     .sub {
         font-size: 12px;
         color: @text3;
@@ -1073,6 +1144,7 @@ export default {
         .flex();
         margin-top: 4px;
         justify-content: center;
+
         img {
             width: 18px;
             height: 18px;
@@ -1102,12 +1174,14 @@ export default {
             .flex-col();
             align-items: center;
             padding: 16px 0;
+
             .text1 {
                 font-size: 18px;
                 color: #fff;
                 line-height: 24px;
                 font-weight: bold;
             }
+
             .text2 {
                 font-size: 12px;
                 color: @text3;
@@ -1117,12 +1191,14 @@ export default {
         }
     }
 }
+
 .userInfo-top {
     display: flex;
     align-items: center;
     transform: translateX(-5px);
     position: relative;
     flex-direction: column;
+
     .van-image {
         // border: 5px solid @bg;
         flex-shrink: 0;
@@ -1135,6 +1211,7 @@ export default {
         display: flex;
         flex-direction: column;
         align-items: center;
+
         .text1 {
             font-size: 24px;
             font-weight: bold;
@@ -1150,6 +1227,7 @@ export default {
             //     vertical-align: middle;
             // }
         }
+
         .text2 {
             font-size: 14px;
             color: #949699;
@@ -1157,6 +1235,7 @@ export default {
             display: flex;
             align-items: center;
             margin-top: 5px;
+
             img {
                 display: block;
                 margin-left: 6px;
@@ -1165,15 +1244,18 @@ export default {
 
         .icons {
             .flex();
+
             .auth-imgs {
                 .flex();
                 transform: translateX(15px);
+
                 img {
                     width: 28px;
                     height: 28px;
                     position: relative;
                     z-index: 1;
                 }
+
                 span {
                     display: block;
                     width: 60px;
@@ -1189,11 +1271,14 @@ export default {
                     flex-shrink: 0;
                     white-space: nowrap;
                 }
+
                 &.authed_con {
                     width: 90px;
                 }
+
                 &.authed {
                     width: 90px;
+
                     span {
                         color: #418bff;
                         background: #e8f3ff;
@@ -1202,10 +1287,12 @@ export default {
                         white-space: nowrap;
                     }
                 }
+
                 &.autheds {
                     position: relative;
                     width: 90px;
                     margin-right: 5px;
+
                     span {
                         display: block;
                         width: 50px;
@@ -1217,6 +1304,7 @@ export default {
                         flex-shrink: 0;
                         white-space: nowrap;
                     }
+
                     .autheds_img {
                         position: absolute;
                         right: 0px;
@@ -1226,9 +1314,11 @@ export default {
                         height: 16px;
                     }
                 }
+
                 &.autheds_con {
                     width: 90px;
                     margin-right: 10px;
+
                     span {
                         color: #39af00;
                         background: #f3ffed;
@@ -1249,29 +1339,35 @@ export default {
         height: 20px;
     }
 }
+
 .menus {
     margin-top: 16px;
     padding: 0px 16px;
     box-sizing: border-box;
     padding-bottom: 100px;
+
     .menus_list {
         width: 100%;
         padding: 16px 0px;
         background: #2d3134;
         border-radius: 4px;
+
         .menus_list_division {
             padding: 14px 16px;
+
             .menus_list_division_con {
                 height: 1px;
                 background: rgba(255, 255, 255, 0.06);
             }
         }
+
         .menus_list_con {
             padding-left: 16px;
             padding-right: 12px;
             display: flex;
             justify-content: space-between;
             align-items: center;
+
             .menus_list_con_left {
                 display: flex;
                 font-size: 13px;
@@ -1279,18 +1375,21 @@ export default {
                 font-weight: 400;
                 color: #ffffff;
                 line-height: 24px;
+
                 .menus_list_con_left_img {
                     width: 24px;
                     height: 24px;
                     margin-right: 12px;
                 }
             }
+
             .menus_list_con_right_img {
                 width: 24px;
                 height: 24px;
             }
         }
     }
+
     // margin: 0 16px;
     // background-color: @bg;
     // border-radius: 8px;
@@ -1313,16 +1412,20 @@ export default {
 }
 
 /deep/.auth {
-    color: @text3!important;
+    color: @text3 !important;
     padding: 0 10px;
     margin-left: 6px;
+
     .van-button__content {
         .flex();
+
         .van-icon__image {
             display: block;
         }
+
         font-weight: normal;
     }
+
     height: 24px;
 }
 
@@ -1343,16 +1446,19 @@ export default {
     top: calc(var(--safe-top) + 16px);
     .flex();
     z-index: 20;
+
     img {
         width: 20px;
         height: 20px;
     }
+
     span {
         font-size: 12px;
         color: #ffffff;
         line-height: 12px;
         margin-left: 4px;
     }
+
     // width: 72px;
     // height: 24px;
     // background: #272b2e;
@@ -1370,10 +1476,12 @@ export default {
     // padding: 0 11px;
     // height: 24px;
     .flex();
+
     img {
         width: 20px;
         height: 20px;
     }
+
     span {
         font-size: 12px;
         color: #ffffff;

src/views/Store.vue

@@ -95,6 +95,17 @@
                         </template>
                     </van-tab>
                 </van-tabs>
+                <div v-if="type == 'metadomainName'" class="metadomainName_list">
+                    <div
+                        v-for="(item, index) in metadomainList"
+                        :key="index"
+                        @click="domainBtn(index)"
+                        :class="metadomainType == item.type ? 'metadomainName_list_con' : ''"
+                        class="metadomainName_list_cons"
+                    >
+                        {{ item.name }}
+                    </div>
+                </div>
             </div>
 
             <!-- <van-button
@@ -120,7 +131,7 @@
             :finished="finished"
             finished-text=""
             @load="getList"
-            v-if="active != 'likeIt'"
+            v-if="active != 'likeIt' && type != 'metadomainName'"
         >
             <template v-for="(item, index) in showList" :key="index">
                 <coupon-info :info="item" v-if="active == 'coupon'"></coupon-info>
@@ -160,7 +171,6 @@
                     ></asset-info>
                 </div>
             </template>
-
             <van-empty
                 v-if="empty || (showList.length === 0 && !loading)"
                 :description="active == 'coupon' ? '你还没有优惠券哦～' : '你还没有藏品哦～'"
@@ -170,6 +180,52 @@
             />
             <img src="../assets/icon_zhiding.png" @click="goTop" class="goTop" v-if="bodyScroll > 100" alt="" />
         </van-list>
+        <!-- <div class="domain_list" v-else-if="active != 'likeIt' && type == 'metadomainName'">
+            <template v-for="(item, index) in showList" :key="index">
+                <domain-owned :info="asset" v-for="(asset, assetIndex) in item" :key="assetIndex"></domain-owned>
+            </template>
+            <van-empty v-if="empty || (showList.length === 0 && !loading)"
+                :description="active == 'coupon' ? '你还没有优惠券哦～' : '你还没有藏品哦～'" :image="
+                    require(`@assets/${active == 'coupon' ? 'kong_png_duihuanquanhei' : 'empty_img_asset_dark'}.png`)
+                " />
+        </div> -->
+        <van-list
+            v-else-if="active != 'likeIt' && type == 'metadomainName'"
+            class="domain_list"
+            v-model:loading="loading"
+            :finished="finished"
+            finished-text=""
+            @load="getList"
+        >
+            <div v-if="metadomainType == 'owned'">
+                <template v-for="(item, index) in showList" :key="index">
+                    <domain-owned :info="asset" v-for="(asset, assetIndex) in item" :key="assetIndex"></domain-owned>
+                </template>
+            </div>
+            <div v-else-if="metadomainType == 'underReview'">
+                <template v-for="(item, index) in showList" :key="index">
+                    <domain-owned :info="asset" v-for="(asset, assetIndex) in item" :key="assetIndex"></domain-owned>
+                </template>
+            </div>
+            <!-- <div v-else-if="metadomainType == 'myBid'">
+                <template v-for="(item, index) in showList" :key="index">
+                    <owned-buy :info="asset" v-for="(asset, assetIndex) in item" :key="assetIndex"></owned-buy>
+                </template>
+            </div>
+            <div v-else-if="metadomainType == 'receiveQuotation'">
+                <template v-for="(item, index) in showList" :key="index">
+                    <receive-quotation :info="asset" v-for="(asset, assetIndex) in item"
+                        :key="assetIndex"></receive-quotation>
+                </template>
+            </div> -->
+            <van-empty
+                v-if="empty || (showList.length === 0 && !loading)"
+                :description="active == 'coupon' ? '你还没有优惠券哦～' : '你还没有藏品哦～'"
+                :image="
+                    require(`@assets/${active == 'coupon' ? 'kong_png_duihuanquanhei' : 'empty_img_asset_dark'}.png`)
+                "
+            />
+        </van-list>
         <div class="list" v-else>
             <template v-for="(item, index) in showListLike" :key="index">
                 <product-info v-model:info="likeList[item.index]" @update:info="init" dark></product-info>
@@ -214,6 +270,9 @@
 
 <script>
 import AssetInfo from '../components/asset/assetInfo.vue';
+import DomainOwned from '../components/asset/domainOwned.vue';
+// import OwnedBuy from '../components/asset/ownedBuy.vue';
+// import ReceiveQuotation from '../components/asset/receiveQuotation.vue';
 import AssetInfoSe from '../components/asset/assetInfoSe.vue';
 import ShowInfo from '../components/asset/showInfo.vue';
 import CouponInfo from '../components/CouponInfo.vue';
@@ -221,6 +280,7 @@ import asset from '../mixins/asset';
 import coupon from '../mixins/coupon';
 import starAssetInfo from '../components/star/assetInfo.vue';
 import ProductInfo from '../components/product/productInfo.vue';
+import list from '../mixins/list';
 export default {
     name: 'store',
     mixins: [asset, coupon],
@@ -231,7 +291,10 @@ export default {
         CouponInfo,
         ShowInfo,
         starAssetInfo,
-        ProductInfo
+        ProductInfo,
+        DomainOwned
+        // OwnedBuy,
+        // ReceiveQuotation
     },
     data() {
         return {
@@ -259,6 +322,25 @@ export default {
             assetFinished: false,
             assetPage: 0,
             assetList: [],
+            metadomainType: 'owned',
+            metadomainList: [
+                {
+                    name: '拥有的',
+                    type: 'owned'
+                },
+                {
+                    name: '审核中',
+                    type: 'underReview'
+                },
+                {
+                    name: '我的出价',
+                    type: 'myBid'
+                },
+                {
+                    name: '收到的报价',
+                    type: 'receiveQuotation'
+                }
+            ],
             typeOptionLike: [
                 {
                     label: '全部',
@@ -444,6 +526,12 @@ export default {
             if (this.active === 'explore') {
                 if (this.type === 'paimai') {
                     return 'AUCTIONING';
+                } else if (this.type === 'metadomainName') {
+                    if (this.metadomainType == 'underReview') {
+                        return 'PENDING';
+                    } else {
+                        return 'NORMAL,TRADING,GIFTING,MINTING,AUCTIONING,PENDING';
+                    }
                 } else {
                     return 'NORMAL,TRADING,GIFTING,MINTING,AUCTIONING';
                 }
@@ -654,6 +742,11 @@ export default {
                     return Promise.resolve();
                 });
         },
+        pad(n, width, z) {
+            z = z || '0';
+            n = n + '';
+            return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
+        },
         getList() {
             if (!this.isLogin) {
                 this.empty = true;
@@ -690,7 +783,20 @@ export default {
             }
             return this.$http.post(this.url, form, { body: 'json' }).then(res => {
                 // if (this.active === 'coupon' || this.active === 'showRoom') {
+                res.content.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) +
+                            '分';
+                    }
+                });
                 if (res.first) {
+                    this.page = 0;
                     this.list = res.content;
                 } else {
                     this.list = [...this.list, ...res.content];
@@ -789,6 +895,17 @@ export default {
                 }, 100);
             }
         },
+        domainBtn(index) {
+            this.metadomainType = this.metadomainList[index].type;
+            this.page = 0;
+            if (this.metadomainType == 'myBid' || this.metadomainType == 'receiveQuotation') {
+                this.$toast('版本升级中');
+            } else {
+                this.getList().then(() => {
+                    this.isLoading = false;
+                });
+            }
+        },
         changeTab(info) {
             if (info.name === 'price') {
                 this.sortDes = this.sortDes == 'desc' ? 'asc' : 'desc';
@@ -820,6 +937,7 @@ export default {
     display: flex;
     background-color: #222426;
     width: calc(100vw);
+
     .top-btn {
         padding: 10px 16px;
         padding-right: 0px;
@@ -829,6 +947,8 @@ export default {
         overflow-x: auto;
         display: flex;
         align-items: center;
+        background: #1c1c1c;
+
         .btn {
             font-size: @font3;
             line-height: 26px;
@@ -836,6 +956,7 @@ export default {
             vertical-align: text-bottom;
             color: #939599;
             flex-shrink: 0;
+
             &.active {
                 color: #ffffff;
                 font-size: @font3;
@@ -847,6 +968,7 @@ export default {
             margin-left: 20px;
         }
     }
+
     .search {
         width: 50px;
         height: 50px;
@@ -854,8 +976,9 @@ export default {
         align-items: center;
         padding-left: 10px;
         box-sizing: border-box;
-        background: #222426;
+        background: #1c1c1c;
         position: relative;
+
         .search_division {
             position: absolute;
             top: 13px;
@@ -864,20 +987,59 @@ export default {
             height: 24px;
             background-color: #272b2e;
         }
+
         img {
             display: block;
         }
     }
 }
+
+.metadomainName_list {
+    padding: 16px 15px 20px 16px;
+    display: flex;
+    justify-content: space-between;
+    background: #0f0f0f;
+
+    .metadomainName_list_cons {
+        width: calc(20vw - 1px);
+        height: 28px;
+        background: #1e1e1e;
+        border-radius: 4px;
+        line-height: 28px;
+        text-align: center;
+        font-size: 12px;
+        font-weight: 400;
+        color: rgba(147, 149, 153, 0.6);
+    }
+
+    .metadomainName_list_con {
+        height: 28px;
+        border-radius: 4px;
+        border: 1px solid #00fe1e;
+        box-sizing: border-box;
+        color: #00fe1e;
+        background: #0f0f0f;
+        line-height: 28px;
+    }
+}
+
+.domain_list {
+    padding: 0px 16px;
+    padding-bottom: 50px;
+}
+
 /deep/.van-sticky--fixed {
     background-color: #222426;
 }
+
 .van-tabs {
-    background-color: #222426;
+    background: #1c1c1c;
+
     /deep/.van-tab {
         margin-right: 30px;
     }
 }
+
 .select {
     position: absolute;
     right: 16px;
@@ -885,27 +1047,33 @@ export default {
     color: @text3 !important;
     min-width: 96px;
 }
+
 // /deep/.van-sticky {
 //     position: relative;
 // }
 /deep/.scroll-wrapper {
     background-color: #0f0f0f !important;
 }
+
 .discover {
     background-color: #0f0f0f;
     min-height: 100vh;
     min-height: var(--app-height);
     box-sizing: border-box;
 }
+
 .list {
     padding: 8px;
 }
+
 .grid-img {
     display: block;
 }
+
 .van-grid {
     margin-top: 12px;
 }
+
 /deep/.van-tabs__nav--line.van-tabs__nav--complete {
     border-top-color: #303133;
 }
@@ -913,6 +1081,7 @@ export default {
 /deep/ .van-grid-item__content {
     padding: 14px 20px 16px;
 }
+
 /deep/ .van-grid-item__text {
     color: #fff;
     font-size: 13px;
@@ -939,6 +1108,7 @@ export default {
     &.couponList {
         padding: 8px 8px 100px;
     }
+
     &.roomList {
         padding: 10px 0 100px;
     }
@@ -954,6 +1124,7 @@ export default {
 .tab {
     position: relative;
     padding-right: 14px;
+
     .van-icon {
         position: absolute;
         right: 0;
@@ -967,6 +1138,7 @@ export default {
         }
     }
 }
+
 /deep/.coupon {
     &::after {
         background-color: #181818;
@@ -978,12 +1150,14 @@ export default {
             background-color: #0f0f0f;
         }
     }
+
     .btn {
         &::after {
             background-color: #181818;
         }
     }
 }
+
 .goTop {
     position: fixed;
     right: 16px;
@@ -1003,6 +1177,7 @@ export default {
     border: 1px solid #c8c9cc;
     backdrop-filter: blur(10px);
     overflow: auto;
+
     .van-list {
         padding: 12px 8px;
         min-height: 364px;
@@ -1025,6 +1200,7 @@ export default {
         text-align: center;
         margin-bottom: 30px;
     }
+
     .wrapper-close {
         width: 40px;
         height: 40px;

src/views/asset/Consignment.vue

@@ -163,16 +163,13 @@ export default {
             this.$http.post('/asset/getRoyalties?id=' + this.$route.query.id).then(res => {
                 this.royalties = res;
             });
-
+            this.$http.post('/asset/getServicecharge?id=' + this.$route.query.id).then(res => {
+                this.serviceCharge = res;
+            });
             if (res.category === '元域名') {
                 this.$http.get('/sysConfig/get/domain_service_charge,domain_price').then(res => {
-                    this.serviceCharge = Number(res.domain_service_charge.value);
                     this.minPrice = Number(res.domain_price.value);
                 });
-            } else {
-                this.$http.post('/asset/getServicecharge?id=' + this.$route.query.id).then(res => {
-                    this.serviceCharge = res;
-                });
             }
         });
     },
@@ -275,24 +272,31 @@ export default {
 /deep/ .van-notice-bar {
     background: rgba(255, 108, 0, 0.1) !important;
 }
+
 /deep/ .van-password-input {
     margin: 0 0;
+
     .van-password-input__security {
         border: 1px solid @text3;
         height: 42px;
         border-radius: 2px;
+
         li {
             background-color: transparent;
+
             &:not(:last-child) {
                 border-right: 1px solid @text3;
             }
         }
     }
 }
+
 /deep/.van-number-keyboard__body {
     background-color: fade(#4a4a4a, 50%);
+
     .van-key {
         background-color: @bg;
+
         &:active {
             background-color: @bg3;
         }
@@ -301,6 +305,7 @@ export default {
 
 .input {
     padding: 12px 0 20px;
+
     .text1 {
         font-size: @font2;
         color: @text0;
@@ -308,38 +313,49 @@ export default {
         margin-bottom: 6px;
     }
 }
+
 .top-content {
     background-color: @bg;
     padding-top: 10px;
 }
+
 .top {
     background-color: @bg3;
+
     /deep/ .van-password-input {
         margin: 10px 0;
         padding: 0 25px;
+
         .van-password-input__security {
             border-width: 0;
             height: 42px;
             border-radius: 2px;
+
             li {
                 background-color: transparent;
+
                 &:not(:last-child) {
                     border-right: 1px solid @text3;
                 }
+
                 border: 1px solid @text3;
             }
         }
     }
+
     /deep/ .van-cell {
         padding-top: 20px;
     }
+
     /deep/.van-cell__title {
         font-size: @font2;
         font-weight: bold;
         color: @text0;
         line-height: 24px;
     }
+
     padding-bottom: 280px;
+
     .title {
         font-size: 14px;
         color: @text0;
@@ -347,6 +363,7 @@ export default {
         margin-top: 5px;
         padding: 5px 16px 5px;
     }
+
     .name {
         padding-left: 16px;
         font-size: 12px;
@@ -354,6 +371,7 @@ export default {
         color: @text3;
         line-height: 22px;
     }
+
     .bottom {
         position: fixed;
         bottom: 0px;
@@ -378,6 +396,7 @@ export default {
                 text-align: center;
                 border: 1px solid @text3;
             }
+
             .btn2 {
                 width: 162px;
                 height: 44px;
@@ -388,11 +407,13 @@ export default {
                 background: linear-gradient(135deg, @prim 0%, @warn 100%);
                 border-radius: 22px;
             }
+
             .van-button {
                 flex-grow: 1;
                 color: #333230 !important;
                 max-width: 210px;
             }
+
             .text {
                 font-size: @font2;
                 color: @text3;
@@ -401,14 +422,17 @@ export default {
             }
         }
     }
+
     .border {
         // width: 375px;
         height: 5px;
         background: @bg3;
+
         &.border1 {
             margin-top: 20px;
         }
     }
+
     .content {
         // width: 375px;
         background: @bg;
@@ -451,9 +475,11 @@ export default {
             }
         }
     }
+
     .input {
         // margin-top: 20px;
         width: 100%;
+
         .text1 {
             font-size: @font2;
             color: @text0;
@@ -461,6 +487,7 @@ export default {
             margin-bottom: 6px;
             padding: 0 16px;
         }
+
         .text2 {
             font-size: @font2;
             text-align: right;
@@ -469,6 +496,7 @@ export default {
             line-height: 24px;
             margin-right: 15px;
         }
+
         .text3 {
             font-size: @font2;
             color: #ff4f50;
@@ -479,14 +507,17 @@ export default {
         }
     }
 }
+
 .text2-content {
     .flex();
     justify-content: flex-end;
 }
+
 /deep/.van-stepper {
     padding: 10px 16px;
     width: 100%;
     box-sizing: border-box;
+
     .van-stepper__input {
         width: 100%;
         height: 40px;

src/views/asset/Detail.vue

@@ -18,8 +18,13 @@
                     <img src="@assets/svgs/png-biaotikuang-02.svg" alt="" /> 
                     <img src="@assets/svgs/png-biaotikuang-03.svg" alt="" /> 
                     <img src="@assets/svgs/png-biaotikuang-04.svg" alt="" /> 
-                    </div> -->
-                <product-title :isSmall="info.name && info.name.length > 16">{{ info.name }} </product-title>
+                                                                    </div> -->
+                <product-title :isSmall="info.name">
+                    <div class="product-title_con" :class="info.type == 'DOMAIN' ? '' : 'product-title_cons'">
+                        <div>{{ info.name }}</div>
+                        <div v-if="info.type == 'DOMAIN'" class="remaining_time">剩余时长&nbsp;{{ info.endTime }}</div>
+                    </div>
+                </product-title>
             </div>
             <div class="types" v-if="info.type === 'PICTURE'">
                 <div class="product-type">个人作品</div>
@@ -101,7 +106,7 @@
         >
         <like-button :isLike="info.liked" @click="likeProduct"> 
           {{ info.likes }}
-            </like-button> -->
+                                                            </like-button> -->
             </div>
         </div>
 
@@ -269,7 +274,7 @@
             <!-- <template v-if="info.detail"> 
                 <div class="page-title"> 作品描述 </div>
                 <div class="page-text" v-html="info.detail"> </div>
-                </template> -->
+                                                                </template> -->
             <div
                 class="del"
                 v-if="
@@ -278,7 +283,8 @@
                     info.status !== 'GIFTED' &&
                     info.status !== 'GIFTING' &&
                     info.status !== 'TRANSFERRED' &&
-                    info.status !== 'TRADING'
+                    info.status !== 'TRADING' &&
+                    info.status !== 'PENDING'
                 "
             >
                 <van-button @click="delCollection" block round color="#1C1C1C">
@@ -294,7 +300,7 @@
             <div class="btns"> 
                 <van-button type="primary" block round @click="buy"> 立即购买 </van-button>
             </div>
-            </div> -->
+                                                            </div> -->
         <div class="btn van-safe-area-bottom" ref="btn" v-if="info.status === 'NORMAL' && !isLock">
             <template v-if="info.type === 'PICTURE'">
                 <div class="btn2" v-if="startTime && !$store.state.reviewPay">
@@ -329,7 +335,7 @@
                 <!-- <div class="add" @click="Add"> F
                     <img class="img" src="@assets/icon-dianzan.png" alt="" /> 
                     <div class="text2"> 赠送 </div>
-                    </div> -->
+                                                                    </div> -->
                 <van-button v-if="!$store.state.reviewPay" class="btn1" type="primary" block round @click="Exhibition">
                     {{ info.publicShow ? '取消展示' : '公开展示' }}
                 </van-button>
@@ -344,7 +350,12 @@
                 </van-button>
                 <!-- <van-button type="primary" v-else-if="!$store.state.reviewPay" block round @click="Consignment"> 
                     {{ info.consignment ? '取消寄售' : '寄售上架' }}
-                    </van-button> -->
+                                                                    </van-button> -->
+            </div>
+        </div>
+        <div class="btn van-safe-area-bottom" ref="btn" v-else-if="info.status === 'PENDING' && !isLock">
+            <div class="btns1">
+                <van-button color="#FF7F1F" block round> 审核中 </van-button>
             </div>
         </div>
         <div class="btn van-safe-area-bottom" ref="btn" v-else-if="isLock">
@@ -869,6 +880,17 @@ export default {
                     this.emitter.emit('refreash');
                 }
                 // res.source = 'GIFT';
+                if (res.endTime) {
+                    res.endTime = this.dayjs(res.endTime).diff(this.dayjs(), 'second');
+                    res.endTime =
+                        Math.floor(res.endTime / 24 / 3600) +
+                        '天' +
+                        this.pad(parseInt(res.endTime / 3600) % 24, 2) +
+                        '时' +
+                        this.pad(parseInt(res.endTime / 60) % 60, 2) +
+                        '分';
+                }
+                console.log('dfjsdhasdfg', res);
                 this.info = res;
                 //锁单
                 this.$nextTick(() => {
@@ -2600,4 +2622,17 @@ export default {
         padding-right: 16px;
     }
 }
+
+.remaining_time {
+    font-size: 12px;
+    color: #939599;
+    line-height: 24px;
+    text-align: center;
+}
+.product-title_con {
+    min-height: 44px;
+}
+.product-title_cons {
+    line-height: 44px;
+}
 </style>

src/views/order/Orders.vue

@@ -128,11 +128,7 @@
             v-if="type == 'METANAME'"
         >
             <domain-info @delFn="delFn" v-for="item in list" :key="item.id" :info="item"></domain-info>
-            <van-empty
-                v-if="list.length == 0"
-                description="你还没有订单哦~"
-                :image="require('@assets/kong_png_wudingdan.png')"
-            />
+            <van-empty v-if="empty" description="你还没有订单哦~" :image="require('@assets/kong_png_wudingdan.png')" />
         </van-list>
     </van-pull-refresh>
 </template>
@@ -180,7 +176,7 @@ export default {
                     name: '全部'
                 },
                 {
-                    status: 'NOT_PAID',
+                    status: 'PENDING',
                     name: '审核中'
                 },
                 {
@@ -244,12 +240,30 @@ export default {
     methods: {
         beforeData() {
             if (this.type == 'METANAME') {
-                return {
-                    query: {
-                        userId: this.$store.state.userInfo.id,
-                        orderStatus: this.status
-                    }
-                };
+                if (this.status == 'PENDING') {
+                    return {
+                        query: {
+                            userId: this.$store.state.userInfo.id,
+                            orderStatus: 'FINISH',
+                            status: 'PENDING'
+                        }
+                    };
+                } else if (this.status == 'FINISH') {
+                    return {
+                        query: {
+                            userId: this.$store.state.userInfo.id,
+                            orderStatus: this.status,
+                            status: 'SUCCESS'
+                        }
+                    };
+                } else {
+                    return {
+                        query: {
+                            userId: this.$store.state.userInfo.id,
+                            orderStatus: this.status
+                        }
+                    };
+                }
             } else if (this.type == 'BLI') {
                 return {
                     query: {
@@ -321,14 +335,17 @@ export default {
     padding: 10px 16px;
     background-color: @bg;
     align-items: center;
+
     .top_img {
         width: 24px;
         height: 24px;
     }
+
     .top-btn {
         overflow-x: auto;
         flex-grow: 1;
         .flex();
+
         .btn {
             font-size: 16px;
             font-family: PingFangSC-Regular, PingFang SC;
@@ -338,6 +355,7 @@ export default {
             display: inline-block;
             vertical-align: text-bottom;
             flex-shrink: 0;
+
             &.active {
                 color: #000000;
                 font-weight: bold;
@@ -364,15 +382,19 @@ export default {
 /deep/.van-tabs__nav--line.van-tabs__nav--complete {
     border-color: @tabBorder;
 }
+
 .grid-img {
     display: block;
 }
+
 .van-grid {
     margin-top: 12px;
 }
+
 /deep/ .van-grid-item__content {
     padding: 14px 20px 16px;
 }
+
 /deep/ .van-grid-item__text {
     color: #fff;
     font-size: 13px;
@@ -396,6 +418,7 @@ export default {
 .discover {
     padding-bottom: 50px;
 }
+
 .van-tabs {
     background-color: @bg;
 }

src/views/product/MetaDomain.vue

@@ -58,8 +58,8 @@
                     <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'" />
+                            <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>
@@ -262,14 +262,18 @@ export default {
     data() {
         return {
             domainWidth: '0px',
-            domainNameType: 'LIKE',
+            domainNameType: 'SELL',
             scrollTop: 0,
             rarityType: '',
             characteristicType: '',
             show: false,
-            domainPrice: false,
+            domainPrice: true,
             source: true,
             domainNameList: [
+                {
+                    name: '寄售中',
+                    type: 'SELL'
+                },
                 {
                     name: '热度排行',
                     type: 'LIKE'
@@ -278,10 +282,6 @@ export default {
                     name: '最新发布',
                     type: 'RELEASE'
                 },
-                {
-                    name: '寄售中',
-                    type: 'SELL'
-                },
                 {
                     name: '仅展示',
                     type: 'SEE'
@@ -314,21 +314,33 @@ export default {
                 }
             ],
             characteristicList: [
+                {
+                    name: '百家姓',
+                    type: 'RIDCX'
+                },
+                // {
+                //     name: '中文',
+                //     type: 'RIDC'
+                // },
+                {
+                    name: '二位数字',
+                    type: 'RIDN2'
+                },
                 {
                     name: '三位数字',
-                    type: 'RID3N'
+                    type: 'RIDN3'
                 },
                 {
                     name: '四位数字',
-                    type: 'RID4N'
+                    type: 'RIDN4'
                 },
                 {
                     name: '五位数字',
-                    type: 'RID5N'
+                    type: 'RIDN5'
                 },
                 {
                     name: '五位以上数字',
-                    type: 'RID6N'
+                    type: 'RIDN6'
                 }
             ],
             loading: false,
@@ -361,6 +373,7 @@ export default {
         },
         priceOrder() {
             this.source = !this.source;
+            this.dressing = true;
             this.getList(true);
         },
         showStatus() {
@@ -368,17 +381,18 @@ export default {
             this.domainWidth = '0px';
         },
         screening() {
-            this.$toast('升级改版中');
-            // this.show = true;
-            // this.domainWidth = 'calc(84vw + 1px)';
-            // this.search = '';
-            // this.value = '';
+            // this.$toast('升级改版中');
+            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_\u4e00-\u9fa5]+$/;
             let matching = /^[A-Za-z0-9]+$/;
             if (matching.test(this.search)) {
                 this.getList(true);
@@ -387,14 +401,16 @@ export default {
                     this.refreash();
                 } else {
                     this.$toast('只能由数字和字母组成');
+                    this.value = '';
+                    this.search = '';
                 }
             }
         },
         refreash() {
-            (this.domainNameType = 'LIKE'), (this.rarityType = '');
+            (this.domainNameType = 'SELL'), (this.rarityType = '');
             this.characteristicType = '';
-            this.dressing = false;
-            this.domainPrice = false;
+            this.dressing = true;
+            this.domainPrice = true;
             this.getList(true);
         },
         submit() {
@@ -407,11 +423,6 @@ export default {
             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) {
@@ -422,9 +433,10 @@ export default {
             this.finished = false;
             this.empty = false;
             let query = {
-                type: 'DOMAIN'
+                type: 'DOMAIN',
+                onShelf: true
             };
-            let sort = 'likes,desc';
+            let sort = 'price,desc';
             if (this.dressing) {
                 if (this.rarityType != '') {
                     query = {
@@ -454,6 +466,7 @@ export default {
                         ...query,
                         salable: false
                     };
+                    sort = 'likes,desc';
                 }
                 if (this.domainNameType == 'RELEASE') {
                     query = {
@@ -461,6 +474,12 @@ export default {
                     };
                     sort = 'createdAt,desc';
                 }
+                if (this.domainNameType == 'LIKE') {
+                    query = {
+                        ...query
+                    };
+                    sort = 'likes,desc';
+                }
             }
             let url = 'collection/all';
             return this.$http
@@ -484,8 +503,14 @@ export default {
                     this.empty = res.empty;
                     if (this.search != '' && res.empty == true) {
                         this.empty = false;
+                        this.domainPrice = false;
                         this.getDomain();
                     } else {
+                        if (this.domainNameType == 'SELL') {
+                            this.domainPrice = true;
+                        } else {
+                            this.domainPrice = false;
+                        }
                         this.domainList = [];
                     }
                     this.loading = false;

src/views/product/QuotationRecord.vue

@@ -0,0 +1,378 @@
+<template>
+    <div class="product">
+        <van-sticky>
+            <div class="padding-safe-top">
+                <div class="product_top_one">
+                    <img
+                        :src="require('@assets/icon-back@3x.png')"
+                        alt=""
+                        class="product_top_one_img"
+                        @click="$router.back()"
+                    />
+                    收到报价
+                </div>
+            </div>
+        </van-sticky>
+        <div class="product_detailed_information">
+            <div class="product_detailed_information_con">
+                <van-image class="icon-img" width="80" height="80" :src="getImg(changeImgs(info.pic))" fit="contain" />
+                <div class="product_detailed_information_con_right">
+                    <div class="product_detailed_information_con_right_con">
+                        <img :src="require('@assets/png-da-zi@3x.png')" alt="" class="name_img" />
+                        <div class="product_left_title">
+                            <div class="product_left_name">{{ info.name }}</div>
+                            <div class="product_left_time">剩余时长&nbsp;{{ info.endTime }}</div>
+                        </div>
+                    </div>
+                    <div class="product_detailed_information_con_right_price">最高价：¥1000</div>
+                </div>
+            </div>
+        </div>
+        <div class="number_of_quotations">共10条报价</div>
+        <!-- <van-pull-refresh v-if="quotedPriceList.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=""> -->
+        <div class="box-list">
+            <div class="box-list_con" v-for="(item, index) in quotedPriceList" :key="index">
+                <div class="box-list_con_left">
+                    <van-image
+                        width="40"
+                        height="40"
+                        class="user-img"
+                        :src="item.minterAvatar"
+                        fit="cover"
+                        radius="100"
+                    />
+                    <div>
+                        <div class="box-list_con_left_name">{{ item.name }}</div>
+                        <div class="box-list_con_left_time">{{ item.time }}</div>
+                    </div>
+                </div>
+                <div class="box-list_con_right">
+                    <div class="box-list_con_right_fu">
+                        <div class="box-list_con_right_con">
+                            <img
+                                :src="require('@assets/icon_jiage@3x (2).png')"
+                                alt=""
+                                class="box-list_con_right_img"
+                            />
+                            <div class="box-list_con_right_con_price">{{ item.price }}</div>
+                        </div>
+                    </div>
+                    <div v-if="item.cancel" class="box-list_con_right_con_btn">对方已取消</div>
+                    <div v-else class="box-list_con_right_con_btns">接受</div>
+                </div>
+            </div>
+        </div>
+        <!-- <van-empty :image="require('@assets/empty_img_asset_dark.png')" v-if="empty" description="没有任何报价哦~" />
+            </van-list> -->
+        <!-- </van-pull-refresh> -->
+    </div>
+</template>
+
+<script>
+import asset from '../../mixins/asset';
+import product from '../../mixins/product';
+export default {
+    mixins: [asset, product],
+    data() {
+        return {
+            assetId: 0,
+            info: {},
+            quotedPriceList: [
+                {
+                    name: '用户昵称',
+                    time: '02-20 22:08',
+                    minterAvatar: require('@assets/svgs/img_default_photo.svg'),
+                    price: 1000,
+                    cancel: false
+                },
+                {
+                    name: '用户昵称',
+                    time: '02-20 22:08',
+                    minterAvatar: require('@assets/svgs/img_default_photo.svg'),
+                    price: 1000,
+                    cancel: false
+                },
+                {
+                    name: '用户昵称',
+                    time: '02-20 22:08',
+                    minterAvatar: require('@assets/svgs/img_default_photo.svg'),
+                    price: 1000,
+                    cancel: true
+                },
+                {
+                    name: '用户昵称',
+                    time: '02-20 22:08',
+                    minterAvatar: require('@assets/svgs/img_default_photo.svg'),
+                    price: 1000,
+                    cancel: false
+                }
+            ],
+            loading: false,
+            finished: false,
+            page: 0
+        };
+    },
+    computed: {},
+    mounted() {
+        if (this.$route.query.id) {
+            this.assetId = this.$route.query.id;
+            this.getDomain();
+        }
+    },
+    methods: {
+        pad(n, width, z) {
+            z = z || '0';
+            n = n + '';
+            return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
+        },
+        getDomain() {
+            return this.$http.get('/asset/get/' + this.assetId).then(res => {
+                if (res.endTime) {
+                    res.endTime = this.dayjs(res.endTime).diff(this.dayjs(), 'second');
+                    res.endTime =
+                        Math.floor(res.endTime / 24 / 3600) +
+                        '天' +
+                        this.pad(parseInt(res.endTime / 3600) % 24, 2) +
+                        '时' +
+                        this.pad(parseInt(res.endTime / 60) % 60, 2) +
+                        '分';
+                }
+                this.info = res;
+            });
+        },
+        getList(isFirst = false) {
+            if (isFirst) {
+                this.page = 0;
+                this.quotedPriceList = [];
+            }
+            this.loading = true;
+            this.finished = false;
+            this.empty = false;
+            let query = {
+                type: 'DOMAIN'
+            };
+            let sort = 'likes,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.quotedPriceList = [];
+                        this.page = 0;
+                    }
+                    this.quotedPriceList = [...this.quotedPriceList, ...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>
+.product {
+    background: #0f0f0f;
+}
+
+.product_top_one {
+    height: 50px;
+    font-size: 16px;
+    font-weight: bold;
+    color: #ffffff;
+    line-height: 50px;
+    text-align: center;
+    position: relative;
+
+    .product_top_one_img {
+        width: 24px;
+        height: 24px;
+        position: absolute;
+        top: 13px;
+        left: 16px;
+    }
+}
+
+.product_detailed_information {
+    margin-top: 10px;
+    margin-bottom: 20px;
+    padding: 0px 16px;
+
+    .product_detailed_information_con {
+        height: 104px;
+        background: #1c1c1c;
+        border-radius: 8px;
+        padding: 12px;
+        box-sizing: border-box;
+        display: flex;
+
+        .product_detailed_information_con_right {
+            margin-left: 8px;
+
+            .product_detailed_information_con_right_con {
+                display: flex;
+                align-items: center;
+                margin-bottom: 13px;
+
+                .name_img {
+                    width: 10px;
+                    height: 38px;
+                    margin-right: 8px;
+                }
+
+                .product_left_name {
+                    width: calc(55vw);
+                    font-size: 14px;
+                    font-weight: bold;
+                    color: #ffffff;
+                    line-height: 24px;
+                    margin-bottom: 2px;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                }
+
+                .product_left_time {
+                    max-width: 114px;
+                    height: 17px;
+                    background: #232323;
+                    border-radius: 2px;
+                    text-align: center;
+                    font-size: 10px;
+                    font-weight: 400;
+                    color: #939599;
+                    line-height: 17px;
+                }
+            }
+
+            .product_detailed_information_con_right_price {
+                font-size: 14px;
+                font-weight: bold;
+                color: #ffffff;
+                line-height: 24px;
+                margin-left: 2px;
+            }
+        }
+    }
+}
+
+.number_of_quotations {
+    padding-left: 16px;
+    font-size: 16px;
+    font-weight: bold;
+    color: #ffffff;
+    line-height: 24px;
+    margin-bottom: 16px;
+}
+
+.search {
+    padding-bottom: 50px;
+    margin-top: 9px;
+    z-index: 1;
+    background: #0f0f0f;
+    position: relative;
+}
+
+.box-list {
+    padding: 0 16px;
+
+    .box-list_con {
+        height: 68px;
+        background: #1c1c1c;
+        border-radius: 8px;
+        padding: 14px 12px 10px;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 16px;
+
+        .box-list_con_left {
+            display: flex;
+
+            .user-img {
+                margin-right: 10px;
+            }
+
+            .box-list_con_left_name {
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+            }
+
+            .box-list_con_left_time {
+                font-size: 10px;
+                font-weight: 400;
+                color: #939599;
+                line-height: 17px;
+            }
+        }
+
+        .box-list_con_right_fu {
+            display: flex;
+            justify-content: end;
+        }
+
+        .box-list_con_right_con {
+            display: flex;
+            padding-top: 5px;
+
+            .box-list_con_right_img {
+                width: 8px;
+                height: 8px;
+                padding-top: 5px;
+            }
+
+            .box-list_con_right_con_price {
+                font-size: 20px;
+                font-family: OSP-DIN, OSP;
+                font-weight: normal;
+                color: #ffffff;
+                line-height: 14px;
+            }
+        }
+
+        .box-list_con_right_con_btn {
+            margin-top: 10px;
+            font-size: 10px;
+            font-weight: 400;
+            color: #939599;
+            line-height: 17px;
+        }
+
+        .box-list_con_right_con_btns {
+            margin-top: 8px;
+            width: 38px;
+            height: 22px;
+            background: #00fe1e;
+            border-radius: 4px;
+            font-size: 12px;
+            font-weight: bold;
+            color: #000000;
+            line-height: 22px;
+            text-align: center;
+        }
+    }
+}
+</style>

src/views/user/ShoppingCart.vue

@@ -0,0 +1,653 @@
+<template>
+    <div class="shopping_cart">
+        <van-sticky>
+            <div class="padding-safe-top">
+                <div class="shopping_cart_top_one">
+                    <img
+                        :src="require('@assets/icon-back@3x.png')"
+                        alt=""
+                        class="shopping_cart_top_one_img"
+                        @click="$router.back()"
+                    />
+                    购物车
+                    <div class="shopping_cart_top_one_btn" v-if="!showDelete" @click="showDelete = true">管理</div>
+                    <div class="shopping_cart_top_one_btns" v-else @click="accomplish">完成</div>
+                </div>
+                <div class="shopping_cart_top_two">
+                    <div
+                        class="shopping_cart_top_two_con"
+                        :class="{ active: active === 'ALL' }"
+                        @click="changeActive('ALL')"
+                    >
+                        全部(10)
+                        <div class="shopping_cart_top_two_con_one" v-if="active == 'ALL'"></div>
+                    </div>
+                    <div
+                        class="shopping_cart_top_two_con"
+                        :class="{ active: active === 'SELLOUT' }"
+                        @click="changeActive('SELLOUT')"
+                    >
+                        售罄(2)
+                        <div class="shopping_cart_top_two_con_two" v-if="active == 'SELLOUT'"></div>
+                    </div>
+                    <div class="shopping_cart_top_two_con" @click="cartExplain">
+                        <img
+                            :src="require('@assets/icon-shuoming@3x.png')"
+                            alt=""
+                            class="shopping_cart_top_two_con_img"
+                        />
+                        <div>说明</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-list
+                style="padding-bottom: 100px"
+                class="box-list"
+                v-model:loading="loading"
+                :finished="finished"
+                finished-text=""
+                @load="getList"
+            >
+                <div class="box-list_con" v-for="(item, index) in collectionList" :key="index" @click="settle(index)">
+                    <img :src="item.check ? select : unchecked" alt="" class="box-list_con_check" />
+                    <van-image width="80" height="80" :src="item.img" fit="contain" radius="8" />
+                    <div v-if="item.type == 'DOMAIN'" class="box-list_con_right">
+                        <div class="box-list_con_right_top">
+                            <img :src="require('@assets/png-da-zi@3x.png')" alt="" class="box-list_con_right_top_img" />
+                            <div class="box-list_con_right_top_title">
+                                <div
+                                    class="box-list_con_right_top_title_name"
+                                    :class="active == 'SELLOUT' ? 'box-list_con_right_top_title_names' : ''"
+                                >
+                                    {{ item.name }}
+                                </div>
+                                <div class="box-list_con_right_top_title_time">剩余时长&nbsp;{{ item.endTime }}</div>
+                            </div>
+                        </div>
+                        <div class="box-list_con_right_bottom" v-if="active == 'ALL'">
+                            <img
+                                :src="require('@assets/icon_jiage@3x (4).png')"
+                                alt=""
+                                class="box-list_con_right_bottom_price_img"
+                            />
+                            <div class="box-list_con_right_bottom_price">{{ item.price }}</div>
+                        </div>
+                        <div class="box-list_con_right_bottom_noBuy" v-else>藏品已售罄不能购买</div>
+                    </div>
+                    <div v-else class="box-list_con_right_two">
+                        <div
+                            class="box-list_con_right_two_name"
+                            :class="active == 'SELLOUT' ? 'box-list_con_right_two_names' : ''"
+                        >
+                            {{ item.name }}
+                        </div>
+                        <div class="box-list_con_right_two_information">
+                            <van-image width="14" height="14" :src="item.myImg" fit="cover" radius="100" />
+                            <div class="box-list_con_right_two_information_name">{{ item.myName }}</div>
+                        </div>
+                        <div class="box-list_con_right_bottom" v-if="active == 'ALL'">
+                            <img
+                                :src="require('@assets/icon_jiage@3x (4).png')"
+                                alt=""
+                                class="box-list_con_right_bottom_price_img"
+                            />
+                            <div class="box-list_con_right_bottom_price">{{ item.price }}</div>
+                        </div>
+                        <div class="box-list_con_right_bottom_noBuy" v-else>藏品已售罄不能购买</div>
+                    </div>
+                </div>
+                <van-empty
+                    :image="require('@assets/empty_img_asset_dark.png')"
+                    v-if="empty"
+                    description="没有任何藏品哦~"
+                />
+            </van-list>
+        </van-pull-refresh>
+        <!-- <div class="box-list">
+
+        </div> -->
+        <div class="shopping_cart_btn van-safe-area-bottom" v-if="active == 'ALL' && showDelete == false">
+            <div class="shopping_cart_btn_left" @click="checkAll">
+                <img :src="checkAllStatus ? select : unchecked" alt="" class="shopping_cart_btn_left_img" />
+                <div>全选</div>
+            </div>
+            <div class="shopping_cart_btn_right">
+                <div class="shopping_cart_btn_right_one">合计</div>
+                <div class="shopping_cart_btn_right_two">
+                    <img
+                        :src="require('@assets/icon_jiage@3x (3).png')"
+                        alt=""
+                        class="shopping_cart_btn_right_two_img"
+                    />
+                    <div>{{ price }}</div>
+                </div>
+                <div class="shopping_cart_btn_right_three" @click="settleAccounts">
+                    结算<span v-if="totalSettlement != 0">({{ totalSettlement }})</span>
+                </div>
+            </div>
+        </div>
+        <div class="shopping_cart_btn van-safe-area-bottom" v-else-if="showDelete == true">
+            <div class="shopping_cart_btn_left" @click="checkAll">
+                <img :src="checkAllStatus ? select : unchecked" alt="" class="shopping_cart_btn_left_img" />
+                <div>全选</div>
+            </div>
+            <div class="shopping_cart_btn_right">
+                <div class="shopping_cart_btn_right_three" @click="del">
+                    删除<span v-if="totalSettlement != 0">({{ totalSettlement }})</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import { Dialog } from 'vant';
+export default {
+    data() {
+        return {
+            active: 'ALL',
+            loading: false,
+            finished: false,
+            select: require('@assets/icon_gouxuan_pre@3x (2).png'),
+            unchecked: require('@assets/icon_gouxuan_huise@3x (1).png'),
+            collectionList: [
+                // {
+                //     type: 'DOMAIN',
+                //     check: false,
+                //     img: require('@assets/1091676369057_.pic@3x.png'),
+                //     name: 'R.nft',
+                //     endTime: '188天7时13分',
+                //     price: 1000
+                // },
+                // {
+                //     type: 'Collection',
+                //     check: false,
+                //     img: require('@assets/10561663573720_.pic_hd4@3x.png'),
+                //     myImg: require('@assets/1091676369057_.pic@3x.png'),
+                //     name: '游戏《百分之一》精美的礼物',
+                //     myName: '持有者名称',
+                //     endTime: '188天7时13分',
+                //     price: 199
+                // },
+            ],
+            price: 0,
+            checkAllStatus: false,
+            totalSettlement: 0,
+            page: 0,
+            showDelete: false
+        };
+    },
+    mounted() {
+        // this.getList()
+    },
+    methods: {
+        changeActive(title) {
+            this.active = title;
+            this.showDelete = false;
+            this.checkAllStatus = false;
+            this.price = 0;
+            this.totalSettlement = 0;
+            this.getList(true);
+        },
+        accomplish() {
+            this.showDelete = false;
+            if (this.active == 'SELLOUT') {
+                this.checkAllStatus = false;
+                this.totalSettlement = 0;
+                this.getList(true);
+            }
+        },
+        cartExplain() {},
+        checkAll() {
+            this.checkAllStatus = !this.checkAllStatus;
+            if (this.checkAllStatus) {
+                this.price = 0;
+                this.totalSettlement = this.collectionList.length;
+                this.collectionList.forEach(item => {
+                    item.check = true;
+                    this.price += Number(item.price);
+                });
+                this.price = this.price.toFixed(1);
+            } else {
+                this.price = 0;
+                this.totalSettlement = 0;
+                this.collectionList.forEach(item => {
+                    item.check = false;
+                });
+            }
+        },
+        settle(index) {
+            if (this.active == 'SELLOUT' && !this.showDelete) {
+                return;
+            }
+            this.collectionList[index].check = !this.collectionList[index].check;
+            let newCollectionList = this.collectionList.filter(item => item.check == true);
+            if (this.collectionList.length == newCollectionList.length) {
+                this.checkAllStatus = true;
+            } else {
+                this.checkAllStatus = false;
+            }
+            this.$nextTick(() => {
+                this.totalSettlement = newCollectionList.length;
+                this.price = 0;
+                console.log('dcghcfgfc', newCollectionList);
+                newCollectionList.forEach(item => {
+                    this.price += Number(item.price);
+                });
+                this.price = this.price.toFixed(1);
+                // for (let i = 0; i <= newCollectionList.length; i++) {
+                //     this.price += Number(newCollectionList[i].price)
+                // }
+            });
+        },
+        settleAccounts() {
+            if (this.totalSettlement == 0) {
+                return;
+            } else {
+                this.$router.push('/shoppingCartSubmit');
+                // Dialog.confirm({
+                //     title: '有藏品已售罄,无法购买！',
+                //     confirmButtonText: '一键删除',
+                //     cancelButtonText: '再想想',
+                //     confirmButtonColor: '#FF4F50',
+                //     cancelButtonColor: '#626366'
+                // }).then(() => {
+
+                // }).catch(() => { })
+            }
+        },
+        del() {
+            if (this.totalSettlement == 0) {
+                return;
+            } else {
+                Dialog.confirm({
+                    title: '确认将这' + this.totalSettlement + '个藏品删除？',
+                    confirmButtonText: '删除',
+                    cancelButtonText: '再想想',
+                    confirmButtonColor: '#FF4F50',
+                    cancelButtonColor: '#626366'
+                })
+                    .then(() => {})
+                    .catch(() => {});
+            }
+        },
+        pad(n, width, z) {
+            z = z || '0';
+            n = n + '';
+            return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
+        },
+        getList(isFirst = false) {
+            if (isFirst) {
+                this.page = 0;
+                this.collectionList = [];
+            }
+            this.loading = true;
+            this.finished = false;
+            this.empty = false;
+            let query = {
+                type: 'DOMAIN'
+            };
+            let sort = 'likes,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.collectionList = [];
+                        this.page = 0;
+                    }
+                    if (this.checkAllStatus) {
+                        let newPrice = Number(this.price);
+                        res.content.forEach(item => {
+                            item.check = true;
+                            newPrice += Number(item.price);
+                        });
+                        this.totalSettlement = this.totalSettlement + res.content.length;
+                        this.price = newPrice.toFixed(1);
+                    } else {
+                        res.content.forEach(item => {
+                            item.check = false;
+                        });
+                    }
+                    this.collectionList = [...this.collectionList, ...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;
+                this.price = 0;
+                this.totalSettlement = 0;
+                this.checkAllStatus = false;
+            });
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+/deep/ .van-dialog__header {
+    padding-top: 24px !important;
+}
+
+.shopping_cart {
+    background: #000000;
+
+    .shopping_cart_top_one {
+        height: 50px;
+        position: relative;
+        font-size: 16px;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 50px;
+        text-align: center;
+        background: #161414;
+
+        .shopping_cart_top_one_img {
+            width: 24px;
+            height: 24px;
+            position: absolute;
+            top: 13px;
+            left: 16px;
+        }
+
+        .shopping_cart_top_one_btn {
+            font-size: 14px;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 24px;
+            position: absolute;
+            top: 13px;
+            right: 16px;
+        }
+
+        .shopping_cart_top_one_btns {
+            font-size: 14px;
+            font-weight: 400;
+            color: #00fe1e;
+            line-height: 24px;
+            position: absolute;
+            top: 13px;
+            right: 16px;
+        }
+    }
+
+    .shopping_cart_top_two {
+        height: 50px;
+        background: #161414;
+        padding: 0px 16px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .shopping_cart_top_two_con {
+            display: flex;
+            align-items: center;
+            font-size: 14px;
+            font-weight: 400;
+            color: #939599;
+            position: relative;
+        }
+
+        .shopping_cart_top_two_con_one {
+            width: 28px;
+            height: 2px;
+            background: #00fe1e;
+            border-radius: 2px;
+            position: absolute;
+            left: 12px;
+            bottom: -5px;
+        }
+
+        .shopping_cart_top_two_con_two {
+            width: 28px;
+            height: 2px;
+            background: #00fe1e;
+            border-radius: 2px;
+            position: absolute;
+            left: 9px;
+            bottom: -5px;
+        }
+
+        .shopping_cart_top_two_con_img {
+            width: 18px;
+            height: 18px;
+            margin-right: 4px;
+        }
+
+        .active {
+            font-weight: 500;
+            color: #00fe1e;
+        }
+    }
+
+    .search {
+        padding-bottom: 50px;
+        margin-top: 16px;
+        z-index: 1;
+        position: relative;
+    }
+
+    .box-list {
+        width: 100%;
+        padding: 0px 16px;
+        box-sizing: border-box;
+        padding-bottom: 50px;
+        margin-top: 16px;
+
+        .box-list_con {
+            padding: 10px;
+            box-sizing: border-box;
+            background: #161414;
+            border-radius: 8px;
+            margin-bottom: 16px;
+            display: flex;
+            align-items: center;
+
+            .box-list_con_check {
+                width: 24px;
+                height: 24px;
+                margin-right: 10px;
+            }
+
+            .box-list_con_right {
+                margin-left: 10px;
+
+                .box-list_con_right_top {
+                    display: flex;
+                    padding-top: 4px;
+                    align-items: center;
+                    margin-bottom: 15px;
+
+                    .box-list_con_right_top_img {
+                        width: 10px;
+                        height: 38px;
+                        margin-right: 6px;
+                    }
+
+                    .box-list_con_right_top_title_name {
+                        width: calc(47vw);
+                        font-size: 14px;
+                        font-weight: bold;
+                        color: #ffffff;
+                        line-height: 24px;
+                        margin-bottom: 2px;
+                        overflow: hidden;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
+                    }
+
+                    .box-list_con_right_top_title_names {
+                        color: #939599;
+                    }
+
+                    .box-list_con_right_top_title_time {
+                        max-width: 114px;
+                        height: 17px;
+                        background: #1e1e1e;
+                        border-radius: 2px;
+                        text-align: center;
+                        font-size: 10px;
+                        font-weight: 400;
+                        color: #939599;
+                        line-height: 17px;
+                    }
+                }
+            }
+
+            .box-list_con_right_two {
+                margin-left: 10px;
+
+                .box-list_con_right_two_name {
+                    width: calc(52vw);
+                    font-size: 14px;
+                    font-weight: bold;
+                    color: #ffffff;
+                    line-height: 24px;
+                    margin-bottom: 4px;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                }
+
+                .box-list_con_right_two_names {
+                    color: #939599;
+                }
+
+                .box-list_con_right_two_information {
+                    display: flex;
+                    align-items: center;
+                    margin-bottom: 13px;
+
+                    .box-list_con_right_two_information_name {
+                        margin-left: 3px;
+                        font-size: 10px;
+                        font-weight: 400;
+                        color: #939599;
+                        line-height: 17px;
+                    }
+                }
+            }
+
+            .box-list_con_right_bottom {
+                display: flex;
+
+                .box-list_con_right_bottom_price_img {
+                    width: 8px;
+                    height: 8px;
+                    margin-right: 1px;
+                    padding-top: 5px;
+                }
+
+                .box-list_con_right_bottom_price {
+                    font-size: 20px;
+                    font-family: OSP-DIN, OSP;
+                    font-weight: normal;
+                    color: #00fe1e;
+                    line-height: 14px;
+                }
+            }
+
+            .box-list_con_right_bottom_noBuy {
+                font-size: 10px;
+                font-weight: 400;
+                color: #939599;
+                line-height: 17px;
+            }
+        }
+    }
+
+    .shopping_cart_btn {
+        width: 100%;
+        position: fixed;
+        bottom: 0;
+        height: 56px;
+        padding: 0px 16px;
+        box-sizing: border-box;
+        background: #161414;
+        box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.04);
+        display: flex;
+        justify-content: space-between;
+        z-index: 99;
+
+        .shopping_cart_btn_left {
+            display: flex;
+            align-items: center;
+            font-size: 14px;
+            color: #939599;
+
+            .shopping_cart_btn_left_img {
+                width: 24px;
+                height: 24px;
+                margin-right: 2px;
+            }
+        }
+
+        .shopping_cart_btn_right {
+            display: flex;
+            align-items: center;
+
+            .shopping_cart_btn_right_one {
+                font-size: 14px;
+                font-weight: bold;
+                color: #ffffff;
+                margin-right: 5px;
+            }
+
+            .shopping_cart_btn_right_two {
+                font-size: 32px;
+                font-family: OSP-DIN, OSP;
+                font-weight: normal;
+                color: #00fe1e;
+                display: flex;
+                margin-right: 11px;
+
+                .shopping_cart_btn_right_two_img {
+                    width: 11px;
+                    height: 11px;
+                    padding-top: 16px;
+                }
+            }
+
+            .shopping_cart_btn_right_three {
+                width: 120px;
+                height: 38px;
+                background: #00fe1e;
+                border-radius: 22px;
+                font-size: 16px;
+                font-weight: bold;
+                color: #0b0b0b;
+                line-height: 38px;
+                text-align: center;
+
+                span {
+                    font-weight: 400;
+                    color: rgba(0, 0, 0, 0.8);
+                }
+            }
+        }
+    }
+}
+</style>

src/views/user/ShoppingCartSubmit.vue

@@ -0,0 +1,454 @@
+<template>
+    <div class="page">
+        <div class="page_top">
+            <div class="page_top_con" v-for="(item, index) in collectionList" :key="index">
+                <div class="pageTitle">{{ item.myName }}</div>
+                <div class="collection_information">
+                    <!-- <van-image width="80" height="80" :radius="6" :src="getImg(changeImgs(info.pic))" fit="cover" /> -->
+                    <van-image width="80" height="80" :radius="8" :src="item.img" fit="cover" />
+                    <div class="collection_information_right">
+                        <div class="collection_information_right_name">{{ item.name }}</div>
+                        <div class="collection_information_right_no" v-if="item.type == 'DOMAIN'">
+                            剩余时长：{{ item.endTime }}
+                        </div>
+                        <div class="collection_information_right_no" v-else>{{ item.number }}</div>
+                        <div class="collection_information_right_price_one">¥{{ item.price }}</div>
+                    </div>
+                </div>
+                <div class="collection_price">
+                    <div class="collection_price_left">作品费用</div>
+                    <div class="collection_price_right">¥{{ item.price }}</div>
+                </div>
+                <div class="collection_price">
+                    <div class="collection_price_left">GAS费用</div>
+                    <div class="collection_price_right">¥1</div>
+                </div>
+            </div>
+        </div>
+        <pay-method-pick v-model="payType" cart></pay-method-pick>
+        <div class="page_btn van-safe-area-bottom">
+            <div class="page_btn_left">
+                <div class="page_btn_left_amount">总计</div>
+                <img :src="require('@assets/icon_jiagecat@3x.png')" alt="" class="page_btn_left_img" />
+                <div class="page_btn_left_price">2000</div>
+            </div>
+            <div class="page_btn_right" @click="submit">
+                <div class="page_btn_right_one">立即支付</div>
+                <div class="page_btn_right_two">共2件</div>
+            </div>
+        </div>
+        <van-number-keyboard v-model="tradeCode" :show="showKeyboard" @blur="showKeyboard = false" />
+        <van-dialog
+            v-model:show="showPwdDialog"
+            title="请输入支付密码"
+            confirmButtonText="立即支付"
+            show-cancel-button
+            confirmButtonColor="#3ab200"
+            @cancel="((showPwdDialog = false), (payName = '1')), $toast.clear()"
+            @confirm="pay"
+        >
+            <div style="padding: 20px 0">
+                <van-password-input
+                    :value="tradeCode"
+                    :focused="showKeyboard"
+                    @focus="showKeyboard = true"
+                    gutter="4px"
+                />
+            </div>
+        </van-dialog>
+    </div>
+</template>
+<script>
+import PayMethodPick from '../../components/PayMethodPick';
+import { mapState } from 'vuex';
+import resolveUrl from 'resolve-url';
+export default {
+    components: { PayMethodPick },
+    data() {
+        return {
+            payType: null,
+            tradeCode: '',
+            showKeyboard: false,
+            showPwdDialog: false,
+            id: '',
+            payName: '',
+            collectionList: [
+                {
+                    type: 'DOMAIN',
+                    check: false,
+                    img: require('@assets/1091676369057_.pic@3x.png'),
+                    name: 'R.nft',
+                    endTime: '188天7时13分',
+                    myName: '持有者名称',
+                    price: 1000
+                },
+                {
+                    type: 'Collection',
+                    check: false,
+                    img: require('@assets/10561663573720_.pic_hd4@3x.png'),
+                    myImg: require('@assets/1091676369057_.pic@3x.png'),
+                    name: '游戏《百分之一》精美的礼物',
+                    myName: '持有者名称',
+                    endTime: '188天7时13分',
+                    price: 199,
+                    number: 7
+                }
+            ]
+        };
+    },
+    methods: {
+        getOrder(next = false) {
+            this.$http.get('/domainOrder/get/' + this.id).then(res => {
+                this.info = res;
+                if (this.timer) {
+                    clearTimeout(this.timer);
+                }
+                if (this.timerNum >= 20) {
+                    this.$toast.clear();
+                    this.$dialog
+                        .confirm({
+                            title: '提示',
+                            message: '订单是否已经支付',
+                            confirmButtonText: '已经支付',
+                            cancelButtonText: '未支付'
+                        })
+                        .then(() => {
+                            this.$dialog
+                                .alert({
+                                    title: '正在排队中...',
+                                    message: '您的铸造订单正在排队，下单的藏品后续会直接出现在藏品室哦～'
+                                })
+                                .then(res => {
+                                    this.$router.back();
+                                });
+                        })
+                        .catch(e => {
+                            this.$dialog
+                                .confirm({
+                                    title: '提示',
+                                    message: '订单未支付是否重新支付？',
+                                    confirmButtonText: '重新支付',
+                                    cancelButtonText: '取消订单'
+                                })
+                                .then(() => {
+                                    this.timerNum = 0;
+                                    this.pay(false);
+                                })
+                                .catch(() => {
+                                    this.$router.back();
+                                });
+                        });
+                } else if (
+                    res.orderStatus === 'PROCESSING' ||
+                    res.orderStatus === 'FINISH' ||
+                    res.orderStatus === 'CANCELLED' ||
+                    res.orderStatus === 'SUCCESS' ||
+                    res.orderStatus === 'PENDING'
+                ) {
+                    this.$toast.clear();
+                    this.$dialog
+                        .alert({
+                            title: '提示',
+                            message:
+                                res.orderStatus === 'CANCELLED'
+                                    ? '购买失败,点击重新下单'
+                                    : '恭喜购买成功，请到藏品室查看'
+                        })
+                        .then(() => {
+                            if (res.orderStatus === 'PENDING') {
+                                this.$router.back();
+                            } else {
+                                this.$router.replace('/domainname');
+                            }
+                        });
+                } else if (next) {
+                    this.timerNum += 1;
+                    this.timer = setTimeout(() => {
+                        this.getOrder(next);
+                    }, 1500);
+                }
+            });
+        },
+        // createOrder() {
+        //     console.log("dfgdfdffd")
+        //     return new Promise((resolve, reject) => {
+        //         let checkOrder = () => {
+        //             this.$http
+        //                 .post('/domainOrder/create', {
+        //                     userId: this.userInfo.id,
+        //                     domain: this.domain,
+        //                     price: this.price,
+        //                     year: this.year
+        //                 })
+        //                 .then(res => {
+        //                     if (res) {
+        //                         clearInterval(this.createOrderTimer);
+        //                         this.createOrderTimer = null;
+        //                         resolve(res);
+        //                     }
+        //                 })
+        //                 .catch(e => {
+        //                     clearInterval(this.createOrderTimer);
+        //                     this.createOrderTimer = null;
+        //                     reject(e);
+        //                 });
+        //         };
+        //         setTimeout(checkOrder, 500);
+        //         this.createOrderTimer = setInterval(checkOrder, 2000);
+        //     });
+        // },
+        submit() {
+            if (this.payType == 'BALANCE') {
+                this.showPwdDialog = true;
+            }
+            if (this.payName == '1') {
+                if (this.payType != 'BALANCE') {
+                    this.pay();
+                }
+            } else {
+                this.createOrder()
+                    .then(res => {
+                        this.id = res.id;
+                        if (this.payType != 'BALANCE') {
+                            this.pay();
+                        }
+                    })
+                    .catch(e => {
+                        if (e) {
+                            this.showPwdDialog = false;
+                            this.$toast.clear();
+                            this.$dialog
+                                .alert({
+                                    title: '提示',
+                                    message: this.backReson(e.error)
+                                })
+                                .then(res => {
+                                    this.$router.back();
+                                });
+                        }
+                    });
+            }
+        },
+        pay() {
+            if (this.payType == 'BALANCE') {
+                this.$http
+                    .post('/payOrder/v2/domain/balance', {
+                        id: this.id,
+                        tradeCode: this.tradeCode
+                    })
+                    .then(res => {
+                        this.$toast.success('恭喜购买成功，请到藏品室查看');
+                        setTimeout(() => {
+                            this.$router.replace('/domainname');
+                        }, 1000);
+                    })
+                    .catch(e => {
+                        this.tradeCode = '';
+                        this.$toast(e.error || '购买失败');
+                        this.payName = '1';
+                    });
+            } else if (this.payType == 'ALIPAY') {
+                this.$toast.loading({
+                    message: '支付中',
+                    forbidClick: true
+                });
+                this.$http
+                    .get('/payOrder/v2/domain/ali', { id: this.id })
+                    .then(res => {
+                        this.$toast.clear();
+                        document.location.href = res;
+                        //   this.payUrlScheme = res;
+                    })
+                    .then(() => {
+                        this.getOrder(true);
+                    })
+                    .catch(e => {
+                        this.$toast.clear();
+                        e = e || {};
+                        e.error = e.error || '支付失败';
+                        this.$dialog
+                            .alert({
+                                title: '提示',
+                                message: this.backReson(e.error)
+                            })
+                            .then(res => {
+                                this.$router.back();
+                            });
+                    });
+            } else if (this.payType === 'UNION') {
+                const url = resolveUrl(this.$baseUrl, '/payOrder/v2/domain/sandQuick?id=' + this.id)
+                    .replace('www.raex.vip', 'jump.raex.vip')
+                    .replace('test.raex.vip', 'jumptest.raex.vip')
+                    .replace(/http:\/\/192\.168.*?\//, 'https://jumptest.raex.vip/');
+                console.log(url);
+                document.location.href = url;
+                this.getOrder(true);
+            } else if (this.payType === 'QUICK_BIND') {
+                this.$http
+                    .get('/payOrder/v2/domain/sandQuickBind?id=' + this.id)
+                    .then(res => {
+                        document.location.href = res;
+                        this.getOrder(true);
+                    })
+                    .catch(e => {
+                        this.$toast.clear();
+                        e = e || {};
+                        e.error = e.error || '支付失败';
+                        this.$dialog
+                            .alert({
+                                title: '提示',
+                                message: this.backReson(e.error)
+                            })
+                            .then(res => {
+                                this.$router.back();
+                            });
+                    });
+            }
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+.page {
+    background-color: @bg3;
+    padding-bottom: 170px;
+
+    .page_top_con {
+        padding: 10px 16px 13px;
+        box-sizing: border-box;
+        background: #ffffff;
+        margin-bottom: 9px;
+
+        .pageTitle {
+            font-size: 14px;
+            font-weight: 400;
+            color: #000000;
+            line-height: 24px;
+            margin-bottom: 8px;
+        }
+
+        .collection_information {
+            display: flex;
+            margin-bottom: 17px;
+
+            .collection_information_right {
+                margin-left: 10px;
+
+                .collection_information_right_name {
+                    font-size: 14px;
+                    font-weight: bold;
+                    color: #000000;
+                    line-height: 24px;
+                    margin-bottom: 2px;
+                }
+
+                .collection_information_right_no {
+                    font-size: 12px;
+                    font-weight: 400;
+                    color: #939599;
+                    line-height: 24px;
+                    margin-bottom: 6px;
+                }
+
+                .collection_information_right_price_one {
+                    font-size: 14px;
+                    font-weight: bold;
+                    color: #000000;
+                    line-height: 24px;
+                }
+            }
+        }
+
+        .collection_price {
+            height: 49px;
+            display: flex;
+            align-items: center;
+            border-top: 1px solid #f5f7fa;
+            justify-content: space-between;
+
+            .collection_price_left {
+                font-size: 14px;
+                font-weight: 400;
+                color: #000000;
+            }
+
+            .collection_price_right {
+                font-size: 14px;
+                font-weight: 500;
+                color: #3ab200;
+            }
+        }
+    }
+
+    .van-number-keyboard {
+        z-index: 9999;
+    }
+
+    :deep(.van-password-input__item) {
+        background: @bg3;
+    }
+}
+
+.page_btn {
+    width: 100%;
+    height: 56px;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0px 16px;
+    box-sizing: border-box;
+    background: #ffffff;
+
+    .page_btn_left {
+        display: flex;
+
+        .page_btn_left_amount {
+            font-size: 14px;
+            font-weight: 400;
+            color: #939599;
+            line-height: 24px;
+            margin-right: 6px;
+            padding-top: 3px;
+        }
+
+        .page_btn_left_img {
+            width: 11px;
+            height: 11px;
+            padding-top: 10px;
+        }
+
+        .page_btn_left_price {
+            font-size: 32px;
+            font-family: OSP-DIN, OSP;
+            font-weight: normal;
+            color: #3ab200;
+            line-height: 24px;
+        }
+    }
+
+    .page_btn_right {
+        width: 132px;
+        height: 38px;
+        background: #3ab200;
+        border-radius: 22px;
+        text-align: center;
+
+        .page_btn_right_one {
+            font-size: 16px;
+            font-weight: bold;
+            color: #ffffff;
+            line-height: 24px;
+        }
+
+        .page_btn_right_two {
+            font-size: 10px;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 10px;
+        }
+    }
+}
+</style>