预约专家.md 2.3KB
在package-a/文件夹下 创建 预约专家(英文)页面
通过 预约服务页面中 专家 -> 预约按钮 点击进入
布局分为 上下 两部分 间隔 10rpx
1.上部分 白色背景
第一行 分为 左中右3部分 flex 垂直居中
左边 up-avatar 圆形 默认灰色背景
中间 第一行 xxxx 字体大点 黑色文本
第二行 xxxxxx 灰色文本
第三行 联系方式：xxxxx 灰色文本
右边(可点击) 【4.2】+ up-rate -> Math.floor 星星颜色改成黄色 + up-icon play-circle-fill 颜色绿色
第二行 【专家介绍：灰色文本】【xxxxxxx 黑色文本】
第三行 【详细地址：灰色文本】【xxxxxxx 黑色文本】
第四行 【服务时段：灰色文本】【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 校验手机号
第三行 预约时段：up-input up-icon->name="arrow-right" up-picker options: 例如 [00:00~02:00, 02:00~04:00,...] 需要自己创建， up-picker 默认拿 当前时间 在 数组范围内的
第四行 服务地址：up-textarea
第五行 服务需求：up-textarea
3.3 分为左右2部分 左边按钮 取消 白色 右边按钮提交