From 5c78139d5a471467d0e26aafa11d79ca6c130de2 Mon Sep 17 00:00:00 2001
From: Dawn1Ocean <1785590531@qq.com>
Date: Tue, 19 Mar 2024 23:39:01 +0800
Subject: [PATCH] add /member/login service; beautify member page with
 name&avatar

---
 mock/api.ts                          |  5 ++++-
 src/pages/member/MemberTitleCard.tsx | 12 ++++++------
 src/plain-text/Button.ts             |  3 +++
 src/plain-text/MemberPage.ts         |  4 ++--
 src/service/memberLogin.ts           | 26 +++++++++++++++++---------
 src/wechat/index.ts                  | 20 ++++++++++++++------
 6 files changed, 46 insertions(+), 24 deletions(-)

diff --git a/mock/api.ts b/mock/api.ts
index 7a7bf9a..061f310 100644
--- a/mock/api.ts
+++ b/mock/api.ts
@@ -65,7 +65,10 @@ export default {
   'POST /member/login': {
     success: true,
     data: {
-      isMember: true,
+      avatar:
+        'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
+      name: '宇航员',
+      phone: '13311451419',
     },
   },
   'GET /tickets/uncompleted': {
diff --git a/src/pages/member/MemberTitleCard.tsx b/src/pages/member/MemberTitleCard.tsx
index cdb7cf0..78d96e6 100644
--- a/src/pages/member/MemberTitleCard.tsx
+++ b/src/pages/member/MemberTitleCard.tsx
@@ -1,23 +1,23 @@
 import React from 'react';
 import { View, Image } from '@tarojs/components';
 import pt from '@/plain-text';
-import logo from '@/assets/images/UserPage/logo.png';
+import wechatUser from '@/wechat';
 
 export default class MemberTitleCard extends React.Component {
   render(): React.ReactNode {
     const memberPage = pt.get().memberPage;
     return (
-      <View className='at-row at-row__align--center'>
+      <View className='at-row at-row__align--end'>
         <View className='at-col at-col-1 at-col--auto'>
           <Image
-            style='width: 100rpx; height: 100rpx; margin-left: 30rpx;'
-            src={logo}
+            style='width: 150rpx; height: 150rpx; margin-left: 60rpx;'
+            src={wechatUser.getInfo().avatar}
             mode='aspectFit'
           />
         </View>
-        <View className='page-title'>
+        <View className='page-title' style={{ marginLeft: '30rpx' }}>
           <View className='at-article__h1' style={{ fontWeight: 'bold' }}>
-            {memberPage.mainTitleLine}
+            {memberPage.mainTitleLine + wechatUser.getInfo().name}
           </View>
           <View className='at-article__h2'>{memberPage.subTitleLine}</View>
         </View>
diff --git a/src/plain-text/Button.ts b/src/plain-text/Button.ts
index 416e848..badc0d3 100644
--- a/src/plain-text/Button.ts
+++ b/src/plain-text/Button.ts
@@ -13,6 +13,7 @@ export interface ButtonText {
   loginText: {
     success: string;
     error: string;
+    fail: string;
   };
   logoutText: {
     success: string;
@@ -35,6 +36,7 @@ export const buttonZhCn: ButtonText = {
   loginText: {
     success: '登录成功',
     error: '登录失败',
+    fail: '请检查用户名或密码！',
   },
   logoutText: {
     success: '登出成功',
@@ -57,6 +59,7 @@ export const buttonEnUs: ButtonText = {
   loginText: {
     success: 'Login Success',
     error: 'Login Failed',
+    fail: 'Please check username or password!',
   },
   logoutText: {
     success: 'Logout Success',
diff --git a/src/plain-text/MemberPage.ts b/src/plain-text/MemberPage.ts
index 1b27176..0e63d53 100644
--- a/src/plain-text/MemberPage.ts
+++ b/src/plain-text/MemberPage.ts
@@ -38,7 +38,7 @@ export interface MemberPageText {
 }
 
 export const memberPageZhCn: MemberPageText = {
-  mainTitleLine: '您好，这里是E志者协会',
+  mainTitleLine: '您好，',
   subTitleLine: '祝你满绩每一天',
   dutyCount: {
     button: '更新值班人数',
@@ -100,7 +100,7 @@ export const memberPageZhCn: MemberPageText = {
 };
 
 export const memberPageEnUs: MemberPageText = {
-  mainTitleLine: 'Hi! This is EVA.',
+  mainTitleLine: 'Hi! ',
   subTitleLine: 'Have a great day!',
   dutyCount: {
     button: 'Update Duty Count',
diff --git a/src/service/memberLogin.ts b/src/service/memberLogin.ts
index 6511bda..eaa22a7 100644
--- a/src/service/memberLogin.ts
+++ b/src/service/memberLogin.ts
@@ -1,7 +1,7 @@
 import UserMemberPage from '@/pages/user/member/member';
 import Taro from '@tarojs/taro';
 import pt from '@/plain-text';
-import wechatUser from '@/wechat';
+import wechatUser, { UserInfo } from '@/wechat';
 import { getUrl } from '.';
 
 export function memberLogin(that: UserMemberPage) {
@@ -22,14 +22,22 @@ export function memberLogin(that: UserMemberPage) {
       that.setState({
         isLoading: false,
       });
-      Taro.atMessage({
-        message: pt.get().button.loginText.success,
-        type: 'success',
-      });
-      wechatUser.setAccess(true);
-      Taro.reLaunch({
-        url: '/pages/member/member',
-      });
+      if (res.data.success) {
+        Taro.atMessage({
+          message: pt.get().button.loginText.success,
+          type: 'success',
+        });
+        wechatUser.setInfo(res.data.data as UserInfo);
+        wechatUser.setAccess(true);
+        Taro.reLaunch({
+          url: '/pages/member/member',
+        });
+      } else {
+        Taro.atMessage({
+          message: pt.get().button.loginText.fail,
+          type: 'error',
+        });
+      }
     })
     .catch((err) => {
       console.log(err);
diff --git a/src/wechat/index.ts b/src/wechat/index.ts
index f3e566b..36bc8bd 100644
--- a/src/wechat/index.ts
+++ b/src/wechat/index.ts
@@ -1,11 +1,20 @@
+export interface UserInfo {
+  name: string;
+  phone: string;
+  avatar: string;
+}
+
 class WechatUser {
-  private userInfo: any;
+  private userInfo: UserInfo;
   private isMember: boolean;
-  hasUserInfo: boolean;
 
   constructor() {
-    this.userInfo = '';
-    this.hasUserInfo = false;
+    this.userInfo = {
+      name: '亦可',
+      phone: '12345678901',
+      avatar:
+        'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
+    };
     this.isMember = false;
   }
 
@@ -17,9 +26,8 @@ class WechatUser {
     return this.userInfo;
   }
 
-  setInfo(userInfo: any) {
+  setInfo(userInfo: UserInfo) {
     this.userInfo = userInfo;
-    this.hasUserInfo = true;
   }
 
   setAccess(isMember: boolean) {