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" @tap="goKnowledgeDetails(item.id)" v-for="(item, index) in dataSource" :key="index">
				<li>
					<image :src="loadImgSrcLocalhost(item.imgUrlList)"></image>
					<view class="listCont">
						<p>{{ item.titleName }}</p>
						<text>{{ item.createBy }}</text>
						<view class="biaoqian">
							<span>三农</span>
							<span>教育</span>
						</view>
						<view class="jiage">
							<span class="yhjg">
								<em>￥</em>
								{{ item.integral }}
							</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';
	import {
		popularKnowledgeList
	} from '@/api/knowledge/knowledge.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
				},
				//热门知识数据集合
				dataSource: [],
				// 热门知识数据总量
				total: 0,
				// 热门知识数据
				knowledgeParams: {
					// 当前页
					pageNum: 1,
					// 每页数据量
					pageSize: 2,
				},
				loading: false,
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.getAnnouncementList(getApp().globalData.userId);
		},
		mounted() {
			this.governmentListData();
		},
		created() {
			this.getList()
		},
		onReachBottom() {
			let pageNum = this.knowledgeParams.pageNum
			let pageSize = this.knowledgeParams.pageSize
			let total = this.total
			if (pageNum * pageSize >= total) {
				uni.showToast({
					title: '暂无更多数据'
				})
				return
			} else {
				this.queryParams.pageNum += 1;
				this.getList()
			}
		},
		methods: {
			// 热门知识获取数据
			getList(pageNum) {
				let params = {
					pageSize: this.knowledgeParams.pageSize,
					pageNum: pageNum,
				}
				popularKnowledgeList(params).then(res => {
					if (res.code == 200) {
						this.dataSource = [...this.dataSource, ...res.rows]
						this.total = res.total
						console.log("this.dataSource", this.dataSource)
					}
				})
			},
			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'
				});
			},
			goKnowledgeDetails(id) {
				uni.navigateTo({
					url: '/pages/knowledgeDetails/knowledgeDetails?id=' + id,
				});
			}
		}
	};
</script>
<style>
	@import './index.css';
</style>