dev/dcp-web-gate/src_old/views/conferenceServices/ConferenceList.vue

<template>
  <div class="autoBox container-box">
    <div class="bread-crumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: 'home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>会议服务</el-breadcrumb-item>
        <el-breadcrumb-item>会议列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="content-box">
      <div class="input-box">
        <el-input placeholder="请输入会议关键词" suffix-icon="el-icon-search" v-model="inputKey" style="width: 300px; border-radius: 20px;"></el-input>
      </div>
      <ul class="sort-type-list">
        <li
          :class="{active: currentType== 'default'}"
          @click="sortTypeChange('default')"
        >默认排序</li>
        <li
          :class="{active: currentType== 'year'}"
          class="sort-by-year"
          @click="sortTypeChange('year')"
        >
          <el-date-picker
            style="width: 120px;"
            v-model="year"
            type="year"
            @change="changeYear"
            placeholder="选择年份">
          </el-date-picker>
        </li>
      </ul>
      <ul class="conference-list" v-if="conferenceData.length">
        <li v-for="(item, i) in conferenceData" :key="i">
            <img :src="'./api/file/pub/'+item.meetingPicUrl" alt="" width="300" height="220">
            <div>
                <p class="title">{{lang=='en'?item.meetingNameEn: item.meetingName}}</p>
                <p>会议时间：{{formatDate(item.meetingStartDate)}} - {{formatDate(item.meetingEndDate)}}</p>
                <p class="network" v-if="item.meetingMainFormDict == '02'"><i class="el-icon-mic"></i> 网络会议</p>
                <p class="place" v-else><i class="el-icon-location-outline"></i> {{lang=='en'?item.meetingPlaceEn: item.meetingPlace}}</p>
                <el-button type="danger" size="small" @click="toView('MeetingApplyForm',item.id)" class="sign-up" v-if="item.meetingIsEnroll != '02' && !isMeetingOver(item.meetingEndDate)">点击报名</el-button>
                <span class="more" @click="isMeetingOver(item.meetingEndDate)? toView('ConferenceResult', item.id): toView('ConferenceDetail', item.id)">了解更多>></span>
                <div class="status status3" v-if="isMeetingOver(item.meetingEndDate)">已结束</div>
                <div v-else>
                  <div class="status status1" v-if="item.meetingIsEnroll == '02'">未开始</div>
                  <div class="status status2" v-else>进行中</div>
                </div>
            </div>
        </li>
      </ul>
      <div class="pagination-con">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="100">
           </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getConfrences } from "@/api/meeting/meetingOutInfo";
export default {
  data() {
    return {
      currentType: "default",
      inputKey: "",
      conferenceData: [],
      year: '',
      lang: ''
    };
  },
  created(){
    this.$bus.on('setLang', lang=>{
      this.lang = lang;
    })
  },
  mounted(){
    if(window.localStorage.getItem("locale")){
      this.lang = window.localStorage.getItem("locale");
    }else{
      this.lang = 'zh'
    }
    this.initData();
  },
  methods: {
    toView(router, json) {
      this.$router.push({ name: router, params: { key: json } });
    },
    changeYear(y){
      this.initData(y.getFullYear())
    },
    initData(year){
      getConfrences(year).then(res=>{
        this.conferenceData = res.data.meetingBasicInfos;
      })
    },
    sortTypeChange(type) {
      
    },
    // 时间戳转时间格式
    formatDate(t) {
      var original = new Date(t);
      var year=original.getFullYear();  //取得4位数的年份
      var month=original.getMonth()+1;  //取得日期中的月份，其中0表示1月，11表示12月
      var date=original.getDate();      //返回日期月份中的天数（1到31）
      var hour=original.getHours();     //返回日期中的小时数（0到23）
      var minute=original.getMinutes(); //返回日期中的分钟数（0到59）
      var second=original.getSeconds(); //返回日期中的秒数（0到59）
      // return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second; 
      return year+"/"+month+"/"+date; 
    },
    // 判断会议是否结束
    isMeetingOver(t){
      var ct = Date.parse(new Date());
      if(ct-t > 0){
        return true;
      }else{
        return false;
      }
    },
  },
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}
.input-box{
    position: absolute;
    top: 0px;
    right: 0px;
}
/deep/ .input-box .el-input__inner{
    border-radius: 20px;
}
/deep/ .sort-by-year .el-input__inner{
    border-radius: 0;
    background-color: transparent;
    cursor: pointer;
}
.container-box {
  margin: 10px auto;
  background: #fff;
  padding: 0 20px;
  min-height: calc( 100vh - 420px )
}
.bread-crumb {
  background: #fff;
  padding: 20px 0;
}
.content-box{
    position: relative;
}
.sort-type-list {
  border-bottom: 1px solid #2c558a;
}
.sort-type-list li {
  display: inline-block;
  width: 120px;
  text-align: center;
  height: 40px;
  line-height: 38px;
  background: #fff;
  font-weight: bold;
  cursor: pointer;
}
.sort-type-list li.active {
  background: #2c558a;
  color: #fff;
}
.conference-list li{
    display: flex;
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
    cursor: pointer;
}
.conference-list li:last-child{
    border: none;
}
.conference-list li .title{
    font-size: 18px;
    font-weight: bold;
    color: #678890;
}
.conference-list li > div{
    flex: 1;
    margin-left: 20px;
    position: relative;
}
.conference-list li > div .sign-up{
    position: absolute;
    bottom: 0;
    left: 0;
}
.conference-list li > div .more{
    position: absolute;
    bottom: 0;
    right: 0;
    font-style: italic;
    cursor: pointer;
}
.conference-list li > div .more:hover{
    color: #168dbf;
}
.conference-list li > div .status{
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 14px;
}
.status1{
    background: #ffb100;
}
.status2{
    background: #ff3b00;
}
.status3{
    background: #1e2021;
}
.pagination-con{
    padding: 30px 0;
    text-align: center;
}
</style>