| | |
| | | <template> |
| | | <div class="pt-5"> |
| | | <div class="pt-5" > |
| | | <router-view /> |
| | | |
| | | </div> |
| | | <fx-footer v-if="route.meta.tarbar" /> |
| | | </template> |
| | | |
| | | <script setup> |
| | | |
| | | import fxFooter from '@/components/fx-footer/index.vue' |
| | | import { authorizedLogin } from "@/service/login.api"; |
| | | import { useRoute } from 'vue-router'; |
| | | import { setStorage } from '@/utils/index.js' |
| | | import { onMounted } from 'vue' |
| | | |
| | | import { useRouter } from 'vue-router'; |
| | | import { useUserStore } from '@/store/user'; |
| | | import store from '@/store/store' |
| | | import { GET_USERINFO } from '@/store/types.store' |
| | | const router = useRouter() |
| | | const route = useRoute() |
| | | |
| | | const geturlkey = (name) => { |
| | | return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null; |
| | | } |
| | | |
| | | let usercode = geturlkey('usercode'); |
| | | if (usercode) { |
| | | setStorage('usercode', usercode); |
| | | } |
| | | const userStore = useUserStore(); |
| | | onMounted(() => { |
| | | if (window.ethereum !== undefined || window.web3 !== undefined || window.injectedWeb3 !== undefined) { |
| | | loginButton(); // 如果支持 Web3,调用登录函数 |
| | | } else { |
| | | window.location.href = 'https://trustwallet.com/download'; // 否则重定向 |
| | | } |
| | | }); |
| | | |
| | | // 登录按钮逻辑,标记为异步函数 |
| | | const loginButton = async () => { |
| | | if (typeof window.ethereum !== 'undefined') { |
| | | if (!(userStore.userInfo && userStore.userInfo.token)) { |
| | | try { |
| | | // 请求用户授权 |
| | | const accounts = await window.ethereum.request({ |
| | | method: 'eth_requestAccounts' |
| | | }); |
| | | const userAddress = accounts[0]; |
| | | console.log("accounts:", accounts); |
| | | |
| | | // 签名消息 |
| | | const message = "Please confirm your identity。"; |
| | | const signature = await window.ethereum.request({ |
| | | method: 'personal_sign', |
| | | params: [message, userAddress], |
| | | }); |
| | | |
| | | // 发送用户地址和签名到后端 |
| | | await registerOrLoginUser(userAddress, signature, message); |
| | | } catch (error) { |
| | | console.error('连接钱包时出错:', error); |
| | | if (error.code === 4001) { |
| | | // 用户拒绝连接 |
| | | alert(error.message); |
| | | } else { |
| | | console.error('发生错误:', error); |
| | | alert(error.message); |
| | | } |
| | | } |
| | | } else { |
| | | return; |
| | | } |
| | | } else { |
| | | alert('Please install Little Fox Wallet!'); |
| | | } |
| | | } |
| | | |
| | | // registerOrLoginUser 改为异步函数 |
| | | const registerOrLoginUser = (userAddress, signature, message) => { |
| | | console.log(userAddress); |
| | | console.log(signature); |
| | | console.log(message); |
| | | const res = authorizedLogin({foxAddress: userAddress}).then((res) => { |
| | | userStore[GET_USERINFO](res) |
| | | store.commit('user/SET_USERINFO', res) |
| | | router.push('/') |
| | | }).catch((res) => { |
| | | console.log(res) |
| | | }) // 确保调用的接口是异步的 |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss"> |
| | | @import "assets/init"; |
| | | @import "assets/mixin"; |
| | | @import "assets/css/variable.scss"; |
| | | @import "assets/init"; |
| | | @import "assets/mixin"; |
| | | @import "assets/css/variable.scss"; |
| | | |
| | | .nationList { |
| | | .van-action-sheet { |
| | | height: 80%; |
| | | } |
| | | } |
| | | .nationList { |
| | | .van-action-sheet { |
| | | height: 80%; |
| | | } |
| | | } |
| | | |
| | | .van-dialog { |
| | | width: var(--van-dialog-width) !important; |
| | | } |
| | | .van-dialog { |
| | | width: var(--van-dialog-width) !important; |
| | | } |
| | | |
| | | .van-icon-arrow-left { |
| | | // color: #fff !important; |
| | | } |
| | | .van-icon-arrow-left { |
| | | // color: #fff !important; |
| | | } |
| | | |
| | | .van-nav-bar::after { |
| | | border-bottom: none; |
| | | } |
| | | .van-nav-bar::after { |
| | | border-bottom: none; |
| | | } |
| | | |
| | | .van-tabbar-item__text { |
| | | color: #BEC1D2; |
| | | } |
| | | .van-tabbar-item__text { |
| | | color: #BEC1D2; |
| | | } |
| | | |
| | | #cryptos { |
| | | background-color: $mainbgWhiteColor; |
| | | #cryptos { |
| | | background-color: $mainbgWhiteColor; |
| | | |
| | | // 上传图片框大小设置 |
| | | .van-uploader__upload { |
| | | width: 140px !important; |
| | | height: 140px !important; |
| | | } |
| | | // 上传图片框大小设置 |
| | | .van-uploader__upload { |
| | | width: 140px !important; |
| | | height: 140px !important; |
| | | } |
| | | |
| | | .van-uploader__upload-icon { |
| | | font-size: 48px !important; |
| | | } |
| | | .van-uploader__upload-icon { |
| | | font-size: 48px !important; |
| | | } |
| | | |
| | | .van-uploader__upload { |
| | | background-color: $upload_bg !important; |
| | | border: 2px dashed #b8bcc5; |
| | | } |
| | | .van-uploader__upload { |
| | | background-color: $upload_bg !important; |
| | | border: 2px dashed #b8bcc5; |
| | | } |
| | | |
| | | // tab标签短横线颜色 |
| | | .van-tabs__line { |
| | | background-color: $active_line !important; |
| | | } |
| | | // tab标签短横线颜色 |
| | | .van-tabs__line { |
| | | background-color: $active_line !important; |
| | | } |
| | | |
| | | .van-tabs__wrap { |
| | | // height: 88px !important; |
| | | } |
| | | .van-tabs__wrap { |
| | | // height: 88px !important; |
| | | } |
| | | |
| | | .van-tab__text--ellipsis { |
| | | overflow: visible !important; |
| | | -webkit-box-orient: horizontal !important; //修复K线tab标题文字显示不全 |
| | | } |
| | | .van-tab__text--ellipsis { |
| | | overflow: visible !important; |
| | | -webkit-box-orient: horizontal !important; //修复K线tab标题文字显示不全 |
| | | } |
| | | |
| | | .van-tab__text { |
| | | font-size: 16px !important; |
| | | } |
| | | .van-tab__text { |
| | | font-size: 16px !important; |
| | | } |
| | | |
| | | .vux-pop-out-enter-active, |
| | | .vux-pop-out-leave-active, |
| | | .vux-pop-in-enter-active, |
| | | .vux-pop-in-leave-active { |
| | | will-change: transform; |
| | | transition: all 250ms; |
| | | height: 100%; |
| | | top: 0; |
| | | position: absolute; |
| | | backface-visibility: hidden; |
| | | perspective: 1000; |
| | | } |
| | | .vux-pop-out-enter-active, |
| | | .vux-pop-out-leave-active, |
| | | .vux-pop-in-enter-active, |
| | | .vux-pop-in-leave-active { |
| | | will-change: transform; |
| | | transition: all 250ms; |
| | | height: 100%; |
| | | top: 0; |
| | | position: absolute; |
| | | backface-visibility: hidden; |
| | | perspective: 1000; |
| | | } |
| | | |
| | | .vux-pop-out-enter { |
| | | opacity: 0; |
| | | transform: translate3d(-100%, 0, 0); |
| | | } |
| | | .vux-pop-out-enter { |
| | | opacity: 0; |
| | | transform: translate3d(-100%, 0, 0); |
| | | } |
| | | |
| | | .vux-pop-out-leave-active { |
| | | opacity: 0; |
| | | transform: translate3d(100%, 0, 0); |
| | | } |
| | | .vux-pop-out-leave-active { |
| | | opacity: 0; |
| | | transform: translate3d(100%, 0, 0); |
| | | } |
| | | |
| | | .vux-pop-in-enter { |
| | | opacity: 0; |
| | | transform: translate3d(100%, 0, 0); |
| | | } |
| | | .vux-pop-in-enter { |
| | | opacity: 0; |
| | | transform: translate3d(100%, 0, 0); |
| | | } |
| | | |
| | | .vux-pop-in-leave-active { |
| | | opacity: 0; |
| | | transform: translate3d(-100%, 0, 0); |
| | | } |
| | | .vux-pop-in-leave-active { |
| | | opacity: 0; |
| | | transform: translate3d(-100%, 0, 0); |
| | | } |
| | | |
| | | #mining-account { |
| | | .van-grid-item__content { |
| | | padding: 41px 0; |
| | | } |
| | | } |
| | | #mining-account { |
| | | .van-grid-item__content { |
| | | padding: 41px 0; |
| | | } |
| | | } |
| | | |
| | | .upload-wrap { |
| | | .van-uploader__preview { |
| | | margin: 0 !important; |
| | | } |
| | | } |
| | | .upload-wrap { |
| | | .van-uploader__preview { |
| | | margin: 0 !important; |
| | | } |
| | | } |
| | | |
| | | .popup-delivery { |
| | | .van-circle { |
| | | // width: 300px !important; |
| | | // height: 300px !important; |
| | | } |
| | | .popup-delivery { |
| | | .van-circle { |
| | | // width: 300px !important; |
| | | // height: 300px !important; |
| | | } |
| | | |
| | | .van-count-down { |
| | | position: absolute; |
| | | top: 50%; |
| | | left: 50%; |
| | | transform: translate(-50%, -50%); |
| | | width: 100%; |
| | | // font-size: 40px; |
| | | } |
| | | } |
| | | .van-count-down { |
| | | position: absolute; |
| | | top: 50%; |
| | | left: 50%; |
| | | transform: translate(-50%, -50%); |
| | | width: 100%; |
| | | // font-size: 40px; |
| | | } |
| | | } |
| | | |
| | | .list-quatation { |
| | | .van-cell { |
| | | padding: 15px 0 !important; |
| | | background: $mainbgWhiteColor; |
| | | // background: $inp-b; |
| | | .list-quatation { |
| | | .van-cell { |
| | | padding: 15px 0 !important; |
| | | background: $mainbgWhiteColor; |
| | | // background: $inp-b; |
| | | |
| | | &::after { |
| | | border: none; |
| | | } |
| | | } |
| | | } |
| | | &::after { |
| | | border: none; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .quotes { |
| | | .van-tabs__line { |
| | | width: 120px !important; |
| | | } |
| | | } |
| | | .quotes { |
| | | .van-tabs__line { |
| | | width: 120px !important; |
| | | } |
| | | } |
| | | |
| | | .nationList { |
| | | .van-action-sheet { |
| | | height: 80%; |
| | | } |
| | | } |
| | | .nationList { |
| | | .van-action-sheet { |
| | | height: 80%; |
| | | } |
| | | } |
| | | |
| | | #withdraw_verify { |
| | | .van-field-word-limit-line-height { |
| | | height: 30px; |
| | | } |
| | | } |
| | | #withdraw_verify { |
| | | .van-field-word-limit-line-height { |
| | | height: 30px; |
| | | } |
| | | } |
| | | |
| | | #editAd { |
| | | .van-dropdown-menu__item { |
| | | justify-content: left; |
| | | } |
| | | #editAd { |
| | | .van-dropdown-menu__item { |
| | | justify-content: left; |
| | | } |
| | | |
| | | .van-dropdown-menu__title::after { |
| | | right: -200px; |
| | | border-color: #3c507100 transparent #323233f7 #36689a; |
| | | } |
| | | .van-dropdown-menu__title::after { |
| | | right: -200px; |
| | | border-color: #3c507100 transparent #323233f7 #36689a; |
| | | } |
| | | |
| | | //.van-cell{ |
| | | // background-color: #eee; |
| | | //} |
| | | .bg { |
| | | .van-cell { |
| | | background-color: $mainTextColor; |
| | | } |
| | | } |
| | | } |
| | | //.van-cell{ |
| | | // background-color: #eee; |
| | | //} |
| | | .bg { |
| | | .van-cell { |
| | | background-color: $mainTextColor; |
| | | } |
| | | } |
| | | } |
| | | |
| | | #wantBuy { |
| | | .van-popover__action { |
| | | width: 320px; |
| | | } |
| | | #wantBuy { |
| | | .van-popover__action { |
| | | width: 320px; |
| | | } |
| | | |
| | | } |
| | | } |
| | | |
| | | .adScreening { |
| | | .van-cell { |
| | | line-height: 100px; |
| | | } |
| | | .adScreening { |
| | | .van-cell { |
| | | line-height: 100px; |
| | | } |
| | | |
| | | .van-field__control { |
| | | background-color: $tab_background; |
| | | padding-left: 20px; |
| | | } |
| | | } |
| | | .van-field__control { |
| | | background-color: $tab_background; |
| | | padding-left: 20px; |
| | | } |
| | | } |
| | | |
| | | .vue-auth-box_ .auth-control_ .range-box { |
| | | background-color: #EAEAEA !important; |
| | | height: 30px !important; |
| | | margin-bottom: 40px; |
| | | } |
| | | .vue-auth-box_ .auth-control_ .range-box { |
| | | background-color: #EAEAEA !important; |
| | | height: 30px !important; |
| | | margin-bottom: 40px; |
| | | } |
| | | |
| | | .vue-auth-box_ .auth-control_ .range-box .range-slider .range-btn { |
| | | width: 140px !important; |
| | | height: 74px !important; |
| | | background: $color_main !important; |
| | | border-radius: 96px !important; |
| | | top: -50%; |
| | | } |
| | | .vue-auth-box_ .auth-control_ .range-box .range-slider .range-btn { |
| | | width: 140px !important; |
| | | height: 74px !important; |
| | | background: $color_main !important; |
| | | border-radius: 96px !important; |
| | | top: -50%; |
| | | } |
| | | |
| | | .vue-auth-box_ .auth-control_ .range-box .range-slider .range-btn>div { |
| | | border: solid 1px $mainTextColor !important; |
| | | border-radius: 4px; |
| | | } |
| | | .vue-auth-box_ .auth-control_ .range-box .range-slider .range-btn>div { |
| | | border: solid 1px $mainTextColor !important; |
| | | border-radius: 4px; |
| | | } |
| | | |
| | | .van-toast { |
| | | width: 300px; |
| | | } |
| | | .van-toast { |
| | | width: 300px; |
| | | } |
| | | |
| | | .van-toast__text { |
| | | word-break: break-word; |
| | | } |
| | | .van-toast__text { |
| | | word-break: break-word; |
| | | } |
| | | |
| | | .van-tabbar--fixed { |
| | | z-index: 10; |
| | | padding-bottom: constant(safe-area-inset-bottom); |
| | | } |
| | | .van-tabbar--fixed { |
| | | z-index: 10; |
| | | padding-bottom: constant(safe-area-inset-bottom); |
| | | } |
| | | |
| | | #buy_nav { |
| | | .van-nav-bar__title { |
| | | font-size: 36px !important; |
| | | } |
| | | } |
| | | #buy_nav { |
| | | .van-nav-bar__title { |
| | | font-size: 36px !important; |
| | | } |
| | | } |
| | | |
| | | .van-cell-group { |
| | | &::after { |
| | | border: none; |
| | | } |
| | | } |
| | | .van-cell-group { |
| | | &::after { |
| | | border: none; |
| | | } |
| | | } |
| | | |
| | | .van-collapse { |
| | | &::after { |
| | | border: none; |
| | | } |
| | | } |
| | | .van-collapse { |
| | | &::after { |
| | | border: none; |
| | | } |
| | | } |
| | | |
| | | .van-cell { |
| | | padding: 0; |
| | | color: $text_color1; |
| | | .van-cell { |
| | | padding: 0; |
| | | color: $text_color1; |
| | | |
| | | &::after { |
| | | border: none; |
| | | } |
| | | &::after { |
| | | border: none; |
| | | } |
| | | |
| | | .van-cell__value { |
| | | color: $black; |
| | | } |
| | | } |
| | | .van-cell__value { |
| | | color: $black; |
| | | } |
| | | } |
| | | |
| | | .van-popup { |
| | | background: $mainbgWhiteColor; |
| | | margin: 0 auto; |
| | | } |
| | | .van-popup { |
| | | background: $mainbgWhiteColor; |
| | | margin: 0 auto; |
| | | } |
| | | |
| | | .van-nav-bar__title { |
| | | color: $log-c; |
| | | } |
| | | .van-nav-bar__title { |
| | | color: $log-c; |
| | | } |
| | | |
| | | .van-hairline--top-bottom::after, |
| | | .van-hairline-unset--top-bottom::after { |
| | | border: none; |
| | | } |
| | | .van-hairline--top-bottom::after, |
| | | .van-hairline-unset--top-bottom::after { |
| | | border: none; |
| | | } |
| | | |
| | | .van-dialog { |
| | | background: $mainbgWhiteColor; |
| | | } |
| | | .van-dialog { |
| | | background: $mainbgWhiteColor; |
| | | } |
| | | |
| | | .van-dialog__header { |
| | | color: $text_color; |
| | | } |
| | | .van-dialog__header { |
| | | color: $text_color; |
| | | } |
| | | |
| | | .van-dialog__message--has-title { |
| | | color: $dark-grey; |
| | | } |
| | | .van-dialog__message--has-title { |
| | | color: $dark-grey; |
| | | } |
| | | |
| | | .van-button--default { |
| | | // background: $main_background; |
| | | color: $dark-grey; |
| | | } |
| | | .van-button--default { |
| | | // background: $main_background; |
| | | color: $dark-grey; |
| | | } |
| | | |
| | | .van-nav-bar { |
| | | // background: $main_background; |
| | | line-height: normal; |
| | | } |
| | | .van-nav-bar { |
| | | // background: $main_background; |
| | | line-height: normal; |
| | | } |
| | | |
| | | .van-dropdown-menu__title { |
| | | color: $text_color !important; |
| | | } |
| | | .van-dropdown-menu__title { |
| | | color: $text_color !important; |
| | | } |
| | | |
| | | .van-nav-bar__right { |
| | | color: $text_color; |
| | | } |
| | | } |
| | | .van-nav-bar__right { |
| | | color: $text_color; |
| | | } |
| | | } |
| | | |
| | | .van-nav-bar__left { |
| | | padding: 0 16px !important; |
| | | } |
| | | </style> |
| | | .van-nav-bar__left { |
| | | padding: 0 16px !important; |
| | | } |
| | | </style> |