dev/dcp-web-gate/src_old/views/cooperationExchange/CooperationExchange.vue

<template>
    <div>

          <div class="autoBox box cool">
             <div class="crumbs">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: 'home' }">{{$t('common.Home')}}</el-breadcrumb-item>
                    <el-breadcrumb-item>{{$t('common.Cooperation&Communication')}}</el-breadcrumb-item>
                   <!-- <el-breadcrumb-item>{{$t('common.MemberActivities')}}</el-breadcrumb-item>-->
                </el-breadcrumb>
             </div>
           <div style="margin-top: 20px;">
            <el-carousel  interval=5000 indicator-position="outside">
                <el-carousel-item v-for="(item,index) in initList" :key="'init'+index" v-if="index < 5">
                  <div>
                      <img :src="'api/fileextend/pub/' + item.activityLogo + '?custom=840_350'" alt="" style="width: 100%;height: 350px;">
                  </div>

                  <div class="activity"
                    @click="toView('cooperationExchangeListDetails',item.baseActivityEntityId)">
                      <div :style="$i18n.locale=='zh'?'margin-top: 100px;width: 100%;':'margin-top: 70px;width: 100%;'">
                          <div style="width: 300px;line-height: 25px;margin-left: 50px;
                          font-weight: 700;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                            {{item.activityName}}
                          </div>
                        <div style="width: 100%;line-height: 30px;font-size: 14px;line-height:30px;">
                            <span style="margin-left: 50px;margin-right: 15px;">
                                {{$t('common.place')}}： {{item.activityCity}}
                            </span>
                            <span :style="$i18n.locale=='zh'?'':'display:block;margin-left: 50px;line-height:30px;'">
                                {{$t('common.line')}}： {{formatDate(item.activityStartTime)}}
                            </span>
                            <div class="border_box plate"  style="width: 80%;font-size: 14px;max-height: 105px;
                            line-height: 25px;margin-left: 40px;
                            color: #666; -webkit-box-orient: vertical;position:relative;line-height:1.4em;overflow: hidden;height:5.6em">
                                {{item.activityIntroduce}}
                        </div>
                        <!-- <div style="width: 80%;font-size: 14px;height: 40px;margin-left: 50px;color: #666;" v-if = "item.activityStatusDict=='1'" >
                            {{$t('common.Existing')}}
                            {{item.activityWonderfulReviewVideoIntroduce?item.activityWonderfulReviewVideoIntroduce:0}}
                            {{$t('common.UnitRegistration')}}
                        </div> -->
                            <!-- <div style="width: 80%;font-size: 14px;height: 40px;margin-left: 50px;color: #666;">
                                <el-button type="success" round>报名中</el-button>
                             </div> -->
                        </div>
                      </div>
                  </div>
                </el-carousel-item>
              </el-carousel>
           </div>
            <div style="width: 100%;height: 35px;margin-top: 20px;">
                <div style="float: left;">
                    <span v-for="(item,index) in screen" :class="i==index?'screen2 cursor':'screen1 cursor'"
                     @click="screens(item,index)">
                     {{$t(item.lable)}}
                    </span>
                </div>
                <div style="float: right;margin-right: 20px;transform: translateY(-10PX);">
                    <el-select v-model="Area" placeholder="请选择区域" style="margin-right: 20px;">
                        <el-option
                          v-for="item in options"
                          :key="'options'+index"
                          :label="item.label"
                          :value="item.value"
                          >
                        </el-option>
                      </el-select>
                      <el-select v-model="value2" placeholder="请选择分类">
                        <el-option
                          v-for="item in options2"
                          :key="'options2'+index"
                          :label="$t(item.label)"
                          :value="item.value">
                        </el-option>
                      </el-select>
                </div>
            </div>
            <div  style="width: 100%;margin-top: 20px;">
                <CooperationExchangeItems :init="initDatas"/>

                <!-- <CooperationExchangeList/> -->
            </div>
            <div style="width: 100%;position: relative;height: 100px;">
                <el-pagination
                  style="height: 80px;position: absolute;left: 50%;top: 100px;transform: translate(-50%,-50%);"
                  background
                  layout="prev, pager, next"
                  page-size=10
                  @current-change="handleCurrentChange"
                  :total=initData.length>
                  </el-pagination>
              </div>
              <div class="autoBox">
                <div style="color: #666;font-weight: 700;margin-left: 20px;">{{$t('common.PastReview')}}</div>
                <div class="recommend">
                    <ul>
                        <li class="cursor"  v-for="(item,index) in recommend" :key="'recom' + index" @click="toView('cooperationExchangeListDetails',item.baseActivityEntityId)">
                            <img :src="'api/fileextend/pub/' + item.activityLogo + '?custom=212_150'" alt="" style="width: 100%;height: 150px;">
                            <div style="color: rgba(51,51,51,1);font-weight: 700;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{item.activityName}}</div>
<!--                            <div style="color: #bcbcbc;font-size: 14px;">{{item.num?item.num:0}}人浏览</div>-->
                        </li>
                    </ul>
                </div>
            </div>
            </div>

          </div>
    </div>
  </template>

<script>
import HeaderItem from "@/components/headerItem";
import tabers from "@/components/taber";
import footers from "@/components/footers";
import Screen from "@/components/screen";
import CooperationExchangeItems from "@/views/cooperationExchange/CooperationExchangeItem";
import CooperationExchangeList from "@/views/cooperationExchange/CooperationExchangeList";
import { activityInfos } from "@/api/cooperation/baseCooperationUnit";
import { getDicts } from "@/api/dict";
export default {
  name: "cooperationExchange",
  components: {
    tabers,
    HeaderItem,
    footers,
    Screen,
    CooperationExchangeItems,
    CooperationExchangeList,
  },
  data() {
    return {
      i: 0,
      locale: "",
      Area: null,
      value2: null,
      type: null,
      initData: [],
      total: 0,
      options: [],
      initDatas: [],
      options2: [
        {
          label: "common.All",
          value: null,
        },
        {
          label: "common.Notstarted",
          value: 0,
        },
        {
          label: "common.Registrationinprogress",
          value: 1,
        },
        {
          label: "common.Inaction",
          value: 2,
        },
        {
          label: "common.Finished",
          value: 3,
        },
      ],
      screen: [
        {
          value: null,
          lable: "common.All",
        },
        {
          value: "0",
          lable: "common.MemberActivities",
        },
        {
          value: "1",
          lable: "common.AllianceActivities",
        },
        {
          value: "2",
          lable: "common.CooperationActivities",
        },
      ],

      recommend: [],
    };
  },
  watch: {
    Area() {
      this.getList(this.type, this.Area, this.value2);
    },
    value2() {
      this.getList(this.type, this.Area, this.value2);
    },
    "$i18n.locale"() {
      this.getList(this.type, this.activityArea, this.value2, 1);
      this.getData();
      this.getAllData();
      this.getactivityStatusDict();
    },
    initList() {
      this.$forceUpdate();
    },
  },
  mounted() {
    //    this.$store.commit('modify', 'cooperationExchange');
    //    window.localStorage.setItem('router', 'cooperationExchange');
    this.locale = this.$i18n.locale;
    console.log(
      this.$i18n.locale,
      "this.$i18n.localethis.$i18n.localethis.$i18n.locale"
    );
    this.getList();
    this.getData(); // 字典值
    this.getAllData(); // 获取全部数据
    this.getactivityStatusDict(); // 往期回顾
  },
  methods: {
    getData() {
      if (this.$i18n.locale == "zh") {
        getDicts("CONTINENT_CODE_DICT").then((res) => {
          this.options = res.data[0];
          this.options.unshift({
            label: "全部区域",
            value: null,
          });
        });
      } else if (this.$i18n.locale == "en") {
        getDicts("CONTINENT_CODE_DICT_EN").then((res) => {
          this.options = res.data[0];
          this.options.unshift({
            label: "All",
            value: null,
          });
        });
      }
    },
    getactivityStatusDict() {
      let list = {
        activityStatusDict: 3,
        language: this.$i18n.locale.toUpperCase(),
        pageNo: 1,
        pageSize: 5,
      };
      activityInfos(list).then((res) => {
        if (JSON.stringify(res.data) !== "{}") {
          this.recommend = res.data.activityInfos;
          this.$forceUpdate();
        } else {
          this.recommend = [];
        }
      });
    },
    showfunction() {
      console.log("safsdafsda");
    },
    getAllData() {
      this.initList = [];
      this.initDatas = [];
      let list = {
        language: this.$i18n.locale.toUpperCase(),
      };

      activityInfos(list).then((res) => {
        var oldList = [];
        oldList = res.data ? res.data.activityInfos : [];
        oldList.forEach((element) => {
          if ("y" == element.logoFlag) {
            this.initList.push(element);
          }
        });
        console.log(this.initList);
        this.initDatas = res.data ? res.data.activityInfos : [];
        this.$forceUpdate();
      });
    },
    getList(type, activityArea, activityStatusDict, pageNo) {
      let list = {
        pageSize: 9,
        pageNo: pageNo ? pageNo : 1,
        language: this.$i18n.locale.toUpperCase(),
        activityTypeDict: type ? type : "", // 类型
        activityArea: activityArea ? activityArea : "", // 大洲
        activityStatusDict: this.value2, // 活动类型
      };
      activityInfos(list).then((res) => {
        console.log(res, "___________----------------------");
        if (JSON.stringify(res.data) !== "{}") {
          this.initData = res.data.activityInfos;
          this.initDatas = res.data.activityInfos;
        } else {
          this.initData = [];
          this.initDatas = [];
        }
      });
    },
    handleCurrentChange(val) {
      this.getList(this.type, this.activityArea, "0", val);
      console.log(val);
    },
    getIconUrl(url) {
      return require("@/assets/img/cooperationExchange/" + url);
    },
    toView(router, json) {
        let language1 =window.localStorage.getItem("locale") 
      this.$store.commit("modify", router);
      window.localStorage.setItem("router", router);
      const { href } = this.$router.resolve({
        name: router,
        query: {
          key: json,
          language: language1,
        },
      });
      window.open(href, "_blank");
    },
    screenBack(data) {
      console.log(data, "screenBackscreenBackscreenBackscreenBack");
    },
    screens(item, index) {
      this.i = index;
      this.type = item.value;
      this.getList(item.value);
    },
  },
};
</script>

  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
.box {
  margin-top: 10px;
  background: #fff;
  /* height: 500px; */
  padding: 20px 0;
}
.crumbs {
  margin-left: 20px;
}
body {
  margin: 0;
}
.el-carousel__item div:nth-child(1) {
  font-size: 18px;
  margin: 0;
  float: left;
  width: 70%;
}
.el-carousel__item div:nth-child(2) {
  font-size: 18px;
  margin: 0;
  float: right;
  width: 30%;
}
.el-carousel__item:nth-child(n) {
  background-color: #ecedef;
  color: #000;
}
.cool >>> .el-carousel__container {
  height: 350px;
}
.screen1 {
  padding: 10px 18px;
  font-size: 14px;
  background-color: #e8e8e8;
}
.screen2 {
  padding: 10px 18px;
  font-size: 14px;
  background-color: #12559c;
  color: #fff;
}
.initData li {
  width: 49%;
  float: left;
}
.initData li:nth-child(2n-1) {
  margin-right: 15px;
}
.recommend {
  margin-top: 15px;
  margin-left: 10px;
}
.recommend li {
  display: inline-block;
  width: 212px;
  /* height: 130px; */
  text-align: center;
  margin-right: 15px;
}
.activity {
  height: 100%;
  background: url(../../assets/img/introductionCooperation/detailsbg.png)
    no-repeat;
}
.border_box:hover {
  -webkit-transform: translateY(-3px);
  -ms-transform: translateY(-3px);
  transform: translateY(-3px);
  -webkit-box-shadow: 0 0 6px #999;
  box-shadow: 0 0 6px #999;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
</style>