yicangzongtai_app_240321/pages/government/medal.vue

<template>
	<view class="pages-content">
		<navbar :config="config"></navbar>
		<view class="medal-box">
			<swiper class="medal-swiper" :current="current" :previous-margin="marginNum" :next-margin="marginNum"
				@change="e => current = e.detail.current">
				<swiper-item :class="['medal-item' , index === current ? 'big-medal-item' :'min-medal-item' ]"
					v-for="(item , index) in MedalList">
					<image :class="['medal-item-img' ,  index > MedalIndex  ? 'picture-ash' : '']"
						:src="item.medalPicture" mode="aspectFit"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="userScore-box" v-if="MedalList && MedalList.length >= (current + 1)">
			<view class="userScore-level">{{MedalList[current].medalName}} Lv.{{ MedalList[current].medalLevel }}</view>
			<view class="userScore-num">
				累计获得{{MedalList[current].userScore || 0}}积分（{{ MedalList[current].userScore || 0 }}/{{ MedalList[current].medalScore || 0}}）
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserMedal_Api
	} from "@/api/task.js"
	export default {
		data() {
			return {
				config: {
					back: true,
					title: '我的勋章',
					// color: 'black',
					color: '#fff',
					backgroundColor: [1, 'transparent'],
					statusBarFontColor: 'transparent'
				},
				marginNum: '188rpx',
				current: 0,
				MedalList: [],
				MedalIndex: 0
			}
		},
		onLoad() {
			this.getUserMedal()
		},
		methods: {
			getUserMedal() {
				getUserMedal_Api().then(res => {
					const list = res.data || [];
					try {
						list.forEach((el, index) => {
							if (el.currentLevel) {
								this.current = index;
								this.MedalIndex = index;
								throw new Error(0)
							}
						})
					} catch (e) {
						//TODO handle the exception
					}
					this.MedalList = list;
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pages-content {
		width: 100%;
		height: 100vh;
		background: linear-gradient(180deg, #262626, #4c4940);

		.medal-box {
			width: 100%;
			// width: 362rpx;
			height: 417rpx;
			margin-top: 200rpx;

			.medal-swiper {
				// width: 100%;
				height: 417rpx;

				.medal-item {
					width: 362rpx;
					height: 417rpx;
					display: flex;
					justify-content: center;

					.medal-item-img {
						margin: 0 auto;
						width: 362rpx;
						height: 417rpx;
						transition: transform 0.6s;
					}
				}

				.big-medal-item {
					.medal-item-img {
						// transform: scale(0.5);
					}
				}

				.min-medal-item {
					.medal-item-img {
						transform: scale(0.7);
					}
				}
			}
		}

		.userScore-box {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: #fff;
			padding: 40rpx 20rpx;

			.userScore-level {
				font-size: 38rpx;
				font-weight: Light;
				text-align: center;
				color: #ffffff;
				padding: 10rpx 20rpx;
			}

			.userScore-num {
				font-size: 28rpx;
				font-weight: Light;
				text-align: center;
				color: #b3b3b3;
			}
		}

	}

	.picture-ash {
		filter: grayscale(100%);
		/* 设置灰度百分比 */
	}
</style>