zdxtDrillProgram/subpkg/medal/medal.vue

<template>
	<view class="wrap">
		<view class="stabar"></view>
		<view class="secbar"> <label class="back" @click="back()"></label>
		<view class="title">演练回顾</view>
		</view>
		<view class="index-background">
			<image src="/static/medal_top.jpg"></image>
			<view class="panel-list">
			<view class="panel">
				<view class="panel-body">
					<view class="panel-item" @click="taskMedal">
						<text>任务勋章</text>
					</view>
					<view class="panel-item" @click="myMedal">
						<text>我的勋章</text>
					</view>
				</view>
			</view>
			</view>
		</view>
		<!-- 任务奖章区域 -->
		<view class="nav-list" v-if="showMedal == true" style="width: 1000rpx;">
		  <view class="nav-item" v-for="(item, i) in taskMedalList" :key="i">
		    <image :src="item" class="nav-img"></image>
		  </view>
		</view>
		<!-- 任务奖章区域 -->
		<view class="nav-list" v-else="showMedal == false">
		  <view class="nav-item" v-for="(item, i) in myMedalList" :key="i">
		    <image :src="item" class="nav-img"></image>
		  </view>
		</view>
	</view>
	</view>
</template>

<script>
	import { mapState, mapMutations, mapGetters } from 'vuex'
	export default {
		data() {
			return {
				showMedal:true,
				//奖章列表
				taskMedalList: [],
				//我的奖章列表
				myMedalList: [],
			};
		},
		computed: {
			...mapState('m_user', ['userId'])
		},
		onLoad() {
				this.getMedalList();
				this.getMyMedalList()
			},
			methods: {
				
				async getMedalList() {
					
					const {
						data: res
					} = await uni.$http.post('/small/project/medal/listAll')
					if (!res.success) return uni.$showMsg()
					
					res.data.forEach(item=>{
						item.iconPath = uni.$http.baseUrl +item.iconPath
						this.taskMedalList.push(item.iconPath)
					})
					
					// uni.$showMsg('数据请求成功！')
				},
				async getMyMedalList() {
				
					const {
						data: res
					} = await uni.$http.post('/small/wechat/showMyMedal',{guid:this.userId})
					if (!res.success) return uni.$showMsg()
					
					res.data.forEach(item=>{
						item.iconPath = uni.$http.baseUrl +item.iconPath
						this.myMedalList.push(item.iconPath)
					})
					
					// uni.$showMsg('数据请求成功！')
				},
				taskMedal(){
					this.showMedal = true
				},
				myMedal(){
					this.showMedal = false
				},
				back(){
					uni.navigateBack({
						delta:1,//返回层数，2则上上页
					})
				},
			}
		}
</script>

<style lang="scss">
	@import url("@/static/base_css.css");
	
	.nav-list {
		display: flex;
		justify-content: left;
		margin: 5px 0;
		
	}
	
	.nav-img {
	 margin: 10px;
		width: 208rpx;
		height: 200rpx;
		border-radius: 8px;
	}
	.index-background {
		image {
			height: 300rpx;
			width: 100%;
		}
	}
	
	.panel-list {
		padding: 0 10px;
		position: relative;
		top: -10px;
	
		.panel {
			background-color: white;
			border-radius: 3px;
			margin-bottom: 8px;
	
			.panel-title {
				line-height: 45px;
				padding-left: 10px;
				font-size: 15px;
				border-bottom: 1px solid #F4F4F4;
			}
	
			.panel-body {
				display: flex;
				justify-content: space-around;
	
				.panel-item {
					display: flex;
					align-items: center;
					justify-content: space-around;
					padding: 10px 0;
					font-size: 13px;
	
					.icon {
						width: 35px;
						height: 35px;
					}
				}
			}
		}
	}

</style>