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">
                    <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 msgList" :key="index">
                        <swiper-item>
                            <view class="swiper_item">{{ item.title }}</view>
                        </swiper-item>
                    </block>
                </swiper>
                <em class="iconfont icon-xiangyoujiantou"></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"></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 {governmentListData} from '@/api/information/information.js'
export default {
    data() {
        return {
            // 图片轮播
            banners: [
                {
                    src: '/img1.png'
                },
                {
                    src: '/img2.png'
                }
            ],
            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": "探索乡村能源供给新模式 绘就乡村振兴美丽新画卷"
			  }
			]
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
    },
	mounted() {
		this.governmentListData()
	},
    methods: {
		toLegal(){
			uni.navigateTo({
			    url: '/pages/toLegal/toLegal'
			});
		},
		toGovernmentList(){
			uni.navigateTo({
			    url: '/pages/toGovernmentList/toGovernmentList'
			});
		},
		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'
			});
		},
		/**
		 * 跳转直播带货页面
		 */
		gozbdh(){
			uni.navigateTo({
			    url: '/pages/liveBroadcast/liveBroadcast'
			});
		},
    }
};
</script>
<style>
@import './index.css';
</style>