forum

miniprogram/src/pages/user/index.tsx

@@ -1,10 +1,13 @@
-import { View, Text, Image, Button } from '@tarojs/components'
+import { View, Text, Image, Button, Checkbox, CheckboxGroup, RichText } from '@tarojs/components'
 import Taro, { useDidShow } from '@tarojs/taro'
 import { useState } from 'react'
 import './index.scss'
 
 export default function UserIndex() {
   const [userInfo, setUserInfo] = useState<any>(null)
+  const [showLoginModal, setShowLoginModal] = useState(false)
+  const [isAgreed, setIsAgreed] = useState(false)
+  const [showAgreement, setShowAgreement] = useState(false) // For showing agreement content
 
   useDidShow(() => {
     const info = Taro.getStorageSync('userInfo')
@@ -23,7 +26,7 @@ export default function UserIndex() {
         const token = Taro.getStorageSync('token')
         if (token) {
             await Taro.request({
-                url: 'https://market.quant-speed.com/api/wechat/update_user_info/',
+                url: 'https://market.quant-speed.com/api/wechat/update/',
                 method: 'POST',
                 header: { 
                     'Authorization': `Bearer ${token}`,
@@ -46,6 +49,107 @@ export default function UserIndex() {
     }
   }
 
+  const handleAvatarClick = async () => {
+    if (!userInfo) return
+
+    try {
+        const { tempFilePaths } = await Taro.chooseImage({ count: 1, sizeType: ['compressed'], sourceType: ['album', 'camera'] })
+        if (!tempFilePaths.length) return
+
+        Taro.showLoading({ title: '上传中...' })
+        
+        const token = Taro.getStorageSync('token')
+        const uploadRes = await Taro.uploadFile({
+            url: 'https://market.quant-speed.com/api/upload/image/',
+            filePath: tempFilePaths[0],
+            name: 'file',
+            header: {
+                'Authorization': `Bearer ${token}`
+            }
+        })
+
+        if (uploadRes.statusCode !== 200) {
+            throw new Error('上传失败')
+        }
+
+        const data = JSON.parse(uploadRes.data)
+        const newAvatarUrl = data.url
+
+        // 更新后端用户信息
+        await Taro.request({
+            url: 'https://market.quant-speed.com/api/wechat/update/',
+            method: 'POST',
+            header: { 
+                'Authorization': `Bearer ${token}`,
+                'Content-Type': 'application/json'
+            },
+            data: {
+                avatar_url: newAvatarUrl
+            }
+        })
+
+        // 更新本地 userInfo
+        const updatedInfo = { ...userInfo, avatar_url: newAvatarUrl }
+        setUserInfo(updatedInfo)
+        Taro.setStorageSync('userInfo', updatedInfo)
+        
+        Taro.hideLoading()
+        Taro.showToast({ title: '头像更新成功', icon: 'success' })
+
+    } catch (e) {
+        Taro.hideLoading()
+        Taro.showToast({ title: '头像更新失败', icon: 'none' })
+        console.error(e)
+    }
+  }
+
+  const handleNicknameClick = () => {
+    if (!userInfo) return
+    
+    Taro.showModal({
+      title: '修改昵称',
+      content: userInfo.nickname || '',
+      // @ts-ignore
+      editable: true,
+      placeholderText: '请输入新昵称',
+      success: async function (res) {
+        if (res.confirm && (res as any).content) {
+          const newNickname = (res as any).content
+          if (newNickname === userInfo.nickname) return
+          
+          try {
+            Taro.showLoading({ title: '更新中...' })
+            const token = Taro.getStorageSync('token')
+            
+            await Taro.request({
+                url: 'https://market.quant-speed.com/api/wechat/update/',
+                method: 'POST',
+                header: { 
+                    'Authorization': `Bearer ${token}`,
+                    'Content-Type': 'application/json'
+                },
+                data: {
+                    nickname: newNickname
+                }
+            })
+            
+            // 更新本地 userInfo
+            const updatedInfo = { ...userInfo, nickname: newNickname }
+            setUserInfo(updatedInfo)
+            Taro.setStorageSync('userInfo', updatedInfo)
+            
+            Taro.hideLoading()
+            Taro.showToast({ title: '昵称已更新', icon: 'success' })
+          } catch (e) {
+            Taro.hideLoading()
+            Taro.showToast({ title: '更新失败', icon: 'none' })
+            console.error(e)
+          }
+        }
+      }
+    })
+  }
+
   const handleLogout = () => {
     Taro.showModal({
         title: '提示',
@@ -120,6 +224,7 @@ export default function UserIndex() {
             Taro.setStorageSync('token', res.data.token)
             Taro.setStorageSync('userInfo', res.data)
             setUserInfo(res.data)
+            setShowLoginModal(false) // Close modal on success
             Taro.showToast({ title: '授权登录成功', icon: 'success' })
         } else {
             throw new Error(res.data.error || '登录失败')
@@ -162,32 +267,41 @@ export default function UserIndex() {
     { label: '优惠券', value: '0' }
   ]
 
+  const handleAgreementCheck = (e) => {
+    setIsAgreed(!!e.detail.value.length)
+  }
+
+  const handleShowAgreement = (e) => {
+    e.stopPropagation()
+    setShowAgreement(true)
+  }
+
+  const handleLoginBtnClick = () => {
+    if (!isAgreed) {
+      Taro.showToast({ title: '请先阅读并同意用户协议', icon: 'none' })
+      return
+    }
+    // If agreed, the button openType='getPhoneNumber' handles it.
+  }
+
   return (
     <View className='page-container'>
       {/* Profile Card */}
       <View className='profile-card'>
-        <View className='avatar-container'>
+        <View className='avatar-container' onClick={handleAvatarClick}>
             <Image src={userInfo?.avatar_url || 'https://via.placeholder.com/150/00b96b/FFFFFF?text=USER'} className='avatar' />
             {userInfo && <View className='online-dot' />}
         </View>
         <View className='info-col'>
-            <Text className='nickname'>{userInfo?.nickname || '未登录用户'}</Text>
+            <Text className='nickname' onClick={handleNicknameClick}>{userInfo?.nickname || '未登录用户'}</Text>
             <Text className='uid'>ID: {userInfo ? (userInfo.phone_number || userInfo.id || '----') : '----'}</Text>
             {!userInfo && (
                 <View className='login-btns'>
-                    {/* <Button 
-                        className='btn-login' 
-                        onClick={login}
-                        style={{ marginRight: '10px' }}
-                    >
-                        游客登录
-                    </Button> */}
                     <Button 
                         className='btn-login primary' 
-                        openType="getPhoneNumber" 
-                        onGetPhoneNumber={getPhoneNumber}
+                        onClick={() => setShowLoginModal(true)}
                     >
-                        手机号快捷登录
+                        立即登录
                     </Button>
                 </View>
             )}
@@ -229,6 +343,56 @@ export default function UserIndex() {
         <Text>Quant Speed Market v1.0.0</Text>
         <Text>Powered by Taro & React</Text>
       </View>
+
+      {/* Login Modal */}
+      {showLoginModal && (
+        <View className='login-modal-mask' onClick={() => setShowLoginModal(false)}>
+            <View className='login-modal-content' onClick={e => e.stopPropagation()}>
+                <View className='modal-header'>
+                    <Text className='modal-title'>欢迎登录 Quant Speed</Text>
+                    <Text className='modal-subtitle'>登录后享受更多权益</Text>
+                </View>
+                
+                <View className='modal-body'>
+                    <Button 
+                        className={`btn-modal-login ${isAgreed ? 'primary' : 'disabled'}`}
+                        openType={isAgreed ? 'getPhoneNumber' : undefined}
+                        onGetPhoneNumber={getPhoneNumber}
+                        onClick={handleLoginBtnClick}
+                    >
+                        微信一键登录
+                    </Button>
+
+                    <View className='agreement-box'>
+                        <CheckboxGroup onChange={handleAgreementCheck}>
+                            <Checkbox value='agree' checked={isAgreed} color='#00b96b' className='agreement-checkbox' />
+                        </CheckboxGroup>
+                        <Text className='agreement-text'>
+                            我已阅读并同意 <Text className='link' onClick={handleShowAgreement}>《用户协议》</Text> 与 <Text className='link' onClick={handleShowAgreement}>《隐私政策》</Text>
+                        </Text>
+                    </View>
+                </View>
+            </View>
+        </View>
+      )}
+
+      {/* Agreement Detail Modal */}
+      {showAgreement && (
+          <View className='agreement-modal-mask'>
+              <View className='agreement-content'>
+                  <Text className='agreement-title'>用户协议与隐私政策</Text>
+                  <View className='agreement-scroll'>
+                    <View className='p'><Text>1. 特别提示</Text></View>
+                    <View className='p'><Text>在此特别提醒您（用户）在注册成为用户之前，请认真阅读本《用户协议》（以下简称“协议”），确保您充分理解本协议中各条款。请您审慎阅读并选择接受或不接受本协议。除非您接受本协议所有条款，否则您无权注册、登录或使用本协议所涉服务。您的注册、登录、使用等行为将视为对本协议的接受，并同意接受本协议各项条款的约束。</Text></View>
+                    <View className='p'><Text>2. 账号注册</Text></View>
+                    <View className='p'><Text>2.1 鉴于“Quant Speed”账号的绑定注册方式，您同意在注册时将您的手机号码及微信账号信息提供给“Quant Speed”用于注册。</Text></View>
+                    <View className='p'><Text>3. 隐私保护</Text></View>
+                    <View className='p'><Text>3.1 本小程序将严格保护您的个人信息安全。我们使用各种安全技术和程序来保护您的个人信息不被未经授权的访问、使用或泄漏。</Text></View>
+                  </View>
+                  <Button className='btn-close' onClick={() => setShowAgreement(false)}>我知道了</Button>
+              </View>
+          </View>
+      )}
     </View>
   )
 }