[add] add custom-reward

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,32 +70,54 @@
 							<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>
 					</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>
 
 
@@ -173,11 +198,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>
@@ -185,16 +211,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>
@@ -218,7 +244,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');
@@ -276,7 +304,13 @@ export default {
 				extensionsInstallUrl: ''
 			}
 		}
-	},
+  },
+  computed: {
+    // 货币类型的奖品
+    isMoneyPrize() {
+      return this.detail.postBizData.rewardType === RewardType.money;
+    }
+  },
 	components: {
 		FontAmount,
 	},
@@ -286,7 +320,7 @@ export default {
 			title: this.title,
 			appVersionCode: 3,
 			meta: [
-				// facebook 
+				// facebook
 				{
 					name: 'og:url',
 					content: this.jumpUrl + this.detail.postId
@@ -603,7 +637,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: {
@@ -686,7 +720,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'
@@ -929,6 +963,12 @@ body,
 					color: #444444;
 				}
 			}
+      .luck-custom-prize {
+          font-weight: 500;
+          font-size: 14px;
+          letter-spacing: 0.3px;
+          color: #F5B945;
+      }
 		}
 
 		.luck-item:last-child {
@@ -1005,6 +1045,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;
@@ -1049,6 +1111,9 @@ body,
 		overflow-y: hidden;
 		box-shadow: 0 0 5px #888888;
 		background: #fff;
+    &.auto-height {
+      height: auto;
+    }
 
 		.money-area {
 			width: 100%;
@@ -1180,8 +1245,6 @@ body,
 		box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
 		background: #fff;
 
-
-
 		.top {
 			top: 0;
 			position: absolute;
@@ -1377,6 +1440,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">
@@ -10,25 +11,45 @@
                 <!-- 手机端 -->
                 <div class="small" :class="{ bg: status === 'not-open' }">
                     <template v-if="status === 'not-open'">
-                        <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>
+                        <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>
-                        <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>
+                            <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 v-else>
                         <div class="succTop">
@@ -42,7 +63,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>
@@ -51,7 +72,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">
@@ -64,11 +85,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>
@@ -101,35 +123,61 @@
                         </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="giveaway" :class="{ bg: status === 'not-open' }">
+                          <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', 'auto-height': !isMoneyPrize }">
+                            <!-- 旧版 样式，后续更新时在 custom-card-cover 公共组件内维护-->
                             <template v-if="status === 'not-open'">
-                                <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 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="true"
+                                  ></custom-card-cover>
+                                </template>
+
                             </template>
                             <template v-else>
                                 <div class="succTop">
@@ -152,7 +200,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">
@@ -165,11 +213,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>
@@ -207,6 +256,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')
@@ -227,7 +278,7 @@ const baseURL = api[process.env.NUXT_ENV.MODE]
 export default {
     name: 'luckdraw',
     components: {
-		FontAmount,
+		FontAmount,CustomCardCover
 	},
     head() {
 		return {
@@ -235,7 +286,7 @@ export default {
 			title: this.title,
 			appVersionCode: 3,
 			meta: [
-				// facebook 
+				// facebook
 				{
 					name: 'og:url',
 					content: this.jumpUrl + 'luckdraw/' + this.detail.postId
@@ -295,7 +346,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()
@@ -338,8 +395,6 @@ export default {
 					postUserInfo: {}
 				}
 			}
-            console.log('detail', data.data)
-
 			return {
 				detail: data.data,
 			}
@@ -505,7 +560,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();
 			}
@@ -550,7 +606,7 @@ body,
     overflow: hidden;
     width: 100%;
     height: 100%;
-    background: #F5FAFF;
+    background: #fff;
     .loading {
         position: absolute;
         transform: translate(-50%, -50%);
@@ -579,6 +635,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;
@@ -587,9 +663,16 @@ 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%);
                 }
+                &.auto-height {
+                  height: auto;
+                }
+
+
+
                 .lottery {
                     position: absolute;
                     top: 0;
@@ -985,6 +1068,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>

static/svg/icon-last-time.svg

@@ -0,0 +1,8 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-outside-1_21276_235944" maskUnits="userSpaceOnUse" x="0" y="0" width="14" height="14" fill="black">
+<rect fill="white" width="14" height="14"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 7C1 3.69143 3.69143 1 7 1C10.3086 1 13 3.69143 13 7C13 10.3086 10.3086 13 7 13C3.69143 13 1 10.3086 1 7ZM1.861 7C1.861 9.83329 4.16629 12.139 7 12.139C9.83329 12.139 12.139 9.83329 12.139 7C12.139 4.16629 9.83329 1.861 7 1.861C4.16629 1.861 1.861 4.16629 1.861 7ZM7.13644 7.36158H9.01036C9.21841 7.36158 9.38672 7.54844 9.38672 7.7815C9.38672 8.01455 9.21841 8.20141 9.01036 8.20141H6.76158C6.55391 8.20141 6.38672 8.01455 6.38672 7.7815V4.42301C6.38672 4.19038 6.55353 4.00141 6.76158 4.00141C6.96962 4.00141 7.13644 4.18995 7.13644 4.42301V7.36158Z"/>
+</mask>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 7C1 3.69143 3.69143 1 7 1C10.3086 1 13 3.69143 13 7C13 10.3086 10.3086 13 7 13C3.69143 13 1 10.3086 1 7ZM1.861 7C1.861 9.83329 4.16629 12.139 7 12.139C9.83329 12.139 12.139 9.83329 12.139 7C12.139 4.16629 9.83329 1.861 7 1.861C4.16629 1.861 1.861 4.16629 1.861 7ZM7.13644 7.36158H9.01036C9.21841 7.36158 9.38672 7.54844 9.38672 7.7815C9.38672 8.01455 9.21841 8.20141 9.01036 8.20141H6.76158C6.55391 8.20141 6.38672 8.01455 6.38672 7.7815V4.42301C6.38672 4.19038 6.55353 4.00141 6.76158 4.00141C6.96962 4.00141 7.13644 4.18995 7.13644 4.42301V7.36158Z" fill="#91989C"/>
+<path d="M7.13644 7.36158H7.03644V7.46158H7.13644V7.36158ZM7 0.9C3.6362 0.9 0.9 3.6362 0.9 7H1.1C1.1 3.74666 3.74666 1.1 7 1.1V0.9ZM13.1 7C13.1 3.6362 10.3638 0.9 7 0.9V1.1C10.2533 1.1 12.9 3.74666 12.9 7H13.1ZM7 13.1C10.3638 13.1 13.1 10.3638 13.1 7H12.9C12.9 10.2533 10.2533 12.9 7 12.9V13.1ZM0.9 7C0.9 10.3638 3.6362 13.1 7 13.1V12.9C3.74666 12.9 1.1 10.2533 1.1 7H0.9ZM7 12.039C4.22152 12.039 1.961 9.77806 1.961 7H1.761C1.761 9.88851 4.11105 12.239 7 12.239V12.039ZM12.039 7C12.039 9.77806 9.77806 12.039 7 12.039V12.239C9.88851 12.239 12.239 9.88851 12.239 7H12.039ZM7 1.961C9.77806 1.961 12.039 4.22152 12.039 7H12.239C12.239 4.11105 9.88851 1.761 7 1.761V1.961ZM1.961 7C1.961 4.22151 4.22151 1.961 7 1.961V1.761C4.11106 1.761 1.761 4.11106 1.761 7H1.961ZM9.01036 7.26158H7.13644V7.46158H9.01036V7.26158ZM9.48672 7.7815C9.48672 7.50365 9.28352 7.26158 9.01036 7.26158V7.46158C9.1533 7.46158 9.28672 7.59324 9.28672 7.7815H9.48672ZM9.01036 8.30141C9.28352 8.30141 9.48672 8.05935 9.48672 7.7815H9.28672C9.28672 7.96975 9.1533 8.10141 9.01036 8.10141V8.30141ZM6.76158 8.30141H9.01036V8.10141H6.76158V8.30141ZM6.28672 7.7815C6.28672 8.05887 6.48837 8.30141 6.76158 8.30141V8.10141C6.61944 8.10141 6.48672 7.97023 6.48672 7.7815H6.28672ZM6.28672 4.42301V7.7815H6.48672V4.42301H6.28672ZM6.76158 3.90141C6.48739 3.90141 6.28672 4.14674 6.28672 4.42301H6.48672C6.48672 4.23401 6.61968 4.10141 6.76158 4.10141V3.90141ZM7.23644 4.42301C7.23644 4.14625 7.03571 3.90141 6.76158 3.90141V4.10141C6.90354 4.10141 7.03644 4.23366 7.03644 4.42301H7.23644ZM7.23644 7.36158V4.42301H7.03644V7.36158H7.23644Z" fill="#91989C" mask="url(#path-1-outside-1_21276_235944)"/>
+</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"