merge 1.1.3

components/CustomCardCover.vue

@@ -0,0 +1,346 @@
+<!-- 自定义卡片红包封面 -->
+<!-- todo：目前只有自定义奖品类型，货币类型待添加 -->
+<template>
+    <!-- 改版之后的卡片 -->
+    <div class="not-open-custom-card custom-card">
+        <div class="common-top">
+          <img class="cover" v-if="isLottaryCpd" :src="require('../static/svg/img-custom-lottary-bg.svg')"  />
+          <img class="cover" v-else :src="require('../static/svg/img-custom-common-bg.svg')"  />
+          <img class="gift" :src="require('../static/svg/icon-gift.gif')" />
+          <div class="prize">
+              <font-zoom width="340">
+                <img class="icon" :src="require('../static/svg/icon-gift-inline.svg')"/>
+                <span class="name" id="custom-name" >
+                  {{customizedReward}}
+                  <span class="total">X{{totalCount}}</span>
+                </span>
+              </font-zoom>
+          </div>
+        </div>
+        <!-- 底部公共模块 -->
+        <div class="common-bottom" v-if="showBottomInfo">
+            <div class="theme">
+                <img v-if="isLottaryCpd" class="theme-icon" :src="require('../static/svg/icon-last-time.svg')"/>
+                <span v-if="isLottaryCpd" class="theme-time" >{{validity}}</span>
+                <span class="theme-info">{{isLottaryCpd ? 'Left' : 'Instant Giveaway'}}</span>
+            </div>
+            <div class="winner-info">
+                <font-zoom width="340">
+                  <span class="count">{{totalCount}}Winners</span>
+                  <span>to Share </span>
+                  <span class="prize-name">{{isMoneyRewardCpd ? amountValue + ' ' + tokenSymbol : customizedReward}}</span>
+                </font-zoom>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { formatSecondsAsDaysOrTime } from "../utils/help";
+import FontZoom  from './FontZoom.vue';
+import { RewardType, PlayType } from "../types";
+export default {
+  name:'CustomCardCover',
+  props: {
+    totalCount: 0,
+    amountValue: 0,
+    tokenSymbol: "",
+    playType: 1,
+    validityDuration: '',
+    userInfo: {},
+    rewardType: 1,
+    customizedReward: "",
+    validity: "",
+    showBottomInfo: true
+  },
+  data() {
+      return {
+          amount_font_size: 22,
+      }
+  },
+  computed: {
+    isMoneyRewardCpd() {
+      return this.rewardType === RewardType.money
+    },
+    isLottaryCpd() {
+      return this.playType === PlayType.lottery
+    }
+  },
+  mounted() {
+      this.setFontSize()
+  },
+  methods: {
+      setFontSize() {
+          let lendom = document.querySelector('#custom-name');
+          if (lendom) {
+              let lenstr = lendom.innerText.length;
+              let num = parseInt(450 / lenstr);
+              this.amount_font_size = num < 22 ? num : 22;
+          }
+      }
+  },
+  components: { FontZoom }
+}
+</script>
+
+<style scoped lang="scss">
+.not-open-custom-card {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    border-radius: 16px;
+    filter: drop-shadow(0px 2px 20px rgba(0, 0, 0, 0.1));
+
+    .common-top {
+      position: relative;
+    }
+
+    .money-area {
+        width: 100%;
+        position: absolute;
+        top: 65px;
+
+        .txt {
+            font-weight: 800;
+            font-size: 16px;
+            text-align: center;
+            letter-spacing: 0.3px;
+            color: #ffffff;
+        }
+
+        .coin {
+            text-align: center;
+            width: 100%;
+            padding: 6px 0;
+            margin: 0 auto;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            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;
+            color: #ffffff;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .time-area {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+            height: 46px;
+            background: rgba(0,0,0,.15);
+            color: #FFCC4D;
+            font-weight: 900;
+            font-size: 26px;
+            margin-top: -10px;
+            .icon-clock {
+                width: 26px;
+                height: 26px;
+                margin-right: 10px;
+            }
+        }
+    }
+
+    .title {
+        position: absolute;
+        top: 15px;
+        left: 15px;
+        z-index: 3;
+        width: 100%;
+        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;
+        }
+    }
+
+    // .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%;
+    }
+
+    .cover {
+        border-radius: 16px;
+    }
+
+    .up {
+        position: absolute;
+        top: 0;
+        // box-shadow: 0px 4px 44px rgba(0, 0, 0, 0.1);
+        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: 2;
+    }
+
+    .open-gif {
+        width: 200px;
+        height: 200px;
+        text-align: center;
+        position: absolute;
+        bottom: 90px;
+        left: 50%;
+        margin-left: -100px;
+        z-index: 3;
+    }
+}
+.custom-card {
+    position: relative;
+    background:#111214;
+    width: 100%;
+    position: relative;
+    border-radius: 10px;
+    filter: drop-shadow(0px 2px 20px rgba(0, 0, 0, 0.1));
+    .cover {
+        width: 100%;
+        border-radius: 10px 10px 0 0;
+    }
+    .gift {
+        width: 210px;
+        position: absolute;
+        left: 50%;
+        top: 83px;
+        transform: translateX(-50%);
+    }
+    .prize {
+        width: 100%;
+        position: absolute;
+        top: 76%;
+        left: 0;
+        height: 47px;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        font-style: normal;
+        font-weight: 800;
+        font-size: 22px;
+        line-height: 47px;
+        letter-spacing: 0.3px;
+
+        .icon {
+            width: 24px;
+        }
+        .name {
+            padding: 0 7px;
+            color: #fff;
+        }
+        .total {
+            color: #F5C03F;
+        }
+    }
+    .common-bottom {
+        width: 100%;
+        height: 62px;
+        background:#111214;
+        border-radius: 0 0 10px 10px;
+        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-btn {
+            width: 100%;
+            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;
+        }
+    }
+}
+</style>

components/FontZoom.vue

@@ -0,0 +1,45 @@
+<!-- 组件确定最大宽度时 可等比缩放组件 -->
+<template>
+  <span class="zoom-wrap" ref="zoomDom" :style="{ zoom: zoom }">
+    <slot></slot>
+  </span>
+</template>
+
+<script>
+export default {
+    props: {
+        width: {
+            type: String,
+            default: '375'
+        }
+    },
+    data() {
+        return {
+            zoom: 1,
+        }
+    },
+    mounted() {
+        this.setFontZoom()
+    },
+    methods: {
+      setFontZoom() {
+        this.$nextTick(() => {
+          let offsetWidth = this.$refs.zoomDom.offsetWidth;
+          console.log(this.$refs)
+          console.log('refs', this.$refs.zoomDom.offsetWidth)
+          this.zoom = offsetWidth > this.width ? +this.width / offsetWidth : 1
+        })
+      }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.zoom-wrap {
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+}
+</style>

pages/index.vue

@@ -1,20 +1,23 @@
+<!-- 普通玩法落地页 -->
 <template>
 	<div style="width: 100%; height: 100%;">
-		<div class="content" :style="{ 'background': `#F5FAFF` }" v-show="show_home" v-if="detail">
+		<div class="content" :style="{ 'background': `#fff` }" v-show="show_home" v-if="detail">
 			<div class="logo">
 				<img src="/img/icon-logo.png" alt />
 			</div>
 			<!-- 未开始 -->
-			<div class="not-open" v-show="status == 'not-open'">
+			<div class="redBag" v-show="status == 'not-open'">
 				<img src="/subject/001.gif">
 			</div>
-
+      <div class="head-in-custom" v-if="!isMoneyPrize">
+          <img :src="detail.postBizData.postUserInfo.avatarUrl" />
+          <span>{{ detail.postBizData.postUserInfo.nickName }}</span>
+      </div>
 			<!-- 红包打开 -->
-			<div class="redPacket" 
+			<div class="redPacket"
 				:class="{ redPacket2: status != 'open', key_packet: status == 'open' }"
 				v-if="status != 'nothing'"
 				v-show="status != 'not-open'">
-
 				<!-- 内容 -->
 				<div class="head">
 					<div class="head-title">
@@ -55,7 +58,7 @@
 				<div class="luck-list-title">
 					<div>{{ detail.postBizData.receiveCount || 0 }}/{{ detail.postBizData.totalCount || 0 }} Winners
 					</div>
-					<div> {{ detail.postBizData.receiveAmountValue }} / {{
+					<div v-if="isMoneyPrize"> {{ detail.postBizData.receiveAmountValue }} / {{
 							detail.postBizData.amountValue || ''
 					}} {{ detail.postBizData.currencySymbol || '' }}</div>
 				</div>
@@ -67,11 +70,12 @@
 							<div class="luck-title">{{ item.simpleUserInfoVO.nickName || 'Twitter User' }}</div>
 							<div class="luck-time">{{ formatTime(item.receiveTimestamp, 'MM-DD HH:mm') }}</div>
 						</div>
-						<div class="luck-money">
+						<div class="luck-money" v-if="isMoneyPrize">
 							<img :src="item.currencyIconPath" alt />
 							<div class="luck-money-txt">{{ item.amountValue || 0 }}</div>
 						</div>
-						<div class="luck-king" v-if="item.maxAmount">
+            <div class="luck-custom-prize" v-else>winner</div>
+						<div class="luck-king" v-if="isMoneyPrize && item.maxAmount">
 							<img src="/svg/icon-king-hat.svg" alt />
 							<span>Luckiest Draw</span>
 						</div>
@@ -92,21 +96,42 @@
 						</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 class="redBag" :class="{'auto-height': !isMoneyPrize}" v-else>
+					<!-- 货币类型 -->
+          <template v-if="isMoneyPrize">
+            <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>
+          </template>
+
+          <template v-else>
+            <custom-card-cover
+              :totalCount="detail.postBizData.totalCount"
+              :amountValue="detail.postBizData.amountValue"
+              :tokenSymbol="detail.postBizData.tokenSymbol"
+              :currencyIconUrl="detail.postBizData.iconPath"
+              :playType="1"
+              :validity="validity"
+              :userInfo="{
+                  nickName: detail.postBizData.postUserInfo.nickName,
+                  avatarUrl: detail.postBizData.postUserInfo.avatarUrl
+              }"
+              :rewardType="detail.postBizData.rewardType"
+              :customizedReward="detail.postBizData.customizedReward"
+              :showBottomInfo="true"
+            ></custom-card-cover>
+          </template>
 				</div>
 			</template>
 
@@ -186,11 +211,12 @@
 						<div class="luck-title">{{ item.simpleUserInfoVO.nickName || 'Twitter User' }}</div>
 						<div class="luck-time">{{ formatTime(item.receiveTimestamp) }}</div>
 					</div>
-					<div class="luck-money">
+					<div class="luck-money" v-if="isMoneyPrize">
 						<img :src="item.currencyIconPath" alt />
 						<div class="luck-money-txt">{{ item.amountValue || 0 }}</div>
 					</div>
-					<div class="luck-king" v-if="item.maxAmount">
+          <div class="luck-custom-prize" v-else>winner</div>
+					<div class="luck-king" v-if="isMoneyPrize && item.maxAmount">
 						<img src="/svg/icon-king-hat.svg" alt />
 						<span>Luckiest Draw</span>
 					</div>
@@ -198,16 +224,16 @@
 			</div>
 			<div class="area-cp-link">
 				<div class="area-list">
-                    <div class="item">
-                        <div class="icon"><img :src=" require('../static/subject/01.svg') " /></div>
-                        <div class="font">Complete the tasks on tweet</div>
-                    </div>
-                    <div class="item">
-                        <div class="icon"><img :src=" require('../static/subject/02.svg') " /></div>
-                        <div class="font">Open link on PC to draw</div>
-                        <div class="pc"><img :src=" require('../static/subject/pc.svg') " /></div>
-                    </div>
-                </div>
+            <div class="item">
+                <div class="icon"><img :src=" require('../static/subject/01.svg') " /></div>
+                <div class="font">Complete the tasks on tweet</div>
+            </div>
+            <div class="item">
+                <div class="icon"><img :src=" require('../static/subject/02.svg') " /></div>
+                <div class="font">Open link on PC to draw</div>
+                <div class="pc"><img :src=" require('../static/subject/pc.svg') " /></div>
+            </div>
+          </div>
 				<div class="area-content">
 					{{ cp_link }}
 				</div>
@@ -231,7 +257,9 @@ 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'
+import FontAmount from '../components/FontAmount.vue';
+import CustomCardCover from '../components/CustomCardCover.vue'
+import { RewardType } from '../types';
 
 
 var moment = require('moment');
@@ -289,7 +317,13 @@ export default {
 				extensionsInstallUrl: ''
 			}
 		}
-	},
+  },
+  computed: {
+    // 货币类型的奖品
+    isMoneyPrize() {
+      return this.detail.postBizData.rewardType === RewardType.money;
+    }
+  },
 	components: {
 		FontAmount,
 	},
@@ -299,7 +333,7 @@ export default {
 			title: this.title,
 			appVersionCode: 3,
 			meta: [
-				// facebook 
+				// facebook
 				{
 					name: 'og:url',
 					content: this.jumpUrl + this.detail.postId
@@ -616,7 +650,7 @@ export default {
 		if (data.code == 0) {
 			if (data.data && data.data.postBizData && typeof data.data.postBizData == 'string') {
 				data.data.postBizData = JSON.parse(data.data.postBizData)
-			} 
+			}
 			if(data.data.postBizData === null) {
 				data.data.postBizData = {
 					postUserInfo: {
@@ -699,7 +733,7 @@ export default {
 			this.setCookieMid()
 			// 是否被领完
 			if(this.detail.postBizData.receiveCount < this.detail.postBizData.totalCount){
-				this.getRedPacket()	
+				this.getRedPacket()
 			}else{
 				this.show_home = true
 				this.status = 'nothing'
@@ -942,6 +976,12 @@ body,
 					color: #444444;
 				}
 			}
+      .luck-custom-prize {
+          font-weight: 500;
+          font-size: 14px;
+          letter-spacing: 0.3px;
+          color: #F5B945;
+      }
 		}
 
 		.luck-item:last-child {
@@ -1018,6 +1058,28 @@ body,
 	font-style: normal;
 	font-weight: 600;
 
+  .head-in-custom {
+        position: absolute;
+        top: 9rem;
+        left: 30rem;
+        background: #fff;
+        display: flex;
+        align-items: center;
+        font-weight: 500;
+        font-size: 15px;
+        color: #000;
+        height: 54px;
+        img {
+          width: 30px;
+          height: 30px;
+          border-radius: 50%;
+          margin-right: 10px;
+        }
+
+    }
+
+
+
 	.not-open {
 		display: flex;
 		align-items: center;
@@ -1118,6 +1180,9 @@ body,
 		overflow-y: hidden;
 		box-shadow: 0 0 5px #888888;
 		background: #fff;
+    &.auto-height {
+      height: auto;
+    }
 
 		.money-area {
 			width: 100%;
@@ -1249,8 +1314,6 @@ body,
 		box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
 		background: #fff;
 
-
-
 		.top {
 			top: 0;
 			position: absolute;
@@ -1446,6 +1509,12 @@ body,
 						color: #444444;
 					}
 				}
+        .luck-custom-prize {
+          font-weight: 500;
+          font-size: 14px;
+          letter-spacing: 0.3px;
+          color: #F5B945;
+        }
 			}
 
 			.luck-item:last-child {

pages/luckdraw.vue

@@ -1,3 +1,4 @@
+<!-- 红包玩法落地页 -->
 <template>
     <div class="content">
         <template v-if="isLoading">
@@ -17,26 +18,46 @@
                             <img class="customImg" :src="detail.postBizData.customPosterInstalled" />
                         </template>
                         <template v-else>
-                            <img class="lottery" :src=" require('../static/svg/icon-luck-mark.svg') " />
-                            <div class="head">
-                                <img :src="detail.postBizData.postUserInfo.avatarUrl" />
-                                <span>{{ detail.postBizData.postUserInfo.nickName }}</span>
-                            </div>
-                            <div class="price">
-                                <div class="usdt">{{ detail.postBizData.currencySymbol }} GIVEAWAY</div>
-                                <div class="money">
-                                    <img :src="detail.postBizData.currencyIconPath" />
-                                    <font-amount :fontSize="60" :amount="detail.postBizData.amountValue"></font-amount>
-                                </div>
-                            </div>
-                            <div class="time">
-                                <img class="img" :src=" require('../static/svg/icon-time.svg') " />
-                                {{ validity || '00:00:00' }}
-                            </div>
-                            <div class="box">
-                                <img src="../static/subject/icon-box.png" />
-                            </div>
-                        </template>
+                          <template v-if="isMoneyPrize">
+                              <img class="lottery" :src=" require('../static/svg/icon-luck-mark.svg') " />
+                              <div class="head">
+                                  <img :src="detail.postBizData.postUserInfo.avatarUrl" />
+                                  <span>{{ detail.postBizData.postUserInfo.nickName }}</span>
+                              </div>
+                              <div class="price">
+                                  <div class="usdt">{{ detail.postBizData.currencySymbol }} GIVEAWAY</div>
+                                  <div class="money">
+                                      <img :src="detail.postBizData.currencyIconPath" />
+                                      <font-amount :fontSize="60" :amount="detail.postBizData.amountValue"></font-amount>
+                                  </div>
+                              </div>
+                              <div class="time">
+                                  <img class="img" :src=" require('../static/svg/icon-time.svg') " />
+                                  {{ validity || '00:00:00' }}
+                              </div>
+                              <div class="box">
+                                  <img src="../static/subject/icon-box.png" />
+                              </div>
+                          </template>
+
+                          <template v-else>
+                            <custom-card-cover
+                                :totalCount="detail.postBizData.totalCount"
+                                :amountValue="detail.postBizData.amountValue"
+                                :tokenSymbol="detail.postBizData.tokenSymbol"
+                                :currencyIconUrl="detail.postBizData.iconPath"
+                                :playType="2"
+                                :validity="validity"
+                                :userInfo="{
+                                    nickName: detail.postBizData.postUserInfo.nickName,
+                                    avatarUrl: detail.postBizData.postUserInfo.avatarUrl
+                                }"
+                                :rewardType="detail.postBizData.rewardType"
+                                :customizedReward="detail.postBizData.customizedReward"
+                                :showBottomInfo="false"
+                            ></custom-card-cover>
+                          </template>
+                      </template>
                     </template>
                     <template v-else>
                         <div class="succTop">
@@ -50,7 +71,7 @@
                                 <p class="expire">This Giveaways<br/>expired on {{ formatTime(detail.postBizData.endTimestamp, 'MM-DD') }}</p>
                             </template>
                             <template v-else>
-                                <p class="win">🎉 Awesome! You are Winner!</p>
+                                <p class="win">🎉 Awesome! You Will Get</p>
                                 <div class="win-money">
                                     <img :src="detail.postBizData.currencyIconPath" />
                                     <font-amount :fontSize="46" :amount="receiveAmount"></font-amount>
@@ -59,7 +80,7 @@
                         </div>
                         <div class="succTitle">
                             <span>{{ detail.postBizData.receiveCount || 0 }}/{{ detail.postBizData.totalCount || 0 }} Winners</span>
-                            <span>{{ detail.postBizData.receiveAmountValue }} / {{ detail.postBizData.amountValue || '' }} {{ detail.postBizData.currencySymbol || '' }}</span>
+                            <span  v-if="isMoneyPrize">{{ detail.postBizData.receiveAmountValue }} / {{ detail.postBizData.amountValue || '' }} {{ detail.postBizData.currencySymbol || '' }}</span>
                         </div>
                         <div class="luck-list" @scroll="handleScroll($event)">
                             <div class="luck-item" v-for="item, i in luck_list" v-bind:key="i">
@@ -72,11 +93,12 @@
                                     <div class="luck-title">{{ item.simpleUserInfoVO.nickName || 'Twitter User' }}</div>
                                     <div class="luck-time">{{ formatTime(item.receiveTimestamp, 'MM-DD HH:mm') }}</div>
                                 </div>
-                                <div class="luck-money">
+                                <div class="luck-money" v-if="isMoneyPrize">
                                     <img :src="item.currencyIconPath" alt />
                                     <div class="luck-money-txt">{{ item.amountValue || 0 }}</div>
                                 </div>
-                                <div class="luck-king" v-if="item.maxAmount">
+                                <div class="luck-custom-prize" v-else>winner</div>
+                                <div class="luck-king" v-if="isMoneyPrize && item.maxAmount">
                                     <img src="/svg/icon-king-hat.svg" alt />
                                     <span>Luckiest Draw</span>
                                 </div>
@@ -109,35 +131,42 @@
                         </div>
                     </div>
                 </div>
-                <!-- 手机端 -->
             </template>
+            <!-- PC端 -->
             <template v-else>
                 <div class="logo">
                     <img src="/img/icon-logo.png" />
                 </div>
                 <div class="show">
                     <div class="center">
+                      <div class="head-in-custom" v-if="!isMoneyPrize">
+                          <img :src="detail.postBizData.postUserInfo.avatarUrl" />
+                          <span>{{ detail.postBizData.postUserInfo.nickName }}</span>
+                      </div>
                         <div class="giveaway" :class="{
                             bg: status === 'not-open',
                             custom: detail.postBizData.posterType === 2 && detail.postBizData.customPosterInstalled,
+                            'auto-height': !isMoneyPrize
                         }">
-                            <template v-if="status === 'not-open'">
+                            <div v-if="status === 'not-open'">
                                 <template v-if="detail.postBizData.posterType === 2 && detail.postBizData.customPosterInstalled">
-                                    <img class="customImg" :src="detail.postBizData.customPosterInstalled" />
-                                    <div class="customBottom">
-                                        <div class="theme">
-                                            <img class="icon" :src="require('../static/svg/icon-last-time.svg')"/>
-                                            <span class="time2">{{ validity || '00:00:00' }}</span>
-                                            <span class="info">Left</span>
-                                        </div>
-                                        <div class="winner-info">
-                                            <span class="count">{{detail.postBizData.totalCount}} Winners</span>
-                                            <span>to Share </span>
-                                            <span class="prize-name">{{detail.postBizData.amountValue + ' ' + detail.postBizData.currencySymbol}}</span>
-                                        </div>
+                                  <img class="customImg" :src="detail.postBizData.customPosterInstalled" />
+                                  <div class="customBottom">
+                                    <div class="theme">
+                                      <img class="icon" :src="require('../static/svg/icon-last-time.svg')"/>
+                                      <span class="time2">{{ validity || '00:00:00' }}</span>
+                                      <span class="info">Left</span>
+                                    </div>
+                                    <div class="winner-info">
+                                      <span class="count">{{detail.postBizData.totalCount}} Winners</span>
+                                      <span>to Share </span>
+                                      <span class="prize-name">{{detail.postBizData.amountValue + ' ' + detail.postBizData.currencySymbol}}</span>
                                     </div>
+                                  </div>
                                 </template>
                                 <template v-else>
+                                  <!-- 旧版 样式，后续更新时在 custom-card-cover 公共组件内维护-->
+                                  <template v-if="isMoneyPrize">
                                     <img class="lottery" :src=" require('../static/svg/icon-luck-mark.svg') " />
                                     <div class="head">
                                         <img :src="detail.postBizData.postUserInfo.avatarUrl" />
@@ -157,8 +186,27 @@
                                     <div class="box">
                                         <img src="../static/subject/icon-box.png" />
                                     </div>
+                                  </template>
+
+                                  <template v-else>
+                                    <custom-card-cover
+                                        :totalCount="detail.postBizData.totalCount"
+                                        :amountValue="detail.postBizData.amountValue"
+                                        :tokenSymbol="detail.postBizData.tokenSymbol"
+                                        :currencyIconUrl="detail.postBizData.iconPath"
+                                        :playType="2"
+                                        :validity="validity"
+                                        :userInfo="{
+                                            nickName: detail.postBizData.postUserInfo.nickName,
+                                            avatarUrl: detail.postBizData.postUserInfo.avatarUrl
+                                        }"
+                                        :rewardType="detail.postBizData.rewardType"
+                                        :customizedReward="detail.postBizData.customizedReward"
+                                        :showBottomInfo="true"
+                                    ></custom-card-cover>
+                                  </template>
                                 </template>
-                            </template>
+                            </div>
                             <template v-else>
                                 <div class="succTop">
                                     <template v-if="status === 'opened'">
@@ -180,7 +228,7 @@
                                 </div>
                                 <div class="succTitle">
                                     <span>{{ detail.postBizData.receiveCount || 0 }}/{{ detail.postBizData.totalCount || 0 }} Winners</span>
-                                    <span>{{ detail.postBizData.receiveAmountValue }} / {{ detail.postBizData.amountValue || '' }} {{ detail.postBizData.currencySymbol || '' }}</span>
+                                    <span v-if="isMoneyPrize">{{ detail.postBizData.receiveAmountValue }} / {{ detail.postBizData.amountValue || '' }} {{ detail.postBizData.currencySymbol || '' }}</span>
                                 </div>
                                 <div class="luck-list" @scroll="handleScroll($event)">
                                     <div class="luck-item" v-for="item, i in luck_list" v-bind:key="i">
@@ -193,11 +241,12 @@
                                             <div class="luck-title">{{ item.simpleUserInfoVO.nickName || 'Twitter User' }}</div>
                                             <div class="luck-time">{{ formatTime(item.receiveTimestamp, 'MM-DD HH:mm') }}</div>
                                         </div>
-                                        <div class="luck-money">
+                                        <div class="luck-money" v-if="isMoneyPrize">
                                             <img :src="item.currencyIconPath" alt />
                                             <div class="luck-money-txt">{{ item.amountValue || 0 }}</div>
                                         </div>
-                                        <div class="luck-king" v-if="item.maxAmount">
+                                        <div class="luck-custom-prize" v-else>winner</div>
+                                        <div class="luck-king" v-if="isMoneyPrize && item.maxAmount">
                                             <img src="/svg/icon-king-hat.svg" alt />
                                             <span>Luckiest Draw</span>
                                         </div>
@@ -235,6 +284,8 @@ import Cookies from 'js-cookie'
 import { Toast } from 'vant';
 import { isBrowser, appType, appVersionCode, formatSecondsAsDaysOrTime } from '../utils/help.js'
 import FontAmount from '../components/FontAmount.vue'
+import CustomCardCover from '../components/CustomCardCover.vue'
+import { RewardType } from '../types';
 
 var moment = require('moment');
 var ClipboardJS = require('clipboard')
@@ -255,7 +306,7 @@ const baseURL = api[process.env.NUXT_ENV.MODE]
 export default {
     name: 'luckdraw',
     components: {
-		FontAmount,
+		FontAmount,CustomCardCover
 	},
     head() {
 		return {
@@ -263,7 +314,7 @@ export default {
 			title: this.title,
 			appVersionCode: 3,
 			meta: [
-				// facebook 
+				// facebook
 				{
 					name: 'og:url',
 					content: this.jumpUrl + 'luckdraw/' + this.detail.postId
@@ -323,7 +374,13 @@ export default {
             jumpUrl: jumpUrl,
 			metaTitle: 'DeNet: An Easy Web3 Tool For GIVEAWAY / AIRDROP',
         }
-    },
+  },
+  computed: {
+    // 货币类型的奖品
+    isMoneyPrize() {
+      return this.detail.postBizData.rewardType === RewardType.money;
+    }
+  },
     mounted() {
         this.getConfig()
         this.setCookieMid()
@@ -366,8 +423,6 @@ export default {
 					postUserInfo: {}
 				}
 			}
-            console.log('detail', data.data)
-
 			return {
 				detail: data.data,
 			}
@@ -533,7 +588,8 @@ export default {
 					postId: this.detail.postId
 				}
 			})
-			if (data.code == 0) {
+          if (data.code == 0) {
+        console.log(data.data)
 				this.detail.postBizData = JSON.parse(data.data.postBizData)
                 if (fn) fn();
 			}
@@ -578,7 +634,7 @@ body,
     overflow: hidden;
     width: 100%;
     height: 100%;
-    background: #F5FAFF;
+    background: #fff;
     .loading {
         position: absolute;
         transform: translate(-50%, -50%);
@@ -607,6 +663,26 @@ body,
             margin: -50px auto 0;
             justify-content: space-between;
             width: 1000px;
+            position: relative;
+            .head-in-custom {
+                position: absolute;
+                bottom: 100%;
+                left: 0;
+                background: #fff;
+                display: flex;
+                align-items: center;
+                font-weight: 500;
+                font-size: 15px;
+                color: #000;
+                height: 54px;
+                img {
+                  width: 30px;
+                  height: 30px;
+                  border-radius: 50%;
+                  margin-right: 10px;
+                }
+
+            }
             .giveaway {
                 position: relative;
                 overflow: hidden;
@@ -615,6 +691,7 @@ body,
                 border-radius: 20px;
                 background-color: #fff;
                 box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);
+
                 &.bg {
                     background: linear-gradient(17.98deg, #3438FF 3.69%, #8B56FC 74.32%);
                 }
@@ -622,6 +699,12 @@ body,
                     background: unset;
                     height: auto!important;
                 }
+                &.auto-height {
+                  height: auto;
+                }
+
+
+
                 .lottery {
                     position: absolute;
                     top: 0;
@@ -1020,6 +1103,12 @@ body,
                 color: #444444;
             }
         }
+        .luck-custom-prize {
+          font-weight: 500;
+          font-size: 14px;
+          letter-spacing: 0.3px;
+          color: #F5B945;
+      }
     }
     .luck-item:last-child {
         border: 0;

static/svg/icon-gift-inline.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.93203 20.381C2.93203 20.7925 3.25974 21.125 3.66536 21.125H10.2195V12.3835H2.93203V20.381ZM11.7779 21.125H18.332C18.7377 21.125 19.0654 20.7925 19.0654 20.381V12.3835H11.7779V21.125ZM19.432 6.80374H16.0495C16.3612 6.30622 16.5445 5.7157 16.5445 5.08333C16.5445 3.3141 15.126 1.875 13.382 1.875C12.4333 1.875 11.5785 2.30278 10.9987 2.97699C10.4189 2.30278 9.56411 1.875 8.61536 1.875C6.87141 1.875 5.45286 3.3141 5.45286 5.08333C5.45286 5.7157 5.63391 6.30622 5.94786 6.80374H2.56536C2.15974 6.80374 1.83203 7.1362 1.83203 7.54771V10.8025H10.2195V6.80374H11.7779V10.8025H20.1654V7.54771C20.1654 7.1362 19.8377 6.80374 19.432 6.80374ZM10.2195 6.71075H8.61536C7.73078 6.71075 7.0112 5.98074 7.0112 5.08333C7.0112 4.18593 7.73078 3.45592 8.61536 3.45592C9.49995 3.45592 10.2195 4.18593 10.2195 5.08333V6.71075ZM13.382 6.71075H11.7779V5.08333C11.7779 4.18593 12.4974 3.45592 13.382 3.45592C14.2666 3.45592 14.9862 4.18593 14.9862 5.08333C14.9862 5.98074 14.2666 6.71075 13.382 6.71075Z" fill="#F5C03F"/>
+</svg>

types/global.js

@@ -0,0 +1,23 @@
+/**
+ * 全局通用字段定义
+ */
+
+/**
+ * 玩法类型
+ * 普通任务：common=1;
+ * 抽奖：lottery=2
+ */
+export const PlayType = {
+  common: 1,
+  lottery: 2,
+};
+
+/**
+ * 奖品类型
+ * 货币:money=1;
+ * 自定义奖品:custom=2
+ */
+export const RewardType = {
+  money: 1,
+  custom: 2,
+};

types/index.js

@@ -0,0 +1 @@
+export * from "@/types/global";

yarn.lock

@@ -913,6 +913,13 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
+"@babel/runtime@7.x":
+  version "7.18.6"
+  resolved "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.18.6.tgz#6a1ef59f838debd670421f8c7f2cbb8da9751580"
+  integrity sha512-t9wi7/AW6XtKahAe20Yw0/mMljKq0B1r2fPdvaAdV/KPDZewFXdaaa6K7lxmZBZ8FBNpCiAT6iHPmd6QO9bKfQ==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.14.0", "@babel/runtime@^7.8.4":
   version "7.17.8"
   resolved "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.17.8.tgz#3e56e4aff81befa55ac3ac6a0967349fd1c5bca2"
@@ -1622,6 +1629,11 @@
   resolved "https://registry.npmmirror.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
   integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
 
+"@popperjs/core@^2.9.2":
+  version "2.11.5"
+  resolved "https://registry.npmmirror.com/@popperjs/core/-/core-2.11.5.tgz#db5a11bf66bdab39569719555b0f76e138d7bd64"
+  integrity sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==
+
 "@sinonjs/commons@^1.7.0":
   version "1.8.3"
   resolved "https://registry.npmmirror.com/@sinonjs/commons/-/commons-1.8.3.tgz#3802ddd21a50a949b6721ddd72da36e67e7f1b2d"
@@ -1790,7 +1802,19 @@
   dependencies:
     "@types/yargs-parser" "*"
 
-"@vue/babel-helper-vue-jsx-merge-props@^1.2.1":
+"@vant/icons@^1.7.1":
+  version "1.8.0"
+  resolved "https://registry.npmmirror.com/@vant/icons/-/icons-1.8.0.tgz#36b13f2e628b533f6523a93a168cf02f07056674"
+  integrity sha512-sKfEUo2/CkQFuERxvkuF6mGQZDKu3IQdj5rV9Fm0weJXtchDSSQ+zt8qPCNUEhh9Y8shy5PzxbvAfOOkCwlCXg==
+
+"@vant/popperjs@^1.1.0":
+  version "1.2.1"
+  resolved "https://registry.npmmirror.com/@vant/popperjs/-/popperjs-1.2.1.tgz#1300c7c98573df577c21d3000712435edb8a877e"
+  integrity sha512-qzQlrPE4aOsBzfrktDVwzQy/QICCTKifmjrruhY58+Q2fobUYp/T9QINluIafzsD3VJwgP8+HFVLBsyDmy3VZQ==
+  dependencies:
+    "@popperjs/core" "^2.9.2"
+
+"@vue/babel-helper-vue-jsx-merge-props@^1.0.0", "@vue/babel-helper-vue-jsx-merge-props@^1.2.1":
   version "1.2.1"
   resolved "https://registry.npmmirror.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.2.1.tgz#31624a7a505fb14da1d58023725a4c5f270e6a81"
   integrity sha512-QOi5OW45e2R20VygMSNhyQHvpdUwQZqGPc748JLGCYEy+yp8fNFNdbNIGAgZmi9e+2JHPd6i6idRuqivyicIkA==
@@ -3741,6 +3765,11 @@ culvert@^0.1.2:
   resolved "https://registry.yarnpkg.com/culvert/-/culvert-0.1.2.tgz#9502f5f0154a2d5a22a023e79f71cc936fa6ef6f"
   integrity sha1-lQL18BVKLVoioCPnn3HMk2+m728=
 
+current-device@^0.10.2:
+  version "0.10.2"
+  resolved "https://registry.npmmirror.com/current-device/-/current-device-0.10.2.tgz#1e40176bee7da655383ab7245b853fae7d2dfc8e"
+  integrity sha512-FN223n2Cp1fRI/gyjJEAdagHhJ/2Z2STz3tUg1t4F259BhmVRCChkmxcgFtjYJsWuIacQEs7bqJpnAczIXIkWw==
+
 cyclist@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmmirror.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
@@ -10040,6 +10069,17 @@ v8-to-istanbul@^8.1.0:
     convert-source-map "^1.6.0"
     source-map "^0.7.3"
 
+vant@^2.12.47:
+  version "2.12.48"
+  resolved "https://registry.npmmirror.com/vant/-/vant-2.12.48.tgz#856cfb36741f331fc9087d97f00e88f7d62c412c"
+  integrity sha512-cTv5V8pYboLrryMAThTu9Nrjroc6z246ktvvRbQ6v+G/yUH2tJia4S/L8RaTCH6btiuoeKZbtFAjkeQUPYeOtQ==
+  dependencies:
+    "@babel/runtime" "7.x"
+    "@vant/icons" "^1.7.1"
+    "@vant/popperjs" "^1.1.0"
+    "@vue/babel-helper-vue-jsx-merge-props" "^1.0.0"
+    vue-lazyload "1.2.3"
+
 vary@^1.1.2, vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
@@ -10105,6 +10145,11 @@ vue-jest@^3.0.4:
     tsconfig "^7.0.0"
     vue-template-es2015-compiler "^1.6.0"
 
+vue-lazyload@1.2.3:
+  version "1.2.3"
+  resolved "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.2.3.tgz#901f9ec15c7e6ca78781a2bae4a343686bdedb2c"
+  integrity sha512-DC0ZwxanbRhx79tlA3zY5OYJkH8FYp3WBAnAJbrcuoS8eye1P73rcgAZhyxFSPUluJUTelMB+i/+VkNU/qVm7g==
+
 vue-loader@^15.9.7:
   version "15.9.8"
   resolved "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.9.8.tgz#4b0f602afaf66a996be1e534fb9609dc4ab10e61"