配件选择页面

src/components/uni-list/uni-list.vue

+<template>
+	<!-- #ifndef APP-NVUE -->
+	<view class="uni-list uni-border-top-bottom">
+		<view v-if="border" class="uni-list--border-top"></view>
+		<slot />
+		<view v-if="border" class="uni-list--border-bottom"></view>
+	</view>
+	<!-- #endif -->
+	<!-- #ifdef APP-NVUE -->
+	<list class="uni-list" :class="{ 'uni-list--border': border }" :enableBackToTop="enableBackToTop" loadmoreoffset="15"><slot /></list>
+	<!-- #endif -->
+</template>
+
+<script>
+/**
+ * List 列表
+ * @description 列表组件
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=24
+ * @property {String} 	border = [true|false] 		标题
+ */
+export default {
+	name: 'uniList',
+	'mp-weixin': {
+		options: {
+			multipleSlots: false
+		}
+	},
+	props: {
+		enableBackToTop: {
+			type: [Boolean, String],
+			default: false
+		},
+		scrollY: {
+			type: [Boolean, String],
+			default: false
+		},
+		border: {
+			type: Boolean,
+			default: true
+		}
+	},
+	// provide() {
+	// 	return {
+	// 		list: this
+	// 	};
+	// },
+	created() {
+		this.firstChildAppend = false;
+	},
+	methods: {
+		loadMore(e) {
+			this.$emit('scrolltolower');
+		}
+	}
+};
+</script>
+<style lang="scss">
+.uni-list {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	background-color: $uni-bg-color;
+	position: relative;
+	flex-direction: column;
+}
+
+.uni-list--border {
+	position: relative;
+	/* #ifdef APP-NVUE */
+	border-top-color: $uni-border-color;
+	border-top-style: solid;
+	border-top-width: 0.5px;
+	border-bottom-color: $uni-border-color;
+	border-bottom-style: solid;
+	border-bottom-width: 0.5px;
+	/* #endif */
+	z-index: -1;
+}
+
+/* #ifndef APP-NVUE */
+
+.uni-list--border-top {
+	position: absolute;
+	top: 0;
+	right: 0;
+	left: 0;
+	height: 1px;
+	-webkit-transform: scaleY(0.5);
+	transform: scaleY(0.5);
+	background-color: $uni-border-color;
+	z-index: 1;
+}
+
+.uni-list--border-bottom {
+	position: absolute;
+	bottom: 0;
+	right: 0;
+	left: 0;
+	height: 1px;
+	-webkit-transform: scaleY(0.5);
+	transform: scaleY(0.5);
+	background-color: $uni-border-color;
+}
+
+/* #endif */
+</style>

src/pages.json

@@ -346,6 +346,12 @@
 					"style": {
 						"navigationBarTitleText": "备件仓可用的配件"
 					}
+				},
+				{
+					"path": "partsList",
+					"style": {
+						"navigationBarTitleText": "配件选择"
+					}
 				}
 			]
 		},

src/pages/order/partsList.vue

+<template>
+  <view class="u-flex content">
+    <view class="search">
+      <u-search
+        :clearabled="true"
+        :action-style="searchStyle"
+        @custom="searchParts"
+        @search="searchParts"
+      ></u-search>
+    </view>
+
+    <view class="categary">
+      <view class="u-flex u-col-center u-row-around">
+        <view class="label-title">品类：</view>
+        <view class="label-content">
+          <view
+            v-for="(item, index) in categary"
+            :key="index"
+            class="label-item"
+          >
+            <view
+              :class="['label-normal', { selected: item.id === categaryId }]"
+              @click="changeCategary(item)"
+            >
+              <text class="label-text">{{ item.name }}</text>
+            </view>
+          </view>
+        </view>
+      </view>
+      <view class="u-flex u-col-center u-row-around">
+        <view class="label-title">品牌：</view>
+        <view class="label-content">
+          <view v-for="(item, index) in brand" :key="index" class="label-item">
+            <view
+              :class="['label-normal', { selected: item.id === brandId }]"
+              @click="changeBrand(item)"
+            >
+              <text class="label-text">{{ item.name }}</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <view class="lists">
+      <scroll-view
+        style="height:100%;"
+        :scroll-top="scrollTop"
+        scroll-y="true"
+        class="scroll-Y"
+        @scrolltolower="loadMore"
+      >
+        <uni-list-item
+          v-for="(item, index) in lists"
+          :key="index"
+          :title="item.title"
+          :note="item.desc"
+          showArrow
+          :thumb="item.img"
+          thumb-size="lg"
+          :rightText="item.price"
+        />
+        <view class="load-more">
+          <u-loadmore :status="loadStatus" @loadmore="loadMore" />
+        </view>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+
+<script>
+const categary = [
+  {
+    id: 1,
+    name: "充电桩",
+    children: [
+      {
+        id: 1,
+        parentId: 1,
+        name: "沃尔沃",
+      },
+      {
+        id: 2,
+        parentId: 1,
+        name: "宝马",
+      },
+      {
+        id: 3,
+        parentId: 1,
+        name: "奔驰",
+      },
+    ],
+  },
+  {
+    id: 2,
+    name: "空调",
+    children: [
+      {
+        id: 3,
+        parentId: 2,
+        name: "美的",
+      },
+      {
+        id: 4,
+        parentId: 2,
+        name: "格力",
+      },
+    ],
+  },
+];
+
+const lists = [
+  {
+    title: "空开盒子",
+    desc: "NO.202006060000",
+    img:
+      "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
+    price: "10元",
+  },
+  {
+    title: "空开盒子",
+    desc: "NO.202006060000",
+    img:
+      "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
+    price: "10元",
+  },
+  {
+    title: "空开盒子",
+    desc: "NO.202006060000",
+    img:
+      "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
+    price: "10元",
+  },{
+    title: "空开盒子",
+    desc: "NO.202006060000",
+    img:
+      "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
+    price: "10元",
+  },
+  {
+    title: "空开盒子",
+    desc: "NO.202006060000",
+    img:
+      "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
+    price: "10元",
+  },
+  {
+    title: "空开盒子",
+    desc: "NO.202006060000",
+    img:
+      "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
+    price: "10元",
+  },
+  {
+    title: "空开盒子",
+    desc: "NO.202006060000",
+    img:
+      "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
+    price: "10元",
+  },
+  {
+    title: "空开盒子",
+    desc: "NO.202006060000",
+    img:
+      "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
+    price: "10元",
+  },
+  {
+    title: "空开盒子",
+    desc: "NO.202006060000",
+    img:
+      "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
+    price: "10元",
+  },
+  {
+    title: "空开盒子",
+    desc: "NO.202006060000",
+    img:
+      "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
+    price: "10元",
+  }
+];
+
+import uniList from "@/components/uni-list/uni-list.vue";
+import uniListItem from "@/components/uni-list-item/uni-list-item.vue";
+export default {
+  components: {
+    uniList,
+    uniListItem,
+  },
+  data() {
+    return {
+      categary: categary,
+      brand: [],
+      categaryId: "",
+      brandId: "",
+      loadStatus: "loadmore",
+      lists: lists,
+      size: 10,
+      page: 1,
+      count: 1
+    };
+  },
+  computed: {
+    searchStyle() {
+      return {
+        background: "#2272FF",
+        color: "#FFFFFF",
+        padding: "10rpx 20rpx",
+        width: "110rpx",
+        "border-radius": "10rpx",
+      };
+    },
+  },
+  methods: {
+    getPartsList() {
+      this.page++;
+      this.loadStatus = "loading";
+      const data = []
+      // 模拟加载更多效果
+      setTimeout(() => {
+        if (lists.length < this.size || this.count === 3) {
+          this.loadStatus = "nomore";
+        } else {
+          this.lists = this.lists.concat(lists);
+          this.count++
+          this.loadStatus = "loadmore"
+        }
+      }, 1000)
+    },
+    searchParts(val) {
+      console.log("val", val);
+    },
+    changeCategary(item) {
+      this.categaryId = item.id;
+      this.brand = item.children || [];
+    },
+    changeBrand(item) {
+      this.brandId = item.id;
+    },
+    loadMore() {
+      if (this.loadStatus !== "nomore") {
+        this.getPartsList();
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.content {
+  background: #fff;
+  padding: 30rpx;
+  flex-direction: column;
+  height: 100vh;
+  .search {
+    width: 100%;
+  }
+  .categary {
+    width: 100%;
+    padding-top: 40rpx;
+    .label-title {
+      width: 100rpx;
+    }
+    .label-content {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      overflow-x: auto;
+      min-height: 104rpx;
+      flex: 1;
+      .label-item {
+        padding-right: 20rpx;
+        flex-shrink: 0;
+
+        .label-normal {
+          height: 70rpx;
+          width: 160rpx;
+          font-size: 26rpx;
+          color: #333;
+          background-color: #fff;
+          border: 2rpx solid #797979;
+          border-radius: 8rpx;
+          padding-left: 30rpx;
+          padding-right: 30rpx;
+          text-align: center;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          .label-text {
+            word-break: break-all;
+          }
+          &.selected {
+            color: #fff;
+            background-color: #2272ff;
+            border-color: #2272ff;
+          }
+        }
+      }
+    }
+  }
+  .lists {
+    width: 100%;
+    flex: 1;
+    overflow-y: auto;
+    .load-more {
+      padding: 50rpx 0;
+    }
+  }
+}
+</style>