spinz777/src/pages/wallet/DepositOrderDetail.vue

<template>
  <mobile-sub-layout :title="$t('deposit.title2')">
    <view class="deposit-order-detail-container">
      <view
        v-if="pageData.orderDetail.status === 1"
        class="flex-column flex-acenter"
        style="padding: 60rpx 30rpx;"
      >
        <theme-image
          src="@/static/wallet/icon-succeed.png"
          mode="aspectFit"
          style="width: 140rpx; height: 140rpx"
        />
        <view class="color-success ft18 mt32">
          {{ $t("deposit.status.success") }}
        </view>
        <view class="cfff mt20" style="font-size: 60rpx">
          {{ appStore.currencySign }}
          {{ $formatThousandDot(pageData.orderDetail.amount) }}
        </view>
      </view>
      <view
        v-else
        class="flex-column flex-acenter"
        style="padding: 60rpx 30rpx;"
      >
        <theme-image
          src="@/static/wallet/icon-pending.png"
          mode="aspectFit"
          style="width: 140rpx; height: 140rpx"
        />
        <view class="color-panding ft18 mt32">
          {{ $t("deposit.status.pending") }}
        </view>
        <view class="cfff mt20" style="font-size: 60rpx">
          {{ appStore.currencySign }}
          {{ $formatThousandDot(pageData.orderDetail.amount) }}
        </view>
      </view>
      <view class="plr30 mb24">
        <view
          class="list-item-content"
          :style="{ background: themeStore.theme.lightBgColor }"
        >
          <view
            class="title"
            :style="{ color: themeStore.theme.text.subtitle }"
          >
            {{ $t("deposit.depositType") }}:
          </view>
          <view
            class="subtitle"
            :style="{ color: themeStore.theme.text.normal }"
          >
            {{ pageData.orderDetail.rechargeType || "" }}
          </view>
        </view>
      </view>
      <view v-if="pageData.orderDetail.arrivedOn" class="plr30 mb24">
        <view
          class="list-item-content"
          :style="{ background: themeStore.theme.lightBgColor }"
        >
          <view
            class="title"
            :style="{ color: themeStore.theme.text.subtitle }"
          >
            {{ $t("deposit.creationTime") }}:
          </view>
          <view
            class="subtitle"
            :style="{ color: themeStore.theme.text.normal }"
          >
            {{ pageData.orderDetail.arrivedOn || "" }}
          </view>
        </view>
      </view>
      <view class="plr30 mb24">
        <view
          class="list-item-content"
          :style="{ background: themeStore.theme.lightBgColor }"
        >
          <view
            class="title"
            :style="{ color: themeStore.theme.text.subtitle }"
          >
            {{ $t("deposit.arrivalTime") }}:
          </view>
          <view
            class="subtitle"
            :style="{ color: themeStore.theme.text.normal }"
          >
            {{ pageData.orderDetail.orderedOn || "" }}
          </view>
        </view>
      </view>
      <view class="plr30 mb24">
        <view
          class="list-item-content"
          :style="{ background: themeStore.theme.lightBgColor }"
        >
          <view
            class="title"
            :style="{ color: themeStore.theme.text.subtitle }"
          >
            {{ $t("deposit.orderNo") }}:
          </view>
          <view class="flex-acenter">
            <view
              class="subtitle mr24"
              :style="{ color: themeStore.theme.text.normal }"
            >
              {{ pageData.orderDetail.orderNo || "" }}
            </view>
            <theme-image
              @click.stop="handleCopyClick(pageData.orderDetail.orderNo)"
              src="@/static/icon-copy.png"
              mode="aspectFit"
              style="width: 30rpx; height: 30rpx"
            />
          </view>
        </view>
      </view>
      <view class="ft15 plr30 pt16">
        {{ $t("deposit.message.tipsDetail1") }}
      </view>
      <view v-if="depositStore.fillOrderSwitch && isShowUtr" class="plr30 mt24">
        <SelfServiceUtrItem
          :orderId="pageData.orderId"
          :pendingCount="pageData.manualPendingCount"
        />
      </view>
      <!-- <view
        v-if="
          depositStore.fillOrderSwitch &&
          pageData.orderDetail.manualRechargeStatus === 1
        "
        class="plr30 mt24"
      >
        <SelfServiceUtrFinishItem :orderId="pageData.orderId" />
      </view> -->
      <view class="plr30 mt24">
        <DepositServiceItem />
      </view>
    </view>
  </mobile-sub-layout>
</template>

<script setup>
import { onLoad } from "@dcloudio/uni-app";
import { onMounted, reactive, computed } from "vue";
import { useThemeStore } from "@/store/useThemeStore";
import { useAppStore } from "@/store/useAppStore";
import DepositServiceItem from "./components/DepositServiceItem.vue";
import SelfServiceUtrItem from "./components/SelfServiceUtrItem.vue";
import SelfServiceUtrFinishItem from "./components/SelfServiceUtrFinishItem.vue";
import { requestOrderDetail } from "@/api/deposit.js";
import Toast from "@/module/toast/toast.js";
import { useI18n } from "vue-i18n";
import { useDepositStore } from "@/store/useDepositStore.js";
// import { useUserStore } from "@/store/useUserStore.js";

const { t } = useI18n();
const themeStore = useThemeStore();
const appStore = useAppStore();
const depositStore = useDepositStore();
// const userStore = useUserStore();

const pageData = reactive({
  orderId: "",
  orderDetail: {},
});

const isShowUtr = computed(() => {
  if (
    pageData.orderDetail.status === 0 &&
    pageData.orderDetail.manualRechargeStatus === 0
  ) {
    const createTime = new Date(pageData.orderDetail.orderedOn).getTime();
    const passTime = new Date().getTime() - createTime;

    let minTime = 60;
    let maxTime = 259200;
    const strTime = depositStore.chargeInfo.manualRechargeTime;

    if (strTime) {
      const jsonTime = JSON.parse(strTime);
      minTime = jsonTime[0] || 60;
      maxTime = jsonTime[1] || 259200;
    }
    return passTime >= minTime * 1000 && passTime < maxTime * 1000;
  }
  return false;
});

onLoad((option) => {
  pageData.orderId = option.orderId;
  loadData();
  depositStore.getChargeInfo();
});

const loadData = async () => {
  Toast.showLoading("Loading");
  const { code, data } = await requestOrderDetail({
    id: pageData.orderId,
  });
  Toast.hideLoading();
  if (code !== 200) {
    return;
  }
  pageData.orderDetail = data || {};
};

const handleCopyClick = (text) => {
  uni.setClipboardData({
    data: text,
    success() {
      uni.showToast({
        title: t("deposit.toast.text4"),
        icon: "success",
      });
    },
  });
};
</script>

<style lang="scss" scoped>
.deposit-order-detail-container {
  min-height: 100vh;

  .color-panding {
    color: #e88a35;
  }

  .color-success {
    color: #126e51;
  }

  .list-item-content {
    border-radius: 20rpx;
    background-color: #922222;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0rpx 30rpx;

    .title {
      font-size: 24rpx;
      color: #ff9b9b;
    }

    .subtitle {
      font-size: 24rpx;
      color: #fff;
    }
  }
}
</style>