[add][logic]

src/assets/svg/icon-while-yes.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 15C11.6421 15 15 11.6421 15 7.5C15 3.35786 11.6421 0 7.5 0C3.35786 0 0 3.35786 0 7.5C0 11.6421 3.35786 15 7.5 15ZM3.96965 8.83499L6.50193 11.3675L7.1218 11.9874L7.6383 11.2791L12.219 4.99666L11.007 4.11293L6.94276 9.68696L5.03035 7.77438L3.96965 8.83499Z" fill="white"/>
+</svg>

src/view/iframe/treasure-hunt/components/btn.vue

@@ -48,7 +48,6 @@ const clickBtn = () => {
     width: 343px;
     margin: 0 auto;
     cursor: pointer;
-    margin-top: 16px;
     user-select: none;
 
     span {

src/view/iframe/treasure-hunt/components/dialog.vue

@@ -1,10 +1,10 @@
 <template>
-    <div class="content">
+    <div class="content" v-show="">
         <div class="background"></div>
         <!-- 开奖页 -->
         <div class="dialog">
-            <div class="txt">All treasures are hunted, good luck next time!</div>
-            <div class="btn">ok</div>
+            <div class="txt">{{ txt }}</div>
+            <div class="btn" @click="clickBtn">OK</div>
         </div>
     </div>
 </template>
@@ -15,9 +15,12 @@ let state = inject('state')
 defineProps({
     txt: {
         type: String,
-        default: ''
+        default: 'All treasures are hunted, good luck next time!'
     }
 })
+const clickBtn = () => {
+
+}
 </script>
 <style lang="scss" scoped>
 .content {
@@ -26,30 +29,36 @@ defineProps({
     display: flex;
     align-items: center;
     justify-content: center;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 999;
 
     .background {
         background: #000000;
         opacity: .9;
         position: fixed;
-        width: 100%;
-        height: 100%;
-        z-index: 1;
+        width: 375px;
+        height: 500px;
     }
 
     .dialog {
-        z-index: 2;
+        z-index: 1;
         width: 335px;
         background: #FFFFFF;
         border-radius: 15px;
-        height: 134px;
 
         .txt {
             color: #000000;
             font-weight: 500;
             font-size: 16px;
+            padding: 27px 30px 16px 30px;
+            text-align: center;
+
         }
 
         .btn {
+            cursor: pointer;
             border-top: 1px solid #EEEEEE;
             width: 100%;
             height: 52px;

src/view/iframe/treasure-hunt/components/invite-friends.vue

@@ -4,25 +4,59 @@
             the
             tasks.</div>
         <div class="area-url">
-            <div class="url">h5.denetme.net/aac465147b12I8ac46531994</div>
-            <div class="btn">
+            <div class="url">{{ state.share_url }}</div>
+            <div class="btn copy-btn" @click="clickCopy" :data-clipboard-text="state.share_url">
                 Copy
             </div>
         </div>
         <div class="share-list">
-            <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" />
-            <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" />
-            <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" />
-            <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" />
-            <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" />
-            <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" />
+            <img :src="item.iconPath" alt="" v-for="item in state.share_list" @click="clickShare(item)" />
         </div>
         <v-btn :txt="'Invite a friend to open the chest'" :font-size="'17px'" class="btn" :icon="false"
             :disabled="true"></v-btn>
+        <v-toast :show="state.toast.show" :txt="state.toast.txt"></v-toast>
+        <open-box></open-box>
     </div>
 </template>
 <script setup>
 import VBtn from '@/view/iframe/treasure-hunt/components/btn.vue'
+import VToast from '@/view/iframe/treasure-hunt/components/toast.vue'
+import OpenBox from '@/view/iframe/treasure-hunt/components/dialog.vue'
+import { inject } from 'vue'
+let ClipboardJS = require('clipboard');
+let state = inject('state')
+state.toast = {}
+
+state.share_list = [{
+    iconPath: require('@/assets/svg/icon-btn-box.svg'),
+    redirectPath: 'https://www.baidu.com'
+}]
+state.share_url = '123123123123'
+
+const clickShare = (item) => {
+    window.open(item.redirectPath)
+}
+var clipboard = new ClipboardJS('.copy-btn');
+
+const clickCopy = () => {
+    clipboard.on('success', function (e) {
+        state.toast.txt = 'Copy Successfully'
+        state.toast.show = true
+        setTimeout(() => {
+            state.toast.show = false
+        }, 2000)
+        e.clearSelection();
+    });
+
+    clipboard.on('error', function (e) {
+        state.toast.txt = 'Copy Error'
+        state.toast.show = true
+        setTimeout(() => {
+            state.toast.show = false
+        }, 2000)
+    });
+
+}
 </script>
 <style lang="scss" scoped>
 .invite-friends {
@@ -52,6 +86,10 @@ import VBtn from '@/view/iframe/treasure-hunt/components/btn.vue'
         justify-content: space-between;
 
         .url {
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 3;
+            overflow: hidden;
             width: 194px;
 
             color: #737373;
@@ -82,6 +120,7 @@ import VBtn from '@/view/iframe/treasure-hunt/components/btn.vue'
     .share-list {
         margin-top: 20px;
         text-align: center;
+        margin-bottom: 10px;
 
         img {
             user-select: none;

src/view/iframe/treasure-hunt/components/invite-list.vue

@@ -1,71 +1,134 @@
 <template>
-    <div>
-        <div class="list">
-            <div class="item">
-                <div class="left">
-                    <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" />
-                </div>
-                <div class="right">
-                    <div>@Ambrose1283</div>
-                    <div>3 min ago</div>
-                </div>
-            </div>
-            <div class="item">
+    <div class="content">
+        <div class="error" v-if="state.invited_list.length == 0">
+            Invite people to hunt treasure with you!
+        </div>
+        <div class="list" v-else>
+            <div class="item" v-for="item in state.invited_list">
                 <div class="left">
                     <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" />
                 </div>
                 <div class="right">
-                    <div>@Ambrose1283</div>
-                    <div>3 min ago</div>
+                    <div>{{ item.userInfo.nickName }}</div>
+                    <div>{{ getTime(item.timestamp) }}</div>
                 </div>
             </div>
         </div>
-        <v-btn :txt="'Invite a friend to open the chest'" :font-size="'17px'" class="btn" :icon="false"
-            :disabled="true"></v-btn>
+        <div class="footer">
+            <v-btn :txt="'Invite a friend to open the chest'" :font-size="'17px'" class="btn" :icon="false"
+                :disabled="false" @onClick="clickBtn"></v-btn>
+        </div>
     </div>
 </template>
 <script setup>
-import { reactive } from 'vue'
 import VBtn from '@/view/iframe/treasure-hunt/components/btn.vue'
+import OpenBox from '@/view/iframe/treasure-hunt/components/dialog.vue'
+import { inject } from 'vue'
+
+var moment = require('moment')
+let state = inject('state')
+state.invited_list = [
+    {
+        timestamp: 1659690839454,
+        userInfo: {
+            avatarUrl: '',
+            nickName: ''
+        }
+    }
+]
+
+const getTime = (timestamp) => {
+    let _d1 = moment(new Date().getTime())
+    let _d2 = moment(timestamp)
+    const plural = (n, s) => {
+        let _str = `${n} ${s} ago`
+        if (n > 1) {
+            _str = `${n} ${s}s ago`
+        }
+        return _str
+    }
+    let _d = moment.duration(_d1.diff(_d2)).days()
+    if (_d) {
+        return plural(_d, 'day')
+    }
+    let _h = moment.duration(_d1.diff(_d2)).hours()
+    if (_h) {
+        return plural(_h, 'hour')
+    }
+    let _m = moment.duration(_d1.diff(_d2)).minutes()
+    if (_m) {
+        return plural(_m, 'min')
+    }
+    let _s = moment.duration(_d1.diff(_d2)).seconds()
+    return plural(_s, 'sec')
+}
+
+const clickBtn = () => {
+
+}
+
 </script>
 <style lang="scss" scoped>
-.list {
-    .item {
-        height: 60px;
-        display: flex;
-        align-items: center;
-
-        .left {
-            width: 58px;
-            text-align: center;
-
-            img {
-                width: 30px;
-                height: 30px;
-            }
-        }
+.content {
+    position: relative;
+    height: 292px;
+
+    .footer {
+        background: #fff;
+        padding: 10px 16px 25px 16px;
+    }
+
+    .error {
+        height: 204px;
+        color: #BABABA;
+        font-weight: 500;
+        font-size: 15px;
+        line-height: 204px;
+        text-align: center;
+
+    }
 
-        .right {
-            flex: 1;
-            border-bottom: 1px solid #D9D9D9;
+    .list {
+        height: 204px;
+        overflow-y: auto;
+
+        .item {
+            height: 60px;
             display: flex;
             align-items: center;
-            height: 100%;
-            justify-content: space-between;
 
-            div:nth-child(1) {
-                color: #000000;
-                font-weight: 500;
-                font-size: 15px;
+            .left {
+                width: 58px;
+                text-align: center;
 
+                img {
+                    width: 30px;
+                    height: 30px;
+                }
             }
 
-            div:nth-child(2) {
-                color: #A6A6A6;
-                font-weight: 400;
-                font-size: 12px;
-                margin-right: 17px;
+            .right {
+                flex: 1;
+                border-bottom: 1px solid #D9D9D9;
+                display: flex;
+                align-items: center;
+                height: 100%;
+                justify-content: space-between;
+
+                div:nth-child(1) {
+                    color: #000000;
+                    font-weight: 500;
+                    font-size: 15px;
+
+                }
+
+                div:nth-child(2) {
+                    color: #A6A6A6;
+                    font-weight: 400;
+                    font-size: 12px;
+                    margin-right: 17px;
 
+                }
             }
         }
     }

src/view/iframe/treasure-hunt/components/open-box.vue

@@ -1,19 +1,21 @@
 <template>
-    <div class="background"></div>
-    <!-- 开奖页 -->
-    <div class="content">
-
-        <img :src="require('@/assets/img/icon-silver-open-box.png')" alt="" />
-        <div class="mark">
-            <p>You Win</p>
-            <div class="money">$0.22</div>
-            <div class="mark2">
-                <img :src="require('@/assets/img/icon-silver-open-box.png')" alt="" />
-                <div>14872 SHBI stored in your DeNet account</div>
-            </div>
+    <div>
+        <div class="background"></div>
+        <!-- 开奖页 -->
+        <div class="content">
+
+            <img :src="require('@/assets/img/icon-silver-open-box.png')" alt="" />
+            <div class="mark">
+                <p>You Win</p>
+                <div class="money">$0.22</div>
+                <div class="mark2">
+                    <img :src="require('@/assets/img/icon-silver-open-box.png')" alt="" />
+                    <div>14872 SHBI stored in your DeNet account</div>
+                </div>
 
+            </div>
+            <v-btn :txt="'OK'" :font-size="'16px'" class="btn" :icon="false"></v-btn>
         </div>
-        <v-btn :txt="'OK'" :font-size="'16px'" class="btn" :icon="false"></v-btn>
     </div>
 </template>
 <script setup>

src/view/iframe/treasure-hunt/components/toast.vue

@@ -0,0 +1,80 @@
+<template>
+    <div class="content" v-show="show">
+        <div class="mark">
+            <div class="background"></div>
+            <img :src="icon" alt="">
+            <span>{{ txt }}</span>
+        </div>
+    </div>
+</template>
+<script setup>
+import { defineProps, watch, reactive } from "vue";
+
+let props = defineProps({
+    txt: {
+        type: String,
+        default: ''
+    },
+
+    icon: {
+        type: String,
+        default: require('@/assets/svg/icon-while-yes.svg')
+    },
+    show: {
+        type: Boolean,
+        default: false
+    },
+})
+
+
+</script>
+<style lang="scss" scoped>
+.content {
+    position: fixed;
+    width: 375px;
+    height: 500px;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    top: 0;
+
+    .mark {
+        height: 39px;
+        top: 50%;
+        width: fit-content;
+        color: #FFFFFF;
+        border-radius: 44px;
+        overflow: hidden;
+        position: relative;
+
+        display: flex;
+        align-items: center;
+        padding: 0 13px;
+
+        img {
+            z-index: 2;
+            width: 15px;
+            height: 15px;
+            margin-right: 6px;
+        }
+
+        span {
+            z-index: 2;
+            font-weight: 600;
+            font-size: 14px;
+            color: #fff;
+        }
+
+        .background {
+            z-index: 1;
+            width: 100%;
+            left: 0;
+            top: 0;
+            height: 100%;
+            position: absolute;
+            background: rgba(0, 0, 0, 0.8);
+        }
+    }
+
+}
+</style>

src/view/iframe/treasure-hunt/index.vue

@@ -2,14 +2,14 @@
     <v-cover v-if="state.page == '封面页'"></v-cover>
     <v-invite v-if="state.page == '邀请页'"></v-invite>
     <v-result v-if="state.page == '开奖页'"></v-result>
-    <!-- <open-box v-if="state.page == '开奖'"></open-box> -->
+
 </template>
 <script setup>
 import { reactive, provide } from 'vue'
 import VCover from '@/view/iframe/treasure-hunt/cover.vue'
 import VInvite from '@/view/iframe/treasure-hunt/invite.vue'
 import VResult from '@/view/iframe/treasure-hunt/result.vue'
-// import OpenBox from '@/view/iframe/treasure-hunt/components/dialog.vue'
+
 let state = reactive({
     page: '邀请页'
 })

src/view/iframe/treasure-hunt/invite.vue

@@ -4,8 +4,8 @@
         <v-head></v-head>
         <div class="box-process">
             <div class="item" v-for="item, i in state.boxs">
-                <hover-tip :txt="item.txt" v-show="item.show"></hover-tip>
-                <img :src="item.icon" alt="" @mouseenter="mouseItem($event, i)" />
+                <hover-tip :txt="item.txt" v-show="item.show || item.is_open"></hover-tip>
+                <img :src="item.icon" alt="" @mouseenter="mouseItem(i)" @mouseleave="mouseLeaveItem(i)" />
             </div>
             <div class="line">
                 <div class="full"></div>
@@ -23,7 +23,7 @@
     </div>
 
     <div class="area-nav">
-        <div class="item" :class="{ active: state.tab_index == i }" @click="clickSwicthTab(i)"
+        <div class="item" :class="{ active: state.tab_index == i }" @click="state.tab_index = i"
             v-for="item, i in state.tabs">
             {{ item.txt }}
         </div>
@@ -57,21 +57,23 @@ let gold_close_box = require('@/assets/img/icon-gold-close-box.png')
 state.boxs = [
     {
         txt: '0/1',
-        icon: silver_close_box
+        icon: silver_close_box,
+        is_open: false
     },
     {
         txt: '123',
-        icon: silver_close_box
+        icon: silver_close_box,
+        is_open: false
     },
     {
         txt: '123',
-        icon: silver_close_box
+        icon: silver_close_box,
+        is_open: true
     }
 ]
 
 
 
-
 // ---- tab区域 ----
 state.tab_index = 0
 state.tabs = [{
@@ -80,7 +82,20 @@ state.tabs = [{
     txt: 'invited'
 }]
 
-
+state.success_message_list = [{
+    name: '1',
+    date: Date.now(),
+}, {
+    name: '2',
+    date: Date.now(),
+},
+{
+    name: '3',
+    date: Date.now(),
+}, {
+    name: '4',
+    date: Date.now(),
+}]
 
 watch(state, () => {
     if (content_success_message && content_success_message.value) {
@@ -90,34 +105,18 @@ watch(state, () => {
         dom.style.animationDuration = s + 's'
     }
 })
-const clickSwicthTab = (tab) => {
-    state.tab_index = tab
-}
 
-onMounted(() => {
-    setTimeout(() => {
-        state.success_message_list = [{
-            name: '1',
-            date: Date.now(),
-        }, {
-            name: '2',
-            date: Date.now(),
-        },
-        {
-            name: '3',
-            date: Date.now(),
-        }, {
-            name: '4',
-            date: Date.now(),
-        }]
-    })
-
-})
 
-const mouseItem = (e) => {
-    console.log(e)
 
+onMounted(() => {
+    state.line_scale = 3
+})
 
+const mouseItem = (i) => {
+    state.boxs[i].show = true
+}
+const mouseLeaveItem = (i) => {
+    state.boxs[i].show = false
 }
 
 const mouseOver = () => {
@@ -189,7 +188,7 @@ const mouseLeave = () => {
             border-radius: 100px;
             overflow: hidden;
             left: 13px;
-            top: 38px;
+            top: 45px;
 
             .full {
                 position: absolute;
@@ -217,7 +216,7 @@ const mouseLeave = () => {
             animation: rolling 18s linear infinite;
 
             .success-message {
-                cursor: auto;
+                cursor: pointer;
                 width: fit-content;
                 height: 30px;
                 padding: 0 9px;