sooka_consult_uniapp/pages/index/index.vue

<template>
    <view>
        <!-- index.wxml -->
        <view class="topBj">
            <image :src="host + '/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"><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"><em class="iconfont icon-banshidating1"></em></view>
                    <span>办事</span>
                </li>
            </ul>
            <!-- 村民福利 -->
            <view class="cmfl_title">
                <image :src="host + '/cnfl-fl.png'"></image>
                <h1>村民福利</h1>
                <image :src="host + '/cnfl-fr.png'"></image>
            </view>
            <view class="cnfl">
                <view class="fv">
                    <text>法律乡下</text>
                    <image :src="host + '/fv.jpg'"></image>
                </view>
                <view class="hm">
                    <text>惠民通</text>
                    <image :src="host + '/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="host + '/zctj.png'"></image>
                <ul>
                    <view v-for="(item, index) in msgList" :key="index">
                        <li>
                            <em class="iconfont icon-yuandianxiao"></em>
                            {{ item.title }}
                        </li>
                    </view>
                </ul>
                <em class="iconfont icon-xiangyoujiantou"></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="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"><em class="iconfont icon-gongxiaoshelogo"></em></view>
                        <span>供销社</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"></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="host + item.url" v-for="(item, index1) in item.imgList" :key="index1"></image>
                    </view>

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

                    <view class="threePic" v-if="item.imgList.length == 3">
                        <image :src="host + 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="host + '/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="host + '/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>
// pages/index/index.js
const app = getApp();
var localData = require('../../data/json');
export default {
    data() {
        return {
            host: app.globalData.host,
            // 图片轮播
            banners: [
                {
                    src: app.globalData.host + '/img1.png'
                },
                {
                    src: app.globalData.host + '/img2.png'
                }
            ],
            msgList: [
                {
                    id: 0,
                    title: '关于高质量推进土地整治工作赋能乡村振兴的通知'
                },
                {
                    id: 1,
                    title: '关于高质量推进土地整治工作的通知'
                },
                {
                    id: 2,
                    title: '关于乡村振兴的通知'
                }
            ],
            indicatorDots: true,
            vertical: false,
            autoplay: true,
            interval: 2000,
            duration: 500,
            circular: true,
            indexList: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        this.setData({
            indexList: localData.indexList
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        goWenBa() {
            uni.navigateTo({
                url: '../wenba/wenba'
            });
        },

        goShangCheng() {
            uni.navigateTo({
                url: '../shangcheng/shangcheng'
            });
        },

        goDetails() {
            uni.navigateTo({
                url: '../wenbaxiangqing/wenbaxiangqing'
            });
        }
    }
};
</script>
<style>
@import './index.css';
</style>