match_applet/pages/home/index.vue

<template>
	<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
	<view class="content">
		<view class="one">
			<view class="one_1" @tap="toBasic">
				<image class="image" mode="aspectFill" :src="user.icon||config.logoUrl"></image>
				<text class="name">{{user.nickname||'体验账号'}}</text>
				<uni-icons style="padding: 4px 0 0 0;" type="forward" size="20" color="#ffffff"></uni-icons>
			</view>
			<view class="one_2">
				<view class="list" v-for="(item, index) in menuList" :key="index" @tap="toInfo(item)">
					<uni-icons custom-prefix="iconfont" :type="item.icon" size="18" :color="item.color"></uni-icons>
					<view class="name">{{item.name}}</view>
					<view class="num">{{item.num}}</view>
				</view>
			</view>
		</view>
		<view class="two">
			<uni-segmented-control :current="current" :values="list" @clickItem="onClickItem" styleType="text"
				activeColor="#dd524d"></uni-segmented-control>
			<view class="two_1">
				<view v-show="current === 0">
					<team></team>
				</view>
				<view v-show="current === 1">
					<activity></activity>
				</view>
				<view v-show="current === 2">
					<game></game>
				</view>
			</view>
		</view>
		<!-- 普通弹窗 -->
		<uni-popup ref="popup" background-color="#fff" type="bottom" @change="change">
			<view class="popup">
				<view class="top">
					<uni-icons @tap="toClose" type="closeempty" size="18" color="#999999"></uni-icons>
				</view>
				<view class="center">
					<text>以上为未登录体验数据 立即登录 开启俱乐部管理</text>
				</view>
				<view class="bottom">
					<button type="primary" size="mini" class="button" @click="toLogin">立即授权</button>
				</view>
			</view>
		</uni-popup>
		<!-- 悬浮按钮 -->
		<uni-fab :pattern="pattern" :content="content" horizontal="right" direction="vertical" @trigger="trigger" />
	</view>
</template>

<script setup lang="ts">
	import { getCurrentInstance, computed, ref } from 'vue';
	//该依赖已内置不需要单独安装
	import { onPullDownRefresh, onShow } from "@dcloudio/uni-app";
	import activity from './components/activity.vue';
	import game from './components/game.vue';
	import team from './components/team.vue';
	// 请求接口
	const $api = getCurrentInstance()?.appContext.config.globalProperties.$api;
	// openid
	const openid = computed(() => {
		return uni.getStorageSync('openid');
	})
	// 基本信息
	const config = ref({});
	// 用户信息
	const user = ref({});
	// 禁止滚动穿透
	const show = ref(false);
	// 标签列表
	const menuList = ref([
		{ name: '球队', num: '5', icon: 'icon-qi', color: '#1E90FF' },
		{ name: '|' },
		{ name: '出勤', num: '16%', icon: 'icon-kaoqinchuqin', color: '#FF4500' },
		{ name: '|' },
		{ name: '进球', num: '1', icon: 'icon-zuqiu', color: '#FFFFFF' },
	]);
	const list = ref(['球队', '活动', '赛事']);
	const current = ref(0);
	// 悬浮按钮
	const pattern = ref({
		color: '#3c3e49',
		backgroundColor: '#fff',
		selectedColor: '#fff',
		buttonColor: '#fff',
		iconColor: '#3c3e49'
	});
	const content = ref([{
		iconPath: '/static/qiudui.png',
		text: '建球队',
		route: '/pagesHome/team/index',
	},
	{
		iconPath: '/static/saishi.png',
		text: '建赛事',
		route: '/pagesHome/match/index',
	}
	]);
	// 弹框
	const popup = ref(null);
	onShow(() => {
		uni.hideHomeButton();
		search();
		searchConfig();
	})
	// 下拉刷新
	onPullDownRefresh(() => {
		uni.stopPullDownRefresh()
	})
	// 用户信息
	const search = async () => {
		const res = await $api(`matchUser/find`, 'GET', {
			openid: openid.value
		});
		if (res.code === 200) {
			if (res.data) console.log(res.data);
			else popup.value.open();
		} else {
			uni.showToast({
				title: res.msg || '',
				icon: 'error',
			});
		}
	};
	// config信息
	const searchConfig = async () => {
		config.value = uni.getStorageSync('config');
	};
	const change = (e) => {
		show.value = e.show
	};
	// 个人信息
	const toBasic = () => {
		uni.navigateTo({
			url: `/pagesMy/basic/index`,
		})
	};
	// 微信信任登录
	const toLogin = () => {
		uni.navigateTo({
			url: `/pages/login/index`,
		})
	};
	// 点击分页器
	const onClickItem = (e) => {
		if (current.value !== e.currentIndex) current.value = e.currentIndex
	};
	// 点击悬浮按钮
	const trigger = (e) => {
		uni.navigateTo({
			url: e.item.route,
		})
	};
	// 关闭弹框
	const toClose = () => {
		popup.value.close();
	};
</script>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;

		.one {
			height: 45vw;
			background-color: var(--f12Color);

			.one_1 {
				display: flex;
				align-items: center;
				padding: 4vw;
				color: var(--mainColor);

				.image {
					width: 15vw;
					height: 15vw;
					border-radius: 20vw;
				}

				.name {
					padding: 0 1vw 0 2vw;
					font-size: var(--font18Size);
				}
			}

			.one_2 {
				display: flex;
				justify-content: space-around;
				color: var(--mainColor);
				font-size: var(--font16Size);
				padding: 4vw;
				margin: 2vw 0 0 0;

				.list {
					display: flex;
					align-items: center;

					.name {
						padding: 0 1vw;
						color: var(--f85Color);
					}
				}
			}
		}

		.two {
			.two_1 {
				padding: 2vw;
			}
		}

		.popup {
			height: 25vw;
			padding: 2vw 2vw 0 2vw;

			.top {
				text-align: right;
			}

			.center {
				padding: 1vw 0 0 0;
				text-align: center;
				font-size: var(--font12Size);
				color: var(--f99Color);
			}

			.bottom {
				padding: 2vw;
				text-align: center;

				.button {
					font-size: var(--font14Size);
					border-radius: 2vw;
					background: linear-gradient(to right, #00BFFF, #3F94F1, #7B68EE);
				}
			}
		}
	}
</style>