Ropeskipping/pages/Project/MatchDetail/MatchDetail.vue

<template>
	<view>
		<view class="match-name">
			{{ objdata.name }}
		</view>
		<view class="match-Name"></view>
		<view class="sign-up" v-show="submit === 0" @click="changeSub">
			添加报名
		</view>
<!-- 		<view class="sign-up" v-show="submit === 0" @click="changeSub">
			已报名{{}}/{{ objdata.memberMax }}人
		</view> -->
		<view class="member-box" v-for="(item,index) in list" :key="index">
			<view class="member-title">{{ item.groupName }}</view>
			<view class="member-con" v-for="(a,b) in item.playerList" :key="b" :class="a.joinProject ? 'active' : ''" v-show="(a.joinProject === 1||submit === 1)? true : false" @click="submit === 1? change(index,b) : ''">
				<icon v-show="submit === 1" type="icon" class="cuIcon-roundcheckfill back" :class="a.joinProject ? 'backactive' : ''"></icon>{{ a.playerName }}
			</view>
		</view>
		<button @click="trans" v-show="submit === 1" type="default" class="btn cu-btn bg-green margin-tb-sm lg">提交</button>
	</view>
</template>

<script>
import { groupplayer } from 'api/groupplayer'
import { join } from 'api/join'
	export default {
		onLoad(option) {
			const obj = JSON.parse(option.obj)
			const that = this
			that.objdata = obj
			that.query()
		},
		data() {
			return {
				list: [],
				objdata: {},
				submit: 2,
				changeList: [],
				originalList: []
			}
		}, 
		methods: {
			async query () {
				const that = this
				try{
					const params = {
						param: {
							companyId: that.$store.state.project.companyId,
							projectId: that.objdata.id
						}
					}
					const data = await groupplayer(params)
					// console.log(data)
					that.list = data
					if (that.list[0]) {
						that.submit = 0
					} else {
						that.submit = 2
					}
				}catch(e){
					//TODO handle the exception
				}
			},
			change (a,b) {
				const that = this
				// console.log(that.list[a].playerList[b])		// 本次点击的队员
				var obj = {}
				if (that.originalList.length === 0) {
					obj.playerId = that.list[a].playerList[b].playerId
					obj.joinProject = that.list[a].playerList[b].joinProject
					obj.playerName = that.list[a].playerList[b].playerName
					that.originalList.push(obj)
				} else {
					// console.log('数组长度大于0了')
					for (var i=0; i<that.originalList.length; i++) {
						// console.log(i)
						if (that.originalList[i].playerId === that.list[a].playerList[b].playerId) {
							// console.log('一样，不添加')
							break
						}
						if (i + 1 === that.originalList.length) {
							// console.log('已经循环到最后了，添加并且跳出for循环吧')
							obj.playerId = that.list[a].playerList[b].playerId
							obj.joinProject = that.list[a].playerList[b].joinProject
							obj.playerName = that.list[a].playerList[b].playerName
							that.originalList.push(obj)
							break
						}
					}
				}
				
				if (that.list[a].playerList[b].joinProject - 0 === 0) {
					that.list[a].playerList[b].joinProject = 1
				} else {
					that.list[a].playerList[b].joinProject = 0
				}
				
				if (that.changeList.length === 0) {
					that.changeList.push(that.list[a].playerList[b])
				} else {
					for (var i=0; i<that.changeList.length; i++) {
						if (that.changeList[i].playerId === that.list[a].playerList[b].playerId) {
							that.changeList[i].joinProject = that.list[a].playerList[b].joinProject
							break
						}
						if (i + 1 === that.changeList.length) {
							that.changeList.push(that.list[a].playerList[b])
							break
						}
					}
				}
				
				for (var i=0; i<that.originalList.length; i++) {
					for (var j=0; j<that.changeList.length; j++) {
						if (that.originalList[i].playerId === that.changeList[j].playerId) {
							if (that.originalList[i].joinProject === that.changeList[j].joinProject) {
								that.changeList.splice(j,1)
								break
							}
						}
					}
				}
				
				console.log(that.changeList)
			},
			changeSub() {
				const that = this
				that.submit = 1
			},
			async trans() {
				const that = this
				try{
					const params = {
						param: {
							companyId: that.$store.state.project.companyId,
							competeTimeId: that.$store.state.project.data.id,
							players: that.changeList,
							projectId: that.objdata.id
						}
					}
					const data = await join(params)
					uni.showToast({
						title: '报名成功',
						icon: 'success',
						duration: 1500
					})
					that.changeList = []
					that.originalList = []
					that.query()
					that.$store.state.project.num++
					that.submit = 0
				}catch(e){
					//TODO handle the exception
					that.submit = 1
					uni.showToast({
						title: e,
						icon: 'none',
						duration: 1500
					})
				}
			}
		}
	}
</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: 20px;
		font-size: 16px;
		font-weight: 600;
	}
	.match-Name {
		height: 40px;
	}
	.member-box {
		margin-left: 35rpx;
		width: 680rpx;
	} 
	.member-title {
		height: 40px;
		line-height: 40px;
		font-size: 18px;
		margin-top: 10px;
		border-bottom: 1px solid $grey;
	}
	.member-con {
		position: relative;
		height: 60px;
		margin-top: 10px;
		line-height: 60px;
		border-radius: 10px;
		padding-left: 50%;
		box-shadow: 0 0 4px $gray;
	}
	.active {
		box-shadow: 0 0 4px #709AFC !important;
	}
	.btn {
		width: 680rpx;
		margin-left: 35rpx;
		margin-top: 30px;
		background: #709AFC;
		color: $white;
	}
	.back {
		position: absolute;
		color: $grey;
		font-size: 30px;
		left: 20px;
	}
	.backactive {
		color: #709AFC !important;
	}
	.sign-up {
		position: absolute;
		right: 35rpx;
		top: 88rpx;
		padding: 5px 10px;
		border-radius: 5px;
		box-shadow: 0 0 5px $gray;
	}
</style>