|
|
@@ -4,53 +4,33 @@
|
|
|
<div class="list-wrapper" ref="pageGiveListDom">
|
|
|
<div class="give-list" v-if="currentTabIndex == 0">
|
|
|
<template v-if="giveList.length">
|
|
|
- <div
|
|
|
- class="cell"
|
|
|
- :class="{ 'cell-center': item.type == 1 || item.type == 3 }"
|
|
|
- v-for="(item, index) in giveList"
|
|
|
- :key="index"
|
|
|
- @click="clickListItem(item, index)"
|
|
|
- >
|
|
|
- <red-dot
|
|
|
- class="red-dots"
|
|
|
- v-if="item.unReadMsgCount > 0 && isReadMsg"
|
|
|
- ></red-dot>
|
|
|
+ <div class="cell" :class="{ 'cell-center': item.type == 1 || item.type == 3 }"
|
|
|
+ v-for="(item, index) in giveList" :key="index" @click="clickListItem(item, index)">
|
|
|
+ <red-dot class="red-dots" v-if="item.unReadMsgCount > 0 && isReadMsg"></red-dot>
|
|
|
|
|
|
<div class="img-wrapper">
|
|
|
<!-- 收到红包 -->
|
|
|
<template v-if="item.type == 1 || item.type == 3">
|
|
|
<img class="icon-avatar" :src="item.userInfo.avatarUrl" />
|
|
|
- <img
|
|
|
- class="icon-give"
|
|
|
- :src="require('@/assets/svg/icon-get-giveaways-s.svg')"
|
|
|
- />
|
|
|
+ <img class="icon-give" :src="require('@/assets/svg/icon-get-giveaways-s.svg')" />
|
|
|
</template>
|
|
|
<!-- 发出去红包 -->
|
|
|
<template v-else-if="2">
|
|
|
- <img
|
|
|
- class="icon-big-give"
|
|
|
- :src="require('@/assets/svg/icon-send-giveaways-s.svg')"
|
|
|
- />
|
|
|
- <img
|
|
|
- class="icon-mark-give"
|
|
|
- :src="require('@/assets/svg/icon-send-giveaways-mark.svg')"
|
|
|
- />
|
|
|
+ <img class="icon-big-give" :src="require('@/assets/svg/icon-send-giveaways-s.svg')" />
|
|
|
+ <img class="icon-mark-give" :src="require('@/assets/svg/icon-send-giveaways-mark.svg')" />
|
|
|
</template>
|
|
|
</div>
|
|
|
- <div
|
|
|
- class="info-wrapper"
|
|
|
- :class="{ 'info-center': item.type == 1 }"
|
|
|
- >
|
|
|
+ <div class="info-wrapper" :class="{ 'info-center': item.type == 1 }">
|
|
|
<div class="left">
|
|
|
<div class="nickname">
|
|
|
<template v-if="item.type == 1">
|
|
|
- Get Giveaway
|
|
|
+ Get Giveaway
|
|
|
</template>
|
|
|
<template v-else-if="item.type == 2">
|
|
|
- {{ item.postTaskLuckdrop.luckdropType === 1 ? 'Send Giveaway' : 'Lottery Giveaway' }}
|
|
|
+ {{ item.postTaskLuckdrop.luckdropType === 1 ? 'Send Giveaway' : 'Lottery Giveaway' }}
|
|
|
</template>
|
|
|
<template v-else-if="item.type == 3">
|
|
|
- Lottery
|
|
|
+ Lottery
|
|
|
</template>
|
|
|
</div>
|
|
|
<div class="time">
|
|
|
@@ -59,20 +39,19 @@
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
<div class="msg">
|
|
|
- <div
|
|
|
- class="bold"
|
|
|
- :class="{
|
|
|
+ <div class="bold" :class="{
|
|
|
'align-content':
|
|
|
(item.type == 2 ||
|
|
|
(item.type == 1 && item.status == 1)) &&
|
|
|
- item?.amount?.length + item?.currencySymbol?.length > 12,
|
|
|
+ item?.amount?.length + item?.currencySymbol?.length > 12,
|
|
|
+ 'custom-bold': item.rewardType === RewardType.custom
|
|
|
}"
|
|
|
>
|
|
|
<!-- 收到的 -->
|
|
|
<template v-if="item.type == 1">
|
|
|
<!-- 进行中-->
|
|
|
<template v-if="item.status == 0">
|
|
|
- in progress
|
|
|
+ In Progress
|
|
|
</template>
|
|
|
<!-- 已完成 -->
|
|
|
<template v-else-if="item.status == 1">
|
|
|
@@ -80,13 +59,12 @@
|
|
|
<template v-if="item.rewardType === RewardType.money">
|
|
|
<span class="blance">
|
|
|
<a-tooltip :title="item.amount">
|
|
|
- {{ getBit(item.amount) }}</a-tooltip
|
|
|
- >
|
|
|
+ {{ getBit(item.amount) }}</a-tooltip>
|
|
|
</span>
|
|
|
<div class="coin-type-wrapper">
|
|
|
<span class="coin-type">{{
|
|
|
item.currencySymbol || ""
|
|
|
- }}</span>
|
|
|
+ }}</span>
|
|
|
<img :src="item.currencyIconPath" alt="" />
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -113,19 +91,23 @@
|
|
|
<div class="coin-type-wrapper">
|
|
|
<span class="coin-type">{{
|
|
|
item.currencySymbol || ""
|
|
|
- }}</span>
|
|
|
+ }}</span>
|
|
|
<img :src="item.currencyIconPath" alt="" />
|
|
|
</div>
|
|
|
</template>
|
|
|
<!-- 已中奖-通用型奖品展示 -->
|
|
|
<template v-else>
|
|
|
- <span class="blance cuntom-prize">{{item.customizedReward}}</span>
|
|
|
+ <span class="blance cuntom-prize">
|
|
|
+ {{item.customizedReward || ''}}<span class="cuntom-prize-icon">X</span>
|
|
|
+ <span class="cuntom-prize-total">{{item?.postTaskLuckdrop?.totalCount || ''}}</span>
|
|
|
+ </span>
|
|
|
+
|
|
|
</template>
|
|
|
</template>
|
|
|
<template v-else-if="item.type == 3">
|
|
|
<template v-if="item.status == 1">In Progress</template>
|
|
|
<template v-else-if="item.status == 2">
|
|
|
- Open in {{ item.downTime || '' }}
|
|
|
+ Open in {{ item.downTime || '' }}
|
|
|
</template>
|
|
|
<template v-else-if="item.status == 3">
|
|
|
Unfinished
|
|
|
@@ -141,7 +123,7 @@
|
|
|
<div class="coin-type-wrapper">
|
|
|
<span class="coin-type">{{
|
|
|
item.currencySymbol || ""
|
|
|
- }}</span>
|
|
|
+ }}</span>
|
|
|
<img :src="item.currencyIconPath" alt="" />
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -149,7 +131,7 @@
|
|
|
<template v-else>
|
|
|
<span class="blance cuntom-prize">{{item.customizedReward}}</span>
|
|
|
</template>
|
|
|
-
|
|
|
+
|
|
|
</template>
|
|
|
<template v-else-if="item.status == 5">
|
|
|
Didn't win
|
|
|
@@ -167,89 +149,78 @@
|
|
|
</template>
|
|
|
<!-- 进行中 -->
|
|
|
<template v-else-if="item.status == 1">
|
|
|
- {{ item.postTaskLuckdrop.receivedCount }}/{{
|
|
|
+ <template v-if="item.postTaskLuckdrop && item.postTaskLuckdrop.luckdropType == 2">
|
|
|
+ {{ item.downTime || '' }}
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ {{ item.postTaskLuckdrop.receivedCount }}/{{
|
|
|
item.postTaskLuckdrop.totalCount
|
|
|
- }}
|
|
|
+ }}
|
|
|
+ </template>
|
|
|
</template>
|
|
|
<!-- 2:已结束; 3:提前终止-->
|
|
|
<template v-else-if="item.status == 2 || item.status == 3">
|
|
|
+ <!-- 普通红包 -->
|
|
|
<template v-if="item.postTaskLuckdrop && item.postTaskLuckdrop.luckdropType == 1">
|
|
|
- ({{
|
|
|
- item.status == 2 ? "Time expired" : "Termination"
|
|
|
- }})
|
|
|
- <template v-if="item.status == 2 || item.status == 3 && item.srcContentId">
|
|
|
- {{ item.postTaskLuckdrop.receivedCount }}/{{
|
|
|
- item.postTaskLuckdrop.totalCount
|
|
|
- }}
|
|
|
- </template>
|
|
|
+ <template v-if="item.status == 2">
|
|
|
+ (Time expired)
|
|
|
+ </template>
|
|
|
+ <template v-if="item.status == 3">
|
|
|
+ {{item.srcContentId ? '(Termination)' : 'Termination'}}
|
|
|
+ </template>
|
|
|
+ <template v-if="item.status == 2 || item.status == 3 && item.srcContentId">
|
|
|
+ {{ item.postTaskLuckdrop.receivedCount }}/{{
|
|
|
+ item.postTaskLuckdrop.totalCount
|
|
|
+ }}
|
|
|
+ </template>
|
|
|
</template>
|
|
|
+ <!-- 抽奖红包 -->
|
|
|
<template v-else>
|
|
|
- Termination
|
|
|
+ <!-- 自定义奖品类型 结束时显示 Complete -->
|
|
|
+ {{ item.rewardType === RewardType.custom && item.status == 2 ? 'Complete' : 'Termination' }}
|
|
|
</template>
|
|
|
</template>
|
|
|
<!-- 红包提前终止/退款（进行中）显示-->
|
|
|
<template v-if="item.status == 4">
|
|
|
- {{ item.postTaskLuckdrop && item.postTaskLuckdrop.luckdropType == 1 ? 'Terminating' : 'Open in ' + item.downTime || '' }}
|
|
|
+ {{ item.postTaskLuckdrop && item.postTaskLuckdrop.luckdropType == 1 ? 'Terminating' : 'Open in '
|
|
|
+ + item.downTime || '' }}
|
|
|
</template>
|
|
|
|
|
|
<!-- 进行中或者未发送成功时显示
|
|
|
v-if="item.status == 1 || item.postTaskLuckdrop.reSendAvailable"-->
|
|
|
<div class="desc-bottom-bar">
|
|
|
<!-- 没有终止红包时显示 -->
|
|
|
- <div
|
|
|
- v-if="item.postTaskLuckdrop.terminatedAvailable"
|
|
|
- class="btn"
|
|
|
- @click.stop="terminaHandler(item, index)"
|
|
|
- >
|
|
|
+ <div v-if="item.postTaskLuckdrop.terminatedAvailable" class="btn"
|
|
|
+ @click.stop="terminaHandler(item, index)">
|
|
|
Termination
|
|
|
</div>
|
|
|
|
|
|
<!-- 红包未发出显示 -->
|
|
|
- <div
|
|
|
- class="btn send-btn"
|
|
|
- v-if="item.postTaskLuckdrop.reSendAvailable"
|
|
|
- @click.stop="sendTwitter(item)"
|
|
|
- >
|
|
|
+ <div class="btn send-btn" v-if="item.postTaskLuckdrop.reSendAvailable"
|
|
|
+ @click.stop="sendTwitter(item)">
|
|
|
Send
|
|
|
</div>
|
|
|
- <div
|
|
|
- v-else-if="item.srcContentId"
|
|
|
- class="btn detail-btn"
|
|
|
- @click.stop="clickListItem(item, index)"
|
|
|
- >
|
|
|
+ <div v-else-if="item.srcContentId" class="btn detail-btn"
|
|
|
+ @click.stop="clickListItem(item, index)">
|
|
|
details
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 发红包—— 未发出、进行中 隐藏 -->
|
|
|
- <img
|
|
|
- v-if="item.type != 2"
|
|
|
- class="icon"
|
|
|
- :src="require('@/assets/svg/icon-cell-arrow-right.svg')"
|
|
|
- />
|
|
|
+ <img v-if="item.type != 2" class="icon" :src="require('@/assets/svg/icon-cell-arrow-right.svg')" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
- <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>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <modal
|
|
|
- :visible="modalVisible"
|
|
|
- :title="modalTitle"
|
|
|
- :content="modalContent"
|
|
|
- cancelText="Termination"
|
|
|
- confirmText="Cancel"
|
|
|
- @cancel="modalCancel"
|
|
|
- @confirm="modalConfirm"
|
|
|
- />
|
|
|
+ <modal :visible="modalVisible" :title="modalTitle" :content="modalContent" cancelText="Termination"
|
|
|
+ confirmText="Cancel" @cancel="modalCancel" @confirm="modalConfirm" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -697,6 +668,16 @@ onBeforeUnmount(() => {
|
|
|
.cuntom-prize {
|
|
|
max-width: 130px;
|
|
|
word-break: break-word;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cuntom-prize-icon {
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cuntom-prize-total {
|
|
|
+ color: #000;
|
|
|
+ word-break: break-word;
|
|
|
}
|
|
|
|
|
|
.coin-type-wrapper {
|
