Skip to content

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

完工-可用备件

parent fbfb8d6b
Show whitespace changes
Inline Side-by-side
Showing with 212 additions and 93 deletions
src/components/select-parts/index.vue
View file @ b6fed07b
<template> <template>
<view class="parts"> <view class="u-flex parts">
<uni-list-item <view class="u-flex left" v-if="showChecked">
:title="info.name" <u-checkbox v-model="info.checked" @change="selectChange" shape="circle" width="30rpx"></u-checkbox>
:note="info.desc" </view>
:thumb="info.img" <view class="u-flex right">
thumb-size="lg" <view class="right-img">
:border="false" <u-image :src="info.img" width="200rpx" height="200rpx" />
> </view>
<template slot="header" class="u-flex"> <view class="u-flex right-content">
<view class="uni-list-item__header"> <view class="right-content-name">{{ info.name }}</view>
<view v-if="showChecked" class="uni-list-item__check"><u-checkbox v-model="info.checked" @change="selectChange" shape="circle"></u-checkbox></view> <view class="right-content-desc">{{ info.desc }}</view>
<view v-if="info.img" class="uni-list-item__icon"><image :src="info.img" class="uni-list-item__icon-img" /></view> <view class="u-flex right-content-opera">
<view class="no">
{{ info.no }}
</view> </view>
</template>
<template slot="footer" class="u-flex">
<view class="num"> <view class="num">
<u-number-box v-if="!disabled" v-model="info.num" :min="info.min" :max="info.max" @change="numChange"></u-number-box> <u-number-box v-if="!info.disabled" v-model="info.num" :min="info.min" :max="info.max" @change="numChange"></u-number-box>
<text class="nums" v-if="disabled">x{{ info.num || 1 }}</text> <u-button v-if="info.disabled" type="primary" size="mini" shape="circle" @click="addApply">加入申请</u-button>
</view>
</view>
</view>
</view> </view>
</template>
</uni-list-item>
</view> </view>
</template> </template>
...@@ -63,35 +64,59 @@ ...@@ -63,35 +64,59 @@
numChange(event) { numChange(event) {
this.$emit('numChange', event.value) this.$emit('numChange', event.value)
}, },
addApply() {
this.$emit('apply')
}
} }
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.parts{ .parts{
.uni-list-item__header {
display: flex;
flex-direction: row;
align-items: center;
}
.uni-list-item__icon {
margin-right: 18rpx;
flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
display: flex; padding: 30rpx 10rpx;
border-bottom: 1px solid #F4F5F7;
.left {
width: 60rpx;
} }
.right {
.uni-list-item__icon-img { flex: 1;
overflow: hidden;
.right-img {
padding-right: 20rpx;
}
.right-content {
flex: 1;
flex-direction: column;
align-items: flex-start;
overflow: hidden;
.right-content-name {
font-size: 32rpx;
color: #333;
font-weight: bold;
}
.right-content-desc {
font-size: 24rpx;
color: #999;
overflow: hidden;
line-height: 40rpx;
height: 80rpx; height: 80rpx;
width: 80rpx; margin: 10rpx 0;
margin-right: 10px; }
.right-content-opera {
justify-content: space-between;
width: 100%;
.no {
font-size: 24rpx;
color: #999;
overflow: hidden;
flex: 1;
} }
.num { .num {
display: flex; flex: 1;
align-items: center; text-align: right;
.nums { }
font-size: 28rpx; }
} }
} }
} }
......
src/pages.json
View file @ b6fed07b
...@@ -361,7 +361,7 @@ ...@@ -361,7 +361,7 @@
{ {
"path": "parts", "path": "parts",
"style": { "style": {
"navigationBarTitleText": "备件仓可用的配件" "navigationBarTitleText": "可用备件"
} }
}, },
{ {
......
src/pages/order/parts.vue
View file @ b6fed07b
<template> <template>
<view class="det-wrap"> <view class="u-flex det-wrap">
<view class="content"> <view class="content">
<scroll-view v-if="lists.length > 0" style="height: 70vh;" scroll-y="true"> <scroll-view v-if="lists.length > 0" style="height: 100%;" scroll-y="true">
<select-parts <select-parts
v-for="(item, index) in lists" v-for="(item, index) in lists"
:key="index" :key="index"
:info="item" :info="item"
:show-checked="true" :show-checked="false"
@numChange="numChange" @numChange="numChange($event, index)"
@selectChange="selectChange" @selectChange="selectChange($event, index)"
@apply="apply(index)"
></select-parts> ></select-parts>
</scroll-view> </scroll-view>
<view v-else class="empty">暂无可用备件</view> <view v-else class="empty">暂无可用备件</view>
</view> </view>
<view class="bottom" v-if="lists.length > 0"> <view class="u-flex bottom">
<button class="btn" @click="submit"> <view class="u-flex bottom-left">
<text class="button-text">保存，继续完工</text> <view class="left-list"><u-checkbox v-model="allChecked" @change="allSelect" shape="circle" width="30rpx" /></view>
</button> <view class="left-list">全选</view>
</view>
<view class="u-flex bottom-center">
<view class="center-list">已选择 {{ partNum }} 种配件</view>
<view class="center-list">合计 <text class="num"> {{ num }} </text> 件</view>
</view>
<view class="u-flex bottom-right">
<button :class="['btn', btnStatus]" @click="submit">确定</button>
</view>
</view> </view>
</view> </view>
</template> </template>
...@@ -30,37 +39,77 @@ ...@@ -30,37 +39,77 @@
}, },
data() { data() {
return { return {
allChecked: false,
lists: [ lists: [
{ {
id: 1, id: 1,
name: "正泰漏保", name: "正泰漏保",
desc: 'NO.202006170015', no: 'NO.202006170015',
desc: '这个空开盒子和其他的空开有什么不一样，这里可以写一下',
num: 1, num: 1,
min: 1, min: 1,
max: 100, max: 100,
img: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png", img: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
checked: false checked: false,
disabled: true
}, },
{ {
id: 1, id: 1,
name: "挚达广汽充电桩", name: "挚达广汽充电桩",
desc: 'NO.202006170014', no: 'NO.202006170014',
desc: '这个空开盒子和其他的空开有什么不一样，这里可以写一下',
num: 3, num: 3,
min: 1, min: 1,
max: 5, max: 5,
img: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png", img: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
checked: false 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
} }
], ],
val: [] val: []
} }
}, },
computed: {
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 ? 'btn-disabled' : ''
}
},
methods: { methods: {
numChange(val) { apply(index) {
console.log("val", val) this.$set(this.lists[index], 'disabled', false)
}, },
selectChange(val) { numChange(val, index) {
console.log("val", val) this.$set(this.lists[index], 'num', val)
},
selectChange(val, index) {
this.$set(this.lists[index], 'checked', val)
const count = this.lists.filter(v => !v.checked).length
this.allChecked = count === 0 || false
},
allSelect() {
const count = this.lists.filter(v => !v.checked).length
this.lists.forEach(v => {
this.$set(v, 'checked', count !== 0 || false)
})
}, },
submit() { submit() {
console.log("this.val", this.val) console.log("this.val", this.val)
...@@ -71,26 +120,67 @@ ...@@ -71,26 +120,67 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.det-wrap { .det-wrap {
background: #fff;
flex-flow: column;
height: 100vh;
.content { .content {
border-radius: 12rpx; border-radius: 12rpx;
background: #fff;
padding: 10rpx; padding: 10rpx;
min-height: 70vh; width: 100%;
}
.empty { .empty {
text-align: center; text-align: center;
font-size: 26rpx; font-size: 26rpx;
color: #aaa; color: #aaa;
} }
flex: 1;
overflow-y: auto;
}
.bottom { .bottom {
width: 100%; width: 100%;
padding: 0 40rpx; padding: 0 40rpx;
font-size: 28rpx; font-size: 28rpx;
position: fixed; height: 180rpx;
bottom: 100rpx; .u-flex {
left: 50%; flex-direction: column;
margin-left: -50%; align-items: center;
}
.bottom-left {
margin-right: 10rpx;
.left-list {
width: 100%;
&:nth-of-type(1) {
padding-left: 10rpx;
}
&:nth-of-type(2) {
padding-top: 20rpx;
}
}
}
.bottom-center {
flex: 1;
margin-right: 20rpx;
.center-list {
margin-right: auto;
&:nth-of-type(1) {
color: #666;
font-size: 26rpx;
}
&:nth-of-type(2) {
color: #333;
font-size: 28rpx;
margin-top: 20rpx;
.num {
color: #2272FF;
padding: 0 10rpx;
}
}
}
}
.bottom-right {
width: 340rpx;
.btn { .btn {
width: 100%;
padding: 30rpx; padding: 30rpx;
border-radius: 52rpx; border-radius: 52rpx;
line-height: 44rpx; line-height: 44rpx;
...@@ -104,6 +194,10 @@ ...@@ -104,6 +194,10 @@
border: none; border: none;
} }
} }
.btn-disabled {
background: #D1D4D4;
}
}
} }
} }
</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