Ropeskipping/pages/Athletes/Athletes.vue

<template>
	<view>
		<button v-show="cha !== 2" class="change" @click="change" :class="cha - 0 === 1 ? 'delsure' : ''">
			<text v-show="cha === 0">编辑</text>
			<text v-show="cha === 1">确定</text>
		</button>
		<view class="img-B" v-show="cha - 0 === 2" >
			<img src="static/item.png" class="img-box" />
			<view>
				暂无运动员信息
			</view>
		</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" >
				<view class="click-box" @click="details(a.playerId)">
					{{ a.playerName }}
				</view>
				<icon v-show="cha === 1" type="icon" class="cuIcon-roundclosefill del" @click="Del(a.playerId)"></icon>
			</view>
		</view>
		<view class="choice" @tap="jump">
			添加
		</view>
	</view>
</template>

<script>
import { groupplayer } from 'api/groupplayer'
import { delplayer } from 'api/delplayer'
	export default {
		async onLoad () {
			this.add()
		},
		data() {
			return {
				list: [],
				cha: 2
			}
		},
		methods: {
			async add() {
				const that = this
				try{
					const params = {
						param: {
							companyId: that.$store.state.project.companyId
						}
					}
					const data = await groupplayer(params)
					// console.log(data)
					that.list = data
					if (that.list[0]) {
						that.cha = 0
					} else {
						that.cha = 2
						uni.navigateTo({
							url: './AthAdd'
						})
					}
				}catch(e){
					//TODO handle the exception
					that.cha = 2
				}
			},
			jump() {
				uni.navigateTo({
					url:`./AthAdd`
				})
			},
			async Del(num) {
				const that = this
				uni.showModal({
					title: '提示',
					content: '确认要删除吗？',
					success:async function (res) {
						if (res.confirm) {
							try{
								const params = {
									param: {
										playerId: num
									}
								}
								const data = await delplayer(params)
								that.add()
								uni.showToast({
									title: '删除成功',
									icon: 'success',
									duration: 1500
								})
								that.$store.state.project.num++
							}catch(e){
								//TODO handle the exception
							}
						}
					}
				})
			},
			change() {
				const that = this
				if (that.cha - 0 === 0) {
					that.cha = 1
				} else {
					that.cha = 0
				}
			},
			details(id) {
				uni.navigateTo({
					url: `./AthAdd?id=${id}`
				})
			}
		},
		watch:{
			'$store.state.project.num'(val) {
				const that = this
				that.add()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.member-box {
		margin-left: 35rpx;
		width: 680rpx;
	} 
	.member-title {
		height: 40px;
		line-height: 40px;
		font-size: 16px;
		margin-top: 10px;
		border-bottom: 1px solid $grey;
	}
	.member-con {
		position: relative;
		height: 60px;
		margin-top: 10px;
		line-height: 60px;
		border-radius: 10px;
		text-align: center;
		box-shadow: 0 0 5px $gray;
	}
	.active {
		box-shadow: 0 0 4px $green !important;
	}
	.choice {
		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;
	}
	.man-num {
		margin-left: 20px;
		font-size: 14px;
		color: $gray;
	}
	.del {
		font-size: 28px;
		position: absolute;
		right: 10px;
		top: 0;
		font-weight: 700;
		color: $red;
	}
	.change {
		position: absolute;
		top: 5px;
		height: 30px;
		line-height: 30px;
		background: #eee;
		font-size: 14px;
		right: 40rpx;
	}
	.delsure {
		background: $green;
		color: $white;
	}
	.click-box {
		margin: 0 50px;
	}
	.img-box {
		width: 70%;
		height: 70%;
	}
	.img-B {
		width: 100%;
		margin-top: 100px;
		height: 450rpx;
		text-align: center;
		color: #aaa;
	}
</style>