Ropeskipping/pages/Project/MatchDetail/TeamDetail.vue

<template>
	<view>
		<ms-dropdown-menu class="select">
				<ms-dropdown-item v-model="value" :list="list"></ms-dropdown-item>
				<ms-dropdown-item v-model="value1" :list="list1"></ms-dropdown-item>
		</ms-dropdown-menu>
		<!-- <button type="default" @click="btn">123</button> -->
		<view class="player-box">
			<view class="player" :class="item.isjoin?'player-active':''" v-show="item.isjoin || edit - 0 === 1" v-for="(item,index) in list2" :key="index" @click="choice(index)">
				<icon type="icon" :class="item.isjoin?'backactive':''" class="cuIcon-roundcheckfill back"></icon>
				{{ item.name }}
			</view>
		</view>
		<button class="modify" type="default" @click="editData" :class="edit - 0 === 1?'mit':''">
			<text v-if="edit - 0 === 0">编辑</text>
			<text v-else-if="edit - 0 === 1">提交</text>
		</button>
	</view>
</template>

<script>
	import msDropdownMenu from '@/components/ms-dropdown/dropdown-menu.vue'
	import msDropdownItem from '@/components/ms-dropdown/dropdown-item.vue'
	export default {
		components: {
				msDropdownMenu,
				msDropdownItem
		},
		onLoad(option) {
			const that = this
			that.obj = JSON.parse(option.obj)
			console.log(that.obj)
		},
		data() {
			return {
				obj:{},
				list: [
					{
						text: '小学',
						value: 0
					},
					{
						text: '中学',
						value: 1
					},
					{
						text: '高职院校',
						value: 2
					},
					{
						text: '本科院校',
						value: 3
					},
					{
						text: '俱乐部',
						value: 4
					}
				],
				list1: [
					{
						text: '男子组',
						value: 0
					},
					{
						text: '女子组',
						value: 1
					},
					{
						text: '混合组',
						value: 2
					}
				],
				list2: [
					{
						name: '男子组',
						isjoin: 0
					},
					{
						name: '女子组',
						isjoin: 0
					},
					{
						name: '混合组',
						isjoin: 0
					},
					{
						name: '女子组',
						isjoin: 0
					},
					{
						name: '混合组',
						isjoin: 0
					},
					{
						name: '女子组',
						isjoin: 0
					},
					{
						name: '混合组',
						isjoin: 0
					},
					{
						name: '女子组',
						isjoin: 0
					},
					{
						name: '混合组',
						isjoin: 0
					},
					{
						name: '女子组',
						isjoin: 0
					},
					{
						name: '混合组',
						isjoin: 0
					}
				],
				value: 0,
				value1: 0,
				edit: 0,
				joinNum:0
			}
		},
		methods: {
			choose() {
				const that = this
				let obj = {
						value: 'test'
				}
				this.$refs.dropdownItem.choose(obj)
			},
			close() {
					this.$refs.dropdownItem.closePopup()
			},
			editData() {
				const that = this
				if(that.edit - 0 === 0) {
					that.edit = 1
				} else {
					if (that.joinNum - 0 === 0) {
						that.edit = 0
					} else if (that.joinNum < that.obj.memberMin) {
						uni.showToast({
							title:`小于最少人数${that.obj.memberMin}人`,
							icon: 'none',
							duration: 1500
						})
					} else if (that.joinNum > that.obj.memberMax) {
						uni.showToast({
							title:`大于最多人数${that.obj.memberMin}人`,
							icon: 'none',
							duration: 1500
						})
					} else {
						that.edit = 0
					}
				}
			},
			choice(index) {
				const that = this
				that.joinNum = 0
				if(that.list2[`${index}`].isjoin - 0 === 0) {
					that.list2[`${index}`].isjoin = 1
				} else {
					that.list2[`${index}`].isjoin = 0
				}
				for(var i=0; i<that.list2.length;i++) {
					if(that.list2[i].isjoin - 0 === 1) {
						that.joinNum++
					}
				}
				console.log(that.joinNum)
			}
		}
	}
</script>

<style lang="scss" scoped>
.select {
	position: fixed;
	z-index: 10;
	top: 44px;
	width: 750rpx !important;
	box-shadow: 0 2px 10px #aaa;
	margin-bottom: 20px;
}
.player-box {
	width: 670rpx;
	margin-top: 70px;
	margin-left: 35rpx;
}
.player {
	position: relative;
	height: 60px;
	margin-top: 10px;
	line-height: 60px;
	border-radius: 10px;
	text-align: center;
	box-shadow: 0 0 5px $gray;
}
.player-active{ 
	box-shadow: 0 0 4px #709AFC !important;
}
.back {
	position: absolute;
	color: $grey;
	font-size: 30px;
	left: 20px;
}
.backactive {
	color: #709AFC !important;
}
.modify {
	width: 670rpx;
	margin-left: 35rpx;
	margin-top: 50px;
	box-shadow: 2px 2px 5px #C0C0C0;
	margin-bottom: 100px;
}
.mit {
	background: $blue;
	color: $white;
}
</style>