feat: 任务页面按原型图V3适老化重设计

按状态显示不同布局:
- 待抢单:任务名+地点+时间+积分+备注 → 帮助决策
- 待打卡(有场景):任务名+备注+指引块(去哪+怎么做) → 两段式指引
- 待打卡(无场景):任务名+绿色引导块 → 正向说明
- 待完成:任务名+备注+打卡时间大字确认 → 安心感
标题栏三栏:返回+状态名+页码
新增指引块drawable(orange/blue/green/note)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
dongliang
2026-04-28 13:09:04 +09:30
parent 354a2ab124
commit 2f0fc675d2
6 changed files with 273 additions and 163 deletions

View File

@@ -198,106 +198,111 @@ class TaskListFragment : BaseFragment<FragmentTaskListBinding>() {
// ===== UI 显示 ===== // ===== UI 显示 =====
/** /**
* 显示任务详情(居中布局,老年人大字优化 * 显示任务详情(按原型图V3适老化设计
* 重点突出:状态 → 任务名 → 地点 → 时间/积分 * 按状态显示不同内容布局
*/ */
private fun displayDetail(detail: TaskDetail) { private fun displayDetail(detail: TaskDetail) {
binding.taskContent.visibility = View.VISIBLE binding.taskContent.visibility = View.VISIBLE
binding.tvEmpty.visibility = View.GONE binding.tvEmpty.visibility = View.GONE
binding.loadingWrap.visibility = View.GONE binding.loadingWrap.visibility = View.GONE
// 标题第X/Y个任务 // 标题栏:状态名
binding.tvTitle.text = "${taskIndex + 1}/${taskList.size}个任务" binding.tvTitle.text = when (currentStatus) {
2 -> "接单池"
3 -> "待打卡"
4 -> "待完成"
else -> "任务"
}
// 页码
binding.tvPageNum.text = "${taskIndex + 1}/${taskList.size}"
// 状态标签(最顶部,带背景色 // 任务名(始终显示,最大最突出
when (detail.status) {
2 -> {
binding.tvStatus.text = "待抢单"
binding.tvStatus.setTextColor(requireContext().getColor(R.color.primary))
binding.tvStatus.setBackgroundResource(R.drawable.bg_pill_blue)
}
3 -> {
binding.tvStatus.text = "待打卡"
binding.tvStatus.setTextColor(requireContext().getColor(R.color.warning))
binding.tvStatus.setBackgroundResource(R.drawable.bg_pill_orange)
}
4 -> {
binding.tvStatus.text = "进行中"
binding.tvStatus.setTextColor(requireContext().getColor(R.color.success))
binding.tvStatus.setBackgroundResource(R.drawable.bg_pill_green)
}
else -> {
binding.tvStatus.text = "已完成"
binding.tvStatus.setTextColor(requireContext().getColor(R.color.text_secondary))
binding.tvStatus.background = null
}
}
// 任务名(最大最醒目)
binding.tvTaskName.text = detail.displayName binding.tvTaskName.text = detail.displayName
// 先隐藏所有可选区域
binding.tvPosition.visibility = View.GONE
binding.tvTimeInfo.visibility = View.GONE
binding.tvPoints.visibility = View.GONE
binding.tvNote.visibility = View.GONE
binding.blockGoWhere.visibility = View.GONE
binding.blockHowTo.visibility = View.GONE
binding.blockNoScene.visibility = View.GONE
binding.blockCheckedIn.visibility = View.GONE
// 按状态显示不同内容
when (detail.status) {
// ===== 待抢单:展示完整信息帮助决策 =====
2 -> {
// 地点 // 地点
if (detail.hasPosition) { if (detail.hasPosition) {
binding.tvPosition.text = detail.positionText binding.tvPosition.text = "📍 ${detail.positionText}"
binding.tvPosition.visibility = View.VISIBLE binding.tvPosition.visibility = View.VISIBLE
} else {
binding.tvPosition.visibility = View.GONE
} }
// 时间
// 时间信息(派单时间 + 截止时间合并显示) if (detail.sendTime.isNotEmpty()) {
val timeInfo = StringBuilder() binding.tvTimeInfo.text = "🕐 ${detail.sendTime}"
if (detail.sendTime.isNotEmpty()) timeInfo.append("${detail.sendTime} 派单")
if (!detail.expireTime.isNullOrEmpty()) {
if (timeInfo.isNotEmpty()) timeInfo.append("\n")
timeInfo.append("截止 ${detail.expireTime}")
}
if (!detail.preFinishTime.isNullOrEmpty()) {
if (timeInfo.isNotEmpty()) timeInfo.append("\n")
timeInfo.append("要求 ${detail.preFinishTime} 完成")
}
if (timeInfo.isNotEmpty()) {
binding.tvTimeInfo.text = timeInfo
binding.tvTimeInfo.visibility = View.VISIBLE binding.tvTimeInfo.visibility = View.VISIBLE
} else {
binding.tvTimeInfo.visibility = View.GONE
} }
// 积分
// 积分大于0才显示
if (detail.point > 0) { if (detail.point > 0) {
binding.tvPoints.text = "积分 ${detail.pointText}" binding.tvPoints.text = " ${detail.pointText} 积分"
binding.tvPoints.visibility = View.VISIBLE binding.tvPoints.visibility = View.VISIBLE
} else { }
binding.tvPoints.visibility = View.GONE // 备注/描述
showNote(detail)
} }
// 上报人type 3/4 // ===== 待打卡:指引去哪+怎么做 =====
if (detail.createName.isNotEmpty() && detail.taskType in listOf(3, 4)) { 3 -> {
binding.tvCreatorName.text = "上报人:${detail.createName}" // 备注
binding.tvCreatorName.visibility = View.VISIBLE showNote(detail)
if (detail.hasPosition) {
// 有场景:两段式指引
binding.tvGoWhereTitle.text = "前往 ${detail.positionText}"
binding.blockGoWhere.visibility = View.VISIBLE
binding.blockHowTo.visibility = View.VISIBLE
} else { } else {
binding.tvCreatorName.visibility = View.GONE // 无场景:绿色引导
binding.blockNoScene.visibility = View.VISIBLE
}
} }
// 协作人 // ===== 进行中/待完成:打卡确认+完成指引 =====
binding.tvWorkers.visibility = View.GONE // TODO: workTogether 结构待确认 4 -> {
// 备注
showNote(detail)
// 描述 // 打卡确认时间
if (detail.content.isNotEmpty()) { if (!detail.confirmTime.isNullOrEmpty()) {
binding.tvDescription.text = detail.content val time = detail.confirmTime.split(" ").lastOrNull() ?: detail.confirmTime
binding.tvDescription.visibility = View.VISIBLE binding.tvCheckinTime.text = time
} else { } else {
binding.tvDescription.visibility = View.GONE binding.tvCheckinTime.text = ""
}
binding.blockCheckedIn.visibility = View.VISIBLE
} }
// 提示条(任务要求 或 打卡提示) // ===== 其他状态 =====
if (!detail.taskRequire.isNullOrEmpty()) { else -> {
binding.tvHint.text = detail.taskRequire if (detail.hasPosition) {
binding.tvHint.visibility = View.VISIBLE binding.tvPosition.text = "📍 ${detail.positionText}"
} else if (detail.status == 3 && detail.hasPosition) { binding.tvPosition.visibility = View.VISIBLE
binding.tvHint.text = "请将手表贴近打卡信标" }
binding.tvHint.visibility = View.VISIBLE }
} else { }
binding.tvHint.visibility = View.GONE }
/** 显示备注/描述content 或 taskRequire */
private fun showNote(detail: TaskDetail) {
val note = when {
!detail.taskRequire.isNullOrEmpty() -> detail.taskRequire
detail.content.isNotEmpty() -> detail.content
else -> null
}
if (note != null) {
binding.tvNote.text = note
binding.tvNote.visibility = View.VISIBLE
} }
} }

View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- 操作指引块:蓝色半透明背景 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#213B9EFF" />
<corners android:radius="11dp" />
</shape>

View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- 操作指引块:绿色半透明背景 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#214ADE80" />
<corners android:radius="11dp" />
</shape>

View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- 操作指引块:橙色半透明背景 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#21FFB340" />
<corners android:radius="11dp" />
</shape>

View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- 备注块:绿色淡背景 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#1A4ADE80" />
<corners android:radius="11dp" />
</shape>

View File

@@ -1,13 +1,15 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<!-- 任务列表页(单任务展示,上下滑切换 <!-- 任务页(单任务展示,按原型图V3适老化设计
老年人用户:重点信息大而突出,次要信息精简 按状态显示不同内容布局:
布局:标题栏 → 任务名(最大) → 地点 → 关键信息 → 操作按钮 --> - 待抢单:任务名+地点+时间+积分+备注 → 抢单
- 待打卡:任务名+指引块(去哪+怎么做) → 开始打卡
- 无场景:任务名+引导块(无需前往) → 确认打卡
- 待完成:任务名+打卡确认+备注 → 完成任务 -->
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="match_parent" android:layout_height="match_parent"
android:background="@color/background"> android:background="@color/background">
<!-- 内容区 -->
<ScrollView <ScrollView
android:id="@+id/scrollView" android:id="@+id/scrollView"
android:layout_width="match_parent" android:layout_width="match_parent"
@@ -24,22 +26,24 @@
android:paddingTop="27dp" android:paddingTop="27dp"
android:paddingEnd="21dp"> android:paddingEnd="21dp">
<!-- 标题栏:返回 + 第X/Y个 --> <!-- 标题栏:返回 + 状态名 + 页码 -->
<LinearLayout <LinearLayout
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:gravity="center_vertical" android:gravity="center_vertical"
android:layout_marginBottom="12dp"> android:layout_marginBottom="13dp">
<!-- 返回按钮 -->
<TextView <TextView
android:id="@+id/btnBack" android:id="@+id/btnBack"
android:layout_width="40dp" android:layout_width="32dp"
android:layout_height="40dp" android:layout_height="32dp"
android:gravity="center" android:gravity="center"
android:text="" android:text=""
android:textColor="@color/primary" android:textColor="@color/primary"
android:textSize="32sp" /> android:textSize="27sp" />
<!-- 状态名(接单池/待打卡/待完成) -->
<TextView <TextView
android:id="@+id/tvTitle" android:id="@+id/tvTitle"
android:layout_width="0dp" android:layout_width="0dp"
@@ -47,122 +51,201 @@
android:layout_weight="1" android:layout_weight="1"
android:gravity="center" android:gravity="center"
android:textColor="@color/text_secondary" android:textColor="@color/text_secondary"
android:textSize="18sp" android:textSize="16sp" />
android:layout_marginEnd="40dp" />
<!-- 页码 1/3 -->
<TextView
android:id="@+id/tvPageNum"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/text_primary"
android:textSize="17sp"
android:textStyle="bold"
android:minWidth="37dp"
android:gravity="end" />
</LinearLayout> </LinearLayout>
<!-- ===== 任务详情区域 ===== --> <!-- ===== 任务内容区 ===== -->
<LinearLayout <LinearLayout
android:id="@+id/taskContent" android:id="@+id/taskContent"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:orientation="vertical" android:orientation="vertical"
android:gravity="center_horizontal"
android:visibility="gone"> android:visibility="gone">
<!-- 状态标签(最顶部,彩色醒目 --> <!-- 任务名称(最大最突出 -->
<TextView
android:id="@+id/tvStatus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:textSize="18sp"
android:textStyle="bold"
android:layout_marginBottom="10dp" />
<!-- 任务名称(最大最醒目) -->
<TextView <TextView
android:id="@+id/tvTaskName" android:id="@+id/tvTaskName"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:gravity="center"
android:textColor="@color/text_primary" android:textColor="@color/text_primary"
android:textSize="30sp" android:textSize="28sp"
android:textStyle="bold" android:textStyle="bold"
android:lineSpacingMultiplier="1.2" android:lineSpacingMultiplier="1.2"
android:layout_marginBottom="8dp" /> android:layout_marginBottom="13dp" />
<!-- 地点(蓝色醒目 --> <!-- 地点信息项(图标+文字,蓝色 -->
<TextView <TextView
android:id="@+id/tvPosition" android:id="@+id/tvPosition"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:gravity="center"
android:textColor="@color/primary" android:textColor="@color/primary"
android:textSize="22sp" android:textSize="20sp"
android:layout_marginBottom="16dp" /> android:drawablePadding="8dp"
android:layout_marginBottom="8dp"
android:visibility="gone" />
<!-- 派单时间 + 截止时间(一行显示 --> <!-- 时间信息项(图标+文字 -->
<TextView <TextView
android:id="@+id/tvTimeInfo" android:id="@+id/tvTimeInfo"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:gravity="center"
android:textColor="@color/text_secondary" android:textColor="@color/text_secondary"
android:textSize="18sp" android:textSize="18sp"
android:layout_marginBottom="8dp" /> android:drawablePadding="8dp"
android:layout_marginBottom="8dp"
android:visibility="gone" />
<!-- 积分(大字橙色) --> <!-- 积分(大字橙色) -->
<TextView <TextView
android:id="@+id/tvPoints" android:id="@+id/tvPoints"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:gravity="center"
android:textColor="@color/warning" android:textColor="@color/warning"
android:textSize="24sp" android:textSize="22sp"
android:textStyle="bold" android:textStyle="bold"
android:layout_marginBottom="12dp" android:drawablePadding="8dp"
android:visibility="gone" />
<!-- 上报人type 3/4 -->
<TextView
android:id="@+id/tvCreatorName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="@color/text_secondary"
android:textSize="18sp"
android:layout_marginBottom="8dp" android:layout_marginBottom="8dp"
android:visibility="gone" /> android:visibility="gone" />
<!-- 协作人 --> <!-- 备注块(绿色淡背景) -->
<TextView <TextView
android:id="@+id/tvWorkers" android:id="@+id/tvNote"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:gravity="center" android:background="@drawable/bg_note_green"
android:textColor="@color/text_secondary" android:textColor="@color/text_secondary"
android:textSize="18sp" android:textSize="16sp"
android:layout_marginBottom="8dp"
android:visibility="gone" />
<!-- 任务描述 -->
<TextView
android:id="@+id/tvDescription"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@color/text_secondary"
android:textSize="18sp"
android:lineSpacingMultiplier="1.5" android:lineSpacingMultiplier="1.5"
android:layout_marginTop="8dp" android:padding="13dp"
android:layout_marginBottom="11dp"
android:visibility="gone" /> android:visibility="gone" />
<!-- 提示条(黄色醒目) --> <!-- ===== 待打卡状态:操作指引块 ===== -->
<TextView
android:id="@+id/tvHint" <!-- 指引块1去哪里橙色 -->
<LinearLayout
android:id="@+id/blockGoWhere"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bg_action_block_orange"
android:orientation="vertical"
android:padding="16dp"
android:layout_marginBottom="8dp"
android:visibility="gone">
<TextView
android:id="@+id/tvGoWhereTitle"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:gravity="center"
android:padding="13dp"
android:textColor="@color/warning" android:textColor="@color/warning"
android:textSize="20sp" android:textSize="20sp"
android:textStyle="bold" android:textStyle="bold" />
android:layout_marginTop="12dp"
android:visibility="gone" /> <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="找到打卡点后再点下方按钮"
android:textColor="@color/text_secondary"
android:textSize="16sp"
android:layout_marginTop="5dp" />
</LinearLayout>
<!-- 指引块2怎么做蓝色 -->
<LinearLayout
android:id="@+id/blockHowTo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bg_action_block_blue"
android:orientation="vertical"
android:padding="16dp"
android:layout_marginBottom="8dp"
android:visibility="gone">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="将手表贴近信标"
android:textColor="@color/primary"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="听到提示音即打卡成功"
android:textColor="@color/text_secondary"
android:textSize="16sp"
android:layout_marginTop="5dp" />
</LinearLayout>
<!-- 无场景引导块(绿色) -->
<LinearLayout
android:id="@+id/blockNoScene"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bg_action_block_green"
android:orientation="vertical"
android:padding="16dp"
android:layout_marginBottom="8dp"
android:visibility="gone">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="无需前往指定地点"
android:textColor="@color/success"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="确认已就位后,直接点击下方按钮"
android:textColor="@color/text_secondary"
android:textSize="16sp"
android:layout_marginTop="5dp" />
</LinearLayout>
<!-- ===== 待完成状态:打卡确认 ===== -->
<LinearLayout
android:id="@+id/blockCheckedIn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:paddingTop="13dp"
android:paddingBottom="13dp"
android:visibility="gone">
<!-- 打卡时间大字 -->
<TextView
android:id="@+id/tvCheckinTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/success"
android:textSize="36sp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="打卡成功,完成任务后点下方按钮"
android:textColor="@color/text_secondary"
android:textSize="16sp"
android:layout_marginTop="5dp" />
</LinearLayout>
</LinearLayout> </LinearLayout>
@@ -200,14 +283,12 @@
android:textColor="@color/text_secondary" android:textColor="@color/text_secondary"
android:textSize="20sp" android:textSize="20sp"
android:layout_marginTop="8dp" /> android:layout_marginTop="8dp" />
</LinearLayout> </LinearLayout>
</LinearLayout> </LinearLayout>
</ScrollView> </ScrollView>
<!-- 底部固定操作按钮(大字) --> <!-- 底部固定操作按钮(大字+宽间距 -->
<TextView <TextView
android:id="@+id/btnAction" android:id="@+id/btnAction"
android:layout_width="match_parent" android:layout_width="match_parent"
@@ -218,7 +299,7 @@
android:textColor="@color/text_primary" android:textColor="@color/text_primary"
android:textSize="24sp" android:textSize="24sp"
android:textStyle="bold" android:textStyle="bold"
android:letterSpacing="0.08" android:letterSpacing="0.12"
android:visibility="gone" /> android:visibility="gone" />
</FrameLayout> </FrameLayout>