270 lines
7.7 KiB
Vue
270 lines
7.7 KiB
Vue
<template>
|
||
<el-dialog
|
||
title="预约"
|
||
:visible.sync="dialogVisible"
|
||
width="500px"
|
||
@close="reset"
|
||
>
|
||
<el-form
|
||
ref="form"
|
||
:model="form"
|
||
:rules="rules"
|
||
label-width="120px"
|
||
label-position="left"
|
||
>
|
||
|
||
<el-form-item label="预约日期" prop="bookingDate">
|
||
<!-- <el-date-picker
|
||
v-model="form.bookingDate"
|
||
type="date"
|
||
value-format="yyyy-MM-dd"
|
||
:picker-options="pickerOptions"
|
||
placeholder="选择预约日期"
|
||
style="width: 200px;margin-right: 10px;"
|
||
@change="getShopTableList"
|
||
/> -->
|
||
<el-radio-group
|
||
v-model="form.bookingDate"
|
||
class="date"
|
||
@change="getShopTableList"
|
||
>
|
||
<el-radio-button
|
||
v-for="(item) in dateList"
|
||
:key="item.date"
|
||
:label="item.date"
|
||
>
|
||
<div style="font-size: 12px;margin-bottom: 4px;">{{ item.label }} / {{ item.date.substring(8,10) }}</div>
|
||
<div style="font-size: 12px;"> {{ item.day }}</div>
|
||
</el-radio-button>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="预约类型" prop="bookingType">
|
||
<el-radio-group v-model="form.bookingType" @change="getShopTableList">
|
||
<el-radio-button label="lunch">午餐</el-radio-button>
|
||
<el-radio-button label="dinner">晚餐</el-radio-button>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="就餐时间" prop="bookingTime">
|
||
<el-time-picker
|
||
v-model="form.bookingTime"
|
||
value-format="HH:mm:ss"
|
||
placeholder="选择时间"
|
||
style="width: 100%;"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="预约桌台" prop="shopTableId">
|
||
<el-select v-model="form.shopTableId" placeholder="请选择" style="width: 100%;">
|
||
<el-option
|
||
v-for="item in shopTableList"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="用餐人数" prop="dinerNum">
|
||
<el-input-number v-model="form.dinerNum" :min="1" controls-position="right" style="width: 100%;"/>
|
||
</el-form-item>
|
||
<el-form-item label="订餐人" prop="bookingPerson">
|
||
<el-input v-model="form.bookingPerson" style="width: 200px;margin-right: 10px;" placeholder="请输入联系人姓名" />
|
||
<el-radio-group v-model="form.gender">
|
||
<el-radio-button label="1">先生</el-radio-button>
|
||
<el-radio-button label="2">女士</el-radio-button>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="联系电话" prop="phoneNumber">
|
||
<el-input v-model="form.phoneNumber" oninput="value= value.replace(/[^0-9]/g, '')" maxlength="11" placeholder="请输入联系电话" />
|
||
</el-form-item>
|
||
</el-form>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||
<el-button
|
||
type="primary"
|
||
:loading="loading"
|
||
@click="onSubmitHandle"
|
||
>确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script>
|
||
import { getShopTableList, makeShopTable } from '@/api/table'
|
||
import dayjs from 'dayjs'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
dialogVisible: false,
|
||
resetForm: '',
|
||
loading: false,
|
||
pickerOptions: {
|
||
disabledDate(time) {
|
||
return time.getTime() < Date.now() - 8.64e7 // 如果今天之前的日期都不可选，减去8.64e7是1天的毫秒数
|
||
}
|
||
},
|
||
dateList: [
|
||
{ label: '今', day: '', date: '' },
|
||
{ label: '明', day: '', date: '' },
|
||
{ label: '后', day: '', date: '' }
|
||
],
|
||
shopTableList: [],
|
||
form: {
|
||
bookingDate: '',
|
||
bookingType: 'lunch',
|
||
shopTableId: null,
|
||
dinerNum: 1,
|
||
bookingPerson: '',
|
||
phoneNumber: '',
|
||
gender: '1',
|
||
bookingTime: '',
|
||
diningType: '普通用餐',
|
||
focus: '0',
|
||
receiveMarketingSms: '0'
|
||
|
||
},
|
||
rules: {
|
||
shopTableId: [
|
||
{
|
||
required: true,
|
||
message: '请选择预约桌台',
|
||
trigger: ['blur']
|
||
}
|
||
],
|
||
dinerNum: [
|
||
{
|
||
required: true,
|
||
message: '请选择用餐人数',
|
||
trigger: ['blur']
|
||
}
|
||
],
|
||
phoneNumber: [
|
||
{
|
||
required: true,
|
||
message: '请输入联系方式',
|
||
trigger: ['blur']
|
||
}
|
||
],
|
||
bookingPerson: [
|
||
{
|
||
required: true,
|
||
message: '请输入订餐人姓名',
|
||
trigger: ['blur']
|
||
}
|
||
],
|
||
bookingTime: [
|
||
{
|
||
required: true,
|
||
message: '请选择用餐时间',
|
||
trigger: ['change']
|
||
}
|
||
]
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.resetForm = { ...this.form }
|
||
},
|
||
methods: {
|
||
getWeekdays() {
|
||
const today = new Date()
|
||
const tomorrow = new Date(today)
|
||
const dayAfterTomorrow = new Date(today)
|
||
|
||
// 设置时间为今天
|
||
tomorrow.setDate(today.getDate() + 1)
|
||
dayAfterTomorrow.setDate(today.getDate() + 2)
|
||
|
||
// 获取星期几的方法
|
||
const getDayOfWeek = (date) => {
|
||
const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
|
||
return days[date.getDay()]
|
||
}
|
||
|
||
// 获取今天、明天和后天的星期几
|
||
const todayWeekday = getDayOfWeek(today)
|
||
const tomorrowWeekday = getDayOfWeek(tomorrow)
|
||
const dayAfterTomorrowWeekday = getDayOfWeek(dayAfterTomorrow)
|
||
this.dateList[0].day = todayWeekday
|
||
this.dateList[1].day = tomorrowWeekday
|
||
this.dateList[2].day = dayAfterTomorrowWeekday
|
||
this.dateList[0].date = dayjs(today).format('YYYY-MM-DD')
|
||
this.dateList[1].date = dayjs(tomorrow).format('YYYY-MM-DD')
|
||
this.dateList[2].date = dayjs(dayAfterTomorrow).format('YYYY-MM-DD')
|
||
|
||
this.form.bookingDate = this.dateList[0].date
|
||
},
|
||
/**
|
||
* 获取桌台数据
|
||
*/
|
||
async getShopTableList() {
|
||
this.form.shopTableId = null
|
||
const params = {
|
||
bookingDate: this.form.bookingDate,
|
||
bookingType: this.form.bookingType
|
||
}
|
||
const res = await getShopTableList(params)
|
||
this.shopTableList = res
|
||
console.log(res)
|
||
},
|
||
onSubmitHandle() {
|
||
this.$refs.form.validate(async(valid) => {
|
||
if (valid) {
|
||
this.loading = true
|
||
try {
|
||
const bookingTime = this.form.bookingDate + ' ' + this.form.bookingTime
|
||
const params = {
|
||
...this.form,
|
||
shopId: localStorage.getItem('shopId')
|
||
}
|
||
params.bookingTime = bookingTime
|
||
const res = await makeShopTable(params)
|
||
this.$emit('success', res)
|
||
this.close()
|
||
this.$notify({
|
||
title: '成功',
|
||
message: `预约成功`,
|
||
type: 'success'
|
||
})
|
||
this.loading = false
|
||
} catch (error) {
|
||
this.loading = false
|
||
console.log(error)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
show(obj) {
|
||
this.dialogVisible = true
|
||
if (obj && obj.id) {
|
||
this.form = JSON.parse(JSON.stringify(obj))
|
||
}
|
||
this.getShopTableList()
|
||
this.getWeekdays()
|
||
},
|
||
close() {
|
||
this.dialogVisible = false
|
||
},
|
||
reset() {
|
||
this.form = { ...this.resetForm }
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.date{
|
||
::v-deep .el-form-item__content{
|
||
// height: 36px;
|
||
// display: flex;
|
||
// justify-content: space-between;
|
||
}
|
||
::v-deep .el-radio-button{
|
||
height: 100%;
|
||
}
|
||
::v-deep .el-radio-button__inner{
|
||
padding: 4px 20px;
|
||
height: 100%;
|
||
}
|
||
}
|
||
</style>
|