youxi-app/pages/index/home.uvue

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'
import { dict } from '@/.cool/store'
import { router } from '@/.cool'
import { user } from '@/.cool'
import Physics from './components/physics.uvue'
import Chinese from './components/chinese.uvue'
import English from './components/english.uvue'
import Mix from './components/mix.uvue'
import Game from './components/game.uvue'
import Exchange from './components/exchange.uvue'

const menuList = computed(() => {
	return [
		...dict.getChildrenList('index_subject_id'),
		{
			label: '兑换',
			code: 'exchange'
		},
		{
			label: '个人中心',
			code: 'user'
		},
	]
})
const icons = {
	physics: "https://oss.xiaoxiongcode.com/static/home/wl.png",
	chinese: "https://oss.xiaoxiongcode.com/static/home/语文.png",
	english: "https://oss.xiaoxiongcode.com/static/home/英语.png",
	mix: "https://oss.xiaoxiongcode.com/static/home/百度百科.png",
	game: "https://oss.xiaoxiongcode.com/static/home/娱乐.png",
	exchange: "https://oss.xiaoxiongcode.com/static/home/图层 5.png",
	user: "https://oss.xiaoxiongcode.com/static/home/个人中心.png",
}
const selected = ref<string>('physics')
function handlePage(val: any) {
	if (val.code === 'user') {
		router.push({ path: '/pages/user/info' })
		return
	}
	selected.value = val.code

}
onMounted(() => {
	console.log(menuList.value)
})
function handleView(url) {
	router.push({ path: url })
}
const userInfo = computed(() => user.info.value?.userInfo)
const visible = ref(false)

</script>
<template>
	<cl-page :backTop="false">
		<img src="https://oss.xiaoxiongcode.com/static/home/11.jpg" alt="" class="w-full h-full object-cover" />
		<view class="menus ">
			<view v-for="item in menuList" :key="item.code"
				class="flex flex-col items-center p-1 px-4 justify-center gap-1 active:scale-[.9] transition-all duration-300"
				@tap="handlePage(item)" :class="{ 'selected': item.code === selected }">
				<cl-image :src="icons[item.code]" mode="aspectFill" width="40" height="40"></cl-image>
				<text class="text-[12px]">{{ item.label }}</text>
			</view>
		</view>
		<view class="flex flex-col items-center justify-center fixed bottom-[3vh] right-[3vh]  " >
			<view class="bg-[#09ba07] p-2 rounded-full border-[2px] border-[#FFF] border-solid " @tap="visible = true">
				<image src="https://oss.xiaoxiongcode.com/static/个人中心/微信.png" class="w-5 h-5"></image>
			</view>
			<text class="text-[14px] text-white font-bold text-stroke">添加老师</text>
		</view>
		<cl-popup v-model="visible"  :size="400" :show-header="false" direction="center">
			<view class="flex flex-col items-center justify-center gap-4 py-7 bg-slate-50">
				<cl-text class="text-center " color="#09ba07" :size="30"> ——专属服务内容—— </cl-text>
				<image src="https://oss.xiaoxiongcode.com/static/home/qr.png"  show-menu-by-longpress   class="w-32 h-32" />
				<view class="text-center "> <cl-text class="text-center" color="#999" :size="14"> 长按识别二维码 </cl-text>
				<cl-text class="text-center" color="#999" :size="14"> 添加微信，享专业老师服务 </cl-text> </view>
			</view>
		</cl-popup>
		<Physics v-if="selected === 'physics'" />
		<Chinese v-else-if="selected === 'chinese'" />
		<English v-else-if="selected === 'english'" />
		<Mix v-else-if="selected === 'mix'" />
		<Game v-else-if="selected === 'game'" />
		<Exchange v-else-if="selected === 'exchange'" />
	</cl-page>
</template>
<style lang="scss" scoped>
.menus {
	@apply absolute top-[3vh] left-1/2 bg-white rounded-[20px] p-2 px-3 flex flex-row items-center justify-center gap-2;
	transform: translateX(-50%);
}

.selected {
	@apply scale-[1.1] bg-[#f0f0f0] rounded-xl;
}

.text-stroke {
	text-shadow: 
		-1px -1px 0 #000,  
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;
}
</style>