154 lines
4.0 KiB
Vue
154 lines
4.0 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-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> |