Skip to content

S
self-support
Commit 384009e4 authored by Damon's avatar Damon
Browse files
Options

refactor: 物料选择-交互修改

parent 21ad03c9
Hide whitespace changes
Inline Side-by-side
Showing with 96 additions and 44 deletions
src/pages/parts/addParts.vue
View file @ 384009e4
<template>
<view class="u-flex content">
<view class="categary" v-if="type === '2'">
<view class="u-flex u-col-center">
<view :class="['txt', {'active': categoryId === item.categoryId }]" v-for="item in categary" :key="item.categoryId" @click="changeCategary(item)">{{item.label}}</view>
</view>
</view>
<view class="search">
<u-search
:clearabled="true"
......@@ -11,15 +17,6 @@
></u-search>
</view>
<view class="categary" v-if="type === '2'">
<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">{{categary[categaryIndex].label || '请选择'}}</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" v-if="brand.length > 0">
<view class="label-content u-flex">
......@@ -40,6 +37,25 @@
</view>
</view>
<view class="model u-flex" v-if="brand.length > 0">
<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 :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" @click="handleClick">
<!-- <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="#666" name="arrow-down"></u-icon>
</view>
</view>
<view class="lists">
<scroll-view
style="height:100%;"
......@@ -92,7 +108,7 @@ export default {
categary: [],
brand: [],
categaryIndex: 0,
categaryId: '',
categoryId: '',
brandIndex: 0,
brandId: 0,
scrollId: '',
......@@ -131,7 +147,7 @@ export default {
getApp().trackPage('选择配件页')
if (e) {
if (e.type == 1) {
this.categaryId = e.categaryId || ''
this.categoryId = e.categaryId || ''
this.type = e.type
this.getBrandList(e.brandId)
} else if (e.type == 2) {
......@@ -161,7 +177,11 @@ export default {
v.label = v.categoryName
return v
})
this.categaryId = this.categary[0].categoryId
this.categary.push({
categoryId: 2,
label: '非桩类',
})
this.categoryId = this.categary[0].categoryId
this.getBrandList()
} else {
this.getPartsList()
......@@ -171,28 +191,26 @@ export default {
},
// 获取品牌
getBrandList(id) {
this.$u.api.getBrandList({categoryId: this.categaryId}).then(res => {
this.$u.api.getBrandList({categoryId: this.categoryId}).then(res => {
if (res.code === 200) {
const data = res.data
if (data.length > 0) {
let item, index
this.brand = data.map((v, i) => {
if (id && parseInt(id) === v.brandId) {
item = v
index = i
}
v.label = v.brandName
return v
})
if (item && index) {
this.selectBrand(item, index)
this.scrollId = `brand${item.brandId}`
} else {
this.brandId = this.brand[0].brandId
this.lists = []
this.getPartsList()
let item, index
this.brand = data.map((v, i) => {
if (id && parseInt(id) === v.brandId) {
item = v
index = i
}
v.label = v.brandName
return v
})
if (item && index) {
this.selectBrand(item, index)
this.scrollId = `brand${item.brandId}`
} else {
this.brandId = this.brand?.[0]?.brandId
this.lists = []
this.getPartsList()
}
}
})
......@@ -204,7 +222,7 @@ export default {
const params = {
pageNumber: this.pageNumber,
pageSize: this.pageSize,
categoryId: this.categaryId || '',
categoryId: this.categoryId || '',
brandId: this.brandId || '',
keyword: this.keyword
}
......@@ -239,8 +257,7 @@ export default {
},
// 选择品类
changeCategary(data) {
this.categaryIndex = data.detail.value
this.categaryId = this.categary[this.categaryIndex || 0].categoryId
this.categoryId = data.categoryId
this.brandIndex = ''
this.show = false
this.pageNumber = 1
......@@ -272,7 +289,7 @@ export default {
},
// 点击更多
handleClick() {
this.$u.route({url: 'pages/order/document-tag' + '?categoryId=' + this.categaryId + '&selectedId=' + this.brandId})
this.$u.route({url: 'pages/order/document-tag' + '?categoryId=' + this.categoryId + '&selectedId=' + this.brandId})
},
// 加入申请
apply(item, index) {
......@@ -319,12 +336,17 @@ export default {
}
.categary {
width: 100%;
padding: 0 30rpx 30rpx;
padding: 20rpx 30rpx 0rpx;
.txt {
font-size: 32rpx;
font-size: 36rpx;
color: #333;
margin-right: 30rpx;
}
.active {
font-size: 48rpx;
color: #333;
font-weight: bold;
margin-right: 15rpx;
margin-right: 30rpx;
}
}
......@@ -339,7 +361,6 @@ export default {
overflow: hidden;
.brand {
width: 100%;
border-bottom: 2rpx solid #F4F5F7;
padding-bottom: 20rpx;
.label-content {
flex: 1;
......@@ -348,19 +369,50 @@ export default {
border-right: 2rpx solid #F4F5F7;
.label-title {
color:#666;
padding: 10rpx 0rpx;
margin-right: 40rpx;
display:inline-block;
font-size: 32rpx;
&.selected {
color: #2272ff;
border-bottom: 4rpx solid #2272ff;
font-size: 36rpx;
font-weight: bold;
}
}
}
.more {
width: 100rpx;
padding-left: 20rpx;
.more-text {
color: #2272FF;
font-size: 26rpx;
}
}
}
.model {
width: 100%;
padding: 20rpx 0;
.label-content {
flex: 1;
overflow: hidden;
padding-right: 20rpx;
border-right: 2rpx solid #F4F5F7;
.label-title {
background: #F4F5F7;
padding: 12rpx 40rpx;
color: #999;
padding: 7rpx 30rpx;
margin-right: 20rpx;
border-radius: 10rpx;
display:inline-block;
display: inline-block;
font-size: 26rpx;
border-radius: 30rpx;
&.selected {
color: #fff;
background: #2272ff;
background: #2272FF;
}
}
}
.more {
width: 100rpx;
padding-left: 20rpx;
.more-text {
color: #2272FF;
......
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