123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382 |
- <template>
- <view class="my-container">
- <view class="user-info" v-if="isLogin">
- <image class="avatar" :src="userInfo.avatar || '/static/avatar.png'"></image>
- <view class="user-details">
- <text class="username">{{ userInfo.username }}</text>
- <text class="user-id">ID: {{ userInfo.userId }}</text>
- </view>
- </view>
-
- <view class="user-info" v-else @click="goLogin">
- <image class="avatar" src="/static/avatar.png"></image>
- <view class="user-details">
- <text class="username">点击登录</text>
- <text class="user-id">登录后查看更多信息</text>
- </view>
- </view>
-
- <view class="menu-list">
- <view class="menu-item" v-for="(item, index) in menuItems" :key="index" @click="handleMenuClick(item)">
- <view class="menu-item-left">
- <text class="iconfont" :class="item.icon"></text>
- <text class="menu-text">{{ item.title }}</text>
- </view>
- <text class="iconfont icon-right"></text>
- </view>
- </view>
-
- <view class="logout-btn" @click="handleLogout" v-if="isLogin">
- <text>退出登录</text>
- </view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- isLogin: false,
- userInfo: {
- username: '',
- userId: '',
- avatar: ''
- },
- menuItems: [
- { title: '个人资料', icon: 'icon-user', action: 'profile' },
- // { title: '我的订单', icon: 'icon-order', action: 'orders' },
- // { title: '我的收藏', icon: 'icon-star', action: 'favorites' },
- { title: '设置', icon: 'icon-settings', action: 'settings' },
- { title: '帮助中心', icon: 'icon-help', action: 'help' }
- ]
- }
- },
- onShow() {
- // 每次显示页面时检查登录状态
- this.checkLoginStatus();
- },
- methods: {
- // 检查登录状态
- checkLoginStatus() {
- try {
- const token = uni.getStorageSync('token');
- const userInfo = uni.getStorageSync('userInfo');
-
- if (token && userInfo) {
- this.isLogin = true;
- this.userInfo = JSON.parse(userInfo);
- } else {
- this.isLogin = false;
- this.userInfo = {
- username: '',
- userId: '',
- avatar: ''
- };
- }
- } catch (e) {
- console.error('获取登录状态失败', e);
- this.isLogin = false;
- }
- },
-
- // 前往登录页
- goLogin() {
- // 显示登录方式选择
- uni.showActionSheet({
- itemList: ['账号密码登录', '微信登录'],
- success: (res) => {
- if (res.tapIndex === 0) {
- // 账号密码登录
- uni.navigateTo({
- url: '/pages/login/login'
- });
- } else if (res.tapIndex === 1) {
- // 微信登录
- this.wxLogin();
- }
- }
- });
- },
-
- // 微信登录
- wxLogin() {
- // 判断是否在微信环境中
- // #ifdef MP-WEIXIN
- uni.showLoading({
- title: '登录中...'
- });
-
- // 直接使用 uni.login 获取 code
- uni.login({
- provider: 'weixin',
- success: (loginRes) => {
- // 获取登录凭证成功后,直接请求后端
- this.wxLoginRequest(loginRes.code);
-
- // 如果需要用户头像和昵称,可以使用新的接口
- this.getUserProfileNew();
- },
- fail: (err) => {
- uni.hideLoading();
- uni.showToast({
- title: '微信登录失败',
- icon: 'none'
- });
- console.error('微信登录失败', err);
- }
- });
- // #endif
-
- // 非微信环境提示
- // #ifndef MP-WEIXIN
- uni.showToast({
- title: '请在微信环境中使用微信登录',
- icon: 'none'
- });
- // #endif
- },
-
- // 使用新的方式获取用户头像和昵称
- getUserProfileNew() {
- // 获取头像
- wx.getUserInfo({
- desc: '用于完善用户资料',
- success: (res) => {
- console.log('获取用户信息成功', res);
- // 可以在这里更新用户头像
- },
- fail: (err) => {
- console.error('获取用户信息失败', err);
- }
- });
-
- // 如果需要获取头像,可以使用 button 组件的开放能力
- // 在模板中添加:
- // <button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">获取头像</button>
- },
-
- // 头像选择回调
- onChooseAvatar(e) {
- const { avatarUrl } = e.detail;
- // 这里可以将头像上传到服务器或进行其他处理
- console.log('用户选择的头像:', avatarUrl);
- },
-
- // 发送微信登录请求到服务器
- wxLoginRequest(code, userInfo = {}) {
- // 这里替换为您的实际接口地址
- uni.request({
- url: 'https://your-api-domain.com/api/wx/login',
- method: 'POST',
- data: {
- code: code,
- // 不再依赖 getUserProfile 获取的信息
- // 如果有用户选择的头像,可以在这里传递
- },
- success: (res) => {
- uni.hideLoading();
- if (res.data.code === 0) {
- // 登录成功,保存用户信息和token
- const userData = {
- username: res.data.data.username || '微信用户',
- userId: res.data.data.userId,
- avatar: res.data.data.avatar || '/static/avatar.png'
- };
-
- try {
- uni.setStorageSync('token', res.data.data.token);
- uni.setStorageSync('userInfo', JSON.stringify(userData));
-
- // 更新状态
- this.isLogin = true;
- this.userInfo = userData;
-
- uni.showToast({
- title: '登录成功',
- icon: 'success'
- });
- } catch (e) {
- console.error('保存登录信息失败', e);
- }
- } else {
- uni.showToast({
- title: res.data.msg || '登录失败',
- icon: 'none'
- });
- }
- },
- fail: (err) => {
- uni.hideLoading();
- uni.showToast({
- title: '网络请求失败',
- icon: 'none'
- });
- console.error('微信登录请求失败', err);
- }
- });
- },
-
- handleMenuClick(item) {
- // 检查是否需要登录
- const needLogin = ['profile', 'orders', 'favorites'];
-
- if (needLogin.includes(item.action) && !this.isLogin) {
- uni.showToast({
- title: '请先登录',
- icon: 'none'
- });
- setTimeout(() => {
- this.goLogin();
- }, 1500);
- return;
- }
-
- // 根据action跳转到对应页面
- switch(item.action) {
- case 'profile':
- uni.navigateTo({ url: '/pages/profile/profile' });
- break;
- case 'orders':
- uni.navigateTo({ url: '/pages/orders/orders' });
- break;
- case 'favorites':
- uni.navigateTo({ url: '/pages/favorites/favorites' });
- break;
- case 'settings':
- uni.navigateTo({ url: '/pages/settings/settings' });
- break;
- case 'help':
- uni.navigateTo({ url: '/pages/help/help' });
- break;
- default:
- uni.showToast({
- title: `点击了${item.title}`,
- icon: 'none'
- });
- }
- },
-
- handleLogout() {
- uni.showModal({
- title: '提示',
- content: '确定要退出登录吗?',
- success: (res) => {
- if (res.confirm) {
- // 清除登录信息
- try {
- uni.removeStorageSync('token');
- uni.removeStorageSync('userInfo');
-
- // 更新状态
- this.isLogin = false;
- this.userInfo = {
- username: '',
- userId: '',
- avatar: ''
- };
-
- uni.showToast({
- title: '已退出登录',
- icon: 'success'
- });
- } catch (e) {
- console.error('退出登录失败', e);
- uni.showToast({
- title: '退出登录失败',
- icon: 'none'
- });
- }
- }
- }
- });
- }
- }
- }
- </script>
- <style>
- .my-container {
- padding: 20rpx;
- background-color: #f5f5f5;
- min-height: 100vh;
- }
-
- .user-info {
- display: flex;
- align-items: center;
- background-color: #ffffff;
- padding: 30rpx;
- border-radius: 12rpx;
- margin-bottom: 20rpx;
- }
-
- .avatar {
- width: 120rpx;
- height: 120rpx;
- border-radius: 60rpx;
- margin-right: 20rpx;
- }
-
- .user-details {
- display: flex;
- flex-direction: column;
- }
-
- .username {
- font-size: 36rpx;
- font-weight: bold;
- margin-bottom: 10rpx;
- }
-
- .user-id {
- font-size: 24rpx;
- color: #999;
- }
-
- .menu-list {
- background-color: #ffffff;
- border-radius: 12rpx;
- margin-bottom: 20rpx;
- }
-
- .menu-item {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 30rpx;
- border-bottom: 1rpx solid #f5f5f5;
- }
-
- .menu-item:last-child {
- border-bottom: none;
- }
-
- .menu-item-left {
- display: flex;
- align-items: center;
- }
-
- .menu-text {
- margin-left: 20rpx;
- font-size: 28rpx;
- }
-
- .logout-btn {
- background-color: #ffffff;
- border-radius: 12rpx;
- padding: 30rpx;
- text-align: center;
- color: #ff0000;
- font-size: 32rpx;
- }
-
- /* 这里应该引入iconfont,但为了简化,我们先不添加 */
- .iconfont {
- font-size: 36rpx;
- color: #007AFF;
- }
-
- .icon-right {
- color: #cccccc;
- }
- </style>
|