sooka_consult_uniapp/pages/index/index.vue

<template>
	<view>
		<!-- index.wxml -->
		<view class="topBj">
			<image :src="loadImgSrcLocalhost(bigImg)"></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" @click="goZcDetail(item)">
						<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="loadImgSrcLocalhost(item)" 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" @tap="golyxd"></em></view>
						<span>旅游向导</span>
					</li>
					<li>
						<view class="xlzx"><em class="iconfont icon-xinlizixun" @tap="goxlzx"></em></view>
						<span>心理咨询</span>
					</li>
					<li>
						<view class="xswz"><em class="iconfont icon-wenzhen" @tap="goxswz"></em></view>
						<span>线上问诊</span>
					</li>
					<li>
						<view class="gxs" @tap="goCooperative"><em class="iconfont icon-gongxiaoshelogo"></em></view>
						<span>供销社</span>
					</li>
					<li>
						<view class="xlzx"><em class="iconfont icon-linshijiuzhu" @tap="gobfjz"></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" @tap="toMore"></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>
      <view class="list" @tap="goKnowledgeDetails(item)" v-for="(item, index) in dataSource" :key="index">
        <span class="listTitle">{{ item.titleName }}</span>
        <view class="onePic" v-if="item.imgUrlList != null">
          <image  :src="loadImgSrcLocalhost(item.imgUrlList)"></image>
        </view>
        <view class="jlSj">
						<span class="jf">
							{{ item.integral }}
							<em class="iconfont icon-jifen"></em>
						</span>
          <view class="ck">
            <span>
								<em class="iconfont icon-chakan"></em>
								{{ item.watchNum }}
							</span>
          </view>
        </view>
      </view>
		</view>
	</view>
</template>

<script>
	import {
		getListToAnnouncement,
		getCovers,
		getCarousel
	} from '@/api/index/index.js';
	import {
		governmentListData
	} from '@/api/information/information.js';
	import {
		popularKnowledgeList,
		knowledgePay
	} from '@/api/knowledge/knowledge.js'
	export default {
		data() {
			return {
				bigImg: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.JsghMT_u8V52I4PSHow2hAHaEG?w=332&h=186&c=7&r=0&o=5&pid=1.7',
				// 图片轮播
				banners: [
					'https://tse1-mm.cn.bing.net/th/id/OIP-C.JsghMT_u8V52I4PSHow2hAHaEG?w=332&h=186&c=7&r=0&o=5&pid=1.7'
				],
				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',
						pl: '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()
			this.getCovers()
		},
		// 上拉加载
		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.knowledgeParams.pageNum += 1;
				this.getList()
			}
		},
		methods: {
			// 跳转至更多高频服务页面
			toMore() {
				uni.navigateTo({
					url: "/pages/highServer/service/service"
				})
			},
			goZcDetail(e) {
				let id = e.id || ''
				let type = 10
				uni.navigateTo({
					url: `/pages/information/informationDetail/informationDetail?id=${id}&type=${type}`
				});
			},
			//封面与轮播图
			getCovers() {
				getCovers().then(res => {
					this.bigImg = res.data
				})
				getCarousel().then(res => {
					this.banners = res.data
				})
			},
			// 热门知识获取数据
			getList() {
				popularKnowledgeList(this.knowledgeParams).then(res => {
					if (res.code == 200) {
						this.dataSource = this.cutarray([...this.dataSource, ...res.rows])
						this.total = res.total
						console.log("this.dataSource", this.dataSource)
					}
				})
			},
			cutarray(arr) { //数组去重
				let obj = {}; //obj用来记录该项重复出现了几次
				let brr = []; //brr是去重后的数组
				arr.forEach((item) => {
					if (obj[item.id] == undefined) {
						obj[item.id] = 1;
						brr.push(item);
					} else {
						obj[item.id] += 1;
					}
				});
				return brr;
			},
			toLegal() {
				uni.navigateTo({
					url: '/pages/information/toLegal/toLegal'
				});
			},
			//政策推荐
			toGovernmentList() {
				uni.navigateTo({
					url: '/pages/information/toGovernmentList/toGovernmentList'
				});
			},
			//惠民通
			toGovernmentList1() {
				uni.navigateTo({
					url: '/pages/information/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/demo/wenba/wenba'
				});
			},
			goHangQing() {
				uni.navigateTo({
					url: '/pages/quotations/quotations'
				});
			},
			goShangCheng() {
				uni.navigateTo({
					url: '/pages/demo/shangcheng/shangcheng'
				});
			},

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

			goCooperative() {
				uni.navigateTo({
					url: '/pages/highServer/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/index'
				});
			},
			//获取最新公告列表（三条未读消息）
			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/highServer/liveBroadcast/liveBroadcast'
				});
			},
			/**
			 * 跳转知识库页面
			 */
			gozsk() {
				uni.navigateTo({
					url: '/pages/highServer/knowledge/knowledge'
				});
			},
			/**
			 * 跳转旅游向导页面
			 */
			golyxd() {
				uni.navigateTo({
					url: '/pages/highServer/travelGuide/travelGuide'
				});
			},
			/**
			 * 跳转心理咨询页面
			 */
			goxlzx() {
				uni.navigateTo({
					url: '/pages/highServer/psychology/psychology'
				});
			},
			/**
			 * 跳转线上问诊页面
			 */
			goxswz() {
				uni.navigateTo({
					url: '/pages/highServer/inquiry/inquiry'
				});
			},
			/**
			 * 跳转帮扶救助页面
			 */
			gobfjz() {
				uni.navigateTo({
					url: '/pages/highServer/help/help'
				});
			},
			goKnowledgeDetails(item) {
				this.isKnowledgePay(item)
			},
			isKnowledgePay(item) {
				let params = {
					//减少积分人id
					userId: getApp().globalData.userId,
					//增加积分人id
					createId: item.createId,
					integral: item.integral,
					id: item.id,
					relevance: "1",
				}
				knowledgePay(params).then(res => {
					if (res.code == 200) {
						uni.navigateTo({
							url: '/pages/highServer/knowledgeDetails/knowledgeDetails?id=' + item.id,
						});
					} else {
						uni.showToast({
							title: res.msg
						})
					}
				})
			},
		}
	};
</script>
<style>
	@import './index.css';
</style>