|
@@ -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 {
|