Skip to content

S
self-support
Commit 70b65221 authored by Damon's avatar Damon
Browse files
Options

配件选择页面

parent ff5082c3
Show whitespace changes
Inline Side-by-side
Showing with 261 additions and 174 deletions
src/components/select-parts/adjust.vue
View file @ 70b65221
...@@ -43,7 +43,6 @@ ...@@ -43,7 +43,6 @@
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.parts{ .parts{
padding: 0 20rpx;
.lists { .lists {
padding: 10rpx 0; padding: 10rpx 0;
.name { .name {
......
src/components/submit-bar/index.vue
View file @ 70b65221
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<view class="center-list">合计 <text class="num"> {{ num }} </text> 件</view> <view class="center-list">合计 <text class="num"> {{ num }} </text> 件</view>
</view> </view>
<view class="u-flex bottom-right"> <view class="u-flex bottom-right">
<button :class="['btn', btnActive]" @click="submit">确定</button> <button :class="['btn', btnActive]" @click="submit">{{ submitTxt }}</button>
</view> </view>
</view> </view>
</template> </template>
...@@ -46,6 +46,12 @@ ...@@ -46,6 +46,12 @@
default () { default () {
return 0 return 0
} }
},
submitTxt: { // 提交按钮文字
type: String,
default () {
return '确定'
}
} }
}, },
data() { data() {
...@@ -80,12 +86,14 @@ ...@@ -80,12 +86,14 @@
.bottom { .bottom {
width: 100%; width: 100%;
height: 180rpx; height: 180rpx;
background: #fff;
justify-content: space-between;
.u-flex { .u-flex {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.bottom-left { .bottom-left {
margin-right: 10rpx; margin-left: 30rpx;
.left-list { .left-list {
width: 100%; width: 100%;
&:nth-of-type(1) { &:nth-of-type(1) {
...@@ -98,8 +106,8 @@ ...@@ -98,8 +106,8 @@
} }
.bottom-center { .bottom-center {
flex: 1; flex: 1;
margin-right: 20rpx;
align-items: flex-start; align-items: flex-start;
margin: 0 20rpx;
.center-list { .center-list {
&:nth-of-type(1) { &:nth-of-type(1) {
color: #666; color: #666;
...@@ -118,6 +126,7 @@ ...@@ -118,6 +126,7 @@
} }
.bottom-right { .bottom-right {
width: 340rpx; width: 340rpx;
margin-right: 20rpx;
.btn { .btn {
width: 100%; width: 100%;
padding: 30rpx; padding: 30rpx;
......
src/components/submit-bar/readme.md
View file @ 70b65221
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
| btnStatus | Boolean | true | true/false | 确定按钮是否可点击 | | btnStatus | Boolean | true | true/false | 确定按钮是否可点击 |
| partNum | Number | 0 | | 配件数量 | | partNum | Number | 0 | | 配件数量 |
| num | Number | 0 | | 合计总件数 | | num | Number | 0 | | 合计总件数 |
| submitTxt | String | 确定 | | 确定按钮文字 |
### Events ### Events
......
src/pages/order/parts.vue
View file @ 70b65221
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
<view v-else class="empty">暂无可用备件</view> <view v-else class="empty">暂无可用备件</view>
</view> </view>
<view class="bar">
<submit-bar <submit-bar
:partNum="partNum" :partNum="partNum"
:num="num" :num="num"
...@@ -24,6 +25,7 @@ ...@@ -24,6 +25,7 @@
@submit="submit" @submit="submit"
/> />
</view> </view>
</view>
</template> </template>
<script> <script>
...@@ -137,5 +139,8 @@ ...@@ -137,5 +139,8 @@
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
} }
.bar {
width: 100%;
}
} }
</style> </style>
src/pages/order/partsList.vue
View file @ 70b65221
...@@ -11,35 +11,31 @@ ...@@ -11,35 +11,31 @@
</view> </view>
<view class="categary"> <view class="categary">
<view class="u-flex u-col-center u-row-around"> <view class="u-flex u-col-center">
<view class="label-title">品类：</view> <picker mode="selector" :value="categaryIndex" range-key="label" :range="categary" @click="show = true" @change="changeCategary">
<view class="label-content"> <view class="txt">{{categrayName || '请选择'}}</view>
<view </picker>
v-for="(item, index) in categary" <u-icon class="input-icon" color="#2272FF" :name="show ? 'arrow-up' : 'arrow-down'"></u-icon>
: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> </view>
<view class="u-flex u-col-center u-row-around">
<view class="label-title">品牌：</view> <view class="warp u-flex">
<view class="label-content"> <view class="brand u-flex">
<view v-for="(item, index) in brand" :key="index" class="label-item"> <view class="label-content u-flex">
<view <scroll-view
:class="['label-normal', { selected: item.id === brandId }]" style="width:100%;white-space: nowrap;"
@click="changeBrand(item)" scroll-x="true"
class="u-flex"
:scroll-into-view="scrollId"
> >
<text class="label-text">{{ item.name }}</text> <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> </scroll-view>
</view>
</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> </view>
...@@ -51,60 +47,82 @@ ...@@ -51,60 +47,82 @@
class="scroll-Y" class="scroll-Y"
@scrolltolower="loadMore" @scrolltolower="loadMore"
> >
<uni-list-item <select-parts
v-for="(item, index) in lists" v-for="(item, index) in lists"
:key="index" :key="index"
:title="item.title" :info="item"
:note="item.desc" :show-checked="false"
showArrow @numChange="numChange($event, index)"
:thumb="item.img" @apply="apply(index)"
thumb-size="lg" ></select-parts>
:rightText="item.price"
/>
<view class="load-more"> <view class="load-more">
<u-loadmore :status="loadStatus" @loadmore="loadMore" /> <u-loadmore :status="loadStatus" @loadmore="loadMore" />
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
</view> </view>
<view class="bar">
<submit-bar
:partNum="partNum"
:num="num"
:btnStatus="btnStatus"
:show-checked="false"
submit-txt="去提交"
@submit="submit"
/>
</view>
</view>
</template> </template>
<script> <script>
const categary = [ const categary = [
{ {
id: 1, id: 1,
name: "充电桩", label: "充电桩",
value: 1,
children: [ children: [
{ {
id: 1, id: 1,
parentId: 1, parentId: 1,
name: "沃尔沃", label: "沃尔沃",
}, },
{ {
id: 2, id: 2,
parentId: 1, parentId: 1,
name: "宝马", label: "宝马",
}, },
{ {
id: 3, id: 3,
parentId: 1, parentId: 1,
name: "奔驰", label: "奔驰",
},
{
id: 4,
parentId: 1,
label: "奥迪",
},
{
id: 5,
parentId: 1,
label: "保时捷",
}, },
], ],
}, },
{ {
id: 2, id: 2,
name: "空调", label: "空调",
value: 2,
children: [ children: [
{ {
id: 3, id: 3,
parentId: 2, parentId: 2,
name: "美的", label: "美的",
}, },
{ {
id: 4, id: 4,
parentId: 2, parentId: 2,
name: "格力", label: "格力",
}, },
], ],
}, },
...@@ -112,92 +130,98 @@ const categary = [ ...@@ -112,92 +130,98 @@ const categary = [
const lists = [ const lists = [
{ {
title: "空开盒子", id: 1,
desc: "NO.202006060000", name: "正泰漏保",
img: no: 'NO.202006170015',
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png", desc: '这个空开盒子和其他的空开有什么不一样，这里可以写一下',
price: "10元", num: 1,
}, min: 1,
{ max: 100,
title: "空开盒子", img: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
desc: "NO.202006060000", checked: false,
img: disabled: true
"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: "空开盒子", id: 1,
desc: "NO.202006060000", name: "挚达广汽充电桩",
img: no: 'NO.202006170014',
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png", desc: '这个空开盒子和其他的空开有什么不一样，这里可以写一下',
price: "10元", 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: "空开盒子", id: 1,
desc: "NO.202006060000", name: "正泰漏保",
img: no: 'NO.202006170015NO.202006170015',
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png", desc: '这个充电桩的简介可以写的长一点',
price: "10元", 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: "空开盒子", id: 1,
desc: "NO.202006060000", name: "正泰漏保",
img: no: 'NO.202006170015NO.202006170015',
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png", desc: '这个充电桩的简介可以写的长一点',
price: "10元", 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: "空开盒子", id: 1,
desc: "NO.202006060000", name: "正泰漏保",
img: no: 'NO.202006170015NO.202006170015',
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png", desc: '这个充电桩的简介可以写的长一点',
price: "10元", 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: "空开盒子", id: 1,
desc: "NO.202006060000", name: "正泰漏保",
img: no: 'NO.202006170015NO.202006170015',
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png", desc: '这个充电桩的简介可以写的长一点',
price: "10元", 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 selectParts from "@/components/select-parts/index"
import uniListItem from "@/components/uni-list-item/uni-list-item.vue"; import submitBar from "@/components/submit-bar/index"
export default { export default {
components: { components: {
uniList, selectParts,
uniListItem, submitBar
}, },
data() { data() {
return { return {
show: false,
categary: categary, categary: categary,
brand: [], brand: [],
categaryId: "", categaryIndex: 0,
brandId: "", brandIndex: 0,
brandId: '',
scrollId: '',
loadStatus: "loadmore", loadStatus: "loadmore",
lists: lists, lists: lists,
size: 10, size: 5,
page: 1, page: 1,
count: 1 count: 1
}; };
...@@ -208,6 +232,25 @@ export default { ...@@ -208,6 +232,25 @@ export default {
color: "#2272FF" 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: { methods: {
getPartsList() { getPartsList() {
...@@ -228,71 +271,97 @@ export default { ...@@ -228,71 +271,97 @@ export default {
searchParts(val) { searchParts(val) {
console.log("val", val); console.log("val", val);
}, },
changeCategary(item) { changeCategary(data) {
this.categaryId = item.id; this.categaryIndex = data.detail.value
this.brand = item.children || []; this.brand = this.categary[this.categaryIndex].children || []
this.brandIndex = ''
this.show = false
}, },
changeBrand(item) { changeBrand(data) {
this.brandId = item.id; 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() { loadMore() {
if (this.loadStatus !== "nomore") { if (this.loadStatus !== "nomore") {
this.getPartsList(); 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.content { .content {
padding: 30rpx;
flex-direction: column; flex-direction: column;
height: 100vh; height: 100vh;
.search { .search {
width: 100%; width: 100%;
padding: 30rpx;
} }
.categary { .categary {
width: 100%; width: 100%;
padding-top: 40rpx; padding: 0 30rpx 30rpx;
.label-title { .txt {
width: 100rpx; 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%; width: 100%;
display: flex; background: #fff;
flex-direction: column;
align-items: center; align-items: center;
overflow-x: auto;
min-height: 104rpx;
flex: 1; flex: 1;
.label-item { overflow: hidden;
.brand {
width: 100%;
border-bottom: 2rpx solid #F4F5F7;
padding-bottom: 20rpx;
.label-content {
flex: 1;
overflow: hidden;
padding-right: 20rpx; padding-right: 20rpx;
flex-shrink: 0; border-right: 2rpx solid #F4F5F7;
.label-title {
.label-normal { color:#666;
height: 70rpx; background: #F4F5F7;
width: 160rpx; padding: 12rpx 40rpx;
font-size: 26rpx; margin-right: 20rpx;
color: #333; border-radius: 10rpx;
background-color: #fff; display:inline-block;
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 { &.selected {
color: #fff; color: #fff;
background-color: #2272ff; background: #2272ff;
border-color: #2272ff;
} }
} }
} }
.more {
width: 100rpx;
padding-left: 20rpx;
.more-text {
color: #2272FF;
font-size: 26rpx;
}
} }
} }
.lists { .lists {
...@@ -303,5 +372,10 @@ export default { ...@@ -303,5 +372,10 @@ export default {
padding: 50rpx 0; padding: 50rpx 0;
} }
} }
}
.bar {
width: 100%;
border-top: 2rpx solid #F4F5F7;
}
} }
</style> </style>
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