Ropeskipping/pages/Project/MatchDetail/TeamMatch.vue

<template>
	<view>
		<view class="match-name">
			{{ obj.name }}
		</view>
		<view class="match-Name"></view>
		<view v-if="item.playerList[0]" class="match-team" v-for="(item,index) in list" :key="index">
			<view class="team-name">
				<text v-if="obj.joinRule - 0 === 0">{{ item.groupName }}</text>
				<text v-else>不限组别</text>
				<icon type="icon" class="cuIcon-close icon" @click="del(item.teamId)"></icon>
			</view>
			<view class="team-player">
				<view class="team-man" v-for="(a,b) in item.playerList" :key="b">
					{{ a.playerName }}
				</view>
			</view>
			<button type="default" class="change" @click="edit(item.gender,item.groupRemark)">编辑</button>
		</view>
		<view class="img-B" v-else>
			<img src="static/item.png" class="img-box" />
			<view>
				暂无报名信息
			</view>
		</view>

		<view class="add" @click="addTeam">添加</view>
	</view>
</template>

<script>
	import { delTeam } from 'api/delTeam'
	import { teamProject } from 'api/teamProject'
	export default {
		onLoad(option) {
			const that = this
			var OBJ = JSON.parse(option.obj)
			// console.log(option.TypeNum,OBJ)
			that.obj = OBJ
			that.query()
		},
		data() {
			return {
				obj: {},
				list: []
			}
		},
		methods: {
			del(index) {
				const that = this
				uni.showModal({
					title: '提示',
					content: '确定要删除整组么？',
					success: async (res) => {
						if (res.confirm) {
							// console.log(index)
							const params = {
								param: {
									teamId: index
								}
							}
							const data = await delTeam(params)
							that.$store.state.project.Mat++
							uni.showToast({
								title: '删除成功',
								icon: 'success',
								duration: 1500
							})
						}
					}
				})
			},
			edit(gender,groupRemark) {
				const that = this
				const obj = that.obj
				uni.navigateTo({
					url: `./TeamDetail?obj=${JSON.stringify(obj)}&gender=${gender}&groupRemark=${groupRemark}`
				})
			},
			addTeam() {
				const that = this
				const obj = that.obj
				uni.navigateTo({
					url: `./TeamDetail?obj=${JSON.stringify(obj)}`
				})
			},
			async query() {
				const that = this
				const params = {
					param: {
						companyId: that.$store.state.project.companyId,
						projectId: that.obj.id
					}
				}
				const data = await teamProject(params)
				that.list = data
				// console.log(that.list)
			}
		},
		watch:{
			'$store.state.project.Mat'(val) {
				const that = this
				that.query()
			}
		}
	}
</script>

<style lang="scss" scoped>
.match-name {
	position: fixed;
	text-align: center;
	width: 100%;
	top: 44px;
	height: 40px;
	line-height: 40px;
	background: $white;
	z-index: 10;
	font-size: 16px;
	font-weight: 600;
}
.match-Name {
	height: 40px;
}
.match-team {
	// background: $yellowLight;
	box-shadow: 0 0 10px #C0C0C0;
	width: 670rpx;
	padding-bottom: 30px;
	margin-left: 35rpx;
	height: auto;
	max-height: 240px;
	margin-top: 20px;
	border-radius: 25px;
	position: relative;
}
.team-name {
	height: 40px;
	line-height: 40px;
	width: 100%;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	border-bottom: 1px solid $blueShadow;
}
.change {
	width: 60px;
	height: 30px;
	font-size: 14px;
	line-height: 30px;
	position: absolute;
	right: 10px;
	bottom: 6px;
}
.team-player {
	width: 100%;
	max-height: 160px;
	padding: 10px;
	overflow: auto;
}
.team-man {
	padding: 2px 10px;
	float: left;
	height: 40px;
	margin-right: 10px;
	margin-bottom: 10px;
	line-height: 40px;
	font-size: 12px;
	border-radius: 10px;
	box-shadow: 0 0 5px $blue;
}
.icon {
	position: absolute;
	top: 0;
	right: 10px;
	font-size: 24px;
	color: #C0C0C0;
}
.add {
	position: fixed;
	width: 150rpx;
	height: 150rpx;
	background: #709AFC;
	box-shadow: 0 0 20px #709AFC;
	border-radius: 50%;
	color: $white;
	right: 10px;
	bottom: 100px;
	text-align: center;
	line-height: 150rpx;
	font-size: 18px;
}
.img-box {
	width: 70%;
	height: 70%;
}
.img-B {
	width: 100%;
	margin-top: 100px;
	height: 450rpx;
	text-align: center;
	color: #aaa;
}
</style>