su_nan_guan_wang/src/views/services/activities/index.vue

<template>
    <div style="background: #f0f0f0;padding-bottom:50px">
        <div class="banner">
            <img src="~@/assets/images/yxfw.jpg" alt="">
        </div>
        <div class="bread">
            <div>
                <span>当前位置:首页-园区活动</span>
                <div>
                    <ul class="area-nav">
                        <li><router-link :to="{path: '/service/characteristic'}">服务特色</router-link></li>
                        <li><router-link :to="{path: '/service/periphery'}">园区周边</router-link></li>
                        <li class="tabs"><router-link :to="{path: '/service/activities'}">园区活动</router-link></li>
                        <li><router-link :to="{path: '/service/educate'}">园区培训</router-link></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="smart-device">
            <div class="smart-title">
                <span><span>园区活动</span>PARK AVTIVITIES</span>
            </div>
            <div class="smart-device-content">
                <div class="nav-company">
                    <div>
                        <ul>
                          <li v-for="item in activeType" :class="active===item.value?'active':''" @click="changeType(item.value)">
                            <span>{{item.label}}</span>
                          </li>
<!--                            <li :class="active==1?'active':''" @click="changeType('1')"><span>全部</span></li>-->
<!--                            <li :class="active==2?'active':''" @click="changeType('2')"><span>培训</span></li>-->
<!--                            <li :class="active==3?'active':''" @click="changeType('3')"><span>私募</span></li>-->
<!--                            <li :class="active==4?'active':''" @click="changeType('4')"><span>法务</span></li>-->
<!--                            <li :class="active==5?'active':''" @click="changeType('5')"><span>财税</span></li>-->
<!--                            <li :class="active==6?'active':''" @click="changeType('6')"><span>培训</span></li>-->
                        </ul>
                    </div>
                </div>
                <ul class="company-list">
                    <li v-for="(item,index) in zsList" :key="index" @click="detail(item.id)">
                        <div class="wrap-device-detail">
                            <div class="c-logo">
<!--                                <img :src="require('../../../assets/images/'+item.img)" alt="">-->
                                <img :src="'https://smartpark.idea-sf.com'+item.img" alt="">
                            </div>
                            <div class="wrap-content">
                                <div class="c-content">
                                    <span>{{item.createTime}}</span>
                                    <h3>{{item.name}}</h3>
                                </div>
                                <div class="detail-btn">
                                    <div class="a-status">
                                        <span v-if="item.status==2" class="over">已结束</span>
                                        <span v-else class="loading">报名中</span>
                                        <span v-if="item.status==2" class="over">活动风采</span>
                                    </div>
                                    <div class="a-option">
                                        <span>参与人数:{{item.num}}</span>
                                        <span>查看详情</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="paginationo-box">
                    <van-pagination v-model="search.pageNum" :total-items="total" :show-page-size="10" @change="handleCurrentChange">
                        <template #prev-text>
                            <van-icon name="arrow-left" />
                        </template>
                        <template #next-text>
                            <van-icon name="arrow" />
                        </template>
                        <template #page="{ text }">{{ text }}</template>
                    </van-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {websiteActivityPage} from "@/service/api_service";
import Base from '@/views/base/base'
import BaseData from '@/views/base/baseData'
    export default {
      mixins: [Base, BaseData],
        data () {
            return {
                dc_key: ['activityType'],
                active:'',
                currentPage:1,
                total:0,
                zsList:[
                    // {
                    //     img:'n1.png',
                    //     name:'互联网私募如何入门',
                    //     eventIndex:1,
                    //     createTime:'2012-12-12',
                    //     num:1,
                    //     status:1,
                    //     detail:'互联网私募如何入门互联网私募如何入门互联网私募如何入门互联网私募如何入门互联网私募如何入门互联网私募如何入门互联网私募如何入门互联网私募如何入门互联网私募如何入门互联网私募如何入门互联网私募如何入门互联网私募如何入门互联网私募如何入门互联网私募如何入门互联网私募如何入门互联网私募如何入门'
                    // },
                ],
              activeType:[],
              search:{
                  pageSize:10,
                  pageNum:1,
                  publishStatus:'2'
              }
            }
        },
        mounted() {
          this.initDict(this.dc_key,true).then((res) => {
            this.activeType =  this.dc_data.activityType
            this.getData()
          })
            document.documentElement.scrollTop = document.body.scrollTop =0; //回到顶部
        },
        methods: {
          changeType(active){
            this.search.pageNum = 1
            this.active=active
            this.getData()
          },
          handleCurrentChange: function(val) {
            this.search.pageNum = val
            this.getData()
          },
          getData(){
            if(this.active===0){
              this.search.trainType=''
            }else{
              this.search.activityType=this.active
            }
            websiteActivityPage(this.search).then((res)=>{
              if(res.rows){
                this.total = res.total
                this.zsList = []
                res.rows.forEach(item=>{
                  let url = ''
                  if(item.activityAnnex&&item.activityAnnex.length>2){
                    const annex = this.$common.castEval(item.activityAnnex)
                    url = annex[0].url
                  }
                  const i = {
                        id:item.id,
                        img:this.$common.replaceWxDownload(url),
                        name:item.activityName,
                        eventIndex:item.registrationStatus,
                        createTime:this.$common.transServDate(item.publishDate),
                        num:item.partakeNumber,
                        status:item.registrationStatus,
                        detail:''
                  }
                  this.zsList.push(i)
                })
              }
            })
          },
            detail(index){
              this.$router.push({path:'/service/detail?id='+index})
            }
        },
    };
</script>

<style scoped>
    .banner img{
        width: 100% !important;
    }
    @media screen and (min-width: 1000px){
        .bread{
            background: #fff;
            position: relative;
        }
        .bread>div{
            width: 1200px;
            margin: 0 auto;
            text-align: left;
            padding: 0.8rem 0;
            font-size: 1rem;
            position: relative;
        }
        .area-nav{
            position:absolute;
            right: 0;
            top: 0.8rem;
            width: 40%;
            text-align: right;
        }
        .area-nav{
            display: flex;
            justify-content: center;
            flex-wrap: nowrap;
        }
        .area-nav li{
            flex: 1;
            text-align: center;
            border-bottom: 2px solid #f0f0f0;
            padding-bottom:0.7rem;
        }
        .area-nav a{
            color: #333;
        }
        .smart-title{
            margin-top:3rem;
        }
        .smart-device{
            width: 1200px;
            margin: 0 auto;
            text-align: left;
            font-size: 1rem;
        }
        .smart-device span span{
            font-size: 2rem;
            display: inline-block;
            position: relative;
            padding-right: 1rem;
            margin-right: 1rem;
            font-weight: 900;
        }
        .smart-device span span:after{
            content: '';
            width: 1px;
            height: 15px;
            background: #666;
            position: absolute;
            right: 0;
            bottom: 7px;
        }
        .nav-company{
            margin: 3rem 0;
        }
        .nav-company>div{
            width: 97%;
            margin: 0 auto;
            background: #fff;
            padding: 1rem 0;
        }
        .nav-company ul{
            display: flex;
            width: 80%;
            margin: 0 auto;
            justify-content: center;
            flex-wrap: nowrap;
        }
        .nav-company ul li{
            width: 6rem;
            text-align: center;
            cursor: pointer;
        }
        .nav-company ul li span{
            width: 80%;
            margin: 0 auto;
            display: inline-block;
            text-align: center;
            color: #333;
        }
        .wrap-device-detail{
            background: #fff;
            width: 90%;
            margin: 0 auto;
            position: relative;
            padding: 1rem 0;
            overflow: hidden;
        }
        .smart-device-content .company-list{

        }
        .smart-device-content .company-list li{
            margin-bottom: 2rem;
        }
        .c-logo{
            float: left;
            text-align: center;
            width: 30%;
        }
        .c-logo img{
            width: 90%;
            height:9rem;

        }
        .wrap-content{
            float: left;
            width: 70%;
        }
        .c-content,.detail-btn{
            width: 90%;
            margin: 1rem auto;
            overflow: hidden;
        }
        .c-content span{
            color: rgba(75, 175, 227, 1);
        }
        .c-content h3{
            font-size: 1rem;
            margin: 1rem 0;
        }
        .c-content p{
            font-size: 0.8rem;
            line-height: 1.6rem;
            height: 3rem;
            overflow: hidden;
            margin: 1rem 0;
        }
        .detail-btn{
            margin-bottom: 1rem;
        }
        .detail-btn .a-status{
            float: left;
        }
        .detail-btn .a-option{
            float: right;
        }
        .detail-btn span{
            display: inline-block;
            padding: 0 1rem;
            margin-right: 10px;
            color: #fff;
        }
        .a-status .over{
            background: #666;
        }
        .a-status .loading{
            background: #FF6A00;
        }
        .a-option span{
            color: #666;
        }
        .a-option span:nth-child(2){
            display: inline-block;
            text-align: center;
            background: rgba(75, 175, 227, 1);
            color: #fff;
        }
        .active{
            background: rgba(75, 175, 227, 1);
        }
        .active span{
            color: #fff!important;
        }
        .tabs{
            border-bottom:2px solid rgba(75, 175, 227, 1)!important;
        }
        .paginationo-box{
            width: 20%;
            margin: 0 auto;
        }
    }
    @media screen and (max-width: 1000px){
        .zc-content{
            display: none;
        }
        .banner{
            display: none;
        }
        .bread{
            display: none;
        }
        .smart-title{
            margin-top:2rem;
        }
        .smart-device{
            width: 90%;
            margin: 0 auto;
            text-align: left;
            font-size: 1rem;
            overflow: hidden;
        }
        .smart-device span span{
            font-size: 1.5rem;
            display: inline-block;
            position: relative;
            padding-right: 1rem;
            margin-right: 1rem;
            font-weight: 900;
        }
        .smart-device span span:after{
            content: '';
            width: 1px;
            height: 15px;
            background: #666;
            position: absolute;
            right: 0;
            bottom: 7px;
        }
        .nav-company{
            margin: 3rem 0;
            box-shadow: 10px 10px 10px #dedede;
        }
        .nav-company>div{
            width: 100%;
            margin: 0 auto;
            background: #fff;
            padding: 1rem 0;
        }
        .nav-company ul{
            overflow: hidden;
            width: 80%;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }
        .nav-company ul li{
            width: 5rem;
            overflow: hidden;
            text-align: center;
            cursor: pointer;
            margin-top: 1rem;
        }
        .nav-company ul li span{
            width: 80%;
            margin: 0 auto;
            display: inline-block;
            text-align: center;
            border: 1px solid rgba(75, 175, 227, 1);
            color: rgba(75, 175, 227, 1);
            padding: 0 4px;
        }
        .wrap-device-detail{
            background: #fff;
            width: 90%;
            margin: 0 auto;
            position: relative;
            padding-top: 1rem;
            overflow: hidden;
        }
        .smart-device-content .company-list{

        }
        .smart-device-content .company-list li{
            margin-bottom: 2rem;
        }
        .c-logo{
            width: 90%;
            margin: 0 auto;
        }
        .c-logo img{
          width: 100%;
          height:9rem;

        }
        .wrap-content{
            width: 90%;
            margin: 0 auto;
        }
        .c-content,.detail-btn{
            width: 98%;
            margin: 0 auto;
            overflow: hidden;
        }
        .c-content span{
            color: rgba(75, 175, 227, 1);
            margin: 10px 0;
            display: inline-block;
            /*display: none;*/
        }
        .c-content h3{
            font-size: 1rem;
            margin-bottom: 0.6rem;
        }
        .c-content p{
            font-size: 0.8rem;
            line-height: 1rem;
            height: 2rem;
            overflow: hidden;
            margin: 0.5rem 0;
        }
        .detail-btn{
            margin-bottom: 0.5rem;
        }
        .detail-btn>div{
            margin-bottom: 0.6rem;
            overflow: hidden;
        }
        .detail-btn .a-status span{
            margin-right: 1rem;
        }
        .detail-btn .a-option span:first-child{
            text-align: left;
            float: left;
            padding: 0;
        }
        .detail-btn .a-option span:last-child{
            text-align: center;
            float: right;
        }
        .detail-btn span{
            display: inline-block;
            padding: 0 1rem;
            font-size: 0.8rem;
            color: #fff;
        }
        .a-status .over{
            background: #666;
        }
        .a-status .loading{
            background: #FF6A00;
        }
        .a-option span{
            color: #666;
        }
        .a-option span:nth-child(2){
            display: inline-block;
            text-align: center;
            background: rgba(75, 175, 227, 1);
            color: #fff;
        }
        .active{
            background: rgba(75, 175, 227, 1);
        }
        .active span{
            color: #fff!important;
        }
    }
    .paginationo-box /deep/ .van-pagination__item--active{
        background: rgba(75, 175, 227, 1)!important;
        color: #fff!important;
    }
    .paginationo-box /deep/ .van-pagination__item{
        color: #333;
    }
</style>