Przeglądaj źródła

Merge branch 'dev_1.1.7.2' of https://git.yishihui.com/DeNet/de-net into dev_1.1.7.2

# Conflicts:
#	src/view/iframe/treasure-hunt/components/invite-friends.vue
wenliming 2 lat temu
rodzic
commit
0b16919ae6

+ 109 - 5
src/view/iframe/treasure-hunt/all-receive-list.vue

@@ -1,8 +1,13 @@
 <template>
     <div class="invite-list">
         <div class="head">
-            <img height="20" :src="require('@/assets/svg/icon-back-2.svg')" @click="clickBack" />
-            <span>{{ state.detail.receiveCountWithAmount }} People Get Money</span>
+            <div class="left">
+              <img height="20" :src="require('@/assets/svg/icon-back-2.svg')" @click="clickBack" />
+              <span>{{ state.detail.receiveCountWithAmount }} People Get Money</span>
+            </div>
+            <div class="right">
+              <img @click="showOptionSheet = true" :src="sortTypeIcon" alt="">
+            </div>
         </div>
         <div class="content">
             <img v-show="state.receive.loading && state.receive.list.length == 0"
@@ -25,23 +30,56 @@
                 </div>
             </div>
         </div>
+        <div class="option-sheet" v-if="showOptionSheet">
+          <div class="item" v-for="(item, index) in optionList" :key="index" @click="clickOption(item)">
+            <img :src="item.icon" >
+            <div class="label">
+              {{item.label}}
+            </div>
+          </div>
+        </div>
+        <div class="option-mask" v-if="showOptionSheet" @click="showOptionSheet = false"></div>
     </div>
 </template>
 <script setup>
 import { receiveListV2 } from '@/http/treasure'
-import { inject, onMounted } from 'vue'
+import { inject, onMounted, ref } from 'vue'
 import { getBeforeTimeFormat } from "@/uilts/help"
 import Report from "@/log-center/log"
 
+let amountIcon = require('@/assets/svg/icon-sort-amount.svg');
+let timeIcon = require('@/assets/svg/icon-sort-time.svg');
+
+
+let sortTypeIcon = ref(amountIcon);
+
 let state = inject('state')
 state.receive = {
     end: false,
     list: []
 }
+
+let optionList = ref([
+  {
+    icon: amountIcon,
+    label: 'Amount',
+    type: 2
+  },
+  {
+    icon: timeIcon,
+    label: 'Time',
+    type: 1
+  }
+])
+
+
 let page_num = 1
 let page_size = 10
+let sortType = 2;
 let list_end = false
 
+let showOptionSheet = ref(false);
+
 const clickBack = () => {
     state.page_show = ''
 }
@@ -54,6 +92,14 @@ const clickItem = (item) => {
     window.open(`https://twitter.com/${item.userInfo.nickName}`)
 }
 
+const clickOption = (params) => {
+  showOptionSheet.value = false;
+  sortTypeIcon.value = params.icon;
+  page_num = 1;
+  sortType = params.type;
+  list()
+}
+
 function handleScroll(e) {
     if (list_end) {
         return
@@ -75,12 +121,16 @@ const list = () => {
             postId: state.postId,
             pageNum: page_num,
             pageSize: page_size,
-            sortType: 0
+            sortType
         }
     }).then((res) => {
         if (res.code == 0) {
             state.receive.loading = false
-            state.receive.list = state.receive.list.concat(res.data)
+            if(page_num < 2) {
+              state.receive.list = res.data || [];
+            } else {
+              state.receive.list = state.receive.list.concat(res.data)
+            }
             state.receive.end = true
             list_end = false
         }
@@ -91,6 +141,7 @@ const list = () => {
 .invite-list {
     width: 375px;
     height: 580px;
+    position: relative;
 
     .head {
         width: 100%;
@@ -98,10 +149,16 @@ const list = () => {
         box-sizing: border-box;
         display: flex;
         align-items: center;
+        justify-content: space-between;
 
         background: #FFFFFF;
         box-shadow: inset 0px -1px 0px #F2F2F2;
 
+        .left {
+          display: flex;
+          align-items: center;
+        }
+
         img {
             width: 24px;
             height: 24px;
@@ -195,6 +252,53 @@ const list = () => {
             }
         }
     }
+
+    .option-mask {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 800;
+    }
+    .option-sheet {
+      width: 200px;
+      background: #FFFFFF;
+      box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
+      border-radius: 14px;
+      position: absolute;
+      top: 40px;
+      right: 8px;
+      z-index: 1000;
+      cursor: pointer;
+
+      .item {
+        width: 100%;
+        height: 40px;
+        display: flex;
+        align-items: center;
+
+        img {
+          width: 24px;
+          margin: 0 12px;
+        }
+
+        .label {
+          font-weight: 500;
+          font-size: 15px;
+          width: calc(100% - 52px);
+          height: 100%;
+          display: flex;
+          align-items: center;
+        }
+      }
+
+       .item:first-child {
+          .label {
+            box-shadow: inset 0px -1px 0px #F2F2F2;
+          }
+        }
+    }
 }
 
 .loading {

+ 1 - 1
src/view/iframe/treasure-hunt/components/carousel.vue

@@ -15,7 +15,7 @@
                         @click="clickItem(item)">
                         <img :src="item.userInfo.avatarUrl" alt="" />
                         <span>Get</span> &nbsp;
-                        <span>${{ item.amountValue }}</span>
+                        <span>${{ item.amountUsdValue }}</span>
                     </div>
                 </div>
             </div>

+ 14 - 13
src/view/iframe/treasure-hunt/components/invite-layer.vue

@@ -1,20 +1,22 @@
 <template>
-    <div class="layer">
-        <div>
+    <div class="layer down">
+        <div v-if="Number(state.start_task.amountValue) > 0">
             <div class="n1">
-                You Win <span>$0.02 !</span>
+                You Win <span>${{ state.start_task.usdAmountValue }} !</span>
             </div>
             <div class="n2">Invite Friends to Open the Chest!</div>
         </div>
-        <!-- <div>
+        <div v-else>
             <div class="n1">
                 You are not <span>Real New follower</span>
             </div>
             <div class="n2">Invite Friends to Open the Chest!</div>
-        </div> -->
+        </div>
     </div>
 </template>
-<script>
+<script setup>
+import { inject } from 'vue'
+let state = inject('state')
 
 </script>
 <style scoped lang="scss">
@@ -52,14 +54,13 @@
     }
 }
 
-.up {
-    animation: frame_up 0.5s linear;
-    animation-fill-mode: forwards;
-}
-
 .down {
-    animation: frame_down 0.5s linear;
-    animation-fill-mode: forwards;
+    animation-name: frame_down, frame_up;
+    animation-duration: 0.5s, 0.5s;
+    animation-timing-function: ease, ease;
+    animation-delay: 0s, 5s;
+    animation-iteration-count: 1, 1;
+    animation-fill-mode: forwards, forwards;
 }
 
 @keyframes frame_down {

+ 6 - 2
src/view/iframe/treasure-hunt/cover.vue

@@ -99,9 +99,13 @@ const toStart = (req) => {
     }).then((res) => {
         state.usersFollowStatusList = [];
         if (res.code == 0) {
-            state.page = '开奖页'
+            // state.page = '开奖页'
+            state.init(() => {
+                state.page = '邀请页'
+                state.page_status = '显示开奖'
+                state.btn_loading = false
+            })
             state.start_task = res.data
-            state.btn_loading = false
             if (req.response) {
                 let repost_tweetId = req.response.data.data.create_tweet.tweet_results.result.rest_id
                 reSetBindRepost({

+ 1 - 0
src/view/iframe/treasure-hunt/index.vue

@@ -26,6 +26,7 @@ import Report from "@/log-center/log"
 let state = reactive({
     loading_redbag: true,
     page: '',
+    page_status: '',
     detail: {},
     oldDetail: {},
     btn_loading: false,

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

@@ -1,7 +1,7 @@
 <template>
+    <invite-layer v-if="state.page_status == '显示开奖'"></invite-layer>
     <all-receive-list v-if="state.page_show == '总邀请者页'"></all-receive-list>
     <div v-show="state.page_show != '总邀请者页'">
-        <invite-layer></invite-layer>
         <!-- 邀请页 -->
         <div class="area-process" v-show-log="state.log_invite_show">
             <div class="area1">