veterans_client_web/src/views/Home/HomeIndex.vue

<!--
 * @Description: 首页
 * @Author: 空白格
 * @Date: 2022-08-10 11:26:40
 * @LastEditors: 空白格
 * @LastEditTime: 2022-12-15 10:18:02
 * @FilePath: \veterans_client_web\src\views\Home\HomeIndex.vue
 * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
-->
<template>
  <div class="home app-main">
    <!-- 顶部轮播 -->
    <header-banner />
    <!-- 菜单导航 -->
    <menu-navigation :scrollTop="scrollTop" />
    <div class="home-main" :class="{ 'home-main-top': scrollTop > 473 }">
      <!-- 新闻最新一条 -->
      <div class="home-main-latest">
        <div class="home-main-latest-content">
          <div
            class="hmlc-title"
            @click="newsItemClick(latestNews)"
          >
            {{ latestNews.artTitle }}
          </div>
          <!-- <div class="hmlc-content" v-html="latestNews.artContent"></div> -->
        </div>
      </div>
      <div class="home-main-box">
        <!-- 新闻通知 -->
        <news-notice @getLastNews="getLastNews" />
        <!-- 政策资讯 -->
        <policy-information />
        <!-- 院校合作 -->
        <institutional-cooperation />
        <!-- 企业合作 -->
        <enterprise-cooperation />
      </div>
    </div>
    <!-- 友情链接 -->
    <friendship-link />
    <!-- 右侧操作 -->
    <div class="home-operation">
      <div class="home-operation-fixed">
        <div class="home-operation-fixed-item home-operation-fixed-item-1">
          <el-image
            class="image"
            :src="require('@/assets/images/search-icon.svg')"
          ></el-image>
        </div>
        <div class="home-operation-fixed-item">
          <el-image
            class="image"
            :src="require('@/assets/images/email-icon.svg')"
            @click="openWechatCode('email')"
          ></el-image>
        </div>
        <div class="home-operation-fixed-item">
          <el-image
            class="image"
            :src="require('@/assets/images/telephone-icon.svg')"
            @click="openWechatCode('phone')"
          ></el-image>
        </div>
        <div class="home-operation-fixed-item">
          <el-image
            class="image"
            :src="require('@/assets/images/weixin-icon.svg')"
            @click="openWechatCode('wechat')"
          ></el-image>
        </div>
        <div
          class="home-operation-fixed-item home-operation-fixed-item-last"
          @click="backToTop"
        >
          <el-image
            class="image"
            :src="require('@/assets/images/top-icon.svg')"
          ></el-image>
        </div>
      </div>
    </div>
    <!-- 微信二维码 -->
    <el-dialog
      class="wechat-dialog"
      :title="dialogObj.title"
      :visible.sync="dialogObj.open"
      width="380px"
      :before-close="handleCloseWechat"
    >
      <template v-if="dialogObj.type === 'wechat'">
        <div class="wechat-qrcode" ref="qrcode"></div>
      </template>
      <template v-if="dialogObj.type === 'phone'">
        <div class="phone-number">联系方式：{{ dialogObj.phone }}</div>
      </template>
      <template v-if="dialogObj.type === 'email'">
        <div class="phone-number">联系邮箱：{{ dialogObj.email }}</div>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseWechat">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import HeaderBanner from "./components/HeaderBanner";
import MenuNavigation from "./components/MenuNavigation";
import NewsNotice from "./components/NewsNotice.vue";
import PolicyInformation from "./components/PolicyInformation";
import InstitutionalCooperation from "./components/InstitutionalCooperation";
import EnterpriseCooperation from "./components/EnterpriseCooperation";
import FriendshipLink from "./components/FriendshipLink";
import { getDictData } from "@/api/Dict";
import QRCode from "qrcodejs2";
export default {
  name: "HomeIndex",
  components: {
    HeaderBanner,
    MenuNavigation,
    NewsNotice,
    PolicyInformation,
    InstitutionalCooperation,
    EnterpriseCooperation,
    FriendshipLink,
  },
  data() {
    return {
      latestNews: {},
      scrollTop: 0,
      dialogObj: {
        open: false,
        title: "",
        url: "",
        phone: "",
        email: "",
        type: "wechat",
      },
    };
  },
  created() {
    this.getDict();
  },
  mounted() {
    const that = this;
    window.addEventListener("scroll", that.scrollHander);
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollHander);
  },
  methods: {
    scrollHander(e) {
      this.scrollTop = e.srcElement.scrollingElement.scrollTop;
    },
    /**
     * 获取字典数据
     * @date 2022-08-17
     * @returns {any}
     */
    getDict() {
      getDictData({ key: "gateway_home_function" }).then((res) => {
        res.data.length > 0 ? this.dialogObj.url = res.data[0].text : '';
        res.data.length > 1 ? this.dialogObj.phone = res.data[1].text : '';
        res.data.length > 2 ? this.dialogObj.email = res.data[2].text : '';
      });
    },
    /**
     * 最新一条新闻
     * @date 2022-08-30
     * @param {any} obj
     * @returns {any}
     */
    getLastNews(obj) {
      this.latestNews = obj;
    },
    /**
     * 跳转到指定页面
     * @date 2022-08-11
     * @param {any} path
     * @returns {any}
     */
    jumpPage(path, query) {
      if (path) {
        this.$router.push({ path, query });
      }
    },
    /**
     * 返回顶部
     * @date 2022-08-22
     * @returns {any}
     */
    backToTop() {
      cancelAnimationFrame(this.timer);
      const self = this;
      self.timer = requestAnimationFrame(function fn() {
        const oTop =
          document.body.scrollTop || document.documentElement.scrollTop;
        if (oTop > 0) {
          document.body.scrollTop = document.documentElement.scrollTop =
            oTop - 50;
          self.timer = requestAnimationFrame(fn);
        } else {
          cancelAnimationFrame(self.timer);
        }
      });
    },
    /**
     * 打开微信二维码
     * @date 2022-08-30
     * @returns {any}
     */
    openWechatCode(type) {
      this.dialogObj.open = true;
      this.dialogObj.type = type;
      switch (type) {
        case "email":
          this.dialogObj.title = "邮箱";
          break;
        case "phone":
          this.dialogObj.title = "联系方式";
          break;
        case "wechat":
          this.dialogObj.title = "移动端二维码";
          break;
      }
      if (this.dialogObj.type === "wechat") {
        this.$nextTick(() => {
          new QRCode(this.$refs.qrcode, {
            text: this.dialogObj.url, // url地址  文本等需要转换为二维码的内容
            width: 200,
            height: 200,
            colorDark: "#333333", // 二维码颜色
            colorLight: "#ffffff", // 二维码背景色
            correctLevel: QRCode.CorrectLevel.L, // 容错率，L/M/H
          });
        });
      }
    },
    /**
     * 关闭微信弹框
     * @date 2022-08-30
     * @returns {any}
     */
    handleCloseWechat() {
      if (this.dialogObj.type === "wechat") {
        this.$refs.qrcode.innerHTML = "";
      }
      this.dialogObj.open = false;
    },
    newsItemClick(item) {
      if (item.artLinkUrl) location.href = item.artLinkUrl;
      else
        this.jumpPage("newsdetails", {
          id: item.artId,
          type: "news",
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  &-main {
    &-latest {
      background-color: #fff;
      &-content {
        width: 70%;
        margin: 0 auto;
        min-width: 600px;
        padding: 17px 0;
        .hmlc-title {
          font-size: 28px;
          color: #ff001a;
          text-align: center;
          margin-bottom: 10px;
          cursor: pointer;
        }
        .hmlc-content {
          font-size: 12px;
          line-height: 17px;
          overflow: hidden;
          text-overflow: ellipsis;
          text-overflow: -o-ellipsis-lastline;
          display: -webkit-box;
          -webkit-line-clamp: 2; /* 块元素显示的文本的行数 */
          line-clamp: 2;
          -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 ,盒子行数根据高度来计算 */
          overflow-wrap: break-word; /* 设置div换行 */
          p {
            img {
              display: none !important;
            }
          }
        }
      }
    }
  }
  .home-main-top {
    margin-top: 104px;
  }
  &-operation {
    position: fixed;
    top: 50%;
    right: 0;
    margin-top: -138px;
    z-index: 1000;
    &-fixed {
      &-item {
        width: 70px;
        height: 70px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #416050;
        margin-bottom: 2px;
        cursor: pointer;
        &:nth-last-child(2) {
          margin-bottom: 0;
        }
        &:first-child,
        &:last-child {
          background: #73aa8d;
        }
        .image {
          width: 30px;
          height: 30px;
        }
      }
      &-item-last {
        height: 40px;
        .image {
          width: 15px;
          height: 15px;
        }
      }
    }
  }
  .wechat-qrcode {
    width: 200px;
    margin: 0 auto;
  }
  .wechat-dialog:deep(.el-dialog__footer) {
    text-align: center;
  }
}
</style>