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>
<view class="parts">
<uni-list-item
:title="info.name"
:note="info.desc"
:thumb="info.img"
thumb-size="lg"
:border="false"
>
<template slot="header" class="u-flex">
<view class="uni-list-item__header">
<view v-if="showChecked" class="uni-list-item__check"><u-checkbox v-model="info.checked" @change="selectChange" shape="circle"></u-checkbox></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 parts">
<view class="u-flex left" v-if="showChecked">
<u-checkbox v-model="info.checked" @change="selectChange" shape="circle" width="30rpx"></u-checkbox>
</view>
<view class="u-flex right">
<view class="right-img">
<u-image :src="info.img" 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="u-flex right-content-opera">
<view class="no">
{{ info.no }}
</view>
</template>
<template slot="footer" class="u-flex">
<view class="num">
<u-number-box v-if="!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-number-box v-if="!info.disabled" v-model="info.num" :min="info.min" :max="info.max" @change="numChange"></u-number-box>
<u-button v-if="info.disabled" type="primary" size="mini" shape="circle" @click="addApply">加入申请</u-button>
</view>
</view>
</view>
</view>
</template>
</uni-list-item>
</view>
</template>
......@@ -63,35 +64,59 @@
numChange(event) {
this.$emit('numChange', event.value)
},
addApply() {
this.$emit('apply')
}
}
}
</script>
<style scoped lang="scss">
.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;
align-items: center;
display: flex;
padding: 30rpx 10rpx;
border-bottom: 1px solid #F4F5F7;
.left {
width: 60rpx;
}
.uni-list-item__icon-img {
.right {
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;
width: 80rpx;
margin-right: 10px;
margin: 10rpx 0;
}
.right-content-opera {
justify-content: space-between;
width: 100%;
.no {
font-size: 24rpx;
color: #999;
overflow: hidden;
flex: 1;
}
.num {
display: flex;
align-items: center;
.nums {
font-size: 28rpx;
flex: 1;
text-align: right;
}
}
}
}
}
......
src/pages.json
View file @ b6fed07b
......@@ -361,7 +361,7 @@
{
"path": "parts",
"style": {
"navigationBarTitleText": "备件仓可用的配件"
"navigationBarTitleText": "可用备件"
}
},
{
......
src/pages/order/parts.vue
View file @ b6fed07b
<template>
<view class="det-wrap">
<view class="u-flex det-wrap">
<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
v-for="(item, index) in lists"
:key="index"
:info="item"
:show-checked="true"
@numChange="numChange"
@selectChange="selectChange"
:show-checked="false"
@numChange="numChange($event, index)"
@selectChange="selectChange($event, index)"
@apply="apply(index)"
></select-parts>
</scroll-view>
<view v-else class="empty">暂无可用备件</view>
</view>
<view class="bottom" v-if="lists.length > 0">
<button class="btn" @click="submit">
<text class="button-text">保存，继续完工</text>
</button>
<view class="u-flex bottom">
<view class="u-flex bottom-left">
<view class="left-list"><u-checkbox v-model="allChecked" @change="allSelect" shape="circle" width="30rpx" /></view>
<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>
</template>
......@@ -30,37 +39,77 @@
},
data() {
return {
allChecked: false,
lists: [
{
id: 1,
name: "正泰漏保",
desc: 'NO.202006170015',
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
checked: false,
disabled: true
},
{
id: 1,
name: "挚达广汽充电桩",
desc: 'NO.202006170014',
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
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: []
}
},
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: {
numChange(val) {
console.log("val", val)
apply(index) {
this.$set(this.lists[index], 'disabled', false)
},
selectChange(val) {
console.log("val", val)
numChange(val, index) {
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() {
console.log("this.val", this.val)
......@@ -71,26 +120,67 @@
<style lang="scss" scoped>
.det-wrap {
background: #fff;
flex-flow: column;
height: 100vh;
.content {
border-radius: 12rpx;
background: #fff;
padding: 10rpx;
min-height: 70vh;
}
width: 100%;
.empty {
text-align: center;
font-size: 26rpx;
color: #aaa;
}
flex: 1;
overflow-y: auto;
}
.bottom {
width: 100%;
padding: 0 40rpx;
font-size: 28rpx;
position: fixed;
bottom: 100rpx;
left: 50%;
margin-left: -50%;
height: 180rpx;
.u-flex {
flex-direction: column;
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 {
width: 100%;
padding: 30rpx;
border-radius: 52rpx;
line-height: 44rpx;
......@@ -104,6 +194,10 @@
border: none;
}
}
.btn-disabled {
background: #D1D4D4;
}
}
}
}
</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