增加积分订单、积分明细的无记录页面

pages/point/bill.vue

@@ -7,6 +7,11 @@
     </div>
 
     <div class="bottom">
+    <div v-if="recordList.length === 0" class="no-img">
+      <div></div>
+      <span>无订单</span>
+    </div>
+    <template v-else>
       <div class="item" v-for="item in recordList" :key="item.id">
         <div class="content">
           <span class="text">{{item.recordType === '+'? '加油': '兑换商品'}}</span>
@@ -14,6 +19,7 @@
         </div>
         <div class="time">{{item.createTime}}</div>
       </div>
+    </template>
       <!-- <div class="item">
         <div class="content">
           <span class="text">兑换商品</span>
@@ -161,6 +167,33 @@ export default {
   box-sizing: border-box;
 }
 
+.point-bill .bottom .no-img{
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.point-bill .bottom .no-img div{
+  width: 2.29rem;
+  height:1.87rem;
+  background: url("../../static/common/wu@2x.png") no-repeat 0 0;
+  background-size: 100% 100%;
+
+}
+.point-bill .bottom .no-img span{
+  width: 2.29rem;
+height: .4rem;
+font-size: .28rem;
+font-weight: 500;
+color: #AAAAAA;
+line-height: .4rem;
+text-align: center;
+
+}
+
 .point-bill .bottom .item {
   width: 100%;
   height: 1.56rem;

pages/point/list.vue

@@ -1,33 +1,40 @@
 <template>
   <div class="point-list">
-    <div class="order" v-for="item in orderList" :key="item.id">
-      <div class="top">
-        <div class="code"> {{"订单号 " + item.integralOrderNo}}</div>
-        <div class="status">已兑换</div>
-      </div>
-      <div class="middle">
-        <div class="imgcon">
-          <img :src="item.waresPic" alt="" srcset="" />
+    <div v-if="orderList.length === 0" class="no-img">
+      <div></div>
+      <span>无订单</span>
+    </div>
+    <template v-else>
+      <div class="order" v-for="item in orderList" :key="item.id">
+        <div class="top">
+          <div class="code">{{ "订单号 " + item.integralOrderNo }}</div>
+          <div class="status">已兑换</div>
         </div>
-        <div class="content">
-          <div class="title">{{ item.waresName }}</div>
-          <div class="desc">{{ item.waresDetail }}</div>
-          <div class="amount">
-            <div>
-              <span class="text">共{{ item.exchangeNum }}件商品 合计 </span><span class="icon"></span><span>{{item.integral}}</span>
+        <div class="middle">
+          <div class="imgcon">
+            <img :src="item.waresPic" alt="" srcset="" />
+          </div>
+          <div class="content">
+            <div class="title">{{ item.waresName }}</div>
+            <div class="desc">{{ item.waresDetail }}</div>
+            <div class="amount">
+              <div>
+                <span class="text">共{{ item.exchangeNum }}件商品 合计 </span
+                ><span class="icon"></span><span>{{ item.integral }}</span>
+              </div>
             </div>
           </div>
         </div>
-      </div>
 
-      <!-- <div class="footer">
+        <!-- <div class="footer">
         <span class="paytime">付款倒计时：23:59:59</span>
         <div class="paybutton">
           <button class="cancel">取消订单</button>
           <button class="pay">立刻付款</button>
         </div>
       </div> -->
-    </div>
+      </div>
+    </template>
     <!-- <div class="order">
       <div class="top">
         <div class="code">订单号 836847623234289</div>
@@ -58,7 +65,7 @@
       </div>
     </div>
     -->
-  </div> 
+  </div>
 </template>
 
 <script>
@@ -71,7 +78,7 @@ export default {
   },
   data() {
     return {
-      orderList:[]
+      orderList: [],
     };
   },
   components: {
@@ -92,7 +99,7 @@ export default {
         })
         .then((res) => {
           if (res.retCode === 0) {
-            this.orderList = res.data
+            this.orderList = res.data;
           }
         });
     },
@@ -107,6 +114,30 @@ export default {
   width: 7rem;
   margin: 0 auto;
 }
+.point-list .no-img {
+  width: 100%;
+  height: 60vh;
+    position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.point-list .no-img div {
+  width: 2.29rem;
+  height: 1.87rem;
+  background: url("../../static/common/wu@2x.png") no-repeat 0 0;
+  background-size: 100% 100%;
+}
+.point-list .no-img span {
+  width: 2.29rem;
+  height: 0.4rem;
+  font-size: 0.28rem;
+  font-weight: 500;
+  color: #aaaaaa;
+  line-height: 0.4rem;
+  text-align: center;
+}
 .point-list .order {
   width: 100%;
   background: #ffffff;