我的勋章

components/system-news/system-news.vue

@@ -7,7 +7,7 @@
 			<view class="btn-index" @click="allRead()">一键已读</view>
 		</view>
 		<view class="news-page-list">
-			<view class="list-index" v-for="item in items" :key="item.id">
+			<view class="list-index" v-for="item in items" :key="item.id" @click="returnRouter(item)">
 				<view style="margin-top: 16upx;margin-right: 20upx;">
 					<radio v-show="flag" @click="changeChecked(item)" :checked="item.checked"/>
 				</view>
@@ -53,6 +53,27 @@
 			}
 		},
 		methods: {
+			returnRouter(item) {
+				if (item.refType == 2) {
+					uni.navigateTo({
+						url: '/pages/resource/articeDetail?id=' + item.refId
+					});
+				    } else if (item.refType == 4) {
+						uni.navigateTo({
+							url: '/pages/resource/qaDetail?id=' + item.refId
+						});
+				} else {
+				    if (item.conType == '10') {
+						uni.navigateTo({
+							url: '/pages/resource/microDetail?id='  + item.refId 
+						});
+				    } else if (item.conType == '20') {
+						uni.navigateTo({
+							url: '/pages/resource/courseDetail?id=' +item.refId
+						});
+				    }
+				}
+			},
 			cancel() {
 				this.modalShow = false;
 			},

pages/my/myMedal.vue

@@ -14,7 +14,7 @@
 		<view class="medal-list">
 			<view class="medal-title">我的勋章</view>
 			<view style="display: flex;flex-wrap: wrap;">
-				<view class="medal-list-index" v-for="me in medalList" :key="me.id">
+				<view class="medal-list-index" v-for="me in medalList" :key="me.id" @click="handelClick(me)">
 					<view class="medal-img-index">
 						<image style="width:136upx;height:152upx" :src="fileBaseUrl+me.medalIcon" mode=""></image>
 						<text class="img-name">{{me.medalName}} </text>
@@ -26,6 +26,26 @@
 			</view>
 			
 		</view>
+		<u-popup :show="show" mode="bottom">
+		    <view class="medel-show-box">
+				<image class="img" @click="show = false" style="width:44upx;height:44upx" src="../../static/images/cancel.png" mode=""></image>
+		       <view class="medal-info-top">
+		       	  <image style="width:268upx;height:300upx" :src="fileBaseUrl+medalData.medalIcon" mode=""></image>
+				  <view class="title-info">
+				  	{{medalData.medalName}} <text style="color: #387DF7;">LV.{{medalData.medalLevel}}</text>
+				  </view>
+				  <view class="title-text">
+				  	{{medalData.requirement}}
+				  </view>
+		       </view>
+			   <view class="medal-info-flex">
+			   	 <view class="medal-info-index" v-for="(ru,index) in rules">
+			   	 	<image style="width:104upx;height:120upx" :src="fileBaseUrl+medalData.medalIcon" mode=""></image>
+					<text style="color: color: #666666;font-size: 24upx;">LV.{{index+1}}</text>
+			   	 </view>
+			   </view>
+		    </view>
+		</u-popup>
 	</view>
 </template>
 
@@ -35,8 +55,12 @@
 	export default {
 		data(){
 			return {
+				show:false,
 				fileBaseUrl:this.$config.fileUrl,
 				medalList:[],
+				medalData:{},
+				medalConfig:[],
+				rules:[],
 			}
 			},
 		computed: {
@@ -44,8 +68,22 @@
 		},
 		mounted() {
 			this.getMedal();
+			this.getConfig();
 		},
 		methods:{
+			getConfig() {// 获取勋章配置
+			    apiStat.userMedalConfig().then(res=>{
+			        if(res.status == 200) {
+			           this.medalConfig = res.result;
+			        }
+			   })
+			},
+			handelClick(me) {
+				this.medalData = me;
+				this.show = true;
+				let data = this.medalConfig.find(it=>it.id ==me.medalId);
+				this.rules = JSON.parse(data.rules);
+			},
 			getMedal() {
 			    apiStat.userMedal(this.userInfo.aid).then(res=>{
 			       if(res.status == 200) {
@@ -62,6 +100,45 @@
 		background: url(../../static/images/me-bg.png) no-repeat 100% / 100%;
 		background-position: 0 0;
 		padding-top: 220upx;
+		/deep/ .u-popup__content{
+			border-radius: 16upx;
+		}
+		.medel-show-box{
+			position: relative;
+			background: url(../../static/images/show-bg.png) no-repeat 100% / 100%;
+			background-position: 0 0;
+			padding-bottom: 80upx;
+			.img{
+				position: absolute;
+				right:40upx;
+				top:40upx
+			}
+			.medal-info-top{
+				text-align: center;
+				margin-top: 152upx;
+				.title-info{
+					font-size: 40upx;
+					font-weight: 500;
+					color: #333333;
+					margin-top: 26upx;
+				}
+				.title-text{
+					margin-top: 24upx;
+					font-size: 28upx;
+					color: #999999;
+				}
+			}
+			.medal-info-flex{
+				display: flex;
+				overflow-x: auto;
+				padding: 60upx 52upx;
+				.medal-info-index{
+					text-align: center;
+					margin-right: 60upx;
+				}
+			}
+			
+		}
 		.medal-img{
 			text-align: center;
 			.peo{