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">
      <view class="policyInfo-banner"
        slot="top">
        <u-swiper :list="bannerList"
          name="bannerUrl"
          border-radius="0"
          mode="round"
          height="372"
          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">
              <image :src="item.artImage"
                mode="aspectFill"
                class="image"></image>
            </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(0, 1, 10, this.tabsList[0].text);
          } else {
            uni.showToast({
              icon: 'none',
              title: res.msg
            });
          }
        });
      },
      getBannerList() {
        this.$u.api.getIndexBannerList()
          .then(res => {
            if (!res) return;
            this.bannerList = res?.data || [];
            this.bannerList = [];
            this.bannerList.push({
              bannerUrl: require('@/static/jpeg/e2f3c933be411c565ec65cd49e832ac8.jpeg'),
              content: '<p>代码固定测试内容999998</p>',
              id: "999998",
              name: "代码固定测试999998"
            });
            this.bannerList.push({
              bannerUrl: require('@/static/jpeg/836ee345ca125ef429c04cfbabac0154.jpeg'),
              content: '<p>代码固定测试内容999999</p>',
              id: "999999",
              name: "代码固定测试999999"
            });
            // console.log('bannerList',JSON.parse(JSON.stringify(res)));
          })
      },
      // 轮播图点击
      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
            }
          });
        }
      },
      swiperChange(index) {
        // this.policyInfoTitle = this.bannerList[index]?.name || '';
      },
      /**
       * 获取列表
       * @param { Number } idx
       * @param { Number } pageNum
       * @param { Number } pageSize
       * @param { Number } artCategoryId
       */
      getList(idx, pageNum, pageSize, artCategoryId) {
        this.$u.api.policyInfo.getPolicyInfoList({
          pageNum,
          pageSize,
          artCategoryId
        }).then(res => {
          if (res.code === 200) {
            this.$refs.policyInfoPaging.complete(res.rows || []);
          } else {
            uni.showToast({
              icon: 'none',
              title: res.msg
            });
            this.$refs.policyInfoPaging.complete([]);
          }
        }).catch(err => {
          // console.log("err: ",err);
          uni.showToast({
            title: '系统异常!',
            type: 'error'
          });
          this.$refs.policyInfoPaging.complete([]);
        });
      },
      // tab栏切换
      tabsChange(index) {
        this.tabCurrent = index;
        this.getList(index, 1, 10, this.tabsList[index]?.text);
      },
      /**
       * 列表加载触发
       */
      policyInfoQueryList(pageNo, pageSize) {
        if (this.tabsList.length > 0) {
          this.getList(this.tabCurrent, pageNo, pageSize, this.tabsList[this.tabCurrent]?.text);
        }
      },
      /**
       * 政策咨询事件
       */
      policySubmitBtnClick() {
        this.$u.route({
          url: 'pages/questionConsulting/questionConsulting',
          params: {
            id: '9999'
          }
        });
      }
    }
  }
</script>

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