midi-h5/pages/feedback/teenage.vue

<template>
	<view class="view-page">
		<headerHeight />
		<navBar :navTitle="'青少年模式'" :emitBack="true" @backEvent="back">
		</navBar>
		<view class="content-view">
			<view class="flex-line">
				<NavigationTabs :tabs-data="tabs" :default-active="currentIndex" @tab-change="handleTabChange">
				</NavigationTabs>
			</view>
			<view class="">
				<view class="flex-line flex-spaceB w-fill new-box" v-for="(item,index) in dataList" :key="index">
					<view class="">
						<view class="color-3 font-32 font-w500">
							{{item.title}}
						</view>
						<view class="color-6 mt-24 font-28 font-w400 multi-line">
							{{item.introduced}}
						</view>
					</view>
					<view class="new-box-image">
						<img :src="item.img" alt="" />
					</view>
				</view>
				<uni-load-more class="mt-24" :status="loading ? 'loading' : noMore ? 'noMore' : 'more'" />
			</view>
		</view>

	</view>
</template>

<script>
	import http from '@/until/http.js';
	import headerHeight from '@/component/headerHeight.vue';
	import navBar from '@/component/nav.vue';
	import NavigationTabs from '@/component/tab.vue';
	export default {
		components: {
			headerHeight,
			navBar,
			NavigationTabs
		},
		data() {
			return {
				errorPage: true,
				currentIndex: 0,
				pageConfig: {
					pageSize: 10,
					currentPage: 1,
					total: 0
				},
				loading: false,
				noMore: false,
				tabs: [],
				dataList: []
			}
		},
		onReachBottom() {
			if (!this.loading && !this.noMore) {
				this.getUnderageModeList(this.tabs[0].type)
			}
		},
		onLoad(options) {
			this.errorPage = true
			this.dataList = []
			const {
				id
			} = options
			uni.setStorageSync('token', id)
			if (uni.getStorageSync('token')) this.getUnderageTypeList()
		},
		methods: {
			back() {
				this.closeWeb()
			},
			closeWeb() {
				const platform = uni.getSystemInfoSync().platform;
				if (platform === 'ios') {
					window.webkit.messageHandlers.nativeHandler.postMessage({
						'action': 'closeWeb'
					});
				} else if (platform === 'android') {
					window.Android.closeWeb();
				}
			},
			async getUnderageTypeList() {
				http.get('/api/Usermode/getUnderageTypeList', {
					token: uni.getStorageSync('token') ?? ''
				}).then(response => {
					const {
						data,
						code
					} = response
					if (code) {
						this.tabs = data.map(ele => {
							return {
								type: ele.id,
								value: ele.type_name
							}
						})
					}
					this.errorPage = false
					this.$nextTick(() => {
						this.getUnderageModeList(this.tabs[0].type)
					})
				}).catch(error => {
					this.tabs = []
					this.errorPage = true
				});
			},
			async getUnderageModeList(type) {
				http.get('/api/Usermode/getUnderageModeList', {
					token: uni.getStorageSync('token') ?? '',
					type: type,
					page: this.pageConfig.currentPage,
					page_limit: this.pageConfig.pageSize
				}).then(response => {
					const {
						code,
						data
					} = response
					if (code) {
						this.pageConfig.total = data.total
						this.loading = false
						const newData = data.data || []
						if (newData.length === 0) {
							this.noMore = true
							return
						}
						this.dataList = [...this.dataList, ...newData]
						this.pageConfig.currentPage++
						if (this.dataList.length === this.pageConfig.total) {
							this.noMore = true
							return
						}
					}
				})
			},
			handleTabChange(data) {
				this.dataList = []
				this.noMore = false
				this.loading = false
				this.pageConfig.currentPage = 1
				this.pageConfig.pageSize = 10
				this.getUnderageModeList(data.tab.type)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.view-page {
		// padding: 32rpx;
		background: linear-gradient(180deg, #B3FAEB 2%, #FFFFFF 40%);
		background-size: 100% 100%;
		min-height: 100vh;

		.content-view {
			padding: 0 32rpx;
		}

		.new-box {
			margin-top: 32rpx;

			.new-box-image {
				width: 240rpx;
				height: 144rpx;
				border-radius: 12rpx;

				img {
					border-radius: 12rpx;
				}
			}
		}

	}
</style>