完善页面

components/appointment-time/appointment-time.vue

@@ -0,0 +1,159 @@
+<template>
+	<view>
+		<u-popup v-model="showPop" mode="bottom" border-radius="16" :safe-area-inset-bottom="true" :closeable="true">
+			<view class="appointment-time">
+				<view class="bold-700 lg u-p-t-24 u-p-b-24 u-text-center">选择预约时间</view>
+				<view class="block row" style="height: 700rpx;">
+					<view class="aside">
+						<scroll-view style="height: 100%;" scroll-y="true" scroll-with-animation="true">
+							<view style="padding-bottom: 200rpx;">
+								<block v-for="(item, index) in cateList" :key="index">
+									<view :class="'one-item sm ' + (index == selectIndex ? 'active bg-white' : '')" @click="changeActive(index)">
+										<text class="name">{{ item.name }}</text>
+										<view v-if="index == selectIndex" class="active-line bg-default"></view>
+									</view>
+								</block>
+							</view>
+						</scroll-view>
+					</view>
+					
+					<view class="main">
+						<scroll-view style="height: 100%" scroll-y="true" scroll-with-animation="true">
+							<view class="main-wrap u-m-t-32">
+								<view class="bg-white br16 row u-col-top u-m-b-24" v-for="(item, index) in 20" :key="index">
+									<view>9：00 - 9：30</view>
+								</view>
+							</view>
+						</scroll-view>
+					</view>
+				</view>
+			</view>
+		</u-popup>
+	</view>
+</template>
+
+<script>
+	import {getCatrgory} from '@/api/store'
+	export default {
+		name: "appointment-time",
+		props: {
+			value: {
+				type: Boolean,
+				required: true
+			}
+		},
+		data() {
+			return {
+				mobile: '',
+				selectIndex: 0,
+				cateList: []
+			};
+		},
+		created() {
+			this.getCatrgoryFun()
+		},
+		methods: {
+			getCatrgoryFun() {
+				getCatrgory().then(res => {
+					if (res.code == 1) {
+						this.cateList = res.data
+					}
+				});
+			},
+			
+			changeActive(index) {
+				const {cateList} = this
+				this.selectIndex = index
+			},
+			
+			// 提交数据
+			handleSubmit(e) {
+				const {mobile} = this
+				if (!mobile) return this.$toast({
+					title: '请授权手机号'
+				})
+				
+				this.$emit('update', {
+					mobile
+				})
+				
+				this.showPop = false
+				this.$emit('close')
+			},
+			
+			// 关闭弹窗
+			onClose() {
+				this.showPop = false
+				this.$emit('close')
+			}
+		},
+		computed: {
+			showPop: {
+				get() {
+					return this.value
+				},
+				set(val) {
+					this.$emit('input', val)
+				}
+			}
+		}
+	};
+</script>
+
+<style lang="scss">
+	.appointment-time {
+		height: 800rpx;
+		max-height: 800rpx;
+	}
+	
+	.block {
+		height: 100vh;
+	}
+	.aside {
+		width: 180rpx;
+		flex: none;
+		height: 100%;
+		background-color: #fdfdfd;
+		
+		.one-item {
+			position: relative;
+			text-align: center;
+			height: 108rpx;
+			line-height: 108rpx;
+		
+			&.active {
+				color: $-color-theme;
+				font-size: 26rpx;
+				font-weight: bold;
+			}
+		
+			.active-line {
+				position: absolute;
+				width: 6rpx;
+				height: 30rpx;
+				left: 4rpx;
+				top: 50%;
+				transform: translateY(-50%);
+			}
+		}
+	}
+	
+	.main {
+		height: 100%;
+		flex: 1;
+		
+		.main-wrap {
+			position: relative;
+			padding: 0 20rpx;
+			.goods {
+				padding-bottom: 200rpx;
+				.info {
+					width: 100%;
+					display: flex; 
+					justify-content: space-between; 
+					margin: 0 16rpx;
+				}
+			}
+		}
+	}
+</style>