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 @@
</script>
<style scoped lang="scss">
.parts{
padding: 0 20rpx;
.lists {
padding: 10rpx 0;
.name {
......
src/components/submit-bar/index.vue
View file @ 70b65221
......@@ -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
View file @ 70b65221
......@@ -16,7 +16,7 @@
| btnStatus | Boolean | true | true/false | 确定按钮是否可点击 |
| partNum | Number | 0 | | 配件数量 |
| num | Number | 0 | | 合计总件数 |
| submitTxt | String | 确定 | | 确定按钮文字 |
### Events
......
src/pages/order/parts.vue
View file @ 70b65221
......@@ -15,6 +15,7 @@
<view v-else class="empty">暂无可用备件</view>
</view>
<view class="bar">
<submit-bar
:partNum="partNum"
:num="num"
......@@ -24,6 +25,7 @@
@submit="submit"
/>
</view>
</view>
</template>
<script>
......@@ -137,5 +139,8 @@
flex: 1;
overflow-y: auto;
}
.bar {
width: 100%;
}
}
</style>
src/pages/order/partsList.vue
View file @ 70b65221
......@@ -11,35 +11,31 @@
</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="['label-normal', { selected: item.id === categaryId }]"
@click="changeCategary(item)"
>
<text class="label-text">{{ item.name }}</text>
</view>
</view>
<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="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)"
<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"
>
<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>
......@@ -51,60 +47,82 @@
class="scroll-Y"
@scrolltolower="loadMore"
>
<uni-list-item
<select-parts
v-for="(item, index) in lists"
:key="index"
:title="item.title"
:note="item.desc"
showArrow
:thumb="item.img"
thumb-size="lg"
:rightText="item.price"
/>
: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>
</scroll-view>
</view>
</view>
<view class="bar">
<submit-bar
:partNum="partNum"
:num="num"
:btnStatus="btnStatus"
:show-checked="false"
submit-txt="去提交"
@submit="submit"
/>
</view>
</view>
</template>
<script>
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,71 +271,97 @@ 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%;
display: flex;
background: #fff;
flex-direction: column;
align-items: center;
overflow-x: auto;
min-height: 104rpx;
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;
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 {
......@@ -303,5 +372,10 @@ export default {
padding: 50rpx 0;
}
}
}
.bar {
width: 100%;
border-top: 2rpx solid #F4F5F7;
}
}
</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