midi-h5/pages/feedback/teenage.vue

<template>
	<view class="view-page" :style="backgroundStyle">
		<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: [],
			ThemeData: null
		}
	},
	computed: {
		backgroundStyle() {
			if (this.ThemeData.app_bg) {
				return {
					backgroundImage: `url(${this.ThemeData.app_bg})`
				}
			} else {
				return {
					background: 'linear-gradient(180deg, #B3FAEB 2%, #FFFFFF 40%)'
				}
			}
		}
	},
	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()
		if (uni.getStorageSync('Theme_Data')) {
			this.ThemeData = JSON.parse(uni.getStorageSync('Theme_Data'))
		}
	},
	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>