You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
411 lines
13 KiB
411 lines
13 KiB
<template>
|
|
<div class="wallet-page">
|
|
<secondary-nav></secondary-nav>
|
|
<div class="container">
|
|
<div
|
|
class="w-100 d-flex justify-content-between align-items-center mb-3 mt-4"
|
|
>
|
|
<div class="h3">{{ $t("wallet.addressManagement1") }}</div>
|
|
<div class>
|
|
<button
|
|
type="button"
|
|
class="btn btn-success"
|
|
data-toggle="modal"
|
|
data-target="#editAddress"
|
|
@click="add"
|
|
>
|
|
<span class="ion-ios-add-circle-outline"></span>
|
|
{{ $t("wallet.addAddress") }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="panel-box">
|
|
<div class="heading">筛选器</div>
|
|
<div class="container">
|
|
<div class="row py-3">
|
|
<div class="form-group col-sm-3">
|
|
<label>搜索资产</label>
|
|
<el-select value='1' placeholder="请选择活动区域">
|
|
<el-option label="区域一" value="shanghai"></el-option>
|
|
<el-option label="区域二" value="beijing"></el-option>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
<div class="row">
|
|
<div class="col-md-12 mt15">
|
|
<div class="markets-pair-list mb-3">
|
|
<!-- <ul class="nav nav-pills" id="pills-tab" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" data-toggle="pill" href="#tab1" role="tab" aria-selected="false">地址列表</a>
|
|
</li>
|
|
</ul> -->
|
|
<div class="tab-content panel-box">
|
|
<div class="tab-pane fade show active" id="tab1" role="tabpanel">
|
|
<ul>
|
|
<li class="heading">
|
|
<span class="pr-2 border-right d-inline-block">{{
|
|
$t("wallet.assets")
|
|
}}</span>
|
|
<span class="pr-2 border-right d-inline-block">{{
|
|
$t("wallet.addressNum")
|
|
}}</span>
|
|
<span class="pr-2 d-inline-block">{{
|
|
$t("wallet.fee1")
|
|
}}</span>
|
|
</li>
|
|
|
|
<el-collapse accordion>
|
|
<el-collapse-item
|
|
v-for="coin in userAdressList"
|
|
:key="coin.coin_id"
|
|
>
|
|
<li slot="title" class="p-2">
|
|
<span>
|
|
<img :src="coin.icon" with="20" />
|
|
{{ coin.coin_name }} ( {{ coin.full_name }} )
|
|
</span>
|
|
<span>
|
|
{{ coin.total_address }}
|
|
</span>
|
|
<span>
|
|
{{ coin.withdrawal_fee }}
|
|
</span>
|
|
</li>
|
|
<table class="table stripe">
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>{{ $t("wallet.creationTime") }}</th>
|
|
<th>{{ $t("wallet.detailAddress") }}</th>
|
|
<th>{{ $t("wallet.remarks1") }}</th>
|
|
<th>{{ $t("wallet.operating") }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr
|
|
v-for="(address, index) in coin.list"
|
|
:key="address.id"
|
|
>
|
|
<td>{{ index + 1 }}</td>
|
|
<td>
|
|
{{ address.datetime | parseTime }}
|
|
</td>
|
|
<td>
|
|
<span :id="`withdrawal-address-${index}`">
|
|
{{ address.address }}
|
|
</span>
|
|
<!-- 使用clipboard-target指定复制的元素 -->
|
|
<span
|
|
:class="`my-pop-${index}`"
|
|
data-toggle="popover"
|
|
data-placement="bottom"
|
|
:data-content="$t('wallet.complete') + '!'"
|
|
>
|
|
<a
|
|
href="javascript:void 0"
|
|
:data-clipboard-target="`#withdrawal-address-${index}`"
|
|
alt="Copy to clipboard"
|
|
:data-index="index"
|
|
class="btn btn-outline-light btn-sm withdrawal-control"
|
|
>{{ $t("wallet.copy") }}</a
|
|
>
|
|
</span>
|
|
</td>
|
|
<td>{{ address.address_note }}</td>
|
|
<td class="text-right">
|
|
<!-- <div class="btn-group btn-group-sm text-nowrap" role="group" aria-label="Basic example"> -->
|
|
<button
|
|
type="button"
|
|
class="btn btn-sm btn-info"
|
|
data-toggle="modal"
|
|
data-target="#editAddress"
|
|
@click="edit(address)"
|
|
>
|
|
{{ $t("wallet.editAddress") }}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="btn btn-sm btn-danger"
|
|
@click="del(address.id)"
|
|
>
|
|
{{ $t("wallet.deleteAddress") }}
|
|
</button>
|
|
<!-- </div> -->
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="modal fade"
|
|
id="editAddress"
|
|
tabindex="-1"
|
|
role="dialog"
|
|
aria-labelledby="exampleModalLabel"
|
|
aria-hidden="true"
|
|
>
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content bg-panel">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalLabel">
|
|
{{ action == "add" ? $t("wallet.add") : $t("wallet.edit")
|
|
}}{{ $t("wallet.address") }}
|
|
</h5>
|
|
<button
|
|
type="button"
|
|
class="close"
|
|
data-dismiss="modal"
|
|
aria-label="Close"
|
|
>
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form>
|
|
<div class="form-group">
|
|
<label for="recipient-assets" class="col-form-label"
|
|
>{{ $t("wallet.assets") }}:</label
|
|
>
|
|
<div>
|
|
<!-- 编辑时禁止选择币种 -->
|
|
<el-select
|
|
:placeholder="$t('wallet.selectAssets')"
|
|
v-model="userAdress.coin_name"
|
|
:disabled="action == 'edit'"
|
|
>
|
|
<el-option
|
|
:label="coin.coin_name"
|
|
:value="coin.coin_name"
|
|
v-for="coin in coinsForWithdrawal"
|
|
:key="coin.coin_id"
|
|
>
|
|
<img :src="coin.image" width="20" />
|
|
{{ coin.coin_name }}({{ coin.full_name }})
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="recipient-adress" class="col-form-label"
|
|
>{{ $t("wallet.drawAddress") }}:</label
|
|
>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="recipient-adress"
|
|
v-model="userAdress.address"
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="comments" class="col-form-label"
|
|
>{{ $t("wallet.addressRemarks") }}:</label
|
|
>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="comments"
|
|
v-model="userAdress.address_note"
|
|
/>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button
|
|
type="button"
|
|
class="btn btn-secondary rounded-pill"
|
|
data-dismiss="modal"
|
|
>
|
|
{{ $t("common.cancelBtn") }}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="btn btn-primary rounded-pill"
|
|
@click="handleUserAddress"
|
|
>
|
|
{{ $t("common.confirmBtn") }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Wallet from "@/api/wallet";
|
|
import ClipboardJS from "clipboard";
|
|
export default {
|
|
data() {
|
|
return {
|
|
action: null,
|
|
userAdressList: [], // 用户币种地址集合
|
|
userAdress: {
|
|
// 添加或编辑地址集合
|
|
address: "",
|
|
coin_name: "",
|
|
address_note: "",
|
|
},
|
|
editAddressId: null,
|
|
coinsForWithdrawal: [], // 所有提币地址
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
getUserAdressList() {
|
|
Wallet.getUserWithdrawAdress()
|
|
.then((data) => {
|
|
this.userAdressList = data;
|
|
})
|
|
.catch((err) => {});
|
|
},
|
|
|
|
getCoinsForWithdraw() {
|
|
Wallet.withdrawalSelectAddress()
|
|
.then((data) => {
|
|
this.coinsForWithdrawal = data.list;
|
|
})
|
|
.catch((err) => {});
|
|
},
|
|
|
|
// 清除模态框数据
|
|
resetModal() {
|
|
this.userAdress = {
|
|
address: "",
|
|
coin_name: "",
|
|
address_note: "",
|
|
};
|
|
},
|
|
|
|
add() {
|
|
// 设置动作
|
|
this.action = "add";
|
|
// 清空输入框
|
|
this.resetModal();
|
|
// 查询币种
|
|
if (!this.coinsForWithdrawal.length) this.getCoinsForWithdraw();
|
|
},
|
|
|
|
edit(item) {
|
|
this.action = "edit";
|
|
// 写入记录值
|
|
this.userAdress = item;
|
|
this.editAddressId = item.id;
|
|
if (!this.coinsForWithdrawal.length) this.getCoinsForWithdraw();
|
|
},
|
|
|
|
del(id) {
|
|
this.$confirm(this.$t("wallet.remarksDelete") + "?",{
|
|
confirmButtonText:this.$t('common.confirmBtn'),
|
|
cancelButtonText: this.$t('common.cancelBtn')
|
|
})
|
|
.then(() => {
|
|
Wallet.withdrawalAddressDeleted({ id })
|
|
.then((res) => {
|
|
this.$message({
|
|
type: "success",
|
|
message: this.$t("wallet.optionSuccess") + "！",
|
|
});
|
|
// 更新页面数据
|
|
this.getUserAdressList();
|
|
})
|
|
.catch((err) => {});
|
|
})
|
|
.catch((err) => {
|
|
this.$message({
|
|
type: "info",
|
|
message: err.message,
|
|
});
|
|
});
|
|
},
|
|
|
|
handleUserAddress() {
|
|
let pms;
|
|
switch (this.action) {
|
|
case "add":
|
|
pms = Wallet.addWithdrawAddress(this.userAdress);
|
|
break;
|
|
case "edit":
|
|
pms = Wallet.withdrawalAddressModify(
|
|
Object.assign(
|
|
{
|
|
id: this.editAddressId,
|
|
},
|
|
this.userAdress
|
|
)
|
|
);
|
|
break;
|
|
}
|
|
|
|
pms
|
|
.then((res) => {
|
|
if (res == true) {
|
|
this.$message({
|
|
type: "success",
|
|
message: this.$t("wallet.optionSuccess") + "！",
|
|
});
|
|
// 更新页面数据
|
|
this.getUserAdressList();
|
|
// 清空订单状态
|
|
this.resetModal();
|
|
// 关闭模态框
|
|
$("#editAddress").modal("hide");
|
|
}
|
|
})
|
|
.catch((err) => {});
|
|
},
|
|
},
|
|
|
|
created() {
|
|
this.getUserAdressList();
|
|
},
|
|
|
|
mounted() {
|
|
const clipboard = new ClipboardJS(".withdrawal-control");
|
|
|
|
clipboard.on("success", function (e) {
|
|
let index = e.trigger.dataset.index;
|
|
|
|
$(`.my-pop-${index}`).popover("show");
|
|
setTimeout(function () {
|
|
$(`.my-pop-${index}`).popover("hide");
|
|
}, 500);
|
|
// 清除选取内容
|
|
// e.clearSelection();
|
|
});
|
|
|
|
clipboard.on("error", function (e) {
|
|
// console.error('Action:', e.action);
|
|
// console.error('Trigger:', e.trigger);
|
|
});
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
::v-deep {
|
|
.el-collapse {
|
|
border-top-color: #4e4e5d;
|
|
border-bottom-color: #4e4e5d;
|
|
}
|
|
.el-collapse-item__header {
|
|
background: transparent;
|
|
color: inherit;
|
|
border-color:#4e4e5d;
|
|
}
|
|
.el-collapse-item__wrap{
|
|
background: transparent;
|
|
border-color:#4e4e5d;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|