用户资料

lib/views/user/info/avatar_page.dart

@@ -1,15 +0,0 @@
-import 'package:flutter/material.dart';
-
-class UserInfoAvatarPage extends StatefulWidget {
-  const UserInfoAvatarPage({Key? key}) : super(key: key);
-
-  @override
-  State<UserInfoAvatarPage> createState() => _UserInfoAvatarPageState();
-}
-
-class _UserInfoAvatarPageState extends State<UserInfoAvatarPage> {
-  @override
-  Widget build(BuildContext context) {
-    return Container();
-  }
-}

lib/views/user/info/index_page.dart

@@ -1,4 +1,13 @@
+import 'package:chat/configs/app_colors.dart';
+import 'package:chat/controllers/user_controller.dart';
+import 'package:chat/routes/user_routes.dart';
+import 'package:chat/services/auth_service.dart';
+import 'package:chat/views/user/widgets/link_action_item.dart';
+import 'package:chat/widgets/custom_circle_avatar.dart';
 import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:image_cropper/image_cropper.dart';
+import 'package:wechat_assets_picker/wechat_assets_picker.dart';
 
 class UserInfoPage extends StatefulWidget {
   const UserInfoPage({Key? key}) : super(key: key);
@@ -12,8 +21,83 @@ class _UserInfoPageState extends State<UserInfoPage> {
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
-        title: const Text('用户资料'),
+        title: const Text('个人资料'),
+      ),
+      body: GetX<AuthService>(
+        builder: (_) {
+          return SafeArea(
+            child: Column(
+              children: [
+                LinkActionItem(
+                  title: '头像',
+                  onTap: () async {
+                    final result = await AssetPicker.pickAssets(
+                      Get.context!,
+                      pickerConfig: const AssetPickerConfig(
+                        maxAssets: 1,
+                        requestType: RequestType.image,
+                      ),
+                    );
+
+                    if (result == null) {
+                      return;
+                    }
+
+                    _cropImage((await result.first.file)!.path);
+                  },
+                  trailing: CustomCircleAvatar(
+                    _.userInfo.value.avatar,
+                    size: 44,
+                    borderWidth: 0.8,
+                    borderColor: AppColors.primary,
+                  ),
+                ),
+                LinkActionItem(
+                  title: '昵称',
+                  trailing: Text(_.userInfo.value.nickname!),
+                  isLink: true,
+                  onTap: () {
+                    Get.toNamed(
+                      UserRoutes.infoNickname,
+                      arguments: {
+                        'nickname': _.userInfo.value.nickname,
+                      },
+                    );
+                  },
+                ),
+                Expanded(child: Container()),
+              ],
+            ),
+          );
+        },
       ),
     );
   }
+
+  Future<void> _cropImage(String imagePath) async {
+    CroppedFile? croppedFile = await ImageCropper().cropImage(
+      sourcePath: imagePath,
+      maxHeight: 128,
+      maxWidth: 128,
+      compressQuality: 70,
+      aspectRatio: const CropAspectRatio(
+        ratioX: 1,
+        ratioY: 1,
+      ),
+      compressFormat: ImageCompressFormat.png,
+      uiSettings: [
+        IOSUiSettings(
+          title: '头像剪裁',
+          doneButtonTitle: '完成',
+          cancelButtonTitle: '取消',
+        ),
+        AndroidUiSettings(
+          toolbarTitle: '头像剪裁',
+        ),
+      ],
+    );
+    if (croppedFile != null) {
+      UserController.to.uploadAvatar(croppedFile.path);
+    }
+  }
 }

lib/views/user/info/nickname_page.dart

@@ -1,4 +1,7 @@
+import 'package:chat/configs/app_colors.dart';
+import 'package:chat/controllers/user_controller.dart';
 import 'package:flutter/material.dart';
+import 'package:get/get.dart';
 
 class UserInfoNicknamePage extends StatefulWidget {
   const UserInfoNicknamePage({Key? key}) : super(key: key);
@@ -8,8 +11,84 @@ class UserInfoNicknamePage extends StatefulWidget {
 }
 
 class _UserInfoNicknamePageState extends State<UserInfoNicknamePage> {
+  late TextEditingController _editingController;
+  late String _originNickname;
+  late String _nickname;
+
+  @override
+  void initState() {
+    super.initState();
+    _editingController = TextEditingController(text: Get.arguments['nickname']);
+    _nickname = Get.arguments['nickname'];
+    _originNickname = Get.arguments['nickname'];
+  }
+
+  @override
+  void dispose() {
+    _editingController.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
-    return Container();
+    return GestureDetector(
+      onTap: () {
+        FocusScope.of(context).requestFocus(FocusNode());
+      },
+      child: Scaffold(
+        appBar: AppBar(
+          title: const Text(
+            '修改昵称',
+          ),
+          actions: [
+            TextButton(
+              style: ButtonStyle(
+                foregroundColor: MaterialStateProperty.resolveWith((states) {
+                  if (states.contains(MaterialState.disabled)) {
+                    return AppColors.unactive;
+                  } else {
+                    return AppColors.active;
+                  }
+                }),
+              ),
+              onPressed: _nickname.length < 2 || _originNickname == _nickname
+                  ? null
+                  : () async {
+                      if (await UserController.to
+                          .updateNickname(_editingController.text)) {
+                        Get.back();
+                      }
+                    },
+              child: const Text(
+                '保存',
+              ),
+            ),
+          ],
+        ),
+        body: Container(
+          padding: const EdgeInsets.all(32.0),
+          child: TextField(
+            controller: _editingController,
+            onChanged: (e) {
+              setState(() {
+                _nickname = e;
+              });
+            },
+            decoration: const InputDecoration(
+              labelText: '昵称',
+              hintText: '请输入昵称',
+              labelStyle: TextStyle(
+                color: AppColors.unactive,
+              ),
+              focusedBorder: UnderlineInputBorder(
+                borderSide: BorderSide(
+                  color: AppColors.unactive,
+                ),
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
   }
 }