epmet-wx-pa-chengyang/src/views/home/index.vue

<template>
    <div class="pages">
        <div class="blueBg"></div>
        <div class="content">
            <div class="flex flex-end">
                <div class="flex flex-center2 white" @click="$router.push('/selectAgency')">
                    <img src="@/assets/images/icons/home.png" class="img_17 m-right10" alt="">
                    <span>{{ this.$store.state.app.userInfo.agencyName || '--' }}</span>
                </div>
                <div class="flex flex-center2">
                    <van-search v-model="searchKey" placeholder="请输入搜索关键词" shape="round" background="#3974f6"
                        style="width: 170px;"
                        @search="$router.push({ path: '/search', query: { searchKey: searchKey } })" />
                    <img src="@/assets/images/icons/mine.png"
                        @click="$router.push({ path: '/mine', query: { searchKey: searchKey } })" class="img_20 "
                        alt="">
                </div>
            </div>
            <div class="swipe">
                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                    <van-swipe-item v-for="item in activityList">
                        <img :src="item.coverPic" alt=""
                            style="width: 100%;height: 150px; margin: 0 auto;border-radius: 15px;">
                    </van-swipe-item>
                </van-swipe>
            </div>
            <div class="card flex flex-end flex-center2 m-top15 notice">
                <img src="@/assets/images/icons/notice.png" class="img_17" alt="">
                <div class="van-ellipsis flex-1">
                    <van-notice-bar color="#555555" background="#ffffff" text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。" />

                </div>
                <span class="gray notice_time">05-06</span>
                <span class="gray">更多</span>
            </div>
            <div class="card m-top10">
                <div class="flex white">
                    <div class="appeal m-right10 flex flex-y" @click="handelClickJump('event')">
                        <div>我有诉求</div>
                        <div class="font-size13 m-top5" style="color: #d8e6fe;"> 居民点单 社区接单</div>
                    </div>
                    <div class="verify">
                        <div>信息核实</div>
                        <div class="font-size13 m-top5" style="color: #d8e6fe;">登记信息 窗口办理</div>
                    </div>
                </div>
                <div class="flex flex-centr2 flex-mean m-top18">
                    <div class="flex-y flex flex-center1 flex-center2 nav font-size13 " v-for="(item, index) in tabList"
                        @click="handelClickJump(item.path)" :key="index">
                        <img :src="item.imgSrc" alt="">
                        <span>{{ item.title }}</span>
                    </div>
                </div>
            </div>
            <div class="card m-top10">
                <div class="title">
                    <span>社区活动</span>
                    <span @click="$router.push('/activity')">更多</span>
                </div>
                <div class="activity_content flex" v-for="(item, index) in activityList" :key="index">
                    <img :src="item.coverPic" alt="" class="mr10" style="width: 75px;height: 95px;">
                    <div class="flex flex-y flex1 flex-end" style="overflow: hidden;">
                        <div class="van-ellipsis">{{ item.activityName }}</div>
                        <div class="address font-size14 van-ellipsis gray">地点：{{ item.address }}</div>
                        <div class="time gray font-size14">时间：{{ item.startTime }}</div>
                        <div class="flex flex-end">
                            <div>
                                <span>报名人数：</span> <span class="font-size18 orange">{{ item.participants }}</span>/<span
                                    class="font-size14">{{ item.participants }}人</span>
                            </div>
                            <van-button type="info" size="small" round @click="handelClickJump('activity')"
                                :disabled="item.online !== 1">报名</van-button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card m-top10">
                <div class="title">
                    <span>居民议事</span>
                    <span @click="$router.push('/discussion')">更多</span>
                </div>
                <div class="activity_content flex" v-for="(item, index) in eventList">
                    <div class="flex flex-y flex1 flex-end" style="overflow: hidden;">
                        <span class="van-multi-ellipsis--l2">
                            {{ item.eventContent }}
                        </span>
                        <div class="flex flex-end flex-center gray m-top10 font-size13">
                            <div class="flex flex-center"><img src="@/assets/images/icons/resi.png" class="img_16 m-right7" alt="">
                                <span>参与 {{ item.total }}</span></div>
                            <div class="flex flex-center" @click="handelClicsupport1(item.eventId)">
                                <img src="@/assets/images/icons/support.png" alt="" class="img_16 m-right7">
                                <span>支持 {{ item.supportNum }}</span></div>
                            <div class="flex flex-center" @click="handelClicopposeNum(item.eventId)" ><img src="@/assets/images/icons/oppose.png" alt=""
                                    class="img_16 m-right7"><span>反对 {{ item.opposeNum }}</span></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card m-top10">
                <div class="title">
                    <span>社区讯息</span>
                    <span @click="$router.push('/communityPublicity')">更多</span>
                </div>
                <div class="activity_content flex">
                    <van-tabs v-model="tagActive" style="width: 100%;" @change="handelChangeTags">
                        <van-tab v-for="item in tagList" :key="item.id" :title="item.tagName">
                            <div class="flex flex-y flex1 flex-end" v-if="PublicityList.length !== 0">
                                <div class="activity_content flex flex-y" v-for="(item, index) in PublicityList" :key="index">
                                    <div class="flex  flex1 ">
                                        <span class="van-multi-ellipsis--l2 flex1" style="line-height: 28px;" >
                                            {{ item.title }}
                                        </span>
                                        <img v-if="item.coverPic" :src="item.coverPic" style="width: 100px;height: 60px;" alt="">
                                    </div>
                                    <div class="flex flex-end flex-center gray m-top10 font-size13">
                                        <div class="flex">
                                            <div class="flex flex-center m-right26" v-if="item.tagId && tagList">{{filterTagId(item.tagId)}}</div>
                                            <div class="flex flex-center"><img src="@/assets/images/icons/support.png"
                                                    alt="" class="img_16 m-right7"><span>{{ item.likes }}</span>
                                            </div>
                                        </div>
                                        <div class="flex1 text-align-right">{{item.releaseTime}}</div>
                                    </div>
                                </div>
                            </div>
                            <div v-else class="no-data">
                                    暂无数据~
                            </div>
                        </van-tab>
                    </van-tabs>
                </div>
            </div>
        </div>
        <register-dialog v-if="showRegister" @close="showRegister = false"></register-dialog>
    </div>
</template>

<script>
import registerDialog from '@/components/registerDialog';
import { communityActivity, icEventOldDiscuss, advertisingTag, communityPublicity,handelClicsupport } from '@/api/home';
export default {
    data() {
        return {
            searchKey: null,//搜索栏
            tabList: [
                {
                    imgSrc: require('@/assets/images/nav/1.png'),
                    title: '社区讯息',
                    path: 'comMessages'
                },
                {
                    imgSrc: require('@/assets/images/nav/2.png'),
                    title: '社区活动',
                    path: 'activity'
                },
                {
                    imgSrc: require('@/assets/images/nav/3.png'),
                    title: '居民议事',
                    path: 'discussion'
                },
                {
                    imgSrc: require('@/assets/images/nav/4.png'),
                    title: '满意度测评',
                    path: 'notice'
                },
                {
                    imgSrc: require('@/assets/images/nav/5.png'),
                    title: '可享服务',
                    path: 'Enjoyableservices'
                }
            ],
            activityList: [],
            eventList: [],
            showRegister: false,
            tagList: [],
            tagActive: 'new',
            tagId: null,
            PublicityList:[]
        };
    },
    created() {
        console.log(this.$store.state.app);
        this.agencyId = this.$store.state.app.agencyId;
        this.userId = this.$store.state.app.userInfo.id;
        this.communityActivity()//获取轮播图与活动列表 
        this.icEventOldDiscuss()//获取居民议事列表
        this.advertisingTag()//获取社区讯息菜单
        this.communityPublicity()//获取讯息列表
    },
    methods: {
        async handelClicopposeNum(data){
            let parm = {
                eventId:data,
                agencyId: this.agencyId,
                userId: this.userId,
                opinionFlag:1
            }
            console.log(parm);
            let res = await handelClicsupport(parm)
            
            this.icEventOldDiscuss()
        
        },
        async handelClicsupport1(data){
            let parm = {
                eventId:data,
                agencyId: this.agencyId,
                userId: this.userId,
                opinionFlag:0
            }
            console.log(parm);
            let res = await handelClicsupport(parm)
            this.icEventOldDiscuss()
        
        },
        async communityActivity() {
            let parm = {
                pageSize: 10,
                pageNo: 1,
                agencyId: this.agencyId,
                activityName: "",
                status: "",
                typeId: "",
                startTime: "",
                endTime: "",
                address: "",
                assistingParty: ""
            }
            let res = await communityActivity(parm)
            if (res) {
                this.activityList = res.list.slice(0, 2);
            }
        },
        async icEventOldDiscuss() {
            let parm = {
                pageSize: 10,
                pageNo: 1,
                agencyId: null,
                icEventId: null
            }
            let res = await icEventOldDiscuss(parm)
            if (res) {
                this.eventList = res.list.slice(0, 2)
            }
        },
        async advertisingTag() {
            let parm = {
                pageSize: 10,
                pageNo: 1,
                status: 0,
                tagName: null
            }
            let res = await advertisingTag(parm)
            if (res) {
                this.tagList = res.list;
                this.tagList.unshift({ tagName: '最新', id: 'new' })
            }
        },
        async communityPublicity() {
            let parm = {
                pageSize: 10,
                pageNo: 1,
                title: '',
                tagId: this.tagId,
                startTime: '',
                endTime: '',
                agencyId: this.agencyId
            }
            let res = await communityPublicity(parm)
            if (res) {
                this.PublicityList = res.list.slice(0, 2)
            }
        },
        handelChangeTags(val,title){
            if(val !== 0){
                this.tagId = this.tagList[val].id;
            }else{
                this.tagId = '';
            }
            this.communityPublicity()
        },
        filterTagId(tagId){
            return this.tagList.filter(item=>item.id === tagId)[0].tagName || '--';
        },
        handelClickJump(path) {
            if (path === 'event' || path === 'service' || path === 'activity') {
                if (this.$store.state.app.userInfo.mobile) {
                    this.$router.push({ path: `/${path}` });
                } else {
                    this.showRegister = true;
                }
            } else {
                this.$router.push({ path: `/${path}` })
                console.log("1111" + path);
            }
        },
        
    },
    components: { registerDialog },
    computed: {},
    watch: {},
}
</script>

<style lang='less' scoped>
@import './index';

:deep(.van-field__control) {
    font-size: 13px;
}
</style>