|
|
|
|
@ -1,25 +1,94 @@
@@ -1,25 +1,94 @@
|
|
|
|
|
/** |
|
|
|
|
* 首页 |
|
|
|
|
*/ |
|
|
|
|
import { View, Image } from '@tarojs/components' |
|
|
|
|
import { View, Image, Text, Button as WxButton, Input } from '@tarojs/components' |
|
|
|
|
import { useLoad } from '@tarojs/taro' |
|
|
|
|
import Taro from '@tarojs/taro' |
|
|
|
|
import { observer } from 'mobx-react' |
|
|
|
|
import { Swiper } from '@taroify/core' |
|
|
|
|
import { Swiper, Image as TaroifyImage } from '@taroify/core' |
|
|
|
|
import { LocationOutlined } from '@taroify/icons' |
|
|
|
|
import { useEffect, useState } from 'react' |
|
|
|
|
import { userStore } from '../../store' |
|
|
|
|
import { getBigImage, BIG_IMAGES } from '@/utils/imageHelper' |
|
|
|
|
import { updateCustomer, readImageAsBase64 } from '@/api/customer' |
|
|
|
|
import { getBigImage } from '@/utils/imageHelper' |
|
|
|
|
import myAvatar from '@/assets/icon/my_avatar.png' |
|
|
|
|
import './index.scss' |
|
|
|
|
|
|
|
|
|
const Index = observer(() => { |
|
|
|
|
const [currentDistance, setCurrentDistance] = useState('--') |
|
|
|
|
const [storeName, setStoreName] = useState('黑八大师联盟球厅店') |
|
|
|
|
const [storeName] = useState('黑八大师联盟球厅店') |
|
|
|
|
|
|
|
|
|
// 新用户头像/昵称弹窗状态
|
|
|
|
|
const [showNewUserPopup, setShowNewUserPopup] = useState(false) |
|
|
|
|
const [newNickname, setNewNickname] = useState('') |
|
|
|
|
const [newAvatarPath, setNewAvatarPath] = useState('') |
|
|
|
|
const [newAvatarUrl, setNewAvatarUrl] = useState('') |
|
|
|
|
const [saving, setSaving] = useState(false) |
|
|
|
|
|
|
|
|
|
useLoad(() => { |
|
|
|
|
console.log('首页加载') |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
// 监听新用户标记，延迟弹出避免与登录动画冲突
|
|
|
|
|
useEffect(() => { |
|
|
|
|
if (userStore.isNewUser) { |
|
|
|
|
setTimeout(() => setShowNewUserPopup(true), 800) |
|
|
|
|
} |
|
|
|
|
}, [userStore.isNewUser]) |
|
|
|
|
|
|
|
|
|
// 选择微信头像回调
|
|
|
|
|
const handleChooseAvatar = (e: any) => { |
|
|
|
|
const url = e.detail.avatarUrl |
|
|
|
|
setNewAvatarUrl(url) |
|
|
|
|
setNewAvatarPath(url) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 保存头像和昵称到后台
|
|
|
|
|
const handleSaveProfile = async () => { |
|
|
|
|
const userId = userStore.userInfo?.id |
|
|
|
|
if (!userId || saving) return |
|
|
|
|
|
|
|
|
|
setSaving(true) |
|
|
|
|
try { |
|
|
|
|
let avatarImage: string | undefined |
|
|
|
|
if (newAvatarPath) { |
|
|
|
|
try { |
|
|
|
|
avatarImage = await readImageAsBase64(newAvatarPath) |
|
|
|
|
} catch (e) { |
|
|
|
|
console.warn('头像转 Base64 失败，跳过头像更新:', e) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
await updateCustomer(userId, { |
|
|
|
|
id: userId, |
|
|
|
|
name: newNickname.trim() || undefined, |
|
|
|
|
avatarImage, |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
// 同步更新本地 store
|
|
|
|
|
userStore.setUserInfo({ |
|
|
|
|
...userStore.userInfo!, |
|
|
|
|
name: newNickname.trim() || userStore.userInfo?.name, |
|
|
|
|
nickname: newNickname.trim() || userStore.userInfo?.nickname, |
|
|
|
|
avatar: newAvatarPath || userStore.userInfo?.avatar, |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
userStore.setIsNewUser(false) |
|
|
|
|
setShowNewUserPopup(false) |
|
|
|
|
Taro.showToast({ title: '欢迎加入！', icon: 'success' }) |
|
|
|
|
} catch (e) { |
|
|
|
|
console.warn('保存用户信息失败:', e) |
|
|
|
|
} finally { |
|
|
|
|
setSaving(false) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 跳过，不填写
|
|
|
|
|
const handleSkip = () => { |
|
|
|
|
userStore.setIsNewUser(false) |
|
|
|
|
setShowNewUserPopup(false) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 请求定位权限并获取位置
|
|
|
|
|
const requestLocationPermission = async () => { |
|
|
|
|
try { |
|
|
|
|
@ -91,6 +160,58 @@ const Index = observer(() => {
@@ -91,6 +160,58 @@ const Index = observer(() => {
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<View className="index-page"> |
|
|
|
|
{/* 新用户头像/昵称补全弹窗 */} |
|
|
|
|
{showNewUserPopup && ( |
|
|
|
|
<View className="new-user-mask"> |
|
|
|
|
<View className="new-user-popup"> |
|
|
|
|
<Text className="new-user-title">完善个人信息</Text> |
|
|
|
|
<Text className="new-user-desc">设置头像和昵称，让台球馆认识你</Text> |
|
|
|
|
|
|
|
|
|
{/* 微信头像选择按钮 */} |
|
|
|
|
<View className="new-user-avatar-wrap"> |
|
|
|
|
<TaroifyImage |
|
|
|
|
className="new-user-avatar" |
|
|
|
|
src={newAvatarUrl || myAvatar} |
|
|
|
|
round |
|
|
|
|
mode="aspectFill" |
|
|
|
|
/> |
|
|
|
|
<WxButton |
|
|
|
|
className="new-user-avatar-btn" |
|
|
|
|
openType="chooseAvatar" |
|
|
|
|
onChooseAvatar={handleChooseAvatar} |
|
|
|
|
> |
|
|
|
|
{newAvatarUrl ? '更换头像' : '选择头像'} |
|
|
|
|
</WxButton> |
|
|
|
|
</View> |
|
|
|
|
|
|
|
|
|
{/* 微信昵称输入（type="nickname" 会自动弹出微信昵称建议） */} |
|
|
|
|
<View className="new-user-input-wrap"> |
|
|
|
|
<Input |
|
|
|
|
className="new-user-input" |
|
|
|
|
type="nickname" |
|
|
|
|
value={newNickname} |
|
|
|
|
onInput={(e) => setNewNickname(e.detail.value)} |
|
|
|
|
placeholder="点击填写昵称（可使用微信昵称）" |
|
|
|
|
placeholderClass="new-user-placeholder" |
|
|
|
|
maxlength={20} |
|
|
|
|
/> |
|
|
|
|
</View> |
|
|
|
|
|
|
|
|
|
<View className="new-user-actions"> |
|
|
|
|
<WxButton |
|
|
|
|
className={`new-user-save ${saving ? 'disabled' : ''}`} |
|
|
|
|
loading={saving} |
|
|
|
|
onClick={handleSaveProfile} |
|
|
|
|
> |
|
|
|
|
{saving ? '保存中...' : '完成'} |
|
|
|
|
</WxButton> |
|
|
|
|
<View className="new-user-skip" onClick={handleSkip}> |
|
|
|
|
跳过，暂不设置 |
|
|
|
|
</View> |
|
|
|
|
</View> |
|
|
|
|
</View> |
|
|
|
|
</View> |
|
|
|
|
)} |
|
|
|
|
{/* 轮播图区域 */} |
|
|
|
|
<View className="swiper-container"> |
|
|
|
|
<Swiper |
|
|
|
|
|
