329 lines
7.6 KiB
Vue
329 lines
7.6 KiB
Vue
<template>
|
||
<view class="min-page bg-gray u-p-30 u-font-28">
|
||
<view class="u-font-24">
|
||
<text class="color-red">*</text>
|
||
<text class="color-999">将临时菜添加至购物车，不会影响总商品库</text>
|
||
</view>
|
||
<view class="form">
|
||
<uni-forms ref="refform" label-position="top" :model="form" label-align="left" label-width="300"
|
||
:rules="rules">
|
||
<uni-forms-item required label="" name="name">
|
||
<template #label>
|
||
<view class="u-text-left">
|
||
<text class="color-333">菜品名称</text>
|
||
<text class="color-red">*</text>
|
||
</view>
|
||
</template>
|
||
<view class="border-bottom ">
|
||
<uni-easyinput :inputBorder="false" paddingNone v-model="form.name"
|
||
placeholder="填写菜品名称"></uni-easyinput>
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item required label="" name="category">
|
||
<template #label>
|
||
<view class="u-text-left ">
|
||
<text class="color-333">菜品分类</text>
|
||
<text class="color-red">*</text>
|
||
</view>
|
||
</template>
|
||
<picker @change="categoryChange" :value="categoryCurrent" range-key="name" :range="category">
|
||
<view class=" u-flex u-row-between border-bottom u-relative ">
|
||
<view class="zhezhao u-absolute position-all" style="z-index: 1;"></view>
|
||
<!-- <view>
|
||
<text class="" v-if="form.category!==''">{{category[form.category].name}}</text>
|
||
<text class="color-999 " v-else>选择分类</text>
|
||
</view> -->
|
||
<view class="u-flex-1">
|
||
<uni-easyinput :inputBorder="false" paddingNone v-model="form.category"
|
||
placeholder="选择分类"></uni-easyinput>
|
||
</view>
|
||
<uni-icons type="right" size="18" color="#999"></uni-icons>
|
||
</view>
|
||
|
||
</picker>
|
||
|
||
</uni-forms-item>
|
||
|
||
<uni-forms-item required label="" name="price">
|
||
<template #label>
|
||
<view class=" u-text-left">
|
||
<text class="color-333">价格(元)</text>
|
||
<text class="color-red">*</text>
|
||
</view>
|
||
</template>
|
||
<view class="border-bottom ">
|
||
<uni-easyinput :inputBorder="false" paddingNone v-model="form.price" placeholder="输入价格"
|
||
type="digit"></uni-easyinput>
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item required label="" name="unit">
|
||
<template #label>
|
||
<view class="u-text-left ">
|
||
<text class="color-333">单位</text>
|
||
<text class="color-red">*</text>
|
||
</view>
|
||
</template>
|
||
<picker @change="unitChange" :value="units.current" range-key="name" :range="units.list">
|
||
<view class=" u-flex u-row-between border-bottom u-relative ">
|
||
<view class="zhezhao u-absolute position-all" style="z-index: 1;"></view>
|
||
<view class="u-flex-1">
|
||
<uni-easyinput :inputBorder="false" paddingNone v-model="form.unit"
|
||
placeholder="选择单位"></uni-easyinput>
|
||
</view>
|
||
<uni-icons type="right" size="18" color="#999"></uni-icons>
|
||
</view>
|
||
|
||
</picker>
|
||
|
||
</uni-forms-item>
|
||
<uni-forms-item required label="" name="num">
|
||
<template #label>
|
||
<view class=" u-text-left">
|
||
<text class="color-333">下单数量</text>
|
||
<text class="color-red">*</text>
|
||
</view>
|
||
</template>
|
||
<view class="border-bottom ">
|
||
<uni-easyinput :inputBorder="false" paddingNone v-model="form.num" placeholder="填写数量"
|
||
type="digit"></uni-easyinput>
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item required label="" name="note">
|
||
<template #label>
|
||
<view class=" u-text-left">
|
||
<text class="color-333">备注</text>
|
||
</view>
|
||
</template>
|
||
<view class="border u-m-t-16">
|
||
<uni-easyinput :inputBorder="false" paddingNone v-model="form.note" placeholder="请输入自定义备注"
|
||
type="textarea"></uni-easyinput>
|
||
</view>
|
||
</uni-forms-item>
|
||
</uni-forms>
|
||
</view>
|
||
|
||
<view style="height: 200rpx;"></view>
|
||
</view>
|
||
|
||
<view class="fixed-b">
|
||
<my-button shape="circle" @tap="submit">加入购物车</my-button>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
returnAllCategory
|
||
} from '@/pageProduct/util.js'
|
||
import {
|
||
$tbShopCategory,
|
||
$tbShopUnit
|
||
} from '@/http/yskApi/goods.js'
|
||
import {
|
||
$temporaryDishes
|
||
} from '@/http/yskApi/Instead.js'
|
||
import {
|
||
reactive,
|
||
onMounted,
|
||
ref,
|
||
onBeforeMount,
|
||
} from 'vue';
|
||
import {
|
||
onLoad,
|
||
onShow
|
||
} from '@dcloudio/uni-app'
|
||
const units = reactive({
|
||
list: [],
|
||
current: ''
|
||
})
|
||
let category = reactive([])
|
||
let categoryCurrent = ref('')
|
||
|
||
function categoryChange(e) {
|
||
console.log(e);
|
||
categoryCurrent.value = e.detail.value
|
||
form.category = category[e.detail.value].name
|
||
}
|
||
|
||
function unitChange(e) {
|
||
units.current = e.detail.value
|
||
form.unit = units.list[e.detail.value].name
|
||
}
|
||
|
||
const refform = ref(null)
|
||
const form = reactive({
|
||
name: '',
|
||
category: '',
|
||
price: '',
|
||
unit: '',
|
||
num: ''
|
||
})
|
||
// 校验规则
|
||
const rules = {
|
||
name: {
|
||
rules: [{
|
||
required: true,
|
||
errorMessage: '菜品名称不能为空'
|
||
}]
|
||
},
|
||
category: {
|
||
rules: [{
|
||
required: true,
|
||
errorMessage: '请选择菜品分类'
|
||
}]
|
||
},
|
||
num: {
|
||
rules: [{
|
||
required: true,
|
||
errorMessage: '请输入价格'
|
||
}]
|
||
},
|
||
unit: {
|
||
rules: [{
|
||
required: true,
|
||
errorMessage: '请选择单位'
|
||
}]
|
||
},
|
||
price: {
|
||
rules: [{
|
||
required: true,
|
||
errorMessage: '请填写下单数量'
|
||
}]
|
||
},
|
||
}
|
||
let timer = null
|
||
|
||
function submit() {
|
||
refform.value.validate(res => {
|
||
console.log(res)
|
||
if (!res) {
|
||
$temporaryDishes({
|
||
"useType": option.useType,
|
||
"masterId": option.masterId,
|
||
"tableId": option.tableId,
|
||
"name": form.name,
|
||
"categoryId": category[categoryCurrent.value].id,
|
||
"price": form.price,
|
||
"num": form.num,
|
||
unit: units.list[units.current].id,
|
||
"note": form.note,
|
||
"vipUserId": option.vipUserId
|
||
}).then(r => {
|
||
uni.$emit('add:cashCai')
|
||
clearInterval(timer)
|
||
timer = setTimeout(() => {
|
||
uni.navigateBack()
|
||
}, 500)
|
||
})
|
||
}
|
||
}).catch(err => {
|
||
console.log(err);
|
||
})
|
||
}
|
||
//获取单位数据
|
||
async function getTbShopUnit() {
|
||
const res = await $tbShopUnit({
|
||
page: 0,
|
||
size: 200,
|
||
sort: "id"
|
||
})
|
||
units.list = res.content.map(v => {
|
||
return {
|
||
...v,
|
||
value: v.id
|
||
}
|
||
})
|
||
}
|
||
async function getCategory() {
|
||
const res = await $tbShopCategory({
|
||
page: 0,
|
||
size: 600
|
||
})
|
||
const arr = forList(res.content).map(v => {
|
||
return {
|
||
...v,
|
||
value: v.id
|
||
}
|
||
})
|
||
category.length = arr.length
|
||
for (let i in arr) {
|
||
category[i] = arr[i]
|
||
}
|
||
}
|
||
|
||
function forList(arr) {
|
||
let arrs = []
|
||
arr.forEach(ele => {
|
||
arrs.push(ele)
|
||
if (ele.childrenList.length) {
|
||
ele.childrenList.forEach(res => {
|
||
arrs.push(res)
|
||
})
|
||
}
|
||
})
|
||
return arrs
|
||
}
|
||
async function init() {
|
||
getTbShopUnit()
|
||
getCategory()
|
||
}
|
||
// onMounted(() => {
|
||
// init()
|
||
// })
|
||
onLoad((opt) => {
|
||
Object.assign(option, opt)
|
||
setTimeout(() => {
|
||
init()
|
||
}, 600)
|
||
})
|
||
|
||
onBeforeMount(() => {
|
||
clearInterval(timer)
|
||
})
|
||
const option = reactive({
|
||
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.u-text-left {}
|
||
|
||
.form {
|
||
margin-top: 32rpx;
|
||
background-color: #fff;
|
||
padding: 32rpx 24rpx 32rpx 24rpx;
|
||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||
// background-color: transparent;
|
||
}
|
||
|
||
.border {
|
||
border: 1px solid #F4F4F4;
|
||
border-radius: 12rpx;
|
||
overflow: hidden;
|
||
padding-left: 24rpx;
|
||
}
|
||
|
||
::v-deep.uni-forms-item {
|
||
align-items: inherit;
|
||
}
|
||
|
||
::v-deep.uni-forms-item__error {
|
||
display: none;
|
||
}
|
||
|
||
::v-deep .uni-easyinput__content-input {
|
||
height: inherit;
|
||
padding-top: 16rpx;
|
||
padding-bottom: 24rpx;
|
||
}
|
||
|
||
::v-deep .uni-forms-item:not(:first-child) {
|
||
margin-top: 24rpx;
|
||
}
|
||
|
||
.fixed-b {
|
||
position: fixed;
|
||
left: 100rpx;
|
||
right: 100rpx;
|
||
bottom: 100rpx;
|
||
}
|
||
</style> |