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/yqhd.png" alt="">
    </div>
    <div class="bread">
      <div>
        <span>当前位置:首页-<span style="color: rgba(75, 175, 227, 1)">园区活动</span></span>
        <div>
          <ul class="area-nav">
            <li><router-link :to="{path: '/service/characteristic'}">资源发布</router-link></li>
<!--            <li><router-link :to="{path: '/zhaoshang/list'}">政策服务</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="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.styleStatus==1" 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,
                            styleStatus: item.styleStatus,
                            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>