bm-bmt/pages/assets/points-convert-detail.vue

<template>
  <view class="asset-page asset-theme points-detail-page">
    <asset-page-shell title="积分转换" />

    <view class="asset-scroll points-detail-scroll">
      <text class="detail-section-title">转换记录</text>

      <view class="summary-card">
        <view class="summary-card__top">
          <text class="summary-card__order">
            单号：
            <text class="asset-number-font">{{ detail.orderSn || "--" }}</text>
          </text>

          <view class="summary-card__amount-box">
            <text class="summary-card__amount-label">转换积分</text>
            <text class="summary-card__amount asset-number-font">{{
              detail.totalAmount
            }}</text>
          </view>
        </view>

        <text class="summary-card__time asset-number-font">{{
          detail.time || "--"
        }}</text>
      </view>

      <view class="detail-card">
        <text class="detail-card__title">转换明细</text>

        <view
          v-for="item in detail.details"
          :key="item.id + '-' + item.time"
          class="detail-item"
        >
          <view class="detail-item__main">
            <text class="detail-item__title">{{ item.title }}</text>
            <text class="detail-item__time asset-number-font">{{
              item.time
            }}</text>
          </view>

          <view class="detail-item__side">
            <text class="detail-item__label">转换积分</text>
            <text class="detail-item__amount asset-number-font">{{
              item.amount
            }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import AssetPageShell from "../../components/asset-page-shell.vue";
import { fetchPointsConvertRecordDetail } from "../../api/assets";

function parsePayload(value) {
  if (!value) {
    return {};
  }

  try {
    return JSON.parse(decodeURIComponent(value));
  } catch (error) {
    return {};
  }
}

export default {
  components: {
    AssetPageShell,
  },
  data() {
    return {
      recordPayload: {},
      detail: {
        orderSn: "",
        totalAmount: "+0",
        time: "",
        details: [],
      },
    };
  },
  onLoad(options) {
    this.recordPayload = parsePayload(options && options.payload);
    this.loadPage(true);
  },
  methods: {
    async loadPage(showLoading) {
      try {
        this.detail = await fetchPointsConvertRecordDetail(
          this.recordPayload,
          showLoading
            ? {
                showLoading: true,
                loadingText: "加载中",
              }
            : null,
        );
      } catch (error) {
        uni.showToast({
          title: error.message || "详情加载失败",
          icon: "none",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../styles/tokens.scss";
@import "../../styles/common.scss";

.points-detail-page {
  min-height: 100vh;
  background: #191e32;
}

.points-detail-scroll {
  min-height: calc(100vh - env(safe-area-inset-top) - 104rpx);
  padding: 14rpx 14rpx calc(env(safe-area-inset-bottom) + 36rpx);
}

.detail-section-title {
  display: block;
  margin: 8rpx 2rpx 20rpx;
  font-size: 28rpx;
  font-weight: 600;
  color: #ffffff;
}

.summary-card,
.detail-card {
  position: relative;
  overflow: hidden;
  border-radius: 10rpx;
  background: #242944;
  box-shadow: 0 12rpx 24rpx rgba(8, 13, 30, 0.14);
}

.summary-card::after {
  content: "";
  position: absolute;
  top: -24rpx;
  left: 42%;
  width: 118rpx;
  height: 210rpx;
  background: rgba(123, 137, 190, 0.18);
  transform: rotate(30deg);
}

.summary-card__top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28rpx 26rpx;
  border-bottom: 1px solid rgba(129, 141, 183, 0.18);
}

.summary-card__order {
  flex: 1;
  min-width: 0;
  font-size: 28rpx;
  font-weight: 600;
  color: #ffffff;
}

.summary-card__amount-box {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  margin-left: 18rpx;
}

.summary-card__amount-label {
  font-size: 26rpx;
  color: rgba(242, 245, 255, 0.94);
}

.summary-card__amount {
  margin-left: 8rpx;
  font-size: 28rpx;
  font-weight: 700;
  color: #ff8d62;
}

.summary-card__time {
  position: relative;
  z-index: 1;
  display: block;
  padding: 20rpx 26rpx 22rpx;
  font-size: 24rpx;
  color: rgba(228, 233, 250, 0.9);
}

.detail-card {
  margin-top: 2rpx;
  padding: 28rpx 26rpx 18rpx;
}

.detail-card__title {
  display: block;
  font-size: 28rpx;
  font-weight: 600;
  color: #ffffff;
}

.detail-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 28rpx 0;
  border-top: 1px solid rgba(129, 141, 183, 0.18);
}

.detail-item:first-of-type {
  margin-top: 8rpx;
}

.detail-item__main {
  flex: 1;
  min-width: 0;
}

.detail-item__title {
  display: block;
  font-size: 28rpx;
  font-weight: 500;
  color: #ffffff;
}

.detail-item__time {
  display: block;
  margin-top: 14rpx;
  font-size: 22rpx;
  color: rgba(158, 170, 204, 0.9);
}

.detail-item__side {
  margin-left: 18rpx;
  text-align: right;
}

.detail-item__label {
  display: block;
  font-size: 26rpx;
  color: rgba(240, 243, 255, 0.92);
}

.detail-item__amount {
  display: block;
  margin-top: 10rpx;
  font-size: 28rpx;
  font-weight: 700;
  color: #ff8d62;
}
</style>