You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
346 lines
9.2 KiB
346 lines
9.2 KiB
<template>
|
|
<view class="wrap">
|
|
<view class="stabar"></view>
|
|
<view class="secbar"> <label class="back" @click="back()"></label>
|
|
<view class="title">我的勋章</view>
|
|
</view>
|
|
<view class="mainwrap2">
|
|
<view class="perinfo"> <span class="type-name"><img :src="avatarUrl"></img></span>
|
|
<view class="dycd"> <span class="myname">盛大鹏</span>
|
|
的勋章墙
|
|
</view>
|
|
<view class="medtop">已获得<label>2</label>枚勋章</view>
|
|
</view>
|
|
<view class="subwrap">
|
|
<view class="medbox">
|
|
<view class="medtit">成就勋章<label class="actcount">已点亮2次</label></view>
|
|
<view class="medlist">
|
|
<view class="meditem"><label class="medicon-img active-img"><image src="../../static/images/medal_1.png"></image></label>2023.10.22获得</view>
|
|
<view class="meditem"><label class="medicon-img active-img"><image src="../../static/images/medal_1.png"></image></label>2023.10.22获得</view>
|
|
<view class="meditem"><label class="medicon-img"><image src="../../static/images/medal_1g.png"></image></label>成就勋章</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="medbox">
|
|
<view class="medtit">等级勋章<label class="actcount"></label></view>
|
|
<view class="medlist">
|
|
<view class="meditem"><label class="medicon-img"><image src="../../static/images/medal_lv1g.png"></image></label>LV1(青铜)</view>
|
|
<view class="meditem"><label class="medicon-img"><image src="../../static/images/medal_lv2g.png"></image></label>LV2(白银)</view>
|
|
<view class="meditem"><label class="medicon-img"><image src="../../static/images/medal_lv3g.png"></image></label>LV3(黄金)</view>
|
|
<view class="meditem"><label class="medicon-img"><image src="../../static/images/medal_lv4g.png"></image></label>LV4(铂金)</view>
|
|
<view class="meditem"><label class="medicon-img"><image src="../../static/images/medal_lv5g.png"></image></label>LV5(紫金)</view>
|
|
<view class="meditem"><label class="medicon-img"><image src="../../static/images/medal_lv6g.png"></image></label>LV6(钻石)</view>
|
|
<view class="meditem"><label class="medicon-img"><image src="../../static/images/medal_lv7g.png"></image></label>LV7(星钻)</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="medbox">
|
|
<view class="medtit">活动勋章1<label class="actcount"></label></view>
|
|
<view class="medlist">
|
|
<view class="meditem"><label class="medicon-img"><image src="../../static/images/medal_act1g.png"></image></label>勋章名称</view>
|
|
<view class="meditem"><label class="medicon-img"><image src="../../static/images/medal_act2g.png"></image></label>勋章名称</view>
|
|
<view class="meditem"><label class="medicon-img"><image src="../../static/images/medal_act3g.png"></image></label>勋章名称</view>
|
|
<view class="meditem"><label class="medicon-img"><image src="../../static/images/medal_act4g.png"></image></label>勋章名称</view>
|
|
<view class="meditem"><label class="medicon-img"><image src="../../static/images/medal_act5g.png"></image></label>勋章名称</view>
|
|
<view class="meditem"><label class="medicon-img"><image src="../../static/images/medal_act6g.png"></image></label>勋章名称</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="medbox">
|
|
<view class="medtit">活动勋章2<label class="actcount"></label></view>
|
|
<view class="medlist">
|
|
<view class="meditem"><label class="medicon-img"><image src="../../static/images/medal_un1g.png"></image></label>勋章名称</view>
|
|
<view class="meditem"><label class="medicon-img"><image src="../../static/images/medal_un2g.png"></image></label>勋章名称</view>
|
|
<view class="meditem"><label class="medicon-img"><image src="../../static/images/medal_un3g.png"></image></label>勋章名称</view>
|
|
<view class="meditem"><label class="medicon-img"><image src="../../static/images/medal_un4g.png"></image></label>勋章名称</view>
|
|
<view class="meditem"><label class="medicon-img"><image src="../../static/images/medal_un5g.png"></image></label>勋章名称</view>
|
|
<view class="meditem"><label class="medicon-img"><image src="../../static/images/medal_un6g.png"></image></label>勋章名称</view>
|
|
<view class="meditem"><label class="medicon-img"><image src="../../static/images/medal_un7g.png"></image></label>勋章名称</view>
|
|
<view class="meditem"><label class="medicon-img"><image src="../../static/images/medal_un8g.png"></image></label>勋章名称</view>
|
|
<view class="meditem"><label class="medicon-img"><image src="../../static/images/medal_un9g.png"></image></label>勋章名称</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
<!-- <view class="index-background">
|
|
<view class="panel-list">
|
|
<view class="panel">
|
|
<view class="panel-body">
|
|
<view class="panel-item" @click="taskMedal">
|
|
<text>任务勋章</text>
|
|
</view>
|
|
<view class="panel-item" @click="myMedal">
|
|
<text>我的勋章</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
<!-- 任务奖章区域 -->
|
|
<!-- <view class="nav-list" v-if="showMedal == true" style="width: 1000rpx;">
|
|
<view class="nav-item" v-for="(item, i) in taskMedalList" :key="i">
|
|
<image :src="item" class="nav-img"></image>
|
|
</view>
|
|
</view> -->
|
|
<!-- 任务奖章区域 -->
|
|
<!-- <view class="nav-list" v-else="showMedal == false">
|
|
<view class="nav-item" v-for="(item, i) in myMedalList" :key="i">
|
|
<image :src="item" class="nav-img"></image>
|
|
</view>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapState,
|
|
mapMutations,
|
|
mapGetters
|
|
} from 'vuex'
|
|
export default {
|
|
data() {
|
|
return {
|
|
showMedal: true,
|
|
//奖章列表
|
|
taskMedalList: [],
|
|
//我的奖章列表
|
|
myMedalList: [],
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState('m_user', ['userId'])
|
|
},
|
|
onLoad() {
|
|
this.getMedalList();
|
|
this.getMyMedalList()
|
|
},
|
|
methods: {
|
|
|
|
async getMedalList() {
|
|
|
|
const {
|
|
data: res
|
|
} = await uni.$http.post('/small/project/medal/listAll')
|
|
if (!res.success) return uni.$showMsg()
|
|
|
|
res.data.forEach(item => {
|
|
item.iconPath = uni.$http.baseUrl + item.iconPath
|
|
this.taskMedalList.push(item.iconPath)
|
|
})
|
|
|
|
// uni.$showMsg('数据请求成功！')
|
|
},
|
|
async getMyMedalList() {
|
|
|
|
const {
|
|
data: res
|
|
} = await uni.$http.post('/small/wechat/showMyMedal', {
|
|
guid: this.userId,
|
|
})
|
|
if (!res.success) return uni.$showMsg()
|
|
|
|
res.data.forEach(item => {
|
|
item.iconPath = uni.$http.baseUrl + item.iconPath
|
|
this.myMedalList.push(item.iconPath)
|
|
})
|
|
|
|
// uni.$showMsg('数据请求成功！')
|
|
},
|
|
taskMedal() {
|
|
this.showMedal = true
|
|
},
|
|
myMedal() {
|
|
this.showMedal = false
|
|
},
|
|
back() {
|
|
uni.navigateBack({
|
|
delta: 1, //返回层数，2则上上页
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import url("@/static/base_css.css");
|
|
|
|
.secbar {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.mainwrap2 {
|
|
top: 0;
|
|
height: calc(100% - 90rpx);
|
|
background: #fff url("/static/images/bg_medal.jpg") no-repeat left top;
|
|
background-size: 110% auto;
|
|
}
|
|
|
|
.perinfo {
|
|
top: 30rpx;
|
|
height: 450rpx;
|
|
}
|
|
|
|
.perinfo .type-name,
|
|
.perinfo .dycd {
|
|
float: none;
|
|
}
|
|
|
|
.perinfo .dycd {
|
|
margin: 0 5.5%;
|
|
color: #999;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.myname {
|
|
margin: 0 0 3.5% 0;
|
|
font-size: 1.5rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.medtop {
|
|
position: relative;
|
|
z-index: 1;
|
|
margin: 1% 0 0 5.5%;
|
|
width: 90%;
|
|
color: #666;
|
|
|
|
label {
|
|
color: #333;
|
|
font-size: 1.5rem;
|
|
margin: 0 10rpx;
|
|
}
|
|
}
|
|
|
|
.medtop::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: -6rpx;
|
|
bottom: -2rpx;
|
|
z-index: -1;
|
|
width: 42%;
|
|
height: 20rpx;
|
|
border-radius: 10rpx;
|
|
background-color: #fbc678;
|
|
border-top-left-radius: 5px;
|
|
border-top-right-radius: 5px;
|
|
border-bottom-right-radius: 5px;
|
|
border-bottom-left-radius: 5px;
|
|
}
|
|
|
|
.headpic {
|
|
display: block;
|
|
margin: 0 5%;
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
background-color: #d9e9f9;
|
|
border-radius: 50%;
|
|
border: 4rpx solid #fff;
|
|
}
|
|
|
|
.subwrap {
|
|
height: calc(90% - 450rpx);
|
|
}
|
|
|
|
.medbox {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.medtit {
|
|
position: relative;
|
|
margin: 5% 2% 0;
|
|
color: #333;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
.actcount {
|
|
position: absolute;
|
|
top: 8rpx;
|
|
right: 0;
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.meditem {
|
|
display: inline-block;
|
|
margin: 2% 0;
|
|
width: 33%;
|
|
color: #999;
|
|
text-align: center;
|
|
}
|
|
|
|
.medicon-img {
|
|
display: block;
|
|
margin: 0 auto;
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
|
|
.nav-list {
|
|
display: flex;
|
|
justify-content: left;
|
|
margin: 5px 0;
|
|
|
|
}
|
|
|
|
.nav-img {
|
|
margin: 10px;
|
|
width: 208rpx;
|
|
height: 200rpx;
|
|
border-radius: 8px;
|
|
}
|
|
.index-background {
|
|
image {
|
|
height: 300rpx;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.panel-list {
|
|
padding: 0 10px;
|
|
position: relative;
|
|
top: -10px;
|
|
|
|
.panel {
|
|
background-color: white;
|
|
border-radius: 3px;
|
|
margin-bottom: 8px;
|
|
|
|
.panel-title {
|
|
line-height: 45px;
|
|
padding-left: 10px;
|
|
font-size: 15px;
|
|
border-bottom: 1px solid #F4F4F4;
|
|
}
|
|
|
|
.panel-body {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
|
|
.panel-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
padding: 10px 0;
|
|
font-size: 13px;
|
|
|
|
.icon {
|
|
width: 35px;
|
|
height: 35px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
*/
|
|
</style>
|