angelo
/
web-base-h5
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
web-base-h5/pages/mine/honoraryAwards/honoraryAwards.vue

525 lines
14 KiB
Vue
Raw Normal View History

## 初始化；
2025-03-23 09:29:40 +08:00
<template>
<view class="content">
<view class="header_top">
<view class="top_text1">
{{userInfo.memberName}}
</view>
<view class="header_top_right">
<image class="header_img" v-if="userInfo.awardsIcon" :src="userInfo.awardsIcon"></image>
<image class="header_img" v-else src="@/static/images/avatar.png" mode=""></image>
<view class="top_text2">{{userInfo.pkAwardsVal}}</view>
</view>
</view>
<view class="top_card">
<view class="card_flex">
<view class="card_text1" v-if="dataList.memberAwardsUnderVO">
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
{{ '左区' }}：{{ dataList.memberAwardsUnderVO.aSumRealPv }} {{ '万' }}
## 初始化；
2025-03-23 09:29:40 +08:00
</view>
<view class="card_text2" v-if="dataList.memberAwardsUnderVO.targetPv == '-1.00'">
{{ dataList.memberAwardsUnderVO.aSumRealPv }}/{{
dataList.memberAwardsUnderVO.aSumRealPv
}}
</view>
<view class="card_text2" v-else>
<span v-if="dataList.memberAwardsUnderVO.aSumRealPv > '0.00'">
{{ dataList.memberAwardsUnderVO.aSumRealPv }}/{{
dataList.memberAwardsUnderVO.targetPv}}
</span>
<span v-else>
{{ dataList.memberAwardsUnderVO.aSumRealPv }}
</span>
</view>
</view>
<view class="process">
<view class="process-s" style="width: 100%" v-if="dataList.memberAwardsUnderVO.targetPv == '-1.00'">
<view class="image-icon" v-if="dataList.memberAwardsUnderVO.aSumRealPv > '0.00'">
<image class="c_img" src="@/static/images/awards-1.png" mode=""></image>
</view>
</view>
<view class="process-s" style="width: 100%" v-else :style="{
width: `${
dataList.memberAwardsUnderVO.aSumRealPv > '0.00'
? GetPercent(
dataList.memberAwardsUnderVO.aSumRealPv,
dataList.memberAwardsUnderVO.targetPv
) >= 100
? '100%'
: GetPercent(
dataList.memberAwardsUnderVO.aSumRealPv,
dataList.memberAwardsUnderVO.targetPv
) + '%'
: '0%'
}`,
}">
<view class="image-icon" v-if="dataList.memberAwardsUnderVO.aSumRealPv > '0.00'">
<image class="c_img" src="@/static/images/awards-1.png" mode=""></image>
</view>
</view>
</view>
<view class="card_flex">
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
<view class="card_text1" v-if="dataList.memberAwardsUnderVO"> {{ '右区' }}：{{ dataList.memberAwardsUnderVO.bSumRealPv
}}{{ '万' }}</view>
## 初始化；
2025-03-23 09:29:40 +08:00
<view class="card_text2" v-if="dataList.memberAwardsUnderVO.targetPv == '-1.00'">
<span v-if="dataList.memberAwardsUnderVO.bSumRealPv > '0.00'">
{{ dataList.memberAwardsUnderVO.bSumRealPv }}/{{
dataList.memberAwardsUnderVO.bSumRealPv}}
</span>
<span v-else> {{ dataList.memberAwardsUnderVO.bSumRealPv }}</span>
</view>
<view class="card_text2" v-else>
{{ dataList.memberAwardsUnderVO.bSumRealPv }}/{{
dataList.memberAwardsUnderVO.targetPv
}}
</view>
</view>
<view class="process" v-if="dataList.memberAwardsUnderVO.targetPv == '-1.00'">
<view class="process-s oran" style="width: 100%"></view>
</view>
<view class="process" v-else>
<view class="process-s oran" :style="{
width: `${
dataList.memberAwardsUnderVO.bSumRealPv > '0.00'
? GetPercent(
dataList.memberAwardsUnderVO.bSumRealPv,
dataList.memberAwardsUnderVO.targetPv
) >= 100
? '100%'
: GetPercent(
dataList.memberAwardsUnderVO.bSumRealPv,
dataList.memberAwardsUnderVO.targetPv
) + '%'
: '0%'
}`,
}">
<view class="image-icon" v-if="dataList.memberAwardsUnderVO.bSumRealPv > '0.00'">
<image class="c_img" src="@/static/images/awards-1.png" mode=""></image>
</view>
</view>
</view>
</view>
<view class="main_box">
<view class="tab">
<view v-for="(item, index) in tabList" :key="index" @click="isTab = item.value" class="tab_i"
:class="[isTab===item.value?'heng':'heng1']">
{{ item.label }}
</view>
</view>
<template v-if="isTab==0">
<view class="main_item" v-for="(item,index) in dataList.leftMemberAwardsUnderList" :key="index">
<view class="main_top">
<view class="main_top_left">
<image class="headerimg" v-if="item.memberPath" :src="item.memberPath" mode=""></image>
<image class="headerimg" v-else src="@/static/images/avatar.png" mode=""></image>
<view class="">
<view class="header_text1">NO.0{{index+1}}</view>
<view class="header_text2">{{ item.memberName }}</view>
</view>
</view>
<view class="main_top_right">
<image class="awards_img" :src="item.image" mode=""></image>
<view class="awards_name">
{{item.pkTransactionVal}}
</view>
</view>
</view>
<view class="main_content">
<view class="main_content_flex">
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
<view class="main_content_text">{{ '左区' }}</view>
## 初始化；
2025-03-23 09:29:40 +08:00
<view class="main_process">
<view class="process-s" v-if="item.targetPv == '-1.00'" style="width: 100%">
<view class="image-icon" v-if="item.aSumRealPv > '0.00'">
<image class="c_img" src="@/static/images/awards-1.png" mode=""></image>
</view>
</view>
<view class="process-s" v-else :style="{
width: `${
item.aSumRealPv > '0.00'
? GetPercent(item.aSumRealPv, item.targetPv) >= 100
? '100%'
: GetPercent(item.aSumRealPv, item.targetPv) + '%'
: '0%'
}`,
}">
<view class="image-icon" v-if="item.aSumRealPv > '0.00'">
<image class="c_img" src="@/static/images/awards-1.png" mode=""></image>
</view>
</view>
</view>
</view>
<view class="main_content_flex">
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
<view class="main_content_text">{{ '右区' }}</view>
## 初始化；
2025-03-23 09:29:40 +08:00
<view class="main_process">
<view class="process-s" v-if="item.targetPv == '-1.00'"
style="background: #ffae36; width: 100%">
</view>
<view class="process-s" v-else style="background: #ffae36" :style="{
width: `${
item.bSumRealPv > '0.00'
? GetPercent(item.bSumRealPv, item.targetPv) >= 100
? '100%'
: GetPercent(item.bSumRealPv, item.targetPv) + '%'
: '0%'
}`,
}">
<view class="image-icon" v-if="item.bSumRealPv > '0.00'">
<image class="c_img" src="@/static/images/awards-1.png" mode=""></image>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<template v-if="isTab==1">
<view class="main_item" v-for="(item,index) in dataList.rightMemberAwardsUnderList" :key="index">
<view class="main_top">
<view class="main_top_left">
<image class="headerimg" v-if="item.memberPath" :src="item.memberPath" mode=""></image>
<image class="headerimg" v-else src="@/static/images/avatar.png" mode=""></image>
<view class="">
<view class="header_text1">NO.0{{index+1}}</view>
<view class="header_text2">{{ item.memberName }}</view>
</view>
</view>
<view class="main_top_right">
<image class="awards_img" :src="item.image" mode=""></image>
<view class="awards_name">
{{item.pkTransactionVal}}
</view>
</view>
</view>
<view class="main_content">
<view class="main_content_flex">
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
<view class="main_content_text">{{ '左区' }}</view>
## 初始化；
2025-03-23 09:29:40 +08:00
<view class="main_process">
<view class="process-s" v-if="item.targetPv == '-1.00'" style="width: 100%">
<view class="image-icon" v-if="item.aSumRealPv > '0.00'">
<image class="c_img" src="@/static/images/awards-1.png" mode=""></image>
</view>
</view>
<view class="process-s" v-else :style="{
width: `${
item.aSumRealPv > '0.00'
? GetPercent(item.aSumRealPv, item.targetPv) >= 100
? '100%'
: GetPercent(item.aSumRealPv, item.targetPv) + '%'
: '0%'
}`,
}">
<view class="image-icon" v-if="item.aSumRealPv > '0.00'">
<image class="c_img" src="@/static/images/awards-1.png" mode=""></image>
</view>
</view>
</view>
</view>
<view class="main_content_flex">
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
<view class="main_content_text">{{ '右区' }}</view>
## 初始化；
2025-03-23 09:29:40 +08:00
<view class="main_process">
<view class="process-s" v-if="item.targetPv == '-1.00'"
style="background: #ffae36; width: 100%">
</view>
<view class="process-s" v-else style="background: #ffae36" :style="{
width: `${
item.bSumRealPv > '0.00'
? GetPercent(item.bSumRealPv, item.targetPv) >= 100
? '100%'
: GetPercent(item.bSumRealPv, item.targetPv) + '%'
: '0%'
}`,
}">
<view class="image-icon" v-if="item.bSumRealPv > '0.00'">
<image class="c_img" src="@/static/images/awards-1.png" mode=""></image>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
</view>
</view>
</template>
<script>
import * as api from '@/config/login.js'
export default {
data() {
return {
userInfo: {},
dataList: [],
tabList: [{
value: 0,
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
label: '左区'
## 初始化；
2025-03-23 09:29:40 +08:00
}, {
value: 1,
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
label: '右区'
## 初始化；
2025-03-23 09:29:40 +08:00
}],
isTab: 0,
}
},
onShow() {
this.getInfo()
this.getIndexAwardsData()
},
methods: {
getIndexAwardsData() {
api.getIndexAwards().then((res) => {
if (res.code == "200") {
this.dataList = res.data;
}
});
},
GetPercent(num, total) {
num = parseFloat(num);
total = parseFloat(total);
if (total < 0) {
return 100 + "%";
}
if (isNaN(num) || isNaN(total)) {
return "-";
}
return total <= 0 ? 0 : (num / total) * 100;
},
getInfo() {
api.getInfo().then(res => {
if (res) {
this.userInfo = res.data
}
}).catch(error => {
reject(error)
})
}
}
}
</script>
<style lang="scss" scoped>
.content {
padding: 10rpx 22rpx 50rpx 22rpx;
min-height: 100vh;
background: linear-gradient(to bottom, #e85244 0%, #e85244 20%, #eee 20%, #eee 100%);
font-size: 24rpx;
.header_top {
padding: 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: bold;
color: #FFFFFF;
.top_text1 {
font-size: 32rpx;
}
.header_top_right {
text-align: center;
.header_img {
width: 72rpx;
height: 66rpx;
}
.top_text2 {
font-size: 24rpx;
margin-top: 10rpx;
}
}
}
.top_card {
background: #FFFFFF;
border-radius: 20rpx;
padding: 28rpx 22rpx;
.card_flex {
display: flex;
justify-content: space-between;
align-items: center;
.card_text1 {
color: #333333;
}
.card_text2 {
color: #999999;
}
}
.process {
width: 665rpx;
height: 18rpx;
background: #ededed;
border-radius: 10rpx;
margin: 22rpx 0;
.process-s {
background: #fe4c4b;
border-radius: 10rpx;
height: 18rpx;
position: relative;
.image-icon {
.c_img {
width: 79rpx;
height: 62rpx;
position: absolute;
right: -21rpx;
top: -23rpx;
}
}
}
.oran {
background: #ffae36
}
}
}
.main_box {
padding: 42rpx 20rpx 24rpx 20rpx;
background: #FFFFFF;
border-radius: 20rpx;
margin-top: 20rpx;
.tab {
display: flex;
align-items: center;
justify-content: space-around;
margin-bottom: 6rpx;
background-color: #FFFFFF;
.tab_i {
text-align: center;
font-family: Source Han Sans CN;
font-weight: bold;
color: #333333;
white-space: nowrap;
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 24rpx;
font-size: 28rpx;
}
.heng {
border-bottom: 6rpx solid #FB3024;
color: #FB3024;
}
.heng {
color: #333333;
}
}
.main_item {
background: #F2F2F2;
border-radius: 20rpx;
padding: 23rpx 20rpx 35rpx 20rpx;
margin-top: 20rpx;
.main_top {
display: flex;
justify-content: space-between;
align-items: center;
.main_top_left {
display: flex;
align-items: center;
.headerimg {
width: 98rpx;
height: 98rpx;
border-radius: 50%;
margin-right: 15rpx;
}
.header_text1 {
font-weight: bold;
color: #FB3024;
font-size: 20rpx;
font-family: Microsoft YaHei UI;
}
.header_text2 {
font-size: 28rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #030219;
margin-top: 8rpx;
}
}
.main_top_right {
.awards_img {
width: 65rpx;
height: 60rpx;
}
.awards_name {
margin-top: 10rpx;
font-size: 20rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #666666;
}
}
}
.main_content {
.main_content_flex {
display: flex;
align-items: center;
margin-top: 20rpx;
.main_content_text {
font-size: 24rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #333333;
margin-right: 7rpx;
}
.main_process {
width: 560rpx;
height: 18rpx;
background: #ffffff;
border-radius: 10rpx;
margin: 22rpx 0;
.process-s {
background: #fe4c4b;
border-radius: 10rpx;
height: 18rpx;
position: relative;
.image-icon {
.c_img {
width: 79rpx;
height: 62rpx;
position: absolute;
right: -21rpx;
top: -23rpx;
}
}
}
.oran {
background: #ffae36
}
}
}
}
}
}
}
</style>