uniapp-app/pages_app/myCourseware/coursewareDetail.vue

<template>
  <view class="detail-page">
    <navBar title="订单详情" />

    <view class="order-card">
      <view class="order-top">
        <text class="download-no">下载课件号: {{ detail.downloadNo || "--" }}</text>
        <text class="pay-status">{{ detail.statusText || "--" }}</text>
      </view>

      <view class="section-divider"></view>

      <view class="course-title">{{ detail.title || "--" }}</view>

     

      <view class="info-list">
        <view class="info-row">
          <text class="info-label">课件作者：</text>
          <text class="info-value">{{ detail.author || "--" }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">金额：</text>
          <text class="info-value amount">{{ detail.amountText || "--" }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">创建时间：</text>
          <text class="info-value">{{ detail.createTime || "--" }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">支付方式：</text>
          <text class="info-value">{{ detail.payType}}</text>
        </view>
        <view class="info-row">
          <text class="info-label">支付时间：</text>
          <text class="info-value">{{ detail.payTime || "--" }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import api from "@/api/api.js";

const coursewareId = ref("");
const detail = ref({
  downloadNo: "",
  statusText: "",
  title: "",
  author: "",
  amountText: "",
  createTime: "",
  payType: "",
  payTime: "",
});

const formatDateTime = (value) => {
  if (!value) return "";
  if (typeof value === "string" && value.includes("-")) return value;
  const timeNum = Number(value);
  if (!timeNum) return "";
  const ms = timeNum < 10000000000 ? timeNum * 1000 : timeNum;
  const d = new Date(ms);
  const y = d.getFullYear();
  const m = String(d.getMonth() + 1).padStart(2, "0");
  const day = String(d.getDate()).padStart(2, "0");
  const h = String(d.getHours()).padStart(2, "0");
  const min = String(d.getMinutes()).padStart(2, "0");
  const s = String(d.getSeconds()).padStart(2, "0");
  return `${y}-${m}-${day} ${h}:${min}:${s}`;
};

const formatAmount = (value) => {
  if (value === undefined || value === null || value === "") return "";
  const num = Number(value);
  if (Number.isNaN(num)) return "";
  const amount =  num / 100;
  return `${amount.toFixed(2)}元`;
};

const formatStatus = (raw) => {
  if (raw === undefined || raw === null) return "";
  const text = String(raw).toLowerCase();
  if (text === "paid" || text === "success" || text === "1" || text === "2") return "已支付";
  if (text === "unpaid" || text === "0" || text === "created") return "未支付";
  return String(raw);
};

const formatPayType = (raw) => {
  if(raw=='balance'){
    return '余额支付';
  }else if(raw=='FREE'){
    return '免费'
  }else if(raw=='USEWELFARENUM'){
    return '免费次数';
  }else if(raw=='wx'){
    return '微信支付';
  }
};

const fetchCoursewareDetail = async () => {
  if (!coursewareId.value) return;
  try {
    const res = await api.getGanDanFileOrder({
      order_id: coursewareId.value,
    });
    if (res.code !== 200 || !res.data) return;

    const data = res.data;
    detail.value = {
      downloadNo: data.order_id || data.download_no || data.gandanfile_order_id || data.id || "",
      statusText: formatStatus(data.order_status || data.status || data.pay_status || ""),
      title: data.title || data.name || data.file_name || "",
      author: data.provider_name || data.author || data.nickname || "",
      amountText: formatAmount(data.pay_amount || data.total_fee || data.amount || data.price || 0),
      createTime: formatDateTime(data.create_date || data.create_time || data.order_time || ""),
      payType: formatPayType(data.pay_channel),
      payTime: formatDateTime(data.pay_date || data.pay_time || ""),
    };
  } catch (error) {

    uni.showToast({
      title: "获取详情失败",
      icon: "none",
    });
  }
};

onLoad((options) => {
  coursewareId.value = options.id;
  fetchCoursewareDetail();
});
</script>

<style lang="scss" scoped>
.detail-page {
  
  background: #f5f5f5;
}

.order-card {
  background: #fff;
  top: calc(var(--status-bar-height) + 44px);
  position: fixed;
  left: 0;
  right:0;
  z-index: 10;
 overflow-y: scroll;
}

.order-top {
  min-height: 88rpx;
  padding: 0 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.download-no {
  font-size: 30rpx;
  color: #000;
}

.pay-status {
  font-size: 32rpx;
  color: #8b2316;
}

.section-divider {
  height: 16rpx;
  background: #f5f5f5;
}

.course-title {
  padding: 20rpx 30rpx;
  color: #8b2316;
  font-size: 32rpx;
  line-height: 1.5;
  word-break: break-all;
  border-bottom: 2rpx solid #ccc;
}

.info-list {
  padding: 24rpx 30rpx;
}

.info-row {
  min-height: 56rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-label {
  font-size: 30rpx;
  color: #000;
}

.info-value {
  max-width: 68%;
  font-size: 28rpx;
  color: #666;
  text-align: right;
  word-break: break-all;
}

.amount {
  color:red;
}
</style>