|
@@ -1,21 +1,23 @@
|
|
|
<template>
|
|
|
<!-- 邀请页 -->
|
|
|
<div class="area-process">
|
|
|
- <v-head></v-head>
|
|
|
+ <v-head :left-data="state.detail.postUserInfo || null" :rightData="state.detail.remainAmountValue"></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 || item.is_open"></hover-tip>
|
|
|
+ <hover-tip :txt="item.txt" v-show="item.show || item.openStatus" :icon="item.hover_icon"></hover-tip>
|
|
|
<img :src="item.icon" alt="" @mouseenter="mouseItem(i)" @mouseleave="mouseLeaveItem(i)" />
|
|
|
+ <img :src="require('@/assets/img/icon-flash-active.png')" alt="" class="flash"
|
|
|
+ v-if="item.openStatus == 0 && item.taskFinishStatus == 1" />
|
|
|
</div>
|
|
|
<div class="line">
|
|
|
- <div class="full"></div>
|
|
|
+ <div class="full" ref="line_full"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="area-success-message" @mouseover="mouseOver" @mouseleave="mouseLeave">
|
|
|
<div class="content-success-message" ref="content_success_message">
|
|
|
<div class="success-message" v-for="item, index in state.success_message_list" :key="index">
|
|
|
- <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" />
|
|
|
- <span>{{ item.name }} </span>
|
|
|
+ <img :src="item.userInfo.avatarUrl" alt="" />
|
|
|
+ <span>{{ item.userInfo.nickName }} </span>
|
|
|
<span>Opened Treasure Chest</span>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -32,9 +34,11 @@
|
|
|
<invite-friends v-show="state.tab_index == 0"></invite-friends>
|
|
|
<invite-list v-show="state.tab_index == 1"></invite-list>
|
|
|
</div>
|
|
|
+
|
|
|
</template>
|
|
|
<script setup>
|
|
|
import { reactive, ref, onMounted, watch, inject } from 'vue'
|
|
|
+import { receiveList } from '@/http/treasure.js'
|
|
|
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'
|
|
@@ -43,7 +47,6 @@ let content_success_message = ref(null)
|
|
|
let state = inject('state')
|
|
|
|
|
|
// ---- 走马灯
|
|
|
-
|
|
|
state.success_message_list = []
|
|
|
|
|
|
|
|
@@ -53,25 +56,6 @@ let silver_open_box = require('@/assets/img/icon-silver-open-box.png')
|
|
|
let gold_open_box = require('@/assets/img/icon-gold-open-box.png')
|
|
|
let gold_close_box = require('@/assets/img/icon-gold-close-box.png')
|
|
|
|
|
|
-state.boxs = [
|
|
|
- {
|
|
|
- txt: '0/1',
|
|
|
- icon: silver_close_box,
|
|
|
- is_open: false
|
|
|
- },
|
|
|
- {
|
|
|
- txt: '123',
|
|
|
- icon: silver_close_box,
|
|
|
- is_open: false
|
|
|
- },
|
|
|
- {
|
|
|
- txt: '123',
|
|
|
- icon: silver_close_box,
|
|
|
- is_open: true
|
|
|
- }
|
|
|
-]
|
|
|
-
|
|
|
-
|
|
|
|
|
|
// ---- tab区域 ----
|
|
|
state.tab_index = 0
|
|
@@ -81,20 +65,6 @@ 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) {
|
|
@@ -105,12 +75,95 @@ watch(state, () => {
|
|
|
}
|
|
|
})
|
|
|
|
|
|
+state.boxs = []
|
|
|
|
|
|
-
|
|
|
+let line_full = ref(null)
|
|
|
onMounted(() => {
|
|
|
- state.line_scale = 3
|
|
|
+ state.tabs[1].txt = `invited(${state.detail.inviteCount})`
|
|
|
+
|
|
|
+ // line_full
|
|
|
+ state.detail.treasureRecords.forEach((item, index) => {
|
|
|
+ if (item.openStatus == 0) {
|
|
|
+ item.hover_icon = require('@/assets/svg/icon-user.svg')
|
|
|
+ // 最后一条
|
|
|
+ if ((index + 1) == state.detail.treasureRecords.length) {
|
|
|
+ item.icon = gold_close_box
|
|
|
+ } else {
|
|
|
+ item.icon = silver_close_box
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ item.icon = silver_open_box
|
|
|
+ item.hover_icon = require('@/assets/svg/icon-green-yes.svg')
|
|
|
+ // 最后一条
|
|
|
+ if ((index + 1) == state.detail.treasureRecords.length) {
|
|
|
+ item.icon = gold_open_box
|
|
|
+ } else {
|
|
|
+ item.icon = silver_open_box
|
|
|
+ }
|
|
|
+ }
|
|
|
+ item.txt = item.inviteProgress
|
|
|
+ state.boxs.push(item)
|
|
|
+ })
|
|
|
+
|
|
|
+ receiveList({
|
|
|
+ params: {
|
|
|
+ postId: state.postId,
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ }
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ state.success_message_list = res.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ btnStatus()
|
|
|
})
|
|
|
|
|
|
+const setLineFull = (n) => {
|
|
|
+ if (n == 0) {
|
|
|
+ line_full.value.style.width = '0px'
|
|
|
+ } else if (n == 1) {
|
|
|
+ line_full.value.style.width = '80px'
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const btnStatus = () => {
|
|
|
+ // 没有邀请的时候
|
|
|
+ if (state.boxs[0].taskFinishStatus == 0) {
|
|
|
+ state.open_btn.txt = 'Invite a friend to open the chest'
|
|
|
+ state.open_btn.disabled = true
|
|
|
+ setLineFull(0)
|
|
|
+ }
|
|
|
+ // 第二个箱子未完成
|
|
|
+ if (state.boxs[1].taskFinishStatus == 0) {
|
|
|
+ state.open_btn.txt = 'Invite 3 friends to open the chest'
|
|
|
+ state.open_btn.disabled = true
|
|
|
+ }
|
|
|
+ // 第三个箱子未完成
|
|
|
+ if (state.boxs[1].taskFinishStatus == 0) {
|
|
|
+ state.open_btn.txt = 'Invite 6 friends to open the chest'
|
|
|
+ state.open_btn.disabled = true
|
|
|
+ }
|
|
|
+
|
|
|
+ let open_num = 0
|
|
|
+ // 有打开的箱子 Open the chest
|
|
|
+ state.boxs.forEach(item => {
|
|
|
+ if (item.taskFinishStatus == 1 && item.openStatus == 0) {
|
|
|
+ state.open_btn.txt = 'Open the Chest'
|
|
|
+ state.open_btn.disabled = false
|
|
|
+ }
|
|
|
+
|
|
|
+ // 三个箱子全部打开了
|
|
|
+ if (item.openStatus == 1) {
|
|
|
+ open_num++
|
|
|
+ }
|
|
|
+ if (open_num == state.boxs.length) {
|
|
|
+ state.open_btn.txt = 'All Chests are Open'
|
|
|
+ state.open_btn.disabled = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
const mouseItem = (i) => {
|
|
|
state.boxs[i].show = true
|
|
|
}
|
|
@@ -147,16 +200,26 @@ const mouseLeave = () => {
|
|
|
top: 32px;
|
|
|
left: 13px;
|
|
|
|
|
|
+ img {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+
|
|
|
.item {
|
|
|
z-index: 2;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
position: relative;
|
|
|
- }
|
|
|
|
|
|
- img {
|
|
|
- width: 60px;
|
|
|
- height: 60px;
|
|
|
+ .flash {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.item:nth-child(1) {
|
|
@@ -180,7 +243,7 @@ const mouseLeave = () => {
|
|
|
}
|
|
|
|
|
|
.line {
|
|
|
- width: 330px;
|
|
|
+ width: 300px;
|
|
|
height: 4px;
|
|
|
background: rgba(255, 210, 59, 0.2);
|
|
|
position: absolute;
|
|
@@ -194,7 +257,7 @@ const mouseLeave = () => {
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
height: 4px;
|
|
|
- width: 100px;
|
|
|
+ width: 80px;
|
|
|
background: #FFD23B;
|
|
|
}
|
|
|
}
|