veterans_H5/h5_web/pages/policyInfo/policyInfo.vue

<!-- 
 * @title 政策资讯 
 * @author Rockery(1113269755@qq.com)
-->

<template>
  <view class="policyInfo">
    <z-paging ref="policyInfoPaging" v-model="policyInfoList" @query="policyInfoQueryList">
      <u-navbar slot="top" back-text="" title="" back-icon-color="#FFFFFF" :background="{ background: '#3D5D4C' }" :border-bottom="false"> </u-navbar>
      <view class="policyInfo-banner" slot="top">
        <u-swiper
          :list="bannerList"
          name="bannerUrl"
          border-radius="0"
          :mode="bannerList.length > 1 ? 'round' : 'none'"
          height="300"
          img-mode="scaleToFill"
          @click="swiperClick"
          @change="swiperChange"
        ></u-swiper>
      </view>

      <view class="policyInfo-title" slot="top">
        <view>{{ policyInfoTitle }}</view>
      </view>

      <!-- u-tabs-swiper -->
      <view class="policyInfo-tabsswiper" slot="top">
        <u-tabs bg-color="transparent" :list="tabsList" name="label" :is-scroll="true" :current="tabCurrent" font-size="30" @change="tabsChange" />
      </view>

      <view class="policyInfo-list">
        <view
          class="list-container"
          v-for="(item, index) in policyInfoList"
          :key="index + 'policyInfoList'"
          @click="$u.route('/pages/policyInfo/policyInfoDetails', { artId: item.artId })"
        >
          <view class="item">
            <view class="title">{{ item.artTitle }}</view>
            <view class="item-image">
              <u-image :src="item.artImage" mode="aspectFill" class="image" width="128" height="102" border-radius="10" />
            </view>
          </view>
        </view>
      </view>
    </z-paging>

    <view class="policybtn">
      <view class="policybtn-container">
        <view class="policybtn-content">
          <view>
            <u-button type="primary" @click="policySubmitBtnClick" class="policysubmitbtn">政策咨询</u-button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      bannerList: [],
      policyInfoTitle: '中华人民共和国英雄烈士保护法',
      // 政策资讯列表
      policyInfoList: [],
      tabsList: [],
      tabCurrent: 0
    };
  },
  onLoad() {
    this.getPolicyType();
  },
  onShow() {
    this.getBannerList();
  },
  methods: {
    /**
     * 获取政策资讯类别
     */
    getPolicyType() {
      this.$u.api
        .getDictdataUrl({
          key: 'policy_type'
        })
        .then((res) => {
          if (res.code == 200) {
            this.tabsList = res.data;
            this.getList(1, 10);
          } else {
            uni.showToast({
              icon: 'none',
              title: res.msg
            });
          }
        });
    },
    getBannerList() {
      this.$u.api.indexApi
        .indexBannerListApi({
          type: 2
        })
        .then((res) => {
          if (!res) return;
          this.bannerList = res?.data || [];
        });
    },
    // 轮播图点击
    swiperClick(index) {
      if (this.bannerList[index].jumpUrl) {
        let url = this.bannerList[index].jumpUrl.split('#')[1];
        this.$u.route({
          url: url
        });
      } else {
        this.$u.route({
          url: 'pages/bannerDetails/bannerDetails',
          params: {
            id: this.bannerList[index].id,
            type: 2
          }
        });
      }
    },
    swiperChange(index) {
      // this.policyInfoTitle = this.bannerList[index]?.name || '';
    },
    /**
     * 获取列表
     * @param { Number } pageNum
     * @param { Number } pageSize
     * @param { Number } artCategoryId
     */
    getList(pageNum, pageSize) {
      this.$u.api.policyInfo
        .getPolicyInfoList({
          pageNum,
          pageSize,
          artCategoryId: this.tabsList[this.tabCurrent].text
        })
        .then((res) => {
          if (res.code === 200) {
            this.$refs.policyInfoPaging.complete(res.rows || []);
          } else {
            uni.showToast({
              icon: 'none',
              title: res.msg
            });
            this.$refs.policyInfoPaging.complete(false);
          }
        })
        .catch((err) => {
          uni.showToast({
            title: '系统异常!',
            type: 'error'
          });
          this.$refs.policyInfoPaging.complete(false);
        });
    },
    // tab栏切换
    tabsChange(index) {
      this.tabCurrent = index;
      this.$refs.policyInfoPaging.reload(true);
      // this.getList(1, 10, this.tabsList[index]?.text);
    },
    /**
     * 列表加载触发
     */
    policyInfoQueryList(pageNo, pageSize) {
      if (this.tabsList.length > 0) {
        this.getList(pageNo, pageSize);
      }
    },
    /**
     * 政策咨询
     */
    policySubmitBtnClick() {
      let url = `${this.config.timChatUrl}?userID=${this.vuex_user.userId || this.vuex_user.id}&title=政策咨询&permission=1&type=retire`;
      this.$u.route({
        url: '/pages/webView/webView',
        params: {
          url: encodeURIComponent(url)
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import './scss/policyInfo.scss';
</style>