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