220 lines
5.8 KiB
Vue
220 lines
5.8 KiB
Vue
<template>
|
|
<view class="min-page color-333 u-p-30 bg-gray u-font-28">
|
|
<uni-forms :model="form">
|
|
|
|
<view class="bg-fff border-r-18 default-box-padding">
|
|
<view>选择日期</view>
|
|
<view class="u-m-t-16 u-flex u-row-between" @tap="datePickerOpen">
|
|
<view>
|
|
<uni-dateformat format="yyyy-MM-dd" v-if="form.time" :date="form.time"></uni-dateformat>
|
|
<text v-else class="color-999">请填写日期</text>
|
|
</view>
|
|
<view class="u-flex">
|
|
<uni-icons type="right" color="#999" size="16"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="bg-fff border-r-18 default-box-padding u-m-t-32" v-for="(time,index) in form.times"
|
|
:key="index">
|
|
<view class="u-relative">
|
|
<view>
|
|
预约人数
|
|
</view>
|
|
<view class="u-m-t-6 border-bottom u-p-b-10" style="padding-right:150rpx ;">
|
|
<uni-easyinput type="text" :inputBorder="false" padding-none v-model="time.number"
|
|
placeholder="请输入预约人数" />
|
|
</view>
|
|
<view class="u-absolute" style="right: 0;top: 30rpx;z-index: 10;">
|
|
<my-button @tap="delTimes(index)" shape="circle" type="default" plain width="140" height="56"><view class="color-666">删除</view></my-button>
|
|
</view>
|
|
</view>
|
|
<view class="u-m-t-24">
|
|
<view class="u-flex color-666 u-row-between">
|
|
<view class="u-flex-1">预约时间</view>
|
|
<view class="u-flex-1">可预约人数</view>
|
|
<view class="u-flex-1">定金设置(元)</view>
|
|
</view>
|
|
<view class="u-m-t-24 border-bottom u-p-b-8">
|
|
<view class="u-row-between u-flex u-m-b-16" v-for="(option,optionIndex) in time.options" :key="optionIndex">
|
|
<view class=" u-flex-1" @tap="timeAreaOpen(index,optionIndex)">
|
|
<view class="border" style="width: 200rpx;">
|
|
<text v-if="option.time">{{option.time}}</text>
|
|
<text v-else class="color-999">请选择</text>
|
|
</view>
|
|
</view>
|
|
<view class=" u-flex-1" >
|
|
<view class="border" style="width: 144rpx;">
|
|
<input class="u-font-28" type="text" v-model="option.number" placeholder="选填"/>
|
|
</view>
|
|
</view>
|
|
<view class="u-flex u-row-between u-flex-1" >
|
|
<view class="border" style="width: 144rpx;">
|
|
<input class="u-font-28" type="text" v-model="option.price" placeholder="选填"/>
|
|
</view>
|
|
<view class="u-flex" @tap="delOption(index,optionIndex)">
|
|
<uni-icons type="minus-filled" size="20" :color="color.ColorRed"></uni-icons>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</view>
|
|
<view class="u-flex u-m-t-30" @tap="addOptions(index)">
|
|
<uni-icons type="plus-filled" size="20" :color="color.ColorMain"></uni-icons>
|
|
<view class="u-m-l-16">添加</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
</uni-forms>
|
|
<view class="bg-fff border-r-18 u-m-t-32 default-box-padding u-flex" @tap="addTimes">
|
|
<uni-icons type="plus-filled" size="20" :color="color.ColorMain"></uni-icons>
|
|
<view class="u-m-l-16">添加</view>
|
|
</view>
|
|
<view style="height: 200rpx;"></view>
|
|
</view>
|
|
|
|
|
|
<view class="u-fix bottom">
|
|
<my-button shape="circle" type="primary" @tap="save">保存</my-button>
|
|
</view>
|
|
|
|
<my-time-area-pickerview ref="timeArea" @confirm="timeAreaConfirm"></my-time-area-pickerview>
|
|
|
|
<!-- 日期选择 -->
|
|
<my-date-pickerview @confirm="datePickerConfirm" ref="datePicker" :selTime="form.time" :isArea="false"
|
|
mode="date"></my-date-pickerview>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
onLoad,
|
|
onReady,
|
|
onShow,
|
|
onPageScroll,
|
|
onPullDownRefresh
|
|
} from '@dcloudio/uni-app';
|
|
import {
|
|
reactive,
|
|
nextTick,
|
|
ref
|
|
} from 'vue';
|
|
import color from '@/commons/color.js'
|
|
import myButton from '@/components/my-components/my-button'
|
|
import myTimeAreaPickerview from '@/components/my-components/my-time-area-pickerview'
|
|
import myDatePickerview from '@/components/my-components/my-date-pickerview'
|
|
|
|
const timeArea = ref(null)
|
|
const datePicker = ref(null)
|
|
|
|
function datePickerOpen() {
|
|
datePicker.value.open()
|
|
}
|
|
|
|
function datePickerConfirm(e) {
|
|
form.time = e
|
|
}
|
|
|
|
function timeAreaOpen(timeIndex,optIndex) {
|
|
pageData.optionActive = optIndex
|
|
pageData.timeActive = timeIndex
|
|
timeArea.value.open()
|
|
}
|
|
|
|
function timeAreaConfirm(e) {
|
|
console.log(e);
|
|
form.times[pageData.timeActive].options[pageData.optionActive].time = e
|
|
}
|
|
|
|
const $option = {
|
|
time: '',
|
|
number: '',
|
|
price: ''
|
|
}
|
|
const $time = {
|
|
number: '',
|
|
options:[]
|
|
}
|
|
const pageData = reactive({
|
|
type: 'add',
|
|
timeActive: '',
|
|
optionActive: ''
|
|
})
|
|
const form = reactive({
|
|
time: '',
|
|
times: [{
|
|
...$time,
|
|
options:[{...$option},{...$option}]
|
|
}]
|
|
})
|
|
|
|
function save() {
|
|
|
|
}
|
|
//页面滚动到最底部
|
|
function scrollPageBottom() {
|
|
nextTick(() => {
|
|
uni.pageScrollTo({
|
|
duration: 100, // 过渡时间
|
|
scrollTop: 100000, // 滚动的实际距离
|
|
})
|
|
})
|
|
}
|
|
|
|
function addOptions(index){
|
|
form.times[index].options.push({
|
|
...$option
|
|
})
|
|
}
|
|
function delOption(index,optionIndex) {
|
|
form.times[index].options.splice(optionIndex, 1)
|
|
}
|
|
|
|
function addTimes() {
|
|
form.times.push({
|
|
...$time,
|
|
options:[$option]
|
|
})
|
|
scrollPageBottom()
|
|
}
|
|
function delTimes(index){
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确认删除该预约?',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
form.times.splice(index,1)
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
onLoad(par => {
|
|
uni.setNavigationBarTitle({
|
|
title: pageData.type === 'add' ? '添加特殊预约时间' : '编辑特殊预约时间'
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.border{
|
|
padding: 6rpx 16rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
border: 1px solid #E5E5E5;
|
|
}
|
|
.bottom {
|
|
bottom: calc(env(safe-area-inset-bottom) + 32rpx);
|
|
left: 110rpx;
|
|
right: 110rpx;
|
|
}
|
|
::v-deep.input-placeholder{
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
</style> |