LandSurveyApplet/pages/index/index.vue

<template>
<!--  <view class="w-full h-[100rpx] bg-[#f5f5f5] flex items-center justify-center" @click="navigateToTest">进入测试页面</view>-->
  <view class="flex flex-col items-center justify-start bg-[#f5f5f5] p-[20rpx]">

    <!-- 轮播图 -->
    <swiper class="w-full h-[400rpx] mb-[20rpx]" :indicator-dots="true" :autoplay="true" interval="5000" duration="500"
            :circular="true">
      <swiper-item v-for="(item, index) in bannerList" :key="index">
        <image :src="item.imageUrl" class="w-full object-contain" mode="aspectFill" />
      </swiper-item>
    </swiper>

    <!-- 三个图标 -->
    <view class="flex justify-around w-full py-[20rpx] bg-white rounded-[12rpx] mb-[20rpx] mr-[10rpx] ml-[10rpx]">
      <view class="flex flex-col items-center p-[20rpx] w-[200rpx] text-center" @click="handfarmerClick()">
        <view class="w-[80rpx] h-[80rpx] rounded-full bg-#FFF1E0 flex items-center justify-center shadow">
          <image src="/static/icon/farmer.png" class="w-[48rpx] h-[48rpx]" />
        </view>
        <text class="mt-[30rpx] text-[28rpx] text-[#333]">我是农户</text>
      </view>

      <view class="flex flex-col items-center p-[20rpx] w-[200rpx] text-center" @click="handleIconClick('investigator')">
        <view class="w-[80rpx] h-[80rpx] rounded-full bg-#FFE4E0 flex items-center justify-center shadow">
          <image src="/static/icon/investigator.png" class="w-[48rpx] h-[48rpx]" />
        </view>
        <text class="mt-[30rpx] text-[28rpx] text-[#333]">我是调查员</text>
      </view>

      <view class="flex flex-col items-center p-[20rpx] w-[200rpx] text-center" @click="handleIconClick('official')">
        <view class="w-[80rpx] h-[80rpx] rounded-full bg-#E3E3FF flex items-center justify-center shadow">
          <image src="/static/icon/official.png" class="w-[48rpx] h-[48rpx]" />
        </view>
        <text class="mt-[30rpx] text-[28rpx] text-[#333]">我是村干部</text>
      </view>
    </view>

    <!-- 新闻 -->
    <view class="w-full rounded-[12rpx] py-[20rpx]">
      <view class="text-[32rpx] font-bold text-[#333] mb-[30rpx]">新闻政策</view>

      <view class="flex flex-col gap-[20rpx]">
        <view v-for="(news, index) in newsList" :key="index" class="flex bg-white rounded-[12rpx] overflow-hidden shadow p-[10rpx]" @click="toDetail(news)">
          <view class="flex-1 p-[20rpx] flex flex-col justify-between">
            <text class="text-[30rpx] text-[#333] leading-snug mb-[20rpx] font-bold">{{ news.title }}</text>
            <text class="text-[24rpx] text-[#666] mb-[20rpx]">{{ news.time }}</text>
            <view class="flex items-center text-[28rpx] text-[#666]">
              <view class="text-[#007aff] mr-[10rpx]">{{ news.source }}</view>
              <view class="ml-[10rpx] flex items-center">
                <image src="/static/icon/eye.png" class="w-[36rpx] h-[36rpx]" />
                <text>{{ news.views }} 次</text>
              </view>
            </view>
          </view>
         <image :src="news.image" class="w-[190rpx] h-[190rpx] p-[10rpx]" mode="aspectFill" />
        </view>
      </view>
    </view>
  <CustomTabBar :current="0" />
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import CustomTabBar from "@/components/CustomTabBar.vue";

const navigateToTest = () => {
  uni.navigateTo({
    url: '/pages/test/index'
  })
}

// 轮播图数据
const bannerList = ref([
  {
    imageUrl: '/static/banner/19.png'
  },
  {
    imageUrl: '/static/banner/20.png'
  },
  {
    imageUrl: '/static/banner/21.png'
  }
])

// 新闻列表数据
const newsList = ref([
  {
    title: '湖南省第二轮土地承包到期后再延长30年政策问题解答（1）',
    time: '2025-08-19 18:02:55',
    source: '实时新闻',
    views: 29771,
    image: '/static/news/news1.png',
    content: '湖南省第二轮planting到期后再延长30年政策问题解答（1）'
  },
  {
    title: '农业农村部：稳妥推进第二轮土地承包到期后再延长30年试点',
    time: '2025-08-19 18:01:53',
    source: '实时新闻',
    views: 15643,
    image: '/static/news/news2.png',
    content: '农业农村部：稳妥推进第二轮土地承包到期后再延长30年试点'
  },
  {
    title: '关于加强农村土地流转管理的通知',
    time: '2025-08-18 16:30:22',
    source: '政策发布',
    views: 8921,
    image: '/static/news/news3.png',
    content: '关于加强农村土地流转管理的通知'
  },
  {
    title: '乡村振兴战略实施情况报告',
    time: '2025-08-17 14:25:11',
    source: '专题报道',
    views: 12345,
    image: '/static/news/news1.png',
    content: '<p style="color: red">乡村振兴战略实施情况报告</p>'
  }
])

// 跳转到新闻详情页面
const toDetail = (news: any) => {
  // 存储新闻数据到缓存中
  uni.setStorageSync('newsParams', news)
  // 跳转到新闻详情页面
  uni.navigateTo({
    url: '/pages/index/news-detail/index'
  })
}

// 图标点击处理
const handleIconClick = (type: 'official'|'investigator') => {
	const token = uni.getStorageSync('token') || '';
	if(!token){
		uni.navigateTo({
		  url: `/pages/login/login`
		})
	}else{
		uni.navigateTo({
		  url: `/pages/${type}/index?type=` + type
		})
	}
  
}

// 图标点击处理
const handfarmerClick = () => {
  uni.navigateTo({
    url: `/pages/farmer/index`
  })
}
</script>