266 lines
6.7 KiB
Vue
266 lines
6.7 KiB
Vue
<template>
|
||
<view class="">
|
||
<image class="award-bg" src="/static/bg/bg-award.png" mode=""></image>
|
||
<view class="d-b-c userinfo">
|
||
<view class="f32 white fb flex-1">{{ userInfo.memberName }}</view>
|
||
<view class="d-c d-c-c">
|
||
<image class="grad-img" :src="userInfo.image" mode=""></image>
|
||
<view class="f24 white fb">{{ userInfo.awardsName }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="userinfo-content">
|
||
<view class="d-b-c mb20">
|
||
<view class="gray3 ">
|
||
{{ $t('S_C_18') }}：
|
||
<text>{{ userInfo.aSumRealPv }}</text>
|
||
{{ $t('S_C_58') }}
|
||
</view>
|
||
<view class="gray9">{{ userInfo.aSumRealPv }}/{{ userInfo.targetPv }}</view>
|
||
</view>
|
||
<view class="award-slider mb30">
|
||
<view :style="'width: ' + getSlider(userInfo.aSumRealPv, userInfo.targetPv) + '%;'" class="award-slider-active red">
|
||
<image v-if="userInfo.aSumRealPv * 1 > 0" class="award-simg" src="/static/icon/award-slider.png" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<view class="d-b-c mb20">
|
||
<view class="gray3 ">
|
||
{{ $t('S_C_19') }}：
|
||
<text>{{ userInfo.bSumRealPv }}</text>
|
||
{{ $t('S_C_58') }}
|
||
</view>
|
||
<view class="gray9">{{ userInfo.bSumRealPv }}/{{ userInfo.targetPv }}</view>
|
||
</view>
|
||
<view class="award-slider">
|
||
<view :style="'width: ' + getSlider(userInfo.bSumRealPv, userInfo.targetPv) + '%;'" class="award-slider-active yellow">
|
||
<image v-if="userInfo.bSumRealPv * 1 > 0" class="award-simg" src="/static/icon/award-slider.png" mode=""></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="award-content">
|
||
<view class="d-b-c award-nav">
|
||
<view @click="changeType(0)" class="award-nav-item" :class="{ active: listType == 0 }">{{ $t('S_C_18') }}</view>
|
||
<view @click="changeType(1)" class="award-nav-item" :class="{ active: listType == 1 }">{{ $t('S_C_19') }}</view>
|
||
</view>
|
||
<view class="awardTilte-list">
|
||
<view class="awardTitle-item" v-for="(item, index) in listData" :key="index">
|
||
<view class="awarditem-top d-b-c">
|
||
<image class="user-ava" :src="item.memberPath || '/static/default.png'" mode=""></image>
|
||
<view class="flex-1">
|
||
<view class="fb domation f22">NO.{{ index + 1 > 10 ? index + 1 : '0' + (index + 1) }}</view>
|
||
<view class="f28 gray3">{{ item.memberName || $t('ESTORE_LEVEL_0') }}</view>
|
||
</view>
|
||
<view class="d-c d-c-c">
|
||
<image class="user-gradeimg" :src="item.image" mode=""></image>
|
||
<view class="f20 gray6">{{ item.awardsName }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="d-b-c mb20">
|
||
<view style="white-space: nowrap;" class="mr10">{{ $t('S_C_18') }}</view>
|
||
<view class="award-slider flex-1 bg-white">
|
||
<view :style="'width: ' + getSlider(item.aSumRealPv, item.targetPv) + '%;'" class="award-slider-active red">
|
||
<image v-if="item.aSumRealPv * 1 > 0" class="award-simg" src="/static/icon/award-slider.png" mode=""></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="d-b-c">
|
||
<view style="white-space: nowrap;" class="mr10">{{ $t('S_C_19') }}</view>
|
||
<view class="award-slider flex-1 bg-white">
|
||
<view :style="'width: ' + getSlider(item.bSumRealPv, item.targetPv) + '%;'" class="award-slider-active yellow">
|
||
<image v-if="item.bSumRealPv * 1 > 0" class="award-simg" src="/static/icon/award-slider.png" mode=""></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
userInfo: {
|
||
aSumRealPv: '0',
|
||
bSumRealPv: '0',
|
||
memberName: '',
|
||
targetPv: '0',
|
||
awardsName: '',
|
||
image: '',
|
||
pkAwards: 0,
|
||
pkTransaction: 0,
|
||
pkTransactionVal: '',
|
||
asumRealPv: '0',
|
||
bsumRealPv: '0'
|
||
},
|
||
listType: 0,
|
||
listData: [],
|
||
leftMemberAwardsUnderList: [],
|
||
rightMemberAwardsUnderList: [],
|
||
isFist: true
|
||
};
|
||
},
|
||
onShow() {
|
||
this.getData();
|
||
},
|
||
methods: {
|
||
getSlider(a, b) {
|
||
if (b * 1 != 0 && !b) {
|
||
return 0;
|
||
} else if (b * 1 > 0) {
|
||
return ((a * 1) / (b * 1)) * 100;
|
||
} else {
|
||
return 100;
|
||
}
|
||
},
|
||
changeType(n) {
|
||
this.listType = n;
|
||
if (n == 0) {
|
||
this.listData = this.leftMemberAwardsUnderList;
|
||
} else {
|
||
this.listData = this.rightMemberAwardsUnderList;
|
||
}
|
||
},
|
||
getData() {
|
||
let self = this;
|
||
self._get('member/api/member/index-awards', {}, res => {
|
||
self.userInfo = res.data.memberAwardsUnderVO;
|
||
self.leftMemberAwardsUnderList = res.data.leftMemberAwardsUnderList;
|
||
self.rightMemberAwardsUnderList = res.data.rightMemberAwardsUnderList;
|
||
if (this.isFist) {
|
||
self.listData = self.leftMemberAwardsUnderList;
|
||
this.isFist = false;
|
||
}
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.award-bg {
|
||
width: 750rpx;
|
||
height: 287rpx;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 0;
|
||
}
|
||
.userinfo {
|
||
position: relative;
|
||
z-index: 1;
|
||
padding: 30rpx 43rpx 20rpx 43rpx;
|
||
.grad-img {
|
||
width: 72rpx;
|
||
height: 66rpx;
|
||
margin-bottom: 7rpx;
|
||
}
|
||
}
|
||
|
||
.award-slider {
|
||
width: 100%;
|
||
height: 18rpx;
|
||
background: #eeeeee;
|
||
border-radius: 9rpx;
|
||
position: relative;
|
||
.award-slider-active {
|
||
position: absolute;
|
||
max-width: 100%;
|
||
left: 0;
|
||
top: 0;
|
||
height: 18rpx;
|
||
border-radius: 9rpx;
|
||
.award-simg {
|
||
width: 82rpx;
|
||
height: 64rpx;
|
||
position: absolute;
|
||
top: 0;
|
||
right: -22rpx;
|
||
bottom: 0;
|
||
margin: auto;
|
||
}
|
||
}
|
||
.award-slider-active.red {
|
||
background: #fb3024;
|
||
}
|
||
.award-slider-active.yellow {
|
||
background: #ffae36;
|
||
}
|
||
}
|
||
.award-slider.bg-white {
|
||
background: #fff;
|
||
}
|
||
.userinfo-content {
|
||
width: 706rpx;
|
||
box-sizing: border-box;
|
||
margin: 0 auto;
|
||
padding: 28rpx 24rpx;
|
||
background: #ffffff;
|
||
border-radius: 20rpx;
|
||
position: relative;
|
||
z-index: 1;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.award-content {
|
||
width: 706rpx;
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 0 20rpx 24rpx 20rpx;
|
||
box-sizing: border-box;
|
||
margin: 0 auto;
|
||
.award-nav {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-bottom: 1rpx solid #eeeeee;
|
||
.award-nav-item {
|
||
height: 97rpx;
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: relative;
|
||
}
|
||
.award-nav-item.active::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
margin: auto;
|
||
width: 80rpx;
|
||
height: 5rpx;
|
||
background: #fb3024;
|
||
}
|
||
}
|
||
}
|
||
.awardTilte-list {
|
||
padding-top: 18rpx;
|
||
.awardTitle-item {
|
||
padding: 23rpx 20rpx 32rpx 20rpx;
|
||
background: #f2f2f2;
|
||
border-radius: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
.awarditem-top {
|
||
margin-bottom: 40rpx;
|
||
.user-ava {
|
||
width: 98rpx;
|
||
height: 98rpx;
|
||
margin-right: 15rpx;
|
||
display: block;
|
||
flex-shrink: 0;
|
||
}
|
||
.user-gradeimg {
|
||
width: 65rpx;
|
||
height: 60rpx;
|
||
display: block;
|
||
flex-shrink: 0;
|
||
margin-bottom: 9rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|