first

pageReserveSeat/add-appointment-time/add-appointment-time.vue

@@ -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>