配件选择页面

src/components/select-parts/adjust.vue

@@ -43,7 +43,6 @@
 </script>
 <style scoped lang="scss">
 	.parts{
-    padding: 0 20rpx;
     .lists {
       padding: 10rpx 0;
       .name {

src/components/submit-bar/index.vue

@@ -9,7 +9,7 @@
       <view class="center-list">合计 <text class="num"> {{ num }} </text> 件</view>
     </view>
     <view class="u-flex bottom-right">
-      <button :class="['btn', btnActive]" @click="submit">确定</button>
+      <button :class="['btn', btnActive]" @click="submit">{{ submitTxt }}</button>
     </view>
   </view>
 </template>
@@ -46,6 +46,12 @@
 				default () {
 					return 0
 				}
+      },
+      submitTxt: { // 提交按钮文字
+        type: String,
+        default () {
+					return '确定'
+				}
       }
 		},
 		data() {
@@ -80,12 +86,14 @@
 	.bottom {
     width: 100%;
     height: 180rpx;
+    background: #fff;
+    justify-content: space-between;
     .u-flex {
       flex-direction: column;
       align-items: center;
     }
     .bottom-left {
-      margin-right: 10rpx;
+      margin-left: 30rpx;
       .left-list {
         width: 100%;
         &:nth-of-type(1) {
@@ -98,8 +106,8 @@
     }
     .bottom-center {
       flex: 1;
-      margin-right: 20rpx;
       align-items: flex-start;
+      margin: 0 20rpx;
       .center-list {
         &:nth-of-type(1) {
           color: #666;
@@ -118,6 +126,7 @@
     }
     .bottom-right {
       width: 340rpx;
+      margin-right: 20rpx;
       .btn {
         width: 100%;
         padding: 30rpx;

src/components/submit-bar/readme.md

@@ -16,7 +16,7 @@
 | btnStatus | Boolean |  true  | true/false |      确定按钮是否可点击      |
 | partNum | Number |  0  |  |      配件数量      |
 | num | Number |  0  |  |      合计总件数      |
-
+| submitTxt | String |  确定  |  |      确定按钮文字      |
 
 ### Events
 

src/pages/order/parts.vue

@@ -15,14 +15,16 @@
       <view v-else class="empty">暂无可用备件</view>
     </view>
 
-    <submit-bar 
-      :partNum="partNum"
-      :num="num"
-      :btnStatus="btnStatus"
-      :allChecked="allChecked"
-      @select="allSelect"
-      @submit="submit"
-    />
+    <view class="bar">
+      <submit-bar 
+        :partNum="partNum"
+        :num="num"
+        :btnStatus="btnStatus"
+        :allChecked="allChecked"
+        @select="allSelect"
+        @submit="submit"
+      />
+    </view>
 	</view>
 </template>
 
@@ -137,5 +139,8 @@
       flex: 1;
       overflow-y: auto;
     }
+    .bar {
+      width: 100%;
+    }
   }
 </style>

src/pages/order/partsList.vue

@@ -11,60 +11,66 @@
     </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="u-flex u-col-center">
+        <picker mode="selector" :value="categaryIndex" range-key="label" :range="categary" @click="show = true" @change="changeCategary">
+          <view class="txt">{{categrayName || '请选择'}}</view>
+        </picker>
+        <u-icon class="input-icon" color="#2272FF" :name="show ? 'arrow-up' : 'arrow-down'"></u-icon>
+      </view>
+    </view>
+
+    <view class="warp u-flex">
+      <view class="brand u-flex">
+        <view class="label-content u-flex">
+          <scroll-view
+            style="width:100%;white-space: nowrap;"
+            scroll-x="true"
+            class="u-flex"
+            :scroll-into-view="scrollId"
           >
-            <view
-              :class="['label-normal', { selected: item.id === categaryId }]"
-              @click="changeCategary(item)"
-            >
-              <text class="label-text">{{ item.name }}</text>
-            </view>
-          </view>
+            <view :id="`brand${item.id}`" :class="['label-title', { selected: item.id === brandId }]" v-for="(item, index) in brand" :key="index" @click="selectBrand(item)">{{ item.label }}</view>
+          </scroll-view>
+        </view>
+        <view class="more u-flex">
+          <picker mode="selector" :value="brandIndex" range-key="label" :range="brand" @click="show = true" @change="changeBrand">
+            <view class="more-text">更多</view>
+          </picker>
+          <u-icon class="input-icon" color="#2272FF" name="arrow-right"></u-icon>
         </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 class="lists">
+        <scroll-view
+          style="height:100%;"
+          :scroll-top="scrollTop"
+          scroll-y="true"
+          class="scroll-Y"
+          @scrolltolower="loadMore"
+        >
+          <select-parts
+            v-for="(item, index) in lists" 
+            :key="index"
+            :info="item"
+            :show-checked="false"
+            @numChange="numChange($event, index)"
+            @apply="apply(index)"
+          ></select-parts>
+          <view class="load-more">
+            <u-loadmore :status="loadStatus" @loadmore="loadMore" />
           </view>
-        </view>
+        </scroll-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 class="bar">
+      <submit-bar 
+        :partNum="partNum"
+        :num="num"
+        :btnStatus="btnStatus"
+        :show-checked="false"
+        submit-txt="去提交"
+        @submit="submit"
+      />
     </view>
   </view>
 </template>
@@ -73,38 +79,50 @@
 const categary = [
   {
     id: 1,
-    name: "充电桩",
+    label: "充电桩",
+    value: 1,
     children: [
       {
         id: 1,
         parentId: 1,
-        name: "沃尔沃",
+        label: "沃尔沃",
       },
       {
         id: 2,
         parentId: 1,
-        name: "宝马",
+        label: "宝马",
       },
       {
         id: 3,
         parentId: 1,
-        name: "奔驰",
+        label: "奔驰",
+      },
+      {
+        id: 4,
+        parentId: 1,
+        label: "奥迪",
+      },
+      {
+        id: 5,
+        parentId: 1,
+        label: "保时捷",
       },
     ],
   },
   {
     id: 2,
-    name: "空调",
+    label: "空调",
+    value: 2,
     children: [
       {
         id: 3,
         parentId: 2,
-        name: "美的",
+        label: "美的",
       },
       {
         id: 4,
         parentId: 2,
-        name: "格力",
+        label: "格力",
       },
     ],
   },
@@ -112,92 +130,98 @@ const categary = [
 
 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元",
+    id: 1,
+    name: "正泰漏保",
+    no: 'NO.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: true
   },
   {
-    title: "空开盒子",
-    desc: "NO.202006060000",
-    img:
-      "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
-    price: "10元",
+    id: 1,
+    name: "挚达广汽充电桩",
+    no: 'NO.202006170014',
+    desc: '这个空开盒子和其他的空开有什么不一样，这里可以写一下',
+    num: 3,
+    min: 1,
+    max: 5,
+    img: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
+    checked: false,
+    disabled: true
   },
   {
-    title: "空开盒子",
-    desc: "NO.202006060000",
-    img:
-      "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
-    price: "10元",
+    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
   },
   {
-    title: "空开盒子",
-    desc: "NO.202006060000",
-    img:
-      "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
-    price: "10元",
+    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
   },
   {
-    title: "空开盒子",
-    desc: "NO.202006060000",
-    img:
-      "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
-    price: "10元",
+    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
   },
   {
-    title: "空开盒子",
-    desc: "NO.202006060000",
-    img:
-      "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
-    price: "10元",
+    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
   }
 ];
 
-import uniList from "@/components/uni-list/uni-list.vue";
-import uniListItem from "@/components/uni-list-item/uni-list-item.vue";
+import selectParts from "@/components/select-parts/index"
+import submitBar from "@/components/submit-bar/index"
 export default {
   components: {
-    uniList,
-    uniListItem,
+    selectParts,
+    submitBar
   },
   data() {
     return {
+      show: false,
       categary: categary,
       brand: [],
-      categaryId: "",
-      brandId: "",
+      categaryIndex: 0,
+      brandIndex: 0,
+      brandId: '',
+      scrollId: '',
       loadStatus: "loadmore",
       lists: lists,
-      size: 10,
+      size: 5,
       page: 1,
       count: 1
     };
@@ -208,6 +232,25 @@ export default {
         color: "#2272FF"
       };
     },
+    categrayName() {
+      return this.categary[this.categaryIndex].label
+    },
+    // 配件数
+    partNum() {
+      return this.lists.reduce((counter, { checked }) => checked ? counter += 1 : counter, 0)
+    },
+    // 总数
+    num() {
+      return this.lists.reduce((counter, { checked, num }) => checked ? counter += num : counter, 0)
+    },
+    // 按钮状态
+    btnStatus() {
+      const count = this.lists.reduce((counter, { checked }) => checked ? counter += 1 : counter, 0)
+      return count > 0 || false
+    }
+  },
+  created() {
+    this.brand = this.categary[0].children
   },
   methods: {
     getPartsList() {
@@ -228,80 +271,111 @@ export default {
     searchParts(val) {
       console.log("val", val);
     },
-    changeCategary(item) {
-      this.categaryId = item.id;
-      this.brand = item.children || [];
+    changeCategary(data) {
+      this.categaryIndex = data.detail.value
+      this.brand = this.categary[this.categaryIndex].children || []
+      this.brandIndex = ''
+      this.show = false
     },
-    changeBrand(item) {
-      this.brandId = item.id;
+    changeBrand(data) {
+      this.brandIndex = data.detail.value
+      this.brandId = this.brand[this.brandIndex].id
+      this.scrollId = `brand${this.brandId}`
+    },
+    selectBrand(item) {
+      this.scrollId = ''
+      this.brandIndex = ''
+      this.brandId = item.id
     },
     loadMore() {
       if (this.loadStatus !== "nomore") {
         this.getPartsList();
       }
     },
+    apply(index) {
+      this.$set(this.lists[index], 'disabled', false)
+    },
+    numChange(val, index) {
+      this.$set(this.lists[index], 'num', val)
+    },
+    submit() {
+      console.log('submit')
+    }
   },
 };
 </script>
 
 <style lang="scss" scoped>
 .content {
-  padding: 30rpx;
   flex-direction: column;
   height: 100vh;
   .search {
     width: 100%;
+    padding: 30rpx;
   }
   .categary {
     width: 100%;
-    padding-top: 40rpx;
-    .label-title {
-      width: 100rpx;
+    padding: 0 30rpx 30rpx;
+    .txt {
+      font-size: 32rpx;
+      color: #333;
+      font-weight: bold;
+      margin-right: 15rpx;
     }
-    .label-content {
+  }
+  
+  .warp {
+    border-radius: 30rpx 30rpx 0 0;
+    padding: 30rpx 30rpx 0 30rpx;
+    width: 100%;
+    background: #fff;
+    flex-direction: column;
+    align-items: center;
+    flex: 1;
+    overflow: hidden;
+    .brand {
       width: 100%;
-      display: flex;
-      align-items: center;
-      overflow-x: auto;
-      min-height: 104rpx;
-      flex: 1;
-      .label-item {
+      border-bottom: 2rpx solid #F4F5F7;
+      padding-bottom: 20rpx;
+      .label-content {
+        flex: 1;
+        overflow: hidden;
         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;
-          }
+        border-right: 2rpx solid #F4F5F7;
+        .label-title {
+          color:#666;
+          background: #F4F5F7;
+          padding: 12rpx 40rpx;
+          margin-right: 20rpx;
+          border-radius: 10rpx;
+          display:inline-block;
           &.selected {
             color: #fff;
-            background-color: #2272ff;
-            border-color: #2272ff;
+            background: #2272ff;
           }
         }
       }
+      .more {
+        width: 100rpx;
+        padding-left: 20rpx;
+        .more-text {
+          color: #2272FF;
+          font-size: 26rpx;
+        }
+      }
+    }
+    .lists {
+      width: 100%;
+      flex: 1;
+      overflow-y: auto;
+      .load-more {
+        padding: 50rpx 0;
+      }
     }
   }
-  .lists {
+  .bar {
     width: 100%;
-    flex: 1;
-    overflow-y: auto;
-    .load-more {
-      padding: 50rpx 0;
-    }
+    border-top: 2rpx solid #F4F5F7;
   }
 }
 </style>