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>
    <!-- status:0待支付，1已支付，2已发货/待收货，3已收货，5已完成，6退款中，8关闭(取消或退款后),9已完成 -->
    <!-- 状态栏 -->
    <view class="status-bar">
      <!-- <image v-if="statusIcon" :src="statusIcon" class="status-icon"/> -->
       <!-- 失败 -->
      <image v-if="status == 8" :src="'../../static/crowdFunding/fail.png'" class="status-icon" />
      <!-- 成功 -->
      <image v-else-if="status == 5 || status == 3 || status == 9" :src="'../../static/crowdFunding/success.png'" class="status-icon" />
      <!-- 进行中 -->
      <image v-else-if="status == 2 || status == 6" :src="'../../static/crowdFunding/loading.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.realname }}</text>
        <text class="mobile">{{ address.mobile }}</text>
        <text class="default" v-if="address.is_default == 'yse'">默认</text>
      </view>
      <view class="address">收获地址：{{ address.area + address.address }}</view>
    </view>

    <!-- 商品卡片 -->
    <view class="product-card">
      <view class="product-top" @click="goPages('/pages/crowdFunding/crowdfundingDetails?id=' + product.id)">
        <image class="product-img" :src="product.img" />
        <view class="product-info">
          <view class="product-title"><text class="two-omit">{{ 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" v-if="order.orderNo">
        <text>订单编号</text>
        <view><text>{{ order.orderNo }}</text>
          <text class="copy-btn" @click="copy(order.orderNo)">复制</text>
        </view>
      </view>
      <view class="info-row" v-if="order.createTime">
        <text>下单时间</text>
        <text>{{ order.createTime }}</text>
      </view>
      <view class="info-row" v-if="order.payTime">
        <text>付款时间</text>
        <text>{{ order.payTime }}</text>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="order-bottom">
      <template v-if="status == 0">
        <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="status == 1">
        <view class="btn scale-tap btn-refund" @click="refundOrder">申请退款</view>
      </template>
      <template v-else-if="status == 2">
        <view class="btn scale-tap btn-pay" @click="confirmOrder">确认收货</view>
        <!-- <view class="btn scale-tap btn-comment" @click="commentOrder">去评价</view> -->
      </template>
      <template v-else-if="status == 3 || status == 5 || status == 9">
        <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="status == 6">
        <view class="btn   btn-delete " style="background: #eee;">退款中</view>
        <!-- <view class="btn scale-tap btn-comment" @click="commentOrder">去评价</view> -->
      </template>
      <template v-else-if="status == 8">
        <!-- <view class="btn   btn-delete" style="background: #eee;">已关闭</view> -->
		  <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>

    <!-- 支付方式选择弹窗 -->
    <uni-popup ref="paymentPopup" type="bottom">
      <view class="payment-popup">
        <view class="popup-header">
          <view class="popup-title">选择支付方式</view>
        </view>
        <view class="payment-options">
          <view class="payment-option" @tap="selectPayment('alipay')">
            <image class="payment-icon" src="../../static/icon/pay_ali.png" mode="aspectFit"></image>
            <view class="payment-name">支付宝支付</view>
            <image class="payment-select"
              :src="paymentMethod === 'alipay' ? '../../static/icon/wd_icon_gouxuan05.png' : '../../static/icon/wd_icon_gouxuan04.png'"
              mode="aspectFit"></image>
          </view>
          <view v-if="isWeChatPay" class="payment-option" @tap="selectPayment('wechat')">
            <image class="payment-icon" src="../../static/icon/pay_wx.png" mode="aspectFit"></image>
            <view class="payment-name">微信支付</view>
            <image class="payment-select"
              :src="paymentMethod === 'wechat' ? '../../static/icon/wd_icon_gouxuan05.png' : '../../static/icon/wd_icon_gouxuan04.png'"
              mode="aspectFit"></image>
          </view>
        </view>
        <view class="confirm-payment" @tap="confirmPayment">立即支付</view>
      </view>
    </uni-popup>
    <!-- 提示框 -->
    <DialogBox ref="DialogBox"></DialogBox>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusType: "waitPay", // waitPay, waitSend, finish, waitComment, fail
      status: "",
      statusTitle: "", // 根据statusType动态切换
      statusIcon: "loading", // 可根据状态切换icon   loading  fail  success
      address: {},
      product: {},
      order: {},
      paymentMethod: 'alipay', // 默认支付宝支付
      isWeChatPay: true, // 是否显示微信支付选项
      orderId: "",
    };
  },
  onLoad(options) {
    this.getOrderDetail(options.orderId);
    this.orderId = options.orderId;

  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    goPages(url) {
      uni.navigateTo({ url });
    },

    copy(val) {
      uni.setClipboardData({ data: val });
    },
    cancelOrder() {
      this.$refs["DialogBox"].confirm({
        title: "提示",
        content: "确定要取消订单吗？",
        DialogType: "inquiry",
        btn1: "否",
        btn2: "是",
        animation: 0,
      }).then((res) => {
        if (res) {
          this.orderAction('cancel');
        }
      });
    },
    payOrder() {
      this.$refs.paymentPopup.open();
    },
    selectPayment(method) {
      this.paymentMethod = method;
    },
    confirmPayment() {
      this.orderAction('pay', this.paymentMethod);
      this.$refs.paymentPopup.close();
    },
    refundOrder() {
      this.$refs.DialogBox.confirm({
        title: "提示",
        content: "确定要申请退款吗？",
        DialogType: "inquiry",
        btn1: "否",
        btn2: "是",
        animation: 0,
      }).then((res) => {
        if (res) {
          this.orderAction('refund');
        }
      });
    },
    deleteOrder() {
      this.$refs.DialogBox.confirm({
        title: "提示",
        content: "确定要删除订单吗？",
        DialogType: "inquiry",
        btn1: "否",
        btn2: "是",
        animation: 0,
      }).then((res) => {
        if (res) {
          this.orderAction('del');
        }
      });
    },
    confirmOrder() {
      this.$refs.DialogBox.confirm({
        title: "提示",
        content: "是否要确认收货吗？",
        DialogType: "inquiry",
        btn1: "否",
        btn2: "是",
        animation: 0,
      }).then((res) => {
        if (res) {
          this.orderAction('finish');
        }
      });
    },
    commentOrder() { },
    orderAction(act, payType = '') {
      uni.request({
        url: this.$apiHost + '/Order/action',
        method: 'GET',
        data: {
          order_id: this.orderId,
          act: act,
          payType: payType,
          uuid: getApp().globalData.uuid,
          skey: getApp().globalData.skey
        },
        success: (res) => {
          console.log(res.data, "订单操作结果");
          if (res.data && res.data.success == 'yes') {
            uni.showToast({ title: res.data.str, icon: 'none' });
            this.getOrderDetail(this.order.orderNo);
            if (act == 'cancel') {
              this.goBack();
            }
          } else {
            uni.showToast({ title: res.data.message || '操作失败', icon: 'none' });
          }
        },
        fail: () => {
          uni.showToast({ title: '操作失败', icon: 'none' });
        }
      });
    },
    getOrderDetail(orderId) {
      uni.request({
        url: this.$apiHost + '/Order/detail?order_id=' + orderId,
        method: 'GET',
        data: {
          uuid: getApp().globalData.uuid,
          skey: getApp().globalData.skey
        },
        success: (res) => {
          console.log(res.data.data, "获取订单详情");
          if (res.data && res.data.success == 'yes') {
            let data = res.data.data;
            if (data.address) {
              this.address = JSON.parse(data.address);
            }
            this.order = {
              orderNo: data.linkid,
              createTime: data.create_time,
              payTime: data.order_time,
            }
            if (data.crowdfund) {
              this.product = {
                price: data.crowdfund.price,
                img: data.crowdfund.image,
                title: data.crowdfund.title,
                desc: "",
                spec: data.crowdfund.title2,
                count: 1,
                total: data.money,
                deliveryTime: data.crowdfund.delivery,
                id: data.crowdfund.id,
                // tip: "温馨提示：该链接仅购买线下实物卡片！不含线上卡牌壁纸",
              }
            }
            this.status = data.status;
            this.statusTitle = data.status_name;
          }
        },
        fail: () => {
          uni.showToast({ title: '获取订单详情失败', icon: 'none' });
        },
        complete: () => {
          uni.hideLoading();
        }
      });
    },
  },
  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;
      justify-content: space-between;

      .product-img {
        width: 120rpx;
        height: 120rpx;
        border-radius: 12rpx;
        margin-right: 18rpx;
      }

      .product-info {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .product-title {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 28rpx;
          font-weight: bold;
          color: #1f1f1f;
          display: flex;
          align-items: center;

          .two-omit {
            width: 400rpx;
          }

          .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;
      }
    }
  }

  .payment-popup {
    background: #fff;
    border-radius: 24rpx 24rpx 0 0;
    padding: 32rpx;

    .popup-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 32rpx;

      .popup-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #1f1f1f;
      }
    }

    .payment-options {
      .payment-option {
        display: flex;
        align-items: center;
        padding: 24rpx 0;
        border-bottom: 2rpx solid #f6faf6;

        .payment-icon {
          width: 48rpx;
          height: 48rpx;
          margin-right: 18rpx;
        }

        .payment-name {
          flex: 1;
          font-size: 30rpx;
          color: #1f1f1f;
        }

        .payment-select {
          width: 32rpx;
          height: 32rpx;
        }
      }
    }

    .confirm-payment {
      margin-top: 32rpx;
      background: #1f1f1f;
      color: #acf934;
      border-radius: 44rpx;
      font-size: 32rpx;
      font-weight: bold;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
    }
  }

  .btn-delete {
    background: #f6faf6;
    color: #888;
    border: 1px solid #e5e5e5;
  }
}
</style>