weapp-v2/pages/honorList/index.vue

<template>
	<view>
		<custom-nav title="荣耀殿堂"></custom-nav>
		<view class="honor">
			
			<custom-toast ref='toast'></custom-toast>
			<!-- <view class="season_container">
				<view>学位争霸赛第{{ season_id ? season_id : userInfo.season }}季</view>
				<picker class="toggle" :range="seasonList" range-key="name" :value="season_index" @change="changeSeason">
					<text>切换赛季</text>
					<image src="../../static/icon/arrow.png" class="arrow"></image>
				</picker>
			</view> -->
			<view style="padding: 30rpx 0 40rpx 0;">
				<view class="honorTong" @click="toNotice">
					<view class="img">
						<image class="bg" src="https://api.jiuweiyun.cn/public/uploads/icon/new_tzs.png"></image>
					</view>
					<image class="bot" src="https://api.jiuweiyun.cn/public/uploads/weapp/icon/honor/honour_bot.png">
					</image>
					<view class="name">通知书</view>
					<view class="honorTong_mask" v-if="!userInfo.signuped">暂未获取</view>
				</view>
				<view class="honorBox" v-for="(item, index) in certificateList" :key="index">
					<view class="honorBox_top">
						<image v-if="item.graduate" class="bg"
							src="https://api.jiuweiyun.cn/public/uploads/weapp/icon/honor_bg.png" @click="toDetail(item)">
						</image>
						<image v-else class="bg" src="https://api.jiuweiyun.cn/public/uploads/weapp/icon/honor_bg2.png"
							@click="toDetail(item)"></image>
						<image class="pai" :src="item.pai" @click="_previewImage(item.pai)"></image>
					</view>
					<image class="bot" src="https://api.jiuweiyun.cn/public/uploads/weapp/icon/honor/honour_bot.png">
					</image>
					<view class="honorBox_flex">
						<view class="name">{{item.name}}</view>
						<view class="name">{{item.tip}}</view>
					</view>
					<view class="honorBox_mask" v-if="item.is">差{{item.is}}学分</view>
				</view>
			</view>
		
			<!-- <view class="honor_list">
				<view class="item" v-for="(item, index) in certificateList" :key="index" @click="toDetail(item)">
					<view class="honor_img">
						<image v-if="index === 0" class="bg" src="https://api.jiuweiyun.cn/public/uploads/weapp/icon/honor_bg.png"></image>
						<image v-else class="bg" src="https://api.jiuweiyun.cn/public/uploads/weapp/icon/honor_bg2.png"></image>
						<view class="mask" v-if="item.is">差{{item.is}}学分</view>
					</view>
					<view class="name">{{item.name}}</view>
				</view>
				<view class="item" @click="toNotice">
					<view class="honor_img">
						<image class="bg" src="https://api.jiuweiyun.cn/public/uploads/icon/new_tzs.png"></image>
						<view class="mask" v-if="!userInfo.signuped">暂未获取</view>
					</view>
					<view class="name">通知书</view>
				</view>
			</view> -->
		</view>
	</view>
	
</template>

<script>
	import {
		get_season_list,
		api_getHistoryHonourList
	} from '../../api.js'
	import {
		numToZh
	} from '../../common/js/filters.js'
	export default {
		data() {
			return {
				certificateList: [],
				seasonList: [],
				season_index: 0,
				season_id: '',
				userInfo: this.$store.state.userServerInfo,
				seasonInfo: {},
				list: [
					'https://api.jiuweiyun.cn/public/uploads/weapp/icon/honor/1honor_pai1@x.png',
					'https://api.jiuweiyun.cn/public/uploads/weapp/icon/honor/honor_pai2@x.png',
					'https://api.jiuweiyun.cn/public/uploads/weapp/icon/honor/honor_pai3@x.png',
					'https://api.jiuweiyun.cn/public/uploads/weapp/icon/honor/honor_pai4@x.png'
				]
			}
		},
		watch: {
			seasonInfo: {
				handler(a) {
					this.certificateList = this.getCertificateList(a.integral)
				}
			}
		},
		onLoad() {
			this.getSeasonList()
			this.getImageList()
			// this.certificateList = this.getCertificateList(this.userInfo.score)
			// console.log(this.certificateList)
		},
		methods: {
			getImageList() {
				let arr = this.getCertificateList(this.userInfo.score)
				arr[0].graduate = true
				let that = this
				that.certificateList = []
				arr.map((item, i) => {
					item.pai = that.list[i]
					if (item.is > 0 && i == 0) { // 未报名或者已报名学分不满200
						that.certificateList.push(item)
						console.log(1)
					} else if (item.is > 0 && i == 1 && arr[0].is == 0) { // 大学毕业，未获得学士学位
						that.certificateList = arr.slice(0, 2)
						console.log(2)
					} else if (item.is > 0 && i == 2 && arr[1].is == 0) { // 学士学位，未获得硕士学位
						that.certificateList = arr.slice(1, 3)
						console.log(3)
					} else if (item.is > 0 && i == 3 && arr[2].is == 0) { // 硕士学位，未获得博士学位
						that.certificateList = arr.slice(2, 4)
						console.log(4)
					} else if (item.is == 0 && i == 3 && arr[3].is == 0) { // 博士学位
						that.certificateList.push(item)
						console.log(5, that.certificateList)
					}
				})
			},
			// 胸牌预览
			_previewImage(url) {
				uni.previewImage({
					urls: [url],
					current: url
				})
			},
			toNotice() {
				if (this.userInfo.signuped) {
					uni.navigateTo({
						url: "../certificate/notice"
					})
				} else {
					uni.showModal({
						content: "未获得",
						showCancel: false
					})
				}

			},
			getSeasonList() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.$ajax.get(`${get_season_list}`).then(([, {
					data: res
				}]) => {
					uni.hideLoading()
					if (res.code === 200) {
						this.seasonList = res.data.list.map(item => ({
							season: item.season,
							name: `大卫博士学位争霸赛第${item.season}季`
						}))
					}
				})
			},
			changeSeason(e) {
				this.season_id = this.seasonList[e.target.value].season
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.$ajax.get(`${api_getHistoryHonourList}?season=${this.season_id}`).then(([, {
					data: res
				}]) => {
					uni.hideLoading()
					if (res.code === 200) {
						this.seasonInfo = res.data
					}
				})
			},
			toDetail(item) {
				if (item.is) {
					uni.showModal({
						content: `还差${item.is}学分,即可获得证书`,
						showCancel: false,
						confirmText: '确定'
					})
				} else {
					let time = this.seasonInfo && this.seasonInfo.time ? `&time=${this.seasonInfo.time}` : ''
					uni.navigateTo({
						url: `../honour/honour?score=${item.is}&grade=${item.name.slice(0,4)}${time}`
					})
				}
			},
			getCertificateList(score) {
				if (!score && score !== 0) return []
				try {
					let arr = [{
						name: '大学毕业证书',
						tip: '大学毕业胸牌',
						score: 100
					}, {
						name: '学士学位证书',
						tip: '学士学位胸牌',
						score: 200
					}, {
						name: '硕士学位证书',
						tip: '硕士学位胸牌',
						score: 600
					}, {
						name: '博士学位证书',
						tip: '博士学位胸牌',
						score: 1000
					}]
					let index = -1
					let len = arr.length
					for (let i = 0; i < len; i++) {
						let max = arr[i].score
						if (i < len - 1) {
							let nextScore = arr[i + 1].score
							if (score >= max && score < nextScore) {
								index = i
								break
							}
						} else if (i === len - 1) {
							index = score >= arr[len - 1].score ? len - 1 : -1
						}
					}
					return arr.map((item, i) => ({
						name: item.name,
						tip: item.tip,
						is: i <= index ? 0 : item.score - score,
					}))
				} catch (e) {
					console.log(e)
					return []
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.honorTong {
		padding: 30rpx 30rpx 20rpx 30rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		position: relative;

		.img {
			margin-bottom: -15rpx;
			z-index: 5;

			.bg {
				width: 247rpx;
				height: 375rpx;
				z-index: 5;
			}
		}

		.name {
			font-size: 28rpx;
			color: #707070;
			margin-top: 22rpx;
		}

		.bot {
			z-index: 1;
			width: 100%;
			height: 28rpx;
		}

		&_mask {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			background: rgba(255, 255, 255, 0.5);
			width: 100%;
			height: 100%;
			color: #DF3614;
			font-size: 48rpx;
			font-weight: bold;
			text-align: center;
			padding-top: 156rpx;
			z-index: 9;
		}
	}

	.honorBox {
		position: relative;
		// margin-top: 20rpx;
		// padding: 15rpx 30rpx;
		padding: 40rpx 30rpx;

		&_mask {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			background: rgba(255, 255, 255, 0.5);
			width: 100%;
			height: 100%;
			color: #DF3614;
			font-size: 48rpx;
			font-weight: bold;
			text-align: center;
			padding-top: 156rpx;
			z-index: 9;
		}

		&_flex {
			display: flex;
			justify-content: space-between;
			padding: 0 78rpx 0 90rpx;
			margin-top: 22rpx;
			font-size: 28rpx;
			color: #707070;
		}

		&_top {
			display: flex;
			align-items: flex-end;
			justify-content: center;
			margin-bottom: -10rpx;
			z-index: 5;

			.bg {
				width: 247rpx;
				height: 375rpx;
				z-index: 5;
			}

			.pai {
				margin-left: 112rpx;
				width: 240rpx;
				height: 330rpx;
				z-index: 5;
			}
		}

		.bot {
			z-index: 1;
			width: 100%;
			height: 28rpx;
		}
	}

	.honor {
		min-height: 100%;
		background-color: #fff;
		// border-top: 128rpx solid #FFFFFF;

		.season_container {
			position: fixed;
			z-index: 999;
			top: 120rpx;
			left: 0;
			right: 0;
			flex: 1;
			height: 72rpx;
			line-height: 72rpx;
			color: #F96341;
			font-size: 32rpx;
			padding: 0 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #FFFFFF;
			border-top: 1px solid #EEEEEE;

			.toggle {
				color: #656565;
				font-size: 26rpx;
				display: flex;
				align-items: center;

				.arrow {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}

		.honor_list {
			padding: 30rpx;
			padding-top: 102rpx;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;

			.item {
				width: calc(100% / 2);
				margin-bottom: 50rpx;

				&:nth-of-type(3n) {
					margin-right: 0;
					font-size: 28rpx;
					color: #333333;
				}

				.name {
					width: 100%;
					overflow: hidden;
					text-align: center;
				}

				.honor_img {
					width: 301rpx;
					height: 470rpx;
					display: block;
					margin: 0 auto;
					margin-bottom: 20rpx;
					position: relative;

					.mask {
						position: absolute;
						top: 0;
						left: 0;
						bottom: 0;
						right: 0;
						background: rgba(0, 0, 0, .6);
						width: 100%;
						height: 100%;
						color: #FFFFFF;
						font-size: 40rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.bg {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>
https://api.jiuweiyun.cn/public/uploads/weapp/icon/tel_logon_bg.png
https://api.jiuweiyun.cn/public/uploads/icon/warn.png
https://api.jiuweiyun.cn/public/uploads/icon/new_tzs.png
https://api.jiuweiyun.cn/public/uploads/weapp/icon/vs.png
https://api.jiuweiyun.cn/public/uploads/weapp/icon/cjd_bg1.png
https://api.jiuweiyun.cn/public/uploads/weapp/icon/cjd_bg3.png
https://api.jiuweiyun.cn/public/uploads/weapp/icon/cjd_bg4.png
https://api.jiuweiyun.cn/public/uploads/weapp/icon/honor_bg.png
https://api.jiuweiyun.cn/public/uploads/weapp/icon/honor_bg_no.png
https://api.jiuweiyun.cn/public/uploads/weapp/icon/honor_bg2.png
https://api.jiuweiyun.cn/public/uploads/weapp/icon/honor_bg2_no.png
https://api.jiuweiyun.cn/public/uploads/weapp/icon/2.png
https://api.jiuweiyun.cn/public/uploads/weapp/icon/cancel.png
https://api.jiuweiyun.cn/public/uploads/icon/how-signup.png
https://api.jiuweiyun.cn/public/uploads/icon/how-share.png
https://api.jiuweiyun.cn/public/uploads/icon/how-upload.png
https://api.jiuweiyun.cn/public/uploads/weapp/icon/honor_bg.png
https://api.jiuweiyun.cn/public/uploads/weapp/icon/honor_bg2.png
https://api.jiuweiyun.cn/public/uploads/icon/new_tzs.png
https://api.jiuweiyun.cn/public/uploads/hotList-bg.png
https://api.jiuweiyun.cn/public/uploads/icon/helpshare.png
https://api.jiuweiyun.cn/public/uploads/weapp/icon/33.png
https://api.jiuweiyun.cn/public/uploads/icon/helpupload.png
https://api.jiuweiyun.cn/public/uploads/weapp/icon/index_bg1.png
https://api.jiuweiyun.cn/public/uploads/weapp/icon/index_bg2.png
https://api.jiuweiyun.cn/public/uploads/weapp/icon/index_bg3.png
https://api.jiuweiyun.cn/public/uploads/weapp/icon/index_bg4.png
https://api.jiuweiyun.cn/public/uploads/icon/toast8.png
https://api.jiuweiyun.cn/public/uploads/icon/toast7.png
https://api.jiuweiyun.cn/public/uploads/weapp/icon/logo.png
https://api.jiuweiyun.cn/public/uploads/weapp/icon/cancel.png
https://api.jiuweiyun.cn/public/uploads/weapp/icon/index_bg1.png
https://api.jiuweiyun.cn/public/uploads/weapp/icon/index_bg2.png
https://api.jiuweiyun.cn/public/uploads/weapp/icon/index_bg3.png
https://api.jiuweiyun.cn/public/uploads/weapp/icon/index_bg4.png
https://api.jiuweiyun.cn/public/uploads/icon/toast7.png
https://api.jiuweiyun.cn/public/uploads/icon/toast8.png
https://api.jiuweiyun.cn/public/uploads/icon/toast9.png
https://api.jiuweiyun.cn/public/uploads/weapp/icon/phb_bg.png
https://api.jiuweiyun.cn/public/uploads/icon/self.png
https://api.jiuweiyun.cn/public/uploads/icon/sold.png
https://api.jiuweiyun.cn/public/uploads/icon/num.png
https://api.jiuweiyun.cn/public/uploads/icon/cjd.png
https://api.jiuweiyun.cn/public/uploads/weapp/icon/loading.png
https://api.jiuweiyun.cn/public/uploads/icon/gold_new.gif
https://api.jiuweiyun.cn/public/uploads/weapp/icon/repair.png
https://api.jiuweiyun.cn/public/uploads/icon/poster_new.png
https://api.jiuweiyun.cn/public/uploads/icon/light.png