veterans_H5/h5_web/pages/policyInfo/policyInfo.vue

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

<template>
  <view class="policyInfo">
    <view class="policyInfo-banner">
      <u-swiper
      	:list="bannerList"
      	name="bannerUrl"
      	border-radius="0"
      	mode="round"
      	height="440"
      	img-mode="scaleToFill"
      	@click="swiperClick"
      ></u-swiper>
    </view>
    <view class="policyInfo-title">
      <view>中华人民共和国英雄烈士保护法</view>
    </view>
    <view class="policyInfo-wrap">
      <view class="u-tabs-box policyInfo-tabsswiper">
      	<u-tabs-swiper bg-color="transparent" ref="policyInfoTabsSwiper" :list="tabsSwiperList" :current="current" @change="tabsSwiperChange" :is-scroll="false"></u-tabs-swiper>
      </view>
      <swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
      	<swiper-item class="swiper-item">
      		<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
            <view class="page-box">
              <view class="policyInfo-container" v-for="(lawItem, index) in dataList[0]" :key="index + 'lawItem'">
                <view class="item">
                  <view class="title">{{lawItem.title}}</view>
                  <view class="item-image">
                    <image :src="lawItem.imgUrl" mode="aspectFill" class="image"></image>
                  </view>
                </view>
              </view>
              <u-loadmore :status="loadStatus[0]" bgColor="#f2f2f2"></u-loadmore>
            </view>
      		</scroll-view>
      	</swiper-item>
      	<swiper-item class="swiper-item">
      		<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
            <view class="page-box">
              <view class="policyInfo-container" v-for="(administrativeItem, index) in dataList[1]" :key="index + 'administrativeItem'">
                <view class="item">
                  <view class="title">{{administrativeItem.title}}</view>
                  <view class="item-image">
                    <image :src="administrativeItem.imgUrl" mode="aspectFill" class="image"></image>
                  </view>
                </view>
              </view>
              <u-loadmore :status="loadStatus[1]" bgColor="#f2f2f2"></u-loadmore>
            </view>
      		</scroll-view>
      	</swiper-item>
      	</swiper-item>
      	<swiper-item class="swiper-item">
      		<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
            <view class="page-box">
              <view class="policyInfo-container" v-for="(regulationsItem, index) in dataList[2]" :key="index + 'regulationsItem'">
                <view class="item">
                  <view class="title">{{regulationsItem.title}}</view>
                  <view class="item-image">
                    <image :src="regulationsItem.imgUrl" mode="aspectFill" class="image"></image>
                  </view>
                </view>
              </view>
              <u-loadmore :status="loadStatus[2]" bgColor="#f2f2f2"></u-loadmore>
            </view>
      		</scroll-view>
      	</swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        bannerList: [],
        tabsSwiperList: [
        	{
        		name: '法律'
        	},
        	{
        		name: '行政法规'
        	},
        	{
        		name: '部门规章'
        	}
        ],
        current: 0,
        swiperCurrent: 0,
        loadStatus: ['loadmore','loadmore','loadmore'],
        dataList: [
          [],
          [
            {
              id: 1,
              title: '退役士兵安置条例',
              imgUrl: require('@/static/jpeg/a72f1cb8e19d649902859638ea458812.jpg'),
            },
            {
              id: 2,
              title: '军人抚恤优待条例',
              imgUrl: require('@/static/jpeg/a72f1cb8e19d649902859638ea458812.jpg'),
            },
            {
              id: 2,
              title: '烈士褒扬条例',
              imgUrl: require('@/static/jpeg/a72f1cb8e19d649902859638ea458812.jpg'),
            },
            {
              id: 2,
              title: '军队专业干部安置暂行办法',
              imgUrl: require('@/static/jpeg/a72f1cb8e19d649902859638ea458812.jpg'),
            },
            {
              id: 2,
              title: '退役士兵安置条例',
              imgUrl: require('@/static/jpeg/a72f1cb8e19d649902859638ea458812.jpg'),
            }
          ],
          []
        ]
      }
    },
    onLoad() {
    	this.getDataList(0);
    },
    onShow() {
    	this.getBannerList();
    },
    methods: {
      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) {
      	// console.log('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
      			}
      		})
      	}
      },
      // 页面数据
      getDataList(idx) {
      	this.loadStatus.splice(idx,1,"nomore")
      },
      // tab栏切换
      tabsSwiperChange(index) {
      	this.swiperCurrent = index;
      	this.getDataList(index);
      },
      transition({ detail: { dx } }) {
      	this.$refs.policyInfoTabsSwiper.setDx(dx);
      },
      animationfinish({ detail: { current } }) {
      	this.$refs.policyInfoTabsSwiper.setFinishCurrent(current);
      	this.swiperCurrent = current;
      	this.current = current;
      },
      reachBottom() {
        this.loadStatus.splice(this.current,1,"loading");
        setTimeout(() => {
        	this.getDataList(this.current);
        }, 1200);
      },
    }
  }
</script>

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