feat(新页面): 美元提现页
This commit is contained in:
hzj
parent
8fdd0ab198
commit
afd54b4988
BIN
src/assets/icon/arrowBackBlack.png
Normal file
BIN
src/assets/icon/arrowBackBlack.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 514 B |
@ -1,7 +1,247 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>1111111</div>
|
<div class="fullPage">
|
||||||
|
<GeneralHeader
|
||||||
|
style="width: 100%"
|
||||||
|
title="Cash out"
|
||||||
|
color="color: rgba(0, 0, 0, 0.80)"
|
||||||
|
backImg="/src/assets/icon/arrowBackBlack.png"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div style="padding: 16px; height: 150vh">
|
||||||
|
<!-- 信息部分 -->
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div style="font-weight: 600">Information</div>
|
||||||
|
<div style="display: flex; align-items: center" @click="lookDetails">
|
||||||
|
<div style="color: rgba(0, 0, 0, 0.4)">Details</div>
|
||||||
|
<img src="../../../assets/icon/arrow.png" alt="" style="width: 6vw" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
background-color: white;
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: 12px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<span style="font-weight: 510; font-size: 0.8em">Available salary: </span>
|
||||||
|
<span style="font-weight: 700; color: #333">12345645</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 银行帐号信息 -->
|
||||||
|
<div>
|
||||||
|
<div style="display: flex; align-items: center; margin-bottom: 10px">
|
||||||
|
<div style="font-weight: 600">KYC</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
background-color: white;
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: 12px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<!-- 未上传银行卡信息 -->
|
||||||
|
<div
|
||||||
|
v-if="!hasBankCard"
|
||||||
|
style="display: flex; justify-content: space-between; align-items: center"
|
||||||
|
>
|
||||||
|
<span style="font-weight: 510; font-size: 1em">Complete information</span>
|
||||||
|
<img src="../../../assets/icon/arrow.png" alt="" style="width: 6vw" />
|
||||||
|
</div>
|
||||||
|
<!-- 获取到银行卡信息 -->
|
||||||
|
<div v-else style="width: 100%; display: flex; flex-direction: column; gap: 8px">
|
||||||
|
<!-- 图片 -->
|
||||||
|
<div style="display: flex; justify-content: space-between; align-items: center">
|
||||||
|
<span style="font-weight: 510; font-size: 1em">Passport/ID card:(3/3)</span>
|
||||||
|
<img src="../../../assets/icon/arrow.png" alt="" style="width: 6vw" />
|
||||||
|
</div>
|
||||||
|
<div style="display: flex; align-items: center; gap: 4px">
|
||||||
|
<div
|
||||||
|
style="width: 10vw; aspect-ratio: 1/1; border-radius: 4px; background: #ededed"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
style="width: 10vw; aspect-ratio: 1/1; border-radius: 4px; background: #ededed"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
style="width: 10vw; aspect-ratio: 1/1; border-radius: 4px; background: #ededed"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 卡号 -->
|
||||||
|
<div style="font-weight: 500">Contact number:</div>
|
||||||
|
<div style="color: rgba(0, 0, 0, 0.4); font-weight: 600; font-size: 0.8em">
|
||||||
|
123-456-789-1234
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 备注信息 -->
|
||||||
|
<div style="font-weight: 500">Other description:</div>
|
||||||
|
<div style="color: rgba(0, 0, 0, 0.4); font-weight: 600; font-size: 0.8em">
|
||||||
|
asdfasdfasdfasdf asfasfsaasdasdfasdfasdfa sfasfasfasfasfsdasdfasdfasf asdfafdsa asdf
|
||||||
|
asdasddsasdsadads
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 提现按钮 -->
|
||||||
|
<div style="display: flex; justify-content: center; align-items: center">
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
width: 80%;
|
||||||
|
border-radius: 32px;
|
||||||
|
background: linear-gradient(135deg, #d1ced6 2.82%, #7c7882 99.15%);
|
||||||
|
padding: 12px;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 590;
|
||||||
|
text-align: center;
|
||||||
|
"
|
||||||
|
:style="{
|
||||||
|
background: hasBankCard
|
||||||
|
? 'linear-gradient(135deg, #BB92FF 2.82%, #8B45FF 99.15%), linear-gradient(135deg, #D1CED6 2.82%, #7C7882 99.15%)'
|
||||||
|
: 'linear-gradient(135deg, #D1CED6 2.82%, #7C7882 99.15%)',
|
||||||
|
}"
|
||||||
|
@click="CashOut"
|
||||||
|
>
|
||||||
|
Cash out
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 弹窗遮罩层 -->
|
||||||
|
<maskLayer :maskLayerShow="maskLayerShow" @click="maskLayerShow = false">
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
"
|
||||||
|
@click.stop
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
width: 80%;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div style="font-weight: 800; font-size: 1.2em">Tips</div>
|
||||||
|
<div style="color: rgba(0, 0, 0, 0.4); font-weight: 600; font-size: 0.9em">
|
||||||
|
Please fill in the information carefully. You can only withdraw cash after the
|
||||||
|
information is completed.
|
||||||
|
</div>
|
||||||
|
<div style="color: rgba(0, 0, 0, 0.4); font-weight: 600; font-size: 0.7em">
|
||||||
|
*lf there is a problem with the card number and the transfer cannot be made, it will
|
||||||
|
result in the review being.
|
||||||
|
</div>
|
||||||
|
<div style="display: flex; justify-content: center; align-items: center">
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
padding: 12px 20px;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: linear-gradient(
|
||||||
|
152deg,
|
||||||
|
rgba(198, 112, 255, 0.8) 7.01%,
|
||||||
|
rgba(119, 38, 255, 0.8) 92.99%
|
||||||
|
);
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 800;
|
||||||
|
"
|
||||||
|
@click="Receive"
|
||||||
|
>
|
||||||
|
Receive
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</maskLayer>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup></script>
|
<script setup>
|
||||||
|
import GeneralHeader from '@/components/GeneralHeader.vue'
|
||||||
|
import maskLayer from '@/components/MaskLayer.vue'
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
import { ref, onMounted, computed } from 'vue'
|
||||||
|
|
||||||
|
const maskLayerShow = ref(false)
|
||||||
|
|
||||||
|
const bankCardInfo = ref({
|
||||||
|
id: '',
|
||||||
|
})
|
||||||
|
const hasBankCard = computed(() => {
|
||||||
|
return Object.keys(bankCardInfo.value).length > 0
|
||||||
|
})
|
||||||
|
|
||||||
|
// 点击按钮
|
||||||
|
const CashOut = () => {
|
||||||
|
if (hasBankCard.value) {
|
||||||
|
} else {
|
||||||
|
maskLayerShow.value = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 关闭提示信息
|
||||||
|
const Receive = () => {
|
||||||
|
maskLayerShow.value = false
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
* {
|
||||||
|
color: rgba(0, 0, 0, 0.8);
|
||||||
|
font-family: 'SF Pro Text';
|
||||||
|
}
|
||||||
|
|
||||||
|
.fullPage {
|
||||||
|
width: 100vw;
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #fff;
|
||||||
|
background-image: url(/src/assets/images/secondBg.png);
|
||||||
|
background-size: 100% auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 360px) {
|
||||||
|
* {
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 360px) {
|
||||||
|
* {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 768px) {
|
||||||
|
* {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1024px) {
|
||||||
|
* {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user