我的勋章页面

pages.json

@@ -46,7 +46,8 @@
 		{"path" : "pages/my/uCurrencyRules","style" : {"navigationBarTitleText": "U币规则","enablePullDownRefresh": false}},
 		{"path" : "pages/my/rankingList","style" : {"navigationBarTitleText": "排行榜","enablePullDownRefresh": false}},
 		{"path" : "pages/my/follow","style" : {"navigationBarTitleText": "关注列表","enablePullDownRefresh": true}},
-		{"path" : "pages/my/myQa","style" : {"navigationBarTitleText": "我的问答","enablePullDownRefresh": true}},
+		{"path" : "pages/my/myQa","style" : {"navigationBarTitleText": "我的问答","enablePullDownRefresh": true}},
+		{"path" : "pages/my/myMedal","style" : {"navigationBarTitleText": "我的勋章","enablePullDownRefresh": true}},
 		{"path" : "pages/login/login","style" : { "navigationBarTitleText": "","enablePullDownRefresh": false}},
 		{"path" : "pages/login/loading","style" : { "navigationBarTitleText": "正在加载","enablePullDownRefresh": false}},
 		{"path" : "pages/plus/index","style" : {"navigationBarTitleText": "发布内容"}},

pages/my/index.vue

@@ -134,7 +134,7 @@
 						</view>
 					</u-grid-item>
 					<u-grid-item>
-						<view class="one" @click="navigateTo('toMeComments')">
+						<view class="one" @click="navigateTo('myMedal')">
 							<view class="one-img">
 								<img src="../../static/images/center/mymedalicon.png">
 							</view>

pages/my/myMedal.vue

@@ -0,0 +1,144 @@
+<template>
+	<view class="my-medal">
+		<view class="medal-img">
+			<u-avatar v-if="userInfo.avatar && userInfo.avatar!=''" shape="circle" :size="76" :src="fileBaseUrl + userInfo.avatar" ></u-avatar>
+			<view  v-else>
+			   <view v-if="userInfo.sex == null" class="peo"></view>
+			   <view v-else>
+			   	  <view class="peo" v-if="userInfo.sex === 1 "><image src="../../static/images/man.png" alt=""></view>
+			   	  <view class="peo" v-else><image src="../../static/images/woman.png" alt=""></view>
+			   </view>
+			 </view>
+			<view class="medal-img-name">{{userInfo.name}}</view>
+		</view>
+		<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-img-index">
+						<image style="width:136upx;height:152upx" :src="fileBaseUrl+me.medalIcon" mode=""></image>
+						<text class="img-name">{{me.medalName}} </text>
+						<text class="img-level">LV.{{me.medalLevel}}</text>
+					</view>
+					
+					<view class="medal-name">{{me.medalName}} <text style="font-size: 24upx;color:#387DF7;margin-left: 6upx;">LV.{{me.medalLevel}}</text></view>
+				</view>
+			</view>
+			
+		</view>
+	</view>
+</template>
+
+<script>
+	import { mapGetters,mapActions} from 'vuex';
+	import apiStat from '@/api/phase2/stat.js';
+	export default {
+		data(){
+			return {
+				fileBaseUrl:this.$config.fileUrl,
+				medalList:[],
+			}
+			},
+		computed: {
+		    ...mapGetters(['userInfo'])
+		},
+		mounted() {
+			this.getMedal();
+		},
+		methods:{
+			getMedal() {
+			    apiStat.userMedal(this.userInfo.aid).then(res=>{
+			       if(res.status == 200) {
+			         this.medalList = res.result
+			       }
+			    })
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.my-medal{
+		background: url(../../static/images/me-bg.png) no-repeat 100% / 100%;
+		background-position: 0 0;
+		padding-top: 220upx;
+		.medal-img{
+			text-align: center;
+			.peo{
+				width: 76px;
+				height: 76px;
+				margin: 0 auto;
+				// text-align: center;
+				image{
+					width: 100%;
+					height: 100%;
+					border-radius: 50%;
+					vertical-align: middle;
+				}
+			}
+			.medal-img-name{
+				margin-top: 20upx;
+				font-size: 36upx;
+				font-weight: 500;
+				color: #FFFFFF;
+			}
+		}
+		.medal-list{
+			background: #fff url(../../static/images/me-box.png) no-repeat 94% / 94%;
+			background-position: 14upx 26upx;
+			border-radius: 20upx 20upx 0px 0px;
+			backdrop-filter: blur(32px);
+			margin: 32upx;
+			margin-top: 70upx;
+			
+			padding: 60upx 24upx;
+			padding-bottom: 140upx;
+			.medal-title{
+				font-size: 36upx;
+				font-weight: 500;
+				color: #0A89FC;
+				margin-left: 74upx;
+				margin-top: 26upx;
+			}
+			// margin-top: 510upx;
+			.medal-list-index{
+				text-align: center;
+				margin: 0 24upx;
+				margin-top: 60upx;
+				// display: flex;
+				.medal-name{
+					margin-top: 16upx;
+					font-size: 28upx;
+					font-weight: 500;
+					color: #333333;
+				}
+				.medal-img-index{
+					position: relative;
+					.img-name{
+						position: absolute;
+						font-size: 20upx;
+						color: #fff;
+						bottom: 20upx;
+						left:36upx;
+						transform: scale(.7);
+					}
+					.img-level{
+						position: absolute;
+						font-size: 12upx;
+						color: #fff;
+						left:60upx;
+						top: 24upx;
+						transform: scale(.7);
+					}
+				}
+			}
+			.medal-list-index:last-child{
+				.medal-img-index .img-level{
+					left:50upx;
+				}
+			}
+			
+		}
+		
+	}
+</style>