match_applet/pagesHome/team/person.vue

<template>
	<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
	<view class="content">
		<view class="one">
			<view class="list" v-for="(item, index) in sortList" :key="index" @tap="toSort(item)">
				<view class="name">{{item.name}}</view>
				<view class="icon">
					<uni-icons style="height: 2vw;" custom-prefix="iconfont" type="icon-shangjiantou" size="10"
						:color="item.color1"></uni-icons>
					<uni-icons style="height: 2vw;" custom-prefix="iconfont" type="icon-xiajiantou" size="10"
						:color="item.color2"></uni-icons>
				</view>
			</view>
		</view>
		<view class="two">
			<view class="two_1">
				<button size="mini" open-type="share" style="margin: 0;">
					<uni-icons custom-prefix="iconfont" type="icon-yaoqinghuida" size="20" color="#121212"></uni-icons>
					<text>邀请好友加入球队</text>
				</button>
			</view>
			<view class="two_2">
				<view class="list" v-for="(item, index) in list" :key="index" @tap="toInfo(item)">
					<view class="type">{{item.type||''}}</view>
					<image class="image" mode="aspectFill" :src="item.icon||config.logoUrl">
					</image>
					<view class="name">{{item.name||item.phone}}</view>
					<uni-icons custom-prefix="iconfont" type="icon-31dianhua" size="25" color="#20B2AA"></uni-icons>
				</view>
			</view>
		</view>
		<view class="thr">
			<view class="thr_1">临时球员</view>
			<view class="thr_2" @tap="toCreate">
				<uni-icons custom-prefix="iconfont" type="icon-yaoqinghuida" size="25" color="#121212"></uni-icons>
				<text>创建临时成员</text>
			</view>
		</view>
		<!-- 添加临时成员 -->
		<uni-popup ref="popup" background-color="rgba(0,0,0,0)" type="center" @change="change">
			<view class="popup">
				<view class="popup_1">
					<view class="name">临时创建球员</view>
					<uni-icons @tap="toClose" type="closeempty" size="18" color="#999999"></uni-icons>
				</view>
				<view class="info">
					<form @submit="toAdd">
						<view class="value">
							<view class="title">手机号码</view>
							<view class="label">
								<input name="phone" class="input" :value="form.phone" placeholder="请输入手机号码" />
							</view>
						</view>
						<view class="value">
							<view class="title">球员姓名</view>
							<view class="label">
								<input name="name" class="input" :value="form.name" placeholder="请输入球员姓名" />
							</view>
						</view>
						<view class="value">
							<view class="title">球衣号码</view>
							<view class="label">
								<input name="num" class="input" :value="form.num" placeholder="请输入球衣号码" />
							</view>
						</view>
						<view class="button">
							<button type="warn" form-type="submit">添加球员</button>
						</view>
					</form>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { getCurrentInstance, ref } from 'vue';
	//该依赖已内置不需要单独安装
	import { onLoad } from "@dcloudio/uni-app";
	// 请求接口
	const $api = getCurrentInstance()?.appContext.config.globalProperties.$api;
	const $config = getCurrentInstance()?.appContext.config.globalProperties.$config;
	interface PropsItem {
		id ?: number,
		name ?: string,
		icon ?: string,
		phone ?: string,
		type ?: string,
	};
	// 基本信息
	const config = ref({ logoUrl: '' });
	// 基本信息
	const show = ref(false);
	// 详情信息id
	const id = ref('');
	// 排序列表
	const sortList = ref([
		{ name: 'A-Z', type: '0', sort: -1, color1: '#121212', color2: '#999999' },
		{ name: '位置', type: '1', sort: 1, color1: '#121212', color2: '#121212' },
		{ name: '职位', type: '2', sort: 1, color1: '#121212', color2: '#121212' },
		{ name: '号码', type: '3', sort: 1, color1: '#121212', color2: '#121212' },
	]);
	// 列表
	const list = ref<PropsItem[]>([{ id: 1, phone: '1234567890' }, { id: 1, name: '肝帝集团队' }]);
	// 分页
	const skip = ref(0);
	const limit = ref(6);
	const page = ref(0);
	const total = ref(0);
	// 弹框
	const popup = ref(null);
	// 临时成员
	const form = ref({});
	// 用户信息
	const user = ref({});
	// 球队信息
	const teamInfo = ref({});
	onLoad(async (options) => {
		id.value = options && options.id
		await searchUser();
		await searchConfig();
		await search();
		await searchShare();
	})
	// 用户信息
	const searchUser = async () => {
		user.value = uni.getStorageSync('user');
	};
	// config信息
	const searchConfig = async () => {
		config.value = uni.getStorageSync('config');
	};
	// 查询
	const search = async () => {
		if (id.value) {
			uni.setNavigationBarTitle({
				title: `球队阵容(${total.value})`
			});
			const res = await $api(`team/${id.value}`, 'GET', {});
			if (res.code === 200) {
				if (res.data) teamInfo.value = res.data
			} else {
				uni.showToast({
					title: res.msg || '',
					icon: 'error',
				});
			}
		}
	};
	// 用户详细信息
	const toInfo = async (item : any) => {
		// uni.navigateTo({
		// 	url: `/pagesHome/person/index?id=${item._id || item.id}`,
		// })
		uni.navigateTo({
			url: `/pagesHome/share/index?id=${id.value}`,
		})
	};
	// 去排序
	const toSort = async (item : any) => {
		let list;
		if (item.sort === -1) {
			list = sortList.value.map(i => {
				if (i.type === item.type) {
					i.sort = 1
					i.color1 = '#999999'
					i.color2 = '#121212'
				} else {
					i.color1 = '#121212'
					i.color2 = '#121212'
				}
				return i;
			})
		} else {
			list = sortList.value.map(i => {
				if (i.type === item.type) {
					i.sort = -1
					i.color1 = '#121212'
					i.color2 = '#999999'
				} else {
					i.color1 = '#121212'
					i.color2 = '#121212'
				}
				return i;
			})
		}
		sortList.value = list
	};
	// 邀请分享配置
	const searchShare = () => {
		$config.share = {
			title: `${user.value.name || '暂无名称'}邀请你加入${teamInfo.value.name || '暂无团队'}`,
			path: `/pagesHome/share/index?id=${id.value}` //后面是路径上要传递的参数
		}
	}
	// 创建临时成员
	const toCreate = () => {
		popup.value.open();
	};
	// 关闭弹框
	const toClose = () => {
		popup.value.close();
	};
	// 添加临时成员
	const toAdd = (e) => {
		console.log(e.deatil.value);
	};
	const change = (e) => {
		show.value = e.show
	};
</script>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;

		.one {
			padding: 2vw;
			display: flex;
			justify-content: space-between;
			background-color: var(--f9Color);

			.list {
				display: flex;
				padding: 2vw;

				.icon {
					display: flex;
					flex-direction: column;
					position: relative;
					top: -5px;
					left: 2px;
				}
			}
		}

		.two {
			padding: 0 2vw;

			.two_1 {
				display: flex;
				padding: 4vw 2vw;
				border-bottom: 1px solid var(--footColor);

				text {
					padding: 0 1vw;
					font-size: var(--font18Size);
				}
			}

			.two_2 {

				.list {
					display: flex;
					align-items: center;
					padding: 2vw 0;
					border-bottom: 1px solid var(--footColor);

					.type {
						width: 10vw;
						padding: 0 0 0 1vw;
						color: var(--f85Color);
						font-size: var(--font12Size);
					}

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

					.name {
						width: 60vw;
						font-size: var(--font16Size);
						padding: 0 2vw;
					}
				}
			}
		}

		.thr {
			.thr_1 {
				padding: 3vw;
				background-color: var(--f9Color);
				font-size: var(--font14Size);
				color: var(--f85Color);
			}

			.thr_2 {
				display: flex;
				padding: 4vw 2vw;
				border-bottom: 1px solid var(--footColor);

				text {
					padding: 0 1vw;
					font-size: var(--font18Size);
				}
			}
		}

		.popup {
			display: flex;
			flex-direction: column;
			background: var(--mainColor);
			width: 90vw;
			height: 45vh;
			padding: 2vw;
			border-radius: 15px;

			.popup_1 {
				display: flex;
				justify-content: space-between;
				padding: 2vw;
				font-size: var(--font18Size);
			}

			.info {
				margin: 4vw 0;

				.value {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 3vw 2vw;
					border-bottom: 1px solid var(--footColor);
					font-size: var(--font16Size);

					.label {

						.input {
							text-align: right;
						}
					}
				}

				.button {
					margin: 8vw 0 0 0;
					text-align: center;

					button {
						width: 80vw;
						font-size: var(--font16Size);
					}
				}
			}
		}
	}
</style>