nongxiaoyu/pages/user/index.vue

<template>
	<view class="container">
		<!-- 用户信息卡片 -->
		<view class="user-card">
			<view class="user-header">
				<image class="avatar" :src="userInfo.avatar || '/static/icons/user_icon.png'"></image>
				<view class="user-detail" v-if="isLogin">
					<text class="nickname">{{userInfo.nickName}}</text>
					<!-- <text class="user-id">性别: {{userInfo.sex == '0' ? '男' :'女' || '未知'}}</text> -->
				</view>
				<view class="user-detail" v-else>
					<text class="login-text" @click="navigateToLogin">登录/注册</text>
				</view>
			</view>
		</view>

		<!-- 地块信息 -->
		<view class="info-card">
			<view class="card-title">
				<text>我的地块</text>
				<text class="more" @click="navigateToPlots">查看更多 ></text>
			</view>
			<view class="plot-info">
				<view class="plot-item">
					<text class="number">{{ plotInfo.total }}</text>
					<text class="label">总地块数</text>
				</view>
				<view class="plot-item">
					<text class="number">{{ plotInfo.active }}</text>
					<text class="label">种植中</text>
				</view>
				<view class="plot-item">
					<text class="number">{{ plotInfo.idle }}</text>
					<text class="label">空闲</text>
				</view>
			</view>
		</view>

		<!-- 农业服务 -->
		<view class="info-card">
			<view class="card-title">
				<text>农业服务</text>
			</view>
			<view class="service-grid">
				<view class="service-item" v-for="(item, index) in serviceList" :key="index"
					@click="navigateToService(item)">
					<view class="service-icon">
						<text>{{ item.iconText }}</text>
					</view>
					<text class="service-name">{{ item.name }}</text>
				</view>
			</view>
		</view>

		<!-- 常用功能 -->
		<view class="info-card">
			<view class="function-list">
				<view class="function-item" @click="handleContact">
					<view class="left">
						<text class="function-icon">客</text>
						<text>联系客服</text>
					</view>
					<text class="arrow">></text>
				</view>
				<view class="function-item" @click="navigateToAbout">
					<view class="left">
						<text class="function-icon">关</text>
						<text>关于我们</text>
					</view>
					<text class="arrow">></text>
				</view>
				<view class="function-item" @click="navigateToSettings">
					<view class="left">
						<text class="function-icon">设</text>
						<text>系统设置</text>
					</view>
					<text class="arrow">></text>
				</view>
				<view v-if="isLogin" class="function-item" @click="handleLogout">
					<view class="left">
						<text class="function-icon">退</text>
						<text>退出登录</text>
					</view>
					<text class="arrow">></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		logout, webLogout
	} from '@/api/services/connect.js';
	import {
		countUserPlots
	} from '@/api/services/field.js';
	import storage from "@/utils/storage.js";
	export default {
		data() {
			return {
				plotInfo: {
					total: 0,
					active: 0,
					idle: 0
				},
				serviceList: [{
						name: '农资商城',
						iconText: '商',
						path: '/pages/service/mall'
					},
					{
						name: '农产品销售',
						iconText: '售',
						path: '/pages/service/sales'
					},
					{
						name: '在线专家问诊',
						iconText: '诊',
						path: '/pages/service/expert'
					},
					{
						name: '绿色认证申请',
						iconText: '证',
						path: '/pages/service/certification'
					},
					{
						name: '保险接入',
						iconText: '保',
						path: '/pages/service/insurance'
					}
				],
				userInfo: {
					nickName: '',
					id: '',
					avatar: '',
					sex:''
				},
				isLogin: false
			}
		},
		onShow() {
			this.checkLoginStatus();
			if(this.isLogin){
				this.userPlots();
			}
		},
		methods: {
			userPlots(){
				countUserPlots().then((res=>{
					if (res.data.code == 200) {
						const {plotsTotal,inUseCount,leiSureCount} = res.data.data
						this.plotInfo = {
							total: plotsTotal,
							active: inUseCount,
							idle: leiSureCount
						}
					} else{
						console.error("统计地块数量失败！")
					}
				}))
			},
			// 检查登录状态
			checkLoginStatus() {
				console.log("执行Show");
				if (storage.getHasLogin()) {
					this.isLogin = true;
					// 获取用户信息
					const userInfo = storage.getUserInfo();
					console.log("执行Show",userInfo);
					if (userInfo) {
						this.userInfo = {
							nickName: userInfo.username || '游客',
							avatar: userInfo.avatar || '/static/icons/user_icon.png',
							sex:userInfo.sex
						};
					}
				} else {
					this.isLogin = false;
				}
			},
			navigateToLogin() {
				uni.navigateTo({
					url: '/pages/login/index'
				});
			},
			navigateToPlots() {
				uni.navigateTo({
					url: '/pages/plots/list'
				})
			},
			navigateToService(item) {
				uni.navigateTo({
					url: item.path
				})
			},
			handleContact() {
				uni.makePhoneCall({
					phoneNumber: '400-xxx-xxxx' // 替换为实际的客服电话
				})
			},
			navigateToAbout() {
				uni.navigateTo({
					url: '/pages/about/index'
				})
			},
			navigateToSettings() {
				uni.navigateTo({
					url: '/pages/settings/index'
				})
			},
			// 使用授权服务处理登出
			handleLogout() {
				uni.showModal({
					title: '提示',
					content: '确认退出登录？',
					success: (res) => {
						if (res.confirm) {
							// #ifdef H5
							webLogout().then(res=>{
								console.log("tuichu",res);
								storage.setAccessToken("");
								storage.setUserInfo({});
								storage.setHasLogin(false)
								this.isLogin = false;
								this.userInfo = {
									nickname: '游客',
									id: '',
									avatar: ''
								};
								this.plotInfo = {
									total: 0,
									active: 0,
									idle: 0
								}
							})
							// #endif
							
							// #ifdef APP-PLUS
							logout().then(() => {
								this.isLogin = false;
								this.userInfo = {
									nickname: '游客',
									id: '',
									avatar: '/static/icons/user_icon'
								};
							});
							// #endif
						}
					}
				})
			}
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding: 20rpx;
	}

	.user-card {
		background-color: #4CAF50;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.user-header {
		display: flex;
		align-items: center;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		/* border: 4rpx solid #fff; */
	}

	.user-detail {
		margin-left: 20rpx;
		color: #fff;
	}

	.nickname {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
		display: block;
	}

	.user-id {
		font-size: 24rpx;
		opacity: 0.8;
	}

	.info-card {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.card-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		font-size: 32rpx;
		font-weight: bold;
	}

	.more {
		color: #666;
		font-size: 24rpx;
		font-weight: normal;
	}

	.plot-info {
		display: flex;
		justify-content: space-around;
	}

	.plot-item {
		text-align: center;
	}

	.number {
		font-size: 36rpx;
		font-weight: bold;
		color: #4CAF50;
		display: block;
	}

	.label {
		font-size: 24rpx;
		color: #666;
		margin-top: 10rpx;
		display: block;
	}

	.service-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 30rpx;
		padding: 10rpx 0;
	}

	.service-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.service-icon {
		width: 88rpx;
		height: 88rpx;
		background-color: #E8F5E9;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 16rpx;
	}

	.service-icon text {
		font-size: 32rpx;
		color: #4CAF50;
		font-weight: bold;
	}

	.service-name {
		font-size: 28rpx;
		color: #666;
		text-align: center;
	}

	.function-list {
		width: 100%;
	}

	.function-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.function-item:last-child {
		border-bottom: none;
	}

	.function-item .left {
		display: flex;
		align-items: center;
	}

	.function-icon {
		width: 44rpx;
		height: 44rpx;
		background-color: #E8F5E9;
		color: #4CAF50;
		font-size: 28rpx;
		font-weight: bold;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}

	.function-item text {
		font-size: 28rpx;
		color: #333;
	}

	.arrow {
		color: #999;
		font-size: 24rpx;
	}

	.login-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
		background-color: rgba(255, 255, 255, 0.2);
		padding: 10rpx 30rpx;
		border-radius: 30rpx;
	}
</style>