fix: 可用备件无数据时显示

src/pages.json

@@ -269,15 +269,15 @@
 						"navigationBarTitleText": "操作记录",
 						"enablePullDownRefresh": false
 					}
-				},
-				{
-					"path": "warehouse/partsDetail",
-					"style": {
-						"navigationStyle": "custom",
-						"navigationBarTitleText": "", // 配件详情
-						"enablePullDownRefresh": false,
-						"disableScroll": true
-					}
+				},
+				{
+					"path": "warehouse/partsDetail",
+					"style": {
+						"navigationStyle": "custom",
+						"navigationBarTitleText": "", // 配件详情
+						"enablePullDownRefresh": false,
+						"disableScroll": true
+					}
 				},
 				{
 					"path": "superLogin/index",
@@ -361,7 +361,8 @@
 				{
 					"path": "parts",
 					"style": {
-						"navigationBarTitleText": "可用备件"
+						"navigationBarTitleText": "可用备件",
+						"disableScroll": true
 					}
 				}
 			]

src/pages/order/parts.vue

 <template>
 	<view class="u-flex det-wrap">
-    <view class="content">
-      <scroll-view v-if="lists.length > 0" style="height: 100%;" scroll-y="true">
+    <view class="content" v-if="lists.length > 0">
+      <scroll-view style="height: 100%;" scroll-y="true">
         <select-parts
           v-for="(item, index) in lists" 
           :key="index"
@@ -12,10 +12,18 @@
           @apply="apply(index)"
         ></select-parts>
       </scroll-view>
-      <view v-else class="empty">暂无可用备件</view>
     </view>
 
-    <view class="bar">
+    <view v-else class="u-flex-col u-col-center empty">
+      <view class="sold-out">
+        <u-image :src="qnFile('SoldOut.png')" width="374" mode="widthFix">
+          <view slot="error" style="font-size: 24rpx;">加载失败</view>
+        </u-image>
+      </view>
+      <view class="message">当前无可用备件</view>
+    </view>
+
+    <view class="bar" v-if="lists.length > 0">
       <submit-bar 
         :partNum="partNum"
         :num="num"
@@ -62,18 +70,6 @@
             img: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
             checked: false,
             disabled: true
-          },
-          {
-            id: 1,
-            name: "正泰漏保",
-            no: 'NO.202006170015NO.202006170015',
-            desc: '这个充电桩的简介可以写的长一点',
-            num: 1,
-            min: 1,
-            max: 100,
-            img: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
-            checked: false,
-            disabled: false
           }
         ],
         val: []
@@ -117,6 +113,9 @@
       },
       submit() {
         console.log('submit')
+      },
+      qnFile(src) {
+        return process.uniEnv.qn_base_url + src
       }
     }
 	}
@@ -129,18 +128,20 @@
     height: 100vh;
     .content {
       border-radius: 12rpx;
-      padding: 10rpx;
+      padding: 10rpx 10rpx 0 10rpx;
       width: 100%;
-      .empty {
-        text-align: center;
-        font-size: 26rpx;
-        color: #aaa;
-      }
       flex: 1;
       overflow-y: auto;
     }
     .bar {
       width: 100%;
+      border-top: 1px solid #F4F5F7;
+    }
+    .empty {
+      flex: 1;
+      justify-content: center;
+      font-size: 26rpx;
+      color: #aaa;
     }
   }
 </style>