feat: 配件选择API对接

src/common/api/parts.js

 let partsApiFun = function(vm){
 	// 接口公共前缀
 	const prefix = '/wxh-worker-rest/rest/'
-	let coverage = '/wxh-worker-rest/rest/coverage/' 
-	let parts = '/wxh-worker-rest/rest/parts/'
+	const coverage = '/wxh-worker-rest/rest/coverage/' 
+	const parts = '/wxh-worker-rest/rest/parts/'
+	const base = '/wxh-worker-rest/rest/base/'
 	
 	/**
 	 * 配件申请单-查询网点地址信息
 	 */
 	let getSiteAddress = async () => await vm.$u.get(coverage + vm.vuex_token + '/getSiteAddress');
+	/**
+	 * 配件过滤-品类列表
+	 */
+	let getCategoryList = async () => await vm.$u.get(base + vm.vuex_token + '/allow/category/list');
+	/**
+	 * 配件过滤-品牌列表
+	 */
+	let getBrandList = async (params = {}) => await vm.$u.get(base + vm.vuex_token + '/allow/brand/list', params);
+	 /**
+	 * 查询配件列表
+	 */
+	let getPartsList = async (params = {}) => await vm.$u.get(parts + vm.vuex_token + '/parts', params);
 	
 	const partsApi = {
-		getSiteAddress
+		getSiteAddress,
+		getCategoryList,
+		getBrandList,
+		getPartsList
 	}
 	return partsApi
 }

src/components/select-parts/adjust.md

@@ -18,7 +18,7 @@
 ```json
 {
   "name": "正泰漏保", // 配件名称
-  "num": 1, // 配件数量
+  "quantity": 1, // 配件数量
   "min": 1, // 数量最小值
   "max": 100 // 数量最大值
 }
@@ -56,14 +56,14 @@ export default {
         {
           id: 1,
           name: "正泰漏保",
-          num: 1,
+          quantity: 1,
           min: 1,
           max: 100,
         },
         {
           id: 1,
           name: "挚达广汽充电桩",
-          num: 3,
+          quantity: 3,
           min: 1,
           max: 5,
         },

src/components/select-parts/adjust.vue

@@ -5,7 +5,7 @@
         {{info.name}}
       </view>
       <view class="num">
-        <u-number-box v-if="!disabled" v-model="info.num" :min="info.min || 0" :max="info.max || info.num" @change="numChange"></u-number-box>
+        <u-number-box v-if="!disabled" v-model="info.quantity" :min="info.min || 0" :max="info.max || info.quantity" @change="numChange"></u-number-box>
         <text class="nums" v-else>x{{ info.num || 1 }}</text>
       </view>
     </view>

src/components/select-parts/index.md

@@ -19,12 +19,12 @@
 {
   id: 1,
   name: "正泰漏保", // 名称
-  no: 'NO.202006170015', // 编号
-  desc: '这个空开盒子和其他的空开有什么不一样，这里可以写一下', // 描述
-  num: 1, // 默认数量
+  code: 'NO.202006170015', // 编号
+  remark: '这个空开盒子和其他的空开有什么不一样，这里可以写一下', // 描述
+  quantity: 1, // 默认数量
   min: 1, // 数量最小值
   max: 100, // 数量最大值
-  img: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png", // 图片
+  images: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png", // 图片
   checked: false, // 是否勾选
   disabled: true // 是否禁用数量调整，如果禁用则会显示添加申请按钮
 }
@@ -66,24 +66,24 @@ export default {
         {
             id: 1,
             name: "正泰漏保",
-            no: 'NO.202006170015',
-            desc: '这个空开盒子和其他的空开有什么不一样，这里可以写一下',
-            num: 1,
+            code: 'NO.202006170015',
+            remark: '这个空开盒子和其他的空开有什么不一样，这里可以写一下',
+            quantity: 1,
             min: 1,
             max: 100,
-            img: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
+            image: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
             checked: false,
             disabled: true
           },
           {
             id: 1,
             name: "挚达广汽充电桩",
-            no: 'NO.202006170014',
-            desc: '这个空开盒子和其他的空开有什么不一样，这里可以写一下',
-            num: 3,
+            code: 'NO.202006170014',
+            remark: '这个空开盒子和其他的空开有什么不一样，这里可以写一下',
+            quantity: 3,
             min: 1,
             max: 5,
-            img: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
+            image: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
             checked: false,
             disabled: true
           },

src/components/select-parts/index.vue

@@ -5,17 +5,17 @@
     </view>
     <view class="u-flex right">
       <view class="right-img">
-        <u-image :src="info.img" width="200rpx" height="200rpx" />
+        <u-image :src="info.images" width="200rpx" height="200rpx" />
       </view>
       <view class="u-flex right-content">
         <view class="right-content-name">{{ info.name }}</view>
-        <view class="right-content-desc">{{ info.desc }}</view>
+        <view class="right-content-desc">{{ info.remark }}</view>
         <view class="u-flex right-content-opera">
           <view class="no">
-            {{ info.no }}
+            {{ info.code }}
           </view>
           <view class="num">
-            <u-number-box v-if="!info.disabled" v-model="info.num" :min="info.min || 0" :max="info.max || info.num" @change="numChange"></u-number-box>
+            <u-number-box v-if="!info.disabled" v-model="info.quantity" :min="info.min || 0" :max="info.max || info.quantity" @change="numChange"></u-number-box>
             <u-button v-if="info.disabled" type="primary" size="mini" shape="circle" @click="addApply">加入申请</u-button>
           </view>
         </view>

src/pages/parts/addParts.vue

@@ -5,6 +5,7 @@
         :clearabled="true"
         :action-style="searchStyle"
         bg-color="#fff"
+        v-model="keyword"
         @custom="searchParts"
         @search="searchParts"
       ></u-search>
@@ -13,7 +14,7 @@
     <view class="categary">
       <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>
+          <view class="txt">{{categary[categaryIndex].label || '请选择'}}</view>
         </picker>
         <u-icon class="input-icon" color="#2272FF" :name="show ? 'arrow-up' : 'arrow-down'"></u-icon>
       </view>
@@ -28,7 +29,7 @@
             class="u-flex"
             :scroll-into-view="scrollId"
           >
-            <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>
+            <view :id="`brand${item.brandId}`" :class="['label-title', { selected: item.brandId === brandId }]" v-for="(item, index) in brand" :key="index" @click="selectBrand(item, index)">{{ item.label }}</view>
           </scroll-view>
         </view>
         <view class="more u-flex">
@@ -66,7 +67,7 @@
       <submit-bar 
         :partNum="partNum"
         :num="num"
-        :btnStatus="btnStatus"
+        :btnStatus="partNum > 0"
         :show-checked="false"
         submit-txt="去提交"
         @submit="submit"
@@ -76,132 +77,6 @@
 </template>
 
 <script>
-const categary = [
-  {
-    id: 1,
-    label: "充电桩",
-    value: 1,
-    children: [
-      {
-        id: 1,
-        parentId: 1,
-        label: "沃尔沃",
-      },
-      {
-        id: 2,
-        parentId: 1,
-        label: "宝马",
-      },
-      {
-        id: 3,
-        parentId: 1,
-        label: "奔驰",
-      },
-      {
-        id: 4,
-        parentId: 1,
-        label: "奥迪",
-      },
-      {
-        id: 5,
-        parentId: 1,
-        label: "保时捷",
-      },
-    ],
-  },
-  {
-    id: 2,
-    label: "空调",
-    value: 2,
-    children: [
-      {
-        id: 3,
-        parentId: 2,
-        label: "美的",
-      },
-      {
-        id: 4,
-        parentId: 2,
-        label: "格力",
-      },
-    ],
-  },
-];
-
-const lists = [
-  {
-    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
-  },
-  {
-    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
-  },
-  {
-    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
-  },
-  {
-    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
-  },
-  {
-    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
-  },
-  {
-    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 selectParts from "@/components/select-parts/index"
 import submitBar from "@/components/submit-bar/index"
@@ -212,18 +87,19 @@ export default {
   },
   data() {
     return {
+      keyword: '',
       show: false,
-      categary: categary,
+      categary: [],
       brand: [],
       categaryIndex: 0,
+      categaryId: '',
       brandIndex: 0,
       brandId: '',
       scrollId: '',
       loadStatus: "loadmore",
-      lists: lists,
-      size: 5,
-      page: 1,
-      count: 1
+      lists: [],
+      pageSize: 20,
+      pageNumber: 1
     };
   },
   computed: {
@@ -232,73 +108,133 @@ export default {
         color: "#2272FF"
       };
     },
-    categrayName() {
-      return this.categary[this.categaryIndex].label
-    },
     // 配件数
     partNum() {
-      return this.lists.reduce((counter, { checked }) => checked ? counter += 1 : counter, 0)
+      return this.lists.reduce((counter, item) => !item.disabled && item.quantity > 0 ? 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
+      return this.lists.reduce((counter, { disabled, quantity }) => !disabled ? counter += quantity : counter, 0)
     }
   },
   created() {
-    this.brand = this.categary[0].children
+    this.getCategaryList()
   },
   methods: {
+    // 获取品类
+    getCategaryList() {
+      this.$u.api.getCategoryList().then(res => {
+        if (res.code === 200) {
+          const data = res.data
+          this.categary = data.list ? data.list.map(v => {
+            v.label = v.categoryName
+            return v
+          }) : []
+          this.categaryId = this.categary[0].categoryId
+          this.getBrandList()
+        }
+      })
+    },
+    // 获取品牌
+    getBrandList() {
+      this.$u.api.getBrandList({categoryId: this.categaryId}).then(res => {
+        if (res.code === 200) {
+          const data = res.data
+          this.brand = data.list ? data.list.map(v => {
+            v.label = v.brandName
+            return v
+          }) : []
+          this.brandId = this.brand[0].brandId
+          this.lists = []
+          this.getPartsList()
+        }
+      })
+    },
+    // 获取配件列表
     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"
+      const params = {
+        pageNumber: this.pageNumber,
+        pageSize: this.pageSize,
+        categoryId: this.categaryId,
+        brandId: this.brandId,
+        keyword: this.keyword
+      }
+      this.$u.api.getPartsList(params).then(res => {
+        if (res.code === 200) {
+          const data = res.data
+          if (data.length > 0) {
+            const lists = data.map(v => {
+              v.quantity = 0
+              v.disabled = true
+              v.max = 999
+              return v
+            })
+            this.lists = this.lists.concat(lists)
+            this.pageNumber++
+            this.loadStatus = "loadmore"
+          } else {
+            this.loadStatus = "nomore"
+          }
+          
         }
-      }, 1000)
+      })
     },
+    // 搜索配件
     searchParts(val) {
-      console.log("val", val);
+      this.keyword = val
+      this.lists = []
+      this.getPartsList()
     },
+    // 选择品类
     changeCategary(data) {
       this.categaryIndex = data.detail.value
-      this.brand = this.categary[this.categaryIndex].children || []
+      this.categaryId = this.categary[this.categaryIndex || 0].categoryId
       this.brandIndex = ''
       this.show = false
+      this.getBrandList()
+      this.getPartsList()
     },
+    // 下拉选择品牌
     changeBrand(data) {
       this.brandIndex = data.detail.value
-      this.brandId = this.brand[this.brandIndex].id
+      this.brandId = this.brand[this.brandIndex].brandId
       this.scrollId = `brand${this.brandId}`
+      this.lists = []
+      this.getPartsList()
     },
-    selectBrand(item) {
+    // 点击选择品牌
+    selectBrand(item, index) {
       this.scrollId = ''
-      this.brandIndex = ''
-      this.brandId = item.id
+      this.brandIndex = index
+      this.brandId = item.brandId
+      this.lists = []
+      this.getPartsList()
     },
+    // 加载更多
     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)
+      this.$set(this.lists[index], 'quantity', val)
     },
+    // 提交
     submit() {
+      const lists = this.lists.filter(v => !v.disabled).map(v => {
+        return {
+          part_id: v.id,
+          quantity: v.quantity
+        }
+      })
+      console.log("lists", lists)
       console.log('submit')
     }
   },