|
|
@@ -6,38 +6,80 @@
|
|
|
</template>
|
|
|
<Form ref="formRef" class="g-form__container g-layout-block" @submit="onSubmit">
|
|
|
<CellGroup inset>
|
|
|
- <Field name="currenty" label="币种" :rules="formRules.currenty" is-link>
|
|
|
+ <Field name="currenty" label="币种" label-align="top" :rules="formRules.currenty" arrow-direction="down"
|
|
|
+ is-link>
|
|
|
<template #input>
|
|
|
<app-select v-model="state.currentyId" :options="digitalCurrentyList"
|
|
|
@confirm="onCurrentyChange" />
|
|
|
</template>
|
|
|
</Field>
|
|
|
- <Field name="token" label="网络" :rules="formRules.token" is-link>
|
|
|
- <template #input>
|
|
|
- <app-select v-model="state.tokenId" :options="walletTokens"
|
|
|
- :optionProps="{ label: 'chain_id', value: 'id' }" />
|
|
|
+ </CellGroup>
|
|
|
+ <CellGroup inset>
|
|
|
+ <Field name="token" label="存款网络" label-align="top" placeholder="请选择" :rules="formRules.token"
|
|
|
+ arrow-direction="down" is-link readonly @click="state.showSheet = true">
|
|
|
+ <template #input v-if="tokenItem">
|
|
|
+ {{ tokenItem.name }} ({{ tokenItem.chain_id }})
|
|
|
</template>
|
|
|
</Field>
|
|
|
- <Cell title="余额" :value="balance" />
|
|
|
</CellGroup>
|
|
|
</Form>
|
|
|
- <div class="g-form__footer inset">
|
|
|
- <Button type="primary" @click="formRef?.submit" block>创建新地址</Button>
|
|
|
- </div>
|
|
|
- {{ addressList }}
|
|
|
+ <CellGroup inset v-if="tokenItem">
|
|
|
+ <Cell title="余额" :value="balance" />
|
|
|
+ <div class="wallet-deposit__address">
|
|
|
+ <dl class="g-layout-block g-layout-block--inset">
|
|
|
+ <dt>
|
|
|
+ <h3>存款地址</h3>
|
|
|
+ <span>*仅将 {{ currentyItem?.label }} 存入此地址</span>
|
|
|
+ </dt>
|
|
|
+ <dd v-for="(item, index) in addressList" :key="index">
|
|
|
+ <span>{{ item.address }}</span>
|
|
|
+ <Icon name="qr" @click="openQRcode(item.address)" />
|
|
|
+ <Icon name="link-o" :data-clipboard-text="item.address" v-copy="onCopy" />
|
|
|
+ </dd>
|
|
|
+ </dl>
|
|
|
+ <div class="g-layout-block g-layout-block--inset">
|
|
|
+ <Button type="primary" size="small" block @click="formRef?.submit">创建新地址</Button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </CellGroup>
|
|
|
+ <ActionSheet v-model:show="state.showSheet" title="选择存款网络">
|
|
|
+ <CellGroup style="min-height: 200px;">
|
|
|
+ <RadioGroup v-model="state.tokenId" v-if="walletTokens.length">
|
|
|
+ <template v-for="(item, index) in walletTokens" :key="index">
|
|
|
+ <Cell :title="item.name" :label="item.chain_id" :border="false" clickable center
|
|
|
+ @click="onRadioClick(item.id)">
|
|
|
+ <!-- <template #icon>
|
|
|
+ <Image fit="contain" :src="item.icon_url" width="28" height="28" round style="margin-right: 10px;" />
|
|
|
+ </template> -->
|
|
|
+ <template #right-icon>
|
|
|
+ <Radio :name="item.id" />
|
|
|
+ </template>
|
|
|
+ </Cell>
|
|
|
+ </template>
|
|
|
+ </RadioGroup>
|
|
|
+ <Empty description="暂无数据" v-else />
|
|
|
+ </CellGroup>
|
|
|
+ </ActionSheet>
|
|
|
+ <Dialog v-model:show="state.showDialog" :show-confirm-button="false" cancel-button-text="关闭" show-cancel-button
|
|
|
+ destroy-on-close>
|
|
|
+ <div class="wallet-deposit__qrcode">
|
|
|
+ <app-qrcode :text="state.qrContent" :width="240" />
|
|
|
+ </div>
|
|
|
+ </Dialog>
|
|
|
</app-view>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
import { shallowRef, computed, reactive, onMounted } from 'vue'
|
|
|
-import { FormInstance,FieldRule, Form, Button, CellGroup, Field, Cell } from 'vant'
|
|
|
-import { fullloading } from '@/utils/vant'
|
|
|
+import { FormInstance, FieldRule, Form, Button, CellGroup, Field, Cell, ActionSheet, RadioGroup, Radio, Icon, showSuccessToast, showFailToast, Dialog, Empty } from 'vant'
|
|
|
+import { dialog, fullloading } from '@/utils/vant'
|
|
|
import { formatDecimal } from '@/filters'
|
|
|
import { getDigitalCurrencyList } from '@/constants/order'
|
|
|
import { useRequest } from '@/hooks/request'
|
|
|
import { queryWalletAddress, queryWalletTokens, createDigitalWalletAddress } from '@/services/api/digital'
|
|
|
import { useNavigation } from '@mobile/router/navigation'
|
|
|
import { useSpotAccountStore } from '../components/spot/composables'
|
|
|
+import AppQrcode from '@/components/base/qrcode/index.vue'
|
|
|
import AppSelect from '@mobile/components/base/select/index.vue'
|
|
|
|
|
|
const { getQueryStringToNumber } = useNavigation()
|
|
|
@@ -49,11 +91,14 @@ const spotAccountStore = useSpotAccountStore()
|
|
|
const digitalCurrentyList = getDigitalCurrencyList()
|
|
|
|
|
|
const state = reactive({
|
|
|
+ showSheet: false,
|
|
|
+ showDialog: false,
|
|
|
+ qrContent: '',
|
|
|
currentyId: currencyId,
|
|
|
tokenId: 0
|
|
|
})
|
|
|
|
|
|
-const addressList = computed(() => walletAddress.value.filter((e) => e.token_id === tokenItem.value?.token_id))
|
|
|
+const addressList = computed(() => walletAddress.value.filter((e) => e.chain_id === tokenItem.value?.chain_id))
|
|
|
|
|
|
const currentyItem = computed(() => digitalCurrentyList.find((e) => e.enumitemname === state.currentyId))
|
|
|
|
|
|
@@ -69,9 +114,7 @@ const balance = computed(() => {
|
|
|
return formatDecimal(balance, accountItem.value?.currencydecimalplace)
|
|
|
})
|
|
|
|
|
|
-const { dataList: walletAddress, run: getWalletAddress } = useRequest(queryWalletAddress, {
|
|
|
- manual: true
|
|
|
-})
|
|
|
+const { dataList: walletAddress, run: getWalletAddress } = useRequest(queryWalletAddress)
|
|
|
|
|
|
const { dataList: walletTokens, run: getWalletTokens } = useRequest(queryWalletTokens, {
|
|
|
manual: true
|
|
|
@@ -101,32 +144,53 @@ const onCurrentyChange = () => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+const onRadioClick = (value: number) => {
|
|
|
+ state.tokenId = value
|
|
|
+ state.showSheet = false
|
|
|
+}
|
|
|
+
|
|
|
+const openQRcode = (address: string) => {
|
|
|
+ state.qrContent = address
|
|
|
+ state.showDialog = true
|
|
|
+}
|
|
|
+
|
|
|
+const onCopy = (status: boolean) => {
|
|
|
+ if (status) {
|
|
|
+ showSuccessToast({ message: '已复制,快去粘贴吧~' })
|
|
|
+ } else {
|
|
|
+ showFailToast('复制失败')
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
const onSubmit = () => {
|
|
|
- const { channel_code, chain_id, token_id } = tokenItem.value ?? {}
|
|
|
-
|
|
|
- fullloading((hideLoading) => {
|
|
|
- createDigitalWalletAddress({
|
|
|
- data: {
|
|
|
- DigitalAccountID: Number(accountItem.value?.digitalaccountid),
|
|
|
- ChannelCode: channel_code,
|
|
|
- ChainID: chain_id,
|
|
|
- TokenID: token_id,
|
|
|
- AddrType: 1
|
|
|
- }
|
|
|
- }).then(() => {
|
|
|
- hideLoading('创建成功', 'success')
|
|
|
- }).catch((err) => {
|
|
|
- hideLoading(err, 'fail')
|
|
|
+ dialog({
|
|
|
+ message: '确认创建新地址吗?',
|
|
|
+ showCancelButton: true,
|
|
|
+ }).then(() => {
|
|
|
+ const { channel_code, chain_id } = tokenItem.value ?? {}
|
|
|
+
|
|
|
+ fullloading((hideLoading) => {
|
|
|
+ createDigitalWalletAddress({
|
|
|
+ data: {
|
|
|
+ ChannelCode: channel_code,
|
|
|
+ ChainID: chain_id,
|
|
|
+ AddrType: 1
|
|
|
+ }
|
|
|
+ }).then(() => {
|
|
|
+ hideLoading('创建成功', 'success')
|
|
|
+ getWalletAddress()
|
|
|
+ }).catch((err) => {
|
|
|
+ hideLoading(err, 'fail')
|
|
|
+ })
|
|
|
})
|
|
|
})
|
|
|
}
|
|
|
|
|
|
onMounted(() => {
|
|
|
- const digitalaccountid = accountItem.value?.digitalaccountid
|
|
|
- if (digitalaccountid) {
|
|
|
- getWalletAddress({ digitalaccountid })
|
|
|
- }
|
|
|
-
|
|
|
onCurrentyChange()
|
|
|
})
|
|
|
-</script>
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+@import './index.less';
|
|
|
+</style>
|