1
This commit is contained in:
zhutao
63
lib/page/record/detail/record_detail_page.dart
Normal file
63
lib/page/record/detail/record_detail_page.dart
Normal file
@@ -0,0 +1,63 @@
|
||||
import 'package:derma_flutter/api/dto/skin_check_dto.dart';
|
||||
import 'package:derma_flutter/data/models/skin_check_status.dart';
|
||||
import 'package:derma_flutter/page/record/detail/widget/error_box.dart';
|
||||
import 'package:derma_flutter/page/record/detail/widget/warning_box.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
||||
|
||||
import 'widget/success_box.dart';
|
||||
|
||||
class RecordDetailPage extends StatefulWidget {
|
||||
final SkinCheckDto data;
|
||||
|
||||
// final String id;
|
||||
|
||||
const RecordDetailPage({super.key, required this.data});
|
||||
|
||||
@override
|
||||
State<RecordDetailPage> createState() => _RecordDetailPageState();
|
||||
}
|
||||
|
||||
class _RecordDetailPageState extends State<RecordDetailPage> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
resizeToAvoidBottomInset: false,
|
||||
appBar: AppBar(
|
||||
backgroundColor: Colors.transparent,
|
||||
systemOverlayStyle: const SystemUiOverlayStyle(
|
||||
statusBarIconBrightness: Brightness.dark,
|
||||
),
|
||||
),
|
||||
body: Container(
|
||||
width: double.infinity,
|
||||
padding: EdgeInsets.only(left: 15, right: 15, top: 0.05.sh, bottom: 15),
|
||||
child: Column(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Builder(
|
||||
builder: (context) {
|
||||
switch (widget.data.skinStatus) {
|
||||
case SkinCheckStatus.normal:
|
||||
return SuccessBox(data: widget.data);
|
||||
case SkinCheckStatus.warning:
|
||||
return WarningBox(
|
||||
data: widget.data,
|
||||
);
|
||||
case SkinCheckStatus.danger:
|
||||
return ErrorBox(
|
||||
data: widget.data,
|
||||
);
|
||||
case SkinCheckStatus.unknown:
|
||||
return SizedBox();
|
||||
}
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
88
lib/page/record/detail/widget/common_box.dart
Normal file
88
lib/page/record/detail/widget/common_box.dart
Normal file
@@ -0,0 +1,88 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class StatusBox extends StatelessWidget {
|
||||
final Color color;
|
||||
final IconData icon;
|
||||
final String title;
|
||||
final String desc;
|
||||
|
||||
const StatusBox({
|
||||
super.key,
|
||||
required this.color,
|
||||
required this.icon,
|
||||
required this.title,
|
||||
required this.desc,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Column(
|
||||
children: [
|
||||
Container(
|
||||
width: 80,
|
||||
height: 80,
|
||||
decoration: BoxDecoration(
|
||||
color: color,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
child: Icon(
|
||||
icon,
|
||||
color: Colors.white,
|
||||
size: 50,
|
||||
),
|
||||
),
|
||||
Container(
|
||||
margin: const EdgeInsets.only(top: 10),
|
||||
child: Text(
|
||||
title,
|
||||
style: Theme.of(context).textTheme.titleMedium?.copyWith(
|
||||
color: color,
|
||||
),
|
||||
),
|
||||
),
|
||||
Container(
|
||||
margin: const EdgeInsets.only(top: 5),
|
||||
child: Text(
|
||||
desc,
|
||||
style: Theme.of(context).textTheme.labelMedium,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class CardBox extends StatelessWidget {
|
||||
final Widget child;
|
||||
|
||||
const CardBox({
|
||||
super.key,
|
||||
required this.child,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.all(15),
|
||||
margin: const EdgeInsets.only(top: 15),
|
||||
decoration: BoxDecoration(
|
||||
color: Theme.of(context).cardColor,
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Container(
|
||||
margin: const EdgeInsets.only(bottom: 10),
|
||||
child: Text(
|
||||
"Detected Signs:",
|
||||
style: Theme.of(context).textTheme.titleSmall,
|
||||
),
|
||||
),
|
||||
child
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
45
lib/page/record/detail/widget/error_box.dart
Normal file
45
lib/page/record/detail/widget/error_box.dart
Normal file
@@ -0,0 +1,45 @@
|
||||
import 'package:derma_flutter/api/dto/skin_check_dto.dart';
|
||||
import 'package:derma_flutter/config/theme/custom_colors.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
import 'package:remixicon/remixicon.dart';
|
||||
|
||||
import 'common_box.dart';
|
||||
|
||||
class ErrorBox extends StatefulWidget {
|
||||
final SkinCheckDto data;
|
||||
const ErrorBox({super.key, required this.data});
|
||||
|
||||
@override
|
||||
State<ErrorBox> createState() => _ErrorBoxState();
|
||||
}
|
||||
|
||||
class _ErrorBoxState extends State<ErrorBox> {
|
||||
void _handBack() {
|
||||
context.pop();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
StatusBox(
|
||||
color: Theme.of(context).colorScheme.error,
|
||||
icon: RemixIcons.alert_fill,
|
||||
title: "Need to see a doctor",
|
||||
desc: "Your skin shows signs of concern that require attention.Please visit the hospital for examination immediately.",
|
||||
),
|
||||
Container(
|
||||
width: double.infinity,
|
||||
height: 45,
|
||||
margin: const EdgeInsets.only(top: 50),
|
||||
child: ElevatedButton(
|
||||
onPressed: _handBack,
|
||||
child: Text("Know"),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
67
lib/page/record/detail/widget/success_box.dart
Normal file
67
lib/page/record/detail/widget/success_box.dart
Normal file
@@ -0,0 +1,67 @@
|
||||
import 'package:derma_flutter/api/dto/skin_check_dto.dart';
|
||||
import 'package:derma_flutter/config/theme/custom_colors.dart';
|
||||
import 'package:derma_flutter/page/record/detail/widget/common_box.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
import 'package:remixicon/remixicon.dart';
|
||||
|
||||
class SuccessBox extends StatefulWidget {
|
||||
final SkinCheckDto data;
|
||||
|
||||
const SuccessBox({super.key, required this.data});
|
||||
|
||||
@override
|
||||
State<SuccessBox> createState() => _SuccessBoxState();
|
||||
}
|
||||
|
||||
class _SuccessBoxState extends State<SuccessBox> {
|
||||
void _handBack() {
|
||||
context.pop();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
StatusBox(
|
||||
color: Theme.of(context).colorScheme.success,
|
||||
icon: RemixIcons.check_fill,
|
||||
title: "Healthy Skin",
|
||||
desc: "Your skin appears to be in good condition.",
|
||||
),
|
||||
CardBox(
|
||||
child: Wrap(
|
||||
spacing: 10,
|
||||
runSpacing: 10,
|
||||
children: widget.data.tags.map((item) {
|
||||
return Container(
|
||||
padding: EdgeInsets.symmetric(vertical: 3, horizontal: 10),
|
||||
decoration: BoxDecoration(
|
||||
color: Theme.of(context).colorScheme.success.withValues(alpha: 0.3),
|
||||
borderRadius: BorderRadius.circular(50),
|
||||
),
|
||||
child: Text(
|
||||
item,
|
||||
style: TextStyle(
|
||||
color: Theme.of(context).colorScheme.success,
|
||||
),
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
),
|
||||
|
||||
Container(
|
||||
width: double.infinity,
|
||||
height: 45,
|
||||
margin: const EdgeInsets.only(top: 50),
|
||||
child: ElevatedButton(
|
||||
onPressed: _handBack,
|
||||
child: Text("Return"),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
93
lib/page/record/detail/widget/warning_box.dart
Normal file
93
lib/page/record/detail/widget/warning_box.dart
Normal file
@@ -0,0 +1,93 @@
|
||||
import 'package:derma_flutter/api/dto/skin_check_dto.dart';
|
||||
import 'package:derma_flutter/api/endpoints/skin_api.dart';
|
||||
import 'package:derma_flutter/config/theme/custom_colors.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_easyloading/flutter_easyloading.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
import 'package:remixicon/remixicon.dart';
|
||||
|
||||
import 'common_box.dart';
|
||||
|
||||
class WarningBox extends StatefulWidget {
|
||||
final SkinCheckDto data;
|
||||
|
||||
const WarningBox({super.key, required this.data});
|
||||
|
||||
@override
|
||||
State<WarningBox> createState() => _WarningBoxState();
|
||||
}
|
||||
|
||||
class _WarningBoxState extends State<WarningBox> {
|
||||
final _emailController = TextEditingController();
|
||||
|
||||
///提交
|
||||
void _handSubmit() async {
|
||||
if (_emailController.text.isEmpty) {
|
||||
EasyLoading.showToast("Contact email is required");
|
||||
return;
|
||||
}
|
||||
EasyLoading.show(status: 'Sending request...');
|
||||
await skinContactApi(widget.data.id!, _emailController.text);
|
||||
EasyLoading.dismiss();
|
||||
context.pop();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return GestureDetector(
|
||||
onTap: () => FocusScope.of(context).unfocus(),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
StatusBox(
|
||||
color: Theme.of(context).colorScheme.warning,
|
||||
icon: RemixIcons.error_warning_fill,
|
||||
title: "Troubled Skin",
|
||||
desc: widget.data.concise ?? "",
|
||||
),
|
||||
Container(
|
||||
width: double.infinity,
|
||||
margin: const EdgeInsets.only(top: 20),
|
||||
child: Text(
|
||||
"Find out more:",
|
||||
style: Theme.of(context).textTheme.titleSmall,
|
||||
),
|
||||
),
|
||||
Container(
|
||||
width: double.infinity,
|
||||
margin: const EdgeInsets.only(top: 10),
|
||||
child: Text(
|
||||
"We will contact you shortly.Please check your e-mail promptly for further information.",
|
||||
),
|
||||
),
|
||||
Container(
|
||||
width: double.infinity,
|
||||
margin: const EdgeInsets.only(top: 10),
|
||||
child: Text(
|
||||
"Please confirm/enter your e-mail address:",
|
||||
),
|
||||
),
|
||||
Container(
|
||||
width: double.infinity,
|
||||
margin: const EdgeInsets.only(top: 15),
|
||||
child: TextField(
|
||||
controller: _emailController,
|
||||
decoration: InputDecoration(
|
||||
hintText: "Email",
|
||||
),
|
||||
),
|
||||
),
|
||||
Container(
|
||||
width: double.infinity,
|
||||
margin: const EdgeInsets.only(top: 60),
|
||||
height: 45,
|
||||
child: ElevatedButton(
|
||||
onPressed: _handSubmit,
|
||||
child: Text("Continue"),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
151
lib/page/record/list/record_list_page.dart
Normal file
151
lib/page/record/list/record_list_page.dart
Normal file
@@ -0,0 +1,151 @@
|
||||
import 'package:derma_flutter/api/dto/record_list_dto.dart';
|
||||
import 'package:derma_flutter/api/endpoints/skin_api.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../../../widgets/ui_kit/empty/index.dart';
|
||||
import 'widget/item_widget.dart';
|
||||
|
||||
class RecordListPage extends StatefulWidget {
|
||||
const RecordListPage({super.key});
|
||||
|
||||
@override
|
||||
State<RecordListPage> createState() => _RecordListPageState();
|
||||
}
|
||||
|
||||
class _RecordListPageState extends State<RecordListPage> with TickerProviderStateMixin, AutomaticKeepAliveClientMixin {
|
||||
//tab
|
||||
late TabController _tabController;
|
||||
List<TabItem> tabList = [
|
||||
TabItem(name: "All", value: 0),
|
||||
TabItem(name: "Healthy", value: 1),
|
||||
TabItem(name: "Unhealthy", value: 2),
|
||||
];
|
||||
|
||||
//列表
|
||||
List<RecordItemDto> _recordList = [];
|
||||
var _isEnd = false;
|
||||
var _isLoading = false;
|
||||
|
||||
///滚动监听器
|
||||
final ScrollController _scrollController = ScrollController();
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_tabController = TabController(length: tabList.length, vsync: this);
|
||||
_tabController.addListener(_onTabChange);
|
||||
_scrollController.addListener(_onScroll);
|
||||
_onRefresh();
|
||||
}
|
||||
|
||||
///监听列表滚动
|
||||
void _onScroll() {
|
||||
final maxExtent = _scrollController.position.maxScrollExtent;
|
||||
final current = _scrollController.position.pixels;
|
||||
const threshold = 15;
|
||||
if (current >= maxExtent - threshold) {
|
||||
_fetchList();
|
||||
}
|
||||
}
|
||||
|
||||
///tab改变
|
||||
void _onTabChange() {
|
||||
if (!_tabController.indexIsChanging) {
|
||||
_onRefresh();
|
||||
}
|
||||
}
|
||||
|
||||
///刷新
|
||||
Future<void> _onRefresh() async {
|
||||
_isEnd = false;
|
||||
await _fetchList(refresh: true);
|
||||
}
|
||||
|
||||
///获取数据
|
||||
Future<void> _fetchList({bool refresh = false}) async {
|
||||
const pageSize = 20;
|
||||
int page = refresh ? 1 : (_recordList.length / pageSize).ceil() + 1;
|
||||
if (!_isLoading && !_isEnd) {
|
||||
setState(() => _isLoading = true);
|
||||
var type = tabList[_tabController.index].value;
|
||||
var res = await skinRecordApi(
|
||||
page: page,
|
||||
pageSize: pageSize,
|
||||
query: {"skin_status": type},
|
||||
);
|
||||
|
||||
setState(() {
|
||||
_isEnd = res.list!.length < pageSize;
|
||||
if (refresh) {
|
||||
_recordList.clear();
|
||||
}
|
||||
_recordList.addAll(res.list!);
|
||||
_isLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
super.build(context);
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text("Analysis History"),
|
||||
bottom: TabBar(
|
||||
controller: _tabController,
|
||||
dividerColor: Colors.transparent,
|
||||
tabs: tabList.map((item) {
|
||||
return Tab(text: item.name);
|
||||
}).toList(),
|
||||
),
|
||||
),
|
||||
body: RefreshIndicator(
|
||||
onRefresh: () => _onRefresh(),
|
||||
child: Visibility(
|
||||
visible: !_isLoading && _recordList.isEmpty,
|
||||
replacement: ListView(
|
||||
controller: _scrollController,
|
||||
padding: EdgeInsets.all(15),
|
||||
children: [
|
||||
..._recordList.map((item) {
|
||||
return ItemWidget(data: item);
|
||||
}),
|
||||
Container(
|
||||
margin: EdgeInsets.only(bottom: 10),
|
||||
child: Visibility(
|
||||
visible: _isLoading,
|
||||
replacement: Center(child: Text("已加载完毕", style: Theme.of(context).textTheme.labelSmall)),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
SizedBox(
|
||||
width: 12,
|
||||
height: 12,
|
||||
child: CircularProgressIndicator(
|
||||
strokeWidth: 1,
|
||||
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
Text("加载中...", style: Theme.of(context).textTheme.labelSmall),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Empty(),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
bool get wantKeepAlive => true;
|
||||
}
|
||||
|
||||
class TabItem {
|
||||
final String name;
|
||||
final int value;
|
||||
|
||||
const TabItem({required this.name, required this.value});
|
||||
}
|
||||
113
lib/page/record/list/widget/item_widget.dart
Normal file
113
lib/page/record/list/widget/item_widget.dart
Normal file
@@ -0,0 +1,113 @@
|
||||
import 'package:derma_flutter/api/dto/record_list_dto.dart';
|
||||
import 'package:derma_flutter/config/theme/custom_colors.dart';
|
||||
import 'package:derma_flutter/router/config/route_paths.dart';
|
||||
import 'package:derma_flutter/utils/format.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
import 'package:remixicon/remixicon.dart';
|
||||
|
||||
class ItemWidget extends StatefulWidget {
|
||||
final RecordItemDto data;
|
||||
|
||||
const ItemWidget({super.key, required this.data});
|
||||
|
||||
@override
|
||||
State<ItemWidget> createState() => _ItemWidgetState();
|
||||
}
|
||||
|
||||
class _ItemWidgetState extends State<ItemWidget> {
|
||||
void _handToDetail() {
|
||||
context.push(RoutePaths.detail, extra: widget.data.result);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
var color = Colors.black;
|
||||
|
||||
switch (widget.data.skinStatus) {
|
||||
case 1:
|
||||
color = Theme.of(context).colorScheme.success;
|
||||
break;
|
||||
case 2:
|
||||
color = Theme.of(context).colorScheme.warning;
|
||||
break;
|
||||
case 3:
|
||||
color = Theme.of(context).colorScheme.error;
|
||||
break;
|
||||
default:
|
||||
color = Colors.black;
|
||||
}
|
||||
|
||||
return InkWell(
|
||||
onTap: _handToDetail,
|
||||
child: Container(
|
||||
padding: EdgeInsets.all(15),
|
||||
margin: EdgeInsets.only(bottom: 15),
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
color: Theme.of(context).colorScheme.surface,
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Color(0xffE9E9E9),
|
||||
spreadRadius: 2,
|
||||
blurRadius: 9,
|
||||
offset: Offset(1, 2), // changes position of shadow
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Container(
|
||||
margin: EdgeInsets.only(bottom: 10),
|
||||
child: Text("Recent Analyses"),
|
||||
),
|
||||
Row(
|
||||
spacing: 15,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Container(
|
||||
width: 80,
|
||||
height: 80,
|
||||
clipBehavior: Clip.hardEdge,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
),
|
||||
child: Image.network(
|
||||
widget.data.imageUrl!,
|
||||
fit: BoxFit.cover,
|
||||
errorBuilder: (context, error, stackTrace) {
|
||||
return Container(
|
||||
decoration: BoxDecoration(color: Theme.of(context).colorScheme.surfaceContainer),
|
||||
child: Icon(RemixIcons.error_warning_fill),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
Container(
|
||||
padding: EdgeInsets.only(top: 5),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
"health",
|
||||
style: TextStyle(fontSize: 14, fontWeight: FontWeight.w500, color: color),
|
||||
),
|
||||
Container(
|
||||
margin: EdgeInsets.only(top: 5),
|
||||
child: Text(
|
||||
formatDateUS(widget.data.createdAt),
|
||||
style: Theme.of(context).textTheme.labelSmall,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user