样式

src/main/nine-space/.env.development

@@ -1,4 +1,4 @@
-VUE_APP_BASE_URL=http://localhost:8080/
+VUE_APP_BASE_URL=https://nfttest.9space.vip/
 NODE_ENV=development
 PUBLIC_PATH=/
 ASSETS_PATH=9th

src/main/nine-space/src/components/Post.vue

@@ -22,7 +22,7 @@
                                 <img src="@assets/svgs/jiage.svg" alt="" />
                                 <span>{{ info.price }}</span>
                             </div>
-                            <div class="text1" v-if="info.stock">
+                            <div class="text1" v-if="info.stock && !time">
                                 <span>已售 {{ info.sale }}</span>
                                 <span>剩余 {{ info.stock }}</span>
                             </div>
@@ -39,6 +39,10 @@
 
                         <vue-qrcode :value="url" :options="{ width: 70, margin: 3 }" class="code"></vue-qrcode>
                     </div>
+                    <div class="sold xianliang" v-if="time">
+                        <img src="@assets/shizhong.png" alt="" />
+                        <span>即将开售：{{ time }}</span>
+                    </div>
                 </div>
 
                 <div class="tips">长按图片保存</div>
@@ -57,6 +61,12 @@ import product from '../mixins/product';
 const path = require('path');
 import resolveUrl from 'resolve-url';
 import axios from 'axios';
+import dayjs from 'dayjs';
+import { abs } from 'mathjs';
+require('dayjs/locale/zh-cn');
+dayjs.locale('zh-cn');
+var isSameOrBefore = require('dayjs/plugin/isSameOrBefore');
+dayjs.extend(isSameOrBefore);
 export default {
     mixins: [product],
     props: {
@@ -102,6 +112,15 @@ export default {
         },
         isBuy() {
             return this.info.stock && this.info.onShelf && this.info.salable;
+        },
+        time() {
+            if (this.info.startTime) {
+                if (dayjs().isSameOrBefore(this.info.startTime)) {
+                    return dayjs(this.info.startTime).format('MM月DD日');
+                }
+            }
+
+            return '';
         }
     },
     components: {
@@ -182,6 +201,7 @@ export default {
     background: #19191b;
     border-radius: 30px;
     overflow: hidden;
+    position: relative;
 }
 
 .img {
@@ -207,7 +227,7 @@ export default {
 
         .price {
             span {
-                font-size: 32px;
+                font-size: 24px;
                 font-family: OSP-DIN, OSP;
                 color: @prim;
                 line-height: 36px;
@@ -236,11 +256,16 @@ export default {
     border-top: 2px solid #202122;
 
     .minter-content {
+        /deep/.van-image {
+            img {
+                display: block;
+            }
+        }
         .text1 {
             font-size: @font1;
             color: #ffffff;
             line-height: 17px;
-            margin-top: 6px;
+            margin-top: 1px;
         }
         .text2 {
             font-size: @font1;
@@ -305,4 +330,36 @@ export default {
     line-height: 24px;
     padding-top: 11px;
 }
+
+.sold {
+    background-color: #1c1e25;
+    font-size: @font1;
+    color: #939599;
+    padding: 0 17px;
+    border-radius: 13px;
+    line-height: 24px;
+    position: absolute;
+    top: 16px;
+    left: 16px;
+    z-index: 3;
+
+    &.xianliang {
+        position: absolute;
+        top: 16px;
+        left: 16px;
+        font-size: @font1;
+        color: @prim;
+        display: flex;
+        align-items: center;
+        // border-radius: 13px !important;
+        z-index: 4;
+        padding: 0 10px !important;
+
+        img {
+            width: 18px;
+            height: 18px;
+            margin-right: 3px;
+        }
+    }
+}
 </style>

src/main/nine-space/src/components/creator/CreatorInfo.vue

@@ -20,7 +20,7 @@
 
         <div class="content">
             <div class="text1 van-ellipsis">{{ info.nickname }}</div>
-            <div class="text2 van-multi-ellipsis--l2">
+            <div class="text2 van-ellipsis">
                 {{ info.intro }}
             </div>
             <div class="flex1"></div>
@@ -118,12 +118,15 @@ export default {
     display: flex;
     padding: 22px 16px;
     position: relative;
+    align-items: center;
 
     .content {
         flex-grow: 1;
         padding-left: 12px;
         display: flex;
         flex-direction: column;
+        overflow: hidden;
+        height: 80px;
 
         .text1 {
             font-size: @font2;
@@ -135,7 +138,7 @@ export default {
             font-size: @font2;
             color: @text3;
             line-height: 20px;
-            margin: 6px 0;
+            // margin: 6px 0;
         }
 
         .text3 {
@@ -203,7 +206,7 @@ export default {
         height: 90px;
         display: block;
         left: 12px;
-        top: 10px;
+        top: 15px;
     }
 }
 

src/main/nine-space/src/components/order/OrderInfo.vue

@@ -26,13 +26,14 @@
             </div>
         </div>
         <div class="total-price">
+            <span class="time flex1">{{ info.payTime }}</span>
             <span>实际支付</span>
             <span>¥{{ info.totalPrice }}</span>
         </div>
-
+        <!-- 
         <div class="btns">
             <van-button color="#939599" @click.prevent="del" plain size="mini" round> 删除订单 </van-button>
-        </div>
+        </div> -->
     </router-link>
 </template>
 
@@ -173,6 +174,7 @@ export default {
     color: #ffffff;
     line-height: 60px;
     text-align: right;
+    .flex();
     span {
         &:last-child {
             color: @prim;
@@ -180,6 +182,13 @@ export default {
             font-size: 16px;
         }
     }
+
+    .time {
+        text-align: left;
+        color: @text3;
+        font-size: @font2;
+        font-weight: normal;
+    }
 }
 .btns {
     border-top: 1px solid #202122;

src/main/nine-space/src/components/product/productLarge.vue

@@ -18,10 +18,16 @@
 
         <div class="content">
             <div class="name van-ellipsis">{{ info.name }}</div>
-            <div class="sales">
-                <span>限量</span>
-                <span>{{ info.total }}份</span>
+            <div class="sales-list">
+                <div class="sales">
+                    <span class="sales-fir">限量</span>
+                    <span>{{ info.total }}份</span>
+                </div>
+                <div class="sales" v-if="info.category">
+                    <span>{{ info.category }}</span>
+                </div>
             </div>
+
             <div class="bottom">
                 <div class="miner">
                     <van-image width="18" height="18" radius="18" :src="getImg(info.minterAvatar)" fit="cover" />
@@ -38,7 +44,7 @@
 
         <div class="sold xianliang" v-if="time">
             <img src="@assets/shizhong.png" alt="" />
-            <span>即将开售：{{ time }}</span>
+            <span>即将开售：{{ startTime || time }}</span>
         </div>
 
         <div class="sold" v-if="isSold">已售馨</div>
@@ -53,6 +59,8 @@ import product from '../../mixins/product';
 import dayjs from 'dayjs';
 var isSameOrBefore = require('dayjs/plugin/isSameOrBefore');
 dayjs.extend(isSameOrBefore);
+var duration = require('dayjs/plugin/duration');
+dayjs.extend(duration);
 export default {
     mixins: [product],
     props: {
@@ -74,6 +82,17 @@ export default {
             return '';
         }
     },
+    mounted() {
+        if (this.info.startTime) {
+            var x = dayjs(this.info.startTime);
+            var y = dayjs();
+            let d = dayjs.duration(x.diff(y));
+            let day = parseInt(d.asDays());
+            if (day <= 0) {
+                this.getTime(this.info.startTime);
+            }
+        }
+    },
     methods: {
         likeProduct() {
             if (!this.info.liked) {
@@ -152,28 +171,32 @@ export default {
             line-height: 24px;
         }
 
+        .sales-list {
+            margin-top: 8px;
+            .flex();
+        }
+
         .sales {
             overflow: hidden;
             font-size: @font1;
-            margin-top: 8px;
+            border-radius: 4px;
 
             span {
                 padding: 0 10px;
                 line-height: 20px;
                 height: 20px;
                 display: inline-block;
-                &:first-child {
+                &.sales-fir {
                     background: @prim;
                     color: @bg;
-                    border-radius: 4px 0 0 4px;
-                }
-                &:last-child {
-                    background-color: #27272b;
-                    color: @prim;
-                    border-radius: 0 4px 4px 0;
                 }
+                background-color: #27272b;
+                color: @prim;
             }
         }
+        .sales + .sales {
+            margin-left: 14px;
+        }
 
         .bottom {
             display: flex;
@@ -225,7 +248,7 @@ export default {
     color: #fff;
 }
 .sold {
-    background-color: #19191b80;
+    background-color: #1C1E25;
     font-size: @font1;
     color: #939599;
     padding: 0 17px;

src/main/nine-space/src/components/product/productSmall.vue

@@ -2,14 +2,14 @@
     <div class="product" @click="goNext(info)">
         <van-image width="100%" height="140px" :radius="30" :src="getImg(info.pic)" fit="cover" />
 
-        <div class="content">
+        <!-- <div class="content">
             <div class="name van-ellipsis">
                 {{ info.name }}
             </div>
             <div class="text van-ellipsis">
                 {{ info.remark }}
             </div>
-        </div>
+        </div> -->
     </div>
 </template>
 

src/main/nine-space/src/mixins/product.js

@@ -1,4 +1,5 @@
 import dayjs from 'dayjs';
+import { abs } from 'mathjs';
 require('dayjs/locale/zh-cn');
 dayjs.locale('zh-cn');
 var relativeTime = require('dayjs/plugin/relativeTime');
@@ -85,7 +86,7 @@ export default {
             let d = dayjs.duration(x.diff(y));
             let day = parseInt(d.asDays());
             let str = '';
-            if (day > 0) {
+            if (abs(day) > 0) {
                 str += day + '天 ';
             }
             this.startTime = str + dayjs.duration(x.diff(y)).format('HH:mm:ss');

src/main/nine-space/src/views/Givesubmit.vue

@@ -3,7 +3,7 @@
         <div class="page-top">
             <div class="pageTitle">赠送作品</div>
             <div class="product">
-                <van-image width="74" height="104" :radius="6" :src="getImg(changeImgs(info.pic))" fit="cover" />
+                <van-image width="80" height="80" :radius="6" :src="getImg(changeImgs(info.pic))" fit="cover" />
                 <div class="product-content">
                     <div class="text1 van-multi-ellipsis--l2">
                         {{ info.name }}

src/main/nine-space/src/views/Mine.vue

@@ -32,7 +32,7 @@
                         </div>
                         <div class="text2">
                             <span>
-                                <small>平台编码:</small>
+                                <small>用户ID:</small>
                                 {{ userInfo.id }}
                             </span>
                             <img @click="copy" src="@assets/svgs/copy_icon.svg" alt="" />

src/main/nine-space/src/views/asset/GiveSearch.vue

@@ -128,6 +128,7 @@ export default {
             height: 70px;
             border-radius: 50%;
             margin-right: 12px;
+            flex-shrink: 0;
         }
         .init {
             display: flex;

src/main/nine-space/src/views/creator/Detail.vue

@@ -9,6 +9,13 @@
                 fit="cover"
                 class="top-img"
             />
+            <div
+                class="history"
+                v-if="isMinter"
+                @click="$router.push(`/productList?minterId=${info.id}&source=TRANSFER`)"
+            >
+                历史创作
+            </div>
             <div class="userInfo-content">
                 <div class="userInfo-top">
                     <van-image
@@ -28,7 +35,7 @@
                             <img v-if="info.authStatus === 'SUCCESS'" src="@assets/renzheng_icon_pre.png" alt="" />
                         </div>
                         <div class="text2">
-                            <span>{{ info.id }}</span>
+                            <span>用户ID:{{ info.id }}</span>
                             <img @click="copy" src="@assets/svgs/copy_icon.svg" alt="" />
                         </div>
                     </div>
@@ -72,7 +79,7 @@
         </div>
 
         <van-sticky ref="top" :offset-top="bar.value.show ? 46 : 0">
-            <div class="menu">
+            <div class="menu" v-if="isMinter">
                 <div class="menu-item" @click="changeMenu('DEFAULT')" :class="{ active: type === 'DEFAULT' }">
                     藏品类目
                 </div>
@@ -80,12 +87,21 @@
                     盲盒类目
                 </div>
                 <div class="flex1"></div>
-                <div class="search" @click="$router.push(`/productSearch?minterId=${info.id}`)">
-                    <img src="@assets/svgs/search.svg" alt="" />
+                <van-checkbox @change="getData(true)" class="sala" v-model="salable">仅看在售</van-checkbox>
+                <div
+                    class="search"
+                    @click="
+                        $router.push(
+                            `/productSearch?${isMinter ? 'minterId' : 'ownerId'}=${info.id}&source=${sourceType}`
+                        )
+                    "
+                >
+                    <img src="@assets/icon-sosuo.png" alt="" />
                 </div>
             </div>
 
             <van-tabs
+                v-else
                 v-model:active="salable"
                 :ellipsis="false"
                 @change="getData(true)"
@@ -94,6 +110,7 @@
             >
                 <van-tab title="全部" name=""></van-tab>
                 <van-tab title="寄售" :name="true"></van-tab>
+                <van-tab title="仅展示" :name="false"></van-tab>
             </van-tabs>
         </van-sticky>
         <van-list
@@ -139,6 +156,20 @@ export default {
                 };
             }
             return {};
+        },
+        isMinter() {
+            let authorities = [...(this.info.authorities || [])];
+            let info = authorities.find(item => {
+                return item.name == 'ROLE_MINTER';
+            });
+            return !!info;
+        },
+        sourceType() {
+            if (this.isMinter) {
+                return 'OFFICIAL,USER';
+            } else {
+                return 'TRANSFER';
+            }
         }
     },
     inject: ['bar'],
@@ -161,16 +192,29 @@ export default {
     },
     methods: {
         beforeData() {
-            return {
-                query: {
-                    type: this.type,
-                    salable: this.salable,
-                    minterId: this.info.id || this.$route.query.id,
-                    del: false,
-                    source: 'OFFICIAL,USER'
-                },
-                sort: this.sort
-            };
+            if (this.isMinter) {
+                return {
+                    query: {
+                        type: this.type,
+                        salable: this.salable || '',
+                        minterId: this.info.id || this.$route.query.id,
+                        del: false,
+                        source: this.sourceType
+                    },
+                    sort: this.sort
+                };
+            } else {
+                return {
+                    query: {
+                        type: this.type,
+                        salable: this.salable,
+                        ownerId: this.info.id || this.$route.query.id,
+                        del: false,
+                        source: this.sourceType
+                    },
+                    sort: this.sort
+                };
+            }
         },
         copy() {
             this.$copyText(this.info.id).then(
@@ -233,6 +277,9 @@ export default {
 </script>
 
 <style lang="less" scoped>
+/deep/.van-tab {
+    margin-right: 26px !important;
+}
 .mine {
     background-color: #0f0f0f;
 }
@@ -240,6 +287,19 @@ export default {
     padding-top: 35vw;
     position: relative;
 
+    .history {
+        position: absolute;
+        right: 16px;
+        font-size: @font1;
+        color: #ffffff;
+        line-height: 24px;
+        padding: 0 10px;
+        background-color: fade(@bg, 80%);
+        border-radius: 13px;
+        top: calc(35vw - 34px);
+        z-index: 2;
+    }
+
     .top-img {
         position: absolute;
         top: 0;
@@ -388,9 +448,44 @@ export default {
             font-weight: bold;
         }
     }
+
+    .search {
+        img {
+            width: 24px;
+            height: 24px;
+            display: block;
+        }
+    }
 }
 
 .list {
     padding: 8px 8px 100px;
 }
+
+/deep/.sala {
+    margin-right: 10px;
+    .van-checkbox__icon {
+        color: #fff;
+        transform: scale(0.6);
+
+        .van-icon {
+            border-color: @text3;
+        }
+
+        &.van-checkbox__icon--checked {
+            .van-icon {
+                border-width: 0;
+                .linear();
+                &::before {
+                    color: #fff;
+                }
+            }
+        }
+    }
+    .van-checkbox__label {
+        color: @text3;
+        margin-left: 0px;
+        font-size: @font1;
+    }
+}
 </style>

src/main/nine-space/src/views/product/Detail.vue

@@ -6,10 +6,10 @@
             <div class="info-title">
                 <product-title>{{ info.name }}</product-title>
             </div>
-            <div class="name" v-if="info.salable && startTime">
+            <!-- <div class="name" v-if="info.salable && startTime">
                 <div class="name1">首发抢购倒计时</div>
                 <div class="name2">{{ startTime }}</div>
-            </div>
+            </div> -->
 
             <div class="price-line" v-if="info.salable">
                 <div class="text" v-if="info.number">编号 {{ info.number }}</div>
@@ -73,6 +73,7 @@
                             </template>
                         </van-cell>
                         <van-cell
+                            v-if="info.ownerId !== info.minterId"
                             class="creator"
                             :to="{
                                 path: '/creatorDetail',
@@ -197,15 +198,15 @@
                 </van-collapse-item>
             </van-collapse>
         </div>
-        <div class="btn van-safe-area-bottom" v-if="info.isAppointment">
+        <!-- <div class="btn van-safe-area-bottom">
             <div class="btns">
                 <van-button @click="appointment" type="primary" block round>
                     {{ info.appointment ? '已预约' : '一键预约' }}
                 </van-button>
             </div>
-        </div>
+        </div> -->
 
-        <div class="btn van-safe-area-bottom" ref="btn" v-if="isBuy">
+        <div class="btn van-safe-area-bottom" ref="btn" v-if="info.salable">
             <div class="btn-list">
                 <div class="price-content">
                     <div class="price">
@@ -219,12 +220,19 @@
                 </div>
                 <div class="flex1"></div>
                 <div class="btns">
-                    <van-button type="primary" block round @click="buy">立即购买</van-button>
+                    <van-button class="no-btn" v-if="isAppointment" block round>
+                        <div class="appoint">
+                            <span>即将开售</span>
+                            <span>{{ startTime }}</span>
+                        </div>
+                    </van-button>
+                    <van-button class="no-btn" v-else-if="!info.stock" block round>已售磬</van-button>
+                    <van-button v-else type="primary" block round @click="buy">立即购买</van-button>
                 </div>
             </div>
         </div>
 
-        <div class="btn van-safe-area-bottom" v-if="!info.salable">
+        <div class="btn van-safe-area-bottom" v-else>
             <div class="status-text">仅展示</div>
         </div>
 
@@ -866,15 +874,50 @@ export default {
     bottom: 0;
     left: 0;
     right: 0;
-    background: #202122ee;
+    background-color: @bg;
+    // background: #202122ee;
+
+    // filter: blur(19px);
+    &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        filter: blur(19px);
+        z-index: 1;
+    }
+    .btn-list,
+    .status-text {
+        z-index: 2;
+    }
     .btns {
         width: 132px;
-    }
-    .van-button {
-        background: linear-gradient(135deg, @prim 0%, @warn 100%);
-        color: #333230;
-        font-size: @font2;
-        border-width: 0px;
+        .van-button--primary {
+            background: linear-gradient(135deg, @prim 0%, @warn 100%);
+            color: #333230;
+            font-size: @font2;
+            border-width: 0px;
+        }
+        .no-btn {
+            color: #939599;
+            background-color: #303133;
+            border-width: 0;
+
+            .appoint {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                span {
+                    font-size: @font2;
+
+                    &:last-child {
+                        font-size: @font1;
+                    }
+                }
+            }
+        }
     }
 }
 

src/main/nine-space/src/views/product/List.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="follow">
         <van-sticky ref="top" :offset-top="bar.value.show ? 46 : 0">
-            <div class="top">
+            <div class="top" v-if="!minterId">
                 <div class="name">{{ pageName }}</div>
                 <img src="@assets/icon-sosuo.png" alt="" @click="goSearch" class="search" />
             </div>
@@ -55,6 +55,7 @@ export default {
             sort: 'id,desc',
             type: '',
             source: '',
+            minterId: '',
             selectOptions: [
                 {
                     label: '全部',
@@ -90,6 +91,10 @@ export default {
         if (this.$route.query.source) {
             this.source = this.$route.query.source;
         }
+
+        if (this.$route.query.minterId) {
+            this.minterId = this.$route.query.minterId;
+        }
     },
     methods: {
         beforeData() {
@@ -98,7 +103,8 @@ export default {
                     type: this.type,
                     source: this.source,
                     onShelf: true,
-                    del: false
+                    del: false,
+                    minterId: this.minterId
                 },
                 sort: this.sort
             };