476 lines
12 KiB
Vue
476 lines
12 KiB
Vue
<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> |