兑奖页添加空数据提示

game/src/views/ShopView.vue

@@ -50,7 +50,7 @@
         </button>
       </div>
       <div
-        v-if="prizeList.length && currentTabIdx === 0"
+        v-if="prizeList && prizeList.length && currentTabIdx === 0"
         class="prize-list"
       >
         <article
@@ -95,7 +95,21 @@
         </article>
       </div>
       <div
-        v-if="recordList.length && currentTabIdx === 1"
+        v-if="prizeList === null"
+        class="prize-list"
+      >
+        <img
+          class="no-data"
+          src="@/assets/images/no-prize.png"
+          alt=""
+          draggable="false"
+        >
+        <p class="no-data">
+          礼物准备中
+        </p>
+      </div>
+      <div
+        v-if="recordList && recordList.length && currentTabIdx === 1"
         class="record-list"
       >
         <div
@@ -121,6 +135,20 @@
           </div>
         </div>
       </div>
+      <div
+        v-if="recordList === null"
+        class="record-list"
+      >
+        <img
+          class="no-data"
+          src="@/assets/images/no-list.png"
+          alt=""
+          draggable="false"
+        >
+        <p class="no-data">
+          暂无记录
+        </p>
+      </div>
     </div>
   </div>
 </template>
@@ -147,7 +175,8 @@ getScore().then((res) => {
 
 const currentTabIdx = ref(0)
 
-const prizeList = ref([])
+// todo: 列表下拉刷新
+const prizeList = ref(null)
 getPrizeList(0, 20).then((res) => {
   prizeList.value = res.records
   console.log(prizeList.value)
@@ -161,7 +190,8 @@ function onClickPrizeItem(prizeItem) {
   })
 }
 
-const recordList = ref([])
+// todo: 列表下拉刷新?
+const recordList = ref(null)
 getBonusPointRecord().then((res) => {
   recordList.value = res.filter((item) => {
     return item.score !== 0 && item.score !== '0' && item.score !== '+0' && item.score !== '-0'
@@ -264,6 +294,7 @@ getBonusPointRecord().then((res) => {
       height: calc(513 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       overflow: auto;
       padding-left: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      position: relative;
       >article.prize-item{
         display: inline-block;
         width: calc(168 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -339,12 +370,31 @@ getBonusPointRecord().then((res) => {
       >article.prize-item.disabled{
         pointer-events: none;
       }
+      >img.no-data{
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        top: calc(120 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        transform: translate(-50%, 0);
+      }
+      >p.no-data{
+        position: absolute;
+        left: 50%;
+        top: calc(265 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        transform: translate(-50%, 0);
+        font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-family: Source Han Sans SC, Source Han Sans SC;
+        font-weight: 400;
+        color: #AF9D85;
+        line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
     }
     >div.record-list{
       height: calc(515 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       overflow: auto;
       padding-left: calc(26 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       padding-right: calc(26 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      position: relative;
       >.record-item{
         width: 100%;
         margin-bottom: calc(15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -381,6 +431,24 @@ getBonusPointRecord().then((res) => {
           color: #FF4040;
         }
       }
+      >img.no-data{
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        top: calc(120 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        transform: translate(-50%, 0);
+      }
+      >p.no-data{
+        position: absolute;
+        left: 50%;
+        top: calc(265 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        transform: translate(-50%, 0);
+        font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-family: Source Han Sans SC, Source Han Sans SC;
+        font-weight: 400;
+        color: #AF9D85;
+        line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
     }
   }
 }