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">
							<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">政策咨询（0851-863789）
						</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.indexApi.indexBannerListApi().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
						}
					});
				}
			},
			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>