EpicSoul/subPackages/orderQy/detail.vue

<template>
  <view class="order-detail-container">
    <!-- 订单状态头部 -->
    <view class="status-header">
      <view class="status-badge" :class="[getStatusClass(orderDetail.status)]">
        {{ getStatusText(orderDetail.status) }}
      </view>
      <view class="order-title">订单详情</view>
    </view>
    <!-- 商品标题 -->
    <view class="product-title">
      {{ orderDetail.orderName || "--" }}
    </view>

    <!-- 商品列表 -->
    <view class="goods-section">
      <view
        class="goods-item"
        v-for="goods in orderDetail.orderChildVos"
        :key="goods.id"
      >
        <view class="goods-checkbox">
          <view class="checkbox-icon">
            <image
              mode="aspectFill"
              :src="showImgJdsz(goods.goodsImg.split(',')[0])"
            ></image>
          </view>
        </view>
        <view class="goods-content">
          <view class="goods-info">
            <view class="goods-name">{{ goods.goodsTitle || "-" }}</view>
            <view class="goods-desc">{{ getGoodsTypeName(goods.type) }}</view>
            <view class="goods-quantity">数量：{{ goods.num || 1 }}</view>
          </view>
          <view class="goods-actions">
            <button
			v-if="goods.status==1"
              class="action-btn"
              @click="handleGoodsAction(goods)"
            >
              {{ getGoodsActionText(goods.type) }}
            </button>
			<button
			v-else
			  class="action-btn"
			  @click="handleGoodsAction(goods)"
			>
			  {{ getGoodsActionTexted(goods.type) }}
			</button>
			
          </view>
        </view>
      </view>

      <!-- 金额汇总 -->
      <view class="amount-summary">
        <view class="summary-row">
          <text class="summary-label">订单金额</text>
          <text class="summary-value"
            >¥{{ orderDetail.payMoney || "0.00" }}</text
          >
        </view>
        <view class="summary-row">
          <text class="summary-label">运费</text>
          <text class="summary-value"
            >¥{{ orderDetail.postMoney || "0.00" }}</text
          >
        </view>
      </view>
    </view>

    <!-- 订单信息 -->
    <view class="order-info-section">
      <view class="section-title">订单信息</view>
      <view class="info-row">
        <text class="info-label">订单编号：</text>
        <text class="info-value">{{ orderDetail.orderId }}</text>
      </view>
	  <view class="info-row">
	    <text class="info-label">权益码：</text>
	    <text class="info-value">{{ orderDetail.activeCode }}</text>
	  </view>
      <!-- <view class="info-row">
        <text class="info-label">商品合计</text>
        <text class="info-value">{{ orderDetail.goodsAmount }}</text>
      </view> -->
      <view class="info-row">
        <text class="info-label">物流运费</text>
        <text class="info-value">{{ orderDetail.postMoney || "0.00" }}</text>
      </view>
      <!-- <view class="info-row">
        <text class="info-label">优惠券</text>
        <text class="info-value">{{
          orderDetail.discountAmount > 0 ? "无" : "无"
        }}</text>
      </view> -->
      <view class="info-row total">
        <text class="info-label">合计实付</text>
        <text class="info-value total-amount">{{ orderDetail.payMoney }}</text>
      </view>
      <!--  <view class="info-row">
        <text class="info-label">积分</text>
        <text class="info-value">{{ orderDetail.points || "已获得1分" }}</text>
      </view> -->
      <!-- <view class="info-row">
        <text class="info-label">支付方式</text>
        <text class="info-value">{{
          orderDetail.payMethod || "线上支付"
        }}</text>
      </view> -->
      <view class="info-row">
        <text class="info-label">支付时间</text>
        <text class="info-value">{{ orderDetail.payTime }}</text>
      </view>
      <!-- <view class="info-row">
        <text class="info-label">实际发货时间</text>
        <text class="info-value">{{
          formatTime(orderDetail.shippingTime) ||
          formatTime(orderDetail.createTime)
        }}</text>
      </view> -->
      <view class="info-row">
        <text class="info-label">备注</text>
        <text class="info-value">{{ orderDetail.remark || "XXXX" }}</text>
      </view>
    </view>

    <!-- 底部按钮占位div -->
    <view class="bottom-placeholder"></view>

    <!-- 底部操作 -->
    <!-- <view class="bottom-actions">
      <button class="action-btn secondary" @click="goBack">
        {{ orderDetail.status === 0 ? "申请售后" : "返回" }}
      </button>
      <button class="action-btn primary" @click="handleMainAction">
        {{ getMainActionText() }}
      </button>
    </view> -->

    <!-- 权益码弹窗 -->
    <view
      class="equity-popup-mask"
      v-if="showEquityPopup"
      @click="closeEquityPopup"
    >
      <view class="equity-popup" @click.stop>
        <view class="popup-header">
          <text class="popup-title">权益码</text>
          <text class="popup-close" @click="closeEquityPopup">×</text>
        </view>
        <view class="popup-content">
          <!-- 二维码 -->
          <view class="qrcode-container">
            <image
              class="qrcode-image"
              :src="orderDetail.qrcode"
              mode="aspectFit"
            />
          </view>
          <!-- 编号串码 -->
          <view class="code-container">
            <text class="code-label">权益码：</text>
            <text class="code-value" @longpress="copyEquityCode">{{
              orderDetail.equityCode
            }}</text>
          </view>
          <text class="code-tip">长按编号可复制</text>
        </view>
      </view>
    </view>

    <!-- 物流信息弹窗 -->
    <view
      class="logistics-popup-mask"
      v-if="showLogisticsPopup"
      @click="closeLogisticsPopup"
    >
      <view class="logistics-popup" @click.stop>
        <view class="popup-header">
          <text class="popup-title">物流信息</text>
          <text class="popup-close" @click="closeLogisticsPopup">×</text>
        </view>
        <view class="popup-content">
          <!-- 收货地址 -->
          <view class="logistics-section">
            <view class="section-title">收货地址</view>
            <view class="address-info" v-if="currentLogisticsInfo">
              <view class="address-detail">
                <text class="address-text">
                  {{ currentLogisticsInfo.province
                  }}{{ currentLogisticsInfo.city }}{{ currentLogisticsInfo.area
                  }}{{ currentLogisticsInfo.address }}
                </text>
              </view>
              <view class="contact-info">
                <text class="contact-name">{{
                  currentLogisticsInfo.linkName
                }}</text>
                <text class="contact-phone">{{
                  currentLogisticsInfo.phone
                }}</text>
              </view>
            </view>
          </view>

          <!-- 预约发货时间 -->
          <view class="logistics-section">
            <view class="section-title">预约发货时间</view>
            <view class="info-item">
              <text class="info-value">{{
                currentLogisticsInfo.bookDeliveryTime || "--"
              }}</text>
            </view>
          </view>

          <!-- 快递信息 -->
          <view class="logistics-section">
            <view class="section-title">快递信息</view>
            <view class="info-item">
              <text class="info-label">快递公司：</text>
              <text class="info-value">{{
                currentLogisticsInfo.expressName || "--"
              }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">快递单号：</text>
              <text class="info-value">{{
                currentLogisticsInfo.expressCode || "--"
              }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">实际发货时间：</text>
              <text class="info-value">{{
                currentLogisticsInfo.deliveryTime || "--"
              }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">发货人：</text>
              <text class="info-value">{{
                currentLogisticsInfo.deliveryUserName || "--"
              }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderId: "",
      showEquityPopup: false,
      showLogisticsPopup: false, // 物流信息弹窗
      currentLogisticsInfo: null, // 当前物流信息
      orderDetail: {},
    };
  },
  computed: {
    // 是否有实体商品需要收货
    hasPhysicalGoods() {
      return this.orderDetail.orderChildVos.some((goods) => goods.type === 2);
    },
    // 是否显示底部操作按钮
    showBottomActions() {
      return [0, 3].includes(this.orderDetail.status);
    },
  },
  onLoad(options) {
    if (options.id) {
      this.orderId = options.id;
      this.loadOrderDetail();
    } else {
      // 如果没有传入订单ID，使用假数据进行渲染
      this.loadMockData();
    }
  },
  methods: {
    // 加载订单详情
    async loadOrderDetail() {
      try {
        this.Post({}, `/framework/order/${this.orderId}`, "DES").then((res) => {
          if (res.code == 200) {
            this.orderDetail = res.data;
          } else {
            uni.showToast({
              title: res.msg,
              icon: "none",
            });
          }
        });
      } catch (error) {
        console.error("加载订单详情失败:", error);
        uni.showToast({
          title: "加载失败",
          icon: "none",
        });
      } finally {
        uni.hideLoading();
      }
    },

    // 加载假数据

    // 获取状态图标
    getStatusIcon(status) {
      const iconMap = {
        0: "/static/icon/status-pending.png",
        1: "/static/icon/status-waiting.png",
        2: "/static/icon/status-shipping.png",
        3: "/static/icon/status-completed.png",
        4: "/static/icon/status-refund.png",
      };
      return iconMap[status] || "/static/icon/status-default.png";
    },

    getStatusText(status) {
      const statusMap = {
        0: "待激活",
        1: "待使用",
        2: "待收货",
        3: "已完成",
        4: "售后/退款",
        "-1": "取消",
      };
      return statusMap[status] || "未知";
    },

    // 获取状态样式类
    getStatusClass(status) {
      const classMap = {
        0: "status-pending",
        1: "status-waiting",
        2: "status-shipping",
        3: "status-completed",
        4: "status-rejected",
      };
      return classMap[status] || "status-default";
    },

    // 获取商品操作按钮文本
    getGoodsActionText(type) {
      const textMap = {
        1: "去查看",
        2: "预约发货",
        3: "去使用",
      };
      return textMap[type] || "去查看";
    },
	getGoodsActionTexted(type) {
	  const textMap = {
	    1: "去查看",
	    2: "查看物流",
	    3: "已使用",
	  };
	  return textMap[type] || "去查看";
	},
    showImgJdsz(img) {
      if (!img) return;
      if (img.indexOf("https://") != -1 || img.indexOf("http://") != -1) {
        return img;
      } else {
        return this.JDSU_IMG_URL + img;
      }
    },

    // 获取商品操作按钮样式
    getGoodsActionClass(type) {
      const classMap = {
        1: "btn-view",
        2: "btn-logistics",
        3: "btn-used",
      };
      return classMap[type] || "btn-view";
    },

    // 获取主要操作按钮文本
    getMainActionText() {
      const textMap = {
        0: "立即支付",
        1: "返回",
        2: "返回",
        3: "返回",
        4: "返回",
      };
      return textMap[this.orderDetail.status] || "返回";
    },

    // 获取商品类型名称
    getGoodsTypeName(type) {
      const typeMap = {
        1: "IP数字资产",
        2: "IP资源商品",
        3: "君道苏州门票",
      };
      return typeMap[type] || "未知类型";
    },

    // 复制订单号
    copyOrderNo() {
      uni.setClipboardData({
        data: this.orderDetail.orderNo,
        success: () => {
          uni.showToast({
            title: "订单号已复制",
            icon: "success",
          });
        },
      });
    },

    // 显示权益码
    showEquityCode() {
      this.showEquityPopup = true;
    },

    // 关闭权益码弹窗
    closeEquityPopup() {
      this.showEquityPopup = false;
    },

     // 处理商品操作
        handleGoodsAction(goods) {
          switch (goods.type) {
            case 1: // IP数字资产 - 查看
              this.viewDigitalAsset(goods);
              break;
            case 2: // IP资源商品 - 预约发货
              this.reserveDelivery(goods);
              break;
            case 3: // 君道苏州门票 - 去使用
              this.useTicket(goods);
              break;
          }
        },
    
        // 查看数字资产
        viewDigitalAsset(goods) {
          // 跳转到数字资产详情页面
          uni.showToast({
            title: "查看数字资产",
            icon: "none",
          });
          uni.navigateTo({
            url: "/subPackages/memorialAlbum/detail",
          });
        },
    
        // 预约发货
        reserveDelivery(goods) {
          // 跳转到确认订单页面
          uni.navigateTo({
            url: `/subPackages/orderQy/confrim?goodsId=${goods.orderId}`,
          });
        },
    
        // 使用门票
        useTicket(goods) {
          // 处理使用门票逻辑
          uni.showToast({
            title: "使用门票",
            icon: "none",
          });
        },

    // 显示物流信息
    showLogisticsInfo(goods) {
      if (goods.orderExchangeVo) {
        this.currentLogisticsInfo = goods.orderExchangeVo;
        this.showLogisticsPopup = true;
      } else {
        uni.showToast({
          title: "暂无物流信息",
          icon: "none",
        });
      }
    },

    // 关闭物流信息弹窗
    closeLogisticsPopup() {
      this.showLogisticsPopup = false;
      this.currentLogisticsInfo = null;
    },

    // 查看商品详情
    viewGoodsDetail(goods) {
      // 根据商品类型跳转到不同页面
      if (goods.type === 1) {
        uni.navigateTo({
          url: `/subPackages/equityGoods/detail?id=${goods.goodsId}`,
        });
      }
    },

    // 复制权益码
    copyEquityCode() {
      uni.setClipboardData({
        data: this.orderDetail.equityCode,
        success: () => {
          uni.showToast({
            title: "权益码已复制",
            icon: "success",
          });
        },
      });
    },

    // 取消订单
    async cancelOrder() {
      const res = await uni.showModal({
        title: "确认取消",
        content: "确定要取消这个订单吗？",
      });

      if (res.confirm) {
        try {
          await this.cancelOrderApi(this.orderId);
          uni.showToast({
            title: "订单已取消",
            icon: "success",
          });
          this.loadOrderDetail();
        } catch (error) {
          uni.showToast({
            title: "取消失败",
            icon: "none",
          });
        }
      }
    },

    // 支付订单
    payOrder() {
      // 跳转到支付页面或调用支付接口
      uni.navigateTo({
        url: `/pages/payment/index?orderId=${this.orderId}`,
      });
    },

    // 再次购买
    buyAgain() {
      // 跳转到商品页面
      uni.navigateTo({
        url: `/subPackages/equityGoods/detail?id=${this.orderDetail.packageId}`,
      });
    },

    // 返回上一页
    goBack() {
      uni.navigateBack();
    },

    // 处理主要操作
    handleMainAction() {
      if (this.orderDetail.status === 0) {
        this.payOrder();
      } else {
        this.goBack();
      }
    },

    // 格式化时间
    formatTime(time) {
      if (!time) return "";
      const date = new Date(time);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
        2,
        "0"
      )}-${String(date.getDate()).padStart(2, "0")} ${String(
        date.getHours()
      ).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
    },

    // API接口 - 取消订单
    async cancelOrderApi(orderId) {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve({ code: 200, message: "取消成功" });
        }, 500);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.order-detail-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

// 状态头部
.status-header {
  background-color: #fff;
  padding: 20rpx 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.status-badge {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  color: #fff;

  &.status-pending {
    background-color: #ff9500;
  }

  &.status-waiting {
    background-color: #007aff;
  }

  &.status-shipping {
    background-color: #34c759;
  }

  &.status-completed {
    background-color: #666;
  }

  &.status-rejected {
    background-color: #ff3b30;
  }
}

.order-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

// 通用区域样式
.section-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 24rpx;
}

.section-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 16rpx;
}

// 收货地址区域
.address-section {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.address-card {
  background-color: #f8f9fa;
  border-radius: 12rpx;
  padding: 24rpx;
}

.address-text {
  font-size: 26rpx;
  color: #333;
  line-height: 1.5;
  margin-bottom: 16rpx;
}

.contact-info {
  display: flex;
  gap: 20rpx;
}

.contact-name,
.contact-phone {
  font-size: 26rpx;
  color: #666;
}

// 预约发货区域
.delivery-section {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

// 商品标题
.product-title {
  background-color: #fff;
  padding: 20rpx 30rpx;
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 0;
}

// 商品列表
.goods-section {
  background-color: #fff;
  padding: 0;
  margin-bottom: 20rpx;
}

.goods-item {
  display: flex;
  align-items: flex-start;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;

  &:last-child {
    border-bottom: none;
  }
}

.goods-checkbox {
  margin-right: 20rpx;
  margin-top: 8rpx;
}

.checkbox-icon {
  width: 100rpx;
  height: 100rpx;
  image {
    width: 100%;
    height: 100%;
    border-radius: 10rpx;
  }
}

.goods-content {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.goods-info {
  flex: 1;
  margin-right: 20rpx;
}

.goods-name {
  font-size: 28rpx;
  color: #333;
  font-weight: 600;
  margin-bottom: 8rpx;
}

.goods-desc {
  font-size: 24rpx;
  color: #666;
  line-height: 1.4;
  margin-bottom: 8rpx;
}

.goods-quantity {
  font-size: 22rpx;
  color: #999;
  font-weight: 500;
}

.goods-actions {
  flex-shrink: 0;
}

.action-btn {
  padding: 12rpx 24rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  border: none;

  padding: 0rpx 20rpx;
  border-radius: 10rpx;
  font-size: 24rpx;
  font-weight: 600;
  border: none;
  color: #333333;
  transition: all 0.3s ease;
  min-width: 100rpx;
  text-align: center;
  background-color: #77f3f9;
  height: 55rpx;
  line-height: 55rpx;
}

// 金额汇总
.amount-summary {
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #f0f0f0;
  background-color: white;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

.summary-label {
  font-size: 26rpx;
  color: #666;
  font-weight: 500;
}

.summary-value {
  font-size: 26rpx;
  color: #333;
  font-weight: 600;
}

// 订单信息
.order-info-section {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;

  &:last-child {
    margin-bottom: 0;
  }

  &.total {
    padding-top: 16rpx;
    border-top: 1rpx solid #f0f0f0;
    margin-top: 24rpx;
  }
}

.info-label {
  font-size: 26rpx;
  color: #666;
}

.info-value {
  font-size: 26rpx;
  color: #333;

  &.total-amount {
    font-size: 28rpx;
    font-weight: 600;
    color: #ff3b30;
  }
}

.no-address {
  text-align: center;
  padding: 30rpx;
  color: #999;
}

// 底部按钮占位
.bottom-placeholder {
  height: 180rpx;
  padding-bottom: env(safe-area-inset-bottom);
}

// 底部操作
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 30rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  border-top: 1rpx solid #eee;
  display: flex;
  gap: 20rpx;

  .action-btn {
    flex: 1;
    padding: 0rpx 20rpx;
    border-radius: 10rpx;
    font-size: 24rpx;
    font-weight: 600;
    border: none;
    color: #333333;
    transition: all 0.3s ease;
    min-width: 100rpx;
    text-align: center;
    background-color: #77f3f9;
    height: 55rpx;
    line-height: 55rpx;
  }
}

// 权益码弹窗
.equity-popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.equity-popup {
  width: 600rpx;
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1px solid #f0f0f0;
}

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

.popup-close {
  font-size: 40rpx;
  color: #999;
}

.popup-content {
  padding: 40rpx 30rpx;
  text-align: center;
}

.qrcode-container {
  margin-bottom: 40rpx;
}

.qrcode-image {
  width: 300rpx;
  height: 300rpx;
  border: 1px solid #eee;
  border-radius: 12rpx;
}

.code-container {
  margin-bottom: 20rpx;
}

.code-label {
  font-size: 28rpx;
  color: #666;
  margin-right: 10rpx;
}

.code-value {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  background-color: #f8f9fa;
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
}

.code-tip {
  font-size: 24rpx;
  color: #999;
}

// 物流信息弹窗
.logistics-popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logistics-popup {
  width: 650rpx;
  max-height: 80vh;
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.logistics-popup .popup-content {
  padding: 30rpx;
  text-align: left;
  flex: 1;
  overflow-y: auto;
}

.logistics-section {
  margin-bottom: 30rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

.logistics-section .section-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 16rpx;
  border-left: 4rpx solid #007aff;
  padding-left: 16rpx;
}

.address-info {
  background-color: #f8f9fa;
  border-radius: 12rpx;
  padding: 20rpx;
}

.address-detail {
  margin-bottom: 12rpx;
}

.address-text {
  font-size: 26rpx;
  color: #333;
  line-height: 1.5;
}

.contact-info {
  display: flex;
  gap: 20rpx;
}

.contact-name,
.contact-phone {
  font-size: 24rpx;
  color: #666;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

.info-label {
  font-size: 26rpx;
  color: #666;
  min-width: 160rpx;
  flex-shrink: 0;
}

.info-value {
  font-size: 26rpx;
  color: #333;
  flex: 1;
}
</style>