nongxiaoyu/pages/user/index.vue

<template>
  <view class="container">
    <!-- 用户信息卡片 -->
    <view class="user-card">
      <view class="user-header">
        <image class="avatar" src="/static/images/default-avatar.png"></image>
        <view class="user-detail">
          <text class="nickname">测试用户</text>
          <text class="user-id">ID: 888888</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 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>
export default {
  data() {
    return {
      plotInfo: {
        total: 3,
        active: 2,
        idle: 1
      },
      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'
        }
      ]
    }
  },
  methods: {
    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) {
            // 清除登录信息
            uni.removeStorageSync('token')
            uni.removeStorageSync('userInfo')
            // 返回登录页
            uni.reLaunch({
              url: '/pages/login/index'
            })
          }
        }
      })
    }
  }
}
</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;
}
</style>