548 lines
12 KiB
Vue
548 lines
12 KiB
Vue
<template>
|
|
<view class="profile-container">
|
|
<!-- 用户信息区域 -->
|
|
<view class="header-section">
|
|
<view class="user-profile" @click="handleUserProfileClick">
|
|
<view class="avatar-container">
|
|
<image class="avatar" v-if="userInfo.avatar" :src="userInfo.avatar" mode="aspectFill">
|
|
</image>
|
|
<image v-else class="avatar" src="@/static/user-active.png" mode="aspectFill"></image>
|
|
<view class="avatar-badge" v-if="userInfo.isAdmin"></view>
|
|
</view>
|
|
|
|
<view class="user-details" v-if="userInfo">
|
|
<view class="username">{{ userInfo.nickName }}</view>
|
|
<view class="user-id">{{ userInfo.phone ? maskPhone(userInfo.phone) : '未绑定手机号' }}</view>
|
|
</view>
|
|
|
|
<view class="user-details" v-else>
|
|
<view class="username">点击登录</view>
|
|
<view class="user-id">授权登录后享受更多服务</view>
|
|
</view>
|
|
|
|
<view class="edit-profile">
|
|
<uni-icons type="right" size="16" color="#999"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 余额卡片 -->
|
|
<view class="balance-card">
|
|
<view class="balance-info">
|
|
<view class="balance-label">押金余额</view>
|
|
<view class="balance-amount">¥{{ deposit }}</view>
|
|
</view>
|
|
<view class="action-button" @click="handleWithdraw">
|
|
<text>提现</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 功能区域列表 -->
|
|
<view class="function-list">
|
|
<!-- 订单中心 -->
|
|
<view class="function-item" @click="navigateTo('/pages/order/index')">
|
|
<view class="item-left">
|
|
<view class="item-icon">
|
|
<image src="/static/jl.png" mode="aspectFit"></image>
|
|
</view>
|
|
<text class="item-title">订单中心</text>
|
|
</view>
|
|
<view class="item-right">
|
|
<uni-icons type="right" size="16" color="#999"></uni-icons>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 投诉建议 -->
|
|
<view class="function-item" @click="navigateTo('/pages/feedback/index')">
|
|
<view class="item-left">
|
|
<view class="item-icon">
|
|
<image src="/static/complaint.png" mode="aspectFit"></image>
|
|
</view>
|
|
<text class="item-title">投诉建议</text>
|
|
</view>
|
|
<view class="item-right">
|
|
<uni-icons type="right" size="16" color="#999"></uni-icons>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 帮助中心 -->
|
|
<view class="function-item" @click="navigateTo('/pages/help/index')">
|
|
<view class="item-left">
|
|
<view class="item-icon">
|
|
<image src="/static/hlep.png" mode="aspectFit"></image>
|
|
</view>
|
|
<text class="item-title">帮助中心</text>
|
|
</view>
|
|
<view class="item-right">
|
|
<uni-icons type="right" size="16" color="#999"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!--
|
|
<view class="section-title">设置</view>
|
|
|
|
<view class="settings-list">
|
|
<view
|
|
v-for="(item, index) in settingItems"
|
|
:key="index"
|
|
class="settings-item"
|
|
@click="item.action">
|
|
<view class="settings-item-left">
|
|
<uni-icons :type="item.icon" size="20" color="#4facfe"></uni-icons>
|
|
<text>{{ item.name }}</text>
|
|
</view>
|
|
<uni-icons type="right" size="16" color="#999"></uni-icons>
|
|
</view>
|
|
</view> -->
|
|
|
|
<!-- <u-popup ref="authPopup" mode="center" border-radius="15" width="600rpx" @open="onPopupOpen" @close="onPopupClose">
|
|
<view class="auth-popup">
|
|
<view class="auth-title">授权登录</view>
|
|
<view class="auth-desc">获取您的微信头像、昵称等公开信息</view>
|
|
<view class="auth-buttons">
|
|
<button class="cancel-btn" @click="closeAuthPopup">取消</button>
|
|
<button class="confirm-btn" @click="getUserProfile">确定</button>
|
|
</view>
|
|
</view>
|
|
</u-popup> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
reactive,
|
|
onMounted
|
|
} from 'vue';
|
|
|
|
import {
|
|
wxLogin,
|
|
getUserInfo
|
|
} from '../../util/index.js';
|
|
|
|
// 响应式状态
|
|
const userInfo = ref({});
|
|
const deposit = ref('0.00');
|
|
const openId = ref('');
|
|
const authPopup = ref(null); // u-popup 的引用
|
|
const isPopupVisible = ref(false);
|
|
|
|
// 页面加载时初始化
|
|
onMounted(() => {
|
|
getInfo();
|
|
});
|
|
|
|
// 获取用户信息
|
|
const getInfo = async () => {
|
|
try {
|
|
const token = uni.getStorageSync('token');
|
|
if (!token) {
|
|
await wxLogin();
|
|
return;
|
|
}
|
|
|
|
const res = await getUserInfo();
|
|
console.log('User info response:', res);
|
|
|
|
if (res.code == 200) {
|
|
// 保存openId
|
|
if (res.data.openId) {
|
|
openId.value = res.data.openId;
|
|
uni.setStorageSync('openId', res.data.openId);
|
|
}
|
|
|
|
// 更新用户信息
|
|
userInfo.value = {
|
|
nickName: res.data.nickname,
|
|
phone: res.data.phone,
|
|
avatar: res.data.iconUrl,
|
|
isAdmin: res.data.isAdmin
|
|
};
|
|
|
|
uni.setStorageSync('userInfo', userInfo.value);
|
|
deposit.value = res.data.balanceAmount || '0.00';
|
|
}
|
|
} catch (error) {
|
|
console.error('获取用户信息失败:', error);
|
|
uni.showToast({
|
|
title: '获取用户信息失败',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
};
|
|
|
|
// 导航到指定页面
|
|
const navigateTo = (url) => {
|
|
uni.navigateTo({
|
|
url
|
|
});
|
|
};
|
|
|
|
// 处理提现按钮点击
|
|
const handleWithdraw = () => {
|
|
navigateTo('/pages/deposit/index');
|
|
};
|
|
|
|
// 处理用户资料点击
|
|
const handleUserProfileClick = () => {
|
|
if (!userInfo.value) {
|
|
// 打开授权弹窗
|
|
openAuthPopup();
|
|
} else {
|
|
// 已登录用户点击个人资料，可以导航到编辑页面
|
|
// navigateTo('/pages/profile/edit');
|
|
}
|
|
};
|
|
|
|
// 打开授权弹窗
|
|
const openAuthPopup = () => {
|
|
if (authPopup.value) {
|
|
authPopup.value.open();
|
|
isPopupVisible.value = true;
|
|
}
|
|
};
|
|
|
|
// 弹窗打开事件处理
|
|
const onPopupOpen = () => {
|
|
console.log('授权弹窗已打开');
|
|
isPopupVisible.value = true;
|
|
// 这里可以添加弹窗打开后的逻辑
|
|
};
|
|
|
|
// 弹窗关闭事件处理
|
|
const onPopupClose = () => {
|
|
console.log('授权弹窗已关闭');
|
|
isPopupVisible.value = false;
|
|
// 这里可以添加弹窗关闭后的逻辑
|
|
};
|
|
|
|
// 获取微信用户个人信息
|
|
const getUserProfile = () => {
|
|
// #ifdef MP-WEIXIN
|
|
uni.showLoading({
|
|
title: '获取中...',
|
|
mask: true
|
|
});
|
|
|
|
wx.getUserProfile({
|
|
desc: '用于完善会员资料',
|
|
success: (res) => {
|
|
console.log('获取用户信息成功:', res);
|
|
updateUserInfo(res.userInfo);
|
|
},
|
|
fail: (err) => {
|
|
console.error('获取用户信息失败:', err);
|
|
uni.showToast({
|
|
title: '获取用户信息失败',
|
|
icon: 'none'
|
|
});
|
|
},
|
|
complete: () => {
|
|
uni.hideLoading();
|
|
closeAuthPopup();
|
|
}
|
|
});
|
|
// #endif
|
|
|
|
// #ifndef MP-WEIXIN
|
|
uni.showToast({
|
|
title: '请在微信小程序中使用此功能',
|
|
icon: 'none'
|
|
});
|
|
closeAuthPopup();
|
|
// #endif
|
|
};
|
|
|
|
// 更新用户信息
|
|
const updateUserInfo = async (wxUserInfo) => {
|
|
try {
|
|
// 更新本地用户信息
|
|
const updatedInfo = {
|
|
...userInfo.value,
|
|
nickName: wxUserInfo.nickName,
|
|
avatar: wxUserInfo.avatarUrl
|
|
};
|
|
|
|
userInfo.value = updatedInfo;
|
|
uni.setStorageSync('userInfo', updatedInfo);
|
|
|
|
// 这里可以添加调用后端API更新用户信息的代码
|
|
// const updateRes = await updateUserInfoApi({
|
|
// openId: openId.value,
|
|
// nickName: wxUserInfo.nickName,
|
|
// avatarUrl: wxUserInfo.avatarUrl,
|
|
// gender: wxUserInfo.gender
|
|
// });
|
|
|
|
uni.showToast({
|
|
title: '信息更新成功',
|
|
icon: 'success'
|
|
});
|
|
|
|
// 更新完成后重新获取用户信息
|
|
getInfo();
|
|
} catch (error) {
|
|
console.error('更新用户信息失败:', error);
|
|
uni.showToast({
|
|
title: '更新用户信息失败',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
};
|
|
|
|
// 关闭授权弹窗
|
|
const closeAuthPopup = () => {
|
|
if (authPopup.value) {
|
|
authPopup.value.close();
|
|
isPopupVisible.value = false;
|
|
}
|
|
};
|
|
|
|
// 关于我们
|
|
const handleAboutUs = () => {
|
|
uni.showToast({
|
|
title: '功能开发中',
|
|
icon: 'none'
|
|
});
|
|
};
|
|
|
|
// 隐私政策
|
|
const handlePrivacyPolicy = () => {
|
|
uni.showToast({
|
|
title: '功能开发中',
|
|
icon: 'none'
|
|
});
|
|
};
|
|
|
|
// 手机号掩码函数
|
|
function maskPhone(phone) {
|
|
if (!phone) return '';
|
|
// 只处理11位手机号
|
|
return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.profile-container {
|
|
min-height: 100vh;
|
|
background-color: #f5f7fa;
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
/* Header Section */
|
|
.header-section {
|
|
padding: 40rpx;
|
|
background: linear-gradient(135deg, #4facfe, #00f2fe);
|
|
position: relative;
|
|
border-radius: 0 0 30rpx 30rpx;
|
|
margin-bottom: 20rpx;
|
|
box-shadow: 0 10rpx 30rpx rgba(79, 172, 254, 0.2);
|
|
}
|
|
|
|
.user-profile {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 20rpx 0;
|
|
}
|
|
|
|
.avatar-container {
|
|
position: relative;
|
|
margin-right: 30rpx;
|
|
}
|
|
|
|
.avatar {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 60rpx;
|
|
border: 4rpx solid rgba(255, 255, 255, 0.6);
|
|
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.avatar-badge {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
border-radius: 18rpx;
|
|
background-color: #ff9500;
|
|
border: 4rpx solid white;
|
|
}
|
|
|
|
.user-details {
|
|
flex: 1;
|
|
}
|
|
|
|
.username {
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
color: white;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.user-id {
|
|
font-size: 26rpx;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.edit-profile {
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
padding: 10rpx;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* Balance Card */
|
|
.balance-card {
|
|
margin: 30rpx;
|
|
background: white;
|
|
border-radius: 20rpx;
|
|
padding: 30rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.balance-label {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.balance-amount {
|
|
font-size: 48rpx;
|
|
font-weight: 600;
|
|
color: #4facfe;
|
|
}
|
|
|
|
.action-button {
|
|
background: linear-gradient(135deg, #4facfe, #00f2fe);
|
|
border-radius: 40rpx;
|
|
height: 80rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 40rpx;
|
|
color: white;
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
box-shadow: 0 8rpx 16rpx rgba(79, 172, 254, 0.2);
|
|
|
|
&:active {
|
|
opacity: 0.9;
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
text {
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
|
|
/* Function List */
|
|
.function-list {
|
|
margin: 30rpx;
|
|
background: white;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.function-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 32rpx 30rpx;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
&:active {
|
|
background-color: #f9f9f9;
|
|
}
|
|
}
|
|
|
|
.item-left {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.item-icon {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
margin-right: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
|
|
.item-title {
|
|
font-size: 30rpx;
|
|
color: #333;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.item-right {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Auth Popup */
|
|
.auth-popup {
|
|
background-color: white;
|
|
width: 100%;
|
|
padding: 40rpx;
|
|
border-radius: 15rpx;
|
|
}
|
|
|
|
.auth-title {
|
|
font-size: 34rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
text-align: center;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.auth-desc {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
text-align: center;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.auth-buttons {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.cancel-btn,
|
|
.confirm-btn {
|
|
width: 240rpx;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
text-align: center;
|
|
border-radius: 40rpx;
|
|
font-size: 28rpx;
|
|
|
|
&::after {
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.cancel-btn {
|
|
background-color: #f0f0f0;
|
|
color: #666;
|
|
}
|
|
|
|
.confirm-btn {
|
|
background: linear-gradient(135deg, #4facfe, #00f2fe);
|
|
color: white;
|
|
}
|
|
</style> |