零元红包

components/FontAmount.vue

@@ -0,0 +1,57 @@
+<template>
+    <span :style="{ fontSize: amount_font_size + 'px' }">{{ amount }}</span>
+</template>
+
+<script>
+export default {
+    props: {
+        amount: {
+            type: String,
+            default: ''
+        },
+        width: {
+            type: Number,
+            default: 360
+        },
+        fontSize: {
+            type: Number,
+            default: 56
+        },
+    },
+    data() {
+        return {
+            amount_font_size: 60,
+        }
+    },
+    watch: {
+        amount(newV) {
+            if (newV) {
+                this.setFontSize()
+            }
+        },
+        width(newV) {
+            if (newV) {
+                this.setFontSize()
+            }
+        },
+        fontSize(newV) {
+            if (newV) {
+                this.setFontSize()
+            }
+        },
+    },
+    mounted() {
+        this.setFontSize()
+    },
+    methods: {
+        setFontSize() {
+            let _num = parseInt(this.width / this.amount.length);
+            this.amount_font_size = _num < this.fontSize ? _num : this.fontSize;
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

pages/index.vue

@@ -10,8 +10,10 @@
 			</div>
 
 			<!-- 红包打开 -->
-			<div class="redPacket" v-show="status != 'not-open'"
-				:class="{ redPacket2: status != 'open', key_packet: status == 'open' }">
+			<div class="redPacket" 
+				:class="{ redPacket2: status != 'open', key_packet: status == 'open' }"
+				v-if="status != 'nothing'"
+				v-show="status != 'not-open'">
 
 				<!-- 内容 -->
 				<div class="head">
@@ -76,20 +78,41 @@
 					</div>
 				</div>
 			</div>
+			<div class="redBag" v-else>
+				<img src="/subject/001-card.png" alt="">
+				<img class="open-gif" src="/subject/001.gif" />
+				<div class="title" v-if="detail.postBizData.postUserInfo">
+					<img :src="detail.postBizData.postUserInfo.avatarUrl" alt />
+					<span>{{ detail.postBizData.postUserInfo.nickName || 'FutureDoctor' }}</span>
+				</div>
+				<div class="money-area">
+					<div class="txt">{{ detail.postBizData.currencySymbol }} GIVEAWAY</div>
+					<div class="coin">
+						<img :src="detail.postBizData.currencyIconPath" alt />
+						<font-amount :amount="detail.postBizData.amountValue"></font-amount>
+					</div>
+					<div class="people">{{ detail.postBizData.totalCount }} WINNERS TO SHARE</div>
+				</div>
+			</div>
 
 
 			<!-- 安装 -->
-			<div class="install" v-if="status == 'open' || status == 'opened'"
+			<div class="install" v-if="status == 'nothing' || status == 'open' || status == 'opened'"
 				:class="{ key_install: status == 'open' }">
-				<div class="title">Withdraw to Wallet</div>
-				<div class="validity">
-					<template v-if="validity_state">
-						<span style="color:#FFA620;">Remaining valid time </span>
-						<span style="color: #FFA620;">{{ validity }}</span>
-					</template>
-					<template v-else>
-						<span style="color: #FFA620;">Giveaways Validity</span>
-					</template>
+				<div v-if="status == 'nothing'">
+					<div class="title">Install Denet to Draw</div>
+				</div>
+				<div v-else>
+					<div class="title">Withdraw to Wallet</div>
+					<div class="validity">
+						<template v-if="validity_state">
+							<span style="color:#FFA620;">Remaining valid time </span>
+							<span style="color: #FFA620;">{{ validity }}</span>
+						</template>
+						<template v-else>
+							<span style="color: #FFA620;">Giveaways Validity</span>
+						</template>
+					</div>
 				</div>
 
 				<div class="flow">
@@ -103,14 +126,15 @@
 					<div class="install_btn" @click="installExtension">Install</div>
 					<div class="area_num">
 						<div class="num">2</div>
-						<span>Complete Tasks by {{ detail.postBizData.postUserInfo.nickName }}</span>
+						<span v-if="status == 'nothing'">Complete Tasks</span>
+						<span v-else>Complete Tasks by {{ detail.postBizData.postUserInfo.nickName }}</span>
 					</div>
 					<div class="tip">Complete like, retweet and follow in a simple way</div>
 				</div>
 			</div>
 
 			<!-- 过期 -->
-			<div class="install install-error" v-if="status == 'nothing' || status == 'expire'">
+			<div class="install install-error" v-if="status == 'expire'">
 				<div class="title">Install DeNet</div>
 				<div class="title">Don't miss the next Giveaway</div>
 				<div class="tip">Used to verify tasks and get rewards</div>
@@ -191,6 +215,7 @@ import Cookies from 'js-cookie'
 import { isBrowser } from '../utils/help.js'
 import Report from "../log-center/log"
 import { Toast } from 'vant';
+import FontAmount from '../components/FontAmount.vue'
 
 
 var moment = require('moment');
@@ -248,7 +273,9 @@ export default {
 			}
 		}
 	},
-
+	components: {
+		FontAmount,
+	},
 	head() {
 		return {
 			type: '',
@@ -359,24 +386,31 @@ export default {
 			switch (data.code.toString()) {
 				case '0':
 					this.getDetail()
-					if (data.data.newReceived) {
-						this.status = 'not-open'
-						setTimeout(() => {
-							this.status = 'open'
-						}, 3000)
-						this.receiveAmount = data.data.receiveAmount
+					if (data.data.receiveAmount == '0') {
+						this.status = 'nothing'
 					} else {
-						this.status = 'opened'
+						if (data.data.newReceived) {
+							this.status = 'not-open'
+							setTimeout(() => {
+								this.status = 'open'
+							}, 3000)
+							this.receiveAmount = data.data.receiveAmount
+						} else {
+							this.status = 'opened'
+						}
 					}
 					this.getValidity(data.data.endTimestamp)
 					this.receiveAmount = data.data.receiveAmount
 					this.getFontSize(this.receiveAmount)
 					break;
 				case '2003':
-					this.status = 'expire'
+					// this.status = 'expire'
+					this.getDetail()
+					this.status = 'nothing'
 					break
 				// 红包被领完了
 				case '2008':
+					this.getDetail()
 					this.status = 'nothing'
 					break
 				case '2029':
@@ -385,7 +419,9 @@ export default {
 					break
 				default:
 					console.log('getRedPacket', data)
-					this.show_home = false
+					// this.show_home = false
+					this.getDetail()
+					this.status = 'nothing'
 					break;
 			}
 			// 领取列表分页
@@ -873,6 +909,133 @@ body,
 	}
 
 
+	.redBag {
+		display: flex;
+		justify-content: flex-start;
+		flex-direction: column;
+		position: absolute;
+		top: 14rem;
+		left: 30.6rem;
+		width: 37.5rem;
+		height: 50rem;
+		border-radius: 2rem;
+		overflow-y: hidden;
+		box-shadow: 0 0 5px #888888;
+		background: #fff;
+
+		.money-area {
+			width: 100%;
+			position: absolute;
+			top: 65px;
+			display: flex;
+			flex-wrap: wrap;
+			align-items: center;
+			justify-content: center;
+
+			.txt {
+				font-weight: 800;
+				font-size: 16px;
+				text-align: center;
+				letter-spacing: 0.3px;
+				color: #FFFFFF;
+			}
+
+			.coin {
+				text-align: center;
+				margin-top: 6px;
+				margin-bottom: 7px;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				width: 90%;
+
+				img {
+				width: 46px;
+				height: 46px;
+				border-radius: 50%;
+				border: 3px solid #FFFFFF;
+				}
+
+				span {
+				margin-left: 15px;
+				font-weight: 800;
+				font-size: 60px;
+				line-height: 76px;
+				color: #FFFFFF;
+				}
+			}
+
+			.people {
+				font-weight: 800;
+				font-size: 13px;
+				line-height: 16px;
+				letter-spacing: 0.05em;
+				text-align: center;
+				color: #FFFFFF;
+			}
+    	}
+
+		.title {
+			position: absolute;
+			top: 15px;
+			left: 15px;
+			z-index: 3;
+			display: flex;
+			align-items: center;
+
+			img {
+				width: 24px;
+				height: 24px;
+				border: 2px solid #FFF;
+				border-radius: 50%;
+			}
+
+			span {
+				margin-left: 10px;
+				font-weight: 600;
+				font-size: 16px;
+				letter-spacing: 0.3px;
+				color: #fff;
+			}
+		}
+
+		img {
+			width: 100%;
+		}
+
+		.up {
+			position: absolute;
+			top: 0;
+			z-index: 1;
+		}
+
+		.down {
+			position: absolute;
+			top: 253px;
+		}
+
+		.open {
+			width: 335px;
+			height: 50px;
+			cursor: pointer;
+			position: absolute;
+			bottom: 28px;
+			left: 50%;
+			margin-left: -167.5px;
+			z-index: 4;
+		}
+
+		.open-gif {
+			width: 200px;
+			height: 200px;
+			text-align: center;
+			position: absolute;
+			bottom: 70px;
+			left: 50%;
+			margin-left: -100px;
+			z-index: 3;
+		}
+	}
 
 	.redPacket {
 		display: flex;