hz/learning-system-mobile
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git synced 2025-12-07 01:46:44 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
92e837eb21fe5df8a4c57963136addda4cc0f749
learning-system-mobile/pages/my/myMedal.vue
lmj 92e837eb21 修改
2022-12-21 14:26:28 +08:00

323 lines
8.5 KiB
Vue
Raw Blame History

<template>
<view class="my-medal">
<view class="back-icon" @click="back()">
<u-icon name="arrow-left"></u-icon>
</view>
<view class="medal-img">
<u-avatar style="margin: 0 auto;" v-if="userInfo.avatar && userInfo.avatar!=''" shape="circle" :size="76" :src="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 class="medal-list-index" >
<view class="medal-img-index">
<image style="width:136upx;height:152upx" src="/static/images/login_medal.png" mode=""></image>
<text class="img-name">上线纪念章 </text>
<text class="img-level"></text>
</view>
<view class="medal-name">上线纪念章 <text style="font-size: 24upx;color:#387DF7;margin-left: 6upx;"></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 rulesData.rules">
<view class="" style="height: 50upx;">
<image v-if="showLevel== index+1" style="width:32upx;height:16upx" src="../../static/images/triangle.png" mode=""></image>
</view>
<view class="medal-img-index" @click="tabQu(ru,index+1)">
<image v-if="index+1 < medalData.medalLevel || index+1 == medalData.medalLevel" style="width:104upx;height:120upx" :src="fileBaseUrl+rulesData.icon" mode=""></image>
<image v-else style="width:104upx;height:120upx" :src="fileBaseUrl+rulesData.iconGrey" mode=""></image>
<text v-if="index+1 < medalData.medalLevel || index+1 == medalData.medalLevel" class="img-name">{{medalData.medalName}} </text>
<text class="img-level">LV.{{index+1}}</text>
</view>
<text v-if="index+1 < medalData.medalLevel || index+1 == medalData.medalLevel" 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 {
webBaseUrl:this.$config.context,
showLevel:1,
show:false,
fileBaseUrl:this.$config.fileUrl,
medalList:[],
medalData:{},
medalConfig:[],
rulesData:{
rules:[],
},
}
},
computed: {
...mapGetters(['userInfo'])
},
mounted() {
this.getMedal();
this.getConfig();
},
methods:{
tabQu(ru,index) {
// if(index == this.medalData.medalLevel || index > this.medalData.medalLevel) {
this.medalData.requirement = ru.remark;
this.showLevel = ru.level;
// }
},
back(){
uni.navigateBack();
},
getConfig() {// 获取勋章配置
apiStat.userMedalConfig().then(res=>{
if(res.status == 200) {
this.medalConfig = res.result;
}
})
},
handelClick(me) {
this.medalData = me;
this.showLevel = this.medalData.medalLevel;
this.show = true;
let data = this.medalConfig.find(it=>it.id ==me.medalId);
this.rulesData = data;
this.rulesData.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;
position: relative;
padding-top: 220upx;
/deep/ .u-popup__content{
border-radius: 16upx;
}
.back-icon{
position: absolute;
top:110upx;
left:40upx;
/deep/ .uicon-arrow-left{
color: #fff !important;
}
}
.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: 26upx;
color: #fff;
bottom: 10%;
left:0;
right:0;
}
.img-level{
position: absolute;
font-size: 24upx;
color: #fff;
left:0;
right:0;
top: 24%;
}
}
}
.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(.6);
}
.img-level{
position: absolute;
font-size: 12upx;
color: #fff;
top:24upx;
left:0;
right:0;
transform: scale(.6);
}
}
}
}
}
.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: 70upx 32upx 0 32upx;
height: 47vh;
max-height: 47vh;
padding: 60upx 24upx;
padding-bottom: 140upx;
.medal-title{
font-size: 36upx;
font-weight: 500;
color: #0A89FC;
margin-left: 74upx;
margin-top: 26upx;
margin-bottom: 30upx;
}
// margin-top: 510upx;
.medal-list-index{
text-align: center;
// margin: 0 24upx;
width: 33%;
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;
left:0;
right:0;
transform: scale(.8);
}
.img-level{
position: absolute;
font-size: 12upx;
color: #fff;
// left:60upx;
top: 30upx;
left:0;
right:0;
transform: scale(.8);
}
}
// .medal-list-index:last-child{
// .medal-img-index .img-level{
// left:50upx;
// }
// }
}
}
</style>
Reference in New Issue View Git Blame Copy Permalink