123

dcc

2024-06-29 68a34d95db63a264e7a577051d586ea496c63ca0

 src/page/exchange/exchangeSubmit.vue

@@ -1,151 +1,192 @@
<template>
    <div class="exchangeSubmit">
        <assets-head title="" :goHome="true" />
        <div class="flex flex-col items-center">
            <img src="../../assets/image/exchange/icon_9.png" v-if="!isLoading" alt="logo" class="w-150 h-150 mt-120" />
            <img src="../../assets/image/exchange/icon_8.png" v-if="isLoading" alt="logo" class="w-100 h-150 mt-120" />
            <p class="font-38 text-center pt-60 textColor" v-if="!isLoading">{{ $t('闪兑成功') }}</p>
            <!-- <p class="font-50 mt-23 text-center textColor">{{ detail.rate * detail.volume }}<span class="text-grey font-35">
  <div class="exchangeSubmit">
    <assets-head title="" :goHome="true" />
    <div class="flex flex-col items-center">
      <img
        src="../../assets/image/exchange/icon_9.png"
        v-if="!isLoading"
        alt="logo"
        class="w-150 h-150 mt-120"
      />
      <img
        src="../../assets/image/exchange/icon_8.png"
        v-if="isLoading"
        alt="logo"
        class="w-100 h-150 mt-120"
      />
      <p class="font-38 text-center pt-60 textColor" v-if="!isLoading">
        {{ $t("闪兑成功") }}
      </p>
      <!-- <p class="font-50 mt-23 text-center textColor">{{ detail.rate * detail.volume }}<span class="text-grey font-35">
                    {{ detail.symbol_to && detail.symbol_to.toUpperCase() }}</span></p> -->
            <span class="text-grey font-35 pt-60" v-if="isLoading">
                {{ $t('结算中') }}
            </span>
      <span class="text-grey font-35 pt-60" v-if="isLoading">
        {{ $t("结算中") }}
      </span>

            <ul class=" px-30 pt-20 pb-34 mt-53 tabBackground rounded flex-1 w-full box-border" style="width: 90%;">
                <li class="flex items-center">
                    <div class="flex-1 textColor text-left">
                        <div class="text-grey font-28 mt-20">{{ $t('从') }}</div>
                        <div class="font-30 mt-30">{{ detail.volume }}{{ detail.symbol && detail.symbol.toUpperCase() }}
                        </div>
                    </div>
                    <img src="../../assets/image/exchange/icon_6.png" class="w-30 h-20" style="margin-top:-28px" />
      <ul
        class="px-30 pt-20 pb-34 mt-53 tabBackground rounded flex-1 w-full box-border"
        style="width: 90%"
      >
        <li class="flex items-center">
          <div class="flex-1 textColor text-left">
            <div class="text-grey font-28 mt-20">{{ $t("从") }}</div>
            <div class="font-30 mt-30">
              {{ detail.volume
              }}{{ detail.symbol && detail.symbol.toUpperCase() }}
            </div>
          </div>
          <img
            src="../../assets/image/exchange/icon_6.png"
            class="w-30 h-20"
            style="margin-top: -28px"
          />

                    <div class="flex-1 textColor text-right">
                        <div class="text-grey font-28 mt-20">{{ $t('至') }}</div>
                        <div class="font-30 mt-30" v-if="detail.volume">{{ detail.volume * detail.rate }}{{ detail.symbol_to
                            && detail.symbol_to.toUpperCase() }}</div>
                    </div>
                </li>
                <!-- <li class="flex justify-between font-28 pt-20  mt-40  textColor">
          <div class="flex-1 textColor text-right">
            <div class="text-grey font-28 mt-20">{{ $t("至") }}</div>
            <div class="font-30 mt-30" v-if="detail.volume">
              {{ detail.volume * detail.rate
              }}{{ detail.symbol_to && detail.symbol_to.toUpperCase() }}
            </div>
          </div>
        </li>
        <!-- <li class="flex justify-between font-28 pt-20  mt-40  textColor">
                        <span class="text-grey">{{ $t('交易手续费') }}</span>
                        <span class="color-green">1</span>
                    </li> -->
                <li class="flex justify-between font-28 pt-20  textColor">
                    <span class="text-grey">{{ $t('类型') }}</span>
                    <span class="textColor">{{ $t('市价') }}</span>
                </li>
                <!-- <li class="flex justify-between font-28 pt-25 mt-40">
        <li class="flex justify-between font-28 pt-20 textColor">
          <span class="text-grey">{{ $t("类型") }}</span>
          <span class="textColor">{{ $t("市价") }}</span>
        </li>
        <!-- <li class="flex justify-between font-28 pt-25 mt-40">
                    <span class="text-grey">{{ $t('闪兑自') }}</span>
                    <span class="textColor">{{ detail.volume }} {{ detail.symbol && detail.symbol.toUpperCase() }}</span>
                </li> -->
                <li class="flex justify-between font-28 pt-20  textColor">
                    <span class="text-grey">{{ $t('汇率') }}</span>
                    <span class="textColor">{{ toValue }}≈{{ formValue }}
                        <img src="../../assets/image/exchange/icon_4.png" @click="convert" class="w-22 h-22"
                            style="margin-top:-28px" />
                    </span>
                </li>

            </ul>
            <p class="tips px-35" v-if="isLoading">
                <van-icon name="warning-o" />{{ $t('您的订单正在处理中，可能需要5分钟才能完成。感谢您的耐心等待。您可以在订单历史中查看状态。') }}
            </p>
            <div class="h-100 rounded flex justify-between px-32 box-border items-center mt-90 mb-48 text-white w-full">
                <p class="w-360 h-80 rounded flex justify-center items-center bgDark" @click="route('/home')">
                    {{ $t('返回首页') }}</p>
                <p class="w-360 h-80 rounded btnMain text-white flex justify-center items-center"
                    @click="route('/exchange/exchangeHistory')">
                    {{ $t('查看历史') }}</p>
            </div>
        </div>
        <li class="flex justify-between font-28 pt-20 textColor">
          <span class="text-grey">{{ $t("汇率") }}</span>
          <span class="textColor"
            >{{ toValue }}≈{{ formValue }}
            <img
              src="../../assets/image/exchange/icon_4.png"
              @click="convert"
              class="w-22 h-22"
              style="margin-top: -28px"
            />
          </span>
        </li>
      </ul>
      <p class="tips px-35" v-if="isLoading">
        <van-icon name="warning-o" />{{
          $t(
            "您的订单正在处理中，可能需要5分钟才能完成。感谢您的耐心等待。您可以在订单历史中查看状态。"
          )
        }}
      </p>
      <div
        class="h-100 rounded flex justify-between px-32 box-border items-center mt-90 mb-48 text-white w-full"
      >
        <p
          class="w-360 h-80 rounded flex justify-center items-center bgDark"
          @click="route('/home')"
        >
          {{ $t("返回首页") }}
        </p>
        <p
          class="w-360 h-80 rounded btnMain text-white flex justify-center items-center"
          @click="route('/exchange/exchangeHistory')"
        >
          {{ $t("查看历史") }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import assetsHead from "@/components/assets-head";
import { Image as VanImage } from "vant";
export default {
    data() {
        return {
            detail: {},
            toValue: '',
            formValue: '',
            isLoading: true
        }
  data() {
    return {
      detail: {},
      toValue: "",
      formValue: "",
      isLoading: true,
    };
  },
  components: {
    assetsHead,
  },
  created() {
    setTimeout(() => {
      this.isLoading = false;
    }, 2000);
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    components: {
        assetsHead,
    route(path) {
      this.$router.push(path);
    },
    created() {
        setTimeout(() => {
            this.isLoading = false
        }, 2000);
    convert() {
      [this.toValue, this.formValue] = [this.formValue, this.toValue];
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1)
        },
        route(path) {
            this.$router.push(path)
        },
        convert() {
            [this.toValue, this.formValue] = [this.formValue, this.toValue]
        }
    },
    beforeRouteEnter(to, from, next) {
        const { query: { data } } = to
        next(vm => {
            vm.detail = JSON.parse(data)
            vm.toValue = vm.detail.volume + vm.detail.symbol.toUpperCase()
            vm.formValue = vm.detail.rate + vm.detail.symbol_to.toUpperCase()
        })
    }
}
  },
  beforeRouteEnter(to, from, next) {
    const {
      query: { data },
    } = to;
    next((vm) => {
      vm.detail = JSON.parse(data);
      vm.toValue = vm.detail.volume + vm.detail.symbol.toUpperCase();
      vm.formValue = vm.detail.rate + vm.detail.symbol_to.toUpperCase();
    });
  },
};
</script>
<style lang="scss" scoped>
.exchangeSubmit {
    width: 100%;
    height: 100vh;
  width: 100%;
  height: 100vh;

    @include themify() {
        background: themed("main_background");
    }
  @include themify() {
    background: themed("main_background");
  }

    box-sizing: border-box;
  box-sizing: border-box;
}

.bg-grey-light {
    background: #F5F5F5;
  background: #f5f5f5;
}

.bg-grey-dark {
    background: #C8CAD2;
  background: #c8cad2;
}

::v-deep .van-nav-bar {
    @include themify() {
        background: themed("main_background");
    }
  @include themify() {
    background: themed("main_background");
  }
}

.bgDark {
    @include themify() {
        background: themed("tab_background2");
    }
  @include themify() {
    background: themed("tab_background2");
  }
}

.btnMain {
    background: linear-gradient(90deg, #2C64D4 0%, #38AEEA 100%);
  background: linear-gradient(90deg, #2c64d4 0%, #38aeea 100%);
}


.color-green {
    color: #00B087;
  color: #00b087;
}

.tips {
    color: #989899;
    font-size: 26px;
    margin-top: 30px;
  color: #989899;
  font-size: 26px;
  margin-top: 30px;
}
</style>