charge-java/charge-front/src/pages-charge/order/order.vue

<template>
  <view class="page-container bg-f5f7fa" v-if="list">
    <!-- 金额卡片 -->
    <view class="amount-card bg-theme br-16 mx-32 mt-32 p-36 shadow-md">
      <view class="flex-column items-center">
        <view class="fs-26 color-fff mb-12">实付金额</view>
        <view class="flex-align-center">
          <text class="fs-44 color-fff mr-10">¥</text>
          <text class="fs-64 fw-600 color-fff lh-64">{{ price }}</text>
        </view>
        <view class="fs-22 color-fff opacity-80 mt-12" v-if="orderDetail">
          {{ orderDetail.chargeStatus === 2 ? '充电中' : '已完成' }}
        </view>
      </view>
    </view>
    
    <!-- 订单信息卡片 -->
    <view class="info-card bg-fff br-20 mx-32 mt-28 p-36 shadow-sm">
      <!-- 充电站点 -->
      <view class="info-item flex-align-center pb-32 border-b border-eee">
        <view class="info-icon flex-center w-56 h-56 bg-theme-light br-10 mr-20">
          <uni-icons type="location" size="26" color="#2d9e95"></uni-icons>
        </view>
        <view class="flex-grow">
          <view class="fs-24 color-999 mb-8">充电站点</view>
          <view class="fs-28 fw-500 color-333">{{ list[0]?.value }}</view>
        </view>
      </view>
      
      <!-- 充电详情 -->
      <view class="charge-detail mt-32">
        <view class="fs-28 fw-500 color-333 mb-24">充电详情</view>
        
        <view class="detail-grid">
          <!-- 累计充电量 -->
          <view class="detail-item flex-column items-center p-24 bg-f5f7fa br-12">
            <view class="fs-24 color-999 mb-8">累计充电量</view>
            <view class="fs-32 fw-600 color-333">{{ list[1]?.value }}</view>
          </view>
          
          <!-- 充电用时 -->
          <view class="detail-item flex-column items-center p-24 bg-f5f7fa br-12 ml-16">
            <view class="fs-24 color-999 mb-8">充电用时</view>
            <view class="fs-32 fw-600 color-333">{{ list[list.length - 2]?.value }}</view>
          </view>
        </view>
      </view>
      
      <!-- 订单信息列表 -->
      <view class="info-list mt-36">
        <block v-for="(item, index) in list" :key="index">
          <view 
            class="info-row flex-align-center justify-between py-20" 
            v-if="index > 1 && index < list.length - 2"
          >
            <view class="fs-26 color-666">
              {{ item.label }}
            </view>
            <view 
              class="fs-26" 
              :class="{ 'color-theme': item.color === '#F43636', 'color-333': !item.color }"
              :style="{ color: item.color ? 'var(--color-primary)' : '' }"
            >
              {{ item.value }}
              <uni-icons 
                v-if="item.copy" 
                type="copy" 
                size="24" 
                color="#999" 
                class="ml-12"
                @click="copyText(item.value)"
              ></uni-icons>
            </view>
          </view>
        </block>
      </view>
      
      <!-- 优惠信息 -->
      <view class="discount-info mt-32 pt-32 border-t border-eee">
        <view 
          class="flex-align-center justify-between cursor-pointer" 
          @click="handleClickDesc"
          v-if="orderDetail && orderDetail.discountAmount > 0"
        >
          <view class="fs-26 color-666">优惠信息</view>
          <view class="flex-align-center">
            <view class="fs-26 color-theme mr-12">查看详情</view>
            <uni-icons type="right" size="24" color="#999"></uni-icons>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 优惠券详情组件 -->
    <order-coupon-detail ref="order_coupon_detail_ref"></order-coupon-detail>
  </view>
  
  <!-- 加载状态 -->
  <view class="loading-state flex-center" v-else>
    <uni-icons type="spinner" size="40" color="#2d9e95" class="loading-icon"></uni-icons>
    <view class="fs-28 color-999 ml-16">加载中...</view>
  </view>
</template>

<script setup lang="ts">
import { fetchOrder} from "../../api/user";
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";
import OrderCouponDetail from "@/components/order-coupon-detail/order-coupon-detail.vue";
import { to } from "@/utils/navigate";
import { formatDuration, parseDate } from "@/utils/date";
import { formatMoney, fenToYuan } from "@/utils/money";

const list = ref<any[]>();
const price = ref();
const orderDetail = ref();
const order_coupon_detail_ref = ref();

const handleClickDesc = () => {
  let {startChargeSeq,discountType} = orderDetail.value;
  order_coupon_detail_ref.value?.open(startChargeSeq,discountType);
}

// 复制文本
const copyText = (text: string) => {
  uni.setClipboardData({
    data: text,
    success() {
      uni.showToast({
        title: "复制成功",
        icon: "success",
        duration: 1500
      });
    }
  });
};



onLoad((options: any) => {
  fetchOrder(options.id)
    .then((res) => {
      orderDetail.value = res;
      const discountAmount = fenToYuan(res.discountAmount);
      const discountAmountText = res.rightsDesc;
      const startChargeSeq = res.startChargeSeq;
      const start = parseDate(res.startTime);
      const end = res.endTime ? parseDate(res.endTime) : new Date();
      const time = formatDuration(start, end, 1);
      const _list = [
        {
          label: "充电站点",
          value: `${res.stationName}`,
        },
        {
          label: "累计充电量",
          value: `${res.totalPower}度`,
        },
        {
          label: "电费",
          value: `${formatMoney(res.elecMoney)}元`,
        },
        {
          label: "服务费",
          value: `${formatMoney(res.serviceMoney)}元`,
        },
        {
          label: "订单金额",
          value: `${formatMoney(res.totalMoney)}元`,
        },
        {
          label: "开始时间",
          value: res.startTime,
          color: "",
        },
        {
          label: "结束时间",
          value: res.chargeStatus === 2 ? "充电中" : res.endTime,
        },
        {
          label: "充电用时",
          value: time,
        },  {
          label: "订单号",
          value: startChargeSeq,
          copy:true
        },
      ];
      if (Number(discountAmount) > 0) {
        _list.splice(2, 0, {
          label: "优惠金额",
          value: `${
            Number(discountAmount) <= 0 ? "" : "-"
          }${discountAmount}元${discountAmountText}`,
          color: "#F43636",
          discount:true
        });
      }
      list.value = _list;
      price.value = fenToYuan(res.payAmount);
    })
    .catch(() => {
      uni.showModal({
        content: "出现错误，请退出重进",
        success() {
          uni.navigateBack();
        },
      });
    });
});
</script>

<style lang="scss">
.page-container {
  min-height: 100vh;
  padding-bottom: 40rpx;
}

/* 金额卡片 */
.amount-card {
  background: var(--color-primary);
  box-shadow: 0 8rpx 24rpx rgba(45, 158, 149, 0.25);
}

/* 信息卡片 */
.info-card {
  box-shadow: 0 2rpx 8rpx rgba(28, 43, 41, 0.04);
}

/* 充电详情网格 */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16rpx;
}

/* 操作按钮 */
.btn-theme {
  background: var(--color-primary);
  transition: background-color 0.15s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 4rpx 12rpx rgba(45, 158, 149, 0.25);
}

.btn-theme.button-press {
  background: var(--color-primary-deep);
}

/* 加载状态 */
.loading-state {
  min-height: 60vh;
}

.loading-icon {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 工具类 */
.bg-f5f7fa {
  background-color: var(--bg-page);
}

.bg-fff {
  background-color: #ffffff;
}

.bg-primary {
  background-color: var(--color-primary);
}

.bg-primary-light {
  background-color: var(--color-primary-tint);
}

.bg-success {
  background-color: var(--color-success);
}

.bg-success-light {
  background-color: rgba(52, 164, 108, 0.1);
}

.bg-theme {
  background-color: var(--color-primary);
}

.bg-theme-light {
  background-color: rgba(45, 158, 149, 0.1);
}

.br-12 {
  border-radius: 12rpx;
}

.br-16 {
  border-radius: 16rpx;
}

.br-20 {
  border-radius: 20rpx;
}

.mx-32 {
  margin-left: 32rpx;
  margin-right: 32rpx;
}

.mt-28 {
  margin-top: 28rpx;
}

.mt-32 {
  margin-top: 32rpx;
}

.mb-16 {
  margin-bottom: 16rpx;
}

.mb-24 {
  margin-bottom: 24rpx;
}

.mb-40 {
  margin-bottom: 40rpx;
}

.ml-12 {
  margin-left: 12rpx;
}

.ml-16 {
  margin-left: 16rpx;
}

.ml-24 {
  margin-left: 24rpx;
}

.mt-8 {
  margin-top: 8rpx;
}

.mt-16 {
  margin-top: 16rpx;
}

.p-24 {
  padding: 24rpx;
}

.p-36 {
  padding: 36rpx;
}

.p-40 {
  padding: 40rpx;
}

.pb-32 {
  padding-bottom: 32rpx;
}

.pt-32 {
  padding-top: 32rpx;
}

.py-20 {
  padding-top: 20rpx;
  padding-bottom: 20rpx;
}

.w-60 {
  width: 60rpx;
}

.h-60 {
  height: 60rpx;
}

.h-92 {
  height: 92rpx;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-align-center {
  display: flex;
  align-items: center;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-grow {
  flex-grow: 1;
}

.justify-between {
  justify-content: space-between;
}

.items-center {
  align-items: center;
}

.border-b {
  border-bottom: 1rpx solid var(--divider);
}

.border-t {
  border-top: 1rpx solid var(--divider);
}

.border-eee {
  border-color: #eeeeee;
}

.shadow-sm {
  box-shadow: 0 2rpx 8rpx rgba(28, 43, 41, 0.04);
}

.shadow-md {
  box-shadow: 0 4rpx 16rpx rgba(28, 43, 41, 0.06);
}

.color-333 {
  color: #333333;
}

.color-666 {
  color: #666666;
}

.color-999 {
  color: #999999;
}

.color-fff {
  color: #ffffff;
}

.color-primary {
  color: var(--color-primary);
}

.color-success {
  color: var(--color-success);
}

.color-theme {
  color: var(--color-primary);
}

.fs-24 {
  font-size: 24rpx;
}

.fs-26 {
  font-size: 26rpx;
}

.fs-28 {
  font-size: 28rpx;
}

.fs-32 {
  font-size: 32rpx;
}

.fs-48 {
  font-size: 48rpx;
}

.fs-72 {
  font-size: 72rpx;
}

.lh-72 {
  line-height: 72rpx;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.opacity-80 {
  opacity: 0.8;
}

.cursor-pointer {
  cursor: pointer;
}

.w-full {
  width: 100%;
}
</style>