1

pages/home/index.js

@@ -1,7 +1,15 @@
+import request from "@/utils/request"
 Page({
-
 	data: {
+		detail: {
+			overview: {},
+			tasks: [{}, {}, {}],
+		},
+		loading: true,
+	},
 
+	onLoad() {
+		this.init()
 	},
 
 	onShow() {
@@ -10,5 +18,31 @@ Page({
 				selected: '首页',
 			})
 		})
+	},
+
+	async init() {
+		let res = await request.get("/home")
+		this.setData({
+			detail: res,
+			loading: false,
+		})
+	},
+	//手动标记是否完成
+	handDone(e) {
+		const { data } = e.currentTarget.dataset;
+		const newTasks = this.data.detail.tasks.map(v => {
+			if (v.task_id == data.task_id) {
+				// 如果当前是 1 则变为 0，如果是 0 则变为 1
+				return { ...v, is_completed: v.is_completed == 1 ? 0 : 1 };
+			}
+			return v;
+		});
+		request.post("/home/task-record", {
+			...data,
+			is_completed: data.is_completed == 1 ? 0 : 1
+		})
+		this.setData({
+			'detail.tasks': newTasks
+		});
 	}
 })

pages/home/index.scss

@@ -1,5 +1,6 @@
 page {
 	background-color: rgba(247, 249, 252, 1);
+	padding-bottom: 160rpx;
 }
 
 .header {
@@ -78,11 +79,15 @@ page {
 			width: 90rpx;
 			aspect-ratio: 1;
 			border-radius: 20rpx;
-			background-color: var(--color);
+			background-color: var(--back);
 			color: rgba(99, 63, 0, 1);
 		}
 
 		.content {
+			flex: 1;
+			--td-tag-default-light-color: var(--back);
+			--td-tag-default-font-color: var(--color);
+
 			.time {
 				margin-left: 20rpx;
 				color: rgba(69, 70, 78, 1);

pages/home/index.wxml

@@ -1,22 +1,25 @@
+<wxs src="/utils/wxs/comment.wxs"
+	 module="utils"></wxs>
+
 <view class="header">
 	<t-navbar class="fixed-nav"
 			  fixed="{{false}}" />
 	<view class="h-1">
 		<view class="left">
-			<view class="t-1">术后第 2 天</view>
-			<view class="t-2">康复进行中</view>
+			<view class="t-1">术后第 {{detail.overview.postoperative_day || 0}} 天</view>
+			<view class="t-2">{{detail.overview.status_text}}</view>
 		</view>
 		<view class="right flex-column-center ">
-			<view class="d">2</view>
+			<view class="d">{{detail.overview.postoperative_day || 0}} </view>
 			<view class="c">DAYS</view>
 		</view>
 	</view>
 	<view class="h-2">
 		<view class="flex-between title">
 			<view>今日任务完成度</view>
-			<view class="num">0/5</view>
+			<view class="num">{{taskUtils.getDoneCount(detail.tasks)}}/{{detail.overview.total_task_count}}</view>
 		</view>
-		<t-progress percentage="80"
+		<t-progress percentage="{{taskUtils.getDoneCount(detail.tasks) / detail.overview.total_task_count * 100}}"
 					color="{{ ['white', 'white'] }}"
 					track-color="rgba(255, 255, 255, 0.2)"
 					label="" />
@@ -25,20 +28,31 @@
 
 <view class="list">
 	<view class="item flex-align"
-		  wx:for="{{5}}"
+		  style="--color:{{item.label_color}};--back:{{utils.getLightColor(item.label_color)}}"
+		  wx:for="{{detail.tasks}}"
 		  wx:key="index">
-		<view class="icon flex-center">
-			<t-icon name="apple" />
-		</view>
-		<view class="content">
-			<view class="flex-align">
-				<t-tag variant="light"
-					   theme="success">用药</t-tag>
-				<view class="time">08:00</view>
+		<t-skeleton loading="{{loading}}"
+					rowCol="{{[{ size: '90rpx' }]}}">
+			<view class="icon flex-center">
+				<t-icon name="{{item.pill}}" />
 			</view>
-			<view class="title">服用抗生素</view>
-			<view class="desc">头孢类抗生素，饭后服用</view>
-			<button class="btn">标记完成</button>
+		</t-skeleton>
+
+		<view class="content">
+			<t-skeleton loading="{{loading}}"
+						theme="paragraph">
+				<view class="flex-align">
+					<t-tag variant="light">{{item.category_label}}</t-tag>
+					<view class="time">{{item.time_label}}</view>
+				</view>
+				<view class="title">{{item.title}}</view>
+				<view class="desc">{{item.content}}</view>
+				<button class="btn {{item.is_completed == 1 ? 'active' : ''}}"
+						bind:tap="handDone"
+						data-data="{{item}}">
+					{{item.is_completed == 0 ? '标记完成' : '已完成' }}
+				</button>
+			</t-skeleton>
 		</view>
 	</view>
 </view>
@@ -47,4 +61,22 @@
 	<view class="title">💡 温馨提示：</view>
 	<view class="text"> 请按时完成康复任务，如有任何不适请及时联系医护人员</view>
 </view>
-<view style="height: 30rpx;"></view>
+<view style="height: 30rpx;"></view>
+
+
+<wxs module="taskUtils">
+	var getDoneCount = function (tasks) {
+		if (!tasks || !tasks.length) return 0;
+		var count = 0;
+		for (var i = 0; i < tasks.length; i++) {
+			if (tasks[i].is_completed == 1 || tasks[i].is_completed === true) {
+				count++;
+			}
+		}
+		return count;
+	};
+
+	module.exports = {
+		getDoneCount: getDoneCount
+	};
+</wxs>