veterans_client_web/src/views/Home/components/PolicyInformation.vue

<!--
 * @Description: 政策资讯部分
 * @Author: 空白格
 * @Date: 2022-08-30 13:51:52
 * @LastEditors: 空白格
 * @LastEditTime: 2022-09-05 17:05:04
 * @FilePath: \veterans_client_web\src\views\Home\components\PolicyInformation.vue
 * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
-->
<template>
  <div class="home-main-policy-box">
    <!-- 政策资讯部分 -->
    <el-row :gutter="0" class="home-main-policy">
      <el-col :span="24" class="home-main-policy-carousel">
        <el-carousel :interval="5000" arrow="never" height="140px">
          <el-carousel-item v-for="(item, index) in bannerList" :key="index">
            <el-image
              class="image"
              :src="
                item.bannerUrl || require('@/assets/images/default-news.jpg')
              "
              fit="cover"
              @click="
                item.id &&
                  jumpPage('/bannerdetails', {
                    id: item.id,
                    type: 5,
                  })
              "
            >
              <div slot="placeholder" class="image-slot">
                加载图片中<span class="dot">...</span>
              </div>
              <div slot="error" class="image-slot">
                <el-image
                  class="image"
                  :src="require('@/assets/images/default-news.jpg')"
                  fit="cover"
                ></el-image>
              </div>
            </el-image>
            <div class="title">
              {{ item.artTitle || "" }}
            </div>
          </el-carousel-item>
        </el-carousel>
      </el-col>
      <el-col :span="24" class="home-main-policy-content" v-loading="loading">
        <el-row :gutter="54">
          <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
            <div class="hmpc-left">
              <el-tabs v-model="tabCur" @tab-click="handlePolicyClick">
                <el-tab-pane
                  v-for="(item, index) in policyTypeList"
                  :key="index"
                  :label="item.label"
                  :name="item.text"
                >
                  <div class="hmpc-left-list" v-if="policyList.length">
                    <div
                      @click="
                        jumpPage('newsdetails', {
                          id: item.artId,
                          type: 'policy',
                        })
                      "
                      class="hmpc-left-list-item"
                      v-for="(item, index) in policyList"
                      :key="index"
                    >
                      <div class="title">{{ item.artTitle }}</div>
                      <div class="date">
                        {{ parseTime(item.artPostTime, "{y}-{m}-{d}") }}
                      </div>
                    </div>
                  </div>
                  <el-empty description="资讯数据为空" v-else></el-empty>
                </el-tab-pane>
              </el-tabs>
              <div class="more-btn" @click="jumpPage('/policyadvice')">
                更多
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
            <div class="hmpc-right">
              <div class="hmpc-right-title">退役军人服务</div>
              <div class="hmpc-right-list">
                <div
                  class="hmpc-right-list-btn hmpc-right-list-btn-1"
                  @click="jumpPage('/policyadvice')"
                ></div>
                <div
                  class="hmpc-right-list-btn hmpc-right-list-btn-2"
                  @click="jumpPage('/recruitmentemployment')"
                ></div>
                <div
                  class="hmpc-right-list-btn hmpc-right-list-btn-3"
                  @click="jumpPage('/skilltraining')"
                ></div>
                <div
                  class="hmpc-right-list-btn hmpc-right-list-btn-4"
                  @click="jumpPage('/educationpromote')"
                ></div>
                <div
                  class="hmpc-right-list-btn hmpc-right-list-btn-5"
                  @click="jumpPage('/workguide')"
                ></div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { parseTime } from "@/utils/utils";
import { getDictData } from "@/api/Dict";
import { getPolicyData } from "@/api/PolicyAdvice";
import { getBannerList } from "@/api/Home";
export default {
  name: "PolicyInformation",
  data() {
    return {
      parseTime: parseTime,
      loading: false,
      bannerList: [
        { bannerUrl: require("@/assets/images/policy-advice-logo.png") },
      ],
      policyTypeList: [],
      tabCur: "",
      policyList: [],
    };
  },
  created() {
    this.getDict();
    this.getPolicyBannerList();
  },
  methods: {
    /**
     * 获取字典数据
     * @date 2022-08-17
     * @returns {any}
     */
    getDict() {
      getDictData({ key: "policy_type" }).then((res) => {
        this.policyTypeList = res?.data;
        this.policyTypeList.length &&
          (this.tabCur = this.policyTypeList[0].text) &&
          this.getPolicyList();
      });
    },
    /**
     * 获取政策资讯轮播
     * @date 2022-08-17
     * @returns {any}
     */
    getPolicyBannerList() {
      getBannerList({ type: 5 }).then((res) => {
        res.data.length ? (this.bannerList = res.data) : "";
      });
    },
    /**
     * 获取咨询列表
     * @date 2022-08-17
     * @returns {any}
     */
    getPolicyList() {
      this.loading = true;
      getPolicyData({
        pageNum: 1,
        pageSize: 10,
        artCategoryId: this.tabCur,
      }).then((res) => {
        this.policyList = res?.rows;
        this.loading = false;
      });
    },
    /**
     * 切换触发
     * @date 2022-08-30
     * @param {any} tab
     * @returns {any}
     */
    handlePolicyClick(tab) {
      this.tabCur = tab.name;
      this.getPolicyList();
    },
    /**
     * 跳转
     * @date 2022-08-30
     * @param {any} path
     * @param {any} query
     * @returns {any}
     */
    jumpPage(path, query) {
      this.$router.push({ path, query });
    },
  },
};
</script>

<style lang="scss" scoped>
.home-main {
  &-policy-box {
    background: #f7f7f7;
  }
  &-policy {
    width: 70%;
    margin: 0 auto;
    min-width: 600px;
    padding: 40px 0;
    &-carousel {
      cursor: pointer;
      :deep(.el-carousel__button) {
        // 指示器按钮
        width: 7px;
        height: 7px;
        border: none;
        border-radius: 50%;
        background-color: #fff;
      }
      :deep(.is-active .el-carousel__button) {
        // 指示器激活按钮
        width: 16px;
        border-radius: 10px;
      }
      .image {
        width: 100%;
        height: 100%;
      }
    }
    &-content {
      margin-top: 50px;
      .hmpc-left {
        margin-bottom: 20px;
        position: relative;
        :deep(.el-tabs__item) {
          font-size: 20px;
          font-weight: 500;
          color: #666666;
        }
        :deep(.el-tabs__item:hover) {
          color: #163da5;
        }
        :deep(.el-tabs__item.is-active) {
          color: #163da5;
        }
        :deep(.el-tabs__active-bar) {
          background-color: #163da5;
        }
        &-list {
          padding: 10px 0;
          &-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            font-size: 14px;
            color: #373737;
            cursor: pointer;
            &:hover {
              text-decoration: underline;
            }
            .title {
              width: 80%;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              word-break: break-all;
            }
            .date {
              width: 20%;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              word-break: break-all;
              text-align: right;
              color: #797979;
            }
          }
        }
        .more-btn {
          position: absolute;
          right: 0;
          top: 12px;
          color: #727272;
          font-size: 14px;
          cursor: pointer;
        }
      }
      .hmpc-right {
        margin-bottom: 20px;
        &-title {
          font-size: 20px;
          color: #163da5;
          margin-bottom: 10px;
        }
        &-list {
          &-btn {
            width: 100%;
            text-align: center;
            height: 47px;
            line-height: 47px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            margin-bottom: 7px;
            position: relative;
            &:hover {
              opacity: 0.8;
            }
            &::before {
              content: "";
              display: inline-block;
              width: 25px;
              height: 25px;
              background-size: 100% 100%;
              background-repeat: no-repeat;
              background-position: center center;
              vertical-align: middle;
              position: absolute;
              left: calc(45% - 35px);
              top: 50%;
              margin-top: -12.5px;
            }
            &::after {
              position: absolute;
              left: 45%;
            }
          }
          &-btn-1 {
            background-image: linear-gradient(137deg, #c5fff6 0%, #5debd8 100%);
            color: #028170;
            &::before {
              background-image: url("./../../../assets/images/zhengcezixun.svg");
            }
            &::after {
              content: "政策资讯";
            }
          }
          &-btn-2 {
            background-image: linear-gradient(137deg, #fff6e3 0%, #f7b6a3 100%);
            color: #ff6253;
            &::before {
              background-image: url("./../../../assets/images/woyaojiuye.svg");
            }
            &::after {
              content: "我要就业";
            }
          }
          &-btn-3 {
            background-image: linear-gradient(137deg, #fff6e3 0%, #fae08a 100%);
            color: #ff8d34;
            &::before {
              background-image: url("./../../../assets/images/woyaoxuejineng.svg");
            }
            &::after {
              content: "我要学技能";
            }
          }
          &-btn-4 {
            background-image: linear-gradient(137deg, #eee3ff 0%, #d3b9ff 100%);
            color: #8454d3;
            &::before {
              background-image: url("./../../../assets/images/woxiangshengxueli.svg");
            }
            &::after {
              content: "我要升学历";
            }
          }
          &-btn-5 {
            background-image: linear-gradient(137deg, #c9e9ff 0%, #95d2fc 100%);
            color: #1b74b4;
            &::before {
              background-image: url("./../../../assets/images/woxiangchuangye.svg");
            }
            &::after {
              content: "我想创业";
            }
          }
        }
      }
    }
  }
}
</style>