veterans_client_web/src/views/PolicyAdvice/PolicyAdviceIndex.vue

<!--
 * @Description: 政策资讯
 * @Author: 空白格
 * @Date: 2022-08-11 09:15:53
 * @LastEditors: 空白格
 * @LastEditTime: 2022-08-30 14:33:08
 * @FilePath: \veterans_client_web\src\views\PolicyAdvice\PolicyAdviceIndex.vue
 * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
-->
<template>
  <div class="app-main policy-advice">
    <BannerBreadcrumb title="政策资讯" />
    <!-- 内容 -->
    <div class="app-main-box policy-advice-box">
      <div class="policy-advice-box-logo">
        <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/policy-advice-logo.png')
              "
              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/policy-advice-logo.png')"
                  fit="cover"
                ></el-image>
              </div>
            </el-image>
            <div class="title">
              {{ item.artTitle || "" }}
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="app-main-box-content policy-advice-box-policy">
        <el-tabs v-model="queryParams.artCategoryId" @tab-click="handleClick">
          <el-tab-pane
            v-for="(item, index) in policyTypeList"
            :key="index"
            :label="item.label"
            :name="item.text"
          >
            <ul
              class="policy-list"
              v-loading="loading"
              v-if="policyList.length"
            >
              <li
                class="policy-list-item"
                @click="
                  jumpPage('newsdetails', { id: item.artId, type: 'policy' })
                "
                v-for="(item, index) in policyList"
                :key="index"
              >
                <div class="policy-list-title">{{ item.artTitle }}</div>
                <div class="policy-list-icon">
                  <i class="el-icon-arrow-right"></i>
                </div>
              </li>
            </ul>
            <div class="pagination" v-if="total">
              <el-pagination
                background
                layout="prev, pager, next"
                :page-size="queryParams.pageSize"
                :total="total"
                @current-change="currentChange"
              >
              </el-pagination>
            </div>
            <el-empty v-else description="暂无数据"></el-empty>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import BannerBreadcrumb from "@/components/BannerBreadcrumb";
import { getDictData } from "@/api/Dict";
import { getPolicyData } from "@/api/PolicyAdvice";
import { getBannerList } from "@/api/Home";
export default {
  name: "PolicyAdviceIndex",
  components: {
    BannerBreadcrumb,
  },
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        artCategoryId: "",
      },
      total: 0,
      policyTypeList: [],
      policyList: [],
      bannerList: [
        { bannerUrl: require("@/assets/images/policy-advice-logo.png") },
      ],
      loading: false,
    };
  },
  created() {
    this.getDictList();
  },
  methods: {
    /**
     * 获取字典数据
     * @date 2022-08-11
     * @returns {any}
     */
    getDictList() {
      getDictData({ key: "policy_type" }).then((res) => {
        this.policyTypeList = res.data;
        if (this.policyTypeList.length) {
          this.queryParams.artCategoryId = 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) : "";
      });
    },
    /**
     * 获取政策资讯列表数据
     */
    getPolicyList() {
      this.loading = true;
      getPolicyData(this.queryParams).then((res) => {
        this.policyList = res?.rows;
        this.total = Number(res?.total);
        this.loading = false;
      });
    },
    /**
     * tab点击
     * @date 2022-08-11
     * @param {any} tab
     * @returns {any}
     */
    handleClick(tab) {
      this.queryParams.pageNum = 1;
      this.queryParams.artCategoryId = tab.name;
      this.getPolicyList();
    },
    /**
     * 分页触发
     * @date 2022-08-30
     * @param {any} page
     * @returns {any}
     */
    currentChange(page) {
      this.queryParams.pageNum = page;
      this.getPolicyList();
    },
    /**
     * 跳转到指定页面
     * @date 2022-08-11
     * @param {any} path
     * @returns {any}
     */
    jumpPage(path, param) {
      if (path) {
        this.$router.push({ path: path, query: param });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.policy-advice {
  &-box {
    &-logo {
      width: 100%;
      height: 157px;
      .image {
        width: 100%;
        height: 100%;
      }
    }
    &-policy {
      min-height: 400px;
      :deep(.el-tabs__item) {
        font-size: 20px;
        font-weight: 500;
        color: #000000;
      }
      :deep(.el-tabs__item:hover) {
        color: #163da5;
      }
      :deep(.el-tabs__item.is-active) {
        color: #163da5;
      }
      :deep(.el-tabs__active-bar) {
        background-color: #163da5;
      }
      .policy-list {
        &-item {
          display: flex;
          justify-content: space-between;
          border-bottom: dashed 1px #d7d7d7;
          color: #2b2b2b;
          font-size: 16px;
          height: 50px;
          line-height: 50px;
          margin-bottom: 10px;
          cursor: pointer;
        }
      }
    }
  }
  .pagination {
    text-align: center;
    margin-top: 20px;
    :deep(.el-pager .active) {
      background-color: #ff3939;
    }
    :deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
      background-color: #ff3939;
    }
  }
}
</style>