hz/learning-system-mobile
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git synced 2025-12-09 02:46:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

我的勋章

Browse Source
This commit is contained in:
zhaofang
2022-11-10 19:08:52 +08:00
parent b2241cf402
commit 8c776f0a02
4 changed files with 100 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
pages/my/myMedal.vue
View File

@@ -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{