优化售罄

src/components/product/productLarge.vue

@@ -9,12 +9,12 @@
     >
         <div class="shop_list">
             <!-- 未售完 -->
-            <div class="not_sold_out" v-if="time && info.scheduleSale">
+            <div class="not_sold_out" v-if="time">
                 <img :src="require('@assets/presale-con@3x.png')" alt="" class="not_sold_out_img" />
                 <div>即将开售: {{ startTime || time }}</div>
             </div>
             <!-- 已售完 -->
-            <div class="shop_sold_out" v-if="isSolded">
+            <div class="shop_sold_out" v-else-if="isSolded">
                 <img :src="require('@assets/sold-out@3x.png')" alt="" class="shop_sold_out_img" />
                 <div>已售罄</div>
             </div>
@@ -38,9 +38,12 @@
                     <van-image width="16px" height="16px" :radius="16" :src="getImg(info.minterAvatar)" fit="cover" />
                     <div class="shop_bottom_left_name">{{ info.minter }}</div>
                 </div>
-                <div class="shop_bottom_right">
-                    <div class="shop_bottom_right_con">￥</div>
-                    <div class="shop_bottom_right_price">{{ info.price }}</div>
+                <div class="shop_bottom_right" v-if="info.price != '0'">
+                        <div class="shop_bottom_right_con">￥</div>
+                        <div class="shop_bottom_right_price">{{ info.price }}</div>
+                </div>
+                <div class="shop_bottom_right_price" v-else>
+                    仅展示
                 </div>
                 <!-- <div class="shop_bottom_right">
                     <div class="shop_bottom_right_title">仅展示</div>
@@ -69,9 +72,9 @@ export default {
     },
     computed: {
         time() {
-            if (this.info.startTime) {
-                if (this.dayjs().isSameOrBefore(this.info.startTime, 'YYYY-MM-DD HH:mm:ss')) {
-                    return this.dayjs(this.info.startTime).format('MM月DD日');
+            if (this.info.purchaseTime) {
+                if (this.dayjs().isSameOrBefore(this.info.purchaseTime, 'YYYY-MM-DD HH:mm:ss')) {
+                    return this.dayjs(this.info.purchaseTime).format('MM月DD日');
                 }
             }
 
@@ -79,13 +82,13 @@ export default {
         }
     },
     mounted() {
-        if (this.info.startTime) {
-            var x = this.dayjs(this.info.startTime, 'YYYY-MM-DD HH:mm:ss');
+        if (this.info.purchaseTime) {
+            var x = this.dayjs(this.info.purchaseTime, 'YYYY-MM-DD HH:mm:ss');
             var y = this.dayjs();
             let d = this.dayjs.duration(x.diff(y));
             let day = parseInt(d.asDays());
             if (day <= 0) {
-                this.getTime(this.info.startTime);
+                this.getTime(this.info.purchaseTime);
             }
         }
     },
@@ -174,7 +177,7 @@ export default {
         position: absolute;
         top: 16px;
         left: 16px;
-        z-index: 99;
+        z-index: 12;
         .shop_sold_out_img {
             width: 16px;
             height: 17px;
@@ -196,7 +199,7 @@ export default {
         position: absolute;
         top: 16px;
         left: 16px;
-        z-index: 99;
+        z-index: 12;
         text-align: center;
     }
     .commodity_map {
@@ -329,6 +332,13 @@ export default {
                 line-height: 16px;
             }
         }
+        .shop_bottom_right_price {
+                font-size: 16px;
+                font-family: PingFangSC-Medium, PingFang SC;
+                font-weight: 600;
+                color: #ffffff;
+                line-height: 28px;
+            }
     }
 }
 </style>

src/views/product/Detail.vue

@@ -387,9 +387,9 @@
                         <div class="work_story_creator_left">创作者</div>
                         <div class="work_story_creator_right">{{ info.minter }}</div>
                     </div>
-                    <div class="work_story_creator" v-if="info.issuer">
+                    <div class="work_story_creator">
                         <div class="work_story_creator_left">发行方</div>
-                        <div class="work_story_creator_right">{{ info.issuer }}</div>
+                        <div class="work_story_creator_right">{{ info.issuer || '暂无信息'}}</div>
                     </div>
                 </div>
             </div>
@@ -398,11 +398,11 @@
                     <hash-code :info="info"></hash-code>
                 </div>
             </div>
-            <div class="purchase_instructions" v-if="info.purchaseInstructions">
+            <div class="purchase_instructions">
                 <div class="purchase_instructions_con">
                     <div class="purchase_instructions_title">购买须知</div>
                     <div class="purchase_instructions_text">
-                        {{ info.purchaseInstructions }}
+                        {{ info.purchaseInstructions || '暂无信息' }}
                     </div>
                 </div>
             </div>
@@ -563,12 +563,12 @@
                     <div class="coming_on_sale_time">{{ startTime }}</div>
                 </div> -->
                 <div class="sold_out" v-if="isSolded" block round>已售罄</div>
-                <div class="sold_out" v-if="isSold" block round>即将售罄</div>
-                <div class="sold_out" v-if="limit.limit > 0 && limit.count >= limit.limit" block round>
+                <div class="sold_out" v-else-if="isSold" block round>即将售罄</div>
+                <div class="sold_out" v-else-if="limit.limit > 0 && limit.count >= limit.limit" block round>
                     限购{{ limit.limit }}件
                 </div>
                 <!-- 预约 -->
-                <div class="buy_now" v-if="info.subscribeStatus == 'NOT_STARTED' && info.hasSubscribe && !isSolded && !isSold">
+                <div class="buy_now" v-else-if="info.subscribeStatus == 'NOT_STARTED' && info.hasSubscribe && !isSolded && !isSold">
                     <!-- v-if="isAppointment" block round -->
                     <div class="buy_now_con">敬请期待</div>
                     <div class="buy_now_time">{{ comingSoonTime }} 开放预约</div>
@@ -592,24 +592,24 @@
                 </div>
                 <div v-else-if="info.subscribeStatus == 'ON_SALE' && info.hasSubscribe && !isSolded && !isSold">
                     <!-- v-if="!isAppointment && info.state == 'PURCHASE'" -->
-                    <div class="buy_now_collection" @click="buyNow" v-if="info.purchaseQualifications">
-                        立即购买
-                        <!-- <div class="buy_now_con">立即购买</div> -->
-                        <!-- <div>
+                    <div class="buy_now" @click="buyNow" v-if="info.purchaseQualifications">
+                        <!-- 立即购买 -->
+                        <div class="buy_now_con">购买</div>
+                        <div class="buy_now_tip">
                             <span class="purchase_sold">已售&nbsp;{{ info.sale }}</span>
                             <span class="Purchase_surplus">剩余{{ info.stock }}</span>
-                        </div> -->
+                        </div>
                     </div>
                     <div v-else class="sold_out">已售罄</div>
                 </div>
                 <div v-else-if="!info.hasSubscribe && !isSolded && !isSold">
-                    <div class="buy_now_collection" @click="buyNow">
-                        立即购买
-                        <!-- <div class="buy_now_con">立即购买</div> -->
-                        <!-- <div>
+                    <div class="buy_now" @click="buyNow">
+                        <!-- 立即购买 -->
+                        <div class="buy_now_con">购买</div>
+                        <div class="buy_now_tip">
                             <span class="purchase_sold">已售&nbsp;{{ info.sale }}</span>
                             <span class="Purchase_surplus">剩余{{ info.stock }}</span>
-                        </div> -->
+                        </div>
                     </div>
                 </div>
                 <!-- 预约 -->
@@ -992,21 +992,30 @@ export default {
                             'Millisecond'
                         );
                         this.active = 0;
-                        this.timer();
+                        if (res.hasSubscribe) {
+                            this.timer();
+                        }
+                        // this.timer();
                     } else if (res.subscribeStatus == 'SUBSCRIBE_ENDING') {
                         this.millisecond = this.dayjs(res.publishTime, 'YYYY-MM-DD HH:mm:ss').diff(
                             this.dayjs(),
                             'Millisecond'
                         );
                         this.active = 1;
-                        this.timer();
+                        if (res.hasSubscribe) {
+                            this.timer();
+                        }
+                        // this.timer();
                     } else if (res.subscribeStatus == 'ANNOUNCING') {
                         this.millisecond = this.dayjs(res.purchaseTime, 'YYYY-MM-DD HH:mm:ss').diff(
                             this.dayjs(),
                             'Millisecond'
                         );
                         this.active = 2;
-                        this.timer();
+                        if (res.hasSubscribe) {
+                            this.timer();
+                        }
+                        // this.timer();
                     } else if (res.subscribeStatus == 'ON_SALE') {
                         this.active = 3;
                     }
@@ -2049,6 +2058,8 @@ export default {
                     font-family: PingFangSC-Medium, PingFang SC;
                     font-weight: 500;
                     color: #725837;
+                    margin-bottom: 2px;
+                    margin-top: -3px;
                 }
                 .buy_now_time {
                     font-size: 10px;
@@ -2057,17 +2068,17 @@ export default {
                     color: #725837;
                 }
                 .purchase_sold {
-                    font-size: 10px;
+                    font-size: 12px;
                     font-family: PingFangSC-Regular, PingFang SC;
                     font-weight: 400;
-                    color: #725837;
+                    color: rgba(114, 88, 55, 0.6);
                     margin-right: 12px;
                 }
                 .Purchase_surplus {
-                    font-size: 10px;
+                    font-size: 12px;
                     font-family: PingFangSC-Regular, PingFang SC;
                     font-weight: 400;
-                    color: #725837;
+                    color: rgba(114, 88, 55, 0.6);
                 }
             }
             .buy_now_collection {