[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