Skip to content

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

选择组件样式调整

parent dc1d6968
Hide whitespace changes
Inline Side-by-side
Showing with 412 additions and 172 deletions
src/components/createCom/XhParts.vue
View file @ 33b41120
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<template> <template>
<view class="complete-part"> <view class="complete-part">
<view v-if="status === 1"> <view v-if="status === 1">
<select-parts :lists="lists" @change="partsChange" :disabled="disabled"></select-parts> <adjust-parts v-for="(item, index) in lists" :key="index" :info="item" @change="partsChange($event, index)" :disabled="disabled"></adjust-parts>
</view> </view>
<view v-else-if="status === 2"> <view v-else-if="status === 2">
<view class="content"> <view class="content">
...@@ -18,12 +18,12 @@ ...@@ -18,12 +18,12 @@
</template> </template>
<script> <script>
import selectParts from "@/components/parts/index" import adjustParts from "@/components/select-parts/adjust"
import arrMixin from './arrMixin' import arrMixin from './arrMixin'
export default { export default {
name: 'XhParts', name: 'XhParts',
components: { components: {
selectParts adjustParts
}, },
mixins: [arrMixin], mixins: [arrMixin],
props: { props: {
...@@ -53,8 +53,8 @@ ...@@ -53,8 +53,8 @@
} }
}, },
methods: { methods: {
partsChange(val) { partsChange(val, index) {
console.log("val", val) console.log("val", val, index)
}, },
toParts() { toParts() {
// uni.navigateTo({ // uni.navigateTo({
......
src/components/parts/index.vue deleted 100644 → 0
View file @ dc1d6968
<template>
<view class="parts">
<view class="u-flex u-col-center u-row-around lists" v-if="showTitle">
<view v-if="showChecked && !disabled" class="check">
</view>
<view class="u-flex-1">
<text class="txt">配件名称</text>
</view>
<view class="num">
<text class="txt">数量</text>
</view>
</view>
<view class="u-flex u-col-center u-row-around lists" v-for="(item, index) in val" :key="index">
<view v-if="showChecked && !disabled" class="check">
<u-checkbox v-model="item.checked" :name="index" @change="checkChange"></u-checkbox>
</view>
<view class="u-flex-1 name">
{{item.name}}
</view>
<view class="num">
<u-number-box v-if="!disabled" v-model="item.num" :min="item.min" :max="item.max" :index="index" @change="numChange"></u-number-box>
<text class="nums" v-else>*{{ item.num || 1 }}</text>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
lists: { // 数据列表
default () {
return []
}
},
showChecked: { // 是否需要勾选
type: Boolean,
default () {
return false
}
},
showTitle: { // 是否显示标题
type: Boolean,
default () {
return false
}
},
disabled: {
type: Boolean,
default () {
return false
}
}
},
data() {
return {
val: []
}
},
created() {
this.val = this.lists.map(v => {
if(this.showChecked) v.checked = v.checked || false
return v
})
},
methods: {
checkChange(event) {
this.$set(this.val[event.name], 'checked', event.value)
this.valueChange()
},
numChange(event) {
this.$set(this.val[event.index], 'num', event.value)
this.valueChange()
},
valueChange() {
const lists = this.showChecked ? this.val.filter(v => v.checked) : this.val
this.$emit('change', lists)
}
}
}
</script>
<style scoped lang="scss">
.parts{
padding: 0 20rpx;
.lists {
padding: 10rpx 0;
.txt {
font-size: 28rpx;
color: #2271FF;
}
.check {
width: 80rpx;
text-align: center;
}
.name {
font-size: 26rpx;
}
.num {
width: 200rpx;
text-align: center;
.nums {
color: #F59A23;
}
}
}
}
</style>
src/components/select-parts/adjust.md 0 → 100644
View file @ 33b41120
## 配件组件使用说明
```
该组件用于仓库配件的数量调整
```
## API
### Props
| 属性名 | 类型 | 默认值 | 可选值 | 说明 |
| :------: | :-----: | :----: | :--------: | :-----------------: |
| info | Boject | {} | - | 数据 **格式见下文** |
| disabled | Boolean | true | true/false | 是否禁用 |
### lists 格式
```json
{
"name": "正泰漏保", // 配件名称
"num": 1, // 配件数量
"min": 1, // 数量最小值
"max": 100 // 数量最大值
}
```
### Events
| 事件称名 | 说明 | 返回值 |
| :------: | :----------------: | :------: |
| @change | 数量发生改变时返回 | 新的数量 |
## 组件用法
### 基础用法
```html
<adjust-parts
v-for="(item, index) in lists"
:key="index"
:info="item"
@change="partsChange($event, index)"
:disabled="disabled"
></adjust-parts>
```
```js
import adjustParts from "@/components/parts/adjust"
export default {
components: {
adjustParts,
},
data() {
return {
lists: [
{
id: 1,
name: "正泰漏保",
num: 1,
min: 1,
max: 100,
},
{
id: 1,
name: "挚达广汽充电桩",
num: 3,
min: 1,
max: 5,
},
],
}
},
methods: {
partsChange(val, index) {
console.log("val", val, index)
},
},
}
```
src/components/select-parts/adjust.vue 0 → 100644
View file @ 33b41120
<template>
<view class="parts">
<view class="u-flex u-col-center u-row-around lists">
<view class="u-flex-1 name">
{{info.name}}
</view>
<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-else>x{{ info.num || 1 }}</text>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
info: {
default () {
return {}
}
},
disabled: {
type: Boolean,
default () {
return false
}
}
},
data() {
return {
}
},
created() {
},
methods: {
numChange(event) {
this.$emit('change', event.value)
}
}
}
</script>
<style scoped lang="scss">
.parts{
padding: 0 20rpx;
.lists {
padding: 10rpx 0;
.name {
font-size: 26rpx;
}
.num {
width: 200rpx;
text-align: center;
.nums {
//color: #F59A23;
}
}
}
}
</style>
src/components/parts/readme.md → src/components/select-parts/index.md
View file @ 33b41120
...@@ -11,43 +11,29 @@ ...@@ -11,43 +11,29 @@
| 属性名 | 类型 | 默认值 | 可选值 | 说明 | | 属性名 | 类型 | 默认值 | 可选值 | 说明 |
| :---------: | :-----: | :----: | :--------: | :---------------------: | | :---------: | :-----: | :----: | :--------: | :---------------------: |
| showChecked | Boolean | false | true/false | 是否需要复选框 | | showChecked | Boolean | false | true/false | 是否需要复选框 |
| showTitle | Boolean | false | true/false | 是否显示标题 | | disabled | Boolean | true | true/false | 是否禁用 |
| disabled | Boolean | true | true/false | 是否禁用 | | info | Object | {} | - | 列表数据 **格式见下文** |
| lists | Array | [] | - | 列表数据 **格式见下文** |
### lists 格式 ### lists 格式
```json ```json
[ {
{ "name": "正泰漏保", // 配件名称
name: '正泰漏保', // 配件名称 "num": 1, // 配件数量
num: 1, // 配件数量 "min": 1, // 数量最小值
min: 1, // 数量最小值 "max": 100, // 数量最大值
max: 100, // 数量最大值 "desc": "NO.202006170015", // 描述
checked: false // 勾选状态，如果需要回显勾选状态需传 "img": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png", // 图片地址
} "checked": false // 勾选状态，如果需要回显勾选状态需传
] }
``` ```
### Events ### Events
| 事件称名 | 说明 | 返回值 | | 事件称名 | 说明 | 返回值 |
| :------: | :----------------------------------: | :-----------------------------------------------------: | | :-----------: | :----------: | :--------: |
| @change | 数据发生改变时（勾选或改变数量）返回 | 改变后的数据(如有勾选，只返回勾选的数据) **格式见下文** | | @numChange | 数量发生改变 | 改变的数量 |
| @selectChange | 勾选发生改变 | 勾选的状态 |
### 返回数据格式
```json
[
{
name: '正泰漏保',
num: 1,
min: 1,
max: 100,
checked: true
}
]
```
## 组件用法 ## 组件用法
...@@ -55,10 +41,12 @@ ...@@ -55,10 +41,12 @@
```html ```html
<select-parts <select-parts
:lists="lists" v-for="(item, index) in lists"
:key="index"
:info="item"
:show-checked="true" :show-checked="true"
:show-title="true" @numChange="numChange"
@change="partsChange" @selectChange="selectChange"
></select-parts> ></select-parts>
``` ```
...@@ -66,7 +54,7 @@ ...@@ -66,7 +54,7 @@
import selectParts from "@/components/parts/index" import selectParts from "@/components/parts/index"
export default { export default {
components: { components: {
selectParts selectParts,
}, },
data() { data() {
return { return {
...@@ -74,24 +62,35 @@ export default { ...@@ -74,24 +62,35 @@ export default {
{ {
id: 1, id: 1,
name: "正泰漏保", name: "正泰漏保",
desc: "NO.202006170015",
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",
checked: false,
}, },
{ {
id: 1, id: 2,
name: "挚达广汽充电桩", name: "挚达广汽充电桩",
desc: "NO.202006170014",
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",
checked: false,
}, },
] ],
} }
}, },
methods: { methods: {
partsChange(val) { numChange(val) {
console.log("val", val)
},
selectChange(val) {
console.log("val", val) console.log("val", val)
}, },
}, },
}; }
``` ```
src/components/select-parts/index.vue 0 → 100644
View file @ 33b41120
<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>
</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>
</view>
</template>
</uni-list-item>
</view>
</template>
<script>
import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
export default {
components: {
uniListItem,
},
props: {
info: {
info () {
return {}
}
},
showChecked: { // 是否需要勾选
type: Boolean,
default () {
return false
}
},
disabled: { // 是否可编辑数量
type: Boolean,
default () {
return false
}
}
},
data() {
return {
}
},
created() {
console.log("this.info", this.info)
},
methods: {
selectChange(event) {
this.$emit('selectChange', event.value)
},
numChange(event) {
this.$emit('numChange', event.value)
},
}
}
</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;
}
.uni-list-item__icon-img {
height: 80rpx;
width: 80rpx;
margin-right: 10px;
}
.num {
display: flex;
align-items: center;
.nums {
font-size: 28rpx;
}
}
}
</style>
src/components/uni-list-item/uni-list-item.vue
View file @ 33b41120
...@@ -66,7 +66,7 @@ ...@@ -66,7 +66,7 @@
* @property {Boolean} switchChecked = [true|false] Switch是否被选中 * @property {Boolean} switchChecked = [true|false] Switch是否被选中
* @property {Boolean} showExtraIcon = [true|false] 左侧是否显示扩展图标 * @property {Boolean} showExtraIcon = [true|false] 左侧是否显示扩展图标
* @property {Object} extraIcon 扩展图标参数，格式为 {color: '#4cd964',size: '22',type: 'spinner'} * @property {Object} extraIcon 扩展图标参数，格式为 {color: '#4cd964',size: '22',type: 'spinner'}
* @property {String} direction = [row|column] 排版方向 * @property {String} direction = [row|column] 排版方向
* @value row 水平排列 * @value row 水平排列
* @value column 垂直排列 * @value column 垂直排列
* @event {Function} click 点击 uniListItem 触发事件 * @event {Function} click 点击 uniListItem 触发事件
...@@ -168,29 +168,29 @@ export default { ...@@ -168,29 +168,29 @@ export default {
isFirstChild: false isFirstChild: false
}; };
}, },
mounted() { mounted() {
this.list = this.getForm() this.list = this.getForm()
// 判断是否存在 uni-list 组件 // 判断是否存在 uni-list 组件
if(this.list){ if(this.list){
if (!this.list.firstChildAppend) { if (!this.list.firstChildAppend) {
this.list.firstChildAppend = true; this.list.firstChildAppend = true;
this.isFirstChild = true; this.isFirstChild = true;
} }
} }
}, },
methods: { methods: {
/** /**
* 获取父元素实例 * 获取父元素实例
*/ */
getForm(name = 'uniList') { getForm(name = 'uniList') {
let parent = this.$parent; let parent = this.$parent;
let parentName = parent.$options.name; let parentName = parent.$options.name;
while (parentName !== name) { while (parentName !== name) {
parent = parent.$parent; parent = parent.$parent;
if (!parent) return false if (!parent) return false
parentName = parent.$options.name; parentName = parent.$options.name;
} }
return parent; return parent;
}, },
onClick() { onClick() {
if (this.to !== '') { if (this.to !== '') {
...@@ -216,16 +216,16 @@ export default { ...@@ -216,16 +216,16 @@ export default {
pageApi(api) { pageApi(api) {
uni[api]({ uni[api]({
url: this.to, url: this.to,
success: res => { success: res => {
this.$emit('click', { this.$emit('click', {
data: res data: res
}); });
}, },
fail: err => { fail: err => {
this.$emit('click', { this.$emit('click', {
data: err data: err
}); });
console.error(err.errMsg); console.error(err.errMsg);
} }
}); });
} }
...@@ -242,12 +242,12 @@ $list-item-pd: $uni-spacing-col-lg $uni-spacing-row-lg; ...@@ -242,12 +242,12 @@ $list-item-pd: $uni-spacing-col-lg $uni-spacing-row-lg;
/* #endif */ /* #endif */
font-size: $uni-font-size-lg; font-size: $uni-font-size-lg;
position: relative; position: relative;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
background-color: #fff; background-color: #fff;
flex-direction: row; flex-direction: row;
/* #ifdef H5 */ /* #ifdef H5 */
cursor: pointer; cursor: pointer;
/* #endif */ /* #endif */
} }
...@@ -267,7 +267,7 @@ $list-item-pd: $uni-spacing-col-lg $uni-spacing-row-lg; ...@@ -267,7 +267,7 @@ $list-item-pd: $uni-spacing-col-lg $uni-spacing-row-lg;
flex-direction: row; flex-direction: row;
padding: $list-item-pd; padding: $list-item-pd;
padding-left: $uni-spacing-row-lg; padding-left: $uni-spacing-row-lg;
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
// align-items: center; // align-items: center;
} }
...@@ -316,7 +316,7 @@ $list-item-pd: $uni-spacing-col-lg $uni-spacing-row-lg; ...@@ -316,7 +316,7 @@ $list-item-pd: $uni-spacing-col-lg $uni-spacing-row-lg;
color: #3b4144; color: #3b4144;
// overflow: hidden; // overflow: hidden;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
overflow: hidden; overflow: hidden;
} }
...@@ -325,13 +325,14 @@ $list-item-pd: $uni-spacing-col-lg $uni-spacing-row-lg; ...@@ -325,13 +325,14 @@ $list-item-pd: $uni-spacing-col-lg $uni-spacing-row-lg;
} }
.uni-list-item__content-title { .uni-list-item__content-title {
font-size: $uni-font-size-base; font-size: 32rpx;
color: #3b4144; color: #333;
font-weight: 700;
overflow: hidden; overflow: hidden;
} }
.uni-list-item__content-note { .uni-list-item__content-note {
margin-top: 6rpx; margin-top: 20rpx;
color: $uni-text-color-grey; color: $uni-text-color-grey;
font-size: $uni-font-size-sm; font-size: $uni-font-size-sm;
overflow: hidden; overflow: hidden;
...@@ -367,7 +368,7 @@ $list-item-pd: $uni-spacing-col-lg $uni-spacing-row-lg; ...@@ -367,7 +368,7 @@ $list-item-pd: $uni-spacing-col-lg $uni-spacing-row-lg;
display: block; display: block;
/* #endif */ /* #endif */
height: $uni-img-size-base; height: $uni-img-size-base;
width: $uni-img-size-base; width: $uni-img-size-base;
margin-right: 10px; margin-right: 10px;
} }
...@@ -380,15 +381,15 @@ $list-item-pd: $uni-spacing-col-lg $uni-spacing-row-lg; ...@@ -380,15 +381,15 @@ $list-item-pd: $uni-spacing-col-lg $uni-spacing-row-lg;
} }
.flex--direction { .flex--direction {
flex-direction: column; flex-direction: column;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
align-items: initial; align-items: initial;
/* #endif */ /* #endif */
} }
.flex--justify { .flex--justify {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
justify-content: initial; justify-content: initial;
/* #endif */ /* #endif */
} }
...@@ -435,4 +436,4 @@ $list-item-pd: $uni-spacing-col-lg $uni-spacing-row-lg; ...@@ -435,4 +436,4 @@ $list-item-pd: $uni-spacing-col-lg $uni-spacing-row-lg;
lines: 2; lines: 2;
/* #endif */ /* #endif */
} }
</style> </style>
src/pages/order/complete.vue
View file @ 33b41120
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
<view class="class-item" :id="'item' + groupIndex" :key="groupIndex"> <view class="class-item" :id="'item' + groupIndex" :key="groupIndex">
<view class="title">{{groupItem.name}}</view> <view class="title">{{groupItem.name}}</view>
<view class="class-bd"> <view class="class-bd">
<xh-parts :status="1"></xh-parts>
<u-form-item v-for="(item,itemIndex) in groupItem.items" :key="itemIndex" label-position="top" <u-form-item v-for="(item,itemIndex) in groupItem.items" :key="itemIndex" label-position="top"
:prop="item.fieldsName" :border-bottom="false" v-show="item.fieldsName != 'actualPaid' || show200" :id="`item${item.fieldsId}`"> :prop="item.fieldsName" :border-bottom="false" v-show="item.fieldsName != 'actualPaid' || show200" :id="`item${item.fieldsId}`">
<view class="label" v-if="item.formType!=='location'&&item.formType!=='form'&&item.formType!=='label'"> <view class="label" v-if="item.formType!=='location'&&item.formType!=='form'&&item.formType!=='label'">
...@@ -110,6 +111,7 @@ ...@@ -110,6 +111,7 @@
import XhServiceMeasure from '@/components/createCom/XhServiceMeasure.vue' import XhServiceMeasure from '@/components/createCom/XhServiceMeasure.vue'
import XhServiceMore from "@/components/createCom/XhServiceMore" import XhServiceMore from "@/components/createCom/XhServiceMore"
import XhLabel from "@/components/createCom/XhLabel" import XhLabel from "@/components/createCom/XhLabel"
import XhParts from "@/components/createCom/XhParts"
import takePhoto from '@/components/take/index.vue' import takePhoto from '@/components/take/index.vue'
import baseFile from '@/components/upload/index' import baseFile from '@/components/upload/index'
...@@ -273,6 +275,7 @@ ...@@ -273,6 +275,7 @@
XhServiceMeasure, XhServiceMeasure,
XhServiceMore, XhServiceMore,
XhLabel, XhLabel,
XhParts,
'take-photo': takePhoto 'take-photo': takePhoto
}, },
mixins: [baseFile], mixins: [baseFile],
......
src/pages/order/parts.vue
View file @ 33b41120
...@@ -3,10 +3,12 @@ ...@@ -3,10 +3,12 @@
<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: 70vh;" scroll-y="true">
<select-parts <select-parts
:lists="lists" v-for="(item, index) in lists"
:key="index"
:info="item"
:show-checked="true" :show-checked="true"
:show-title="true" @numChange="numChange"
@change="partsChange" @selectChange="selectChange"
></select-parts> ></select-parts>
</scroll-view> </scroll-view>
<view v-else class="empty">暂无可用备件</view> <view v-else class="empty">暂无可用备件</view>
...@@ -21,7 +23,7 @@ ...@@ -21,7 +23,7 @@
</template> </template>
<script> <script>
import selectParts from "@/components/parts/index" import selectParts from "@/components/select-parts/index"
export default { export default {
components: { components: {
selectParts selectParts
...@@ -32,24 +34,33 @@ ...@@ -32,24 +34,33 @@
{ {
id: 1, id: 1,
name: "正泰漏保", name: "正泰漏保",
desc: 'NO.202006170015',
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",
checked: false
}, },
{ {
id: 1, id: 1,
name: "挚达广汽充电桩", name: "挚达广汽充电桩",
desc: 'NO.202006170014',
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",
checked: false
} }
], ],
val: [] val: []
} }
}, },
methods: { methods: {
partsChange(val) { numChange(val) {
this.val = val console.log("val", val)
},
selectChange(val) {
console.log("val", val)
}, },
submit() { submit() {
console.log("this.val", this.val) console.log("this.val", this.val)
...@@ -60,11 +71,10 @@ ...@@ -60,11 +71,10 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.det-wrap { .det-wrap {
margin: 30rpx;
.content { .content {
border-radius: 12rpx; border-radius: 12rpx;
background: #fff; background: #fff;
padding: 30rpx; padding: 10rpx;
min-height: 70vh; min-height: 70vh;
} }
.empty { .empty {
......
src/uview-ui/components/u-number-box/u-number-box.vue
View file @ 33b41120
...@@ -99,7 +99,7 @@ ...@@ -99,7 +99,7 @@
// input宽度，单位rpx // input宽度，单位rpx
inputWidth: { inputWidth: {
type: [Number, String], type: [Number, String],
default: 80 default: 60
}, },
// input高度，单位rpx // input高度，单位rpx
inputHeight: { inputHeight: {
...@@ -335,7 +335,7 @@ ...@@ -335,7 +335,7 @@
.u-icon-plus, .u-icon-plus,
.u-icon-minus { .u-icon-minus {
width: 60rpx; width: 50rpx;
@include vue-flex; @include vue-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
......
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