czg_team/cashier_admin_app
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first

Browse Source
This commit is contained in:
YeMingfei666
2024-09-10 10:49:08 +08:00
parent b5fd06b800
commit dd4f5938da
6391 changed files with 722800 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

220
pageReserveSeat/add-special-appointment-time/add-special-appointment-time.vue Normal file
View File

@@ -0,0 +1,220 @@
<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>