Merge branch 'feature_220704_custom_redbag' into dev_1.1.3

src/view/iframe/red-packet/luck-draw.vue

@@ -192,38 +192,46 @@
 
         <!-- no-open -->
         <div v-else-if="state.status == 'not-open'" class="not-open">
-            <img :src="require('@/assets/subject/002-card.svg')" alt="">
-            <img class="open-gif" :src="require('@/assets/gif/002.png')" />
-
-            <img :src="require('@/assets/svg/icon-participate.svg')" alt="" class="open" @click="clickOpenRedPacket">
-            <div class="title" v-if="state.detail.postUserInfo">
-                <img :src="state.detail.postUserInfo.avatarUrl" alt />
-                <span>{{ state.detail.postUserInfo.nickName || 'FutureDoctor' }}</span>
-            </div>
-            <div class="money-area">
-                <div class="txt">{{ state.detail.currencySymbol }} GIVEAWAY</div>
-                <div class="coin">
-                    <img :src="state.detail.currencyIconPath" alt />
-                    <font-amount :amount="state.detail.amountValue" style="color:#fff;"></font-amount>
+            <template v-if="state.detail.posterType === 2 && state.detail.customPosterInstalled">
+                <img class="customImg" :src="state.detail.customPosterInstalled" />
+                <div class="customBottom">
+                    <div class="theme">
+                        <img class="icon" :src="require('@/assets/svg/icon-last-time.svg')"/>
+                        <span class="time">{{ state.count_down_time }}</span>
+                        <span class="info">Left</span>
+                    </div>
+                    <div class="winner-info">
+                        <span class="count">{{state.detail.totalCount}}Winners</span>
+                        <span>to Share </span>
+                        <span class="prize-name">{{state.detail.amountValue + ' ' + state.detail.currencySymbol}}</span>
+                    </div>
+                    <div class="open-red" @click="clickOpenRedPacket">
+                        Participate Now
+                    </div>
+                </div>
+            </template>
+            <template v-else>
+                <img :src="require('@/assets/subject/002-card.svg')" alt="">
+                <img class="open-gif" :src="require('@/assets/gif/002.png')" />
+
+                <img :src="require('@/assets/svg/icon-participate.svg')" alt="" class="open" @click="clickOpenRedPacket">
+                <div class="title" v-if="state.detail.postUserInfo">
+                    <img :src="state.detail.postUserInfo.avatarUrl" alt />
+                    <span>{{ state.detail.postUserInfo.nickName || 'FutureDoctor' }}</span>
                 </div>
-                <!-- <div class="people">{{ state.detail.totalCount }} WINNERS TO SHARE</div> -->
-                <!-- <div class="mark-area">
-                    <div class="time">
+                <div class="money-area">
+                    <div class="txt">{{ state.detail.currencySymbol }} GIVEAWAY</div>
+                    <div class="coin">
+                        <img :src="state.detail.currencyIconPath" alt />
+                        <font-amount :amount="state.detail.amountValue" style="color:#fff;"></font-amount>
+                    </div>
+                    <div class="time-area">
+                        <div></div>
                         <img :src="require('@/assets/svg/icon-time.svg')" />
                         <span>{{ state.count_down_time }}</span>
                     </div>
-                    <div class="win">
-                        <img :src="require('@/assets/svg/icon-win.svg')" />
-                        <span>{{ state.detail.totalCount }} WINNERS</span>
-                    </div>
-                </div> -->
-                <div class="time-area">
-                    <div></div>
-                    <img :src="require('@/assets/svg/icon-time.svg')" />
-                    <span>{{ state.count_down_time }}</span>
                 </div>
-
-            </div>
+            </template>
         </div>
 
 
@@ -2964,6 +2972,62 @@ body {
         overflow: hidden;
         border-radius: 11px;
 
+        .customImg {
+            width: 100%;
+            min-height: 373px;
+        }
+        .customBottom {
+            width: 100%;
+            height: 125px;
+            background:#111214;
+            padding: 10px 16px;
+            font-weight: 500;
+            font-size: 12px;
+            line-height: 14px;
+            letter-spacing: 0.3px;
+            color: #838383;
+            line-height: 20px;
+            .theme {
+                display: flex;
+                height: 20px;
+                align-items: center;
+                justify-content: flex-start;
+                .icon {
+                    width: 12px;
+                }
+                .time {
+                    margin: 0 4px;
+                    color: #1D9BF0;
+                }
+            }
+            .winner-info {
+                display: flex;
+                height: 20px;
+                align-items: center;
+                justify-content: flex-start;
+                margin-bottom: 13px;
+                .count{
+                    color: #1D9BF0;
+                    margin-right: 4px;
+                }
+                .prize-name {
+                    color: #1D9BF0;
+                    margin-left: 4px;
+                }
+            }
+            .open-red {
+                height: 45px;
+                background: linear-gradient(180deg, #4AB6FF 0%, #1D9BF0 100%, #1D9BF0 100%);
+                border: 1.5px solid rgba(255, 255, 255, 0.15);
+                border-radius: 52px;
+                line-height: 45px;
+                text-align: center;
+                cursor: pointer;
+                font-weight: 800;
+                font-size: 16px;
+                color: #FFFFFF;
+            }
+        }
         .money-area {
             width: 100%;
             position: absolute;

src/view/iframe/red-packet/red-packet.vue

@@ -203,22 +203,40 @@
 
     <!-- no-open -->
     <div v-else-if="state.status == 'not-open'" class="not-open">
-      <img :src="require('@/assets/subject/001-card.png')" alt="">
-      <img class="open-gif" :src="require('@/assets/gif/001.gif')" />
-
-      <img :src="require('@/assets/svg/icon-open.svg')" alt="" class="open" @click="clickOpenRedPacket">
-      <div class="title" v-if="state.detail.postUserInfo">
-        <img :src="state.detail.postUserInfo.avatarUrl" alt />
-        <span>{{ state.detail.postUserInfo.nickName || 'FutureDoctor' }}</span>
-      </div>
-      <div class="money-area">
-        <div class="txt">{{ state.detail.currencySymbol }} GIVEAWAY</div>
-        <div class="coin">
-          <img :src="state.detail.currencyIconPath" alt />
-          <font-amount :amount="state.detail.amountValue" style="color:#fff;"></font-amount>
+      <template v-if="state.detail.posterType === 2 && state.detail.customPosterInstalled">
+        <img class="customImg" :src="state.detail.customPosterInstalled" />
+        <div class="customBottom">
+            <div class="theme">
+                <span class="info">Instant Giveaway</span>
+            </div>
+            <div class="winner-info">
+                <span class="count">{{state.detail.totalCount}}Winners</span>
+                <span>to Share </span>
+                <span class="prize-name">{{state.detail.amountValue + ' ' + state.detail.currencySymbol}}</span>
+            </div>
+            <div class="open-red" @click="clickOpenRedPacket">
+                Open Now
+            </div>
         </div>
-        <div class="people">{{ state.detail.totalCount }} WINNERS TO SHARE</div>
-      </div>
+      </template>
+      <template v-else>
+        <img :src="require('@/assets/subject/001-card.png')" alt="">
+        <img class="open-gif" :src="require('@/assets/gif/001.gif')" />
+
+        <img :src="require('@/assets/svg/icon-open.svg')" alt="" class="open" @click="clickOpenRedPacket">
+        <div class="title" v-if="state.detail.postUserInfo">
+          <img :src="state.detail.postUserInfo.avatarUrl" alt />
+          <span>{{ state.detail.postUserInfo.nickName || 'FutureDoctor' }}</span>
+        </div>
+        <div class="money-area">
+          <div class="txt">{{ state.detail.currencySymbol }} GIVEAWAY</div>
+          <div class="coin">
+            <img :src="state.detail.currencyIconPath" alt />
+            <font-amount :amount="state.detail.amountValue" style="color:#fff;"></font-amount>
+          </div>
+          <div class="people">{{ state.detail.totalCount }} WINNERS TO SHARE</div>
+        </div>
+      </template>
     </div>
 
 
@@ -2601,6 +2619,63 @@ body {
     overflow: hidden;
     border-radius: 11px;
 
+    .customImg {
+        width: 100%;
+        min-height: 373px;
+    }
+    .customBottom {
+        width: 100%;
+        height: 125px;
+        background:#111214;
+        padding: 10px 16px;
+        font-weight: 500;
+        font-size: 12px;
+        line-height: 14px;
+        letter-spacing: 0.3px;
+        color: #838383;
+        line-height: 20px;
+        .theme {
+            display: flex;
+            height: 20px;
+            align-items: center;
+            justify-content: flex-start;
+            .icon {
+                width: 12px;
+            }
+            .time {
+                margin: 0 4px;
+                color: #1D9BF0;
+            }
+        }
+        .winner-info {
+            display: flex;
+            height: 20px;
+            align-items: center;
+            justify-content: flex-start;
+            margin-bottom: 13px;
+            .count{
+                color: #1D9BF0;
+                margin-right: 4px;
+            }
+            .prize-name {
+                color: #1D9BF0;
+                margin-left: 4px;
+            }
+        }
+        .open-red {
+            height: 45px;
+            background: linear-gradient(180deg, #4AB6FF 0%, #1D9BF0 100%, #1D9BF0 100%);
+            border: 1.5px solid rgba(255, 255, 255, 0.15);
+            border-radius: 52px;
+            line-height: 45px;
+            text-align: center;
+            cursor: pointer;
+            font-weight: 800;
+            font-size: 16px;
+            color: #FFFFFF;
+        }
+    }
+
     .money-area {
       width: 100%;
       position: absolute;