first commit

huzheng12

2024-05-06 3ed2cb78a690b64c3b2646d35e1500081186dfa3

 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>