Ropeskipping/pages/First/First.vue

<template>
	<view>
		<swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
		 :autoplay="true" interval="3000" duration="500">
			<swiper-item v-for="(item,index) in swiperList" :key="index">
				<img class="img" :src="item.url" mode="aspectFill" v-if="item.type=='img'"></img>
			</swiper-item>
		</swiper>
		<view class="item-box" v-for="(item,index) in list" :key="index" @click="jump(index)">
			<view class="item-num">{{ index + 1 }}</view>
			<text class="item-content">{{ item.title }}</text>
			<view v-show="item.complete + 1" class="item-infor">
				<text v-if="datalist.companyId === null">未填写</text>
				<text v-else>已填写</text>
			</view>
			<view v-show="item.leader + 1" class="item-infor">
				<text>领队{{ datalist.guideNum }}人，教练{{ datalist.coachNum }}人</text>
			</view>
			<view v-show="item.athletes + 1" class="item-infor">
				<text>运动员{{ datalist.playerNum }}人</text>
			</view>
			<view v-show="item.project + 1" class="item-infor">
				<text>参赛项目{{ datalist.projectNum }}项</text>
			</view>
		</view>
	</view>
</template>

<script>
import { competeTime } from 'api/competeTime'
import { overview } from 'api/overview'
	export default {
		onLoad () {
			this.query()
		},
		data() {
			return {
				list: [{
					title:'基础信息',
					complete: 1
				}, {
					title:'领队及教练信息',
					leader: 2,
					coach: 0
				}, {
					title:'运动员注册',
					athletes: 4
				}, {
					title:'参赛项目',
					project: 0
				}],
				projectId: 0,
				companyId: 0,
				datalist: {},
				dotStyle: true,
				swiperList: [{
					id: 0,
					type: 'img',
					url: 'static/title.png'
				}, {
					id: 1,
					type: 'img',
					url: 'static/item01.png',
				}, {
					id: 2,
					type: 'img',
					url: 'static/item02.png'
				}]
			}
		},
		methods: {
			async query () {
				const that = this
				try{
					const params = {
						param: {
							type: 0
						}
					}
					const data = await competeTime(params)
					that.projectId = data.id
					that.$store.state.project.data = data
					console.log(that.$store.state.project.data)
					if (data.id) {
						const params = {
							param : {
								competeTimeId: data.id
							}
						}
						const datalist = await overview(params)
						if (datalist.companyId) {
							that.companyId = datalist.companyId
						}
						console.log(datalist.companyId)
						that.datalist = datalist
						that.$store.state.project.companyId = datalist.companyId
						console.log(that.$store.state.project.companyId)
					}
				}catch(e){
					//TODO handle the exception
					uni.showToast({
						title: e,
						icon: 'none'
					})
				}
			},
			jump (num) {
				const that = this
				if (that.$store.state.project.companyId) {
					if (num === 0) {
						uni.navigateTo({
							url:`../Basics/Basics?id=${that.projectId}&companyId=${that.companyId}`
						})
					} else if (num + 1 === 2) {
						uni.navigateTo({
							url:`../Choice/Choice`
						})
					} else if (num + 1 === 3) {
						uni.navigateTo({
							url:`../Athletes/Athletes`
						})
					} else if (num + 1 === 4) {
						if (that.datalist.playerNum) {
							uni.navigateTo({
								url:`../Project/Project`
							})
						} else {
							uni.showToast({
								title: '请先注册运动员',
								icon:'none',
								duration: 1500
							})
						}
					}
				} else {
					if (num === 0) {
						uni.navigateTo({
							url:`../Basics/Basics?id=${that.projectId}&companyId=${that.companyId}`
						})
					} else {
						uni.showToast({
							title: '请先填写基础信息',
							icon: 'none',
							duration: 1500
						})
					}
				}
			}
		},
		watch: {
			'$store.state.project.num'(val) {
				const that = this
				that.query()
			}
		}
	}
</script>
<style lang="scss" scoped>
 .item-box {
	 margin-top: 24px;
	 height: 80px;
	 line-height: 80px;
	 font-size: 18px;
	 width: 670rpx;
	 margin-left: 40rpx;
	 padding-left: 56rpx;
	 position: relative;
	 box-shadow: 0px 2px 5px $grey;
	 border-radius: 10px;
 }
 .item-num {
	 position: relative;
	 width: 40px;
	 height: 40px;
	 border-radius: 50%;
	 top: 20px;
	 text-align: center;
	 line-height: 40px;
	 background-color: #709AFC;
	 color: #fff;
 }
 .item-content {
	 position: absolute;
	 left: 180rpx;
	 top: -10px;
	 font-size: 16px;
 }
 .item-infor {
	 position: absolute;
	 left: 180rpx;
	 font-size: 12px;
	 color: $gray;
	 top: 15px;
 }
 .bingo {
	 font-size: 30px;
	 position: absolute;
	 top: 0;
	 right: 100rpx;
	 
 }
 .active {
	 color: $green;
 }
 .noactive {
	 color: $grey;
 }
 .img {
 	width: 750rpx;
 	top: 0;
	height: 100%;
 	z-index: 1000;
 }
</style>