[add][ui]

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

@@ -1,7 +1,7 @@
 <template>
-    <div class="btn-submit" @click="clickBtn" :class="{ 'no': loading }">
-        <img :src="require('@/assets/svg/icon-iframe-loading.svg')" alt="" class="loading" v-if="loading" />
-        <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" v-else />
+    <div class="btn-submit" @click="clickBtn" :class="{ 'no': loading, 'disabled': disabled }">
+        <img :src="require('@/assets/svg/icon-iframe-loading.svg')" alt="" class="loading" v-if="loading && icon" />
+        <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" v-if="!loading && icon" />
         <span :style="{ 'font-size': fontSize }">{{ txt }}</span>
     </div>
 </template>
@@ -19,6 +19,14 @@ defineProps({
     fontSize: {
         type: String,
         default: '20px'
+    },
+    icon: {
+        type: Boolean,
+        default: true
+    },
+    disabled: {
+        type: Boolean,
+        default: false
     }
 })
 const emit = defineEmits(['on-click'])
@@ -65,6 +73,15 @@ const clickBtn = () => {
     cursor: no-drop;
 }
 
+.disabled {
+    cursor: no-drop;
+    background: #F1F1F1;
+
+    span {
+        color: #AFAFAF;
+    }
+}
+
 @keyframes loading {
     from {
         transform: rotate(0deg);

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

@@ -0,0 +1,65 @@
+<template>
+    <div class="content">
+        <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>
+    </div>
+</template>
+<script setup>
+import { inject, defineProps, defineEmits } from 'vue'
+
+let state = inject('state')
+defineProps({
+    txt: {
+        type: String,
+        default: ''
+    }
+})
+</script>
+<style lang="scss" scoped>
+.content {
+    width: 375px;
+    height: 500px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .background {
+        background: #000000;
+        opacity: .9;
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+    }
+
+    .dialog {
+        z-index: 2;
+        width: 335px;
+        background: #FFFFFF;
+        border-radius: 15px;
+        height: 134px;
+
+        .txt {
+            color: #000000;
+            font-weight: 500;
+            font-size: 16px;
+        }
+
+        .btn {
+            border-top: 1px solid #EEEEEE;
+            width: 100%;
+            height: 52px;
+            color: #1D9BF0;
+            font-weight: 500;
+            font-size: 17px;
+            line-height: 52px;
+            text-align: center;
+
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,110 @@
+<template>
+    <div class="background"></div>
+    <!-- 开奖页 -->
+    <div class="content">
+
+        <img :src="require('@/assets/svg/icon-silver-open-box.svg')" alt="" />
+        <div class="mark">
+            <p>You Win</p>
+            <div class="money">$0.22</div>
+            <div class="mark2">
+                <img :src="require('@/assets/svg/icon-silver-open-box.svg')" 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>
+</template>
+<script setup>
+import { inject } from 'vue'
+import VBtn from '@/view/iframe/treasure-hunt/components/btn.vue'
+let state = inject('state')
+
+state.status = '新粉给钱'
+// state.status = '老粉不给钱'
+
+</script>
+<style lang="scss" scoped>
+.background {
+    background: #000000;
+    opacity: .9;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+}
+
+.content {
+    z-index: 2;
+    width: 375px;
+    height: 500px;
+    text-align: center;
+    position: relative;
+
+
+
+    img {
+        margin-top: 15px;
+    }
+
+    .mark {
+        position: absolute;
+        top: 246px;
+        width: 375px;
+
+        p {
+            margin: 0;
+            padding: 0;
+            text-align: center;
+
+        }
+
+
+        p:nth-child(1) {
+            margin-bottom: 10px;
+            color: #FFFFFF;
+            font-weight: 800;
+            font-size: 18px;
+        }
+
+        .txt {
+            color: #FFC83A;
+            font-weight: 800;
+            font-size: 24px;
+
+        }
+
+        .money {
+            color: #FFC83A;
+            font-weight: 800;
+            font-size: 34px;
+        }
+
+        .mark2 {
+            margin-top: 10px;
+            display: flex;
+            justify-content: center;
+
+            img {
+                width: 17px;
+                height: 17px;
+                margin: 0;
+            }
+
+            div {
+                color: #A9A49F;
+                font-weight: 400;
+                font-size: 12px;
+
+            }
+        }
+    }
+
+    .btn {
+        position: absolute;
+        bottom: 25px;
+        left: 15px;
+    }
+}
+</style>

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

@@ -40,8 +40,8 @@
 </template>
 <script setup>
 import { inject } from 'vue'
-import VBtn from '@/view/iframe/treasure-hunt/btn.vue'
-import VHead from '@/view/iframe/treasure-hunt/head.vue'
+import VBtn from '@/view/iframe/treasure-hunt/components/btn.vue'
+import VHead from '@/view/iframe/treasure-hunt/components/head.vue'
 let state = inject('state')
 state.cover_status = '有邀请人'
 state.cover_status = '无邀请人'

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

@@ -2,14 +2,16 @@
     <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: '开奖页'
+    page: '开奖'
 })
 provide('state', state)
 

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

@@ -39,10 +39,10 @@
 </template>
 <script setup>
 import { reactive, ref, onMounted, watch } from 'vue'
-import VHead from '@/view/iframe/treasure-hunt/head.vue'
-import InviteList from '@/view/iframe/treasure-hunt/invite-list.vue'
-import HoverTip from '@/view/iframe/treasure-hunt/hover-tip.vue'
-import InviteFriends from '@/view/iframe/treasure-hunt/invite-friends.vue'
+import VHead from '@/view/iframe/treasure-hunt/components/head.vue'
+import InviteList from '@/view/iframe/treasure-hunt/components/invite-list.vue'
+import HoverTip from '@/view/iframe/treasure-hunt/components/hover-tip.vue'
+import InviteFriends from '@/view/iframe/treasure-hunt/components/invite-friends.vue'
 
 let content_success_message = ref(null)
 

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

@@ -1,48 +1,110 @@
 <template>
     <!-- 开奖页 -->
     <div class="content">
-        <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" />
-        <p>You already followed Younan111 </p>
-        <p>Only new followers open silver chest</p>
-        <p class="txt">Invite people to</p>
-        <p class="txt">open golden chest！</p>
-        <v-btn :txt="'Invite friends for more treasures'" :font-size="'16px'"></v-btn>
+        <img :src="require('@/assets/svg/icon-silver-open-box.svg')" alt="" />
+        <div class="mark">
+            <p>You already followed Younan111 </p>
+            <template v-if="state.status == '新粉给钱'">
+                <p>You Win</p>
+                <div class="money">$0.22</div>
+                <div class="mark2">
+                    <img :src="require('@/assets/svg/icon-silver-open-box.svg')" alt="" />
+                    <div>14872 SHBI stored in your DeNet account</div>
+                </div>
+            </template>
+            <template v-if="state.status == '老粉不给钱'">
+                <p>Only new followers open silver chest</p>
+                <p class="txt">Invite people to</p>
+                <p class="txt">open golden chest！</p>
+            </template>
+        </div>
+        <v-btn :txt="'Invite friends for more treasures'" :font-size="'16px'" class="btn"></v-btn>
     </div>
 </template>
 <script setup>
 import { inject } from 'vue'
-import VBtn from '@/view/iframe/treasure-hunt/btn.vue'
+import VBtn from '@/view/iframe/treasure-hunt/components/btn.vue'
 let state = inject('state')
 
+state.status = '新粉给钱'
+// state.status = '老粉不给钱'
+
 </script>
 <style lang="scss" scoped>
 .content {
     width: 375px;
     height: 500px;
     background: linear-gradient(179.96deg, #876635 20.15%, #31251A 44.61%, #24180C 78.18%);
+    text-align: center;
+    position: relative;
 
-    p {
-        margin: 0;
-        padding: 0;
-        text-align: center;
-
+    img {
+        margin-top: 15px;
     }
 
-    p:nth-child(1) {
-        color: #A9A49F;
-        font-weight: 400;
-        font-size: 12px;
-    }
+    .mark {
+        position: absolute;
+        top: 246px;
+        width: 375px;
 
-    p:nth-child(2) {
-        color: #FFFFFF;
-        font-weight: 800;
-        font-size: 18px;
-    }
+        p {
+            margin: 0;
+            padding: 0;
+            text-align: center;
+
+        }
+
+        p:nth-child(1) {
+            color: #A9A49F;
+            font-weight: 400;
+            font-size: 12px;
+            margin-bottom: 10px;
+        }
+
+        p:nth-child(2) {
+            margin-bottom: 10px;
+            color: #FFFFFF;
+            font-weight: 800;
+            font-size: 18px;
+        }
 
-    .money {
-        color: #FFC83A;
+        .txt {
+            color: #FFC83A;
+            font-weight: 800;
+            font-size: 24px;
+
+        }
+
+        .money {
+            color: #FFC83A;
+            font-weight: 800;
+            font-size: 34px;
+        }
+
+        .mark2 {
+            margin-top: 10px;
+            display: flex;
+            justify-content: center;
+
+            img {
+                width: 17px;
+                height: 17px;
+                margin: 0;
+            }
+
+            div {
+                color: #A9A49F;
+                font-weight: 400;
+                font-size: 12px;
+
+            }
+        }
     }
 
+    .btn {
+        position: absolute;
+        bottom: 25px;
+        left: 15px;
+    }
 }
 </style>