|
@@ -10,57 +10,35 @@
|
|
|
</div> -->
|
|
|
<div class="list-wrapper" ref="listWrapper" @scroll="listScroll">
|
|
|
<template v-if="!dataList.length">
|
|
|
- <img
|
|
|
- class="icon-empty"
|
|
|
- :src="require('@/assets/svg/icon-empty-list.svg')"
|
|
|
- />
|
|
|
+ <img class="icon-empty" :src="require('@/assets/svg/icon-empty-list.svg')" />
|
|
|
</template>
|
|
|
<div ref="listContent">
|
|
|
- <div
|
|
|
- class="cell"
|
|
|
- v-for="(item, index) in dataList"
|
|
|
- :key="index"
|
|
|
- >
|
|
|
+ <div class="cell" v-for="(item, index) in dataList" :key="index">
|
|
|
<div class="img-wrapper">
|
|
|
<!-- 收入-任务红包领取 -->
|
|
|
<template v-if="item.bizType == 1">
|
|
|
- <img
|
|
|
- class="icon-avatar"
|
|
|
- :src="item.bizData.avatarUrl"
|
|
|
- />
|
|
|
- <img
|
|
|
- class="icon-give"
|
|
|
- :src="
|
|
|
- require('@/assets/svg/icon-giveaways.svg')
|
|
|
- "
|
|
|
- />
|
|
|
+ <img class="icon-avatar" :src="item.bizData.avatarUrl" />
|
|
|
+ <img class="icon-give" :src="
|
|
|
+ require('@/assets/svg/icon-giveaways.svg')
|
|
|
+ " />
|
|
|
</template>
|
|
|
<!-- 收入-任务红包结余退款, -->
|
|
|
<template v-else-if="item.bizType == 2">
|
|
|
- <img
|
|
|
- style="margin-left:-4px"
|
|
|
- :src="
|
|
|
- require('@/assets/svg/icon-give-refund-list.svg')
|
|
|
- "
|
|
|
- />
|
|
|
+ <img style="margin-left:-4px" :src="
|
|
|
+ require('@/assets/svg/icon-give-refund-list.svg')
|
|
|
+ " />
|
|
|
</template>
|
|
|
<!-- 收入-提现失败退款 -->
|
|
|
<template v-else-if="item.bizType == 3">
|
|
|
- <img
|
|
|
- style="margin-left:-4px"
|
|
|
- :src="
|
|
|
- require('@/assets/svg/icon-withdraw-paypal-list.svg')
|
|
|
- "
|
|
|
- />
|
|
|
+ <img style="margin-left:-4px" :src="
|
|
|
+ require('@/assets/svg/icon-withdraw-paypal-list.svg')
|
|
|
+ " />
|
|
|
</template>
|
|
|
<!-- 支出-paypal提现 -->
|
|
|
<template v-else-if="item.bizType == -1">
|
|
|
- <img
|
|
|
- style="margin-left:-4px"
|
|
|
- :src="
|
|
|
- require('@/assets/svg/icon-withdraw-paypal-list.svg')
|
|
|
- "
|
|
|
- />
|
|
|
+ <img style="margin-left:-4px" :src="
|
|
|
+ require('@/assets/svg/icon-withdraw-paypal-list.svg')
|
|
|
+ " />
|
|
|
</template>
|
|
|
</div>
|
|
|
<div class="info-wrapper">
|
|
@@ -79,7 +57,7 @@
|
|
|
Withdrawal to PayPal
|
|
|
</template>
|
|
|
</div>
|
|
|
- <div class="time">{{moment(item.createTimestamp).format('MM-DD HH:mm:ss')}}</div>
|
|
|
+ <div class="time">{{ moment(item.createTimestamp).format('MM-DD HH:mm:ss') }}</div>
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
<div class="msg">
|
|
@@ -88,9 +66,9 @@
|
|
|
<!-- 提现状态(0:已申请,1:支付中,2:提现成功,3:提现失败) -->
|
|
|
<template v-if="item.bizData.withdrawStatus == 1">
|
|
|
<div class="balance">
|
|
|
- -{{item.trxAmountValue/100}}
|
|
|
- <span>{{item.trxAmountCurrencyCode}}</span>
|
|
|
- <img src="" alt="">
|
|
|
+ -{{ item.trxAmountValue || 0 }}
|
|
|
+ <span>{{ item.trxAmountCurrencyInfo.currencyName }}</span>
|
|
|
+ <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
|
|
|
</div>
|
|
|
<div class="desc">
|
|
|
in progress
|
|
@@ -98,32 +76,32 @@
|
|
|
</template>
|
|
|
<template v-else-if="item.bizData.withdrawStatus == 2">
|
|
|
<div class="balance">
|
|
|
- -{{item.trxAmountValue/100}}
|
|
|
- <span>{{item.trxAmountCurrencyCode}}</span>
|
|
|
- <img src="" alt="">
|
|
|
+ -{{ item.trxAmountValue || 0 }}
|
|
|
+ <span>{{ item.trxAmountCurrencyInfo.currencyName }}</span>
|
|
|
+ <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-else-if="item.bizData.withdrawStatus == 3">
|
|
|
<div class="balance">
|
|
|
- -{{item.trxAmountValue/100}}
|
|
|
- <span>{{item.trxAmountCurrencyCode}}</span>
|
|
|
- <img src="" alt="">
|
|
|
+ -{{ item.trxAmountValue || 0 }}
|
|
|
+ <span>{{ item.trxAmountCurrencyInfo.currencyName }}</span>
|
|
|
+ <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
|
|
|
</div>
|
|
|
<div class="desc">
|
|
|
Withdrawal failed
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
- -{{item.trxAmountValue/100}}
|
|
|
- <span>{{item.trxAmountCurrencyCode}}</span>
|
|
|
- <img src="" alt="">
|
|
|
+ -{{ item.trxAmountValue || 0 }}
|
|
|
+ <span>{{ item.trxAmountCurrencyInfo.currencyName }}</span>
|
|
|
+ <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
|
|
|
</template>
|
|
|
</template>
|
|
|
<!-- 收入 -->
|
|
|
<template v-else>
|
|
|
- {{item.trxAmountValue/100}}
|
|
|
- <span>{{item.trxAmountCurrencyCode}}</span>
|
|
|
- <img src="" alt="">
|
|
|
+ {{ item.trxAmountValue || 0 }}
|
|
|
+ <span>{{ item.trxAmountCurrencyInfo.currencyName }}</span>
|
|
|
+ <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
|
|
|
</template>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -206,6 +184,7 @@ const listScroll = (e) => {
|
|
|
<style lang="scss" scoped>
|
|
|
.com-wrapper {
|
|
|
height: 100%;
|
|
|
+
|
|
|
.com-nav-bar {
|
|
|
padding: 14px;
|
|
|
box-sizing: border-box;
|
|
@@ -213,24 +192,28 @@ const listScroll = (e) => {
|
|
|
align-items: center;
|
|
|
font-weight: 500;
|
|
|
font-size: 13px;
|
|
|
+
|
|
|
.icon {
|
|
|
width: 16px;
|
|
|
margin-right: 6px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.list-wrapper {
|
|
|
width: 100%;
|
|
|
// height: calc(100% - 51px);
|
|
|
- height: 100%;
|
|
|
+ height: 100%;
|
|
|
overflow-y: auto;
|
|
|
position: relative;
|
|
|
+
|
|
|
.icon-empty {
|
|
|
position: absolute;
|
|
|
left: 50%;
|
|
|
top: 20%;
|
|
|
transform: translateX(-50%);
|
|
|
}
|
|
|
+
|
|
|
.cell {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
@@ -243,17 +226,20 @@ const listScroll = (e) => {
|
|
|
position: relative;
|
|
|
margin-right: 16px;
|
|
|
box-sizing: border-box;
|
|
|
+
|
|
|
.icon-avatar {
|
|
|
width: 34px;
|
|
|
height: 34px;
|
|
|
border-radius: 50%;
|
|
|
}
|
|
|
+
|
|
|
.icon-give {
|
|
|
position: absolute;
|
|
|
right: -4px;
|
|
|
bottom: 2px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.info-wrapper {
|
|
|
flex: 1;
|
|
|
height: 100%;
|
|
@@ -263,28 +249,37 @@ const listScroll = (e) => {
|
|
|
border-bottom: 1px solid #d1d1d1;
|
|
|
box-sizing: border-box;
|
|
|
padding-right: 12px;
|
|
|
+
|
|
|
.left {
|
|
|
.nickname {
|
|
|
font-weight: 500;
|
|
|
font-size: 14px;
|
|
|
margin-bottom: 5px;
|
|
|
}
|
|
|
+
|
|
|
.time {
|
|
|
font-size: 12px;
|
|
|
color: #b6b6b6;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.right {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
cursor: pointer;
|
|
|
+
|
|
|
.msg {
|
|
|
font-weight: 500;
|
|
|
font-size: 14px;
|
|
|
- span{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ span {
|
|
|
+ margin-left: 3px;
|
|
|
color: #E29A2E;
|
|
|
}
|
|
|
- img{
|
|
|
+
|
|
|
+ img {
|
|
|
width: 14px;
|
|
|
height: 14px;
|
|
|
margin-left: 4px;
|
|
@@ -294,9 +289,10 @@ const listScroll = (e) => {
|
|
|
text-align: right;
|
|
|
margin-bottom: 4px;
|
|
|
}
|
|
|
- .desc {
|
|
|
- }
|
|
|
+
|
|
|
+ .desc {}
|
|
|
}
|
|
|
+
|
|
|
.icon {
|
|
|
width: 18px;
|
|
|
height: 24px;
|