|
|
|
@ -2,10 +2,68 @@ |
|
|
|
<view class="wrap"> |
|
|
|
<view class="stabar"></view> |
|
|
|
<view class="secbar"> <label class="back" @click="back()"></label> |
|
|
|
<view class="title">演练回顾</view> |
|
|
|
<view class="title">我的勋章</view> |
|
|
|
</view> |
|
|
|
<view class="index-background"> |
|
|
|
<image src="/static/medal_top.jpg"></image> |
|
|
|
<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"> |
|
|
|
@ -18,29 +76,34 @@ |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<!-- 任务奖章区域 --> |
|
|
|
<view class="nav-list" v-if="showMedal == true" style="width: 1000rpx;"> |
|
|
|
</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> --> |
|
|
|
<!-- 任务奖章区域 --> |
|
|
|
<!-- <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> |
|
|
|
</view> |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { mapState, mapMutations, mapGetters } from 'vuex' |
|
|
|
import { |
|
|
|
mapState, |
|
|
|
mapMutations, |
|
|
|
mapGetters |
|
|
|
} from 'vuex' |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
showMedal:true, |
|
|
|
showMedal: true, |
|
|
|
//奖章列表 |
|
|
|
taskMedalList: [], |
|
|
|
//我的奖章列表 |
|
|
|
@ -51,58 +114,177 @@ |
|
|
|
...mapState('m_user', ['userId']) |
|
|
|
}, |
|
|
|
onLoad() { |
|
|
|
this.getMedalList(); |
|
|
|
this.getMyMedalList() |
|
|
|
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则上上页 |
|
|
|
}) |
|
|
|
}, |
|
|
|
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; |
|
|
|
@ -160,5 +342,5 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
*/ |
|
|
|
</style> |
