hz/learning-system-mobile
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git synced 2025-12-06 17:36:45 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
eefa5e05e20cf3a2988a2fcb2b23f367e76a7fb2
learning-system-mobile/pages/my/myMedal.vue
zhaofang eefa5e05e2 提交
2022-11-11 11:04:23 +08:00

279 lines
6.9 KiB
Vue
Raw Blame History

<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" @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>
<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>
<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">
<view class="medal-img-index">
<image style="width:268upx;height:300upx" :src="fileBaseUrl+medalData.medalIcon" mode=""></image>
<text class="img-name">{{medalData.medalName}} </text>
<text class="img-level">LV.{{medalData.medalLevel}}</text>
</view>
<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">
<view class="" style="height: 50upx;">
<image v-if="medalData.medalLevel == index+1" style="width:32upx;height:16upx" src="../../static/images/triangle.png" mode=""></image>
</view>
<view class="medal-img-index">
<image style="width:104upx;height:120upx" :src="fileBaseUrl+medalData.medalIcon" mode=""></image>
<text class="img-name">{{medalData.medalName}} </text>
<text class="img-level">LV.{{index+1}}</text>
</view>
<text v-if="medalData.medalLevel == index+1" style="color: #387DF7;font-size: 24upx;">LV.{{index+1}}</text>
<text v-else style="color: color: #666666;font-size: 24upx;">LV.{{index+1}}</text>
</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import { mapGetters,mapActions} from 'vuex';
import apiStat from '@/api/phase2/stat.js';
export default {
data(){
return {
show:false,
fileBaseUrl:this.$config.fileUrl,
medalList:[],
medalData:{},
medalConfig:[],
rules:[],
}
},
computed: {
...mapGetters(['userInfo'])
},
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) {
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;
/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-img-index{
position: relative;
width:268upx;
height:300upx;
margin: 0 auto;
.img-name{
position: absolute;
font-size: 20upx;
color: #fff;
bottom: 10%;
left:0;
right:0;
}
.img-level{
position: absolute;
font-size: 12upx;
color: #fff;
left:44%;
top: 20%;
}
}
}
.medal-info-flex{
display: flex;
overflow-x: auto;
padding: 30upx 52upx;
.medal-info-index{
text-align: center;
margin-right: 60upx;
.medal-img-index{
position: relative;
.img-name{
position: absolute;
font-size: 20upx;
color: #fff;
bottom: 10%;
left:0;
right:0;
// left:6%;
transform: scale(.5);
}
.img-level{
position: absolute;
font-size: 12upx;
color: #fff;
left:30%;
top: 12%;
transform: scale(.5);
}
}
}
}
}
.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>
Reference in New Issue View Git Blame Copy Permalink