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 显示 =====
/**
* 显示任务详情(居中布局,老年人大字优化
* 重点突出:状态 → 任务名 → 地点 → 时间/积分
* 显示任务详情(按原型图V3适老化设计
* 按状态显示不同内容布局
*/
private fun displayDetail(detail: TaskDetail) {
binding.taskContent.visibility = View.VISIBLE
binding.tvEmpty.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.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) {
binding.tvPosition.text = detail.positionText
binding.tvPosition.text = "📍 ${detail.positionText}"
binding.tvPosition.visibility = View.VISIBLE
} else {
binding.tvPosition.visibility = View.GONE
}
// 时间信息(派单时间 + 截止时间合并显示)
val timeInfo = StringBuilder()
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
// 时间
if (detail.sendTime.isNotEmpty()) {
binding.tvTimeInfo.text = "🕐 ${detail.sendTime}"
binding.tvTimeInfo.visibility = View.VISIBLE
} else {
binding.tvTimeInfo.visibility = View.GONE
}
// 积分大于0才显示
// 积分
if (detail.point > 0) {
binding.tvPoints.text = "积分 ${detail.pointText}"
binding.tvPoints.text = " ${detail.pointText} 积分"
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)) {
binding.tvCreatorName.text = "上报人:${detail.createName}"
binding.tvCreatorName.visibility = View.VISIBLE
// ===== 待打卡:指引去哪+怎么做 =====
3 -> {
// 备注
showNote(detail)
if (detail.hasPosition) {
// 有场景:两段式指引
binding.tvGoWhereTitle.text = "前往 ${detail.positionText}"
binding.blockGoWhere.visibility = View.VISIBLE
binding.blockHowTo.visibility = View.VISIBLE
} 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()) {
binding.tvDescription.text = detail.content
binding.tvDescription.visibility = View.VISIBLE
// 打卡确认时间
if (!detail.confirmTime.isNullOrEmpty()) {
val time = detail.confirmTime.split(" ").lastOrNull() ?: detail.confirmTime
binding.tvCheckinTime.text = time
} else {
binding.tvDescription.visibility = View.GONE
binding.tvCheckinTime.text = ""
}
binding.blockCheckedIn.visibility = View.VISIBLE
}
// 提示条(任务要求 或 打卡提示)
if (!detail.taskRequire.isNullOrEmpty()) {
binding.tvHint.text = detail.taskRequire
binding.tvHint.visibility = View.VISIBLE
} else if (detail.status == 3 && detail.hasPosition) {
binding.tvHint.text = "请将手表贴近打卡信标"
binding.tvHint.visibility = View.VISIBLE
} else {
binding.tvHint.visibility = View.GONE
// ===== 其他状态 =====
else -> {
if (detail.hasPosition) {
binding.tvPosition.text = "📍 ${detail.positionText}"
binding.tvPosition.visibility = View.VISIBLE
}
}
}
}
/** 显示备注/描述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"?>
<!-- 任务列表页(单任务展示,上下滑切换
老年人用户:重点信息大而突出,次要信息精简
布局:标题栏 → 任务名(最大) → 地点 → 关键信息 → 操作按钮 -->
<!-- 任务页(单任务展示,按原型图V3适老化设计
按状态显示不同内容布局:
- 待抢单:任务名+地点+时间+积分+备注 → 抢单
- 待打卡:任务名+指引块(去哪+怎么做) → 开始打卡
- 无场景:任务名+引导块(无需前往) → 确认打卡
- 待完成:任务名+打卡确认+备注 → 完成任务 -->
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/background">
<!-- 内容区 -->
<ScrollView
android:id="@+id/scrollView"
android:layout_width="match_parent"
@@ -24,22 +26,24 @@
android:paddingTop="27dp"
android:paddingEnd="21dp">
<!-- 标题栏:返回 + 第X/Y个 -->
<!-- 标题栏:返回 + 状态名 + 页码 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:layout_marginBottom="12dp">
android:layout_marginBottom="13dp">
<!-- 返回按钮 -->
<TextView
android:id="@+id/btnBack"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_width="32dp"
android:layout_height="32dp"
android:gravity="center"
android:text=""
android:textColor="@color/primary"
android:textSize="32sp" />
android:textSize="27sp" />
<!-- 状态名(接单池/待打卡/待完成) -->
<TextView
android:id="@+id/tvTitle"
android:layout_width="0dp"
@@ -47,122 +51,201 @@
android:layout_weight="1"
android:gravity="center"
android:textColor="@color/text_secondary"
android:textSize="18sp"
android:layout_marginEnd="40dp" />
android:textSize="16sp" />
<!-- 页码 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
android:id="@+id/taskContent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal"
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
android:id="@+id/tvTaskName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="@color/text_primary"
android:textSize="30sp"
android:textSize="28sp"
android:textStyle="bold"
android:lineSpacingMultiplier="1.2"
android:layout_marginBottom="8dp" />
android:layout_marginBottom="13dp" />
<!-- 地点(蓝色醒目 -->
<!-- 地点信息项(图标+文字,蓝色 -->
<TextView
android:id="@+id/tvPosition"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="@color/primary"
android:textSize="22sp"
android:layout_marginBottom="16dp" />
android:textSize="20sp"
android:drawablePadding="8dp"
android:layout_marginBottom="8dp"
android:visibility="gone" />
<!-- 派单时间 + 截止时间(一行显示 -->
<!-- 时间信息项(图标+文字 -->
<TextView
android:id="@+id/tvTimeInfo"
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:drawablePadding="8dp"
android:layout_marginBottom="8dp"
android:visibility="gone" />
<!-- 积分(大字橙色) -->
<TextView
android:id="@+id/tvPoints"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="@color/warning"
android:textSize="24sp"
android:textSize="22sp"
android:textStyle="bold"
android:layout_marginBottom="12dp"
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:drawablePadding="8dp"
android:layout_marginBottom="8dp"
android:visibility="gone" />
<!-- 协作人 -->
<!-- 备注块(绿色淡背景) -->
<TextView
android:id="@+id/tvWorkers"
android:id="@+id/tvNote"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:background="@drawable/bg_note_green"
android:textColor="@color/text_secondary"
android:textSize="18sp"
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:textSize="16sp"
android:lineSpacingMultiplier="1.5"
android:layout_marginTop="8dp"
android:padding="13dp"
android:layout_marginBottom="11dp"
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_height="wrap_content"
android:gravity="center"
android:padding="13dp"
android:textColor="@color/warning"
android:textSize="20sp"
android:textStyle="bold"
android:layout_marginTop="12dp"
android:visibility="gone" />
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>
<!-- 指引块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>
@@ -200,14 +283,12 @@
android:textColor="@color/text_secondary"
android:textSize="20sp"
android:layout_marginTop="8dp" />
</LinearLayout>
</LinearLayout>
</ScrollView>
<!-- 底部固定操作按钮(大字) -->
<!-- 底部固定操作按钮(大字+宽间距 -->
<TextView
android:id="@+id/btnAction"
android:layout_width="match_parent"
@@ -218,7 +299,7 @@
android:textColor="@color/text_primary"
android:textSize="24sp"
android:textStyle="bold"
android:letterSpacing="0.08"
android:letterSpacing="0.12"
android:visibility="gone" />
</FrameLayout>