Xf-association/src/views/home/index.vue

<template>
  <div id="home">
    <el-carousel height="500px" loop>
      <el-carousel-item v-for="(item, index) in BannerList1" :key="index">
        <img
          @click="jumpUrl(item.JumpUrl)"
          style="width: 100%; height: 100%"
          :src="$methods.splitImgHost(item.ImageUrl)"
        />
      </el-carousel-item>
    </el-carousel>
    <!-- <div class="home_img">
      <img src="@/assets/images/banner.png" alt="" />
    </div> -->
    <div
      style="width: 1200px; background-color: #fff; padding: 28px"
      class="center_1200"
    >
      <h2 class="h2s">最新消息</h2>
      <ul class="uls">
        <li
          class="lis"
          v-for="(item, index) in tableData"
          :key="index"
          @click="jumpInfo(item)"
        >
          <div class="top">
            {{ item.Title }}
          </div>
          <div class="foot">
            <div class="left">
              {{ $methods.onlyFormaHao(item.CreateTime, false) }}
            </div>
            <div class="right">查看详情</div>
          </div>
        </li>
      </ul>
      <div class="novt_box">
        <el-carousel height="350px" style="width: 560px" class="carousel">
          <el-carousel-item v-for="(item, index) in BannerList2" :key="index">
            <img
              @click="jumpUrl(item.JumpUrl)"
              style="width: 100%; height: 100%"
              :src="$methods.splitImgHost(item.ImageUrl)"
              alt=""
            />
            <h3>
              <span>{{ item.Title }}</span
              ><span>{{ $methods.onlyFormaHao(item.CreateTime, false) }}</span>
            </h3>
          </el-carousel-item>
        </el-carousel>
        <el-tabs
          type="border-card"
          style="width: 560px; height: 350px"
          @tab-click="handleClick"
          v-model="activeName"
        >
          <el-tab-pane label="通知公告" class="tabBox" :lazy="true" name="d1">
            <ul>
              <el-empty
                :image-size="100"
                description="暂无数据"
                v-if="notList.length === 0"
              ></el-empty>
              <li
                class="li_list"
                v-for="(item, index) in notList"
                :key="index"
                @click="jumpInfo(item)"
              >
                <i>●</i>
                <div class="title_li">{{ item.Title }}</div>
                <div class="time_li">
                  {{ $methods.onlyFormaHao(item.NewsCreateTime, false) }}
                </div>
              </li>
            </ul>
            <div style="text-align: center" v-if="notList.length > 0">
              <el-pagination
                class="paginations"
                @current-change="handleCurrentChange"
                :current-page.sync="formData.pageindex"
                :page-size="formData.pagesize"
                layout="total, prev, pager, next"
                :total="total"
              >
              </el-pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane label="协会动态" class="tabBox" :lazy="true" name="d2">
            <ul>
              <el-empty
                :image-size="100"
                description="暂无数据"
                v-if="list1.length === 0"
              ></el-empty>
              <li
                class="li_list"
                v-for="(item, index) in list1"
                :key="index"
                @click="jumpInfo(item)"
              >
                <i>●</i>
                <div class="title_li">{{ item.Title }}</div>
                <div class="time_li">
                  {{ $methods.onlyFormaHao(item.NewsCreateTime, false) }}
                </div>
              </li>
            </ul>
            <div style="text-align: center" v-if="list1.length > 0">
              <el-pagination
                class="paginations"
                @current-change="handleCurrentChange1"
                :current-page.sync="formData1.pageindex"
                :page-size="formData1.pagesize"
                layout="total, prev, pager, next"
                :total="total1"
              >
              </el-pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane label="行业新闻" class="tabBox" :lazy="true" name="d3">
            <ul>
              <el-empty
                :image-size="100"
                description="暂无数据"
                v-if="list2.length === 0"
              ></el-empty>
              <li
                class="li_list"
                v-for="(item, index) in list2"
                :key="index"
                @click="jumpInfo(item)"
              >
                <i>●</i>
                <div class="title_li">{{ item.Title }}</div>
                <div class="time_li">
                  {{ $methods.onlyFormaHao(item.NewsCreateTime, false) }}
                </div>
              </li>
            </ul>
            <div style="text-align: center" v-if="list2.length > 0">
              <el-pagination
                class="paginations"
                @current-change="handleCurrentChange2"
                :current-page.sync="formData2.pageindex"
                :page-size="formData2.pagesize"
                layout="total, prev, pager, next"
                :total="total2"
              >
              </el-pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane label="政策法规" class="tabBox" :lazy="true" name="d4">
            <ul>
              <el-empty
                :image-size="100"
                description="暂无数据"
                v-if="list3.length === 0"
              ></el-empty>
              <li
                class="li_list"
                v-for="(item, index) in list3"
                :key="index"
                @click="jumpInfo(item)"
              >
                <i>●</i>
                <div class="title_li">{{ item.Title }}</div>
                <div class="time_li">
                  {{ $methods.onlyFormaHao(item.NewsCreateTime, false) }}
                </div>
              </li>
            </ul>
            <div style="text-align: center" v-if="list3.length > 0">
              <el-pagination
                class="paginations"
                @current-change="handleCurrentChange3"
                :current-page.sync="formData3.pageindex"
                :page-size="formData3.pagesize"
                layout="total, prev, pager, next"
                :total="total3"
              >
              </el-pagination>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="margin_28">
        <div
          class="small_box"
          v-for="(item, index) in smallBoxList"
          :key="index"
          @click="
            item.label === '入会申请'
              ? openJumpVip()
              : jumpPage({ label: item.label })
          "
        >
          <img :src="item.img" alt="" />
          <p>{{ item.label }}</p>
        </div>
      </div>

      <div class="vipBox">
        <div class="top">
          <span class="left">会员天地</span
          ><span class="right" @click="jumpPage({ label: '会员天地' })"
            >更多+</span
          >
        </div>
        <div class="flot_s">
          <div class="liOs" v-for="(item, index) in list4" :key="index">
            <img
              :src="$methods.splitImgHost(item.NewsImg)"
              @click="jumpInfo(item)"
            />
          </div>
        </div>
          <div style="text-align: center" v-if="list4.length > 0">
              <el-pagination
                class="paginations"
                @current-change="handleCurrentChange4"
                :current-page.sync="formData4.pageindex"
                :page-size="formData4.pagesize"
                layout="total, prev, pager, next"
                :total="total4"
              >
              </el-pagination>
            </div>
      </div>

      <div class="vipBox">
        <div class="top">
          <span class="left">优秀案例</span>
          <!-- <span class="right" @click="jumpPage({ label: '优秀案例' })"
            >更多+</span
          > -->
        </div>
        <el-empty
          :image-size="100"
          description="暂无数据"
          v-if="list5.length === 0"
        ></el-empty>
        <div class="swiperBox" v-else>
          <i
            v-if="list5.length > 4"
            class="el-icon-arrow-left left"
            @click="leftJump"
          ></i>
          <swiper
            ref="swiper"
            @swiper="onSwiper"
            @slideChange="onSlideChange"
            v-bind:options="swiperOptions"
          >
            <swiper-slide v-for="(item, index) in list5" :key="index">
              <div
                style="
                  width: 100%;
                  height: 170px;
                  display: flex;
                  align-items: center;
                "
              >
                <img
                  style="width: 100%; max-height: 170px"
                  :src="$methods.splitImgHost(item.NewsImg)"
                  alt=""
                />
              </div>
              <p class="p_text">
                {{ item.Title }}
              </p>
            </swiper-slide>
          </swiper>
          <i
            v-if="list5.length > 4"
            class="el-icon-arrow-right right"
            @click="rightJump"
          ></i>
        </div>
      </div>
    </div>
    <div class="center_1200" style="padding: 20px 0px">
      <el-divider content-position="center"
        ><span style="color: #2453af; font-size: 22px; font-weight: bold"
          >友情链接</span
        ></el-divider
      >
      <div style="text-align: center">
        <span
          class="float_link"
          v-for="(item, index) in lists"
          :key="index"
          @click="jumpWL(item)"
        >
          {{ item.Title }}
        </span>
      </div>
      <!-- <Scroller :lists="lists"></Scroller> -->
    </div>
    <membership ref="membership"></membership>
  </div>
</template>

<script>
import membership from "@/components/membership";
import "quill/dist/quill.core.css";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
import Scroller from "@/components/Scroller/index.vue";
export default {
  components: {
    Swiper,
    SwiperSlide,
    Scroller,
    membership,
  },
  data() {
    let self = this;
    return {
      smallBoxList: [
        {
          img: require("@/assets/images/icon_入会申请@2x.png"),
          label: "入会申请",
        },
        {
          img: require("@/assets/images/icon_专家智库@2x.png"),
          label: "专家智库",
        },
        {
          img: require("@/assets/images/icon_协会期刊@2x.png"),
          label: "协会期刊",
        },
        {
          img: require("@/assets/images/icon_鉴定评优@2x.png"),
          label: "鉴定评优",
        },
        {
          img: require("@/assets/images/icon_信用管理@2x.png"),
          label: "信用管理",
        },
        {
          img: require("@/assets/images/icon_行业统计@2x.png"),
          label: "行业统计",
        },
      ],
      swiperOptions: {
        slidesPerView: 4,
        spaceBetween: 20,
        loop: false,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false,
        },
        on: {
          click: function () {
            // 这里有坑，需要注意的是：this 指向的是 swpier 实例，而不是当前的 vue， 因此借助 vm，来调用 methods 里的方法
            // console.log(this); // -> Swiper
            // 当前活动块的索引，与activeIndex不同的是，在loop模式下不会将 复制的块 的数量计算在内。
            let initIndex =
              this.clickedIndex - this.activeIndex + this.realIndex;
            self.handleClickSlide(initIndex);
          },
        },
      },
      notList: [],
      total: 0,
      total1: 0,
      total2: 0,
      total3: 0,
      total4: 0,
      total5: 0,
      formData: {
        pagesize: 6, //每页内容条数
        pageindex: 1, //当前第几页
      },
      formData1: {
        pagesize: 5, //每页内容条数
        pageindex: 1, //当前第几页
      },
      formData2: {
        pagesize: 5, //每页内容条数
        pageindex: 1, //当前第几页
      },
      formData3: {
        pagesize: 5, //每页内容条数
        pageindex: 1, //当前第几页
      },
      formData4: {
        pagesize: 12, //每页内容条数
        pageindex: 1, //当前第几页
      },
      formData5: {
        pagesize: 99, //每页内容条数
        pageindex: 1, //当前第几页
      },
      lists: [], //友情链接
      list1: [], //协会动态列表
      list2: [], //行业新闻列表
      list3: [], //政策法规列表
      list4: [], //会员天地列表
      list5: [], //优秀案例列表
      BannerList1: [], //Banner1列表
      BannerList2: [], //Banner2列表
      tableData: [], //最新3条文章
      activeName: "d1",
    };
  },
  created() {
    this.getInit();
  },
  methods: {
    handleClick(tab, event) {
      switch (tab.name) {
        case "d1":
          this.getList();
          break;
        case "d2":
          this.getList1();
          break;
        case "d3":
          this.getList2();
          break;
        case "d4":
          this.getList3();
          break;
        default:
          break;
      }
    },
    jumpUrl(url) {
      if (url) {
        window.open(url, "_blank");
      }
      return;
    },
    jumpWL(e) {
      window.open(e.Friendlinks, "_blank");
      return;
    },
    openJumpVip() {
      this.$refs.membership.showInit();
    },
    jumpPage(e) {
      this.$api
        .XfWebApiGetMenuModel({ menuid: 0, label: e.label })
        .then((res) => {
          if (res.Data) {
            this.$router.push({
              path: `menuList?ParentId=${res.Data.ParentId}&MenuId=${res.Data.MenuId}`,
            });
            return;
          } else {
            this.$message.error("请联系管理员新增对应路由");
            return;
          }
        });
    },
    leftJump() {
      this.$refs.swiper.$swiper.slidePrev();
    },
    rightJump() {
      this.$refs.swiper.$swiper.slideNext();
    },
    handleClickSlide(index) {
      this.jumpInfo(this.list5[index]);
    },
    onSwiper(swiper) {
      console.log(swiper);
    },
    onSlideChange() {},
    getInit() {
      this.getNewPositionList(); // 首页通告等
      this.getBannerList(); // 获取首页广告轮播Banner列表
      this.getWebFriendlinks(); // 获取友情链接列表
      this.newList(); //获取最新3条文章
    },
    newList() {
      this.$api.XfWebApiGetNewsReList().then((res) => {
        this.tableData = res.Data.List || [];
      });
    },
    // 首页通告等
    getNewPositionList() {
      // seat:0全部，1通知通告，3协会动态，4行业新闻,5政策法规,6会员天地,7首页简介,8优秀案例
      this.getList();
      this.getList4();
      this.getList5();
    },
    //通知列表
    getList() {
      this.$api
        .XfWebApiGetNewPositionList({ seat: 1, ...this.formData })
        .then((res) => {
          this.notList = res.Data.List || [];
          this.total = res.Data.TotalCount;
        });
    },
    //协会动态
    getList1() {
      this.$api
        .XfWebApiGetNewPositionList({ seat: 3, ...this.formData1 })
        .then((res) => {
          this.list1 = res.Data.List || [];
          this.total1 = res.Data.TotalCount;
        });
    },
    //行业新闻
    getList2() {
      this.$api
        .XfWebApiGetNewPositionList({ seat: 4, ...this.formData2 })
        .then((res) => {
          this.list2 = res.Data.List || [];
          this.total2 = res.Data.TotalCount;
        });
    },
    //政策法规
    getList3() {
      this.$api
        .XfWebApiGetNewPositionList({ seat: 5, ...this.formData3 })
        .then((res) => {
          this.list3 = res.Data.List || [];
          this.total3 = res.Data.TotalCount;
        });
    },
    //会员天地
    getList4() {
      this.$api
        .XfWebApiGetNewPositionList({ seat: 6, ...this.formData4 })
        .then((res) => {
          this.list4 = res.Data.List || [];
          this.total4 = res.Data.TotalCount;
        });
    },
    //会员天地
    getList5() {
      this.$api
        .XfWebApiGetNewPositionList({ seat: 8, ...this.formData5 })
        .then((res) => {
          this.list5 = res.Data.List || [];
          this.total5 = res.Data.TotalCount;
        });
    },
    // 获取首页广告轮播Banner列表
    getBannerList() {
      //type:1首页2新闻3飘窗广告
      this.$api.XfWebApiGetBannerList({ type: 1 }).then((res) => {
        this.BannerList1 = res.Data || [];
      });
      this.$api.XfWebApiGetBannerList({ type: 2 }).then((res) => {
        this.BannerList2 = res.Data || [];
      });
    },
    // 获取友情链接列表
    getWebFriendlinks() {
      this.$api.XfWebApiGetWebFriendlinks().then((res) => {
        this.lists = res.Data;
      });
    },
    handleCurrentChange(e) {
      this.formData.pageindex = e;
      this.getList();
    },
    handleCurrentChange1(e) {
      this.formData1.pageindex = e;
      this.getList1();
    },
    handleCurrentChange2(e) {
      this.formData2.pageindex = e;
      this.getList2();
    },
    handleCurrentChange3(e) {
      this.formData3.pageindex = e;
      this.getList3();
    },
    handleCurrentChange4(e) {
      this.formData4.pageindex = e;
      this.getList4();
    },
    //跳转详情页
    jumpInfo(e) {
      this.$router.push({
        path: "info",
        query: {
          MenuId: e.MenuId,
          NewsId: e.NewsId,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.float_link {
  cursor: pointer;
  font-size: 16px;
  color: #6b6b6b;
  margin-right: 16px;
  margin-bottom: 6px;
  display: inline-block;
}
::v-deep .carousel .el-carousel__indicators--horizontal {
  display: none;
}
.home_img {
  height: 451px;
  img {
    width: 100%;
    height: 100%;
  }
}
.p_text {
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: center;
}
.h2s {
  font-size: 26px;
  font-weight: 800;
  color: #333333;
  margin-bottom: 28px;
}
.uls {
  // flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .lis {
    height: 131px;
    border-top: 5px solid #2453af;
    border-bottom: 1px solid #7688a8;
    width: 360px;
    user-select: none;
    cursor: pointer;
    padding: 20px 30px 16px 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .top {
      color: #4f4f4f;
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 14px;
      word-break: break-all;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      .left {
        color: #828282;
      }
      .right {
        color: #2453af;
        user-select: none;
        cursor: pointer;
      }
    }
  }
}
.margin_28 {
  margin: 28px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  & > .small_box {
    user-select: none;
    cursor: pointer;
    width: 120px;
    text-align: center;
    img {
      width: 76px;
      height: 76px;
      margin-bottom: 12px;
    }
    p {
      color: #333333;
      font-size: 24px;
    }
  }
}
.vipBox {
  margin-top: 32px;
  border: 1px solid #e0e0e0;
  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 24px;
    height: 46px;
    background-color: #2453af;
    & > .left {
      font-weight: bold;
      font-size: 20px;
      color: #fff;
    }
    & > .right {
      user-select: none;
      cursor: pointer;
      font-size: 15px;
      color: #fff;
    }
  }
  .swiperBox {
    padding: 28px 0px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    & > .left {
      color: #2453af;
      font-size: 28px;
      font-weight: bold;
      margin-right: 10px;
      cursor: pointer;
      user-select: none;
    }
    & > .swiper-container {
      flex: 1;
    }
    & > .right {
      color: #2453af;
      font-size: 28px;
      font-weight: bold;
      margin-left: 10px;
      cursor: pointer;
      user-select: none;
    }
  }
  .flot_s {
    display: flex;
    flex-wrap: wrap;
    .liOs {
      cursor: pointer;
      flex-shrink: 0;
      width: 190px;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 160px;
        height: 75px;
      }
    }
  }
}
.el-carousel__item h3 {
  color: #fff;
  text-align: center;
  font-size: 16px;
  line-height: 36px;
  height: 36px;
  margin: 0;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 12px;
  & > span {
    &:first-child {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    &:last-child {
      flex-shrink: 0;
      font-size: 14px;
    }
  }
}
.link_s {
  font-size: 22px;
  margin: 10px 0px;
  text-align: center;
  color: #333;
  font-weight: 400;
}
/*样式的话可以写*/
.content_list {
  display: flex;
  justify-content: space-between;
  & > .content_list_box {
    width: 580px;
    .title {
      font-weight: bold;
      font-size: 22px;
      border-bottom: 1px solid #ddd;
      height: 55px;
      position: relative;
      line-height: 55px;
      margin-bottom: 30px;
      & > i {
        position: absolute;
        background: #2453af;
        width: 40px;
        height: 5px;
        left: 0px;
        bottom: -1px;
      }
    }
    .content_list_imgBox {
      position: relative;
      width: 580px;
      height: 270px;
      overflow: hidden;
      margin-bottom: 10px;
      cursor: pointer;
      & > img {
        width: 100%;
        height: 100%;
        transition: all 0.3s;
      }
      &:hover img {
        transform: scale(1.2);
      }
      & > .footers {
        position: absolute;
        z-index: 999;
        bottom: 0;
        right: 0;
        left: 0;
        height: 50px;
        background-color: rgba(0, 0, 0, 0.7);
        display: flex;
        align-items: center;
        padding: 0px 15px;
        color: #fff;
        font-size: 16px;
        & > .left {
          flex: 1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        & > .right {
          flex-shrink: 0;
          word-spacing: 0px;
          font-size: 14px;
        }
      }
    }
  }
}
.footers_li {
  margin-bottom: 10px;
  cursor: pointer;
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0px 15px;
  font-size: 16px;
  color: #333;
  transition: all 0.3s;
  &:hover {
    background-color: rgb(201, 0, 31);
    color: #fff;
  }
  & > .left {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  & > .right {
    flex-shrink: 0;
    word-spacing: 0px;
    font-size: 14px;
  }
}
.tabBox {
  display: flex;
  flex-direction: column;
  height: 280px;
  ul {
    flex: 1;
    overflow: auto;
  }
  .paginations {
    height: 32px;
  }
}
.li_list {
  list-style-type: lower-latin;
  display: flex;
  align-items: center;
  height: 41px;
  font-size: 15px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s;
  &:hover {
    color: #2453af;
  }
  & > i {
    transform: scale(0.8);
    color: #2453af;
    margin-right: 6px;
  }
  & > .title_li {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 10px;
  }
  & > .time_li {
    font-size: 14px;
    word-spacing: 0px;
  }
}
.novt_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 40px;
  margin-bottom: 40px;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
::v-deep .el-tabs__nav-scroll {
  border-bottom: 2px solid #2453af;
}
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
::v-deep .el-tabs--border-card > .el-tabs__header {
  background: #e9e9e9;
  border-bottom: none;
  color: #4f4f4f;
}
::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item {
  color: #4f4f4f;
  // font-weight: bold;
  // background-color: #fff;
  border: 1px solid transparent;
}
::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  color: #fff;
  font-weight: bold;
  background-color: #2453af;
}
</style>