完工-备件仓选择可用配件

src/pages.json

@@ -331,15 +331,21 @@
 						"enablePullDownRefresh": false,
 						"disableScroll": true
 					}
-				},
-				{
-					"path": "document-tag",
-					"style": {
-						"navigationBarTitleText": "", // 合作商或品牌标签列表
-						"navigationStyle": "custom",
-						"enablePullDownRefresh": false,
-						"disableScroll": true
-					}
+				},
+				{
+					"path": "document-tag",
+					"style": {
+						"navigationBarTitleText": "", // 合作商或品牌标签列表
+						"navigationStyle": "custom",
+						"enablePullDownRefresh": false,
+						"disableScroll": true
+					}
+				},
+				{
+					"path": "parts",
+					"style": {
+						"navigationBarTitleText": "备件仓可用的配件"
+					}
 				}
 			]
 		},

src/pages/order/parts.vue

+<template>
+	<view class="det-wrap">
+    <view class="content">
+      <scroll-view v-if="lists.length > 0" style="height: 70vh;" scroll-y="true">
+        <select-parts
+          :lists="lists"
+          :show-checked="true"
+          :show-title="true"
+          @change="partsChange"
+        ></select-parts>
+      </scroll-view>
+      <view v-else class="empty">暂无可用备件</view>
+    </view>
+
+    <view class="bottom" v-if="lists.length > 0">
+      <button class="btn" @click="submit">
+        <text class="button-text">保存，继续完工</text>
+      </button>
+    </view>
+	</view>
+</template>
+
+<script>
+  import selectParts from "@/components/parts/index"
+	export default {
+    components: {
+      selectParts
+    },
+		data() {
+      return {
+        lists: [
+          {
+            id: 1,
+            name: "正泰漏保",
+            num: 1,
+            min: 1,
+            max: 100,
+          },
+          {
+            id: 1,
+            name: "挚达广汽充电桩",
+            num: 3,
+            min: 1,
+            max: 5,
+          }
+        ],
+        val: []
+      }
+    },
+    methods: {
+      partsChange(val) {
+        this.val = val
+      },
+      submit() {
+        console.log("this.val", this.val)
+      }
+    }
+	}
+</script>
+
+<style lang="scss" scoped>
+	.det-wrap {
+    margin: 30rpx;
+    .content {
+      border-radius: 12rpx;
+      background: #fff;
+      padding: 30rpx;
+      min-height: 70vh;
+    }
+    .empty {
+      text-align: center;
+      font-size: 26rpx;
+      color: #aaa;
+    }
+    .bottom {
+      width: 100%;
+      padding: 0 40rpx;
+      font-size: 28rpx;
+      position: fixed;
+      bottom: 100rpx;
+      left: 50%;
+      margin-left: -50%;
+      .btn {
+        padding: 30rpx;
+        border-radius: 52rpx;
+        line-height: 44rpx;
+        font-size: 32rpx;
+        text-align: center;
+        background-color: #2272ff;
+        color: #fff;
+        &::after {
+          content: '';
+          height: 0;
+          border: none;
+        }
+      }
+    }
+  }
+</style>