jihuaqiang 2 years ago
parent
commit
7c304d9247

+ 3 - 0
src/assets/svg/icon-wallet-success.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.9981 4.5H22.0044C23.6547 4.5 25 5.84533 25 7.4981V10.238H17.3117C15.4179 10.238 13.8684 11.7874 13.8684 13.6812V14.5617C13.8684 16.4555 15.4179 18.005 17.3117 18.005H25V20.7448C25 22.4 23.6547 23.7429 22.0019 23.7429H5.9981C4.34287 23.7429 3 22.3976 3 20.7448V7.4981C3 5.84287 4.34533 4.5 5.9981 4.5ZM15.0938 13.6823C15.0938 13.0945 15.3249 12.5411 15.7455 12.1205C16.1636 11.6999 16.7195 11.4688 17.3073 11.4688H24.9956V16.7763H17.3073C16.7195 16.7763 16.1661 16.5451 15.7455 16.1245C15.3249 15.704 15.0938 15.1506 15.0938 14.5628V13.6823ZM19.1962 14.1225C19.1962 13.579 18.7559 13.1387 18.2124 13.1387C17.6688 13.1387 17.2286 13.579 17.2286 14.1225C17.2286 14.6661 17.6688 15.1063 18.2124 15.1063C18.7559 15.1063 19.1962 14.6661 19.1962 14.1225Z" fill="#1D9BF0"/>
+</svg>

+ 49 - 0
src/view/iframe/publish/components/get-more.vue

@@ -1,4 +1,14 @@
 <template>
+    <div class="get-more-btns"  v-if="props.style_type == 3">
+        <div class="get-more-btn" @click="jumpMore">
+            <img width="22" :src="require('@/assets/svg/icon-wallet-success.svg')" />
+            <font>View wallet</font>
+        </div>
+        <div class="get-more-btn" @click="jumpMore">
+            <img width="22" :src="require('@/assets/svg/icon-big-give.svg')" />
+            <font>Get More Giveaway</font>
+        </div>
+    </div>
     <div class="getMore" @click="jumpMore" v-if="props.style_type == 1">
         <img width="20" :src="require('@/assets/svg/icon-big-give.svg')" />
         <font>Get More Giveaway</font>
@@ -78,4 +88,43 @@ const jumpMore = () => {
         margin-right: 8px;
     }
 }
+.get-more-btns  {
+    display: flex;
+    cursor: pointer;
+    user-select: none;
+    align-items: center;
+    justify-content: center;
+    padding: 13px 0;
+    box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.06);
+    position: relative;
+    .get-more-btn {
+        flex: 1;
+        display: flex;
+        cursor: pointer;
+        user-select: none;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 44px;
+        font {
+            font-weight: 600;
+            font-size: 14px;
+            line-height: 17px;
+            text-align: center;
+            letter-spacing: 0.3px;
+            color: #000000;
+        }
+    }
+    &::after {
+        content: "";
+        width: 1px;
+        height: 88px;
+        position: absolute;
+        left: 50%;
+        top: 13px;
+        background-color: rgba(0,0,0,.2);
+        transform: scale(0.5);
+        transform-origin: 0 0;
+    }
+}
 </style>

+ 1 - 8
src/view/iframe/red-packet/luck-draw.vue

@@ -151,19 +151,12 @@
                     🎉 Awesome! You are the Winner!
                 </div>
                 <div class="custom-prize-show">
-                    
-
                     <component-zoom width="340" fontSize="22" class="custom-prise-name">
                         <img :src="require('@/assets/subject/icon-gift-inline.svg')" alt />
                         <span>{{state.detail.customizedReward}}</span>
                     </component-zoom>
                     <!-- <font-zoom :amount="state.detail.customizedReward" width="500" class="custom-prise-name" fontSize="22"></font-zoom> -->
                 </div>
-                <div class="done" @click="clickDone">
-                    <img :src="require('@/assets/subject/001-icon-done.svg')" alt class="icon-done" />
-                    <span>View Rewards In Wallet</span>
-                    <img :src="require('@/assets/svg/icon-right.svg')" alt class="icon-right" />
-                </div>
             </div>
             <div class="luck-list-title">
                 <div>{{ state.detail.receiveCount || 0 }}/{{ state.detail.totalCount || 0 }} Winners</div>
@@ -209,7 +202,7 @@
                     </div>
                 </div>
             </div>
-            <get-more></get-more>
+            <get-more :style_type="state.detail.rewardType === RewardType.money ? 1 : 3"></get-more>
         </div>
 
 

+ 1 - 6
src/view/iframe/red-packet/red-packet.vue

@@ -166,11 +166,6 @@
             <img :src="require('@/assets/subject/icon-gift-inline.svg')" alt />
             <font-zoom :amount="state.detail.customizedReward" width="500" class="custom-prise-name" fontSize="22"></font-zoom>
         </div>
-        <div class="done" @click="clickDone">
-          <img :src="require('@/assets/subject/001-icon-done.svg')" alt class="icon-done" />
-          <span>View Rewards In Wallet</span>
-          <img :src="require('@/assets/svg/icon-right.svg')" alt class="icon-right" />
-        </div>
       </div>
       <div class="luck-list-title">
         <div>{{ state.detail.receiveCount || 0 }}/{{ state.detail.totalCount || 0 }} Winners</div>
@@ -212,7 +207,7 @@
           </div>
         </div>
       </div>
-      <get-more></get-more>
+      <get-more :style_type="state.detail.rewardType === RewardType.money ? 1 : 3"></get-more>
     </div>
 
 

+ 31 - 4
src/view/popup/tabbar-page/message/index.vue

@@ -43,8 +43,10 @@
                         '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">
                         <!-- 进行中-->
@@ -95,7 +97,11 @@
                         </template>
                         <!-- 已中奖-通用型奖品展示 -->
                         <template v-else>
-                          <span class="blance cuntom-prize">{{item.customizedReward}}</span>
+                          <span class="blance cuntom-prize">
+                            {{item.customizedReward || ''}}
+                          </span>
+                          <span  class="cuntom-prize-icon"> X </span>
+                          <span class="cuntom-prize-total">{{item?.postTaskLuckdrop?.totalCount || ''}}</span>
                         </template>
                       </template>
                       <template v-else-if="item.type == 3">
@@ -154,6 +160,7 @@
                       </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"
@@ -164,8 +171,10 @@
                             }}
                           </template>
                         </template>
+                        <!-- 抽奖红包 -->
                         <template v-else>
-                          Termination
+                            <!-- 自定义奖品类型 结束时显示 Complete -->
+                            {{ item.rewardType === RewardType.custom && item.status == 2 ? 'Complete' : 'Termination' }}
                         </template>
                       </template>
                       <!-- 红包提前终止/退款(进行中)显示-->
@@ -656,6 +665,20 @@ onBeforeUnmount(() => {
                   .cuntom-prize {
                     max-width: 130px;
                     word-break: break-word;
+                    align-self: flex-start;
+                    text-align: left;
+                  }
+
+                  .cuntom-prize-icon {
+                    margin: 0  2px;
+                    align-self: flex-start;
+                  }
+
+                  .cuntom-prize-total {
+                    max-width: 100px;
+                    word-break: inherit;
+                    // word-break: break-word;
+                    align-self: flex-start;
                   }
 
                   .coin-type-wrapper {
@@ -675,6 +698,10 @@ onBeforeUnmount(() => {
                   }
                 }
 
+                .custom-bold {
+                  max-width: 170px;
+                }
+
                 .align-content {
                   flex-direction: column;
                   align-items: flex-end;