school_ecology_h5/pages/set_act/set_act.vue

<template>
	<view class="container">
		<!-- 分段器区域 -->
		<common-controlTag :tagList="tagList" type="between" @change="changeIndex"></common-controlTag>

		<!-- 发起活动内容区域 -->
		<view class="set" v-if="currentIndex == 0">
			<act-set-form></act-set-form>
		</view>

		<!-- 我发起的活动内容区域 -->
		<view class="myset" v-if="currentIndex == 1">
			<my-set></my-set>
		</view>

		<!-- 我参加的活动内容区域 -->
		<view class="myjoin" v-if="currentIndex == 2">
			<my-join></my-join>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'

// 分段器数组
const tagList = ['发起活动', '我发起的活动', '我参加的活动']

// 分段器当前索引
const currentIndex = ref(0)

// 切换分段器时触发的回调
const changeIndex = (e) => {
	// console.log(e)
	currentIndex.value = e
}
</script>

<style lang="scss" scoped>
.container {
	padding: 20rpx 18rpx;
	min-height: 100vh;

	.set {
		margin-top: 20rpx;
	}

	.myset {
	}

	.myjoin {
	}
}
</style>