labor_map_miniapp/pages/my/my.vue

<template>
	<view class="my-page">
		<!-- 登录区域 -->
		<view class="login-section" @click="goToProfile">
			<!-- <button class="avatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
			  <image :src="userInfo && userInfo.avatarUrl || '/static/default-avatar.png'" mode="aspectFit"></image>
			</button> -->
			<view class="avatar">
			  <!-- <image class="avatar" src="{{avatarUrl}}"></image> -->
			  <image :src="userInfo && userInfo.avatarUrl || '/static/default-avatar.png'" mode="aspectFit"></image>
			</view> 
			<view v-if="loginRes && loginRes.accessToken" class="login-text">
				<text class="login-title">{{userInfo.nickname || '默认昵称'}}</text>
				<!-- <text class="login-subtitle">登录查看更多消息</text> -->
			</view>
			<view v-else class="login-text">
				<text class="login-title">点击登录/注册</text>
				<text class="login-subtitle">登录查看更多消息</text>
			</view>
		</view>
		
		<!-- 功能区域 -->
		<view class="features-section">
			<!-- <view class="feature-item" @click="myComments">
				<view class="feature-icon">
					<text class="icon-content">📝</text>
				</view>
				<text class="feature-name">我的评价</text>
			</view> -->
			
			<view class="feature-item" @click="myFavorites">
				<view class="feature-icon">
					<text class="icon-content">❤️</text>
				</view>
				<text class="feature-name">收藏岗位</text>
			</view>
			
			<button class="feature-item contact-button" open-type="contact" bindcontact="handleContact">
				<view class="feature-icon">
					<text class="icon-content">📞</text>
				</view>
				<text class="feature-name">咨询客服</text>
			</button>
		</view>
		<!-- 底部占位，避免内容被底部导航栏遮挡 -->
		<view class="bottom-space"></view>
	</view>
</template>

<script setup>
import { computed } from 'vue';
import { useUserStore } from '../../stores/user.js';
import { appUserEditAvatar } from '../../api/index.js';
import { isLoggedIn } from '../../utils/index.js';
const userStore = useUserStore();
const loginRes = computed(() => userStore.loginRes);
const userInfo = computed(() => userStore.userInfo);
const loginRegister = () => {
	if (loginRes.value && loginRes.value.accessToken) {
		return;
	}
	uni.navigateTo({
		url: '/pages/login/login'
	})
}

const myFavorites = () => {
	if (!isLoggedIn()) {
		uni.showToast({
			title: '未登录',
			icon: 'none'
		})
	}
	uni.navigateTo({
		url: '/pages/my/myFavorites'
	})
	
}

const goToProfile = () => {
	if (loginRes.value && loginRes.value.accessToken) {
		// 已登录，跳转到编辑资料页面
		uni.navigateTo({
			url: '/pages/my/editProfile'
		})
	} else {
		// 未登录，跳转到登录页面
		uni.navigateTo({
			url: '/pages/login/login'
		})
	}
}

const contactService = () => {
	// 在微信小程序中打开客服会话
	// 注意：这需要在微信开发者平台配置客服消息功能
	// 方式一：使用uni.openCustomerServiceChat（需要配置客服消息功能）
	// 如果遇到"url empty"错误，需要在微信公众平台配置客服消息功能
	// 或者使用其他联系方式替代
	
	// 检查是否在微信环境中
	// #ifdef MP-WEIXIN
	uni.openCustomerServiceChat({
		extInfo: { url: '' }, // 如果有自定义客服链接，填入此处
		corpId: '', // 如果是企业微信，填入企业ID
		success: (res) => {
			console.log('打开客服聊天界面成功', res)
		},
		fail: (err) => {
			console.error('打开客服聊天界面失败', err)
			// 如果打开客服失败，可以提供其他联系方式
			uni.showModal({
				title: '提示',
				content: '暂无法打开客服页面，您可以尝试拨打客服电话：400-xxx-xxxx',
				showCancel: true,
				cancelText: '取消',
				confirmText: '拨打',
				success: function (res) {
					if (res.confirm) {
						// 拨打客服电话
						uni.makePhoneCall({
							phoneNumber: '400-xxx-xxxx' // 替换为实际的客服电话
						})
					}
				}
			})
		}
	})
	// #endif
	
	// #ifndef MP-WEIXIN
	// 非微信环境下的替代方案
	uni.showModal({
		title: '联系我们',
		content: '客服电话：400-xxx-xxxx\n服务时间：周一至周日 9:00-18:00',
		showCancel: true,
		cancelText: '取消',
		confirmText: '拨打',
		success: function (res) {
			if (res.confirm) {
				// 拨打客服电话
				uni.makePhoneCall({
					phoneNumber: '400-xxx-xxxx' // 替换为实际的客服电话
				})
			}
		}
	})
	// #endif
}
</script>

<style lang="scss">
.my-page {
	background-color: #fff;
	min-height: 100vh;
	padding-top: 12px; // 增加顶部内边距，避免内容紧贴导航栏
	
	// 登录区域
	.login-section {
		background-color: #fff;
		padding: 20px;
		display: flex;
		align-items: center;
		tap-highlight-color: transparent;
		
		.avatar {
			width: 60px;
			height: 60px;
			margin: 0;
			padding: 0;
			border-radius: 4px;
			background-color: #e6f7ff;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			margin-right: 16px;
			
			.avatar-image {
				font-size: 30px;
			}
		}
		
		.login-text {
			.login-title {
				font-size: 16px;
				font-weight: 500;
				color: #333;
				display: block;
				margin-bottom: 4px;
			}
			
			.login-subtitle {
				font-size: 14px;
				color: #999;
			}
		}
	}
	
	// 功能区域
	.features-section {
		background-color: #fff;
		padding: 16px 0;
		display: flex;
		justify-content: space-around;
		
		.feature-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 8px;
			tap-highlight-color: transparent;
			
			.feature-icon {
				width: 50px;
				height: 50px;
				border-radius: 12px;
				background-color: #f0f9ff;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 8px;
				
				.icon-content {
					font-size: 24px;
				}
			}
			
			.feature-name {
				font-size: 14px;
				color: #333;
			}
			
			// 为不同的功能图标设置不同的背景色
			&:nth-child(1) .feature-icon {
				background-color: #e6f7ff;
			}
			
			&:nth-child(2) .feature-icon {
				background-color: #fff1f0;
			}
			
			&:nth-child(3) .feature-icon {
				background-color: #f0f9ff;
			}
		}
		
		.contact-button {
			background: transparent;
			border: 0px!important;
			outline: none;
			padding: 0;
			margin: 0;
			width: auto;
			height: auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			tap-highlight-color: transparent;
		}
		.contact-button::after {
			border: 0px!important;

		}
	}
	
	// 底部占位，避免内容被底部导航栏遮挡
	.bottom-space {
		height: 60px;
	}
}
</style>