data

pages/luckdraw.vue

@@ -8,26 +8,72 @@
         <template v-else>
             <template v-if="isMobile">
                 <!-- 手机端 -->
-                <div class="small">
-                    <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">USDT GIVEAWAY</div>
-                        <div class="money">
-                            <img :src="detail.postBizData.currencyIconPath" />
-                            <font-amount :fontSize="60" :amount="detail.postBizData.amountValue"></font-amount>
+                <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>
-                    <div class="time">
-                        <span class="t">🕒 18:23:53</span>
-                        <span class="w">🏆 3 WINNERS</span>
-                    </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">
+                            <span class="t">🕒 {{ validity }}</span>
+                            <span class="w">🏆 {{ detail.postBizData.totalCount }} WINNERS</span>
+                        </div>
+                        <div class="box">
+                            <img src="../static/subject/icon-box.png" />
+                        </div>
+                    </template>
+                    <template v-else>
+                        <div class="succTop">
+                            <template v-if="status === 'opened'">
+                                <img class="img" :src=" require('../static/svg/icon-luck-rabbit.svg') " />
+                                <p class="tips">Good Luck Next Time!</p>
+                            </template>
+                            <template v-else-if="status === 'expire'">
+                                <img class="img" :src=" require('../static/svg/icon-luck-complete.svg') " />
+                                <p class="tips">This Draw is Complete</p>
+                            </template>
+                            <template v-else>
+                                <p class="win">🎉 Awesome! You are Winner!</p>
+                                <div class="win-money">
+                                    <img :src="detail.postBizData.currencyIconPath" />
+                                    <font-amount :fontSize="46" :amount="receiveAmount"></font-amount>
+                                </div>
+                            </template>
+                        </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>
+                        </div>
+                        <div class="luck-list" @scroll="handleScroll($event)">
+                            <div class="luck-item" v-for="item, i in luck_list" v-bind:key="i">
+                                <div class="userLogo">
+                                    <img class="medal" v-if="i < 2" :src=" require('../static/svg/icon-medal-' + i + '.svg') " />
+                                    <img class="header" v-if="item.simpleUserInfoVO.avatarUrl" :src="item.simpleUserInfoVO.avatarUrl" alt />
+                                    <img class="header" v-else src="/svg/icon-twitter.svg" alt />
+                                </div>
+                                <div class="luck-content">
+                                    <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">
+                                    <img :src="item.currencyIconPath" alt />
+                                    <div class="luck-money-txt">{{ item.amountValue || 0 }}</div>
+                                </div>
+                                <div class="luck-king" v-if="item.maxAmount">
+                                    <img src="/svg/icon-king-hat.svg" alt />
+                                    <span>Luckiest Draw</span>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
                     <div class="area-cp-link">
                         <div class="area-list">
                             <div class="item">
@@ -44,7 +90,7 @@
                             {{ linkHref }}
                         </div>
                         <div class="area-btn">
-                            <div class="btn" :data-clipboard-text="linkHref" @click="copyLinkHandle">Copy Link</div>
+                            <div class="btn" :data-clipboard-text="linkHref">Copy Link</div>
                         </div>
                     </div>
                     <div class="layer" v-show="layer_show">
@@ -58,19 +104,19 @@
             </template>
             <template v-else>
                 <div class="logo">
-                    <img src="/img/icon-logo.png" alt />
+                    <img src="/img/icon-logo.png" />
                 </div>
                 <div class="show">
                     <div class="center">
-                        <div class="giveaway" :class="{ bg: false }">
-                            <template v-if="false">
+                        <div class="giveaway" :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">USDT GIVEAWAY</div>
+                                    <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>
@@ -78,7 +124,7 @@
                                 </div>
                                 <div class="time">
                                     <span class="t">🕒 18:23:53</span>
-                                    <span class="w">🏆 3 WINNERS</span>
+                                    <span class="w">🏆 {{ detail.postBizData.totalCount }} WINNERS</span>
                                 </div>
                                 <div class="box">
                                     <img src="../static/subject/icon-box.png" />
@@ -86,17 +132,33 @@
                             </template>
                             <template v-else>
                                 <div class="succTop">
-                                    <img :src=" require('../static/svg/icon-luck-complete.svg') " />
-                                    <p class="tips">This Draw is Complete</p>
+                                    <template v-if="status === 'opened'">
+                                        <img class="img" :src=" require('../static/svg/icon-luck-rabbit.svg') " />
+                                        <p class="tips">Good Luck Next Time!</p>
+                                    </template>
+                                    <template v-else-if="status === 'expire'">
+                                        <img class="img" :src=" require('../static/svg/icon-luck-complete.svg') " />
+                                        <p class="tips">This Draw is Complete</p>
+                                    </template>
+                                    <template v-else>
+                                        <p class="win">🎉 Awesome! You are Winner!</p>
+                                        <div class="win-money">
+                                            <img :src="detail.postBizData.currencyIconPath" />
+                                            <font-amount :fontSize="46" :amount="receiveAmount"></font-amount>
+                                        </div>
+                                    </template>
                                 </div>
                                 <div class="succTitle">
-                                    <span>3/3 Winners</span>
-                                    <span>100/100 USDT</span>
+                                    <span>{{ detail.postBizData.receiveCount || 0 }}/{{ detail.postBizData.totalCount || 0 }} Winners</span>
+                                    <span>{{ 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">
-                                        <img v-if="item.simpleUserInfoVO.avatarUrl" :src="item.simpleUserInfoVO.avatarUrl" alt />
-                                        <img v-else src="/svg/icon-twitter.svg" alt />
+                                        <div class="userLogo">
+                                            <img class="medal" v-if="i < 2" :src=" require('../static/svg/icon-medal-' + i + '.svg') " />
+                                            <img class="header" v-if="item.simpleUserInfoVO.avatarUrl" :src="item.simpleUserInfoVO.avatarUrl" alt />
+                                            <img class="header" v-else src="/svg/icon-twitter.svg" alt />
+                                        </div>
                                         <div class="luck-content">
                                             <div class="luck-title">{{ item.simpleUserInfoVO.nickName || 'Twitter User' }}</div>
                                             <div class="luck-time">{{ formatTime(item.receiveTimestamp, 'MM-DD HH:mm') }}</div>
@@ -114,9 +176,21 @@
                             </template>
                         </div>
                         <div class="desc">
-                            <div class="title">Install DeNet Plugin<br/>to Draw Prizes</div>
-                            <div class="issue">DeNet will detect task situation to issue Giveaway</div>
-                            <img class="button" :src=" require('../static/img/icon-install-plugin.svg') " />
+                            <template v-if="isChrome">
+                                <template v-if="status === 'not-open'">
+                                    <div class="title">Install DeNet Plugin<br/>to Draw Prizes</div>
+                                    <div class="issue">DeNet will detect task situation to issue Giveaway</div>
+                                </template>
+                                <template v-else>
+                                    <div class="title">Install the Denet plugin<br/>to not miss the next draw</div>
+                                </template>
+                                <img class="button" @click="installExtension" src="../static/svg/icon-install-nft-plugin.svg" />
+                            </template>
+                            <template v-else>
+                                <div class="title">Get Giveaway<br />with chrome</div>
+                                <div class="issue">Only supports getting Giveaways through chrome</div>
+                                <img class="button" @click="clickOpenChrome" src="../static/svg/icon-install-nft-chrome.svg" />
+                            </template>
                         </div>
                     </div>
                 </div>
@@ -129,14 +203,69 @@
 import axios from 'axios'
 import Cookies from 'js-cookie'
 import { Toast } from 'vant';
-import { isBrowser } from '../utils/help.js'
+import { isBrowser, appType, appVersionCode } from '../utils/help.js'
 import FontAmount from '../components/FontAmount.vue'
 
+var moment = require('moment');
+var ClipboardJS = require('clipboard')
+
+const api = {
+	prod: 'https://api.denetme.net',
+	pre: 'https://preapi.denetme.net',
+	test: 'https://testapi.denetme.net'
+}
+const page = {
+	prod: "https://h5.denetme.net",
+	pre: "https://preh5.denetme.net",
+	test: 'https://testh5.denetme.net'
+}
+const jumpUrl = page[process.env.NUXT_ENV.MODE] + '/'
+const baseURL = api[process.env.NUXT_ENV.MODE]
+
 export default {
     name: 'luckdraw',
     components: {
 		FontAmount,
 	},
+    head() {
+		return {
+			type: '',
+			title: this.title,
+			appVersionCode: 3,
+			meta: [
+				// facebook 
+				{
+					name: 'og:url',
+					content: this.jumpUrl + 'luckdraw/' + this.detail.postId
+				},
+				{
+					name: 'og:title',
+					content: this.metaTitle
+				},
+				{
+					name: 'og:image',
+					content: this.detail.postBizData.imagePath || ''
+				},
+				// twitter
+				{
+					name: 'twitter:card',
+					content: 'summary_large_image'
+				},
+				{
+					name: 'twitter:url',
+					content: this.jumpUrl + 'luckdraw/' + this.detail.postId
+				},
+				{
+					name: 'twitter:title',
+					content: this.metaTitle
+				},
+				{
+					name: 'twitter:image',
+					content: this.detail.postBizData.imagePath || ''
+				}
+			]
+		}
+	},
     data() {
         return {
             detail: {
@@ -148,23 +277,269 @@ export default {
                 }
             },
             luck_list: [],
-            layer_show: true,
-            isLoading: false,
+            luck_list_end: false,
+            layer_show: false,
+            isLoading: true,
             isMobile: false,
             isChrome: false,
+            config: {},
+            mid: '',
+            status: '',  // not-open->未打开   opened->没有抽中   success->抽中了   expire->过期
+            page_index: 1,
+			page_size: 20,
+            validity: '',
+            receiveAmount: '0',
+            title: 'DeNet Giveaway',
+			metaTitle: 'DeNet: An Easy Web3 Tool For GIVEAWAY / AIRDROP',
         }
     },
     mounted() {
+        this.getConfig()
+        this.setCookieMid()
         this.checkBrowser()
+        this.handleStatusPage()
+        this.isLoading = false;
+
+        // 复制链接
+        var clipboard = new ClipboardJS('.btn');
+        clipboard.on('success', function (e) {
+            Toast('copy success');
+            e.clearSelection();
+        });
+        clipboard.on('error', function (e) {
+            this.layer_show = true
+        });
     },
+    async asyncData(params) {
+		let { route } = params;
+		let { data } = await axios.post(`${baseURL}/denet/post/getDetail`, {
+			baseInfo: {
+				appVersionCode: appVersionCode,
+				mid: function () {
+					return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+						var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+						return v.toString(16);
+					});
+				}()
+			},
+			params: {
+				postId: route.params.id || ''
+			}
+		})
+		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: {}
+				}
+			}
+            console.log('detail', data.data)
+
+			return {
+				detail: data.data,
+			}
+		}
+	},
     methods: {
         checkBrowser() {
             this.linkHref = window.location.href;
             this.isChrome = isBrowser() == 'chrome';
 			this.isMobile = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
+            if (!this.isChrome) {
+                this.status = 'no-chrome'
+            } else {
+                this.setPickupInfo()
+            }
+		},
+        async getConfig() {
+            let { data } = await axios.post(`${baseURL}/denet/base/config/getFrontConfig`, {
+				baseInfo: {
+					appVersionCode: appVersionCode,
+					mid: this.mid
+				},
+				params: {}
+			})
+			if (data.code == 0) {
+				this.config = data.data;
+			}
+        },
+        setCookieMid() {
+            let _cookie_mid_arr = Cookies.get('mid') || []
+			if (_cookie_mid_arr.length > 0) {
+				this.mid = JSON.parse(_cookie_mid_arr)[0].mid
+			} else {
+				this.mid = this.guid()
+				Cookies.set('mid', JSON.stringify([{ mid: this.mid }]), { expires: 1000 })
+			}
+        },
+        guid() {
+			return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+				var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+				return v.toString(16);
+			});
+		},
+        clickOpenChrome() {
+			window.open('https://www.google.com/chrome')
+		},
+        installExtension() {
+            let { extensionsInstallChannel, extensionsInstallUrl } = this.config;
+            switch (extensionsInstallChannel) {
+				case "officeDownload":
+					location.href = url;
+					this.$router.push({
+						path: '/install'
+					})
+					break;
+				case "chromeAppStore":
+					window.open(extensionsInstallUrl)
+					break;
+			}
+        },
+        setPickupInfo() {
+            let pickupInfo = {
+				srcContentId: this.detail.srcContentId,
+				postNickName: this.detail.postBizData.postUserInfo.nickName,
+                createTime: Date.now(),
+			};
+			Cookies.set('pickup_info', JSON.stringify(pickupInfo), { expires: 100 });
+        },
+        formatTime(time, _type = 'MM-DD HH:mm:ss') {
+			return moment(time).format(_type)
+		},
+        getValidity(end_time) {
+            let _d1, _d2, _d3, _h, _m, _s
+			let timer = setInterval(() => {
+				let _time = new Date().getTime()
+				_d3 = end_time - _time
+				if (_d3 > 0) {
+					_d1 = moment(end_time)
+					_d2 = moment(_time)
+					_h = moment.duration(_d1.diff(_d2)).hours()
+					_m = moment.duration(_d1.diff(_d2)).minutes()
+					_s = moment.duration(_d1.diff(_d2)).seconds()
+					if (_h < 10) {
+						_h = '0' + _h
+					}
+					if (_m < 10) {
+						_m = '0' + _m
+					}
+					if (_s < 10) {
+						_s = '0' + _s
+					}
+					this.validity = `${_h}:${_m}:${_s}`
+				} else {
+                    this.validity = `00:00:00`
+                    this.getDetail()
+                    this.getReceivedList()
+					clearInterval(timer)
+				}
+			}, 1000)
+        },
+        handleScroll(e) {
+			e = e.target
+			if (this.luck_list_end) {
+				return
+			}
+			if ((e.clientHeight + e.scrollTop) / e.scrollHeight > .8) {
+				this.luck_list_end = false
+				this.page_index++
+				this.getReceivedList()
+			}
+		},
+        handleStatusPage() {
+            // 如果 我领取过了
+            // taskFinishStatus  任务完成状态（0:未完成，1:已完成，2:已过期）
+            if (this.detail.myReceived) {
+                this.receiveAmount = this.detail.myReceived.amountValue || 0
+                // 如果 任务完成状态 = 未完成
+                if (this.detail.myReceived.taskFinishStatus == 0) {
+                    // 显示任务未完成页面
+                    this.status = `opened`
+                } else if (this.detail.myReceived.taskFinishStatus == 1) {
+                    //如果 任务完成状态 = 已经完成
+                    if (this.receiveAmount == 0) {
+                        // 领取到空红包
+                        this.status = `opened`
+                    } else {
+                        // 显示成功页面
+                        this.status = `success`
+                    }
+                } else {
+                    // 如果 任务完成状态 = 已经过期
+                    if (this.detail.status == 1) {
+                        // 显示未打开页面
+                        this.status = 'not-open'
+                    } else {
+                        // 显示已经过期页面
+                        this.status = 'expire'
+                    }
+                }
+            } else {
+                // 如果 我没有领取过
+                // 如果 红包状态 = 进行中
+                if (this.detail.status == 1) {
+                    // 如果 过了红包的领取截止时间 = true
+                    if (this.detail.receiveTimeExpired) {
+                        // 显示过期页面
+                        this.status = 'expire'
+                    } else {
+                        // 如果 过了红包的领取截止时间 = false
+                        // 显示未打开页面
+                        this.status = 'not-open'
+                    }
+                } else {
+                    // 红包状态 = 已经结束了 ｜ 已经终止 ｜ 终止退款中
+                    // 显示过期页面
+                    this.status = 'expire'
+                }
+            }
+
+            // this.status = 'not-open'
+
+            // getList
+            if (this.status !== 'not-open') {
+                this.getReceivedList()
+            } else {
+                this.getValidity(this.detail.endTimestamp)
+            }
+        },
+        async getDetail() {
+			let { data } = await axios.post(`${baseURL}/denet/post/getDetail`, {
+				baseInfo: {
+					appVersionCode: appVersionCode,
+					mid: this.mid
+				},
+				params: {
+					postId: this.detail.postId
+				}
+			})
+			if (data.code == 0) {
+				this.detail.postBizData = JSON.parse(data.data.postBizData)
+			}
+		},
+        async getReceivedList() {
+			let { data } = await axios.post(`${baseURL}/denet/post/luckdrop/getReceivedList`, {
+				baseInfo: {
+					appVersionCode: appVersionCode,
+					mid: this.mid
+				},
+				params: {
+					pageNum: this.page_index,
+					pageSize: this.page_size,
+					postId: this.detail.postId || ''
+				}
+			})
+			if (data.code == 0) {
+				if (data.data.length > 0) {
+					this.luck_list = this.luck_list.concat(data.data)
+					this.luck_list_end = false
+				} else {
+					this.luck_list_end = true
+				}
+			}
 		},
-        copyLinkHandle() {
-        }
     }
 }
 </script>
@@ -308,116 +683,6 @@ body,
                         height: 100%;
                     }
                 }
-
-                .succTop {
-                    display: flex;
-                    align-items: center;
-                    flex-direction: column;
-                    justify-content: center;
-                    height: 150px;
-                    margin-bottom: 13px;
-                    background: #7D52FD;
-		            border-radius: 0 586px 586px/0 0 104px 104px;
-                    img {
-                        width: 62px;
-                        height: 62px;
-                    }
-                    .tips {
-                        color: #FFFFFF;
-                        font-size: 22px;
-                        font-weight: 800;
-                        line-height: 26px;
-                        margin-top: 15px;
-                    }
-                }
-                .succTitle {
-                    display: flex;
-                    justify-content: space-between;
-                    height: 28px;
-                    box-shadow: inset 0px -1px 0px #F2F2F2;
-                    span {
-                        margin: 0 16px;
-                        font-size: 12px;
-                        color: #B0B0B0;
-                    }
-                }
-                .luck-list {
-                    flex: 1;
-                    width: 100%;
-                    overflow-y: auto;
-                    .luck-item {
-                        display: flex;
-                        padding: 12px 0;
-                        margin: 0 16px;
-                        border-bottom: 1px solid #F2F2F2;
-                        justify-content: space-between;
-                        position: relative;
-                        img:first-child {
-                            border-radius: 50%;
-                        }
-                        .luck-king {
-                            position: absolute;
-                            top: 36px;
-                            right: 0px;
-                            display: flex;
-                            align-items: center;
-                            img {
-                                width: 22px;
-                                height: 19px;
-                                margin: 0;
-                            }
-                            span {
-                                font-weight: 500;
-                                font-size: 12px;
-                                line-height: 14px;
-                                letter-spacing: 0.3px;
-                                color: #f5b945;
-                            }
-                        }
-                        img {
-                            width: 42px;
-                            height: 42px;
-                            margin-right: 12px;
-                        }
-                        .luck-content {
-                            flex: auto;
-                            .luck-title {
-                                font-weight: 500;
-                                font-size: 16px;
-                                letter-spacing: 0.3px;
-                                color: #444444;
-                            }
-                            .luck-time {
-                                font-weight: 400;
-                                font-size: 12px;
-                                line-height: 14px;
-
-                                color: #9b9b9b;
-                            }
-                        }
-                        .luck-money {
-                            display: flex;
-                            height: 17px;
-                            align-items: center;
-                            img {
-                                width: 14px;
-                                height: 14px;
-                                margin-right: 6px;
-                            }
-                            .luck-money-txt {
-                                font-weight: 500;
-                                font-size: 14px;
-                                /* identical to box height */
-                                text-align: right;
-                                letter-spacing: 0.3px;
-                                color: #444444;
-                            }
-                        }
-                    }
-                    .luck-item:last-child {
-                        border: 0;
-                    }
-                }
             }
             .desc {
                 width: 520px;
@@ -446,7 +711,10 @@ body,
     width: 100%;
     height: 100%;
     position: relative;
-    background: linear-gradient(17.98deg, #3438FF 3.69%, #8B56FC 74.32%);
+    background-color: #fff;
+    &.bg {
+        background: linear-gradient(17.98deg, #3438FF 3.69%, #8B56FC 74.32%);
+    }
     .lottery {
         position: absolute;
         top: 0;
@@ -640,4 +908,151 @@ body,
         }
     }
 }
+
+.luck-list {
+    flex: 1;
+    width: 100%;
+    height: 310px;
+    overflow-y: auto;
+    .luck-item {
+        display: flex;
+        padding: 12px 0;
+        margin: 0 16px;
+        border-bottom: 1px solid #F2F2F2;
+        justify-content: space-between;
+        position: relative;
+        .header {
+            border-radius: 50%;
+        }
+        .luck-king {
+            position: absolute;
+            top: 36px;
+            right: 0px;
+            display: flex;
+            align-items: center;
+            img {
+                width: 22px;
+                height: 19px;
+                margin: 0;
+            }
+            span {
+                font-weight: 500;
+                font-size: 12px;
+                line-height: 14px;
+                letter-spacing: 0.3px;
+                color: #f5b945;
+            }
+        }
+        .userLogo {
+            position: relative;
+            width: 42px;
+            height: 42px;
+            margin-right: 12px;
+            .medal {
+                position: absolute;
+                right: -5px;
+                bottom: -5px;
+                width: 18px;
+                height: 18px;
+            }
+            img {
+                width: 100%;
+                height: 100%;
+            }
+        }
+        .luck-content {
+            flex: auto;
+            .luck-title {
+                font-weight: 500;
+                font-size: 16px;
+                letter-spacing: 0.3px;
+                color: #444444;
+            }
+            .luck-time {
+                font-weight: 400;
+                font-size: 12px;
+                line-height: 14px;
+
+                color: #9b9b9b;
+            }
+        }
+        .luck-money {
+            display: flex;
+            height: 17px;
+            align-items: center;
+            img {
+                width: 14px;
+                height: 14px;
+                margin-right: 6px;
+            }
+            .luck-money-txt {
+                font-weight: 500;
+                font-size: 14px;
+                /* identical to box height */
+                text-align: right;
+                letter-spacing: 0.3px;
+                color: #444444;
+            }
+        }
+    }
+    .luck-item:last-child {
+        border: 0;
+    }
+}
+
+.succTop {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    height: 150px;
+    margin-bottom: 13px;
+    background: #7D52FD;
+    border-radius: 0 586px 586px/0 0 104px 104px;
+    .img {
+        height: 62px;
+    }
+    .tips {
+        color: #FFFFFF;
+        font-size: 22px;
+        font-weight: 800;
+        line-height: 26px;
+        margin-top: 15px;
+    }
+    .win {
+        font-size: 21px;
+        font-weight: 800;
+        color: #fff;
+    }
+    .win-money {
+        display: flex;
+        margin-top: -10px;
+        align-items: center;
+        justify-content: center;
+        img {
+            width: 44px;
+            height: 44px;
+            margin-right: 15px;
+            border-radius: 50%;
+            border: solid 3px #fff;
+        }
+        span {
+            color: #fff;
+            font-size: 60px;
+            font-weight: 800;
+            line-height: 76px;
+        }
+    }
+}
+.succTitle {
+    display: flex;
+    justify-content: space-between;
+    height: 28px;
+    box-shadow: inset 0px -1px 0px #F2F2F2;
+    span {
+        margin: 0 16px;
+        font-size: 12px;
+        color: #B0B0B0;
+    }
+}
 </style>

static/svg/icon-medal-0.svg

@@ -0,0 +1,21 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="19" height="19" rx="9.5" fill="url(#paint0_linear_19741_219202)" stroke="white"/>
+<g filter="url(#filter0_d_19741_219202)">
+<path d="M9.83008 14H11.582V5.54492H9.82422L7.63867 7.0625V8.65625L9.79492 7.16797H9.83008V14Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_19741_219202" x="7.63867" y="5.54492" width="4.44336" height="8.95508" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="0.5" dy="0.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_19741_219202"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_19741_219202" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_19741_219202" x1="14.4444" y1="-1.66667" x2="2.77778" y2="22.2222" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FEDE24"/>
+<stop offset="1" stop-color="#DFBF00"/>
+</linearGradient>
+</defs>
+</svg>

static/svg/icon-medal-1.svg

@@ -0,0 +1,21 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="19" height="19" rx="9.5" fill="url(#paint0_linear_19741_220612)" stroke="white"/>
+<g filter="url(#filter0_d_19741_220612)">
+<path d="M6.87695 8.08789V8.11719H8.51758V8.08789C8.51758 7.30859 9.12109 6.73438 9.94141 6.73438C10.7266 6.73438 11.2832 7.23828 11.2832 7.87109C11.2832 8.45703 11.0195 8.88477 10.1641 9.74023L6.97656 12.8105V14H13.123V12.5938H9.30859V12.5586L11.3711 10.5723C12.3027 9.64648 13.0059 8.85547 13.0059 7.80078C13.0059 6.38867 11.7812 5.35742 10 5.35742C8.1543 5.35742 6.87695 6.48828 6.87695 8.08789Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_19741_220612" x="6.87695" y="5.35742" width="6.74609" height="9.14258" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="0.5" dy="0.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_19741_220612"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_19741_220612" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_19741_220612" x1="7.77778" y1="20" x2="20" y2="3.33333" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AFC3D2"/>
+<stop offset="1" stop-color="#CCDBE7"/>
+</linearGradient>
+</defs>
+</svg>

static/svg/icon-medal-2.svg

@@ -0,0 +1,21 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="19" height="19" rx="9.5" fill="url(#paint0_linear_19741_220611)" stroke="white"/>
+<g filter="url(#filter0_d_19741_220611)">
+<path d="M8.875 10.3086H9.91797C10.873 10.3086 11.4531 10.7773 11.4531 11.5508C11.4531 12.2656 10.832 12.7637 9.94727 12.7637C9.01562 12.7637 8.42969 12.2949 8.37695 11.5801H6.68359C6.76562 13.1387 8.01367 14.1875 9.92383 14.1875C11.875 14.1875 13.252 13.1797 13.252 11.6621C13.252 10.4902 12.4375 9.72852 11.1777 9.62305V9.58789C12.2148 9.40039 12.9238 8.65039 12.9238 7.61328C12.9238 6.25977 11.7227 5.35742 9.96484 5.35742C8.13086 5.35742 6.91211 6.37695 6.84766 7.94141H8.47656C8.52344 7.20312 9.06836 6.7168 9.88867 6.7168C10.7676 6.7168 11.2539 7.16797 11.2539 7.85352C11.2539 8.55078 10.709 9.03125 9.90039 9.03125H8.875V10.3086Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_19741_220611" x="6.68359" y="5.35742" width="7.06836" height="9.33008" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="0.5" dy="0.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_19741_220611"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_19741_220611" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_19741_220611" x1="7.77778" y1="17.7778" x2="20" y2="3.33333" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D5AD88"/>
+<stop offset="1" stop-color="#F3DCC7"/>
+</linearGradient>
+</defs>
+</svg>

utils/help.js

@@ -68,3 +68,7 @@ export function getBrowser() {
     }
     return browser;
 }
+
+export const appVersionCode = 12;
+
+export const appType = 1;