MoeNovaClient/pages/crowdFunding/orderDetail.vue

<template>
  <view class="order-detail-page">
    <!-- 顶部导航栏 -->
    <view class="custom-navbar">
      <view class="navbar-left">
        <text class="fa fa-angle-left" @click="goBack"></text>
      </view>

      <view
        class="navbar-right scale-tap"
        @click="goPages('/pages/crowdFunding/customerService')"
      >
        <image
          src="@/static/crowdFunding/customer-service-btn.png"
          style="width: 60rpx; height: 60rpx"
          mode="widthFix"
        ></image>
      </view>
    </view>

    <!-- 状态栏 -->
    <view class="status-bar">
      <!-- <image v-if="statusIcon" :src="statusIcon" class="status-icon"/> -->
      <image :src="'../../static/crowdFunding/fail.png'" class="status-icon" />
      <text class="status-title">{{ statusTitle }}</text>
    </view>

    <!-- 收货信息 -->
    <view
      class="address-card scale-tap"
      @click="goPages('/pages/crowdFunding/receivingAddress')"
    >
      <view class="row">
        <text class="name">{{ address.name }}</text>
        <text class="mobile">{{ address.mobile }}</text>
        <text class="default" v-if="address.isDefault">默认</text>
      </view>
      <view class="address">{{ address.fullAddress }}</view>
    </view>

    <!-- 商品卡片 -->
    <view class="product-card">
      <view class="product-top">
        <image class="product-img" :src="product.img" />
        <view class="product-info">
          <view class="product-title"
            ><text>{{ product.title }} </text>
            <image
              class="arrow"
              mode="widthFix"
              src="@/static/crowdFunding/right.png"
          /></view>
          <view class="product-desc">
            {{ product.desc }}
          </view>
        </view></view
      >
      <view class="product-bom">
        <view class="product-spec"
          >回报档：￥{{ product.price }}{{ product.spec }}
          <text class="count">x{{ product.count }}</text></view
        >
        <view class="product-time">
          预计发货时间：{{ product.deliveryTime }}
        </view>
        <view class="product-tip">{{ product.tip }}</view>
      </view>

      <!-- 费用明细 -->
      <view class="fee-row">
        <text>运费</text>
        <text>包邮</text>
      </view>
      <view class="fee-row total">
        <text>实付金额</text>
        <text class="total-price">￥{{ product.total }}</text>
      </view>
    </view>

    <!-- 订单信息 -->
    <view class="order-info-card">
      <view class="info-row">
        <text>订单编号</text>
        <view><text>{{ order.orderNo }}</text>
          <text class="copy-btn" @click="copy(order.orderNo)">复制</text></view>
      </view>
      <view class="info-row">
        <text>下单时间</text>
        <text>{{ order.createTime }}</text>
      </view>
      <view class="info-row">
        <text>付款时间</text>
        <text>{{ order.payTime }}</text>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="order-bottom">
      <template v-if="statusType === 'waitPay'">
        <view class="btn scale-tap btn-cancel" @click="cancelOrder">取消订单</view>
        <view class="btn scale-tap btn-pay" @click="payOrder">立即支付</view>
      </template>
      <template v-else-if="statusType === 'waitSend'">
        <view class="btn scale-tap btn-refund" @click="refundOrder">申请退款</view>
      </template>
      <template v-else-if="statusType === 'finish'">
        <view class="btn scale-tap btn-delete" @click="deleteOrder">删除订单</view>
        <view class="btn scale-tap btn-comment" @click="commentOrder">去评价</view>
      </template>
      <template v-else-if="statusType === 'waitComment'">
        <view class="btn scale-tap btn-delete" @click="deleteOrder">删除订单</view>
        <view class="btn scale-tap btn-comment" @click="commentOrder">去评价</view>
      </template>
      <template v-else>
        <view class="btn scale-tap btn-delete" @click="deleteOrder">删除订单</view>
      </template>
    </view>
  </view> 
</template>

<script>
export default {
  data() {
    return {
      statusType: "waitPay", // waitPay, waitSend, finish, waitComment, fail
      statusTitle: "支付失败", // 根据statusType动态切换
      statusIcon: "loading", // 可根据状态切换icon   loading  fail  success
      address: {
        name: "戴驿宸",
        mobile: "17788196551",
        isDefault: true,
        fullAddress: "浙江省杭州市滨江区西兴街道启悦府1202212121212211212",
      },
      product: {
        img: "/static/crowdFunding/top-img.png",
        title: "【Woh】灯塔 塔罗牌 治愈风泛伟特系卡牌设计",
        desc: "",
        spec: "灯塔MINI版",
        price: 398,
        count: 1,
        deliveryTime: "2025年8月份",
        tip: "温馨提示：该链接仅购买线下实物卡片！不含线上卡牌壁纸",
        total: 398,
      },
      order: {
        orderNo: "12201544521215415415",
        createTime: "2025-05-27 09:35:30",
        payTime: "2025-05-27 09:35:30",
      },
    };
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    goPages(url) {
      uni.navigateTo({ url });
    },
    copy(val) {
      uni.setClipboardData({ data: val });
    },
    cancelOrder() {},
    payOrder() {},
    refundOrder() {},
    deleteOrder() {},
    commentOrder() {},
  },
  mounted() {
    // 可根据实际订单状态设置statusType/statusTitle/statusIcon
    // 例如：this.statusType = 'waitPay'; this.statusTitle = '待支付';
  },
};
</script>

<style lang="scss">
.order-detail-page {
  min-height: 100vh;
  background: #f2f6f2;
  .custom-navbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 90rpx;
    padding: 0 40rpx;
    padding-right: 30rpx;
    padding-top: var(--status-bar-height);
    background-color: transparent;
    position: sticky;
    top: 0;
    height: calc(90rpx + var(--status-bar-height));
    z-index: 100;

    .navbar-left {
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .fa-angle-left {
        font-size: 48rpx;
        color: #333;
      }
    }

    .navbar-right {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .status-bar {
    display: flex;
    align-items: center;
    padding: 32rpx 32rpx 0 32rpx;
    .status-icon {
      width: 40rpx;
      height: 40rpx;
      margin-right: 12rpx;
    }
    .status-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #1F1F1F;
    }
  }
  .address-card {
    background: #fff;
    border-radius: 16rpx;
    margin: 24rpx 16rpx 0 16rpx;
    padding: 24rpx;
    background: url("../../static/crowdFunding/order-detail-card-bg.png")
        no-repeat top right / auto 100%,
      #fff;
    .row {
      display: flex;
      align-items: center;
      margin-bottom: 8rpx;
      .name {
        font-size: 30rpx;
        font-weight: bold;
        margin-right: 18rpx;
      }
      .mobile {
        font-size: 30rpx;
        margin-right: 18rpx;
      }
      .default {
        font-size: 22rpx;
        color: #acf934;
        background: #1f1f1f;
        border-radius: 8rpx;
        padding: 2rpx 12rpx;
        margin-right: 12rpx;
      }
    }
    .address {
      font-size: 26rpx;
      color: #666;
    }
  }
  .product-card {
    background: #fff;
    border-radius: 16rpx;
    margin: 24rpx 16rpx 0 16rpx;
    padding: 24rpx;
    .product-top {
      display: flex;
      align-items: center;

      .product-img {
        width: 120rpx;
        height: 120rpx;
        border-radius: 12rpx;
        margin-right: 18rpx;
      }
      .product-info {
        flex: 1;
        .product-title {
          font-size: 28rpx;
          font-weight: bold;
          color: #1f1f1f;
          display: flex;
          align-items: center;
          .arrow {
            width: 60rpx;
            height: 60rpx;
            margin-left: 140rpx;
          }
        }
        .product-desc {
          font-size: 24rpx;
          color: #1F1F1F;
          margin: 8rpx 0;
        }
      }
    }
    .product-bom {
      padding-top: 15rpx;
      .product-spec {
        font-size: 26rpx;
        color: #1F1F1F;
        margin: 8rpx 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .count {
          color: #888;
          font-size: 22rpx;
          margin-top: 16rpx;
          margin-top: 8rpx;
        }
      }
      .product-time {
        font-size: 24rpx;
        color: #b2b2b2;
        margin-bottom: 8rpx;
      }
      .product-tip {
        font-size: 26rpx;
        color: #b2b2b2;
        background: #f6faf6;
        border-radius: 8rpx;
        padding: 8rpx 12rpx;
      }
    }
    .arrow {
      width: 32rpx;
      height: 32rpx;
      margin-left: 8rpx;
    }
  }
  .fee-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    height: 64rpx;
    font-size: 28rpx;
    color: #1F1F1F;
    text:first-child {
      color: #999;
    }
    &.total {
      font-weight: bold;
      color: #1f1f1f;
      justify-content: flex-end;
      text:first-child {
      color: #1f1f1f;
    }
      .total-price {
        color: #ff5500;
        font-size: 32rpx;
      }
    }
  }
  .order-info-card {
    background: #fff;
    border-radius: 16rpx;
    margin: 24rpx 16rpx 0 16rpx;
    padding: 24rpx;
    .info-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 56rpx;
      font-size: 26rpx; 
     >text:first-child {
        color: #999;
      }
      .copy-btn {
        color: #1f1f1f;
        background: #f6faf6;
        border-radius: 8rpx;
        font-size: 24rpx;
        margin-left: 18rpx;
        padding: 2rpx 16rpx;
      }
    }
  }
  .order-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 32rpx;
    height: 110rpx;
    box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.04);
    z-index: 10;
    .btn {
      min-width: 180rpx;
      height: 72rpx;
      line-height: 72rpx;
      border-radius: 44rpx;
      text-align: center;
      font-size: 30rpx;
      padding: 0 32rpx;
      margin-left: 24rpx;
      &.btn-pay {
        background: #1f1f1f;
        color: #acf934;
      }
      &.btn-cancel {
        background: #fff;
        color: #1f1f1f;
        border: 2rpx solid #e5e5e5;
      }
      &.btn-refund {
        background: #1f1f1f;
        color: #acf934;
      }
      &.btn-delete {
        background: #fff;
        color: #1f1f1f;
        border: 2rpx solid #e5e5e5;
      }
      &.btn-comment {
        background: #1f1f1f;
        color: #acf934;
      }
    }
  }
}
</style>