|
|
@@ -1,20 +1,424 @@
|
|
|
<template>
|
|
|
- <div class="main_app">
|
|
|
- <h1> {{count}} {{user.name}}</h1>
|
|
|
- </div>
|
|
|
+ <div class="page-wrapper" ref="pageWrapper" @scroll="pageScroll">
|
|
|
+ <template v-if="isLogin && homeVisibility">
|
|
|
+ <div class="nav-bar">
|
|
|
+ <div class="item left">
|
|
|
+ <img :src="require('../assets/svg/icon-denet-logo.svg')" />
|
|
|
+ DeNet
|
|
|
+ </div>
|
|
|
+ <div class="item right" @click="showTransactions">
|
|
|
+ <img :src="require('../assets/svg/icon-option-list.svg')" />
|
|
|
+ Transactions
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <img
|
|
|
+ :src="require('../assets/svg/icon-money.svg')"
|
|
|
+ class="icon-money"
|
|
|
+ />
|
|
|
+ <div class="amount">$3.75</div>
|
|
|
+ <div class="withdraw-btn" @click="clickWithdraw">Withdraw</div>
|
|
|
+ <div class="msg">(Paypal charges $0.25 fee)</div>
|
|
|
+ </div>
|
|
|
+ <div class="tab-bar">
|
|
|
+ <div
|
|
|
+ class="tab-item"
|
|
|
+ :class="{ active: currentTabIndex == index }"
|
|
|
+ v-for="(item, index) in tabList"
|
|
|
+ :key="index"
|
|
|
+ @click="clickTab(item, index)"
|
|
|
+ >
|
|
|
+ <img :src="item.icon" class="icon" />
|
|
|
+ {{ item.label }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="list-wrapper" ref="pageGiveList">
|
|
|
+ <div class="give-list" v-if="currentTabIndex == 0">
|
|
|
+ <div
|
|
|
+ class="cell"
|
|
|
+ v-for="(item, index) in giveList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="img-wrapper">
|
|
|
+ <img
|
|
|
+ class="icon-avatar"
|
|
|
+ src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ class="icon-give"
|
|
|
+ :src="
|
|
|
+ require('../assets/svg/icon-giveaways.svg')
|
|
|
+ "
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="info-wrapper">
|
|
|
+ <div class="left">
|
|
|
+ <div class="nickname">Benedict22</div>
|
|
|
+ <div class="time">03-12 13:36</div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="msg">$0.51</div>
|
|
|
+ <img
|
|
|
+ class="icon"
|
|
|
+ :src="
|
|
|
+ require('../assets/svg/icon-cell-arrow-right.svg')
|
|
|
+ "
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="more-list" v-else>
|
|
|
+ <div
|
|
|
+ class="cell"
|
|
|
+ v-for="(item, index) in moreTabList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="img-wrapper">
|
|
|
+ <img class="icon" :src="item.icon" />
|
|
|
+ </div>
|
|
|
+ <div class="info-wrapper">
|
|
|
+ <div class="left">
|
|
|
+ {{ item.label }}
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <img
|
|
|
+ class="icon"
|
|
|
+ :src="
|
|
|
+ require('../assets/svg/icon-cell-arrow-right.svg')
|
|
|
+ "
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <option-login
|
|
|
+ v-if="!isLogin"
|
|
|
+ @loginSuccess="loginSuccess" />
|
|
|
+ <option-transactions
|
|
|
+ v-if="isLogin && !homeVisibility && transactionsVisibility"
|
|
|
+ @showHome="onShowHome" />
|
|
|
+ <option-withdraw
|
|
|
+ v-if="isLogin && !homeVisibility && optionWithdraw"
|
|
|
+ @back="withdrawBack" />
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
- import {ref, reactive} from 'vue';
|
|
|
- let count = ref(0);
|
|
|
- const user = reactive({ name: "test" });
|
|
|
-</script>
|
|
|
+/* eslint-disable */
|
|
|
+import { ref, reactive, onMounted } from "vue";
|
|
|
+import optionTransactions from "./components/options-transactions";
|
|
|
+import optionLogin from "./components/option-login.vue";
|
|
|
+import optionWithdraw from "./components/option-withdraw.vue";
|
|
|
+
|
|
|
+let pageWrapper = ref(null);
|
|
|
+let pageGiveList = ref(null);
|
|
|
+
|
|
|
+let isLogin = ref(false);
|
|
|
+let homeVisibility = ref(false);
|
|
|
+let transactionsVisibility = ref(false);
|
|
|
+let withdrawVisibility = ref(false);
|
|
|
+
|
|
|
+let currentTabIndex = ref(0);
|
|
|
+let giveList = ref([]);
|
|
|
+
|
|
|
+let moreTabList = ref([
|
|
|
+ {
|
|
|
+ icon: require("../assets/svg/icon-twitter.svg"),
|
|
|
+ label: "Twitter contact",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: require("../assets/svg/icon-about.svg"),
|
|
|
+ label: "About",
|
|
|
+ },
|
|
|
+]);
|
|
|
+
|
|
|
+let tabList = ref([
|
|
|
+ {
|
|
|
+ icon: require("../assets/svg/icon-giveaways.svg"),
|
|
|
+ label: "Giveaways",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: require("../assets/svg/icon-more.svg"),
|
|
|
+ label: "More",
|
|
|
+ },
|
|
|
+]);
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ giveList.value.length = 100;
|
|
|
+});
|
|
|
+const clickTab = (params, index) => {
|
|
|
+ currentTabIndex.value = index;
|
|
|
+ console.log(params, index);
|
|
|
+};
|
|
|
+
|
|
|
+const onShowHome = () => {
|
|
|
+ if (!homeVisibility.value) {
|
|
|
+ if (transactionsVisibility.value) {
|
|
|
+ transactionsVisibility.value = false;
|
|
|
+ }
|
|
|
+ homeVisibility.value = true;
|
|
|
+ }
|
|
|
+};
|
|
|
|
|
|
-<script>
|
|
|
+const withdrawBack = () => {
|
|
|
+ if (!homeVisibility.value) {
|
|
|
+ if (withdrawVisibility.value) {
|
|
|
+ withdrawVisibility.value = false;
|
|
|
+ }
|
|
|
+ homeVisibility.value = true;
|
|
|
+ }
|
|
|
+};
|
|
|
|
|
|
+const loginSuccess = () => {
|
|
|
+ isLogin.value = true;
|
|
|
+ onShowHome();
|
|
|
+};
|
|
|
+
|
|
|
+const showTransactions = () => {
|
|
|
+ homeVisibility.value = false;
|
|
|
+ transactionsVisibility.value = true;
|
|
|
+};
|
|
|
+
|
|
|
+const clickWithdraw = () => {
|
|
|
+ homeVisibility.value = false;
|
|
|
+ withdrawVisibility.value = true;
|
|
|
+};
|
|
|
+
|
|
|
+const pageScroll = (e) => {
|
|
|
+ let wrapperHeight = pageWrapper.value.offsetHeight;
|
|
|
+ let pageGiveListHeight = pageGiveList.value.offsetHeight;
|
|
|
+ let scrollTop = e.target.scrollTop || 0;
|
|
|
+ let loadMore = false;
|
|
|
+ if (
|
|
|
+ loadMore.value === false &&
|
|
|
+ wrapperHeight + scrollTop >= pageGiveListHeight
|
|
|
+ ) {
|
|
|
+ // loadMore = true;
|
|
|
+ // pageData.pageNum++;
|
|
|
+ // getListData((res) => {
|
|
|
+ // if (res.data.length) {
|
|
|
+ // loadMore = false;
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ }
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
-.main_app {
|
|
|
+<style lang="scss" scoped>
|
|
|
+.page-wrapper {
|
|
|
+ width: 375px;
|
|
|
+ height: 600px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow-y: scroll;
|
|
|
+
|
|
|
+ .nav-bar {
|
|
|
+ padding: 14px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 13px;
|
|
|
+ cursor: pointer;
|
|
|
+ img {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .left {
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ color: #b6b6b6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ margin-top: 30px;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .icon-money {
|
|
|
+ width: 70px;
|
|
|
+ height: 70px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .amount {
|
|
|
+ margin-top: 16px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 42px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .withdraw-btn {
|
|
|
+ background: rgba(56, 154, 255, 0.01);
|
|
|
+ border: 1px solid #ffb443;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 120px;
|
|
|
+ height: 38px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 38px;
|
|
|
+ border-radius: 100px;
|
|
|
+ color: #ffb443;
|
|
|
+ display: inline-block;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .msg {
|
|
|
+ margin-top: 10px;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #b6b6b6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-bar {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 25px;
|
|
|
+ position: sticky;
|
|
|
+ position: -webkit-sticky;
|
|
|
+ top: 0px;
|
|
|
+ z-index: 1000;
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ .tab-item {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 17px 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-bottom: 1px solid #d1d1d1;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ margin-right: 5px;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .active {
|
|
|
+ border-bottom: 2px solid #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-wrapper {
|
|
|
+ .give-list {
|
|
|
+ .cell {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ height: 66px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-left: 20px;
|
|
|
+
|
|
|
+ .img-wrapper {
|
|
|
+ position: relative;
|
|
|
+ margin-right: 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .icon-avatar {
|
|
|
+ width: 34px;
|
|
|
+ height: 34px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ .icon-give {
|
|
|
+ position: absolute;
|
|
|
+ right: -4px;
|
|
|
+ bottom: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info-wrapper {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px solid #d1d1d1;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-right: 20px;
|
|
|
+ .left {
|
|
|
+ .nickname {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+ .time {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #b6b6b6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ .msg {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .icon {
|
|
|
+ width: 18px;
|
|
|
+ height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .more-list {
|
|
|
+ .cell {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ height: 66px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-left: 20px;
|
|
|
+ .img-wrapper {
|
|
|
+ .icon {
|
|
|
+ width: 42px;
|
|
|
+ height: 42px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info-wrapper {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px solid #d1d1d1;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-right: 20px;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ .icon {
|
|
|
+ width: 18px;
|
|
|
+ height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.page-wrapper::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
}
|
|
|
</style>
|
