113 lines
2.5 KiB
Vue
113 lines
2.5 KiB
Vue
<template>
|
|
<view>
|
|
<view class="d-c d-c-c user-info">
|
|
<image class="grade-img" :src="!type ? userInfo.gradeIcon : userData.thisAvatarUrl" mode=""></image>
|
|
<view class="f36 gray3 fb mb20">{{ !type ? userInfo.pkGradeVal : userData.thisAwardsName }}</view>
|
|
<view class="f26 gray6 mb10" v-if="!type">
|
|
{{ $t('MY_ORD_71') }}
|
|
<text>{{ userData.globalCode }}</text>
|
|
</view>
|
|
<view class="f26 gray6" v-if="!type">
|
|
{{ $t('S_L_4') }}
|
|
<text>{{ userData.countryCode }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="main-box">
|
|
<view v-for="(item, index) in gradeList" :key="index" class="ww100 d-b-c mb40">
|
|
<view class="item-box" :style="'width:' + (((index + 1) * 50) / gradeList.length + 36) + '%;background-color:' + item.color + ';'">
|
|
<text>{{ !type ? item.gradeName : item.awardsName }}</text>
|
|
<text>{{ !type ? formatNum(item.startValue) : item.communityCheckStr }}</text>
|
|
</view>
|
|
<view class="flex-1"><image class="item-img" :src="item.image" mode=""></image></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
userInfo: {},
|
|
userData: {},
|
|
gradeList: [],
|
|
type: 0
|
|
};
|
|
},
|
|
onLoad(e) {
|
|
this.type = e.type || 0;
|
|
let title = this.$t('APP_ADD_2');
|
|
if (this.type) {
|
|
title = this.$t('APP_ADD_3');
|
|
}
|
|
uni.setNavigationBarTitle({
|
|
title: title
|
|
});
|
|
this.getInfo();
|
|
this.getData();
|
|
},
|
|
methods: {
|
|
getInfo() {
|
|
let self = this;
|
|
self._get('member/api/member/get-info', {}, res => {
|
|
self.userInfo = res.data;
|
|
});
|
|
},
|
|
getData() {
|
|
let self = this;
|
|
let url = 'member/api/member-footmark/grow-up-footmark-grade';
|
|
if (this.type == 1) {
|
|
url = 'member/api/member-footmark/grow-up-footmark-awards';
|
|
}
|
|
self._get(url, {}, res => {
|
|
if (this.type == 1) {
|
|
self.gradeList = res.data.awardsList;
|
|
} else {
|
|
self.gradeList = res.data.gradeList;
|
|
}
|
|
self.userData = res.data;
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.user-info {
|
|
width: 704rpx;
|
|
margin: 26rpx auto;
|
|
background: #ffffff;
|
|
border-radius: 20rpx;
|
|
padding: 46rpx 20rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
.grade-img {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
}
|
|
.item-img {
|
|
width: 76rpx;
|
|
height: 76rpx;
|
|
}
|
|
.main-box {
|
|
width: 705rpx;
|
|
margin: 0 auto;
|
|
padding: 35rpx 23rpx;
|
|
box-sizing: border-box;
|
|
background: #ffffff;
|
|
border-radius: 15rpx;
|
|
}
|
|
.item-box {
|
|
// width: 444rpx;
|
|
height: 72rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 20rpx;
|
|
box-sizing: border-box;
|
|
align-items: center;
|
|
background: #c0c1c1;
|
|
border-radius: 0rpx 36rpx 36rpx 0rpx;
|
|
color: #fff;
|
|
}
|
|
</style>
|