Skip to content

S
self-support
Commit 67248afc authored by Damon's avatar Damon
Browse files
Options

feat: 配件选择API对接

parent 755531e2
Show whitespace changes
Inline Side-by-side
Showing with 137 additions and 185 deletions
src/common/api/parts.js
View file @ 67248afc
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
View file @ 67248afc
......@@ -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
View file @ 67248afc
......@@ -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
View file @ 67248afc
......@@ -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
View file @ 67248afc
......@@ -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
View file @ 67248afc
......@@ -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++
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')
}
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment