新币+dapp app 前端
zzzz
2024-04-08 b78dbd7d2e97cd0d698bc67639d93067bb56781c
src/page/order/MiningMachineOrder/index.vue
@@ -1,144 +1,181 @@
<template>
  <div id="financialOrder" class="financialOrder">
    <assets-head :title="title" :back-func="backFunc"></assets-head>
    <div class="box-border  ">
    <div class="box-border">
      <div class="flex flex-col justify-center items-center px-33">
        <div class="font-32 font-400 my-34 textColor">{{ $t('锁仓金额') }}(USDT)</div>
        <div class="font-32 font-400 my-34 textColor">
          {{ $t("锁仓金额") }}(USDT)
        </div>
        <div class="font-66 mb-65 textColor">{{ dataObj.amount }}</div>
      </div>
      <div class=" px-33 boderT12">
      <div class="px-33 boderT12">
        <div class="flex justify-between flex-row items-center h-98">
          <div class="font-31 font-400 text-grey">{{ $t('锁仓时间') }}</div>
          <div class="font-31 font-400 textColor">{{ dataObj.cycle == 0 ? $t('无限期') : dataObj.cycle + $t('天') }}</div>
          <div class="font-31 font-400 text-grey">{{ $t("锁仓时间") }}</div>
          <div class="font-31 font-400 textColor">
            {{ dataObj.cycle == 0 ? $t("无限期") : dataObj.cycle + $t("天") }}
          </div>
        </div>
        <div class="flex justify-between items-center h-98">
          <div class="font-31 font-400 text-grey">{{ $t('当日收益') }}</div>
          <div class="font-31 font-400 textColor">{{ dataObj.profit_may / 30 }}&nbsp;{{ dataObj.outputCurrency ?
            dataObj.outputCurrency.toUpperCase() : 'USDT' }}</div>
          <div class="font-31 font-400 text-grey">{{ $t("当日收益") }}</div>
          <div class="font-31 font-400 textColor">
            {{ dataObj.profit_may / 30 }}&nbsp;{{
              dataObj.outputCurrency
                ? dataObj.outputCurrency.toUpperCase()
                : "USDT"
            }}
          </div>
        </div>
        <div class="flex justify-between items-center h-98">
          <div class="font-31 font-400 text-grey">{{ $t('已获收益') }}</div>
          <div class="font-31 font-400 text-grey">{{ $t("已获收益") }}</div>
          <div class="font-31 font-400 textColor">{{ dataObj.profit }}</div>
        </div>
        <div class="flex justify-between items-center h-98">
          <div class="font-31 font-400 text-grey">{{ $t('剩余天数') }}</div>
          <div class="font-31 font-400 textColor">{{ dataObj.days + $t('天') }}</div>
          <div class="font-31 font-400 text-grey">{{ $t("剩余天数") }}</div>
          <div class="font-31 font-400 textColor">
            {{ dataObj.days + $t("天") }}
          </div>
        </div>
      </div>
      <div class="px-33 boderT12">
        <div class="flex justify-between items-center h-98">
          <div class="font-31 font-400 text-grey">30{{ $t('天') }}{{ $t('预期收益') }}</div>
          <div class="font-31 font-400 textColor">{{ dataObj.profit_may }}&nbsp;{{ dataObj.outputCurrency ?
            dataObj.outputCurrency.toUpperCase() : 'USDT' }}</div>
          <div class="font-31 font-400 text-grey">
            30{{ $t("天") }}{{ $t("预期收益") }}
          </div>
          <div class="font-31 font-400 textColor">
            {{ dataObj.profit_may }}&nbsp;{{
              dataObj.outputCurrency
                ? dataObj.outputCurrency.toUpperCase()
                : "USDT"
            }}
          </div>
        </div>
        <div class="flex justify-between items-center h-98">
          <div class="font-31 font-400 text-grey">{{ $t('日收益率') }}</div>
          <div class="font-31 font-400 textColor">{{ dataObj.daily_rate }}%</div>
          <div class="font-31 font-400 text-grey">{{ $t("日收益率") }}</div>
          <div class="font-31 font-400 textColor">
            {{ dataObj.daily_rate }}%
          </div>
        </div>
      </div>
      <div class="px-33 boderT12">
        <div class="flex justify-between items-center h-98">
          <div class="font-31 font-400 text-grey">{{ $t('起息时间') }}</div>
          <div class="font-31 font-400 textColor">{{ dataObj.earn_timeStr }}</div>
          <div class="font-31 font-400 text-grey">{{ $t("起息时间") }}</div>
          <div class="font-31 font-400 textColor">
            {{ dataObj.earn_timeStr }}
          </div>
        </div>
        <div class="flex justify-between items-center h-98">
          <div class="font-31 font-400 text-grey">{{ $t('到期时间') }}</div>
          <div class="font-31 font-400 textColor">{{ dataObj.stop_timeStr ? dataObj.stop_timeStr : '--' }}</div>
          <div class="font-31 font-400 text-grey">{{ $t("到期时间") }}</div>
          <div class="font-31 font-400 textColor">
            {{
              $moment(dataObj.earn_timeStr)
                .add(dataObj.days, "days")
                .format("YYYY-MM-DD")
            }}
          </div>
        </div>
      </div>
      <div class="px-33 boderT12">
        <div class="flex justify-between items-center h-98">
          <div class="font-31 font-400 text-grey">{{ $t('订单编号') }}</div>
          <div class="font-31 font-400 text-grey">{{ $t("订单编号") }}</div>
          <div class="font-31 font-400 textColor">{{ dataObj.order_no }}</div>
        </div>
        <div class="flex justify-between items-center h-98">
          <div class="font-31 font-400 text-grey">{{ $t('订单时间') }}</div>
          <div class="font-31 font-400 textColor">{{ dataObj.create_timeStr }}</div>
          <div class="font-31 font-400 text-grey">{{ $t("订单时间") }}</div>
          <div class="font-31 font-400 textColor">
            {{ dataObj.create_timeStr }}
          </div>
        </div>
      </div>
    </div>
    <button v-if="this.showBtn" @click="ransom"
    <button
      v-if="this.showBtn"
      @click="ransom"
      class="text-white btnMain h-97 lh-97 w-762 rounded-lg text-center fixed wz border-none"
      :disabled="!dataObj.can_close" :class="!dataObj.can_close ? 'greyBg textColor1' : ''">{{ $t('我要赎回') }}
      :disabled="!dataObj.can_close"
      :class="!dataObj.can_close ? 'greyBg textColor1' : ''"
    >
      {{ $t("我要赎回") }}
    </button>
  </div>
</template>
<script>
import assetsHead from '@/components/assets-head'
import assetsHead from "@/components/assets-head";
import { ransomMachineProduct, getMinerorder } from "@/API/financialManagement";
import dayjs from "dayjs";
export default {
  name: "index",
  components: {
    assetsHead
    assetsHead,
  },
  data() {
    return {
      type: '',
      order_no: '',
      type: "",
      order_no: "",
      showBtn: false,
      title: '',
      title: "",
      dataObj: {
        amount: 0,
        cycle: '',
        daily_profit: '',
        profit: '',
        days: '',
        daily_rate: '',
        earn_time: '',
        stop_time: '',
        order_no: '',
        create_time: ''
      }
    }
        cycle: "",
        daily_profit: "",
        profit: "",
        days: "",
        daily_rate: "",
        earn_time: "",
        stop_time: "",
        order_no: "",
        create_time: "",
      },
    };
  },
  filters: {
    timeFomat(value) {
      return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
    }
      return dayjs(value).format("YYYY-MM-DD HH:mm:ss");
    },
  },
  mounted() {
    this.type = this.$route.query.type
    this.order_no = this.$route.query.order_no
    this.showBtn = this.$route.query.showBtn
    this.getOrderDetail()
    this.type = this.$route.query.type;
    this.order_no = this.$route.query.order_no;
    this.showBtn = this.$route.query.showBtn;
    this.getOrderDetail();
  },
  methods: {
    backFunc() {
      this.$router.push({
        path: '/funds',
        path: "/funds",
        query: {
          tab: 3,
          index: 1 // 0: 查看理财订单 1: 矿机
        }
      })
          index: 1, // 0: 查看理财订单 1: 矿机
        },
      });
    },
    ransom() { // 赎回
    ransom() {
      // 赎回
      ransomMachineProduct({
        order_no: this.order_no
      }).then(res => {
        this.$toast(this.$t('赎回成功'))
        order_no: this.order_no,
      }).then((res) => {
        this.$toast(this.$t("赎回成功"));
        setTimeout(() => {
          this.backFunc()
        }, 1000)
      })
          this.backFunc();
        }, 1000);
      });
    },
    getOrderDetail() {
      getMinerorder({
        order_no: this.order_no
      }).then(res => {
        this.dataObj = res
        let title = this.$i18n.locale === 'en' ? res.miner_name_en : res.miner_name_cn
        this.title = title + ' ' + this.$t('详情')
      })
    }
  }
}
        order_no: this.order_no,
      }).then((res) => {
        this.dataObj = res;
        let title =
          this.$i18n.locale === "en" ? res.miner_name_en : res.miner_name_cn;
        this.title = title + " " + this.$t("详情");
      });
    },
  },
};
</script>
<style lang="scss" scoped>