From 3ed2cb78a690b64c3b2646d35e1500081186dfa3 Mon Sep 17 00:00:00 2001
From: huzheng12 <52150713+huzheng12@users.noreply.github.com>
Date: Mon, 06 May 2024 00:21:32 +0800
Subject: [PATCH] first commit
---
src/page/recharge/rechargeDetail.vue | 261 ++++++++++++++++++++++++++++-----------------------
1 files changed, 143 insertions(+), 118 deletions(-)
diff --git a/src/page/recharge/rechargeDetail.vue b/src/page/recharge/rechargeDetail.vue
index 4a80104..6ffb80c 100644
--- a/src/page/recharge/rechargeDetail.vue
+++ b/src/page/recharge/rechargeDetail.vue
@@ -1,159 +1,184 @@
<template>
- <div class="rechargeDetail">
- <van-nav-bar :title="type2 + $t('详情')" left-arrow @click-left="onClickLeft" />
- <div class="flex flex-col items-center justify-center">
- <div class="text-grey font-32 num-text">{{ $t('数量') }}</div>
- <div class="font-55 textColor">
- <span class="font-bold">{{ info.amount }}</span>
- <span class="font-45 ml10">{{ info.coin }}</span>
- </div>
- <div class="flex items-center justify-center mt53 mb16">
- <img :src="require(`@/assets/image/assets-center/${status[info.state].split('_')[1]}.png`)" width="18"
- height="18" />
- <span class="ml10 font-32 textColor">{{ type2 }}{{ status[info.state] && status[info.state].split('_')[0]
- }}</span>
- </div>
- <div class="text-grey font-26 pl-30 pr-30">
- {{ $t('数字币已经') }}{{ $t(type2) }}{{ status[info.state] &&
- status[info.state].split('_')[0] }}{{ $t('。您可以在钱包账户中查看详情。') }}
- </div>
- </div>
- <div class="border-light-grey mt42"></div>
- <div class="font-30 pl-30 pr-30 mt53">
- <div class="flex justify-between mb74">
- <div class="text-grey">{{ $t('确认数') }}</div>
- <div class="textColor">12/12</div>
- </div>
- <div class="flex justify-between mb74">
- <div class="text-grey">{{ type2 }}{{ $t('账户') }}</div>
- <div class="textColor">{{ $t('钱包账户') }}</div>
- </div>
- <div class="flex justify-between mb74">
- <div class="text-grey">{{ $t('转账网络') }}</div>
- <div class="textColor">{{ info.coin_blockchain }}</div>
- </div>
- <div class="flex justify-between mb74">
- <div class="text-grey pr-20">{{ $t('地址') }}</div>
- <div class="flex">
- <div class="font-30 text-underline textColor break-word">{{ info.from || info.to }}</div>
- <img src="../../assets/image/assets-center/copy.png" width="15" height="15" class="ml10 ml-20"
- @click="copy(info.from || info.to)" />
- </div>
- </div>
- <!-- <div class="flex justify-between mb74">-->
- <!-- <div class="text-grey">{{ $t('交易哈希') }}</div>-->
- <!-- <div class="flex">-->
- <!-- <div class="font-30 text-underline">{{info.tx || '-'}}</div>-->
- <!-- <img src="../../assets/image/assets-center/copy.png" width="15" height="15" class="ml10 ml-20" @click="copy(info.tx)"/>-->
- <!-- </div>-->
- <!-- </div>-->
- <div class="flex justify-between mb74">
- <div class="text-grey">{{ $t('日期') }}</div>
- <div class="textColor">{{ info.create_time }}</div>
- </div>
- <div class="flex justify-between mb74">
- <div class="text-grey">{{ $t('备注') }}</div>
- <div class="textColor">{{ info.failure_msg || '-' }}</div>
- </div>
- </div>
-
+ <div class="rechargeDetail">
+ <van-nav-bar
+ :title="type2 + $t('详情')"
+ left-arrow
+ @click-left="onClickLeft"
+ />
+ <div class="flex flex-col items-center justify-center">
+ <div class="text-grey font-32 num-text">{{ $t("数量") }}</div>
+ <div class="font-55 textColor">
+ <span class="font-bold">{{ info.amount }}</span>
+ <span class="font-45 ml10">{{ info.coin }}</span>
+ </div>
+ <div class="flex items-center justify-center mt53 mb16">
+ <img
+ :src="
+ require(`@/assets/image/assets-center/${
+ status[info.state].split('_')[1]
+ }.png`)
+ "
+ width="18"
+ height="18"
+ />
+ <span class="ml10 font-32 textColor"
+ >{{ type2
+ }}{{ status[info.state] && status[info.state].split("_")[0] }}</span
+ >
+ </div>
+ <div class="text-grey font-26 pl-30 pr-30">
+ {{ $t("数字币已经") }}{{ $t(type2)
+ }}{{ status[info.state] && status[info.state].split("_")[0]
+ }}{{ $t("。您可以在钱包账户中查看详情。") }}
+ </div>
</div>
+ <div class="border-light-grey mt42"></div>
+ <div class="font-30 pl-30 pr-30 mt53">
+ <div class="flex justify-between mb74">
+ <div class="text-grey">{{ $t("确认数") }}</div>
+ <div class="textColor">12/12</div>
+ </div>
+ <div class="flex justify-between mb74">
+ <div class="text-grey">{{ type2 }}{{ $t("账户") }}</div>
+ <div class="textColor">{{ $t("钱包账户") }}</div>
+ </div>
+ <div class="flex justify-between mb74">
+ <div class="text-grey">{{ $t("转账网络") }}</div>
+ <div class="textColor">{{ info.coin_blockchain }}</div>
+ </div>
+ <div class="flex justify-between mb74">
+ <div class="text-grey pr-20">{{ $t("地址") }}</div>
+ <div class="flex">
+ <div class="font-30 text-underline textColor break-word">
+ {{ info.from || info.to }}
+ </div>
+ <span @click="copy(info.from || info.to)">
+ <img
+ src="../../assets/image/assets-center/copy.png"
+ width="15"
+ height="15"
+ class="ml10 ml-20"
+ />
+ </span>
+ </div>
+ </div>
+ <!-- <div class="flex justify-between mb74">-->
+ <!-- <div class="text-grey">{{ $t('交易哈希') }}</div>-->
+ <!-- <div class="flex">-->
+ <!-- <div class="font-30 text-underline">{{info.tx || '-'}}</div>-->
+ <!-- <img src="../../assets/image/assets-center/copy.png" width="15" height="15" class="ml10 ml-20" @click="copy(info.tx)"/>-->
+ <!-- </div>-->
+ <!-- </div>-->
+ <div class="flex justify-between mb74">
+ <div class="text-grey">{{ $t("日期") }}</div>
+ <div class="textColor">{{ info.create_time }}</div>
+ </div>
+ <div class="flex justify-between mb74">
+ <div class="text-grey">{{ $t("备注") }}</div>
+ <div class="textColor">{{ info.failure_msg || "-" }}</div>
+ </div>
+ </div>
+ </div>
</template>
<script>
-import { _rechargeDetail, _withdrawDetail } from '@/API/fund.api'
+import { _rechargeDetail, _withdrawDetail } from "@/API/fund.api";
export default {
- name: "rechargeDetail",
- props: {
- type: {
- type: String,
- default: '充值'
- }
+ name: "rechargeDetail",
+ props: {
+ type: {
+ type: String,
+ default: "充值",
},
- computed: {
- type2() {
- let res
- if (this.type === '充值') {
- res = this.$t('充值') + ' '
- } else {
- res = this.$t('提现') + ' '
- }
- return res
- },
+ },
+ computed: {
+ type2() {
+ let res;
+ if (this.type === "充值") {
+ res = this.$t("充值") + " ";
+ } else {
+ res = this.$t("提现") + " ";
+ }
+ return res;
},
- data() {
- return {
- order_no: '',
- info: {
- state: 0
- },
- status: [this.$t('确定中') + '_identifing', this.$t('成功') + '_small-success', this.$t('失败') + '_icon-close']
- }
+ },
+ data() {
+ return {
+ order_no: "",
+ info: {
+ state: 0,
+ },
+ status: [
+ this.$t("确定中") + "_identifing",
+ this.$t("成功") + "_small-success",
+ this.$t("失败") + "_icon-close",
+ ],
+ };
+ },
+ created() {
+ this.order_no = this.$route.query.order_no;
+ const _api = this.type === "充值" ? _rechargeDetail : _withdrawDetail;
+ _api(this.order_no).then((data) => {
+ this.info = data;
+ });
+ },
+ methods: {
+ copy(val) {
+ if (!val) {
+ return;
+ }
+ navigator.clipboard.writeText(val).then(() => {
+ this.$toast.success(this.$t("已复制"));
+ });
},
- created() {
- this.order_no = this.$route.query.order_no
- const _api = this.type === '充值' ? _rechargeDetail : _withdrawDetail
- _api(this.order_no).then(data => {
- this.info = data
- })
+ onClickLeft() {
+ this.$router.go(-1);
},
- methods: {
- copy(val) {
- if (!val) {
- return
- }
- navigator.clipboard.writeText(val).then(() => {
- this.$toast.success(this.$t('已复制'))
- })
- },
- onClickLeft() {
- this.$router.go(-1);
- },
- }
-}
+ },
+};
</script>
<style lang="scss" scoped>
.rechargeDetail {
- width: 100%;
- box-sizing: border-box;
+ width: 100%;
+ box-sizing: border-box;
- ::v-deep .van-hairline--bottom::after {
- @include themify() {
- border-color: themed("border_color");
- }
+ ::v-deep .van-hairline--bottom::after {
+ @include themify() {
+ border-color: themed("border_color");
}
+ }
}
.num-text {
- margin-top: 70px;
- margin-bottom: 30px;
+ margin-top: 70px;
+ margin-bottom: 30px;
}
.mb53 {
- margin-bottom: 53px;
+ margin-bottom: 53px;
}
.ml10 {
- margin-left: 10px;
+ margin-left: 10px;
}
.mt53 {
- margin-top: 53px;
+ margin-top: 53px;
}
.mb16 {
- margin-bottom: 16px;
+ margin-bottom: 16px;
}
.mt42 {
- margin-top: 42px;
+ margin-top: 42px;
}
.mb74 {
- margin-bottom: 74px;
+ margin-bottom: 74px;
}
.text-underline {
- text-decoration: underline;
+ text-decoration: underline;
}
</style>
--
Gitblit v1.9.3