修改调整页面样式
This commit is contained in:
@@ -6,7 +6,23 @@
|
||||
{{data.productName}}
|
||||
</view>
|
||||
<view class="u-flex u-m-t-32">
|
||||
<up-number-box :buttonSize="44" :inputWidth="220" v-model="number"></up-number-box>
|
||||
<up-number-box :min="1" :max="data.num" :buttonSize="44" v-model="number" integer>
|
||||
<template #minus>
|
||||
<view class="minus number-box-btn">
|
||||
</view>
|
||||
</template>
|
||||
<template #input>
|
||||
<view class="u-flex-1 u-row-center u-text-center input">
|
||||
<up-input @change="parseIntNumber($event,false)" @blur="parseIntNumber($event,true)"
|
||||
v-model="number" border="none" type="number"></up-input>
|
||||
</view>
|
||||
</template>
|
||||
<template #plus>
|
||||
<view class="plus number-box-btn">
|
||||
<up-icon name="plus" color="#999" size="16" bold></up-icon>
|
||||
</view>
|
||||
</template>
|
||||
</up-number-box>
|
||||
</view>
|
||||
<view class="u-m-t-32">
|
||||
<view class="u-font-24">
|
||||
@@ -14,13 +30,15 @@
|
||||
<text class="color-red">*</text>
|
||||
</view>
|
||||
<view class="u-flex u-flex-wrap u-m-t-24">
|
||||
<view class="u-flex u-m-r-16 u-m-b-16" v-for="(item,index) in tags" :key="index">
|
||||
<up-tag @click="changeTagSel(item)" :text="item.label" plain borderColor="#E6FOFF" color="#318AFE" v-if="item.checked"> </up-tag>
|
||||
<up-tag @click="changeTagSel(item)" borderColor="#E5E5E5" color="#666" :text="item.label" plain v-else> </up-tag>
|
||||
<view class="u-flex u-m-r-16 u-m-b-16" v-for="(item,index) in tags" :key="index">
|
||||
<up-tag @click="changeTagSel(item)" :text="item.label" plain borderColor="#E6FOFF"
|
||||
color="#318AFE" v-if="item.checked"> </up-tag>
|
||||
<up-tag @click="changeTagSel(item)" borderColor="#E5E5E5" color="#666" :text="item.label"
|
||||
plain v-else> </up-tag>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-24">
|
||||
<up-input placeholder="备注"></up-input>
|
||||
<up-textarea v-model="form.note" placeholder="备注"></up-textarea>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -29,19 +47,22 @@
|
||||
<view class="u-p-t-18 u-p-l-30 u-p-r-30 u-p-b-30">
|
||||
<my-button box-shadow shape="circle" @tap="confirm">确认退菜</my-button>
|
||||
<view class="u-m-t-10">
|
||||
<my-button @tap="toggleModelShow" shape="circle" bgColor="#fff" type="cancel" box-shadow>取消</my-button>
|
||||
<my-button @tap="toggleModelShow" shape="circle" bgColor="#fff" type="cancel"
|
||||
box-shadow>取消</my-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</template>
|
||||
</my-model>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
reactive,
|
||||
ref,
|
||||
watch
|
||||
} from 'vue';
|
||||
import infoBox from '@/commons/utils/infoBox.js'
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
@@ -52,13 +73,48 @@
|
||||
default: false
|
||||
}
|
||||
})
|
||||
const emits = defineEmits(['update:show','confirm'])
|
||||
const form = reactive({
|
||||
note: ''
|
||||
})
|
||||
const emits = defineEmits(['update:show', 'confirm'])
|
||||
let model = ref(null)
|
||||
let modelShow = ref(props.show)
|
||||
let number = ref(1)
|
||||
const tags=ref([{label:"点错",checked:false},{label:"不想要了",checked:false} ,{label:"食材不足",checked:false} ,{label:"等待时间过长",checked:false}])
|
||||
function changeTagSel(item){
|
||||
item.checked=!item.checked
|
||||
const tags = ref([{
|
||||
label: "点错",
|
||||
checked: false
|
||||
}, {
|
||||
label: "不想要了",
|
||||
checked: false
|
||||
}, {
|
||||
label: "食材不足",
|
||||
checked: false
|
||||
}, {
|
||||
label: "等待时间过长",
|
||||
checked: false
|
||||
}])
|
||||
let timer = null
|
||||
|
||||
function parseIntNumber(val, isNow) {
|
||||
console.log(val);
|
||||
let newval = parseInt(val)
|
||||
if (newval > props.data.num) {
|
||||
newval = props.data.num
|
||||
}
|
||||
if (newval < 1) {
|
||||
newval = 1
|
||||
}
|
||||
if (isNow) {
|
||||
number.value = parseInt(newval)
|
||||
return
|
||||
}
|
||||
timer = setTimeout(() => {
|
||||
number.value = newval
|
||||
}, 100)
|
||||
}
|
||||
|
||||
function changeTagSel(item) {
|
||||
item.checked = !item.checked
|
||||
}
|
||||
watch(() => props.show, (newval) => {
|
||||
modelShow.value = newval
|
||||
@@ -71,9 +127,9 @@
|
||||
close()
|
||||
}
|
||||
})
|
||||
|
||||
function toggleModelShow(show){
|
||||
modelShow.value=show?true:false
|
||||
|
||||
function toggleModelShow(show) {
|
||||
modelShow.value = show ? true : false
|
||||
}
|
||||
|
||||
function onModelClose() {
|
||||
@@ -91,13 +147,65 @@
|
||||
function close() {
|
||||
model.value.close()
|
||||
}
|
||||
function confirm(){
|
||||
emits('confirm')
|
||||
|
||||
function confirm() {
|
||||
const selTag = tags.value.filter(item => item.checked).map(item => item.label).join(",")
|
||||
const note = selTag + (form.note.length > 0 ? "," + form.note : "");
|
||||
console.log({
|
||||
note,
|
||||
num: number.value
|
||||
});
|
||||
if (!note) {
|
||||
return infoBox.showToast("请输入退菜原因");
|
||||
}
|
||||
emits('confirm', {
|
||||
note,
|
||||
num: number.value
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .u-border{
|
||||
border-width: 1px!important;
|
||||
.number-box-btn {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 122rpx;
|
||||
height: 84rpx;
|
||||
background: #F7F7FA;
|
||||
border-radius: 8rpx 0rpx 0rpx 8rpx;
|
||||
border: 2rpx solid #F9F9F9;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.input {
|
||||
border: 2rpx solid #F9F9F9;
|
||||
}
|
||||
|
||||
::v-deep .u-input__content__field-wrapper__field {
|
||||
height: 84rpx;
|
||||
}
|
||||
|
||||
::v-deep .uni-input-input {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.minus {
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 28rpx;
|
||||
height: 0rpx;
|
||||
border: 1px solid #999999;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .u-border {
|
||||
border-width: 1px !important;
|
||||
}
|
||||
|
||||
::v-deep .u-number-box {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user