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'
import MathModal from './components/math.uvue'
import { bindWechatOpenId } from "@/services/user";
import { useUi } from "@/uni_modules/cool-ui";
import { exchangeCode } from '@/services/user'
const ui = useUi();
const menuList = computed(() => {
	return [
		...dict.getChildrenList('index_subject_id'),
		{
			label: '少儿编程',
			code: 'coding'
		},
		{
			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",
	math: "https://oss.xiaoxiongcode.com/static/home/math.png",
	coding: "https://oss.xiaoxiongcode.com/static/home/coding.png",
}
const selected = ref<string>('physics')
function handlePage(val: any) {
	if (val.code === 'user') {
		router.push({ path: '/pages/user/info' })
		return
	}
	if (val.code === 'coding') {
		visible2.value = true
		return
	}
	selected.value = val.code

}
const userInfo = computed(() => user.info.value?.userInfo)


const visible = ref(false)
const visible2 = ref(false)
const visible3 = ref(false)
const visible4 = ref(false)
onMounted(async () => {
	if (!userInfo.value.wxOpenId) {
		visible4.value = true
		return
	} else if (userInfo.value.memberLevel === 'default') {
		visible3.value = true
		return
	}

})
async function handleClosePopup1() {
	await handleBind()
	visible4.value = false
	if (userInfo.value.memberLevel === 'default') {
		visible3.value = true
	}
}
function handleClosePopup2() {
	visible4.value = false
	userInfo.value.wxOpenId = true
	if (userInfo.value.memberLevel === 'default') {
		visible3.value = true
	}
}
function copyUrl() {
	uni.setClipboardData({
		data: 'www.xiaoxiongcode.com',
		success: (res) => {
			uni.showToast({
				title: '复制成功',
				icon: 'success'
			});
		}
	});
}
const handleBind = async () => {
	uni.login({
		provider: 'weixin',
		success: async (res) => {
			await bindWechatOpenId({ code: res.code })
			uni.showToast({
				title: '授权成功，请重新登录'
			})
			await user.get()
		}
	})
}
const code = ref<string>('')

async function handleExchange() {
	if (!code.value) {
		uni.showToast({
			title: '请输入兑换码',
			icon: 'none'
		})
		return
	}
	try {
		await exchangeCode({
			exchangeCode: code.value,
			subjectId: dict.getValueByLabelMapByType('index_subject_id')['物理'],
		})
		await user.get()
		ui.showConfirm({
			title: "提示",
			message: "兑换成功",
			showCancel: false,
			callback(action) {
				visible3.value = false
			},
		});
	} catch (err: any) {
		uni.showToast({
			title: err.message,
			icon: 'error'
		})
	}
}
</script>
<template>
	<cl-page :backTop="false">
		<image src="https://oss.xiaoxiongcode.com/static/home/111.png" mode="aspectFill" lazy-load alt=""
			class="w-full h-full object-cover absolute top-0 left-0" />
		<view class="menus w-[90vw]">
			<image lazy-load src="https://oss.xiaoxiongcode.com/static/home/643.png"
				class="w-[90vw] h-[24vh] absolute top-0 left-0 z-[1]"></image>
			<view class="w-[87vw] relative z-[2] p-1 px-3 flex flex-row items-center justify-between gap-1 mx-auto ">
				<view v-for="item in menuList" :key="item.code"
					class="flex flex-col items-center p-1 px-4 justify-center gap-1  transition-all duration-300"
					@tap="handlePage(item)" :class="{ 'selected': item.code === selected }">
					<image lazy-load :src="icons[item.code]" mode="aspectFill" class="w-[4vw] h-[4vw]"></image>
					<text class="text-[1.5vw] text-[#1E1E1E]">{{ item.label }}</text>
				</view>

			</view>
		</view>
		<cl-float-view :left="20" :bottom="100" v-if="!userInfo.roleCodes?.includes('show_time')">
			<view
				class="flex flex-col items-center p-1 px-4 justify-center gap-1 w-[40px] h-[40px] transition-all duration-300"
				@tap="visible = true">
				<view class="bg-[#09ba07] p-[1vw] rounded-full w-[40px] h-[40px] flex items-center justify-center"
					@tap="visible = true">
					<cl-icon name="customer-service-line" :size="20" color="#FFF"></cl-icon>
				</view>
			</view>
		</cl-float-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>
		<cl-popup v-model="visible2" :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/coding.png" class="w-32 h-32" />
				<view class="text-center " v-if="userInfo?.memberLevel !== 'default'">
					<cl-text class="text-center" color="#999" :size="14">账号：小程序登录手机账号 </cl-text>
					<cl-text class="text-center" color="#999" :size="14"> 密码：初始密码为123456 </cl-text>
					<cl-text class="text-center" v-if="!userInfo.roleCodes?.includes('show_time')" color="#999"
						:size="14">少儿编程网址: www.xiaoxiongcode.com </cl-text>
					<cl-text class="text-center" v-else color="#999" :size="14">少儿编程网址: ************* </cl-text>
					<cl-button type="primary" size="small" @tap="copyUrl"> 复制网址 </cl-button>
				</view>
				<view class="text-center " v-else>
					<cl-text class="text-center" color="#999" :size="14"> 您不是会员，无法使用会员福利 </cl-text>
				</view>
			</view>
		</cl-popup>
		<cl-popup v-model="visible3" showClose :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="#333" :size="25"> ——激活会员—— </cl-text>

				<input
					class="w-[200px] h-[40px] bg-[#F5F5F5] border-[1px] border-[#333] border-solid rounded-[20px] px-[10px]"
					v-model="code" placeholder="请输入兑换码"></input>

				<cl-button class="mt-4" size="large" type="primary" block @tap="handleExchange"> 兑换 </cl-button>

			</view>
		</cl-popup>
		<cl-popup v-model="visible4" showClose :show-header="false" direction="center" :pt="{
			inner: {
				className: '!bg-transparent'
			}
		}">
			<view class="w-[360px]  relative">
				<image src="https://oss.xiaoxiongcode.com/static/home/6171.png" mode="widthFix"
					class="w-[360px]  relative ">
				</image>
				<view class=" wz-1  ">
					您当前未绑定微信，是否绑定微信?
				</view>
				<view class="wz-2  " @tap="handleClosePopup1">
					绑定
				</view>
				<view class="wz-3  " @tap="handleClosePopup2">
					取消
				</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'" />
		<MathModal v-else-if="selected === 'math'" />
	</cl-page>
</template>
<style lang="scss" scoped>
.wz-1 {
	@apply absolute text-black text-[18px] font-bold w-[330px] text-center;
	line-height: 40px;
	left: 50%;
	transform: translateX(-50%);
	top: 48%;
}

.wz-2 {
	@apply absolute bottom-[12px] text-white text-[18px] font-bold text-center;
	right: 31%;
	bottom: 17%;
}

.wz-3 {
	@apply absolute bottom-[12px] text-white text-[18px] font-bold text-center;
	left: 26%;
	bottom: 17%;
}

.menus {
	@apply mt-[3vh] mx-auto rounded-[20px];
}

.selected {
	@apply scale-[1.1] bg-[#efefef99] rounded-xl;
	font-weight: bold;
}

.text-stroke {
	text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;
}

.check {
	background: linear-gradient(0deg, #FBD00E 0%, #FBEC92 100%);
}
</style>