MiniScmV3/subpkg/protocol/protocol.vue

<template>
	<view class="horizonal-tab">
		<scroll-view class="scroll-tab" scroll-x="true" scroll-with-animation>
			<block v-for="(item,index) in protocolList" :key="index">
				<view class="scroll-tab-item" :class="{'active': tabIndex==index}" @tap="toggleTab(index)">
					{{item.name}}
					<view class="scroll-tab-line"></view>
				</view>
			</block>
		</scroll-view>
	</view>
	<view class="text-area">
		<text>{{text}}</text>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	let tabIndex = ref(0)
	let text = ref('')
	let baseUrl = 'https://test.cloud.boyuantech.net/protocol/'
	const protocolList = reactive([{
		name: '使用须知',
		content: ''
	}, {
		name: '隐私政策',
		content: ''
	}, {
		name: '个人信息授权',
		content: ''
	}, {
		name: '反恐法',
		content: ''
	}, {
		name: '旅游业治安管理办法',
		content: ''
	}])
	//切换选项卡
	async function toggleTab(index) {
		console.log('toggle index', index)
		tabIndex.value = index;
		if (!protocolList[index].content) {
			const res = await uni.request({
				url: baseUrl + protocolList[index].name + '.txt',
				method: 'GET'
			})
			if (res.statusCode === 200) {
				protocolList[index].content = res.data
			} else {
				uni.showToast({
					title: '请求失败！'
				})
			}
		}
		text.value = protocolList[index].content
	}
	onLoad(async () => {
		await toggleTab(0)
	})
</script>

<style lang="scss" scoped>
	.horizonal-tab {
		.scroll-tab {
			white-space: nowrap;
			border-bottom: 1rpx solid #ffffff;
			text-align: center;

			.scroll-tab-item {
				display: inline-block;
				text-align: center;
				margin: 20rpx 30rpx 0 30rpx;

				&.active {
					color: #a09cc4;
				}

				.scroll-tab-line {
					display: none; // 默认不显示
					border-bottom: 5rpx solid transparent;
					border-top: 5rpx solid transparent;
					border-radius: 20rpx;
					width: 100%;
				}

				&.active .scroll-tab-line {
					display: block;
					border-bottom-color: #a09cc4;
					border-top-color: #a09cc4;
				}
			}
		}
	}

	.text-area {
		background-color: #EFEFF4;
	}
</style>