bimwe/mini-programs
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
张成
2025-09-12 22:34:12 +08:00
parent 471244ee5d
commit 30d16946d2
30 changed files with 104 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
src/login_pages/verification/README.md Normal file
View File

@@ -0,0 +1,187 @@
# 手机号验证码登录页面 - 基于 Figma 设计稿
## 设计概述
本页面完全按照 Figma 设计稿 `EWQlX5wM2lhiSLfFQp8qKT` 中的 "iPhone 13 & 14 - 57" 图层实现，是一个专业的手机号注册/登录页面。
## 🎨 设计特点
### 视觉设计
- **背景色**：使用 `#FAFAFA` 浅灰色背景，简洁现代
- **品牌元素**："有场" 品牌标题 + "Go Together, Grow Together" 标语
- **状态栏**：示意性状态栏，显示基本的时间信息
- **导航栏**：透明背景，包含返回按钮和右侧操作按钮（分享、主页）
### 交互设计
- **双输入框**：手机号输入框 + 验证码输入框
- **字符计数**：实时显示输入字符数量（手机号 0/11，验证码 0/6）
- **验证码发送**：60秒倒计时，防止重复发送
- **登录验证**：完整的输入验证和登录流程
- **协议链接**：底部包含条款和隐私政策链接
## 📱 页面结构
```
VerificationPage
├── 背景层
│ └── 浅灰色背景 (#FAFAFA)
├── 状态栏
│ ├── 时间显示 (9:41)
│ └── 状态图标 (信号/WiFi/电池)
├── 导航栏
│ ├── 返回按钮 (左箭头)
│ ├── 占位区域
│ └── 操作按钮 (分享/主页)
├── 主要内容
│ ├── 标题区域
│ │ ├── 主标题："手机号注册/登录有场"
│ │ └── 副标题："Go Together, Grow Together"
│ ├── 表单区域
│ │ ├── 手机号输入框
│ │ └── 验证码输入框 + 发送按钮
│ ├── 登录按钮
│ └── 协议链接
└── 底部指示器
```
## 🚀 功能特性
### 输入验证
- **手机号验证**：必须是11位中国内地手机号
- **验证码验证**：必须是6位数字验证码
- **实时计数**：显示当前输入字符数量
- **输入限制**：手机号最多11位，验证码最多6位
### 验证码发送
- **发送条件**：手机号格式正确才能发送
- **倒计时功能**：发送后60秒倒计时，防止重复发送
- **状态管理**：倒计时期间按钮禁用，显示剩余时间
### 登录流程
- **输入验证**：检查手机号和验证码格式
- **登录请求**：调用 `phone_auth_login` 服务
- **状态反馈**：显示登录中状态和结果提示
- **页面跳转**：登录成功后跳转到首页
### 协议支持
- **条款链接**：《开场的条款和条件》
- **隐私政策**：《隐私权政策》
- **动态跳转**：支持通过 URL 参数指定协议类型
## 🛠 技术实现
### 状态管理
- `phone`: 手机号输入值
- `verification_code`: 验证码输入值
- `countdown`: 验证码发送倒计时
- `can_send_code`: 是否可以发送验证码
- `is_loading`: 登录按钮加载状态
### 核心方法
- `handle_go_back()`: 返回上一页
- `handle_send_code()`: 发送验证码
- `handle_phone_login()`: 手机号登录
- `handle_view_terms()`: 查看协议条款
### 样式特色
- **毛玻璃效果**：按钮使用 `backdrop-filter: blur(32px)`
- **阴影效果**：输入框和按钮都有精致的阴影
- **圆角设计**：12px 输入框圆角，16px 按钮圆角
- **响应式布局**：支持不同屏幕尺寸
## 📂 文件结构
```
src/pages/login/verification/
├── index.tsx # 验证码页面组件
├── index.scss # Figma 设计稿样式
├── index.config.ts # 页面配置
└── README.md # 说明文档
```
## 🔧 配置说明
### 页面配置
```typescript
export default definePageConfig({
navigationBarTitleText: '手机号登录',
navigationBarBackgroundColor: '#ffffff',
navigationBarTextStyle: 'black',
backgroundColor: '#f5f5f5',
enablePullDownRefresh: false,
disableScroll: false
})
```
## 🎯 设计还原度
### 完全还原的元素
- ✅ 背景色和整体布局
- ✅ 状态栏基本布局（示意性）
- ✅ 导航栏设计和按钮
- ✅ 标题区域字体和大小
- ✅ 输入框样式和阴影
- ✅ 按钮设计和毛玻璃效果
- ✅ 字符计数显示
- ✅ 底部指示器
### 交互还原
- ✅ 输入框占位符文字
- ✅ 验证码发送倒计时
- ✅ 按钮状态和反馈
- ✅ 协议链接跳转
## 🔄 后续扩展
### 可扩展功能
1. **真实验证码服务**
- 集成短信服务商 API
- 验证码有效期管理
- 发送频率限制
2. **用户注册流程**
- 新用户注册页面
- 用户信息完善
- 头像上传功能
3. **安全增强**
- 图形验证码
- 滑块验证
- 设备指纹识别
### 性能优化
- 输入防抖处理
- 验证码缓存策略
- 页面预加载优化
## 📱 测试说明
### 功能测试
1. **输入验证测试**
- 手机号格式验证
- 验证码长度验证
- 字符计数显示
2. **验证码发送测试**
- 发送条件验证
- 倒计时功能
- 重复发送防护
3. **登录流程测试**
- 输入验证
- 登录请求
- 状态反馈
### 兼容性测试
- 支持不同屏幕尺寸
- 适配不同设备像素比
- 响应式布局验证
## 🎨 设计源文件
**Figma 设计稿链接**：
https://www.figma.com/design/EWQlX5wM2lhiSLfFQp8qKT/小程序设计稿V1（开发协作版）?node-id=3043-2810
**设计稿节点**：iPhone 13 & 14 - 57
设计稿包含了完整的视觉规范、尺寸标注和交互说明，本实现严格按照设计稿要求进行开发，确保100%的设计还原度。注意：状态栏仅为示意性设计，不需要完全还原 iPhone 状态栏的复杂细节。

8
src/login_pages/verification/index.config.ts Normal file
View File

@@ -0,0 +1,8 @@
export default definePageConfig({
navigationBarTitleText: '手机号登录',
navigationBarBackgroundColor: '#ffffff',
navigationBarTextStyle: 'black',
backgroundColor: '#f5f5f5',
enablePullDownRefresh: false,
disableScroll: false
})

540
src/login_pages/verification/index.scss Normal file
View File

@@ -0,0 +1,540 @@
// 验证码页面样式
.verification_page {
min-height: 100vh;
background: #fafafa;
position: relative;
overflow: hidden;
box-sizing: border-box;
}
// 背景
.background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
.bg_color {
width: 100%;
height: 100%;
background: #fafafa;
}
}
// 状态栏
.status_bar {
position: relative;
z-index: 10;
display: flex;
justify-content: space-between;
align-items: center;
padding: 21px 16px 0;
height: 54px;
.time {
font-family: "SF Pro";
font-weight: 590;
font-size: 17px;
line-height: 1.294;
color: #000000;
}
.status_icons {
display: flex;
align-items: center;
gap: 7px;
.signal_icon {
width: 19.2px;
height: 12.23px;
background: #000000;
border-radius: 2px;
}
.wifi_icon {
width: 17.14px;
height: 12.33px;
background: #000000;
border-radius: 2px;
}
.battery_icon {
width: 27.33px;
height: 13px;
background: #000000;
border-radius: 4px;
position: relative;
&::before {
content: "";
position: absolute;
right: -1.33px;
top: 4.78px;
width: 1.33px;
height: 4.08px;
background: #000000;
opacity: 0.4;
}
}
}
}
// 导航栏
.navigation_bar {
position: relative;
z-index: 10;
background: transparent;
.nav_content {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
height: 44px;
.back_button {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
border-radius: 50%;
cursor: pointer;
.back_icon {
width: 8px;
height: 16px;
background: #000000;
clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
}
.nav_placeholder {
flex: 1;
}
.nav_actions {
display: flex;
gap: 12px;
.action_button {
width: 30px;
height: 30px;
background: rgba(255, 255, 255, 0.7);
border: 0.35px solid #dedede;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
&.share_button {
.share_icon {
width: 20px;
height: 20px;
background: #191919;
border-radius: 50%;
position: relative;
&::before,
&::after {
content: "";
position: absolute;
width: 4px;
height: 4px;
background: #000000;
border-radius: 50%;
}
&::before {
top: 6.75px;
left: 0.75px;
}
&::after {
top: 6.75px;
right: 0.75px;
}
}
}
&.home_button {
.home_icon {
width: 20px;
height: 20px;
background: #000000;
border-radius: 50%;
position: relative;
&::before {
content: "";
position: absolute;
top: 1.5px;
left: 1.5px;
width: 17px;
height: 17px;
border: 2px solid #000000;
border-radius: 50%;
}
&::after {
content: "";
position: absolute;
top: 7px;
left: 7px;
width: 6px;
height: 6px;
background: #000000;
border-radius: 50%;
}
}
}
}
}
}
}
// 主要内容
.main_content {
position: relative;
z-index: 10;
padding: 0px 24px 36px;
display: flex;
flex-direction: column;
gap: 36px;
}
// 标题区域
.title_section {
display: flex;
flex-direction: column;
gap: 8px;
text-align: left;
padding: 12px 24px 36px 24px;
.main_title {
font-family: "PingFang SC";
font-weight: 600;
font-size: 28px;
line-height: 1.4;
color: #000000;
}
.sub_title {
font-family: "PingFang SC";
font-weight: 300;
font-size: 18px;
line-height: 1.4;
color: #000000;
}
}
// 表单区域
.form_section {
display: flex;
flex-direction: column;
gap: 12px;
}
// 输入组
.input_group {
.input_container {
display: flex;
justify-content: space-between;
align-items: center;
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 12px;
padding: 10px 12px;
box-shadow: 0px 4px 36px 0px rgba(0, 0, 0, 0.06);
.phone_input {
flex: 1;
font-family: "PingFang SC";
font-weight: 500;
font-size: 20px;
line-height: 1.6;
color: #000000;
border: none;
outline: none;
background: transparent;
&::placeholder {
color: rgba(60, 60, 67, 0.3);
}
}
.char_count {
font-family: "PingFang SC";
font-weight: 400;
font-size: 14px;
line-height: 1.714;
color: rgba(60, 60, 67, 0.3);
.count_number {
color: rgba(60, 60, 67, 0.3);
transition: color 0.3s ease;
&.active {
color: #000000;
font-weight: 500;
}
}
}
}
}
// 验证码组
.verification_group {
display: flex;
gap: 12px;
align-items: center;
.input_container {
flex: 1;
display: flex;
justify-content: space-between;
align-items: center;
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 12px;
padding: 10px 12px;
width: 210px;
height: 52px;
box-sizing: border-box;
box-shadow: 0px 4px 36px 0px rgba(0, 0, 0, 0.06);
.code_input {
flex: 1;
font-family: "PingFang SC";
font-weight: 500;
font-size: 20px;
line-height: 1.6;
color: #000000;
border: none;
outline: none;
background: transparent;
&::placeholder {
color: rgba(60, 60, 67, 0.3);
}
}
.char_count {
font-family: "PingFang SC";
font-weight: 400;
font-size: 14px;
line-height: 1.714;
color: rgba(60, 60, 67, 0.3);
.count_number {
color: rgba(60, 60, 67, 0.3);
transition: color 0.3s ease;
&.active {
color: #000000;
font-weight: 500;
}
}
}
}
.send_code_button {
width: 120px;
height: 52px;
box-sizing: border-box;
padding: 12px 2px;
background: #000000;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 16px;
font-family: "PingFang SC";
font-weight: 600;
font-size: 16px;
line-height: 1.4;
color: #ffffff;
box-shadow: 0px 8px 64px 0px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(32px);
cursor: pointer;
transition: all 0.3s ease;
&.disabled {
opacity: 0.5;
cursor: not-allowed;
}
// 倒计时文案样式
.countdown_text {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
gap: 2px;
.countdown_line1 {
font-family: "PingFang SC";
font-weight: 500;
font-size: 12px;
line-height: 1.2;
color: #ffffff;
}
.countdown_line2 {
font-family: "PingFang SC";
font-weight: 400;
font-size: 11px;
line-height: 1.2;
color: rgba(255, 255, 255, 0.8);
}
}
}
}
// 登录按钮
.login_button {
width: 100%;
height: 52px;
background: #000000;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 16px;
font-family: "PingFang SC";
font-weight: 600;
font-size: 16px;
padding: 6px 2px;
color: #ffffff;
box-shadow: 0px 8px 64px 0px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(32px);
cursor: pointer;
transition: all 0.3s ease;
&.loading {
opacity: 0.7;
cursor: not-allowed;
}
}
// 协议区域
.terms_section {
padding: 0 24px;
text-align: center;
line-height: 1.5;
.terms_text {
font-family: "PingFang SC";
font-weight: 400;
font-size: 14px;
color: rgba(60, 60, 67, 0.6);
}
.terms_link {
font-family: "PingFang SC";
font-weight: 500;
font-size: 14px;
color: #000000;
text-decoration: underline;
cursor: pointer;
margin: 0 4px;
&:hover {
color: #333333;
}
}
}
// 浮层遮罩
.change_mobile_overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 100;
display: flex;
align-items: flex-end;
// 底部条款浮层
.change_mobile_float_layer {
position: relative;
bottom: 0;
left: 0;
right: 0;
background: #ffffff;
border-radius: 24px 24px 0 0;
padding: 24px 24px 34px;
z-index: 101;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
width: 100%;
display: flex;
flex-direction: column;
font-family: "PingFang SC";
// 浮层标题
.float_title {
margin-bottom: 20px;
.title_text {
font-weight: 600;
font-size: 22px;
color: #000000;
line-height: 1.4;
}
}
.hint_content {
margin-bottom: 20px;
.hint_text {
font-weight: 400;
font-size: 14px;
color: #000000;
line-height: 1.4;
}
}
.bind_mobile_info_box {
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, 0.06);
margin-bottom: 20px;
.bind_item {
display: flex;
justify-content: space-between;
align-items: center;
height: 44px;
color: #3c3c4399;
padding: 0 16px;
& + .bind_item {
border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.mobile {
color: #000000;
}
}
}
.button_group {
display: flex;
justify-content: space-between;
gap: 8px;
min-height: 0;
Button {
border: none;
border-radius: 16px;
flex: 1;
font-size: 16px;
height: 50px;
line-height: 50px;
}
.cancel_button {
background-color: #ffffff;
color: #000000;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.agree_button {
background: #000000;
color: #ffffff;
}
}
}
}

373
src/login_pages/verification/index.tsx Normal file
View File

@@ -0,0 +1,373 @@
import React, { useState, useEffect } from "react";
import { View, Text, Input, Button, Image } from "@tarojs/components";
import Taro, { useRouter } from "@tarojs/taro";
import {
phone_auth_login,
send_sms_code,
save_login_state,
updateUserPhone,
} from "@/services/loginService";
import "./index.scss";
const VerificationPage: React.FC = () => {
const [phone, setPhone] = useState("");
const [verification_code, setVerificationCode] = useState("");
const [countdown, setCountdown] = useState(0);
const [can_send_code, setCanSendCode] = useState(true);
const [is_loading, setIsLoading] = useState(false);
const [code_input_focus, setCodeInputFocus] = useState(false);
const [show_change_mobile_layer, setShowChangeMobileLayer] = useState(false);
const [oldPhone, setOldPhone] = useState("");
const {
params: { redirect },
} = useRouter();
// 计算登录按钮是否应该启用
const can_login =
phone.length === 11 && verification_code.length === 6 && !is_loading;
// 发送验证码
const handle_send_code = async () => {
if (!phone || phone.length !== 11) {
Taro.showToast({
title: "请输入正确的手机号",
icon: "none",
duration: 2000,
});
return;
}
if (!can_send_code) return;
try {
console.log("开始发送验证码，手机号:", phone);
// 调用发送短信接口
const result = await send_sms_code(phone);
console.log("发送验证码结果:", result);
if (result.success) {
console.log("验证码发送成功，开始倒计时");
Taro.showToast({
title: "验证码已发送",
icon: "success",
duration: 2000,
});
// 开始倒计时
setCanSendCode(false);
setCountdown(60);
console.log("设置状态: can_send_code = false, countdown = 60");
// 发送验证码成功后，让验证码输入框获得焦点并调用系统键盘
setTimeout(() => {
// 设置验证码输入框聚焦状态
setCodeInputFocus(true);
// 清空验证码，让用户重新输入
setVerificationCode("");
console.log("设置验证码输入框聚焦");
}, 500); // 延迟500ms确保Toast显示完成后再聚焦
} else {
console.log("验证码发送失败:", result.message);
Taro.showToast({
title: result.message || "发送失败",
icon: "none",
duration: 2000,
});
}
} catch (error) {
console.error("发送验证码异常:", error);
Taro.showToast({
title: "发送失败，请重试",
icon: "none",
duration: 2000,
});
}
};
// 倒计时效果
useEffect(() => {
console.log("倒计时 useEffect 触发，countdown:", countdown);
if (countdown > 0) {
const timer = setTimeout(() => {
console.log("倒计时减少，从", countdown, "到", countdown - 1);
setCountdown(countdown - 1);
}, 1000);
return () => clearTimeout(timer);
} else if (countdown === 0 && !can_send_code) {
console.log("倒计时结束，重新启用发送按钮");
setCanSendCode(true);
}
}, [countdown, can_send_code]);
// 手机号登录
const handle_phone_login = async () => {
if (!phone || phone.length !== 11) {
Taro.showToast({
title: "请输入正确的手机号",
icon: "none",
duration: 2000,
});
return;
}
if (!verification_code || verification_code.length !== 6) {
Taro.showToast({
title: "请输入6位验证码",
icon: "none",
duration: 2000,
});
return;
}
setIsLoading(true);
try {
// 先进行微信登录获取code
const login_result = await Taro.login();
if (!login_result.code) {
return {
success: false,
message: "微信登录失败",
};
}
const result = await phone_auth_login({
phone,
verification_code,
user_code: login_result.code,
});
if (result.success) {
save_login_state(result.token!, result.user_info!);
if (result.phone_update_status === "existing") {
const { existing_phone = "" } = result;
setShowChangeMobileLayer(true);
setOldPhone(existing_phone);
return;
}
setTimeout(() => {
Taro.redirectTo({
url: "/game_pages/list/index",
});
}, 200);
} else {
Taro.showToast({
title: result.message || "登录失败",
icon: "none",
duration: 2000,
});
}
} catch (error) {
Taro.showToast({
title: "登录失败，请重试",
icon: "none",
duration: 2000,
});
} finally {
setIsLoading(false);
}
};
const change_mobile = async () => {
setIsLoading(true);
try {
const res = await updateUserPhone({ phone });
if (res.code === 0) {
setTimeout(() => {
Taro.redirectTo({
url: "/game_pages/list/index",
});
}, 200);
} else {
Taro.showToast({
title: res.message || "更新手机号失败",
icon: "none",
duration: 2000,
});
}
} catch (e) {
Taro.showToast({
title: "更新失败，请重试",
icon: "none",
duration: 2000,
});
} finally {
setIsLoading(false);
}
};
const hidePhone = (phone: string): string => {
if (!phone) {
return "*";
}
return phone.replace(/(\d{3})(\d*)(\d{4})/,'$1****$3');
};
return (
<View className="verification_page">
{/* 背景 */}
<View className="background">
<View className="bg_color"></View>
</View>
{/* 主要内容 */}
<View className="main_content">
{/* 标题区域 */}
<View className="title_section">
<Text className="main_title">手机号注册/登录有场</Text>
<Text className="sub_title">Go Together, Grow Together</Text>
</View>
{/* 表单区域 */}
<View className="form_section">
{/* 手机号输入 */}
<View className="input_group">
<View className="input_container">
<Input
className="phone_input"
type="number"
placeholder="输入中国内地手机号"
placeholderClass="input_placeholder"
value={phone}
onInput={(e) => setPhone(e.detail.value)}
maxlength={11}
/>
<View className="char_count">
<Text
className={
phone.length > 0 ? "count_number active" : "count_number"
}
>
{phone.length}
</Text>
/11
</View>
</View>
</View>
{/* 验证码输入和发送按钮 */}
<View className="verification_group">
<View className="input_container">
<Input
className="code_input"
type="text"
placeholder="输入短信验证码"
placeholderClass="input_placeholder"
placeholderStyle="color:#999999;"
focus={code_input_focus}
value={verification_code}
onInput={(e) => setVerificationCode(e.detail.value)}
onFocus={() => setCodeInputFocus(true)}
onBlur={() => setCodeInputFocus(false)}
maxlength={6}
/>
<View className="char_count">
<Text
className={
verification_code.length > 0
? "count_number active"
: "count_number"
}
>
{verification_code.length}
</Text>
/6
</View>
</View>
<Button
className={`send_code_button ${!can_send_code ? "disabled" : ""}`}
onClick={handle_send_code}
disabled={!can_send_code}
>
{can_send_code ? (
"获取验证码"
) : (
<View className="countdown_text">
<Text className="countdown_line1">验证码已发送</Text>
<Text className="countdown_line2">{countdown}秒后可重发</Text>
</View>
)}
</Button>
{/* 调试信息 */}
{/* {process.env.NODE_ENV === 'development' && (
<View style={{fontSize: '12px', color: '#999', marginTop: '5px'}}>
调试: can_send_code={can_send_code.toString()}, countdown={countdown}
</View>
)} */}
</View>
</View>
{/* 登录按钮 */}
<View className="button_section">
<Button
className={`login_button ${is_loading ? "loading" : ""} ${
!can_login ? "disabled" : ""
}`}
onClick={handle_phone_login}
disabled={!can_login}
>
{"登录"}
</Button>
{/* 调试信息 */}
{/* {process.env.NODE_ENV === 'development' && (
<View style={{fontSize: '12px', color: '#999', marginTop: '5px', textAlign: 'center'}}>
调试: 手机号长度={phone.length}, 验证码长度={verification_code.length}, 可登录={can_login.toString()}
</View>
)} */}
</View>
</View>
{/* 底部指示器 */}
{show_change_mobile_layer && (
<View className="change_mobile_overlay">
{/* 底部修改手机号浮层 */}
<View className="change_mobile_float_layer">
<View className="float_title">
<Text className="title_text">是否更新已绑定的手机号？</Text>
</View>
<View className="hint_content">
<Text className="hint_text">
更新后，原手机号将解除绑定，后续登录和通知将使用新的手机号
</Text>
</View>
<View className="bind_mobile_info_box">
<View className="bind_item">
<Text>当前使用的手机号</Text>
<Text className="mobile">{hidePhone(phone)}</Text>
</View>
<View className="bind_item">
<Text>原绑定手机号</Text>
<Text className="mobile">{hidePhone(oldPhone)}</Text>
</View>
</View>
<View className="button_group">
<Button
className="cancel_button"
onClick={() => {
Taro.redirectTo({
url: "/game_pages/list/index",
});
}}
>
{"保持原手机号"}
</Button>
<Button className="agree_button" onClick={change_mobile}>
{"更新为当前手机号"}
</Button>
</View>
</View>
</View>
)}
</View>
);
};
export default VerificationPage;