[liang]
3 years ago
43 changed files with 101023 additions and 89 deletions
@ -0,0 +1,104 @@ |
|||
<template> |
|||
<view class="showMore"> |
|||
<view class="showMoreContent" :class="collapseFlag ? 'up' : 'down'"> |
|||
<slot></slot> |
|||
</view> |
|||
<view class="showMoreTool"> |
|||
<view class="showMoreTitle">{{ title }}</view> |
|||
<view class="showMoreIcon" :class="collapseFlag ? 'up' : 'down'" @click="collapse"></view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
const COMPONENT_NAME = 'showMore' |
|||
export default { |
|||
name: COMPONENT_NAME, |
|||
props: { |
|||
showBack: { // 是否显示返回按钮 |
|||
type: Boolean, |
|||
default() { |
|||
return true |
|||
} |
|||
}, |
|||
bgTransparent: { // 背景是否透明 |
|||
type: Boolean, |
|||
default() { |
|||
return false |
|||
} |
|||
}, |
|||
bgnum: { |
|||
type: Boolean, |
|||
default() { |
|||
return false |
|||
} |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
title: 'Show more', |
|||
collapseFlag: false, // 折叠状态 |
|||
} |
|||
}, |
|||
computed: { |
|||
|
|||
}, |
|||
mounted() { |
|||
|
|||
}, |
|||
methods: { |
|||
collapse() { |
|||
this.collapseFlag = !this.collapseFlag; |
|||
this.title = this.collapseFlag ? 'Pick up' : 'Show more' |
|||
|
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.showMoreContent { |
|||
padding-top: 16rpx; |
|||
margin-bottom: 16rpx; |
|||
// border-top: 2rpx solid #323045; |
|||
overflow: hidden; |
|||
transition: max-height 0.5s ease-in-out; |
|||
|
|||
&.up { |
|||
max-height: 500rpx; |
|||
} |
|||
|
|||
&.down { |
|||
max-height: 0; |
|||
|
|||
} |
|||
} |
|||
|
|||
.showMoreTool { |
|||
position: relative; |
|||
color: #00E8A2; |
|||
font-size: 28rpx; |
|||
|
|||
.showMoreIcon { |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
|
|||
position: absolute; |
|||
top: 4rpx; |
|||
right: 8rpx; |
|||
background-image: url(../../static/me/ic_input_arrow_down.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 32rpx; |
|||
transition: transform 0.3s; |
|||
|
|||
&.up { |
|||
transform: rotate(-180deg); |
|||
} |
|||
|
|||
&.down { |
|||
transform: rotate(0deg); |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,101 @@ |
|||
<template> |
|||
<view class="transaction"> |
|||
<view class="tab"> |
|||
<view class="buy uni-bg-up" :class="type == 2 ? 'normal' : ''" @click="onChangeType(1)">买入</view> |
|||
<view class="sell uni-bg-down " :class="type == 1 ? 'normal' : ''" @click="onChangeType(2)">卖出</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
const COMPONENT_NAME = 'transaction' |
|||
export default { |
|||
name: COMPONENT_NAME, |
|||
props: { |
|||
showBack: { // 是否显示返回按钮 |
|||
type: Boolean, |
|||
default() { |
|||
return true |
|||
} |
|||
}, |
|||
bgTransparent: { // 背景是否透明 |
|||
type: Boolean, |
|||
default() { |
|||
return false |
|||
} |
|||
}, |
|||
bgnum: { |
|||
type: Boolean, |
|||
default() { |
|||
return false |
|||
} |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
title: 'Show more', |
|||
collapseFlag: false, // 折叠状态 |
|||
} |
|||
}, |
|||
computed: { |
|||
i18n() { |
|||
return this.$t("markets"); |
|||
}, |
|||
}, |
|||
mounted() { |
|||
|
|||
}, |
|||
methods: { |
|||
collapse() { |
|||
this.collapseFlag = !this.collapseFlag; |
|||
this.title = this.collapseFlag ? 'Pick up' : 'Show more' |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.showMoreContent { |
|||
padding-top: 16rpx; |
|||
margin-bottom: 16rpx; |
|||
// border-top: 2rpx solid #323045; |
|||
overflow: hidden; |
|||
transition: max-height 0.5s ease-in-out; |
|||
|
|||
&.up { |
|||
max-height: 500rpx; |
|||
} |
|||
|
|||
&.down { |
|||
max-height: 0; |
|||
|
|||
} |
|||
} |
|||
|
|||
.showMoreTool { |
|||
position: relative; |
|||
color: #00E8A2; |
|||
font-size: 28rpx; |
|||
|
|||
.showMoreIcon { |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
|
|||
position: absolute; |
|||
top: 4rpx; |
|||
right: 8rpx; |
|||
background-image: url(../../static/me/ic_input_arrow_down.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 32rpx; |
|||
transition: transform 0.3s; |
|||
|
|||
&.up { |
|||
transform: rotate(-180deg); |
|||
} |
|||
|
|||
&.down { |
|||
transform: rotate(0deg); |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,82 @@ |
|||
<template> |
|||
<view class="main"> |
|||
<!-- nav --> |
|||
<navigation>{{ 'BTC/USDT' }}<view slot="right" class="right" @click="goto('kLine')"></view> |
|||
</navigation> |
|||
<view class="content"> |
|||
<view class="transactionSide"> |
|||
<!-- <tradePanel ref="trade" :type="type"></tradePanel> --> |
|||
<transaction></transaction> |
|||
</view> |
|||
<view class="positionSide"> |
|||
<!-- <positionList v-on:depthChange="depthChange"></positionList> --> |
|||
</view> |
|||
</view> |
|||
<view class="uni-gap"></view> |
|||
<!-- <entrustOrderList></entrustOrderList> --> |
|||
<!-- <uni-drawer :visible="drawerVisible" mask="false" mode="left" @close="closeDrawer"> |
|||
<marketDrawer :areaList="areaList" :marketList="marketList"></marketDrawer> |
|||
</uni-drawer> --> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import transaction from '../../components/transaction/transaction.vue'; |
|||
export default { |
|||
components: { transaction }, |
|||
name: "trade", |
|||
data() { |
|||
return { |
|||
|
|||
}; |
|||
}, |
|||
computed: { |
|||
i18n() { |
|||
return this.$t("markets"); |
|||
}, |
|||
}, |
|||
onLoad() { |
|||
|
|||
}, |
|||
onShow() { }, |
|||
methods: { |
|||
|
|||
|
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.main { |
|||
|
|||
.right { |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
position: absolute; |
|||
right: 32rpx; |
|||
font-size: 24rpx; |
|||
background-image: url(../../static/home/ic_increase.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 48rpx; |
|||
color: #FFBC1F; |
|||
} |
|||
|
|||
|
|||
.content { |
|||
margin-top: 200rpx; |
|||
padding: 40rpx; |
|||
|
|||
.transactionSide{ |
|||
width: 444rpx; |
|||
margin-left: 28rpx; |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,125 @@ |
|||
<template> |
|||
<view class="main"> |
|||
<!-- nav --> |
|||
<navigation>{{ i18n.MinePool }}</navigation> |
|||
<view class="poolContent"> |
|||
<!-- pool选择框 --> |
|||
<view class="pool-item" v-for="(item, index) in 4" :key="index"> |
|||
<u-icon class="icon" :name="'../../static/mine/img_mine01.png'" size="92rpx" width="92rpx"></u-icon> |
|||
<view class="right"> |
|||
<view class="title">0.1 BTC 30 days</view> |
|||
<view class="description">every time lock 0.1 BTC,Lock 30 Mine poolLock,to produce 300 ACTA per 1 |
|||
day</view> |
|||
</view> |
|||
<u-button class="button" @click="gotoDetails(index)" color="#00E8A2" throttleTime="500">{{ i18n.OpenMine }}</u-button> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "mine", |
|||
data() { |
|||
return { |
|||
pageState: 'coinRecharge', |
|||
coin: '', |
|||
USDTPopupShow: false, |
|||
USDTRadioValue: '', |
|||
selectNumberValue: 100, |
|||
selectMethod: '1', |
|||
}; |
|||
}, |
|||
computed: { |
|||
i18n() { |
|||
return this.$t("mine"); |
|||
}, |
|||
}, |
|||
onLoad() { |
|||
}, |
|||
onShow() { }, |
|||
methods: { |
|||
gotoDetails(index) { |
|||
console.log(index); |
|||
uni.navigateTo({ |
|||
url: `/pages/mine/mineDetails?id=${index}` |
|||
}); |
|||
}, |
|||
|
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.main { |
|||
|
|||
.poolContent { |
|||
overflow: hidden; |
|||
margin-top: 200rpx; |
|||
padding: 0 60rpx; |
|||
|
|||
|
|||
.pool-item { |
|||
position: relative; |
|||
background: #211F32; |
|||
margin-top: 32rpx; |
|||
padding: 32rpx 24rpx; |
|||
background-image: url(../../static/mine/Line.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 630rpx 2rpx; |
|||
|
|||
.icon { |
|||
display: inline-block; |
|||
width: 92rpx; |
|||
margin-top: 10rpx; |
|||
margin-right: 28rpx; |
|||
border-radius: 16rpx; |
|||
vertical-align: top; |
|||
} |
|||
|
|||
.right { |
|||
display: inline-block; |
|||
width: 460rpx; |
|||
|
|||
.title { |
|||
font-weight: 600; |
|||
width: 460rpx; |
|||
height: 52rpx; |
|||
line-height: 52rpx; |
|||
font-size: 32rpx; |
|||
} |
|||
|
|||
.description { |
|||
width: 460rpx; |
|||
font-size: 24rpx; |
|||
color: #A1A0A8; |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
.button { |
|||
height: 64rpx; |
|||
line-height:64rpx; |
|||
font-size: 28rpx; |
|||
color: #15141F !important; |
|||
margin-top: 48rpx; |
|||
border-radius: 16rpx; |
|||
text-align: center; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
&:last-child{ |
|||
margin-bottom: 80rpx; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,233 @@ |
|||
<template> |
|||
<view class="main"> |
|||
<!-- nav --> |
|||
<navigation>{{ i18n.MineDetails }}<view slot="right" class="right" @click="goto('mineRecord')">{{ i18n.Record }} |
|||
</view> |
|||
</navigation> |
|||
<view class="content"> |
|||
<view class="card"> |
|||
<view class="top"> |
|||
<u-icon class="icon" :name="'../../static/mine/coinLogo.png'" size="80rpx" width="80rpx"></u-icon> |
|||
<view class="title">{{ i18n.YourBTC }}</view> |
|||
<view class="coinValue">{{ coinValue }}</view> |
|||
</view> |
|||
<view class="bottom"> |
|||
<view class="item"> |
|||
<view class="title">{{ i18n.LockBTC }}</view> |
|||
<view class="value">0.1</view> |
|||
</view> |
|||
<view class="item"> |
|||
<view class="title">{{ i18n.dayproduce }}</view> |
|||
<view class="value">300 ACTA</view> |
|||
</view> |
|||
<view class="item"> |
|||
<view class="title">{{ i18n.MinLockTime }}</view> |
|||
<view class="value">30{{ i18n.days }}</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
<input class="input" v-model="codeValue" focus :placeholder="i18n.invuteCode" |
|||
placeholder-style="color:#A1A0A8" /> |
|||
<view class="allItem"> |
|||
<input class="input" v-model="coinQuantity" :placeholder="i18n.lockBTC" |
|||
placeholder-style="color:#A1A0A8" /> |
|||
<view class="all">{{ i18n.ALL }}</view> |
|||
</view> |
|||
|
|||
<u-button class="button" color="#00E8A2" throttleTime="500" :disabled="true">{{ i18n.LockBTCBtn }} |
|||
</u-button> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import uniCopy from '@/utils/uni-copy' |
|||
export default { |
|||
name: "mineDetails", |
|||
data() { |
|||
return { |
|||
coinValue: 1000.001, |
|||
codeValue: '', |
|||
coinQuantity: '', |
|||
}; |
|||
}, |
|||
computed: { |
|||
i18n() { |
|||
return this.$t("mine"); |
|||
}, |
|||
}, |
|||
onLoad() { |
|||
}, |
|||
onShow() { }, |
|||
methods: { |
|||
goto(id) { |
|||
// console.log(id); |
|||
let url = ''; |
|||
switch (id) { |
|||
case 'mineRecord': |
|||
url = '/pages/mine/mineRecord' |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
if (url) { |
|||
// console.log(url); |
|||
uni.navigateTo({ |
|||
url, |
|||
}); |
|||
} |
|||
|
|||
}, |
|||
USDTRadioChange(e) { |
|||
console.log(e); |
|||
}, |
|||
|
|||
copyAddress(value = "") { |
|||
console.log(value) |
|||
uniCopy({ |
|||
content: value, |
|||
success: (res) => { |
|||
uni.showToast({ |
|||
title: "复制成功", |
|||
duration: 3000, |
|||
}) |
|||
}, |
|||
error: (e) => { |
|||
uni.showToast({ |
|||
title: e, |
|||
icon: 'none', |
|||
duration: 2000, |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.main { |
|||
|
|||
.right { |
|||
position: absolute; |
|||
right: 32rpx; |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.content { |
|||
overflow: hidden; |
|||
margin-top: 200rpx; |
|||
padding: 0 32rpx; |
|||
|
|||
.card { |
|||
margin-top: 40rpx; |
|||
height: 274rpx; |
|||
padding: 0 24rpx; |
|||
background-image: url(../../static/mine/bg_mine.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 686rpx 274rpx; |
|||
|
|||
.top { |
|||
display: flex; |
|||
height: 132rpx; |
|||
border-bottom: 2rpx solid rgba(255, 255, 255, 0.2); |
|||
|
|||
.icon { |
|||
margin: 0 24rpx 0 16rpx; |
|||
} |
|||
|
|||
.title { |
|||
font-size: 28rpx; |
|||
line-height: 136rpx; |
|||
} |
|||
|
|||
.coinValue { |
|||
flex: 1; |
|||
text-align: right; |
|||
font-size: 68rpx; |
|||
line-height: 144rpx; |
|||
padding-right: 20rpx; |
|||
} |
|||
} |
|||
|
|||
.bottom { |
|||
display: flex; |
|||
height: 140rpx; |
|||
padding: 0 20rpx; |
|||
|
|||
.item { |
|||
flex: 1; |
|||
|
|||
.title { |
|||
font-size: 20rpx; |
|||
line-height: 64rpx; |
|||
} |
|||
|
|||
.value { |
|||
font-size: 35rpx; |
|||
line-height: 40rpx; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
&:nth-child(1) { |
|||
text-align: left; |
|||
} |
|||
|
|||
&:nth-child(2) { |
|||
text-align: center; |
|||
} |
|||
|
|||
&:nth-child(3) { |
|||
text-align: right; |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
} |
|||
|
|||
} |
|||
|
|||
.input { |
|||
margin-top: 32rpx; |
|||
height: 112rpx; |
|||
background: #323045; |
|||
border-radius: 32rpx; |
|||
padding-left: 32rpx; |
|||
font-size: 26rpx; |
|||
color: #fff; |
|||
} |
|||
|
|||
.allItem { |
|||
position: relative; |
|||
|
|||
.all { |
|||
position: absolute; |
|||
display: inline; |
|||
font-size: 20rpx; |
|||
color: #00E8A2; |
|||
top: 44rpx; |
|||
right: 30rpx; |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
.button { |
|||
margin-top: 60rpx; |
|||
border-radius: 32rpx; |
|||
height: 112rpx; |
|||
line-height: 112rpx; |
|||
color: #15141F !important; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,80 @@ |
|||
<template> |
|||
<view class="main"> |
|||
<!-- nav --> |
|||
<navigation>{{ i18n.MinePool }}</navigation> |
|||
<!-- 数据为空格显示 --> |
|||
<u-empty :show="dataList.length === 0" marginTop="350rpx" :text="i18n.NoData" textColor="#818197" |
|||
textSize="36rpx" icon="../../static/mine/img_data.png"></u-empty> |
|||
<view class="content" v-if="dataList.length > 0"> |
|||
<view class="dataBody" v-for="(item, index) in 4" :key="index"> |
|||
<Key-value-row :keyName="i18n.BaseCoin" :value="'100BTC'" ></Key-value-row> |
|||
<Key-value-row :keyName="i18n.ProfitCoin" :value="'CEH'"></Key-value-row> |
|||
<Key-value-row :keyName="i18n.DayRebate" :value="'75000'"></Key-value-row> |
|||
<u-divider text="" lineColor="#B9C1D9"></u-divider> |
|||
<Key-value-row :keyName="i18n.RebateDay" :value="'0/120'"></Key-value-row> |
|||
<Key-value-row :keyName="i18n.RebateAmount" :value="'150000/9000000'"></Key-value-row> |
|||
<u-divider text="" lineColor="#B9C1D9"></u-divider> |
|||
<Key-value-row :keyName="i18n.AddTime" :value="'2022/08/06 14:50:34'"></Key-value-row> |
|||
<Key-value-row :keyName="i18n.ReleaseTime" :value="'2022/08/06 14:50:34'"></Key-value-row> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import KeyValueRow from '../../components/KeyValueRow/KeyValueRow.vue'; |
|||
export default { |
|||
components: { KeyValueRow }, |
|||
name: "mineRecord", |
|||
data() { |
|||
return { |
|||
dataList: [{}], |
|||
}; |
|||
}, |
|||
computed: { |
|||
i18n() { |
|||
return this.$t("mine"); |
|||
}, |
|||
}, |
|||
onLoad() { |
|||
}, |
|||
onShow() { }, |
|||
methods: { |
|||
|
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.main { |
|||
.content { |
|||
margin-top: 200rpx; |
|||
padding: 32rpx; |
|||
|
|||
.dataBody { |
|||
margin-bottom: 32rpx; |
|||
padding: 32rpx; |
|||
box-sizing: border-box; |
|||
background: #211F32; |
|||
border-radius: 20rpx; |
|||
|
|||
.text { |
|||
margin-top: 20rpx; |
|||
padding: 10rpx 16rpx; |
|||
background: #323045; |
|||
border-radius: 8rpx; |
|||
font-size: 24rpx; |
|||
color: #A1A0A8; |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,527 @@ |
|||
<template> |
|||
<view class="main"> |
|||
<!-- nav --> |
|||
<navigation>{{ i18n.Recharge }}<view slot="right" class="right" @click="goto('rechargeRecord')">{{ i18n.Record |
|||
}} |
|||
</view> |
|||
</navigation> |
|||
<!-- headBtn --> |
|||
<view class="head"> |
|||
<view class="headItem" @click="pageState = 'coinRecharge'" |
|||
:class="{ select: pageState === 'coinRecharge' }"> |
|||
{{ i18n.CoinRecharge }} |
|||
</view> |
|||
<view class="headItem" @click="pageState = 'cashRecharge'" |
|||
:class="{ select: pageState === 'cashRecharge' }"> |
|||
{{ i18n.CashRecharge }} |
|||
</view> |
|||
</view> |
|||
<view class="coinContent" v-if="pageState === 'coinRecharge'"> |
|||
<!-- coin选择框 --> |
|||
<view class="input-item"> |
|||
<u-input class="input" v-model="coin" color="#fff" fontSize="32rpx" border="none" |
|||
:placeholder="i18n.PleaseChooseCoin"> |
|||
</u-input> |
|||
<view class="selectCoinBtn" @click="USDTPopupShow = true">USDT |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="coin-item"> |
|||
<view class="QRCode"> |
|||
<u-image class="QRCodeImg" src="../../static/me/QR-code.png" width="310rpx" height="310rpx"> |
|||
</u-image> |
|||
</view> |
|||
<view class="CoinAddressTitle">{{ i18n.CoinDepositAddress }}</view> |
|||
<view class="Copy" @click="copyAddress('123')">{{ i18n.CopyAddress }}</view> |
|||
<view class="CoinAddress">{{ 'MBDLNKJ9080FWO83RHFKSJLIRJF9S9890DKJ90' }}</view> |
|||
<u-divider text="" :dashed="true"></u-divider> |
|||
<view class="ScanQR">{{ i18n.ScanQR }}</view> |
|||
</view> |
|||
<view class="message-item"> |
|||
{{ i18n.message }} |
|||
</view> |
|||
|
|||
<!-- USDT按钮通知弹出层 --> |
|||
<u-popup class="USDTPopup" :show="USDTPopupShow" round="40rpx" mode="bottom" @close="USDTPopupShow = false" |
|||
@open="USDTPopupShow = true" bgColor="#211F32"> |
|||
<view class="content"> |
|||
<view class="close" @click="USDTPopupShow = false"></view> |
|||
<scroll-view scroll-y="true" style="height: 432rpx;" scroll-with-animation="true" @touchmove.stop> |
|||
<radio-group class="radioGroup" @change="USDTRadioChange" v-model="USDTRadioValue"> |
|||
<label class="checkBox" v-for="(item, index) in 10" :key="index"> |
|||
<view class="icon"> |
|||
<u-icon name="../../static/maskets/logo.png" size="64rpx" width="64rpx"></u-icon> |
|||
</view> |
|||
<view class="iconName"> |
|||
<view class="top">USDT</view> |
|||
<view class="bottom">BTC</view> |
|||
</view> |
|||
|
|||
<radio color="#00E8A2" shape="square"></radio> |
|||
</label> |
|||
|
|||
</radio-group> |
|||
</scroll-view> |
|||
|
|||
<u-button class="button" color="#00E8A2" throttleTime="500" @click="USDTPopupShow = false">OK |
|||
</u-button> |
|||
</view> |
|||
</u-popup> |
|||
</view> |
|||
|
|||
<view class="cashContent" v-if="pageState === 'cashRecharge'"> |
|||
<view class="enter"> |
|||
<view class="selectTitle">{{ i18n.selectAmount }}</view> |
|||
<view class="numberSelect"> |
|||
<view class="item" :class="{ select: selectNumberValue === 100 }" @click="selectNumberValue = 100"> |
|||
$100 |
|||
</view> |
|||
<view class="item" :class="{ select: selectNumberValue === 200 }" @click="selectNumberValue = 200"> |
|||
$200 |
|||
</view> |
|||
<view class="item" :class="{ select: selectNumberValue === 300 }" @click="selectNumberValue = 300"> |
|||
$300 |
|||
</view> |
|||
<view class="item" :class="{ select: selectNumberValue === 1000 }" |
|||
@click="selectNumberValue = 1000"> |
|||
$1000</view> |
|||
<view class="item" :class="{ select: selectNumberValue === 5000 }" |
|||
@click="selectNumberValue = 5000"> |
|||
$5000</view> |
|||
<view class="item" :class="{ select: selectNumberValue === 10000 }" |
|||
@click="selectNumberValue = 10000"> |
|||
$10000</view> |
|||
</view> |
|||
<input class="input" v-model="selectNumberValue" focus :placeholder="i18n.EnterNumber" placeholder-style="color:#A1A0A8" /> |
|||
</view> |
|||
<view class="RechargeMethod"> |
|||
<view class="methodTitle">{{ i18n.RechargeMethod }}</view> |
|||
<view class="methodSelect"> |
|||
<view class="item" :class="{ select: selectMethod === '1' }" @click="selectMethod = '1'"> |
|||
Online payment1 |
|||
</view> |
|||
<view class="item" :class="{ select: selectMethod === '2' }" @click="selectMethod = '2'"> |
|||
Online payment2 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<u-button class="button" color="#00E8A2" throttleTime="500">{{ i18n.Submit }} |
|||
</u-button> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import uniCopy from '@/utils/uni-copy' |
|||
export default { |
|||
name: "recharge", |
|||
data() { |
|||
return { |
|||
pageState: 'coinRecharge', |
|||
coin: '', |
|||
USDTPopupShow: false, |
|||
USDTRadioValue: '', |
|||
selectNumberValue: 100, |
|||
selectMethod: '1', |
|||
}; |
|||
}, |
|||
computed: { |
|||
i18n() { |
|||
return this.$t("recharge"); |
|||
}, |
|||
}, |
|||
onLoad() { |
|||
}, |
|||
onShow() { }, |
|||
methods: { |
|||
goto(id) { |
|||
// console.log(id); |
|||
let url = ''; |
|||
switch (id) { |
|||
case 'rechargeRecord': |
|||
url = '/pages/recharge/rechargeRecord' |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
if (url) { |
|||
// console.log(url); |
|||
uni.navigateTo({ |
|||
url, |
|||
}); |
|||
} |
|||
|
|||
}, |
|||
USDTRadioChange(e) { |
|||
console.log(e); |
|||
}, |
|||
|
|||
copyAddress(value = "") { |
|||
console.log(value) |
|||
uniCopy({ |
|||
content: value, |
|||
success: (res) => { |
|||
uni.showToast({ |
|||
title: "复制成功", |
|||
duration: 3000, |
|||
}) |
|||
}, |
|||
error: (e) => { |
|||
uni.showToast({ |
|||
title: e, |
|||
icon: 'none', |
|||
duration: 2000, |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.main { |
|||
|
|||
.right { |
|||
position: absolute; |
|||
right: 32rpx; |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.head { |
|||
margin-top: 200rpx; |
|||
margin-left: 60rpx; |
|||
width: 632rpx; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
padding: 48rpx 0; |
|||
|
|||
.headItem { |
|||
width: 300rpx; |
|||
height: 68rpx; |
|||
line-height: 68rpx; |
|||
background: #211F32; |
|||
border-radius: 16rpx; |
|||
text-align: center; |
|||
font-size: 32rpx; |
|||
color: #A1A0A8; |
|||
|
|||
&.select { |
|||
background: #00E8A2; |
|||
color: #15141F; |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
.coinContent { |
|||
padding: 0 32rpx; |
|||
|
|||
.input-item { |
|||
overflow: hidden; |
|||
position: relative; |
|||
height: 124rpx; |
|||
line-height: 124rpx; |
|||
background: #211F32; |
|||
margin-bottom: 48rpx; |
|||
border-radius: 32rpx; |
|||
padding: 0 40rpx; |
|||
|
|||
/deep/.u-form-item__body { |
|||
padding: 0; |
|||
} |
|||
|
|||
.input { |
|||
width: 460rpx; |
|||
height: 124rpx; |
|||
display: inline-block; |
|||
} |
|||
|
|||
.selectCoinBtn { |
|||
position: absolute; |
|||
width: 170rpx; |
|||
height: 54rpx; |
|||
top: 36rpx; |
|||
right: 32rpx; |
|||
line-height: 56rpx; |
|||
font-size: 36rpx; |
|||
padding: 0; |
|||
color: #fff; |
|||
|
|||
&::after { |
|||
display: block; |
|||
position: absolute; |
|||
content: ''; |
|||
background-image: url(../../static/me/ic_input_arrow_down.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 32rpx; |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
top: 12rpx; |
|||
right: 10rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.coin-item { |
|||
height: 622rpx; |
|||
background: #211F32; |
|||
border-radius: 10px; |
|||
overflow: hidden; |
|||
padding: 0 40rpx; |
|||
|
|||
.QRCode { |
|||
margin: 60rpx auto 32rpx; |
|||
width: 310rpx; |
|||
} |
|||
|
|||
.CoinAddressTitle { |
|||
width: 340rpx; |
|||
height: 40rpx; |
|||
font-size: 14px; |
|||
display: inline-block; |
|||
color: #00E8A2; |
|||
} |
|||
|
|||
.Copy { |
|||
position: relative; |
|||
height: 40rpx; |
|||
display: inline-block; |
|||
color: #00E8A2; |
|||
font-size: 20rpx; |
|||
margin-left: 70rpx; |
|||
padding-left: 40rpx; |
|||
|
|||
&::before { |
|||
display: block; |
|||
position: absolute; |
|||
content: ''; |
|||
background-image: url(../../static/recharge/ic_copy.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 32rpx; |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
top: 0rpx; |
|||
left: 0rpx; |
|||
} |
|||
} |
|||
|
|||
.CoinAddress { |
|||
margin-top: 12rpx; |
|||
font-size: 20rpx; |
|||
// transform: scale(0.83333); |
|||
// transform-origin: 0 0; |
|||
color: #A1A0A8; |
|||
} |
|||
|
|||
.ScanQR { |
|||
font-size: 20rpx; |
|||
// transform: scale(0.83333); |
|||
// transform-origin: 0 0; |
|||
color: #A1A0A8; |
|||
} |
|||
|
|||
} |
|||
|
|||
.message-item { |
|||
margin: 32rpx 0 120rpx; |
|||
padding: 0 16rpx; |
|||
font-size: 24rpx; |
|||
|
|||
color: #A1A0A8; |
|||
} |
|||
|
|||
.USDTPopup { |
|||
.content { |
|||
height: 730rpx; |
|||
|
|||
.close { |
|||
margin: 48rpx 346rpx; |
|||
width: 58rpx; |
|||
height: 20rpx; |
|||
background-image: url(../../static/charity/Turn.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 58rpx 20rpx; |
|||
} |
|||
|
|||
.radioGroup { |
|||
height: 432rpx; |
|||
|
|||
.checkBox { |
|||
height: 84rpx; |
|||
width: 670rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
margin: 0 40rpx 32rpx; |
|||
|
|||
.icon { |
|||
width: 64rpx; |
|||
height: 64rpx; |
|||
border-radius: 20rpx; |
|||
overflow: hidden; |
|||
display: inline-block; |
|||
box-sizing: border-box; |
|||
margin-right: 20rpx; |
|||
} |
|||
|
|||
.iconName { |
|||
width: 520rpx; |
|||
|
|||
.top { |
|||
font-size: 32rpx; |
|||
color: #fff; |
|||
} |
|||
|
|||
|
|||
.bottom { |
|||
font-size: 24rpx; |
|||
color: #A1A0A8; |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
/deep/.uni-radio-input { |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
border-radius: 16rpx; |
|||
background: #323045; |
|||
} |
|||
|
|||
/deep/.uni-radio-input-checked::before { |
|||
font-size: 36rpx; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.button { |
|||
width: 654rpx; |
|||
margin: 40rpx 48rpx; |
|||
border-radius: 32rpx; |
|||
height: 112rpx; |
|||
line-height: 112rpx; |
|||
color: #15141F !important; |
|||
} |
|||
|
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
.cashContent { |
|||
.enter { |
|||
box-sizing: border-box; |
|||
height: 422rpx; |
|||
margin: 0 32rpx; |
|||
background: #211F32; |
|||
border-radius: 20rpx; |
|||
padding: 24rpx 32rpx; |
|||
|
|||
.selectTitle { |
|||
font-size: 24rpx; |
|||
|
|||
} |
|||
|
|||
.numberSelect { |
|||
margin-top: 32rpx; |
|||
height: 168rpx; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
align-content: space-between; |
|||
flex-wrap: wrap; |
|||
|
|||
.item { |
|||
height: 68rpx; |
|||
line-height: 68rpx; |
|||
width: 186rpx; |
|||
color: #A1A0A8; |
|||
background: #323045; |
|||
border-radius: 40rpx; |
|||
text-align: center; |
|||
font-size: 32rpx; |
|||
|
|||
&.select { |
|||
background: #FF844B; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.input { |
|||
height: 112rpx; |
|||
background: #323045; |
|||
border-radius: 32rpx; |
|||
padding-left: 40rpx; |
|||
margin-top: 32rpx; |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
.RechargeMethod { |
|||
box-sizing: border-box; |
|||
height: 178rpx; |
|||
margin: 32rpx; |
|||
background: #211F32; |
|||
border-radius: 20rpx; |
|||
padding: 24rpx 32rpx; |
|||
|
|||
.methodTitle { |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.methodSelect { |
|||
margin-top: 32rpx; |
|||
height: 112rpx; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
align-content: space-between; |
|||
flex-wrap: wrap; |
|||
|
|||
.item { |
|||
height: 68rpx; |
|||
line-height: 68rpx; |
|||
width: 306rpx; |
|||
color: #A1A0A8; |
|||
background: #323045; |
|||
border-radius: 40rpx; |
|||
text-align: center; |
|||
font-size: 32rpx; |
|||
|
|||
&.select { |
|||
background: #FF844B; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
.button { |
|||
width: 686rpx; |
|||
box-sizing: border-box; |
|||
height: 112rpx; |
|||
margin: 16rpx 32rpx; |
|||
background: #00E8A2; |
|||
border-radius: 32rpx; |
|||
font-weight: 700; |
|||
font-size: 32rpx; |
|||
color: #15141F !important; |
|||
|
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,159 @@ |
|||
<template> |
|||
<view class="main"> |
|||
<!-- nav --> |
|||
<navigation>{{ i18n.RechargeRecord }}</navigation> |
|||
<!-- headBtn --> |
|||
<view class="head"> |
|||
<view class="headItem" @click="pageState = 'coinRecharge'" |
|||
:class="{ select: pageState === 'coinRecharge' }"> |
|||
{{ i18n.CoinRecharge }} |
|||
</view> |
|||
<view class="headItem" @click="pageState = 'cashRecharge'" |
|||
:class="{ select: pageState === 'cashRecharge' }"> |
|||
{{ i18n.CashRecharge }} |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="cardList"> |
|||
<view class="card" v-for="(item, index) in 4" :key="index"> |
|||
<!-- 卡片条件渲染 --> |
|||
<!-- balance --> |
|||
<card-header v-if="pageState === 'coinRecharge'" iconName="../../static/recharge/money-recive.png" |
|||
:title="'904.29483230ACTA'" rightName="Succeed" fontColor="#00E8A2"> |
|||
</card-header> |
|||
<view class="dataBody" v-if="pageState === 'coinRecharge'"> |
|||
<view style="padding:20rpx 32rpx;"> |
|||
<Key-value-row :keyName="i18n.OrderID" :value="'293829773920223873676'"></Key-value-row> |
|||
<Key-value-row :keyName="i18n.Fees" :value="'10.0922'"></Key-value-row> |
|||
<Key-value-row :keyName="i18n.Time" :value="'2022/08/06 14:50:34'"></Key-value-row> |
|||
</view> |
|||
<view style="border-top: 2rpx solid #323045;padding:0rpx 32rpx; margin-bottom: 20rpx;"> |
|||
<show-more> |
|||
<Key-value-row :keyName="i18n.Address" :value="'dhiukyfdhi8797979870800'"></Key-value-row> |
|||
<Key-value-row :keyName="i18n.Hash" :value="'dhiukyfdhi8797979870800'"></Key-value-row> |
|||
<view class="text">Postscript : ontact customer service on the top-left corner for identity |
|||
verific |
|||
</view> |
|||
</show-more> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<!-- contarct --> |
|||
<card-header v-if="pageState === 'cashRecharge'" iconName="../../static/recharge/money-recive.png" |
|||
:title="'904.29483230ACTA'" rightName="Succeed" fontColor="#00E8A2"> |
|||
</card-header> |
|||
<view class="dataBody" v-if="pageState === 'cashRecharge'"> |
|||
<view style="padding:20rpx 32rpx;"> |
|||
<Key-value-row :keyName="i18n.OrderID" :value="'293829773920223873676'"></Key-value-row> |
|||
<Key-value-row :keyName="i18n.Fees" :value="'10.0922'"></Key-value-row> |
|||
<Key-value-row :keyName="i18n.Time" :value="'2022/08/06 14:50:34'"></Key-value-row> |
|||
</view> |
|||
<view style="border-top: 2rpx solid #323045;padding:0rpx 32rpx; margin-bottom: 20rpx;"> |
|||
<show-more> |
|||
<Key-value-row :keyName="i18n.USDTRate" :value="'19298'"></Key-value-row> |
|||
<Key-value-row :keyName="i18n.USDT" :value="'298237'"></Key-value-row> |
|||
<view class="text">Postscript : ontact customer service on the top-left corner for identity |
|||
verific |
|||
</view> |
|||
</show-more> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
|
|||
|
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import KeyValueRow from '../../components/KeyValueRow/KeyValueRow.vue'; |
|||
import CardHeader from '../../components/cardHeader/cardHeader.vue'; |
|||
import ShowMore from '../../components/showMore/showMore.vue'; |
|||
export default { |
|||
components: { KeyValueRow, CardHeader, ShowMore }, |
|||
name: "rechargeRecord", |
|||
data() { |
|||
return { |
|||
pageState: 'coinRecharge', |
|||
}; |
|||
}, |
|||
computed: { |
|||
i18n() { |
|||
return this.$t("recharge"); |
|||
}, |
|||
}, |
|||
onLoad() { |
|||
}, |
|||
onShow() { }, |
|||
methods: { |
|||
change(e) { |
|||
console.log(e); |
|||
} |
|||
|
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.main { |
|||
|
|||
.head { |
|||
margin-top: 200rpx; |
|||
margin-left: 60rpx; |
|||
width: 632rpx; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
padding: 48rpx 0; |
|||
|
|||
.headItem { |
|||
width: 300rpx; |
|||
height: 68rpx; |
|||
line-height: 68rpx; |
|||
background: #211F32; |
|||
border-radius: 16rpx; |
|||
text-align: center; |
|||
font-size: 32rpx; |
|||
color: #A1A0A8; |
|||
|
|||
&.select { |
|||
background: #00E8A2; |
|||
color: #15141F; |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
.cardList { |
|||
padding-bottom: 40rpx; |
|||
|
|||
.card { |
|||
overflow: hidden; |
|||
background: #211F32; |
|||
border-radius: 32rpx; |
|||
margin: 0 32rpx 32rpx; |
|||
|
|||
|
|||
|
|||
.dataBody { |
|||
box-sizing: border-box; |
|||
|
|||
.text { |
|||
margin-top: 20rpx; |
|||
padding: 10rpx 16rpx; |
|||
background: #323045; |
|||
border-radius: 8rpx; |
|||
font-size: 24rpx; |
|||
color: #A1A0A8; |
|||
} |
|||
|
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,352 @@ |
|||
<template> |
|||
<view class="main"> |
|||
<!-- nav --> |
|||
<navigation>{{ i18n.AddAddress }} </navigation> |
|||
<view class="body"> |
|||
<!-- coin选择框 --> |
|||
<view class="choose-item"> |
|||
<u-input class="input" v-model="coin" color="#fff" fontSize="32rpx" border="none" |
|||
:placeholder="i18n.PleaseChooseCoin"> |
|||
</u-input> |
|||
<view class="selectCoinBtn" @click="USDTPopupShow = true">USDT |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="addressBody"> |
|||
<view class="address-title">{{ i18n.Address }}</view> |
|||
<view class="input-item"> |
|||
<u-input class="input" v-model="address" color="#fff" fontSize="32rpx" border="none" |
|||
:placeholder="i18n.enterAddressTips"> |
|||
</u-input> |
|||
</view> |
|||
<view class="address-title">{{ i18n.Remarks }}</view> |
|||
<view class="input-item"> |
|||
<u-input class="input" v-model="remarks" color="#fff" fontSize="32rpx" border="none" |
|||
:placeholder="i18n.enterRemarksTips"> |
|||
</u-input> |
|||
</view> |
|||
</view> |
|||
|
|||
<u-button class="button" color="#00E8A2" throttleTime="500" :disabled="btnIsCanClick">{{ i18n.Confirm }} |
|||
</u-button> |
|||
|
|||
<!-- USDT按钮通知弹出层 --> |
|||
<u-popup class="USDTPopup" :show="USDTPopupShow" round="40rpx" mode="bottom" @close="USDTPopupShow = false" |
|||
@open="USDTPopupShow = true" bgColor="#211F32"> |
|||
<view class="content"> |
|||
<view class="close" @click="USDTPopupShow = false"></view> |
|||
<scroll-view scroll-y="true" style="height: 432rpx;" scroll-with-animation="true" @touchmove.stop> |
|||
<radio-group class="radioGroup" @change="USDTRadioChange" v-model="USDTRadioValue"> |
|||
<label class="checkBox" v-for="(item, index) in 10" :key="index"> |
|||
<view class="icon"> |
|||
<u-icon name="../../static/maskets/logo.png" size="64rpx" width="64rpx"></u-icon> |
|||
</view> |
|||
<view class="iconName"> |
|||
<view class="top">USDT</view> |
|||
<view class="bottom">BTC</view> |
|||
</view> |
|||
|
|||
<radio color="#00E8A2" shape="square"></radio> |
|||
</label> |
|||
|
|||
</radio-group> |
|||
</scroll-view> |
|||
|
|||
<u-button class="button" color="#00E8A2" throttleTime="500" @click="USDTPopupShow = false">OK |
|||
</u-button> |
|||
</view> |
|||
</u-popup> |
|||
|
|||
</view> |
|||
|
|||
|
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import uniCopy from '@/utils/uni-copy' |
|||
import KeyValueRow from '../../components/KeyValueRow/KeyValueRow.vue'; |
|||
export default { |
|||
components: { KeyValueRow }, |
|||
name: "withdrawal", |
|||
data() { |
|||
return { |
|||
coin: '', |
|||
address: '', |
|||
address: '', |
|||
USDTRadioValue: '', |
|||
USDTPopupShow: false, |
|||
|
|||
}; |
|||
}, |
|||
computed: { |
|||
i18n() { |
|||
return this.$t("withdrawal"); |
|||
}, |
|||
btnIsCanClick() { // 按钮是否可以点击 |
|||
if (this.coin && this.address && this.address) { |
|||
return false; // 有值才可以点 |
|||
}else{ |
|||
return true |
|||
} |
|||
} |
|||
}, |
|||
onLoad() { |
|||
// 监听事件 |
|||
uni.$on('coinAddressChang', (data) => { |
|||
this.coinAddress = data.coinAddress |
|||
}) |
|||
}, |
|||
onUnload() { |
|||
// 移除监听事件 |
|||
uni.$off('coinAddressChang'); |
|||
}, |
|||
onShow() { }, |
|||
methods: { |
|||
goto(id) { |
|||
// console.log(id); |
|||
let url = ''; |
|||
switch (id) { |
|||
case 'withdrawalRecord': |
|||
url = '/pages/withdrawal/withdrawalRecord' |
|||
break; |
|||
case 'chooseAddress': |
|||
url = '/pages/withdrawal/chooseAddress?form=withdrawal' |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
if (url) { |
|||
// console.log(url); |
|||
uni.navigateTo({ |
|||
url, |
|||
}); |
|||
} |
|||
|
|||
}, |
|||
USDTRadioChange(e) { |
|||
console.log(e); |
|||
}, |
|||
|
|||
copyAddress(value = "") { |
|||
console.log(value) |
|||
uniCopy({ |
|||
content: value, |
|||
success: (res) => { |
|||
uni.showToast({ |
|||
title: "复制成功", |
|||
duration: 3000, |
|||
}) |
|||
}, |
|||
error: (e) => { |
|||
uni.showToast({ |
|||
title: e, |
|||
icon: 'none', |
|||
duration: 2000, |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.main { |
|||
|
|||
.right { |
|||
position: absolute; |
|||
right: 32rpx; |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.body { |
|||
margin-top: 200rpx; |
|||
padding: 32rpx; |
|||
} |
|||
|
|||
.choose-item { |
|||
overflow: hidden; |
|||
position: relative; |
|||
height: 124rpx; |
|||
line-height: 124rpx; |
|||
background: #211F32; |
|||
margin-bottom: 48rpx; |
|||
border-radius: 32rpx; |
|||
padding: 0 40rpx; |
|||
|
|||
/deep/.u-form-item__body { |
|||
padding: 0; |
|||
} |
|||
|
|||
.input { |
|||
width: 460rpx; |
|||
height: 124rpx; |
|||
display: inline-block; |
|||
} |
|||
|
|||
.selectCoinBtn { |
|||
position: absolute; |
|||
width: 170rpx; |
|||
height: 54rpx; |
|||
top: 36rpx; |
|||
right: 32rpx; |
|||
line-height: 56rpx; |
|||
font-size: 36rpx; |
|||
padding: 0; |
|||
color: #fff; |
|||
|
|||
&::after { |
|||
display: block; |
|||
position: absolute; |
|||
content: ''; |
|||
background-image: url(../../static/me/ic_input_arrow_down.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 32rpx; |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
top: 12rpx; |
|||
right: 10rpx; |
|||
} |
|||
} |
|||
|
|||
.all { |
|||
position: absolute; |
|||
display: inline; |
|||
font-size: 20rpx; |
|||
color: #00E8A2; |
|||
top: 0rpx; |
|||
right: 30rpx; |
|||
} |
|||
} |
|||
|
|||
.addressBody { |
|||
overflow: hidden; |
|||
background: #211F32; |
|||
border-radius: 32rpx; |
|||
padding: 32rpx; |
|||
|
|||
.address-title { |
|||
font-size: 32rpx; |
|||
color: #A1A0A8; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.input-item { |
|||
height: 112rpx; |
|||
background: #323045; |
|||
border-radius: 32rpx; |
|||
padding-left: 40rpx; |
|||
margin-bottom: 20rpx; |
|||
|
|||
.input { |
|||
height: 112rpx; |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
} |
|||
|
|||
.button { |
|||
position: fixed; |
|||
bottom: 40rpx; |
|||
width: 686rpx; |
|||
box-sizing: border-box; |
|||
height: 112rpx; |
|||
background: #00E8A2; |
|||
border-radius: 32rpx; |
|||
font-weight: 700; |
|||
font-size: 32rpx; |
|||
color: #15141F !important; |
|||
|
|||
} |
|||
|
|||
|
|||
.USDTPopup { |
|||
.content { |
|||
height: 730rpx; |
|||
|
|||
.close { |
|||
margin: 48rpx 346rpx; |
|||
width: 58rpx; |
|||
height: 20rpx; |
|||
background-image: url(../../static/charity/Turn.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 58rpx 20rpx; |
|||
} |
|||
|
|||
.radioGroup { |
|||
height: 432rpx; |
|||
|
|||
.checkBox { |
|||
height: 84rpx; |
|||
width: 670rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
margin: 0 40rpx 32rpx; |
|||
|
|||
.icon { |
|||
width: 64rpx; |
|||
height: 64rpx; |
|||
border-radius: 20rpx; |
|||
overflow: hidden; |
|||
display: inline-block; |
|||
box-sizing: border-box; |
|||
margin-right: 20rpx; |
|||
} |
|||
|
|||
.iconName { |
|||
width: 520rpx; |
|||
|
|||
.top { |
|||
font-size: 32rpx; |
|||
color: #fff; |
|||
} |
|||
|
|||
|
|||
.bottom { |
|||
font-size: 24rpx; |
|||
color: #A1A0A8; |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
/deep/.uni-radio-input { |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
border-radius: 16rpx; |
|||
background: #323045; |
|||
} |
|||
|
|||
/deep/.uni-radio-input-checked::before { |
|||
font-size: 36rpx; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.button { |
|||
width: 654rpx; |
|||
margin: 40rpx 48rpx; |
|||
border-radius: 32rpx; |
|||
height: 112rpx; |
|||
font-weight: 600; |
|||
line-height: 112rpx; |
|||
color: #15141F !important; |
|||
} |
|||
|
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,138 @@ |
|||
<template> |
|||
<view class="main"> |
|||
<!-- nav --> |
|||
<navigation>{{ pageState === 'addBank' ? i18n.AddBankInformation : i18n.EditBankInformation }}</navigation> |
|||
<view class="content"> |
|||
<view class="inputBody"> |
|||
<view class="title">{{ i18n.FirstName }}</view> |
|||
<view class="input-item"> |
|||
<u-input class="input" v-model="name" color="#fff" fontSize="32rpx" border="none" |
|||
:placeholder="i18n.enterName"> |
|||
</u-input> |
|||
</view> |
|||
<view class="title">{{ i18n.Account }}</view> |
|||
<view class="input-item"> |
|||
<u-input class="input" v-model="account" color="#fff" fontSize="32rpx" border="none" |
|||
:placeholder="i18n.enterAccount"> |
|||
</u-input> |
|||
</view> |
|||
</view> |
|||
<view class="inputBody"> |
|||
<view class="title">{{ i18n.BankName }}</view> |
|||
<view class="input-item"> |
|||
<u-input class="input" v-model="bankName" color="#fff" fontSize="32rpx" border="none" |
|||
:placeholder="i18n.enterBankName"> |
|||
</u-input> |
|||
</view> |
|||
<view class="title">{{ i18n.BankCode }}</view> |
|||
<view class="input-item"> |
|||
<u-input class="input" type="password" v-model="bankCode" color="#fff" fontSize="32rpx" |
|||
border="none" :placeholder="i18n.enterBankCode"> |
|||
</u-input> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<u-button class="button" color="#00E8A2" throttleTime="500" :disabled="btnIsCanClick">{{ i18n.Confirm }} |
|||
</u-button> |
|||
|
|||
</view> |
|||
|
|||
|
|||
|
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "withdrawalRecord", |
|||
data() { |
|||
return { |
|||
pageState: 'addBank', // 页面状态,是添加还是编辑银行卡 |
|||
name: '', |
|||
account: '', |
|||
bankName: '', |
|||
bankCode: '', |
|||
}; |
|||
}, |
|||
computed: { |
|||
i18n() { |
|||
return this.$t("withdrawal"); |
|||
}, |
|||
btnIsCanClick() { // 按钮是否可以点击 |
|||
if (this.name && this.account && this.bankName && this.bankCode) { |
|||
return false; // 有值才可以点 |
|||
} else { |
|||
return true |
|||
} |
|||
} |
|||
}, |
|||
onLoad(option) { |
|||
console.log(option); |
|||
this.pageState = option.mode || 'addBank'; |
|||
}, |
|||
onShow() { }, |
|||
methods: { |
|||
change(e) { |
|||
console.log(e); |
|||
} |
|||
|
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.main { |
|||
|
|||
.content { |
|||
margin-top: 200rpx; |
|||
padding: 32rpx; |
|||
|
|||
.inputBody { |
|||
overflow: hidden; |
|||
background: #211F32; |
|||
border-radius: 32rpx; |
|||
padding: 32rpx; |
|||
margin-bottom: 32rpx; |
|||
|
|||
.title { |
|||
font-size: 32rpx; |
|||
color: #A1A0A8; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.input-item { |
|||
height: 112rpx; |
|||
background: #323045; |
|||
border-radius: 32rpx; |
|||
padding-left: 40rpx; |
|||
margin-bottom: 20rpx; |
|||
|
|||
.input { |
|||
height: 112rpx; |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
} |
|||
|
|||
|
|||
.button { |
|||
position: fixed; |
|||
bottom: 40rpx; |
|||
width: 686rpx; |
|||
box-sizing: border-box; |
|||
height: 112rpx; |
|||
background: #00E8A2; |
|||
border-radius: 32rpx; |
|||
font-weight: 700; |
|||
font-size: 32rpx; |
|||
color: #15141F !important; |
|||
|
|||
} |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,289 @@ |
|||
<template> |
|||
<view class="main"> |
|||
<!-- nav --> |
|||
<navigation>{{ i18n.ChooseAddress }}<view slot="right" class="right" @click="editFlag = !editFlag;">{{ |
|||
editFlag ? i18n.OK : i18n.Edit |
|||
}} |
|||
</view> |
|||
</navigation> |
|||
<view class="content"> |
|||
<view class="message-item"> |
|||
{{ i18n.message4 }} |
|||
</view> |
|||
<view class="message-item last"> |
|||
{{ i18n.message5 }} |
|||
</view> |
|||
<view class="card" v-if="coinList.length > 0"> |
|||
<view class="dataBody" v-for="(item, index) in 4" :key="index"> |
|||
<view class="coinTitle">USDT</view> |
|||
<view class="addressItem" v-for="(addressItem, addressIndex) in 2" :key="addressIndex" |
|||
@click="itemClick(index, addressIndex)"> |
|||
<view class="radio" |
|||
:class="{ select: (editCoinIndex === index && editCoinAddressIndex === addressIndex) }" |
|||
v-if="editFlag"></view> |
|||
<view class="addressInfo"> |
|||
<view class="addressTitle">{{ i18n.myOmniAddress }}</view> |
|||
<view class="address">SDIHJSD9809U9ERF9IOU0980970</view> |
|||
<view class="time">2022/08/06 14:50:34</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 确认框 --> |
|||
<u-modal :show="modalShow" :confirmText="i18n.OK" :cancelText="i18n.Cancel" :showCancelButton="true" |
|||
:title="i18n.WarmTips" :content='i18n.WarmTipsText' @confirm="deleteAddress" @cancel="modalShow = false" |
|||
confirmColor="#00E8A2"> |
|||
</u-modal> |
|||
<!-- 编辑按钮 --> |
|||
<view class="buttonBg"> |
|||
<u-button class="button" :color="editFlag ? '#F4506A' : '#00E8A2'" throttleTime="500" @click="btnClick" |
|||
:disabled="btnIsCanClick"> |
|||
{{ editFlag ? i18n.DeleteAddress : i18n.AddAddress }} |
|||
</u-button> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import KeyValueRow from '../../components/KeyValueRow/KeyValueRow.vue'; |
|||
export default { |
|||
components: { KeyValueRow }, |
|||
name: "chooseAddress", |
|||
data() { |
|||
return { |
|||
coinList: [{}], |
|||
coinAddressList: [{}], |
|||
editFlag: false, // 是否在编辑状态 |
|||
editCoinIndex: '', |
|||
editCoinAddressIndex: '', |
|||
coinAddress: 'SDIHJSD9809U9ERF9IOU0980970', |
|||
currentCoin: 'USDT', |
|||
modalShow: false, |
|||
|
|||
}; |
|||
}, |
|||
computed: { |
|||
i18n() { |
|||
return this.$t("withdrawal"); |
|||
}, |
|||
btnIsCanClick() { // 按钮是否可以点击 |
|||
if (this.editFlag) { |
|||
// console.log(`${this.editCoinIndex}` ? false : true); |
|||
return `${this.editCoinIndex}` ? false : true; // 在编辑模式,有值才能点 |
|||
} else { |
|||
return false; // 不在编辑模式始终可以点 |
|||
} |
|||
} |
|||
}, |
|||
onLoad() { |
|||
|
|||
}, |
|||
onShow() { }, |
|||
methods: { |
|||
itemClick(index, addressIndex) { |
|||
// 编辑模式下 |
|||
if (this.editFlag) { |
|||
// console.log(index, addressIndex); |
|||
if (this.editCoinIndex === index && this.editCoinAddressIndex === addressIndex) { // 取消选择 |
|||
this.editCoinIndex = ''; |
|||
this.editCoinAddressIndex = ''; |
|||
} else { // 选择 |
|||
this.editCoinIndex = index; |
|||
this.editCoinAddressIndex = addressIndex; |
|||
} |
|||
} else { |
|||
// 选择地址情况下 点击地址返回传参有问题 可能要通用vuex解决 |
|||
uni.$emit('coinAddressChang', { |
|||
coinAddress: this.coinAddress, |
|||
}); |
|||
uni.navigateBack() |
|||
|
|||
} |
|||
|
|||
}, |
|||
btnClick() { |
|||
// 在编辑模式弹出确认框 |
|||
if (this.editFlag) { |
|||
this.modalShow = true |
|||
} else { |
|||
// 在非编辑模式下直接跳转 |
|||
uni.navigateTo({ |
|||
url : '/pages/withdrawal/addAddress' |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
deleteAddress() { |
|||
this.modalShow = false; |
|||
console.log('deleteAddress'); |
|||
}, |
|||
|
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.main { |
|||
|
|||
.right { |
|||
width: 82rpx; |
|||
height: 56rpx; |
|||
line-height: 56rpx; |
|||
position: absolute; |
|||
right: 32rpx; |
|||
font-size: 24rpx; |
|||
background: rgba(246, 166, 9, 0.1); |
|||
border-radius: 8px; |
|||
color: #FFBC1F; |
|||
} |
|||
|
|||
|
|||
.content { |
|||
margin-top: 200rpx; |
|||
padding: 40rpx; |
|||
|
|||
.message-item { |
|||
padding: 0 16rpx; |
|||
font-size: 24rpx; |
|||
color: #A1A0A8; |
|||
line-height: 36rpx; |
|||
|
|||
&.last { |
|||
margin-bottom: 30rpx; |
|||
} |
|||
} |
|||
|
|||
|
|||
.card { |
|||
|
|||
.dataBody { |
|||
margin-bottom: 32rpx; |
|||
padding: 32rpx; |
|||
box-sizing: border-box; |
|||
background: #211F32; |
|||
border-radius: 20rpx; |
|||
|
|||
.coinTitle { |
|||
font-size: 24rpx; |
|||
line-height: 28rpx; |
|||
margin-bottom: 32rpx; |
|||
} |
|||
|
|||
.addressItem { |
|||
height: 180rpx; |
|||
box-sizing: border-box; |
|||
padding: 32rpx 0; |
|||
border-top: 2rpx solid #323045; |
|||
display: flex; |
|||
|
|||
.radio { |
|||
margin-top: 32rpx; |
|||
margin-right: 24rpx; |
|||
box-sizing: border-box; |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
background: #323045; |
|||
border: 3rpx solid #DCDBE0; |
|||
border-radius: 16rpx; |
|||
|
|||
|
|||
&.select { |
|||
background-image: url(../../static/withdrawal/Checkbox_pr.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 48rpx; |
|||
border: none; |
|||
} |
|||
} |
|||
|
|||
.addressInfo { |
|||
flex: 1; |
|||
|
|||
.addressTitle { |
|||
position: relative; |
|||
font-size: 24rpx; |
|||
margin-bottom: 20rpx; |
|||
|
|||
&::after { |
|||
display: block; |
|||
position: absolute; |
|||
content: ''; |
|||
background-image: url(../../static/charity/ic_ma_arrow_down.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 32rpx; |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
top: 0rpx; |
|||
right: 0rpx; |
|||
transform: rotate(270deg); |
|||
} |
|||
} |
|||
|
|||
.address { |
|||
font-size: 24rpx; |
|||
line-height: 28rpx; |
|||
color: #A1A0A8; |
|||
} |
|||
|
|||
.time { |
|||
font-size: 24rpx; |
|||
line-height: 28rpx; |
|||
color: #A1A0A8; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
&:last-child { |
|||
margin-bottom: 160rpx; |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
/deep/.u-popup__content { |
|||
background: #323045; |
|||
|
|||
.u-modal__title { |
|||
color: #fff; |
|||
} |
|||
|
|||
.u-modal__content__text { |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
.buttonBg { |
|||
position: fixed; |
|||
bottom: 0rpx; |
|||
background-color: #15141F; |
|||
|
|||
.button { |
|||
width: 670rpx; |
|||
box-sizing: border-box; |
|||
height: 112rpx; |
|||
margin-bottom: 40rpx; |
|||
border-radius: 32rpx; |
|||
font-weight: 700; |
|||
font-size: 32rpx; |
|||
color: #15141F !important; |
|||
|
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,688 @@ |
|||
<template> |
|||
<view class="main"> |
|||
<!-- nav --> |
|||
<navigation>{{ i18n.Withdrawal }}<view slot="right" class="right" @click="goto('withdrawalRecord')">{{ |
|||
i18n.Record |
|||
}} |
|||
</view> |
|||
</navigation> |
|||
<!-- headBtn --> |
|||
<view class="head"> |
|||
<view class="headItem" @click="pageState = 'digitalCurrency'" |
|||
:class="{ select: pageState === 'digitalCurrency' }"> |
|||
{{ i18n.DigitalCurrency }} |
|||
</view> |
|||
<view class="headItem" @click="pageState = 'onLine'" :class="{ select: pageState === 'onLine' }"> |
|||
{{ i18n.OnLine }} |
|||
</view> |
|||
</view> |
|||
<view class="DCContent" v-if="pageState === 'digitalCurrency'"> |
|||
<!-- coin选择框 --> |
|||
<view class="input-item"> |
|||
<u-input class="input" v-model="coin" color="#fff" fontSize="32rpx" border="none" |
|||
:placeholder="i18n.PleaseChooseCoin"> |
|||
</u-input> |
|||
<view class="selectCoinBtn" @click="USDTPopupShow = true">USDT |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="coin-item"> |
|||
<!-- choose地址 --> |
|||
<view class="title">{{ i18n.WithdrawAddress }} |
|||
<view class="choose" @click="goto('chooseAddress')">{{ i18n.Choose }}</view> |
|||
</view> |
|||
<!-- 地址 --> |
|||
<view class="address" v-if="coinAddress">{{ coinAddress }} |
|||
</view> |
|||
<!-- 分割线 --> |
|||
<u-divider text="" lineColor="#B9C1D9"></u-divider> |
|||
<!-- 可用数量 --> |
|||
<Key-value-row :keyName="i18n.Quantity" :value="`${i18n.Available} ${AvailableValue} ${currentCoin}`" |
|||
rightColor="#A1A0A8"></Key-value-row> |
|||
<!-- 数量输入框 --> |
|||
<view class="input-item"> |
|||
<u-input class="input" v-model="coin" color="#fff" fontSize="32rpx" border="none" |
|||
:placeholder="i18n.EnterTheQuantity"> |
|||
</u-input> |
|||
<view class="all">{{ i18n.ALL }}</view> |
|||
</view> |
|||
<!-- 最低体现金额 --> |
|||
<Key-value-row :keyName="i18n.MinimumWithdrawAmount" size="24rpx" |
|||
:value="`${AvailableValue} ${currentCoin}`" rightColor="#A1A0A8"></Key-value-row> |
|||
<!-- 手续费 --> |
|||
<Key-value-row :keyName="i18n.HandlingFee" size="24rpx" :value="`${AvailableValue} ${currentCoin}`" |
|||
rightColor="#A1A0A8"></Key-value-row> |
|||
</view> |
|||
<view class="message-item first"> |
|||
{{ i18n.message1 }} |
|||
</view> |
|||
<view class="message-item"> |
|||
{{ i18n.message2 }} |
|||
</view> |
|||
<view class="message-item last"> |
|||
{{ i18n.message3 }} |
|||
</view> |
|||
<u-button class="withdrawBtn" color="#00E8A2" throttleTime="500">{{ i18n.withdraw }} |
|||
</u-button> |
|||
|
|||
<!-- USDT按钮通知弹出层 --> |
|||
<u-popup class="USDTPopup" :show="USDTPopupShow" round="40rpx" mode="bottom" @close="USDTPopupShow = false" |
|||
@open="USDTPopupShow = true" bgColor="#211F32"> |
|||
<view class="content"> |
|||
<view class="close" @click="USDTPopupShow = false"></view> |
|||
<scroll-view scroll-y="true" style="height: 432rpx;" scroll-with-animation="true" @touchmove.stop> |
|||
<radio-group class="radioGroup" @change="USDTRadioChange" v-model="USDTRadioValue"> |
|||
<label class="checkBox" v-for="(item, index) in 10" :key="index"> |
|||
<view class="icon"> |
|||
<u-icon name="../../static/maskets/logo.png" size="64rpx" width="64rpx"></u-icon> |
|||
</view> |
|||
<view class="iconName"> |
|||
<view class="top">USDT</view> |
|||
<view class="bottom">BTC</view> |
|||
</view> |
|||
|
|||
<radio color="#00E8A2" shape="square"></radio> |
|||
</label> |
|||
|
|||
</radio-group> |
|||
</scroll-view> |
|||
|
|||
<u-button class="button" color="#00E8A2" throttleTime="500" @click="USDTPopupShow = false"> |
|||
{{ i18n.OK }} |
|||
</u-button> |
|||
</view> |
|||
</u-popup> |
|||
</view> |
|||
|
|||
<view class="OLContent" v-if="pageState === 'onLine'"> |
|||
<view class="bankCard" v-if="!ifNextStep"> |
|||
<view class="header"> |
|||
<view class="bankTitle">{{ i18n.BankCardWithdrawal }}</view> |
|||
<view class="BeneficiaryTitle">{{ i18n.Beneficiary }}</view> |
|||
</view> |
|||
|
|||
<view class="addBankCardBtn" v-if="!hasBankCard" @click="goto('addBankCard')">{{ i18n.AddBankCard }} |
|||
</view> |
|||
<view class="bankCardInfo" v-if="hasBankCard"> |
|||
<view class="username">ZHOU JIELUN</view> |
|||
<view class="BankCardCode">4349 9545 9893 9854 027</view> |
|||
<Key-value-row :keyName="'Bank of Melbourne'" size="24rpx" :value="'CODE98Y'" rightColor="#F2FE8D" |
|||
leftColor="#fff"> |
|||
</Key-value-row> |
|||
|
|||
</view> |
|||
</view> |
|||
<u-button class="editBankCardBtn" v-if="!ifNextStep && hasBankCard" @click="goto('editBankCard')" |
|||
color="#323045" throttleTime="500">{{ i18n.EditCard }} |
|||
</u-button> |
|||
<view class="nextStep" v-if="ifNextStep"> |
|||
<view class="inputBody"> |
|||
<view class="title">{{ i18n.WithdrawableAmount }}</view> |
|||
<view class="withdrawableAmount-item"> |
|||
<view class="withdrawableAmount">₹ {{ withdrawableAmount }} </view> |
|||
</view> |
|||
<view class="title">{{ i18n.Amount }}</view> |
|||
<view class="input-item"> |
|||
<u-input class="input" v-model="amount" color="#fff" fontSize="32rpx" border="none" |
|||
:placeholder="i18n.enterAmount"> |
|||
</u-input> |
|||
</view> |
|||
<view class="title">{{ i18n.PaymentPassword }}</view> |
|||
<view class="input-item"> |
|||
<u-input class="input" type="password" v-model="paymentPassword" color="#fff" fontSize="32rpx" |
|||
border="none" :placeholder="i18n.enterPaymentPassword"> |
|||
</u-input> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<u-button class="button" color="#00E8A2" throttleTime="500" :disabled="btnIsCanClick" @click="btnClick"> |
|||
{{ ifNextStep ? i18n.Withdrawal : i18n.NextStep }} |
|||
</u-button> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import uniCopy from '@/utils/uni-copy' |
|||
import KeyValueRow from '../../components/KeyValueRow/KeyValueRow.vue'; |
|||
export default { |
|||
components: { KeyValueRow }, |
|||
name: "withdrawal", |
|||
data() { |
|||
return { |
|||
pageState: 'digitalCurrency', |
|||
coinAddress: '', |
|||
AvailableValue: 3399, |
|||
currentCoin: 'USDT', |
|||
coin: '', |
|||
USDTPopupShow: false, |
|||
USDTRadioValue: '', |
|||
hasBankCard: true, |
|||
ifNextStep: false, |
|||
withdrawableAmount: '4680671.89', |
|||
amount: '', |
|||
paymentPassword: '', |
|||
}; |
|||
}, |
|||
computed: { |
|||
i18n() { |
|||
return this.$t("withdrawal"); |
|||
}, |
|||
btnIsCanClick() { // 按钮是否可以点击 |
|||
if (this.hasBankCard && !this.ifNextStep) { // 在第一步,有银行卡可以点击 |
|||
return false; |
|||
} if (this.amount && this.paymentPassword && this.ifNextStep) { // 在第二步,有值才可以点 |
|||
return false; |
|||
} else { |
|||
return true |
|||
} |
|||
} |
|||
}, |
|||
onLoad() { |
|||
// 监听事件 |
|||
uni.$on('coinAddressChang', (data) => { |
|||
this.coinAddress = data.coinAddress |
|||
}) |
|||
}, |
|||
onUnload() { |
|||
// 移除监听事件 |
|||
uni.$off('coinAddressChang'); |
|||
}, |
|||
onShow() { }, |
|||
methods: { |
|||
goto(id) { |
|||
// console.log(id); |
|||
let url = ''; |
|||
switch (id) { |
|||
case 'withdrawalRecord': |
|||
url = '/pages/withdrawal/withdrawalRecord' |
|||
break; |
|||
case 'chooseAddress': |
|||
url = '/pages/withdrawal/chooseAddress?form=withdrawal' |
|||
break; |
|||
case 'addBankCard': |
|||
url = '/pages/withdrawal/addOrEditBankCard?mode=addBank' |
|||
break; |
|||
case 'editBankCard': |
|||
url = '/pages/withdrawal/addOrEditBankCard?mode=editBank' |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
if (url) { |
|||
// console.log(url); |
|||
uni.navigateTo({ |
|||
url, |
|||
}); |
|||
} |
|||
|
|||
}, |
|||
USDTRadioChange(e) { |
|||
console.log(e); |
|||
}, |
|||
|
|||
copyAddress(value = "") { |
|||
console.log(value) |
|||
uniCopy({ |
|||
content: value, |
|||
success: (res) => { |
|||
uni.showToast({ |
|||
title: "复制成功", |
|||
duration: 3000, |
|||
}) |
|||
}, |
|||
error: (e) => { |
|||
uni.showToast({ |
|||
title: e, |
|||
icon: 'none', |
|||
duration: 2000, |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
btnClick() { |
|||
if (!this.ifNextStep) { // 第一步是切换到提现菜单 |
|||
this.ifNextStep = true |
|||
}else{ // 提现逻辑 |
|||
|
|||
} |
|||
} |
|||
|
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.main { |
|||
|
|||
.right { |
|||
position: absolute; |
|||
right: 32rpx; |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.head { |
|||
margin-top: 200rpx; |
|||
margin-left: 60rpx; |
|||
width: 632rpx; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
padding: 48rpx 0; |
|||
|
|||
.headItem { |
|||
width: 300rpx; |
|||
height: 68rpx; |
|||
line-height: 68rpx; |
|||
background: #211F32; |
|||
border-radius: 16rpx; |
|||
text-align: center; |
|||
font-size: 32rpx; |
|||
color: #A1A0A8; |
|||
|
|||
&.select { |
|||
background: #00E8A2; |
|||
color: #15141F; |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
.DCContent { |
|||
padding: 0 32rpx; |
|||
|
|||
.input-item { |
|||
overflow: hidden; |
|||
position: relative; |
|||
height: 124rpx; |
|||
line-height: 124rpx; |
|||
background: #211F32; |
|||
margin-bottom: 48rpx; |
|||
border-radius: 32rpx; |
|||
padding: 0 40rpx; |
|||
|
|||
/deep/.u-form-item__body { |
|||
padding: 0; |
|||
} |
|||
|
|||
.input { |
|||
width: 460rpx; |
|||
height: 124rpx; |
|||
display: inline-block; |
|||
} |
|||
|
|||
.selectCoinBtn { |
|||
position: absolute; |
|||
width: 170rpx; |
|||
height: 54rpx; |
|||
top: 36rpx; |
|||
right: 32rpx; |
|||
line-height: 56rpx; |
|||
font-size: 36rpx; |
|||
padding: 0; |
|||
color: #fff; |
|||
|
|||
&::after { |
|||
display: block; |
|||
position: absolute; |
|||
content: ''; |
|||
background-image: url(../../static/me/ic_input_arrow_down.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 32rpx; |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
top: 12rpx; |
|||
right: 10rpx; |
|||
} |
|||
} |
|||
|
|||
.all { |
|||
position: absolute; |
|||
display: inline; |
|||
font-size: 20rpx; |
|||
color: #00E8A2; |
|||
top: 0rpx; |
|||
right: 30rpx; |
|||
} |
|||
} |
|||
|
|||
.coin-item { |
|||
background: #211F32; |
|||
border-radius: 10px; |
|||
overflow: hidden; |
|||
padding: 30rpx 40rpx; |
|||
|
|||
.title { |
|||
position: relative; |
|||
font-size: 32rpx; |
|||
color: #A1A0A8; |
|||
margin-bottom: 32rpx; |
|||
|
|||
.choose { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
font-size: 36rpx; |
|||
color: #fff; |
|||
padding-right: 60rpx; |
|||
|
|||
&::after { |
|||
display: block; |
|||
position: absolute; |
|||
content: ''; |
|||
background-image: url(../../static/charity/ic_ma_arrow_down.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 32rpx; |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
top: 12rpx; |
|||
right: 10rpx; |
|||
transform: rotate(270deg); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.address { |
|||
position: relative; |
|||
background: #323045; |
|||
border-radius: 16px; |
|||
color: #00E8A2; |
|||
font-size: 28rpx; |
|||
padding: 8rpx 20rpx 8rpx 68rpx; |
|||
// 超出字符省略成... |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; //兼容 |
|||
word-wrap: break-word; |
|||
white-space: normal !important; |
|||
-webkit-line-clamp: 1; //显示行数 |
|||
-webkit-box-orient: vertical; |
|||
|
|||
&::before { |
|||
display: block; |
|||
position: absolute; |
|||
content: ''; |
|||
top: 20rpx; |
|||
left: 30rpx; |
|||
width: 16rpx; |
|||
height: 16rpx; |
|||
border-radius: 100%; |
|||
background: #00E8A2; |
|||
box-shadow: 0 8rpx 16rpx 0 rgba(0, 0, 0, .2); |
|||
} |
|||
} |
|||
|
|||
.input-item { |
|||
margin-top: 36rpx; |
|||
background: #323045; |
|||
|
|||
.input { |
|||
width: 486rpx; |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
} |
|||
|
|||
.message-item { |
|||
padding: 0 16rpx; |
|||
font-size: 24rpx; |
|||
color: #A1A0A8; |
|||
line-height: 48rpx; |
|||
|
|||
&.first { |
|||
margin-top: 30rpx; |
|||
} |
|||
|
|||
&.last { |
|||
margin-bottom: 30rpx; |
|||
} |
|||
} |
|||
|
|||
|
|||
.withdrawBtn { |
|||
margin: 100rpx 0; |
|||
border-radius: 32rpx; |
|||
height: 112rpx; |
|||
line-height: 112rpx; |
|||
font-weight: 600; |
|||
color: #15141F !important; |
|||
} |
|||
|
|||
.USDTPopup { |
|||
.content { |
|||
height: 730rpx; |
|||
|
|||
.close { |
|||
margin: 48rpx 346rpx; |
|||
width: 58rpx; |
|||
height: 20rpx; |
|||
background-image: url(../../static/charity/Turn.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 58rpx 20rpx; |
|||
} |
|||
|
|||
.radioGroup { |
|||
height: 432rpx; |
|||
|
|||
.checkBox { |
|||
height: 84rpx; |
|||
width: 670rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
margin: 0 40rpx 32rpx; |
|||
|
|||
.icon { |
|||
width: 64rpx; |
|||
height: 64rpx; |
|||
border-radius: 20rpx; |
|||
overflow: hidden; |
|||
display: inline-block; |
|||
box-sizing: border-box; |
|||
margin-right: 20rpx; |
|||
} |
|||
|
|||
.iconName { |
|||
width: 520rpx; |
|||
|
|||
.top { |
|||
font-size: 32rpx; |
|||
color: #fff; |
|||
} |
|||
|
|||
|
|||
.bottom { |
|||
font-size: 24rpx; |
|||
color: #A1A0A8; |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
/deep/.uni-radio-input { |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
border-radius: 16rpx; |
|||
background: #323045; |
|||
} |
|||
|
|||
/deep/.uni-radio-input-checked::before { |
|||
font-size: 36rpx; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.button { |
|||
width: 654rpx; |
|||
margin: 40rpx 48rpx; |
|||
border-radius: 32rpx; |
|||
height: 112rpx; |
|||
font-weight: 600; |
|||
line-height: 112rpx; |
|||
color: #15141F !important; |
|||
} |
|||
|
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
.OLContent { |
|||
.bankCard { |
|||
overflow: hidden; |
|||
box-sizing: border-box; |
|||
height: 360rpx; |
|||
margin: 0 64rpx; |
|||
border-radius: 32rpx; |
|||
background-image: url(../../static/withdrawal/bg_card.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 622rpx 360rpx; |
|||
|
|||
.header { |
|||
box-sizing: border-box; |
|||
height: 164rpx; |
|||
margin: 0 32rpx 0; |
|||
padding-top: 32rpx; |
|||
|
|||
.bankTitle { |
|||
line-height: 60rpx; |
|||
font-size: 44rpx; |
|||
font-weight: 700; |
|||
} |
|||
|
|||
.BeneficiaryTitle { |
|||
font-size: 24rpx; |
|||
line-height: 50rpx; |
|||
} |
|||
} |
|||
|
|||
|
|||
.addBankCardBtn { |
|||
box-sizing: border-box; |
|||
position: relative; |
|||
width: 558rpx; |
|||
height: 116rpx; |
|||
line-height: 116rpx; |
|||
background: #211F32; |
|||
border-radius: 32rpx; |
|||
margin: 34rpx 32rpx; |
|||
padding-left: 40rpx; |
|||
opacity: 1; |
|||
|
|||
|
|||
&::after { |
|||
display: block; |
|||
position: absolute; |
|||
content: ''; |
|||
background-image: url(../../static/withdrawal/add-circle.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 48rpx; |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
top: 34rpx; |
|||
right: 52rpx; |
|||
} |
|||
|
|||
&:active { |
|||
opacity: 0.6; |
|||
} |
|||
} |
|||
|
|||
.bankCardInfo { |
|||
border-top: 2rpx solid #A1A0A8; |
|||
padding: 0 32rpx; |
|||
|
|||
.username { |
|||
margin-top: 24rpx; |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.BankCardCode { |
|||
margin-top: 20rpx; |
|||
margin-bottom: 20rpx; |
|||
font-size: 24rpx; |
|||
color: #00E8A2; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.editBankCardBtn { |
|||
width: 622rpx; |
|||
height: 116rpx; |
|||
margin: 32rpx 64rpx; |
|||
border-radius: 16px; |
|||
font-size: 32rpx; |
|||
} |
|||
|
|||
.nextStep { |
|||
.inputBody { |
|||
overflow: hidden; |
|||
background: #211F32; |
|||
border-radius: 32rpx; |
|||
padding: 32rpx; |
|||
margin-bottom: 32rpx; |
|||
|
|||
.title { |
|||
font-size: 32rpx; |
|||
color: #A1A0A8; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.input-item { |
|||
height: 112rpx; |
|||
background: #323045; |
|||
border-radius: 32rpx; |
|||
padding-left: 40rpx; |
|||
margin-bottom: 20rpx; |
|||
|
|||
.input { |
|||
height: 112rpx; |
|||
} |
|||
} |
|||
|
|||
.withdrawableAmount-item { |
|||
height: 112rpx; |
|||
background: #323045; |
|||
border-radius: 32rpx; |
|||
padding-left: 40rpx; |
|||
margin-bottom: 20rpx; |
|||
|
|||
.withdrawableAmount { |
|||
color: #00E8A2; |
|||
height: 112rpx; |
|||
line-height: 112rpx; |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
} |
|||
} |
|||
|
|||
|
|||
.button { |
|||
position: fixed; |
|||
bottom: 40rpx; |
|||
width: 686rpx; |
|||
box-sizing: border-box; |
|||
height: 112rpx; |
|||
background: #00E8A2; |
|||
border-radius: 32rpx; |
|||
font-weight: 700; |
|||
font-size: 32rpx; |
|||
color: #15141F !important; |
|||
margin: 0 32rpx; |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,172 @@ |
|||
<template> |
|||
<view class="main"> |
|||
<!-- nav --> |
|||
<navigation>{{ i18n.WithdrawalRecord }}</navigation> |
|||
<!-- headBtn --> |
|||
<view class="head"> |
|||
<view class="headItem" @click="pageState = 'digitalCurrency'" |
|||
:class="{ select: pageState === 'digitalCurrency' }"> |
|||
{{ i18n.DigitalCurrency }} |
|||
</view> |
|||
<view class="headItem" @click="pageState = 'onLine'" :class="{ select: pageState === 'onLine' }"> |
|||
{{ i18n.OnLine }} |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="cardList"> |
|||
<view class="card" v-for="(item, index) in 4" :key="index"> |
|||
<!-- 卡片条件渲染 --> |
|||
<!-- balance --> |
|||
<card-header v-if="pageState === 'digitalCurrency'" iconName="../../static/withdrawal/money-send.png" |
|||
:title="'904.29483230ACTA'" rightName="Succeed" fontColor="#00E8A2"> |
|||
</card-header> |
|||
<view class="dataBody" v-if="pageState === 'digitalCurrency'"> |
|||
<view style="padding:20rpx 32rpx;"> |
|||
<Key-value-row :keyName="i18n.OrderID" :value="'293829773920223873676'"></Key-value-row> |
|||
<Key-value-row :keyName="i18n.Fees" :value="'10.0922'"></Key-value-row> |
|||
<Key-value-row :keyName="i18n.Time" :value="'2022/08/06 14:50:34'"></Key-value-row> |
|||
</view> |
|||
<view style="border-top: 2rpx solid #323045;padding:0rpx 32rpx; margin-bottom: 20rpx;"> |
|||
<show-more class="digitalShowMore"> |
|||
<Key-value-row :keyName="i18n.Address" :value="'dhiukyfdhi8797979870800'"></Key-value-row> |
|||
<Key-value-row :keyName="i18n.Hash" :value="'dhiukyfdhi8797979870800'"></Key-value-row> |
|||
<view class="text">Postscript : ontact customer service on the top-left corner for identity |
|||
verific |
|||
</view> |
|||
</show-more> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
|
|||
<!-- contarct --> |
|||
<card-header v-if="pageState === 'onLine'" iconName="../../static/withdrawal/money-send.png" |
|||
:title="'904.29483230ACTA'" rightName="Succeed" fontColor="#00E8A2"> |
|||
</card-header> |
|||
<view class="dataBody" v-if="pageState === 'onLine'"> |
|||
<view style="padding:20rpx 32rpx;"> |
|||
<Key-value-row :keyName="i18n.OrderID" :value="'293829773920223873676'"></Key-value-row> |
|||
<Key-value-row :keyName="i18n.Fees" :value="'10.0922'"></Key-value-row> |
|||
<Key-value-row :keyName="i18n.Time" :value="'2022/08/06 14:50:34'"></Key-value-row> |
|||
</view> |
|||
<show-more class="onLineShowMore" style="border-top: 2rpx solid #323045;margin-bottom: 20rpx;"> |
|||
<view style="padding:20rpx 32rpx;"> |
|||
<Key-value-row :keyName="i18n.USDTRate" :value="'19298'"></Key-value-row> |
|||
<Key-value-row :keyName="i18n.USDT" :value="'298237'"></Key-value-row> |
|||
</view> |
|||
<view style="border-top: 2rpx solid #323045;padding:20rpx 32rpx;"> |
|||
<Key-value-row :keyName="i18n.CardNo" :value="'4349 9545 9893 9854 027'"> |
|||
</Key-value-row> |
|||
<Key-value-row :keyName="i18n.Bank" :value="'Bank of Melbourne'"></Key-value-row> |
|||
<Key-value-row :keyName="i18n.Payee" :value="'Zhou jielun'"></Key-value-row> |
|||
<view class="text">Postscript ：ontact customer service on the top-left corner for identity |
|||
verific |
|||
</view> |
|||
</view> |
|||
</show-more> |
|||
|
|||
</view> |
|||
|
|||
|
|||
|
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import KeyValueRow from '../../components/KeyValueRow/KeyValueRow.vue'; |
|||
import CardHeader from '../../components/cardHeader/cardHeader.vue'; |
|||
import ShowMore from '../../components/showMore/showMore.vue'; |
|||
export default { |
|||
components: { KeyValueRow, CardHeader, ShowMore }, |
|||
name: "withdrawalRecord", |
|||
data() { |
|||
return { |
|||
pageState: 'digitalCurrency', |
|||
}; |
|||
}, |
|||
computed: { |
|||
i18n() { |
|||
return this.$t("withdrawal"); |
|||
}, |
|||
}, |
|||
onLoad() { |
|||
}, |
|||
onShow() { }, |
|||
methods: { |
|||
change(e) { |
|||
console.log(e); |
|||
} |
|||
|
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.main { |
|||
|
|||
.head { |
|||
margin-top: 200rpx; |
|||
margin-left: 60rpx; |
|||
width: 632rpx; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
padding: 48rpx 0; |
|||
|
|||
.headItem { |
|||
width: 300rpx; |
|||
height: 68rpx; |
|||
line-height: 68rpx; |
|||
background: #211F32; |
|||
border-radius: 16rpx; |
|||
text-align: center; |
|||
font-size: 32rpx; |
|||
color: #A1A0A8; |
|||
|
|||
&.select { |
|||
background: #00E8A2; |
|||
color: #15141F; |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
.cardList { |
|||
padding-bottom: 40rpx; |
|||
|
|||
.card { |
|||
overflow: hidden; |
|||
background: #211F32; |
|||
border-radius: 32rpx; |
|||
margin: 0 32rpx 32rpx; |
|||
|
|||
|
|||
|
|||
.dataBody { |
|||
box-sizing: border-box; |
|||
|
|||
.onLineShowMore { |
|||
/deep/.showMoreTool { |
|||
margin: 0 32rpx; |
|||
} |
|||
} |
|||
|
|||
|
|||
.text { |
|||
margin-top: 20rpx; |
|||
padding: 10rpx 16rpx; |
|||
background: #323045; |
|||
border-radius: 8rpx; |
|||
font-size: 24rpx; |
|||
color: #A1A0A8; |
|||
} |
|||
|
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
|
Before Width: | Height: | Size: 257 B After Width: | Height: | Size: 345 B |
File diff suppressed because it is too large
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 96 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 73 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 753 B |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
Loading…
Reference in new issue