删号

lib/api/endpoints/user_api.dart

@@ -48,3 +48,8 @@ Future<LoginDto> thirdLoginApi(String token, OtherLoginType type) async {
   });
   return LoginDto.fromJson(res);
 }
+
+///删除账号
+Future<void> deleteAccountApi() async {
+  return Request().get("/delete_account");
+}

lib/config/theme/theme.dart

@@ -11,7 +11,9 @@ final scheme = ColorScheme.fromSeed(
   surfaceContainer: Color(0xFFE9ECF3),
   surfaceContainerHigh: Color(0xFFDDE2EA),
   //颜色
-    onSurfaceVariant:Color(0xFF828282)
+    onSurfaceVariant:Color(0xFF828282),
+
+  shadow: Color.fromRGBO(0, 0, 0, 0.1),
 );
 
 ///字体

lib/page/my/my_page.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 
 import '../../widgets/common/app_backend.dart';
+import 'widget/user_card.dart';
 
 class MyPage extends StatefulWidget {
   const MyPage({super.key});
@@ -14,8 +15,9 @@ class _MyPageState extends State<MyPage> {
   Widget build(BuildContext context) {
     return AppBackend(
       child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-          Text("ds")
+          UserCard()
         ],
       ),
     );

lib/page/my/widget/user_card.dart

@@ -0,0 +1,197 @@
+import 'package:derma_flutter/api/dto/login_dto.dart';
+import 'package:derma_flutter/config/theme/custom_colors.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_easyloading/flutter_easyloading.dart';
+import 'package:go_router/go_router.dart';
+import 'package:provider/provider.dart';
+import 'package:remixicon/remixicon.dart';
+
+import '../../../api/endpoints/user_api.dart';
+import '../../../providers/app_store.dart';
+import '../../../router/config/route_paths.dart';
+import '../../../utils/common.dart';
+
+class UserCard extends StatefulWidget {
+  const UserCard({
+    super.key,
+  });
+
+  @override
+  State<UserCard> createState() => _UserCardState();
+}
+
+class _UserCardState extends State<UserCard> {
+  late UserInfo userInfo;
+
+  @override
+  void initState() {
+    super.initState();
+    var appStore = context.read<AppStore>();
+    userInfo = appStore.userInfo!;
+  }
+
+  ///退出登陆
+  void _handLogout() async {
+    await showCupertinoDialog(
+      context: context,
+      builder: (_) => CupertinoAlertDialog(
+        title: Text("Log Out?"),
+        content: Text("Are you sure you want to log out? You’ll need to sign in again to access your account."),
+        actions: [
+          CupertinoDialogAction(
+            child: Text(
+              "Cancel",
+              style: TextStyle(color: Colors.black),
+            ),
+            onPressed: () {
+              context.pop();
+            },
+          ),
+          CupertinoDialogAction(
+            child: Text("Log Out"),
+            onPressed: () {
+              context.pop();
+              var appStore = context.read<AppStore>();
+              appStore.logout();
+              context.go(RoutePaths.login);
+            },
+          ),
+        ],
+      ),
+    );
+  }
+
+  ///注销账号
+  void _handDelete() async {
+    await showCupertinoDialog(
+      context: context,
+      builder: (_) => CupertinoAlertDialog(
+        title: Text("Delete Account?"),
+        content: Text("Are you sure you want to delete your account? You won’t be able to recover your account."),
+        actions: [
+          CupertinoDialogAction(
+            onPressed: () {
+              context.pop();
+            },
+            child: Text("Cancel"),
+          ),
+          CupertinoDialogAction(
+            child: Text("Delete"),
+            onPressed: () async {
+              context.pop();
+              EasyLoading.show();
+              await deleteAccountApi();
+              EasyLoading.dismiss();
+              var appStore = context.read<AppStore>();
+              appStore.logout();
+              context.go(RoutePaths.login);
+            },
+          ),
+        ],
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: double.infinity,
+      padding: const EdgeInsets.all(16),
+      decoration: BoxDecoration(
+        color: Theme.of(context).colorScheme.surface,
+        borderRadius: BorderRadius.circular(16),
+        boxShadow: [
+          BoxShadow(
+            color: Theme.of(context).colorScheme.shadow,
+            blurRadius: 7,
+            offset: const Offset(0, 4),
+          ),
+        ],
+      ),
+      child: Column(
+        children: [
+          avatarWidget(),
+          Container(
+            margin: const EdgeInsets.only(top: 12),
+            child: Text(getNotEmpty(userInfo.name) ?? "user", style: Theme.of(context).textTheme.titleMedium),
+          ),
+          Container(
+            margin: const EdgeInsets.only(top: 5),
+            child: Text(userInfo.email ?? "", style: Theme.of(context).textTheme.labelMedium),
+          ),
+          SizedBox(height: 20),
+          btnItem(
+            title: "Logout",
+            icon: RemixIcons.logout_circle_line,
+            decoration: BoxDecoration(color: Theme.of(context).colorScheme.surfaceContainer),
+            onTap: _handLogout,
+          ),
+          Container(
+            margin: const EdgeInsets.only(top: 10),
+            child: InkWell(
+              onTap: _handDelete,
+              child: Text(
+                "Delete Account ",
+                style: TextStyle(color: Colors.red, fontSize: 14),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  ///头像
+  Widget avatarWidget() {
+    return Container(
+      width: 70,
+      height: 70,
+      decoration: BoxDecoration(
+        shape: BoxShape.circle,
+        gradient: LinearGradient(
+          colors: [
+            Theme.of(context).colorScheme.primary,
+            Theme.of(context).colorScheme.success,
+          ],
+        ),
+      ),
+      child: Icon(
+        RemixIcons.user_3_line,
+        color: Colors.white,
+        size: 30,
+      ),
+    );
+  }
+
+  ///按钮
+  Widget btnItem({
+    required String title,
+    required IconData icon,
+    required BoxDecoration decoration,
+    Color color = Colors.black,
+    required Function() onTap,
+  }) {
+    return InkWell(
+      onTap: onTap,
+      child: Container(
+        margin: const EdgeInsets.only(top: 15),
+        padding: const EdgeInsets.symmetric(vertical: 12),
+        decoration: decoration.copyWith(
+          borderRadius: BorderRadius.circular(8),
+        ),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Icon(icon, size: 20, color: color),
+            SizedBox(width: 10),
+            Text(
+              title,
+              style: TextStyle(color: color, fontWeight: FontWeight.w500),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/utils/common.dart

@@ -3,4 +3,12 @@ import 'dart:io';
 ///判断是否是安卓
 bool isAndroid(){
   return Platform.isAndroid;
-}
+}
+
+/// 获取非空的值
+String? getNotEmpty(String? value) {
+  if (value != null && value.isNotEmpty) {
+    return value;
+  }
+  return null;
+}