|
|
<template>
|
|
|
<view class="container">
|
|
|
<view class="form-title">服务预约</view>
|
|
|
|
|
|
<view class="form-item">
|
|
|
<text class="label">姓名：</text>
|
|
|
<input
|
|
|
v-model="formData.name"
|
|
|
placeholder="请输入您的姓名"
|
|
|
class="input"
|
|
|
/>
|
|
|
</view>
|
|
|
|
|
|
<view class="form-item">
|
|
|
<text class="label">电话：</text>
|
|
|
<input
|
|
|
v-model="formData.phone"
|
|
|
placeholder="请输入手机号"
|
|
|
type="number"
|
|
|
class="input"
|
|
|
/>
|
|
|
</view>
|
|
|
|
|
|
<view class="form-item">
|
|
|
<text class="label">服务类型：</text>
|
|
|
<picker mode="selector" :range="serviceOptions" @change="onServiceChange">
|
|
|
<view class="picker">{{ serviceOptions[formData.serviceIndex] || '请选择服务' }}</view>
|
|
|
</picker>
|
|
|
</view>
|
|
|
|
|
|
<view class="form-item">
|
|
|
<text class="label">预约时间：</text>
|
|
|
<picker mode="date" @change="onDateChange">
|
|
|
<view class="picker">{{ formData.date || '请选择日期' }}</view>
|
|
|
</picker>
|
|
|
</view>
|
|
|
|
|
|
<view class="form-item">
|
|
|
<text class="label">备注：</text>
|
|
|
<textarea
|
|
|
v-model="formData.remark"
|
|
|
placeholder="请输入其他需求（选填）"
|
|
|
class="textarea"
|
|
|
/>
|
|
|
</view>
|
|
|
|
|
|
<button class="submit-btn" @click="submitForm">提交预约</button>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import {
|
|
|
ref
|
|
|
} from "vue"
|
|
|
import { InsertInfo } from '@/api'
|
|
|
|
|
|
let formData=ref({
|
|
|
name: '',
|
|
|
phone: '',
|
|
|
serviceIndex: 0,
|
|
|
date: '',
|
|
|
remark: ''
|
|
|
})
|
|
|
let serviceOptions=ref(['营销策划', '会议服务', '庆典活动', '品牌推广', '其他'])
|
|
|
|
|
|
|
|
|
|
|
|
const onServiceChange=(e)=> {
|
|
|
formData.value.serviceIndex = e.detail.value
|
|
|
}
|
|
|
const onDateChange=(e)=> {
|
|
|
formData.value.date = e.detail.value
|
|
|
}
|
|
|
const validate=()=> {
|
|
|
if (!formData.value.name.trim()) {
|
|
|
uni.showToast({ title: '请输入姓名', icon: 'none' })
|
|
|
return false
|
|
|
}
|
|
|
const phoneReg = /^1[3-9]\d{9}$/
|
|
|
if (!phoneReg.test(formData.value.phone)) {
|
|
|
uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
|
|
|
return false
|
|
|
}
|
|
|
if (!formData.value.date) {
|
|
|
uni.showToast({ title: '请选择预约时间', icon: 'none' })
|
|
|
return false
|
|
|
}
|
|
|
return true
|
|
|
}
|
|
|
const submitForm=async()=> {
|
|
|
if (!validate()) return
|
|
|
|
|
|
// 👇 这里可以替换为真实请求，例如：
|
|
|
// uniCloud.callFunction({ name: 'saveBooking', data: formData.value })
|
|
|
|
|
|
// 模拟提交成功
|
|
|
uni.showLoading({ title: '提交中...' })
|
|
|
InsertInfo({ info: formData.value }).then(res => {
|
|
|
uni.hideLoading()
|
|
|
if (res.status) {
|
|
|
uni.showToast({ title: '预约成功！', icon: 'success' })
|
|
|
|
|
|
setTimeout(() => {
|
|
|
formData.value = {
|
|
|
name: '',
|
|
|
phone: '',
|
|
|
serviceIndex: 0,
|
|
|
date: '',
|
|
|
remark: ''
|
|
|
}
|
|
|
|
|
|
// 可跳转回首页或保持当前页
|
|
|
uni.navigateTo({ url: '/pages/index/index' })
|
|
|
}, 800)
|
|
|
}
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
.container {
|
|
|
padding: 20rpx;
|
|
|
background-color: #f5f5f5;
|
|
|
}
|
|
|
.form-title {
|
|
|
font-size: 36rpx;
|
|
|
font-weight: bold;
|
|
|
text-align: center;
|
|
|
margin: 40rpx 0;
|
|
|
color: #333;
|
|
|
}
|
|
|
.form-item {
|
|
|
background: #fff;
|
|
|
padding: 20rpx 30rpx;
|
|
|
margin-bottom: 20rpx;
|
|
|
border-radius: 12rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
.label {
|
|
|
width: 160rpx;
|
|
|
font-size: 28rpx;
|
|
|
color: #555;
|
|
|
}
|
|
|
.input, .picker {
|
|
|
flex: 1;
|
|
|
font-size: 28rpx;
|
|
|
color: #333;
|
|
|
}
|
|
|
.textarea {
|
|
|
flex: 1;
|
|
|
height: 120rpx;
|
|
|
font-size: 28rpx;
|
|
|
color: #333;
|
|
|
border: 1rpx solid #eee;
|
|
|
border-radius: 8rpx;
|
|
|
padding: 10rpx;
|
|
|
}
|
|
|
.submit-btn {
|
|
|
margin-top: 60rpx;
|
|
|
background-color: #3182ce;
|
|
|
color: white;
|
|
|
font-size: 32rpx;
|
|
|
height: 80rpx;
|
|
|
line-height: 80rpx;
|
|
|
border-radius: 12rpx;
|
|
|
}
|
|
|
</style> |