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

<template>
    <div class="pages">
    <div class="content1">
        <div class="blueBg"></div>
        <div class="content">
            <div class="flex flex-end">
                <div class="flex flex-center2 white" >
                    <img src="@/assets/images/icons/home.png" class="img_17 m-right10" alt=""  @dblclick="$router.push('/selectAgency')">
                    <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 PublicityListImg">
                        <img :src="item.coverPic" alt="" @click="toDetail(item)"
                            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="messageText" />
                </div>
                <span class="gray notice_time">{{day}}</span>
                <span class="gray" @click="$router.push('/messages')">更多</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"  @click="handelClickSatis()">
                        <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,'tab')" :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"  @click="handelClickJump(`activityDetail`,item)">
                    <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.currentParticipants }}</span>/<span
                                    class="font-size14">{{ item.participants }}人</span>
                            </div>
                            <van-button type="info" size="small" round @click="handelClickJump(`activityDetail`,item)"
                                :disabled="disabledRecord(item)">{{recordFlag(item)?'已报名':'报名'}}</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" :key="index" @click="$router.push({ path: `/discusionDetail`,query: { eventId:item.eventId} })">
                    <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.stop="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.stop="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"  @click="$router.push({name:'communityPublicityDetail',query:{id:item.id}})">
                                    <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" @click.stop="communityPublicityGiveLike(item.id)"><img src="@/assets/images/icons/support.png"
                                                    alt="" class="img_16 m-right7"><span>{{ item.likes || 0}}</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" :registerFlag="registerFlag" :content="tipContent"></register-dialog>
    </div>
    </div>
</template>

<script>
import registerDialog from '@/components/registerDialog';
import { communityActivity, icEventOldDiscuss, advertisingTag, communityPublicity,handelClicsupport,communityPublicityGiveLike } from '@/api/home';
import { querystaffmessage } from '@/api/message';
import { inspRecord } from '@/api/satisfaction';

export default {
    data() {
        return {
            searchKey: null,//搜索栏
            tabList: [
                {
                    imgSrc: require('@/assets/images/nav/1.png'),
                    title: '社区讯息',
                    path: 'communityPublicity'
                },
                {
                    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: 'mySatisfaction'
                // },
                {
                    imgSrc: require('@/assets/images/nav/5.png'),
                    title: '可享服务',
                    path: 'Enjoyableservices'
                }
            ],
            activityList: [],
            eventList: [],
            showRegister: false,
            tagList: [],
            tagActive: 'new',
            tagId: null,
            PublicityList:[],
            PublicityListImg:[],
            messageText:'没有新的消息！',
            day:null,
            tipContent:null,
            registerFlag:null,
            pageSize: 5,
            pageNo: 1,
            list: {},
            questionnaireUrl:""
        };
    },
    created() {
        this.agencyId = this.$store.state.app.agencyId;
        this.userId = this.$store.state.app.userInfo.id;
        this.customerId = this.$store.state.app.userInfo.customerId;
        this.communityActivity()//获取轮播图与活动列表 
        this.icEventOldDiscuss()//获取居民议事列表
        this.advertisingTag()//获取社区讯息菜单
        this.communityPublicity()//获取讯息列表
        this.querystaffmessage()//获取消息提醒
        let date =  new Date()
        this.day = this.$dayjs(date).format('MM-DD');
        this.mounth = this.$dayjs(date).format('M');
        this.data=this
        this.inspRecord()
    },
    methods: {
        async inspRecord() {
            let parm = {
                pageSize:this.pageSize,
                pageNo:this.pageNo++,
                agencyId:this.agencyId
            }
            let res = await inspRecord(parm)
            if (res.code === 0) {
                this.loading = false;
                const now = new Date();
                this.month = now.getMonth() + 1;
                if(res.data.list.findIndex(item=>item.monthName == this.month) == -1){
                    this.currentMonth = true;
                }
                if (!res.data || res.data.list.length < this.pageSize) {
                    this.finished = true;
                }
                console.log(this.mounth);
              this.list= res.data.list.filter(item=>{              
                    console.log(item.monthName);
                    if(item.monthName == this.mounth){
                        return item
                    }
                })
                console.log(this.list);
                if(this.list[0]){

                    this.questionnaireUrl=this.list[0].questionnaireUrl
                console.log(this.questionnaireUrl);
                }
              
            }
        },
        async advertisingTag(){
            let res = await advertisingTag()
            if(res.code === 0){
                this.tagList = res.data
            }
        },
        toDetail(item){
            if(item.coverPic){
                this.$router.push({name:'communityPublicityDetail',query:{item:JSON.stringify(item)}})
            }
        },
        async querystaffmessage(){
            let parm = {
                agencyId: this.agencyId,
                app:'resi',
                userId: this.userId,
                pageSize:10,
                customerId:this.customerId,
                pageNo:1
            }
            let res = await querystaffmessage(parm)
            if(res.data.length>0){
                this.messageText = res.data.map(item=>item.messageContent).join('  ')
            }
        },
        async handelClicopposeNum(id){
            let parm = {
                eventId:id,
                agencyId: this.agencyId,
                userId: this.userId,
                opinionFlag:1
            }
            console.log(parm);
            let res = await handelClicsupport(parm)
            if(res.code === 0){
                this.icEventOldDiscuss()
            }
        },
        async communityPublicityGiveLike(id){
            let parm = {
                id,
                likes:1,
                transpond:0
            }
            let res = await communityPublicityGiveLike(parm)
            if(res.code === 0){
                this.communityPublicity()
            }
        },
        async handelClicsupport1(id){
            let parm = {
                eventId:id,
                agencyId: this.agencyId,
                userId: this.userId,
                opinionFlag:0
            }
            console.log(parm);
            let res = await handelClicsupport(parm)
            if(res.code === 0){
                this.icEventOldDiscuss()
            }
        },
        async communityActivity() {
            let parm = {
                pageSize: 10,
                pageNo: 1,
                agencyId: this.agencyId,
                activityName: "",
                status: "",
                typeId: "",
                startTime: "",
                endTime: "",
                address: "",
                assistingParty: "",
                online:1
            }
            let res = await communityActivity(parm)
            if (res.code === 0) {
                this.activityList = res.data.list.slice(0, 2);
            }
        },
        async icEventOldDiscuss() {
            let parm = {
                pageSize: 10,
                pageNo: 1,
                agencyId: null,
                icEventId: null
            }
            let res = await icEventOldDiscuss(parm)
            if (res.code === 0) {
                this.eventList = res.data.list.slice(0, 2)
            }
        },
        async advertisingTag() {
            let parm = {
                pageSize: 10,
                pageNo: 1,
                status: 1,
                tagName: null
            }
            let res = await advertisingTag(parm)
            if (res.code === 0) {
                this.tagList = res.data.list;
                this.tagList.unshift({ tagName: '最新', id: 'new' })
            }
        },
        async communityPublicity() {
            let parm = {
                pageSize: 10,
                pageNo: 1,
                title: '',
                tagId: this.tagId,
                startTime: '',
                endTime: '',
                agencyId: this.agencyId,
                status:1
            }
            let res = await communityPublicity(parm)
            if (res.code === 0) {
                this.PublicityList = res.data.list.slice(0, 2)
                this.PublicityListImg = res.data.list.filter((item)=>item.top === 1)
            }
        },
        handelChangeTags(val,title){
            if(val !== 0){
                this.tagId = this.tagList[val].id;
            }else{
                this.tagId = '';
            }
            this.communityPublicity()
        },
        filterTagId(tagId){
            if(this.tagList.filter(item=>item.id === tagId)[0]){
                return this.tagList.filter(item=>item.id === tagId)[0].tagName;
            }else{
                return '--';
            }
        },
        handelClickSatis(){
                if(this.questionnaireUrl){
                   window.open(this.questionnaireUrl)
                }
                else{
                    this.$toast("当前社区没有设置调查问卷")
                }
        },
        handelClickJump(path,item) {
            if (path === 'event' || path === 'Enjoyableservices') {
                if(path === 'event'){
                    if (this.$store.state.app.userInfo.mobile) {
                        this.$router.push({ path: `/${path}` });
                    } else {
                        this.tipContent = '请您先进行注册。'
                        this.showRegister = true;
                    }
                }
                if(path === 'Enjoyableservices'){
                    if (this.$store.state.app.userInfo.idNum) {
                        this.$router.push({ path: `/${path}` });
                    } else {
                        this.tipContent = '请您先进行实名认证。'
                        this.registerFlag = 'real';
                        this.showRegister = true;
                    }
                }
            } else if(item){
                this.$router.push({ path: `/${path}`,query:{id:item.id} })
            }else{
                this.$router.push({ path: `/${path}` })
            }
        },
        
    },
    components: { registerDialog },
    computed: {
        recordFlag(){
            return (item)=>{
                if(!item.recordList) return false
                return item.recordList.findIndex(itemC=>itemC.mobile === this.$store.state.app.userInfo.mobile) != -1
            }
        },
        disabledRecord() {
            return (item) => {
                if (!item.cutOffTime) return false
                let flag = new Date(item.cutOffTime.replace(/-/g, '/')).getTime() < Date.now() || item.currentParticipants >= item.participants;
                return flag || false
            }
        },
    },
    watch: {},
}
</script>

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

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