sooka_consult_uniapp/pages/index/index.vue

<template>
    <view>
        <!-- index.wxml -->
        <view class="topBj">
            <image :src="loadImgSrc('/jcb-top.png')"></image>
        </view>
        <view class="container">
            <!-- 主导航 -->
            <ul class="mainNav">
                <li>
                    <view class="wb" @tap="goWenBa"><em class="iconfont icon-wenhaofill"></em></view>
                    <span>问吧</span>
                </li>
                <li>
                    <view class="hq" @tap="goHangQing"><em class="iconfont icon-hangqing"></em></view>
                    <span>行情</span>
                </li>
                <li>
                    <view class="sc" @tap="goShangCheng"><em class="iconfont icon-shangcheng11"></em></view>
                    <span>商城</span>
                </li>
                <li>
                    <view class="bs" @tap="goBanShi"><em class="iconfont icon-banshidating1"></em></view>
                    <span>办事</span>
                </li>
            </ul>
            <!-- 村民福利 -->
            <view class="cmfl_title">
                <image :src="loadImgSrc('/cnfl-fl.png')"></image>
                <h1>村民福利</h1>
                <image :src="loadImgSrc('/cnfl-fr.png')"></image>
            </view>
            <view class="cnfl">
                <view class="fv" @click="toLegal()">
                    <text>法律乡下</text>
                    <image :src="loadImgSrc('/fv.jpg')"></image>
                </view>
                <view class="hm" @click='toGovernmentList1'>
                    <text >惠民通</text>
                    <image :src="loadImgSrc('/hm.jpg')"></image>
                </view>
            </view>
        </view>
        <view class="fengexian"></view>
        <!-- 分割线 -->
        <!-- 公告 -->
        <view class="container">
            <view class="gonggao">
                <span>
                    <em class="iconfont icon-gonggao"></em>
                    [公告]
                </span>
              <swiper class="swiper_container" :autoplay="true" :circular="true" :vertical="true" interval="2000">
                <block v-for="(item, index) in announcementList" :key="index">
                  <swiper-item @click="handleNavigate(item.id)">
                    <view class="swiper_item">{{ item.announcementTitle }}</view>
                  </swiper-item>
                </block>
              </swiper>
              <em class="iconfont icon-xiangyoujiantou" @click="goAnnoList()"></em>
            </view>
        </view>
        <!-- 公告 end -->
        <view class="fengexian"></view>
        <!-- 分割线 -->
        <view class="container">
            <!-- 政策推荐 -->
            <view class="zcTuijian">
                <image :src="loadImgSrc('/zctj.png')"></image>
                <ul>
                    <view v-for="(item, index) in governmentList" :key="index">
                        <li style="display: flex;">
                            <em class="iconfont icon-yuandianxiao"></em>
                            {{ item.titleName }}
                        </li>
                    </view>
                </ul>
                <em class="iconfont icon-xiangyoujiantou" @click="toGovernmentList"></em>
            </view>
        </view>
        <view class="fengexian"></view>
        <!-- 分割线 -->
        <view class="container">
            <!-- 图片轮播 -->
            <swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" :circular="circular" class="banner">
                <block v-for="(item, index) in banners" :key="index">
                    <swiper-item><image :src="loadImgSrc(item.src)" mode="aspectFill"></image></swiper-item>
                </block>
            </swiper>
        </view>
        <view class="fengexian"></view>
        <!-- 分割线 -->
        <view class="container">
            <view class="titleLeft">
                <em class="iconfont icon--fuwu"></em>
                高频服务
            </view>
            <view class="gpfwNav">
                <ul>
                    <li>
                        <view class="lvxd"><em class="iconfont icon-jurassic_nav"></em></view>
                        <span>旅游向导</span>
                    </li>
                    <li>
                        <view class="xlzx"><em class="iconfont icon-xinlizixun"></em></view>
                        <span>心里咨询</span>
                    </li>
                    <li>
                        <view class="xswz"><em class="iconfont icon-wenzhen"></em></view>
                        <span>线上问诊</span>
                    </li>
                    <li>
                        <view class="gxs" @tap="goCooperative"><em class="iconfont icon-gongxiaoshelogo"></em></view>
                        <span @tap="goLoveAtVillage">供</span>
                        <span @tap="goLegalService">销</span>
                        <span @tap="goFinancialInfrastructure">社</span>
                    </li>
                    <li>
                        <view class="xlzx"><em class="iconfont icon-linshijiuzhu"></em></view>
                        <span>帮扶救助</span>
                    </li>
                    <li>
                        <view class="xswz"><em class="iconfont icon-zhishi1" @tap="gozsk"></em></view>
                        <span>知识库</span>
                    </li>
                    <li>
                        <view class="lvxd"><em class="iconfont icon-zhibo" @tap="gozbdh"></em></view>
                        <span>直播带货</span>
                    </li>
                    <li>
                        <view class="more"><em class="iconfont icon-gengduo1"></em></view>
                        <span>更多</span>
                    </li>
                </ul>
            </view>
        </view>
        <view class="fengexian"></view>
        <!-- 分割线 -->
        <view class="container">
            <view class="titleLeft">
                <em class="iconfont icon-licaiwenda"></em>
                热门问答
            </view>
            <view class="rnwdList">
                <view class="list" @tap="goDetails" v-for="(item, index) in indexList" :key="index">
                    <span class="listTitle">{{ item.title }}</span>

					<view class="onePic" v-if="item.imgList.length == 1">
						<image :src="loadImgSrc('/' + item.url)" v-for="(item, index1) in item.imgList" :key="index1"></image>
					</view>

					<view class="twoPic" v-if="item.imgList.length == 2">
						<image :src="loadImgSrc('/' + item.url)" v-for="(item, index1) in item.imgList" :key="index1"></image>
					</view>

					<view class="threePic" v-if="item.imgList.length == 3">
						<image :src="loadImgSrc('/' + item.url)" v-for="(item, index1) in item.imgList" :key="index1"></image>
					</view>

					<view class="jlSj">
						<span class="jf">
							{{ item.jf }}
							<em class="iconfont icon-jifen"></em>
						</span>
						<view class="ck">
							<span>
								<em class="iconfont icon-pinglun"></em>
								{{ item.pl }}
							</span>
							<span>
								<em class="iconfont icon-chakan"></em>
								{{ item.ck }}
							</span>
							<span>
								<em class="iconfont icon-shoucang"></em>
								{{ item.dz }}
							</span>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="fengexian"></view>
		<!-- 分割线 -->
		<view class="container">
			<view class="titleLeft">
				<em class="iconfont icon-zhishiku1"></em>
				热门知识
			</view>
			<ul class="rmzsList">
				<li>
					<image :src="loadImgSrc('/10_16.png')"></image>
					<view class="listCont">
						<p>稳预期 促互通——专家学者建言献策国际农产品市场和贸易高质量发展</p>
						<text>唐旭 姚媛</text>
						<view class="biaoqian">
							<span>三农</span>
							<span>教育</span>
						</view>
						<view class="jiage">
							<span class="yhjg">
								<em>￥</em>
								200
							</span>
							<span class="yjjg">￥500</span>
						</view>
					</view>
				</li>
				<li>
					<image :src="loadImgSrc('/10_16.png')"></image>
					<view class="listCont">
						<p>稳预期 促互通——专家学者建言献策国际农产品市场和贸易高质量发展</p>
						<text>唐旭 姚媛</text>
						<view class="biaoqian">
							<span>三农</span>
							<span>教育</span>
						</view>
						<view class="jiage">
							<span class="yhjg">
								<em>￥</em>
								200
							</span>
							<span class="yjjg">￥500</span>
						</view>
					</view>
				</li>
			</ul>
		</view>
	</view>
</template>

<script>
import { getListToAnnouncement } from '@/api/index/index.js';
import { governmentListData } from '@/api/information/information.js';

export default {
	data() {
		return {
			// 图片轮播
			banners: [
				{
					src: '/img1.png'
				},
				{
					src: '/img2.png'
				}
			],
			announcementList: [
				{
					id: '3',
					announcementTitle: '关于高质量推进土地整治工作赋能乡村振兴的通知'
				},
				{
					id: '2',
					announcementTitle: '关于高质量推进土地整治工作的通知'
				},
				{
					id: '1',
					announcementTitle: '关于乡村振兴的通知'
				}
			],
			requestParam: {
				userId: getApp().globalData.userId
			},
			msgList: [
				{
					id: 0,
					title: '关于高质量推进土地整治工作赋能乡村振兴的通知'
				},
				{
					id: 1,
					title: '关于高质量推进土地整治工作的通知'
				},
				{
					id: 2,
					title: '关于乡村振兴的通知'
				}
			],
			indicatorDots: true,
			vertical: false,
			autoplay: true,
			interval: 2000,
			duration: 500,
			circular: true,
			governmentList: [],
			indexList: [
				{
					ck: '10',
					dz: '10',
					id: 1,
					imgList: [],
					jf: '100',
					pl: '10',
					title: '探索乡村能源供给新模式 绘就乡村振兴美丽新画卷'
				},
				{
					ck: '20',
					dz: '200',
					id: 2,
					imgList: [
						{
							url: '/xczx01.png'
						}
					],
					jf: '220',
					pl: '20',
					title: '探索乡村能源供给新模式 绘就乡村振兴美丽新画卷'
				},
				{
					ck: '30',
					dz: '320',
					id: 3,
					imgList: [
						{
							url: '/xczx01.png'
						},
						{
							url: '/xczx01.png'
						}
					],
					jf: '300',
					ly: '30',
					title: '探索乡村能源供给新模式 绘就乡村振兴美丽新画卷'
				},
				{
					ck: '40',
					dz: '420',
					id: 4,
					imgList: [
						{
							url: '/img1.png'
						},
						{
							url: '/img1.png'
						},
						{
							url: '/img1.png'
						}
					],
					jf: '400',
					pl: '40',
					title: '探索乡村能源供给新模式 绘就乡村振兴美丽新画卷'
				}
			],
			queryParam: {
				pageNum: 1,
				pageSize: 10,
				userId: getApp().globalData.userId
			}
		};
	},
	/**
	 * 生命周期函数--监听页面加载
	 */ onLoad(options) {
		this.getAnnouncementList(getApp().globalData.userId);
	},
	mounted() {
		this.governmentListData();
	},
    methods: {
		toLegal(){
			uni.navigateTo({
			    url: '/pages/toLegal/toLegal'
			});
		},
		toGovernmentList(){
			uni.navigateTo({
				url: '/pages/toGovernmentList/toGovernmentList'
			});
		},
		toGovernmentList1(){
			uni.navigateTo({
			    url: '/pages/toGovernmentList/toGovernmentList?type=10'
			});
		},
		governmentListData() {
			let params = {
				pageSize: 10,
				pageNum: 1,
				type: 10,
				isGovernment: 1
			};
			governmentListData(params).then((res) => {
				if (res.code == 200) {
					this.governmentList = res.data;
				}
			});
		},
		goWenBa() {
			uni.navigateTo({
				url: '/pages/asking/asking'
			});
		},
		goHangQing() {
			uni.navigateTo({
				url: '/pages/quotations/quotations'
			});
		},
		goShangCheng() {
			uni.navigateTo({
				url: '/pages/shangcheng/shangcheng'
			});
		},

		goDetails() {
			uni.navigateTo({
				url: '/pages/wenbaxiangqing/wenbaxiangqing'
			});
		},

        goCooperative() {
            uni.navigateTo({
                url: '/pages/cooperative/cooperative'
            });
        },
        goLoveAtVillage() {
            uni.navigateTo({
                url: '/pages/specialService/loveAtVillage/loveAtVillage'
            });
        },
        goLegalService() {
            uni.navigateTo({
                url: '/pages/specialService/legalService/legalService'
            });
        },
        goFinancialInfrastructure() {
            uni.navigateTo({
                url: '/pages/specialService/financialInfrastructure/financialInfrastructure'
            });
        },
		goBanShi() {
			uni.navigateTo({
				url: '/pages/handleAffairs/handleAffairs'
			});
		},
		//获取最新公告列表（三条未读消息）
		getAnnouncementList(userId) {
			getListToAnnouncement(userId).then((res) => {
				this.announcementList = res.data;
			});
		},
		handleNavigate(item) {
			uni.navigateTo({
				url: '/pages/index/announcementDetails?id=' + item
			});
		},
		//跳转公告列表页面
		goAnnoList() {
			uni.navigateTo({
				url: '/pages/index/announcementList'
			});
		},
		/**
		 * 跳转直播带货页面
		 */
		gozbdh() {
			uni.navigateTo({
				url: '/pages/liveBroadcast/liveBroadcast'
			});
		},
		/**
		 * 跳转知识库页面
		 */
		gozsk(){
			uni.navigateTo({
			    url: '/pages/knowledge/knowledge'
			});
		},
	}
};
</script>
<style>
@import './index.css';
</style>