first
This commit is contained in:
154
pageReserveSeat/add-appointment-time/add-appointment-time.vue
Normal file
154
pageReserveSeat/add-appointment-time/add-appointment-time.vue
Normal file
@@ -0,0 +1,154 @@
|
||||
<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-6">
|
||||
<uni-easyinput type="text" :inputBorder="false" padding-none v-model="form.perpoleNumber"
|
||||
placeholder="填入人数或人数范围，如：1.5-6" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-font-32 u-m-t-32 u-m-b-32">预约设置</view>
|
||||
|
||||
|
||||
<view class="bg-fff border-r-18 default-box-padding u-m-b-32" v-for="(item,index) in form.options" :key="index">
|
||||
<view>
|
||||
<view class="u-flex">
|
||||
<view>时间</view>
|
||||
<view class="u-flex u-m-l-12">
|
||||
<uni-icons type="info" size="14" color="#999"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-16 u-flex u-row-between u-p-b-24 border-bottom" @tap="timeAreaOpen(index)">
|
||||
<view>
|
||||
<text v-if="item.time">{{item.time}}</text>
|
||||
<text v-else class="color-999">请选择时间</text>
|
||||
</view>
|
||||
<view class="u-flex">
|
||||
<uni-icons type="right" size="16" color="#999"></uni-icons>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-24">
|
||||
<view class="u-flex">
|
||||
<view>可选数量</view>
|
||||
<view class="u-flex u-m-l-12">
|
||||
<uni-icons type="info" size="14" color="#999"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-6 border-bottom u-p-b-10">
|
||||
<uni-easyinput type="text" :inputBorder="false" padding-none v-model="item.number"
|
||||
placeholder="请输入数量" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-24">
|
||||
<view class="u-flex">
|
||||
<view>定金设置(元)</view>
|
||||
<view class="u-flex u-m-l-12">
|
||||
<uni-icons type="info" size="14" color="#999"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-6 border-bottom u-p-b-10">
|
||||
<uni-easyinput type="text" :inputBorder="false" padding-none v-model="item.price"
|
||||
placeholder="选填" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-flex u-m-t-24" @tap="delOption(index)">
|
||||
<uni-icons type="minus-filled" size="20" :color="color.ColorRed"></uni-icons>
|
||||
<view class="u-m-l-16">删除</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</uni-forms>
|
||||
<view class="bg-fff border-r-18 u-m-t-32 default-box-padding u-flex" @tap="addOptions">
|
||||
<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>
|
||||
</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'
|
||||
const timeArea=ref(null)
|
||||
function timeAreaOpen(index){
|
||||
pageData.optionActive=index
|
||||
timeArea.value.open()
|
||||
}
|
||||
function timeAreaConfirm(e){
|
||||
console.log(e);
|
||||
form.options[pageData.optionActive].time=e
|
||||
}
|
||||
|
||||
const $option={
|
||||
time:'',
|
||||
number:'',
|
||||
price:''
|
||||
}
|
||||
const pageData = reactive({
|
||||
type: 'add',
|
||||
optionActive:''
|
||||
})
|
||||
const form = reactive({
|
||||
perpoleNumber: '',
|
||||
options:[{...$option}]
|
||||
})
|
||||
function save(){
|
||||
|
||||
}
|
||||
//页面滚动到最底部
|
||||
function scrollPageBottom() {
|
||||
nextTick(() => {
|
||||
uni.pageScrollTo({
|
||||
duration: 100, // 过渡时间
|
||||
scrollTop: 100000, // 滚动的实际距离
|
||||
})
|
||||
})
|
||||
}
|
||||
function delOption(index){
|
||||
form.options.splice(index,1)
|
||||
}
|
||||
function addOptions(){
|
||||
form.options.push({...$option})
|
||||
scrollPageBottom()
|
||||
}
|
||||
|
||||
onLoad(par => {
|
||||
uni.setNavigationBarTitle({
|
||||
title: pageData.type === 'add' ? '添加预约时间' : '编辑预约时间'
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bottom {
|
||||
bottom: calc(env(safe-area-inset-bottom) + 32rpx);
|
||||
left: 110rpx;
|
||||
right: 110rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -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>
|
||||
127
pageReserveSeat/index/components/add-rule-desc.vue
Normal file
127
pageReserveSeat/index/components/add-rule-desc.vue
Normal file
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<my-model ref="model" :title="title" iconColor="#000" @close="resetForm">
|
||||
<template #desc>
|
||||
<view class="u-text-left u-p-30 ">
|
||||
<view class="u-m-t-32 u-flex ">
|
||||
<uni-easyinput type="textarea" v-model="form.remark" placeholder="请输入规则内容"></uni-easyinput>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
<template #btn>
|
||||
<view class="u-p-30">
|
||||
<view class="u-m-t-10">
|
||||
<my-button @tap="confirm" shape="circle" showShadow>确认</my-button>
|
||||
<my-button type="cancel" bgColor="#fff" @tap="close">
|
||||
<view class="color-999">取消</view>
|
||||
</my-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</my-model>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
reactive,
|
||||
nextTick,
|
||||
ref
|
||||
} from 'vue';
|
||||
import myModel from '@/components/my-components/my-model.vue'
|
||||
import myButton from '@/components/my-components/my-button.vue'
|
||||
import myTabs from '@/components/my-components/my-tabs.vue'
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
function changeCauses(item) {
|
||||
let prve = form.remark.length ? ',' : ''
|
||||
form.remark += prve + item.name
|
||||
}
|
||||
|
||||
const causes = reactive([{
|
||||
name: '免葱',
|
||||
checked: false
|
||||
},
|
||||
{
|
||||
name: '免香菜',
|
||||
checked: false
|
||||
},
|
||||
{
|
||||
name: '不要辣',
|
||||
checked: false
|
||||
}
|
||||
])
|
||||
|
||||
|
||||
function setForm(key, val) {
|
||||
form[key] = val
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
const $form = {
|
||||
remark: ''
|
||||
}
|
||||
const form = reactive({
|
||||
...$form
|
||||
})
|
||||
|
||||
function resetForm() {
|
||||
type='add'
|
||||
$item={}
|
||||
Object.assign(form, {
|
||||
...$form
|
||||
})
|
||||
}
|
||||
|
||||
const model = ref(null)
|
||||
|
||||
let type='add'
|
||||
let $item={}
|
||||
function open(item) {
|
||||
if(item!==undefined){
|
||||
form.remark=item.data||''
|
||||
type='edit'
|
||||
$item=item
|
||||
}
|
||||
model.value.open()
|
||||
|
||||
}
|
||||
|
||||
function close() {
|
||||
model.value.close()
|
||||
}
|
||||
const emits = defineEmits(['confirm'])
|
||||
|
||||
function confirm() {
|
||||
const {
|
||||
remark
|
||||
} = form
|
||||
if (remark.replace(/\s*/g,'') === '') {
|
||||
return uni.showToast({
|
||||
title: '请输入规则内容',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
emits('confirm', {...$item,data:remark,type})
|
||||
close()
|
||||
}
|
||||
defineExpose({
|
||||
open,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
189
pageReserveSeat/index/components/add-unpredictable-date.vue
Normal file
189
pageReserveSeat/index/components/add-unpredictable-date.vue
Normal file
@@ -0,0 +1,189 @@
|
||||
<template>
|
||||
<my-model ref="model" :title="title" iconColor="#000" @close="resetForm">
|
||||
<template #desc>
|
||||
<view class="u-p-30 u-text-left">
|
||||
<view>
|
||||
<view>开始日期</view>
|
||||
<view class="u-m-t-24 u-flex border">
|
||||
<image src="/pageReserveSeat/static/images/icon-calender.svg" class="icon-default-size u-m-r-32"
|
||||
mode="">
|
||||
</image>
|
||||
<view class="u-flex u-flex-1" @tap="startDateToggle">
|
||||
<view class="color-666" v-if="form.start===''">请选择开始日期</view>
|
||||
<view v-else>
|
||||
<uni-dateformat format="yyyy-MM-dd" :date="form.start"></uni-dateformat>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-32">
|
||||
<view>结束日期</view>
|
||||
<view class="u-m-t-24 u-flex border">
|
||||
<image src="/pageReserveSeat/static/images/icon-calender.svg" class="icon-default-size u-m-r-32"
|
||||
mode="">
|
||||
</image>
|
||||
<view class="u-flex-1 u-flex" @tap="endDateToggle">
|
||||
<view class="color-666" v-if="form.end===''">请选择结束日期</view>
|
||||
<view v-else>
|
||||
<uni-dateformat format="yyyy-MM-dd" :date="form.end"></uni-dateformat>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template #btn>
|
||||
<view class="u-p-30">
|
||||
<view class="u-m-t-10">
|
||||
<my-button @tap="confirm" shape="circle" showShadow>保存并添加</my-button>
|
||||
<my-button type="cancel" bgColor="#fff" @tap="close">取消</my-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</my-model>
|
||||
|
||||
|
||||
<!-- 开始时间 -->
|
||||
<my-date-pickerview @confirm="startDateConfirm" :selTime="form.start"
|
||||
:isArea="false" mode="date" ref="startDatePicker"></my-date-pickerview>
|
||||
|
||||
<!-- 结束时间 -->
|
||||
<my-date-pickerview @confirm="endDateConfirm" :selTime="form.end"
|
||||
:isArea="false" mode="date" ref="endDatePicker"></my-date-pickerview>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
reactive,
|
||||
nextTick,
|
||||
ref
|
||||
} from 'vue';
|
||||
import myModel from '@/components/my-components/my-model.vue'
|
||||
import myButton from '@/components/my-components/my-button.vue'
|
||||
import myDatePickerview from '@/components/my-components/my-date-pickerview'
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
const startDatePicker=ref(null)
|
||||
const endDatePicker=ref(null)
|
||||
function startDateToggle() {
|
||||
startDatePicker.value.toggle()
|
||||
}
|
||||
function endDateToggle() {
|
||||
endDatePicker.value.toggle()
|
||||
}
|
||||
function startDateConfirm(e) {
|
||||
form.start=e
|
||||
}
|
||||
function endDateConfirm(e) {
|
||||
form.end=e
|
||||
}
|
||||
|
||||
function changeCauses(item) {
|
||||
let prve = form.remark.length ? ',' : ''
|
||||
form.remark += prve + item.name
|
||||
}
|
||||
|
||||
|
||||
|
||||
function setForm(key, val) {
|
||||
form[key] = val
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
const $form = {
|
||||
start: '',
|
||||
end: ''
|
||||
}
|
||||
const form = reactive({
|
||||
...$form
|
||||
})
|
||||
|
||||
function resetForm() {
|
||||
Object.assign(form, {
|
||||
...$form
|
||||
})
|
||||
}
|
||||
|
||||
const model = ref(null)
|
||||
|
||||
function open() {
|
||||
model.value.open()
|
||||
}
|
||||
|
||||
function close() {
|
||||
model.value.close()
|
||||
}
|
||||
const emits = defineEmits(['confirm'])
|
||||
|
||||
function confirm() {
|
||||
const {
|
||||
start,end
|
||||
} = form
|
||||
if(start===''){
|
||||
return uni.showToast({
|
||||
icon:'none',
|
||||
title:'请选择开始日期'
|
||||
})
|
||||
}
|
||||
if(end===''){
|
||||
return uni.showToast({
|
||||
icon:'none',
|
||||
title:'请选择结束日期'
|
||||
})
|
||||
}
|
||||
close()
|
||||
emits('confirm',{start,end})
|
||||
}
|
||||
defineExpose({
|
||||
open,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.border {
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
padding: 22rpx;
|
||||
}
|
||||
|
||||
.lh34 {
|
||||
line-height: 34rpx;
|
||||
}
|
||||
|
||||
|
||||
.hover-class {
|
||||
background-color: #E5E5E5;
|
||||
}
|
||||
|
||||
|
||||
.bg1 {
|
||||
background: #F7F7FA;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 0 80rpx;
|
||||
}
|
||||
|
||||
.border {
|
||||
border: 1px solid #E5E5E5;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.input-box {
|
||||
padding: 22rpx 32rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.placeholder-class {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
476
pageReserveSeat/index/components/function-settings.vue
Normal file
476
pageReserveSeat/index/components/function-settings.vue
Normal file
@@ -0,0 +1,476 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="bg-fff u-flex u-row-between default-box-padding border-r-12 u-flex">
|
||||
<view>开启预约</view>
|
||||
<my-switch v-model="form.openYuyue"></my-switch>
|
||||
</view>
|
||||
<view class="bg-fff u-flex u-m-t-32 u-row-between default-box-padding border-r-12 u-flex">
|
||||
<view>自动通过预约</view>
|
||||
<my-switch v-model="form.autoPass"></my-switch>
|
||||
</view>
|
||||
|
||||
<view class="bg-fff u-m-t-32 default-box-padding border-r-12">
|
||||
<view class=" u-flex u-row-between ">
|
||||
<view>可预约日期范围</view>
|
||||
<view class="color-main u-flex" @tap="refTimeOpen">
|
||||
<view>{{dateArea.selItem.name}}</view>
|
||||
<view class="u-flex u-m-l-12">
|
||||
<uni-icons type="right" :color="color.ColorMain" size="16"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="u-m-t-12" v-if="dateArea.selItem.name==='自定义'">
|
||||
<uni-easyinput :inputBorder="false" padding-none v-model="dateArea.days"
|
||||
placeholder="请输入天数"></uni-easyinput>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bg-fff u-m-t-32 default-box-padding border-r-12 ">
|
||||
<view class="u-flex u-row-between">
|
||||
<view>每周不可预约时间</view>
|
||||
<my-switch v-model="form.openWeeks"></my-switch>
|
||||
</view>
|
||||
<view class="u-flex weeks u-flex-wrap u-m-t-32" v-if="form.openWeeks">
|
||||
<view class="item" @tap="changeWeeksChecked(item)" :class="{active:item.checked}"
|
||||
v-for="(item,index) in weeks.list" :key="index">
|
||||
{{item.name}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bg-fff u-flex u-m-t-32 u-row-between default-box-padding border-r-12 u-flex">
|
||||
<view>当天不可预约</view>
|
||||
<my-switch v-model="form.autoPass"></my-switch>
|
||||
</view>
|
||||
|
||||
<view class="bg-fff u-m-t-32 default-box-padding border-r-12 ">
|
||||
<view class="u-flex u-row-between">
|
||||
<view>不可预约日期</view>
|
||||
<my-switch v-model="form.openDisabledTimes"></my-switch>
|
||||
</view>
|
||||
<template v-if="form.openDisabledTimes">
|
||||
<view class="u-flex u-m-t-38 border-bottom u-p-b-24" v-for="(item,index) in form.unpredictableDates"
|
||||
:key="index">
|
||||
<uni-icons @tap="delUnpredictableDate(index)" type="minus-filled" size="20"
|
||||
:color="color.ColorRed"></uni-icons>
|
||||
<view class="u-m-l-24">
|
||||
<uni-dateformat format="yyyy-MM-dd" :date="item.start"></uni-dateformat>
|
||||
<text class="u-p-l-10 u-p-r-10">至</text>
|
||||
<uni-dateformat format="yyyy-MM-dd" :date="item.end"></uni-dateformat>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-flex u-m-t-24" @tap="refNoUseDateOpen">
|
||||
<uni-icons type="plus-filled" size="20" :color="color.ColorMain"></uni-icons>
|
||||
<view class="u-m-l-24">添加日期</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<view class="bg-fff u-m-t-32 default-box-padding border-r-12 ">
|
||||
<view class="u-flex u-row-between">
|
||||
<view>可选其他需求</view>
|
||||
</view>
|
||||
<view class="u-m-t-38 u-flex u-flex-wrap u-col-top otherRequirements">
|
||||
<view class="item u-flex u-row-center u-relative" v-for="(item,index) in form.otherRequirements"
|
||||
:key="index">
|
||||
<text>{{item}}</text>
|
||||
<view class="u-absolute close" @tap="delOtherRequirement(index)">
|
||||
<uni-icons type="clear" color="#999" size="16"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="add-btn ">
|
||||
<template v-if="form.otherRequirementsIsEdit">
|
||||
<view class="u-flex h-100 u-p-l-20 u-p-r-20 u-col-center">
|
||||
<uni-easyinput @blur="otherRequirementsIsBlur" @confirm="otherRequirementsIsConfirm"
|
||||
:focus="form.otherRequirementsIsEdit" :inputBorder="false" padding-none
|
||||
placeholder=" "></uni-easyinput>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="u-flex h-100 u-col-center u-row-center" @tap="toggleOtherRequirementsIsEdit">
|
||||
<uni-icons type="plus-filled" size="20" :color="color.ColorMain"></uni-icons>
|
||||
<view class="u-m-l-24 color-main">添加</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<view class="bg-fff u-m-t-32 default-box-padding border-r-12 ">
|
||||
<view class="u-flex u-row-between">
|
||||
<view>规则说明</view>
|
||||
</view>
|
||||
<view class="u-flex u-m-t-38 border-bottom u-p-b-24 u-col-center u-row-between"
|
||||
@tap="rulesDescsEdit(item,index)"
|
||||
v-for="(item,index) in form.rulesDescs"
|
||||
:key="index">
|
||||
<view class="u-flex">
|
||||
<view class="u-flex" @tap.stop="delRulesDescs(index)" >
|
||||
<uni-icons type="minus-filled" size="20"
|
||||
:color="color.ColorRed"></uni-icons>
|
||||
</view>
|
||||
|
||||
<view class="u-line-1 u-p-l-30" style="width:518rpx;">
|
||||
{{item}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex">
|
||||
<uni-icons type="right" color="#999" size="16"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-flex u-m-t-24" @tap="refRuleDescOpen">
|
||||
<uni-icons type="plus-filled" size="20" :color="color.ColorMain"></uni-icons>
|
||||
<view class="u-m-l-24">添加</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<view class="bg-fff u-m-t-32 default-box-padding border-r-12 ">
|
||||
<view class="u-flex u-row-between">
|
||||
<view>初始设置</view>
|
||||
</view>
|
||||
<view class="u-flex u-p-24 u-m-t-26 tips">
|
||||
<view class="u-flex">
|
||||
<uni-icons type="info-filled" color="#FF9F2E" size="20"></uni-icons>
|
||||
</view>
|
||||
<view class="u-m-l-16 u-flex-1">
|
||||
设置定金后，除用户到店核销或商家取消预约，其他
|
||||
情况定金不退。
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-flex u-flex-wrap initSetups">
|
||||
<view class="item"
|
||||
v-for="(item,index) in form.initSetups"
|
||||
@tap="changeInitSetupsActive(index)"
|
||||
:class="{active:form.initSetupsActive==index}"
|
||||
:key="index">
|
||||
1-2人
|
||||
</view>
|
||||
<view class="u-flex item add-btn h-100 u-col-center u-row-center" @tap="toAddYuyueTime">
|
||||
<uni-icons type="plus-filled" size="20" :color="color.ColorMain"></uni-icons>
|
||||
<view class="u-m-l-24 color-main">添加</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bg-gray default-box-padding u-m-t-32">
|
||||
<view class="u-flex ">
|
||||
<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">
|
||||
<view class="u-flex u-font-24 color-666 u-row-between u-m-b-16" v-for="(item,index) in 2" :key="index">
|
||||
<view class="u-flex-1">17:00-21:00</view>
|
||||
<view class="u-flex-1">100</view>
|
||||
<view class="u-flex-1">0.00</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-flex u-m-t-24 u-row-right">
|
||||
<my-button shape="circle" width="140" height="56" type="cancel"><view class="color-999">删除</view></my-button>
|
||||
<view class="u-m-l-20">
|
||||
<my-button shape="circle" width="140" height="56" type="primary">编辑</my-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="bg-fff u-m-t-32 default-box-padding border-r-12 " @tap="toAddSpeYuyueTime">
|
||||
<view class="u-flex u-row-between" >
|
||||
<view>特殊日期设置</view>
|
||||
</view>
|
||||
|
||||
<view class="u-flex u-m-t-24" @tap="refRuleDescOpen">
|
||||
<uni-icons type="plus-filled" size="20" :color="color.ColorMain"></uni-icons>
|
||||
<view class="u-m-l-24">添加</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<view class="" style="height: 200rpx;">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="u-fix bottom">
|
||||
<my-button shape="circle" type="primary" @tap="save">保存</my-button>
|
||||
</view>
|
||||
|
||||
<!-- 可预约日期范围选择 -->
|
||||
<my-pickerview :list="dateArea.list" :defaultIndex="dateArea.active" rangeKey="name" ref="refTime"
|
||||
:showTitle="false" @confirm="refTimeConfirm"></my-pickerview>
|
||||
|
||||
|
||||
<!-- 添加不可预约日期 -->
|
||||
<add-unpredictable-date @confirm="refNoUseDateConfirm" title="添加不可预约日期" ref="refNoUseDate"></add-unpredictable-date>
|
||||
<!-- 添加编辑规则说明 -->
|
||||
<add-rule-desc title="规则说明" @confirm="refRuleDescConfirm" ref="refRuleDesc"></add-rule-desc>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
reactive,
|
||||
ref
|
||||
} from 'vue';
|
||||
import myButton from '@/components/my-components/my-button'
|
||||
import color from '@/commons/color.js'
|
||||
import mySwitch from '@/components/my-components/my-switch'
|
||||
import myPickerview from '@/components/my-components/my-pickerview'
|
||||
import addUnpredictableDate from './add-unpredictable-date'
|
||||
import addRuleDesc from './add-rule-desc'
|
||||
import go from '@/commons/utils/go.js'
|
||||
import {
|
||||
$weeks
|
||||
} from '@/commons/week.js'
|
||||
|
||||
|
||||
function toAddYuyueTime(){
|
||||
go.to('PAGES_RESERVE_SEAT_ADD_APPOINT_TIME')
|
||||
}
|
||||
function toAddSpeYuyueTime(){
|
||||
go.to('PAGES_RESERVE_SEAT_ADD_SPE_APPOINT_TIME')
|
||||
}
|
||||
|
||||
function delUnpredictableDate(index) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认删除此时间点',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
form.unpredictableDates.splice(index, 1)
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const refNoUseDate = ref(null)
|
||||
|
||||
function refNoUseDateOpen() {
|
||||
refNoUseDate.value.open()
|
||||
}
|
||||
|
||||
function refNoUseDateConfirm(e) {
|
||||
console.log(e);
|
||||
form.unpredictableDates.push(e)
|
||||
}
|
||||
|
||||
const weeks = reactive({
|
||||
list: $weeks.map(v => {
|
||||
return {
|
||||
name: v,
|
||||
checked: false
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
function changeWeeksChecked(item) {
|
||||
item.checked = !item.checked
|
||||
}
|
||||
|
||||
|
||||
const unpredictableDate = {
|
||||
start: '',
|
||||
end: ''
|
||||
}
|
||||
const form = reactive({
|
||||
openYuyue: true,
|
||||
autoPass: false,
|
||||
openWeeks: false,
|
||||
openDisabledTimes: false,
|
||||
unpredictableDates: [],
|
||||
otherRequirements: [],
|
||||
rulesDescs:['1.支付定金订座成功后，不可取消；'],
|
||||
otherRequirementsIsEdit: false,
|
||||
initSetups:[1,2,3,4],
|
||||
initSetupsActive:0
|
||||
})
|
||||
function changeInitSetupsActive(index){
|
||||
form.initSetupsActive=index
|
||||
}
|
||||
|
||||
|
||||
//添加规则说明弹窗
|
||||
const refRuleDesc=ref(null)
|
||||
function refRuleDescOpen(){
|
||||
refRuleDesc.value.open()
|
||||
}
|
||||
function refRuleDescConfirm(e){
|
||||
if(e.type==='add'){
|
||||
form.rulesDescs.push(e.data)
|
||||
}else{
|
||||
form.rulesDescs[e.index]=e.data
|
||||
}
|
||||
}
|
||||
function rulesDescsEdit(item,index){
|
||||
refRuleDesc.value.open({data:item,index})
|
||||
}
|
||||
//删除规则说明
|
||||
function delRulesDescs(index){
|
||||
form.rulesDescs.splice(index,1)
|
||||
}
|
||||
|
||||
function delOtherRequirement(index) {
|
||||
form.otherRequirements.splice(index, 1)
|
||||
}
|
||||
|
||||
function toggleOtherRequirementsIsEdit() {
|
||||
form.otherRequirementsIsEdit = !form.otherRequirementsIsEdit
|
||||
}
|
||||
|
||||
function otherRequirementsIsBlur(e) {
|
||||
form.otherRequirementsIsEdit = false
|
||||
const val = e.detail.value.replace(/\s*/g, '')
|
||||
if (val !== '') {
|
||||
form.otherRequirements.push(val)
|
||||
}
|
||||
}
|
||||
|
||||
function otherRequirementsIsConfirm(e) {
|
||||
console.log(e);
|
||||
form.otherRequirementsIsEdit = false
|
||||
}
|
||||
|
||||
const dateAreaList = [{
|
||||
name: '7天内',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: '15天内',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
name: '30天内',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
name: '自定义',
|
||||
value: 3
|
||||
}
|
||||
]
|
||||
const dateArea = reactive({
|
||||
list: dateAreaList,
|
||||
active: [1],
|
||||
selItem: dateAreaList[1],
|
||||
days: 100
|
||||
})
|
||||
|
||||
const refTime = ref(null)
|
||||
|
||||
function refTimeOpen() {
|
||||
refTime.value.open()
|
||||
}
|
||||
|
||||
function refTimeConfirm(e) {
|
||||
dateArea.selItem = e[0]
|
||||
console.log(dateArea.selItem);
|
||||
}
|
||||
|
||||
function save() {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.h-100 {
|
||||
height: 100%;
|
||||
}
|
||||
.initSetups{
|
||||
.item{
|
||||
padding: 8rpx 48rpx;
|
||||
border-radius: 8rpx;
|
||||
margin-right: 32rpx;
|
||||
margin-top: 24rpx;
|
||||
border: 1px solid transparent;
|
||||
background: #F7F7FA;
|
||||
color: #666;
|
||||
}
|
||||
.active{
|
||||
color: $my-main-color;
|
||||
background: #E6F0FF;
|
||||
border-color: $my-main-color;
|
||||
}
|
||||
.add-btn{
|
||||
background-color: #fff;
|
||||
border-color: $my-main-color;
|
||||
color: $my-main-color;
|
||||
padding: 8rpx 24rpx;
|
||||
}
|
||||
}
|
||||
.otherRequirements {
|
||||
.item {
|
||||
padding: 10rpx 60rpx;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
border: 1px solid #E5E5E5;
|
||||
margin-right: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.close {
|
||||
right: -8px;
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
width: 180rpx;
|
||||
height: 60rpx;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
// padding: 10rpx 60rpx;
|
||||
border: 1px solid $my-main-color;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
bottom: calc(env(safe-area-inset-bottom) + 32rpx);
|
||||
left: 110rpx;
|
||||
right: 110rpx;
|
||||
}
|
||||
|
||||
.weeks {
|
||||
.item {
|
||||
padding: 10rpx 62rpx;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
border: 1px solid #E5E5E5;
|
||||
color: #333;
|
||||
margin-right: 38rpx;
|
||||
margin-bottom: 24rpx;
|
||||
transition: all .2s ease;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: #E6F0FF;
|
||||
color: $my-main-color;
|
||||
border-color: $my-main-color;
|
||||
}
|
||||
|
||||
.item:nth-of-type(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tips{
|
||||
background: #FCF2E6;
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
border: 1px solid #FF9F2E;
|
||||
color: #FF9F2E;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
</style>
|
||||
168
pageReserveSeat/index/components/list-item.vue
Normal file
168
pageReserveSeat/index/components/list-item.vue
Normal file
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="font-bold color-333">2024-07-24 14:23:09</view>
|
||||
<view class="item bg-fff border-r-12 u-m-t-20">
|
||||
|
||||
<view class="u-flex u-text-left border-bottom u-p-b-30">
|
||||
<view class="">手动出库</view>
|
||||
<view class="u-m-l-10 u-m-r-10">|</view>
|
||||
<view class="">东风</view>
|
||||
</view>
|
||||
<view class="u-flex u-text-left u-row-left u-m-t-30">
|
||||
<view class="name">名称</view>
|
||||
<view class="category u-flex u-m-l-10">
|
||||
<view class="tag">分类</view>
|
||||
</view>
|
||||
<view class="id color-999 u-font-24 bg-gray u-m-l-10">
|
||||
ID:1234
|
||||
</view>
|
||||
</view>
|
||||
<view class="info u-flex bg-gray u-p-24 u-m-t-20 u-row-between">
|
||||
<view class="u-text-right">
|
||||
<view class="u-flex">
|
||||
<view class="title-min-width">使用量</view>
|
||||
<text class="u-m-l-10 color-red">12</text>
|
||||
</view>
|
||||
<view class="u-m-t-10 u-flex">
|
||||
<view class="title-min-width">成本</view>
|
||||
<text class="u-m-l-10">1.00元</text>
|
||||
</view>
|
||||
<!-- <view class="u-m-t-10 u-relative">
|
||||
<text>库存</text>
|
||||
<text class="u-m-l-10">2</text>
|
||||
<view class="u-absolute u-flex addNumber" >
|
||||
<uni-icons type="arrow-right" :color="color.ColorMain" size="16"></uni-icons>
|
||||
<text class="color-main u-m-l-10">3</text>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="u-m-t-10 u-flex">
|
||||
<view class="title-min-width">剩余库存</view>
|
||||
<text class="u-m-l-10 color-main">2</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex-1 u-flex u-row-right">
|
||||
<view>
|
||||
<!-- <view class="color-main font-bold">+22</view> -->
|
||||
<!-- <view class="u-m-t-10">剩余库存</view> -->
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info u-flex bg-gray u-p-24 u-m-t-20 u-row-between" v-if="state.showRemark">
|
||||
<view class="u-flex u-text-right">
|
||||
<view class="title-min-width">出库备注</view>
|
||||
<text class="u-m-l-10 color-999">2</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-flex u-m-t-24 u-row-center" >
|
||||
<view class="u-flex" @tap="toggleRemark">
|
||||
<view class="u-m-r-10 color-666">手动出库明细</view>
|
||||
<view class="icon-down tranistion-1" :class="{'icon-up':state.showRemark}">
|
||||
<uni-icons type="right" size="16" color="#666"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="u-flex u-row-right u-m-t-20">
|
||||
<view class="u-flex u-m-r-30">
|
||||
<my-button shape="circle" height="70" type="default" @tap="retract">
|
||||
撤回操作
|
||||
</my-button>
|
||||
</view>
|
||||
<!-- <view class="u-flex">
|
||||
<my-button shape="circle" height="70" plain type="primary" @tap="more">更多操作</my-button>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import myButton from '@/components/my-components/my-button';
|
||||
import go from '@/commons/utils/go.js'
|
||||
import color from '@/commons/color.js'
|
||||
import {
|
||||
reactive
|
||||
} from 'vue';
|
||||
|
||||
function retract() {
|
||||
console.log('retract');
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定撤回此该出库?撤回后，将恢复改动前的数量',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定');
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
const props = defineProps({
|
||||
index: {
|
||||
type: Number
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
})
|
||||
const emits = defineEmits(['more'])
|
||||
|
||||
function more() {
|
||||
emits('more', props.index)
|
||||
}
|
||||
|
||||
let state = reactive({
|
||||
showRemark:false
|
||||
})
|
||||
function toggleRemark(){
|
||||
state.showRemark=!state.showRemark
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.item {
|
||||
padding: 32rpx 32rpx 28rpx 28rpx;
|
||||
|
||||
.title-min-width {
|
||||
min-width: 132rpx;
|
||||
}
|
||||
|
||||
.tag {
|
||||
color: $my-main-color;
|
||||
background-color: rgb(234, 244, 255);
|
||||
border-radius: 8rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.id {
|
||||
padding: 2rpx 10rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.info {}
|
||||
}
|
||||
|
||||
.addNumber {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 50%;
|
||||
padding-left: 20rpx;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.icon-down {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.icon-up{
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
</style>
|
||||
519
pageReserveSeat/index/index.vue
Normal file
519
pageReserveSeat/index/index.vue
Normal file
@@ -0,0 +1,519 @@
|
||||
<template>
|
||||
<view class="color-333 u-font-28">
|
||||
<view class="fixed-top bg-fff ">
|
||||
<view class="u-p-l-28 u-p-r-28 u-p-t-32 ">
|
||||
<my-tabs :list="tabs.list" @change="tabsChage" :defaultIndex="tabs.active"></my-tabs>
|
||||
</view>
|
||||
<template v-if="tabs.active===0">
|
||||
<view class="u-p-l-28 u-p-r-28 u-m-t-8 u-flex u-row-between u-relative">
|
||||
<view class="u-flex u-p-l-8 no-wrap">
|
||||
<view class="u-flex u-p-t-30 u-p-b-30 u-row-center" @tap="showTypesToggle">
|
||||
<text class="u-m-r-12">状态</text>
|
||||
<image src="/pageInvoicing/static/images/icon-arrow-down-fill.svg"
|
||||
class="icon-arrow-down-fill" mode="">
|
||||
</image>
|
||||
</view>
|
||||
<view class="u-flex u-m-l-60 u-p-t-30 u-p-b-30 u-row-center" @tap="timeToggle">
|
||||
<text class="u-m-r-12">筛选时间</text>
|
||||
<image src="/pageInvoicing/static/images/icon-arrow-down-fill.svg"
|
||||
class="icon-arrow-down-fill" mode="">
|
||||
</image>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view style="width: 164rpx;"></view>
|
||||
<view class="search-box">
|
||||
<view class="search-btn u-flex" @tap="showSearch"
|
||||
:style="{width:search.show?'694rpx':'164rpx'}">
|
||||
<image src="@/static/iconImg/icon-search.svg" class="input-icon" />
|
||||
<view class="u-flex-1 u-p-l-10"><input v-model="search.keyword" @confirm="searchConfirm"
|
||||
type="text" placeholder-style="font-size:28rpx;" placeholder="搜索" /></view>
|
||||
<view @tap.stop="hideSearch" v-if="search.show">取消</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view :style="{height:types.show?typesHeight:0}" class="tranistion types overflow-hide">
|
||||
<view @tap="changeTypesActive(index)" class="u-flex u-p-l-30 lh30 u-p-r-30 u-row-between"
|
||||
v-for="(item,index) in types.list" :key="index">
|
||||
<view>{{item}}</view>
|
||||
<uni-icons v-if="types.active===index" type="checkmarkempty"
|
||||
:color="color.ColorMain"></uni-icons>
|
||||
</view>
|
||||
<view :style="{height: types.bottomHeight+'px'}"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<template v-if="tabs.active===1">
|
||||
|
||||
<view class="u-flex u-m-t-20 u-p-l-28 ">
|
||||
<view>查询日期</view>
|
||||
<view class="u-flex-1 u-flex u-m-l-60 bg-gray u-p-t-18 u-p-b-14 u-p-l-32 u-p-r-32"
|
||||
@tap="dateToggle">
|
||||
<image src="/pageReserveSeat/static/images/icon-calender.svg" class="icon-default-size" mode="">
|
||||
</image>
|
||||
<view class="line"></view>
|
||||
<uni-dateformat format="yyyy-MM-dd" :date="filters.time1.start"></uni-dateformat>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-32 u-p-l-28 u-flex quickTimeSels u-p-b-32">
|
||||
<view class="item u-m-r-30" :class="{'active':index===quickTimeSels.active}"
|
||||
@tap="changeFiltersTime(index,item.value)" v-for="(item,index) in quickTimeSels.list"
|
||||
:key="index">
|
||||
{{item.name}}
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<template v-if="tabs.active===2">
|
||||
<view style="height: 32rpx;"></view>
|
||||
</template>
|
||||
</view>
|
||||
|
||||
<template v-if="tabs.active===0">
|
||||
<view class=" min-page bg-gray list ">
|
||||
<view class="u-flex u-m-b-30" v-if="filters.time.start&&filters.time.end">
|
||||
<view class="time-area u-font-24 color-main u-flex">
|
||||
<uni-dateformat format="yyyy-MM-dd hh:mm:ss" :date="filters.time.start"></uni-dateformat>
|
||||
<text class="u-p-l-10 u-p-r-10">至</text>
|
||||
<uni-dateformat format="yyyy-MM-dd hh:mm:ss" :date="filters.time.end"></uni-dateformat>
|
||||
<view class="u-m-l-10 u-flex" @tap="clearTime">
|
||||
<uni-icons type="clear" size="18" :color="color.ColorMain"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="recoreds color-fff ">
|
||||
<view class="u-font-32">数据统计</view>
|
||||
<view class="u-flex u-row-between u-m-t-48">
|
||||
<view class="u-flex u-flex-col u-flex-1 u-row-center u-col-top">
|
||||
<view>今日预约数</view>
|
||||
<view class="u-font-32 u-p-l-26 u-m-t-10 font-bold">0</view>
|
||||
</view>
|
||||
<view class="u-flex u-flex-col border-l-r u-flex-1 u-row-center u-col-center">
|
||||
<view>明日预约数</view>
|
||||
<view class="u-font-32 u-m-t-10 font-bold">0</view>
|
||||
</view>
|
||||
<view class="u-flex u-flex-col u-flex-1 u-row-center u-col-center">
|
||||
<view>已核销</view>
|
||||
<view class="u-font-32 u-m-t-10 font-bold">0</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-m-t-24">
|
||||
<view class="u-flex u-flex-1 u-flex-col u-row-center u-col-top">
|
||||
<view>未核销</view>
|
||||
<view class="u-font-32 u-p-l-26 u-m-t-10 font-bold">0</view>
|
||||
</view>
|
||||
<view class="u-flex u-flex-1 u-flex-col border-l-r u-flex-1 u-row-center u-col-center">
|
||||
<view>总预约数</view>
|
||||
<view class="u-font-32 u-m-t-10 font-bold">0</view>
|
||||
</view>
|
||||
<view class="u-flex u-flex-1 u-flex-col u-row-center u-col-center">
|
||||
<view>已收定金(元)</view>
|
||||
<view class="u-font-32 u-m-t-10 font-bold">0</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-m-t-24">
|
||||
<view class="u-flex u-flex-col u-row-center u-col-top">
|
||||
<view>已退定金(元)</view>
|
||||
<view class="u-font-32 u-p-l-26 u-m-t-10 font-bold">0</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<template v-if="page.list.length">
|
||||
<view class="u-m-b-28 u-m-t-28" v-for="(item,index) in page.list" :key="index">
|
||||
<list-item></list-item>
|
||||
</view>
|
||||
<uni-load-more :status="page.status" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="" style="margin-top: 150rpx;">
|
||||
<!-- <my-empty tips="暂无出库记录"></my-empty> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
</view>
|
||||
<view class="u-fix bottom">
|
||||
<my-button shape="circle" type="primary" @tap="saoma">扫码核销</my-button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<template v-if="tabs.active===1">
|
||||
<view class=" min-page bg-gray list " style="padding-top: 172px;">
|
||||
|
||||
<template v-if="yuyue.list.length">
|
||||
<view class="bg-fff">
|
||||
<view class="color-333 u-font-28 table u-text-center">
|
||||
<view class="u-flex head">
|
||||
<view class="">人数</view>
|
||||
<view class="u-flex-1">时间</view>
|
||||
<view class="">当天剩余预约数(个)</view>
|
||||
</view>
|
||||
<view class="u-flex item" v-for="(item,index) in yuyue.list" :key="index">
|
||||
<view>1-2人</view>
|
||||
<view class="u-flex-1">
|
||||
<view>11:00-14:00</view>
|
||||
<view class="u-m-t-24">17:00-21:00</view>
|
||||
</view>
|
||||
<view>99</view>
|
||||
</view>
|
||||
</view>
|
||||
<uni-load-more :status="yuyue.status" />
|
||||
</view>
|
||||
<view style="height: 100px;"></view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="" style="margin-top: 150rpx;">
|
||||
<!-- <my-empty tips="暂无出库记录"></my-empty> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<template v-if="tabs.active===2">
|
||||
<view class="min-page bg-gray list " style="padding-top: 83px;">
|
||||
<function-settings></function-settings>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<my-date-pickerview @confirm="datePickerConfirm" ref="dateAreaPicker"></my-date-pickerview>
|
||||
|
||||
<!-- 剩余预约查询时间筛选 -->
|
||||
<my-date-pickerview @confirm="dateConfirm" :selTime="filters.time1.start" :isArea="false" mode="date"
|
||||
ref="datePicker"></my-date-pickerview>
|
||||
|
||||
|
||||
<my-mask ref="mask" @close="hideType"></my-mask>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
onLoad,
|
||||
onReady,
|
||||
onShow,
|
||||
onPageScroll,
|
||||
onPullDownRefresh
|
||||
} from '@dcloudio/uni-app';
|
||||
import color from '@/commons/color';
|
||||
// import myEmpty from '../components/empty';
|
||||
import listItem from './components/list-item';
|
||||
import myMask from '@/components/my-components/my-mask'
|
||||
import myDatePickerview from '@/components/my-components/my-date-pickerview'
|
||||
import myTabs from '@/components/my-components/my-tabs'
|
||||
import myButton from '@/components/my-components/my-button'
|
||||
import functionSettings from './components/function-settings'
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
computed
|
||||
} from 'vue';
|
||||
|
||||
const datePicker = ref(null)
|
||||
|
||||
function dateToggle() {
|
||||
datePicker.value.toggle()
|
||||
}
|
||||
|
||||
function dateConfirm(e) {
|
||||
console.log(e);
|
||||
filters.time1.start = e
|
||||
}
|
||||
|
||||
|
||||
const yuyue = reactive({
|
||||
list: [1, 2],
|
||||
status: 'noMore'
|
||||
})
|
||||
|
||||
const quickTimeSels = reactive({
|
||||
list: [{
|
||||
name: '今天',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: '明天',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
name: '后天',
|
||||
value: 2
|
||||
}
|
||||
],
|
||||
active: 0
|
||||
})
|
||||
|
||||
function changeFiltersTime(index, day) {
|
||||
quickTimeSels.active = index
|
||||
const daytemp = 1000 * 60 * 60 * 24
|
||||
filters.time1.start = new Date().getTime() + daytemp * day
|
||||
}
|
||||
|
||||
const tabs = reactive({
|
||||
list: ['预约列表', '剩余预约查询', '功能设置'],
|
||||
active: 2
|
||||
})
|
||||
|
||||
function tabsChage(i) {
|
||||
tabs.active = i
|
||||
}
|
||||
const search = reactive({
|
||||
keyword: '',
|
||||
show: false
|
||||
})
|
||||
|
||||
function searchConfirm() {
|
||||
|
||||
}
|
||||
|
||||
function hideSearch() {
|
||||
search.show = false
|
||||
maskHide()
|
||||
}
|
||||
|
||||
function showSearch() {
|
||||
search.show = true
|
||||
types.show = false
|
||||
maskShow()
|
||||
}
|
||||
|
||||
const page = reactive({
|
||||
list: [],
|
||||
status: 'noMore'
|
||||
})
|
||||
|
||||
|
||||
const types = reactive({
|
||||
list: ['全部', '待处理','已同意','已拒绝','已核销','已取消','已失效'],
|
||||
active: 0,
|
||||
show: false,
|
||||
bottomHeight: 14
|
||||
})
|
||||
|
||||
function hideType() {
|
||||
types.show = false
|
||||
search.show = false
|
||||
}
|
||||
const typesHeight = computed(() => {
|
||||
return 30 * types.list.length + types.bottomHeight + 'px'
|
||||
})
|
||||
|
||||
function changeTypesActive(i) {
|
||||
types.active = i
|
||||
types.show = false
|
||||
toggleMask()
|
||||
}
|
||||
|
||||
function showTypesToggle() {
|
||||
types.show = !types.show
|
||||
if (types.show) {
|
||||
maskShow()
|
||||
} else {
|
||||
maskHide()
|
||||
}
|
||||
}
|
||||
|
||||
const $basicfilters = {
|
||||
time: {
|
||||
start: new Date().getTime(),
|
||||
end: ''
|
||||
},
|
||||
time1: {
|
||||
start: new Date().getTime(),
|
||||
end: ''
|
||||
}
|
||||
}
|
||||
const filters = reactive({
|
||||
...$basicfilters
|
||||
})
|
||||
|
||||
function clearTime() {
|
||||
filters.time.start = ''
|
||||
filters.time.end = ''
|
||||
}
|
||||
|
||||
|
||||
|
||||
const dateAreaPicker = ref(null)
|
||||
|
||||
function timeToggle() {
|
||||
dateAreaPicker.value.toggle()
|
||||
}
|
||||
|
||||
function datePickerConfirm(e) {
|
||||
console.log(e);
|
||||
filters.time.start = e.start
|
||||
filters.time.end = e.end
|
||||
}
|
||||
|
||||
const mask = ref(null)
|
||||
|
||||
function toggleMask(show) {
|
||||
mask.value.toggle()
|
||||
}
|
||||
|
||||
function maskShow() {
|
||||
mask.value.open()
|
||||
}
|
||||
|
||||
function maskHide() {
|
||||
mask.value.close()
|
||||
}
|
||||
|
||||
onLoad(opt => {})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.table {
|
||||
border-radius: 12rpx 12rpx 0rpx 0rpx;
|
||||
overflow: hidden;
|
||||
font-size: 24rpx;
|
||||
|
||||
.head {
|
||||
padding: 24rpx;
|
||||
background: #AEBAD2;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.item:nth-of-type(2n+1) {
|
||||
background-color: rgb(249, 249, 249);
|
||||
}
|
||||
}
|
||||
|
||||
.quickTimeSels {
|
||||
.item {
|
||||
color: #666;
|
||||
padding: 8rpx 28rpx;
|
||||
border-radius: 100rpx;
|
||||
background: #F7F7FA;
|
||||
border-radius: 28rpx 28rpx 28rpx 28rpx;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: #E6F0FF;
|
||||
color: $my-main-color;
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 1px;
|
||||
background-color: #999;
|
||||
margin-left: 18rpx;
|
||||
margin-right: 18rpx;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
bottom: calc(env(safe-area-inset-bottom) + 32rpx);
|
||||
left: 110rpx;
|
||||
right: 110rpx;
|
||||
}
|
||||
|
||||
.fixed-top {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.recoreds {
|
||||
background: linear-gradient(127deg, #33A0FF 0%, #6699FF 100%);
|
||||
box-shadow: 0rpx 20rpx 60rpx 2rpx rgba(92, 112, 248, 0.2);
|
||||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||||
padding: 32rpx 40rpx 40rpx 48rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
top: -112rpx;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 56rpx;
|
||||
width: 224rpx;
|
||||
box-shadow: 0 0 1px #666;
|
||||
height: 224rpx;
|
||||
background: linear-gradient(180deg, rgba(103, 204, 254, 0.6) 0%, rgba(144, 87, 255, 0) 100%);
|
||||
}
|
||||
|
||||
.border-l-r {
|
||||
position: relative;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
display: block;
|
||||
top: 18rpx;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background-color: rgba(255, 255, 255, 0.37);
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.search-box {
|
||||
background-color: #fff;
|
||||
padding: 16rpx 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
display: flex;
|
||||
|
||||
.search-btn {
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// width: 164rpx;
|
||||
transition: all .3s ease-in-out;
|
||||
background-color: rgb(247, 247, 247);
|
||||
border-radius: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.types {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.time-area {
|
||||
background: #E6F0FF;
|
||||
border-radius: 100px;
|
||||
padding: 10rpx 20rpx;
|
||||
}
|
||||
|
||||
.icon-arrow-down-fill {
|
||||
width: 16rpx;
|
||||
height: 10rpx;
|
||||
}
|
||||
|
||||
.list {
|
||||
padding: 120px 30rpx 30rpx 30rpx;
|
||||
}
|
||||
</style>
|
||||
1
pageReserveSeat/static/images/icon-calender.svg
Normal file
1
pageReserveSeat/static/images/icon-calender.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14" viewBox="0 0 14 14"><defs><style>.a{fill:#fff;stroke:#707070;}.b{clip-path:url(#a);}.c{fill:#999;}</style><clipPath id="a"><rect class="a" width="14" height="14" transform="translate(119 212)"/></clipPath></defs><g class="b" transform="translate(-119 -212)"><path class="c" d="M11.5,24.641h-.819v.82H11.5Zm0,1.637h-.819v.82H11.5ZM9.044,23H8.225v.82h.819Zm0-5.733H5.769v.819H9.044ZM4.544,18.9c.225,0,.405-.244.405-.544V17c0-.3-.181-.544-.405-.544s-.4.244-.4.544v1.357c0,.3.181.544.4.544m5.731,0a.493.493,0,0,0,.414-.544V17a.493.493,0,0,0-.414-.544A.493.493,0,0,0,9.861,17v1.357a.493.493,0,0,0,.414.544M9.044,24.641H8.225v.82h.819ZM11.5,23h-.819v.82H11.5ZM4.131,26.278H3.313v.82h.819Zm0-1.637H3.313v.82h.819Zm9.006-7.37H11.5v.819h1.637v2.456H1.675V18.09H3.313v-.819H1.675a.786.786,0,0,0-.819.819V28.733a.805.805,0,0,0,.819.819H13.137c.747,0,.819-.788.819-.819V18.09a.793.793,0,0,0-.819-.819m0,11.462H1.675V21.365H13.137v7.368ZM9.044,26.278H8.225v.82h.819ZM6.588,24.641H5.769v.82h.819Zm0-1.637H5.769v.82h.819Zm0,3.275H5.769v.82h.819ZM4.131,23H3.313v.82h.819Z" transform="translate(118.594 195.998)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
Reference in New Issue
Block a user