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