Style:无数据状态显示调整

pkg_product/views/seckill.vue

@@ -6,39 +6,58 @@
     <!--    </view>-->
 
     <view class="img-box flex jc-between ai-end">
-      <image class="img-seckill" :src="webUrl+'/20221222155145987590.png'" mode="scaleToFill"/>
-      <image class="img-rule" :src="webUrl+'/20221222155206016851.png'" mode="scaleToFill" @click="changeRule"/>
+      <image
+        :src="webUrl+'/20221222155145987590.png'"
+        class="img-seckill"
+        mode="scaleToFill"
+      />
+      <image
+        :src="webUrl+'/20221222155206016851.png'"
+        class="img-rule"
+        mode="scaleToFill"
+        @click="changeRule"
+      />
     </view>
-
+    <!-- 规则富文本弹窗 -->
     <view class="dialog-mask" v-show="showRule">
       <view class="dialog">
-        <image class="icon-close" :src="webUrl+'/20221230200935413332.png'" mode="scaleToFill" @click="changeRule"/>
-
+        <image
+          :src="webUrl+'/20221230200935413332.png'"
+          class="icon-close"
+          mode="scaleToFill"
+          @click="changeRule"
+        />
         <view class="dialog-body">
           <view class="flex jc-center">
             <image class="title" :src="webUrl+'/20221230201151585898.png'" mode="scaleToFill"/>
           </view>
           <rich-text class="content" :nodes="ruleContent"/>
-          <!--          <view class="content">{{ ruleContent }}</view>-->
         </view>
       </view>
     </view>
-
     <view class="top-list flex">
       <view class="item flex-0" v-for="(item,index) in topList" :key="index" @click="goGoodsConByProductID(item)">
         <view class="header flex jc-between ai-center">
           <image class="img-rush" :src="webUrl+'/20221222155118237514.png'" mode="scaleToFill"/>
           <view class="end-time flex ai-center">
             <text class="text-tip">倒计时:</text>
-            <count-down-unit :isDay="true" isSecond :dayText="'天'" :hourText="':'" :minuteText="':'"
-                             :secondText="false"
-                             :datatime="item.limitEndTimeMillis"></count-down-unit>
+            <count-down-unit
+              :isDay="true"
+              isSecond
+              :dayText="'天'"
+              :hourText="':'"
+              :minuteText="':'"
+              :secondText="false"
+              :datatime="item.limitEndTimeMillis"
+            />
           </view>
         </view>
-
         <view class="content flex ai-end">
-          <image class="img-cover flex-0" :src="item.image"
-                 mode="scaleToFill"/>
+          <image
+            :src="item.image"
+            class="img-cover flex-0"
+            mode="scaleToFill"
+          />
           <view class="info-box flex flex-col jc-between">
             <view class="more-t">{{ item.title }}</view>
             <view class="line-price flex jc-between ai-center">
@@ -49,51 +68,72 @@
         </view>
       </view>
     </view>
-
     <view class="nav-box flex ai-center">
       <view class="img-section">
-        <image class="img-hot flex-0" :src="webUrl+'/20230311090049756844.png'" mode="scaleToFill"/>
+        <image
+          :src="webUrl+'/20230311090049756844.png'"
+          class="img-hot flex-0"
+          mode="scaleToFill"
+        />
       </view>
       <view class="nav-line flex">
-        <view class="nav-item flex-0 flex flex-col jc-end ai-center" :class="{'active':index===seckillTimeIndex}"
-              v-for="(item,index) in seckillTime" :key="index" @click="navChange(index)">
+        <view
+          v-for="(item,index) in seckillTime"
+          :key="index"
+          :class="{'active':index === seckillTimeIndex}"
+          class="nav-item flex-0 flex flex-col jc-end ai-center"
+          @click="navChange(index)"
+        >
           <view class="time">{{ item.time }}</view>
           <view class="tag">{{ item.state }}</view>
         </view>
       </view>
     </view>
-
     <view class="list-box">
-      <view class="item flex" v-for="(item,index) in list" :key="index"
-            @click="goGoodsConByProductID(item,seckillTime[seckillTimeIndex].status)">
-        <image class="img-cover flex-0" :src="item.image"
-               mode="scaleToFill"/>
-        <view class="content flex flex-col jc-between">
-          <view class="top-section">
-            <!--            style="height: 150rpx"-->
-            <view class="more-t">{{ item.title }}</view>
-            <view class="company">{{ item.unitName }}</view>
-          </view>
-          <view>
-            <view class="line-price flex jc-between ai-center">
-              <view class="flex ai-end">
-                <view>秒杀价</view>
-                <view class="price">￥{{ item.price }}</view>
-              </view>
-              <view class="advance flex jc-center ai-center" v-if="seckillTime[seckillTimeIndex].status>1">即将开始
-              </view>
+      <template v-if="list.length > 0">
+        <view
+          v-for="(item, index) in list"
+          :key="index"
+          class="item flex"
+          @click="goGoodsConByProductID(item,seckillTime[seckillTimeIndex].status)"
+        >
+          <image
+            :src="item.image"
+            class="img-cover flex-0"
+            mode="scaleToFill"
+          />
+          <view class="content flex flex-col jc-between">
+            <view class="top-section">
+              <view class="more-t">{{ item.title }}</view>
+              <view class="company">{{ item.unitName }}</view>
             </view>
-            <view class="path-box flex jc-between ai-center"
-                  :style="{'backgroundImage':`url(${webUrl}/20221222155107931036.png)`}"
-                  v-if="seckillTime[seckillTimeIndex].status===1">
-              <view class="sale flex ai-center">已抢{{ item.sales }}件</view>
-              <view class="btn">立即抢购</view>
+            <view>
+              <view class="line-price flex jc-between ai-center">
+                <view class="flex ai-end">
+                  <view>秒杀价</view>
+                  <view class="price">￥{{ item.price }}</view>
+                </view>
+                <view
+                  v-if="seckillTime[seckillTimeIndex].status > 1"
+                  class="advance flex jc-center ai-center"
+                >
+                  即将开始
+                </view>
+              </view>
+              <view
+                v-if="seckillTime[seckillTimeIndex].status === 1"
+                :style="{'backgroundImage':`url(${webUrl}/20221222155107931036.png)`}"
+                class="path-box flex jc-between ai-center"
+              >
+                <view class="sale flex ai-center">已抢{{ item.sales }}件</view>
+                <view class="btn">立即抢购</view>
+              </view>
             </view>
           </view>
         </view>
-      </view>
+      </template>
+      <no-good-data v-else />
     </view>
-
   </view>
 </template>
 
@@ -105,11 +145,13 @@ import {mapGetters} from "vuex";
 import cookie from "@/utils/store/cookie";
 import {userBindParent} from "@/api/user";
 import {getUrlParam} from "@/utils/common.js";
+import NoGoodData from '@/components/good/NoData'
 
 export default {
   name: "seckill",
   components: {
-    CountDownUnit
+    CountDownUnit,
+    NoGoodData
   },
   data() {
     return {