预约机构.md 1.7KB
在package-a/文件夹下 创建 预约机构(英文)页面
通过 预约服务页面中 兽医 -> 预约按钮 点击进入
布局分为 上下 两部分 间隔 10rpx
1.上部分 白色背景
第一行 分为 左右2部分 flex 垂直居中
左边 up-avatar 圆形 要大点 默认灰色背景
右边 第一行 xxxx 字体大点 黑色文本
第二行 xxxxxx 灰色文本
第三行 联系方式：xxxxx 灰色文本
第二行 【机构介绍：灰色文本】【xxxxxxx 黑色文本】
第三行 【详细地址：灰色文本】【xxxxxxx 黑色文本】
第四行 【服务时段：灰色文本】【xxxxxxx 黑色文本】
2.下部分 白色背景
第一行 标题选择时间
第二行 横向flex 明天即后面6天 数组 v-for 例如 [ { name: '周四', date: '05-13', key: '2026-05-13' }...]需要你根据当前日期来创建这个数组 如果是禁用选择 则展示 当天已满
日期的分成 上下 2层 上 显示 name 下层显示 date flex 垂直居中 flex 列表 有边框 默认选择 明天 选中 背景色绿色 文本白色 默认背景色白色 文本黑色
第三行 分割线 up-divider不需要文本
第四行 预约按钮 圆角 块状 绿色
- 点击 预约按钮 弹出 up-popup 居中弹出 弹框width 页面的 90%
3.1 标题 预约信息 margin-bottom 20rpx
第一行 机构名称：【选择的机构名称】
第二行 预约日期：【选中的日期 格式 MM-DD(周三)】
3.2 标题 服务信息
使用 up-form 需要校验 非空
第一行 预约人：up-input
第二行 联系电话：up-input 校验手机号
3.3 分为左右2部分 左边按钮 取消 白色 右边按钮提交