[edit][open-red-packet]

src/assets/svg/back-down.svg

@@ -0,0 +1,3 @@
+<svg width="375" height="247" viewBox="0 0 375 247" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0C0 0 49 28 187.5 28C326 28 375 0 375 0V247H0V0Z" fill="#EF4545"/>
+</svg>

src/assets/svg/back-top.svg

@@ -0,0 +1,17 @@
+<svg width="375" height="340" viewBox="0 0 375 340" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_14214_17508)">
+<path d="M1.01863e-10 0H375V263.653C375 263.653 322 292 187.5 292C53 292 0 263.653 0 263.653L1.01863e-10 0Z" fill="#EF4545"/>
+</g>
+<defs>
+<filter id="filter0_d_14214_17508" x="-44" y="-40" width="463" height="380" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="22"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_14214_17508"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_14214_17508" result="shape"/>
+</filter>
+</defs>
+</svg>

src/view/red-packet.vue

@@ -117,9 +117,15 @@
 
     <!-- no-open -->
     <div v-else-if="data.status == 'not-open'" class="not-open">
-      <img :src="require('../assets/img/up.png')" alt class="up" />
-      <img :src="require('../assets/img/down.png')" alt class="down" />
-      <div class="open" @click="clickOpenRedPacket">OPEN</div>
+      <img :src="require('../assets/svg/back-top.svg')" alt class="up" />
+      <img :src="require('../assets/svg/back-down.svg')" alt class="down" />
+      <img class="open-gif" v-if="data.open_state" :src="require('../assets/gif/open.gif')" />
+      <div class="open" v-else @click="clickOpenRedPacket">OPEN</div>
+      <div class="title" v-if="data.detail.postUserInfo">
+        <img :src="data.detail.postUserInfo.avatarUrl" alt />
+        <span>Giveaways from: {{ data.detail.postUserInfo.nickName }}</span>
+      </div>
+      <div class="txt">Good Luck!</div>
     </div>
 
 
@@ -330,8 +336,17 @@ function getValidity() {
       _d1 = moment(data.detail.myReceived.taskEndTimestamp)
       _d2 = moment(_time)
       _h = moment.duration(_d1.diff(_d2)).hours()
+      if (_h < 10) {
+        _h = '0' + _h
+      }
       _m = moment.duration(_d1.diff(_d2)).minutes()
+      if (_m < 10) {
+        _m = '0' + _m
+      }
       _s = moment.duration(_d1.diff(_d2)).seconds()
+      if (_s < 10) {
+        _s = '0' + _s
+      }
       data.detail.validity = `${_h}:${_m}:${_s}`
     } else {
       clearInterval(timer)
@@ -391,7 +406,7 @@ function myReceivedState() {
       data.close_title = 'Better luck next time!'
     }
 
-  // 我领取未完成 
+    // 我领取未完成 
   } else if (data.detail.myReceived.taskFinishStatus == 0 && data.detail.status == 1) {
     initTaskDetail()
     getValidity()
@@ -399,14 +414,14 @@ function myReceivedState() {
     data.detail.amountValue = showLastTwoPlace(data.detail.amountValue)
     data.detail.receiveAmountValue = showLastTwoPlace(data.detail.receiveAmountValue)
 
-  // 大红包不能领取了 and  我的红包过期了
+    // 大红包不能领取了 and  我的红包过期了
   } else if (data.detail.receiveTimeExpired && data.detail.myReceived.taskFinishStatus == 2) {
     data.status = 'close'
     data.close_title = `This Giveaways`
     data.close_text = `expired on ${moment(data.detail.endTimestamp).format('MM-DD')}`
 
-  // 我领取成功了
-  }else if (data.detail.myReceived.taskFinishStatus == 1) {
+    // 我领取成功了
+  } else if (data.detail.myReceived.taskFinishStatus == 1) {
     data.status = 'success'
   }
 }
@@ -416,6 +431,7 @@ function showLastTwoPlace(n) {
 }
 
 function init() {
+  data.status = 'not-open'
   getPostDetail({
     params: {
       postId: data.postId
@@ -507,6 +523,7 @@ onMounted(() => {
 
 // 点击领取
 function clickOpenRedPacket() {
+  data.open_state = true
   handleRedPacket()
 }
 
@@ -518,14 +535,18 @@ function handleRedPacket() {
   }).then((res) => {
     switch (res.code.toString()) {
       case "0":
+        data.open_state = false
         data.status = 'opened'
         data.money = res.data.receiveAmount
         init()
         break
       case "2008":
+        data.open_state = false
         data.status = 'close'
         data.close_title = 'Better luck next time!'
         break
+      default:
+        data.open_state = false
     }
   })
 }
@@ -1172,6 +1193,46 @@ body {
     filter: drop-shadow(0px 4px 94px rgba(0, 0, 0, 0.3));
     position: relative;
 
+    .title {
+      position: absolute;
+      top: 46px;
+      z-index: 3;
+      width: 100%;
+      display: flex;
+      align-items: center;
+
+      justify-content: center;
+
+      img {
+        width: 24px;
+        height: 24px;
+        border: 2px solid #FFF4DB;
+        border-radius: 50%;
+      }
+
+      span {
+        margin-left: 11px;
+        font-weight: 600;
+        font-size: 16px;
+        letter-spacing: 0.3px;
+        color: #FFF2D3;
+      }
+    }
+
+    .txt {
+      width: 100%;
+      position: absolute;
+      font-style: normal;
+      font-weight: 700;
+      font-size: 42px;
+      line-height: 50px;
+      text-align: center;
+
+      color: #FFF2D3;
+      top: 90px;
+      z-index: 3;
+    }
+
     img {
       width: 100%;
     }
@@ -1179,7 +1240,7 @@ body {
     .up {
       position: absolute;
       top: 0;
-      box-shadow: 0px 4px 44px rgba(0, 0, 0, 0.1);
+      // box-shadow: 0px 4px 44px rgba(0, 0, 0, 0.1);
       z-index: 1;
     }
 
@@ -1205,6 +1266,17 @@ body {
       margin-left: -55px;
       z-index: 2;
     }
+
+    .open-gif {
+      width: 110px;
+      height: 110px;
+      text-align: center;
+      position: absolute;
+      top: 235px;
+      left: 50%;
+      margin-left: -55px;
+      z-index: 3;
+    }
   }
 }
 </style>