<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>
            <!-- 当商品类型为2时显示状态标签 -->
            <view
              v-if="goods.type === 2"
              class="goods-status-badge"
              :class="[getGoodsStatusClass(goods.status)]"
            >
              {{ getGoodsStatusText(goods.status) }}
            </view>
          </view>
        </view>
        <view class="goods-content">
          <view class="goods-info">
            <view class="goods-name">{{ goods.goodsTitle || "-" }}</view>
            <view class="goods-name" v-if="goods.skuName">{{
              goods.skuName || "-"
            }}</view>
            <view class="goods-desc">{{ getGoodsTypeName(goods.type) }}</view>
            <view class="goods-quantity">数量：{{ goods.num || 1 }}</view>
            <view
              class="goods-specs"
              v-if="
                goods.orderExchangeVo &&
                goods.orderExchangeVo.orderExchangeDetailVos
              "
            >
              <view
                class="spec-tag"
                v-for="(item, index) in goods.orderExchangeVo
                  .orderExchangeDetailVos"
                :key="index"
              >
                {{ item.specValueOne }} / {{ item.specValueTwo }}
              </view>
            </view>
          </view>
          <view class="goods-actions">
            <button
              v-if="goods.status == 1"
              class="action-btn"
              @click="handleGoodsAction(goods)"
            >
              {{ getGoodsActionText(goods.type) }}
            </button>
            <template v-else>
              <template v-if="goods.type == 2">
                <button
                  v-if="goods.type == 2 && goods.status == 3"
                  class="action-btn confirm-btn"
                  @click="confirmReceipt(goods)"
                >
                  确认收货
                </button>
                <button
                  v-if="goods.type == 2 && goods.status != 1"
                  class="action-btn"
                  @click="showLogisticsInfo(goods)"
                >
                  查看物流
                </button>
              </template>
              <button
                v-else
                class="action-btn"
                @click="handleGoodsAction(goods)"
              >
                {{ getGoodsActionTexted(goods.type) }}
              </button>
            </template>
          </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" style="font-family: Courier New">{{
          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-bottom primary" @click="handleMainAction">
        {{ getMainActionText() }}
      </button> -->
      <!-- 售后按钮 -->
      <button
        class="action-btn-bottom after-sale-btn"
        @click="handleShowAfterSalePopup"
        v-if="orderDetail.status !== 0"
      >
        售后
      </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" v-if="currentGoodsInfo">
            <view class="section-title">商品状态</view>
            <view class="status-info">
              <view
                class="status-badge-popup"
                :class="[getGoodsStatusClass(currentGoodsInfo.status)]"
              >
                {{ getGoodsStatusText(currentGoodsInfo.status) }}
              </view>
            </view>
          </view>

          <!-- 收货地址 -->
          <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.remark || "--"
              }}</text>
            </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">{{
                currentGoodsInfo.expressCompany || "--"
              }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">快递单号：</text>
              <text class="info-value">{{
                currentGoodsInfo.expressCode || "--"
              }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">实际发货时间：</text>
              <text class="info-value">{{
                currentGoodsInfo.expressTime || "--"
              }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">发货人：</text>
              <text class="info-value">{{
                currentGoodsInfo.deliveryUserName || "--"
              }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">收货时间：</text>
              <text class="info-value">{{
                currentGoodsInfo.completeTime || "--"
              }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 售后商品选择弹窗 -->
    <view
      class="after-sale-popup-mask"
      v-if="showAfterSalePopup"
      @click="closeAfterSalePopup"
    >
      <view class="after-sale-popup" @click.stop>
        <view class="popup-header">
          <text class="popup-title">选择售后商品</text>
          <text class="popup-close" @click="closeAfterSalePopup">×</text>
        </view>
        <view class="popup-content">
          <view class="goods-list">
            <view
              class="goods-select-item"
              v-for="goods in orderDetail.orderChildVos"
              :key="goods.id"
              @click="selectGoodsForAfterSale(goods)"
            >
              <view class="goods-select-info">
                <image
                  class="goods-select-image"
                  :src="showImgJdsz(goods.goodsImg.split(',')[0])"
                  mode="aspectFill"
                />
                <view class="goods-select-details">
                  <text class="goods-select-name">{{
                    goods.goodsTitle || "-"
                  }}</text>

                  <!-- 规格信息 - 当type为2时显示 -->
                  <view
                    class="goods-select-specs"
                    v-if="
                      goods.type === 2 &&
                      goods.orderExchangeVo &&
                      goods.orderExchangeVo.orderExchangeDetailVos
                    "
                  >
                    <view
                      class="spec-tag"
                      v-for="(item, index) in goods.orderExchangeVo
                        .orderExchangeDetailVos"
                      :key="index"
                    >
                      {{ item.specValueOne }} / {{ item.specValueTwo }}
                    </view>
                  </view>

                  <!-- 类型和数量信息 -->
                  <view class="goods-select-info-row">
                    <text class="goods-select-type">{{
                      getGoodsTypeName(goods.type)
                    }}</text>
                    <text class="goods-select-quantity"
                      >数量：{{ goods.num || 1 }}</text
                    >
                  </view>
                </view>
              </view>
              <view class="goods-select-arrow">
                <uni-icons type="right" size="16" color="#999" />
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderId: "",
      showEquityPopup: false,
      showLogisticsPopup: false, // 物流信息弹窗
      currentLogisticsInfo: null, // 当前物流信息
      currentGoodsInfo: null, // 当前商品信息
      orderDetail: {
        orderChildVos: [],
      },
      showAfterSalePopup: false, // 新增：售后商品选择弹窗
    };
  },
  computed: {
    // 是否有实体商品需要收货
    hasPhysicalGoods() {
      return (
        this.orderDetail &&
        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] || "未知类型";
    },

    // 获取商品状态文本
    getGoodsStatusText(status) {
      const statusMap = {
        1: "待使用",
        2: "待发货",
        3: "已发货",
        4: "已完成",
        5: "售后",
      };
      return statusMap[status] || "未知状态";
    },

    // 获取商品状态样式类
    getGoodsStatusClass(status) {
      const classMap = {
        1: "goods-status-waiting",
        2: "goods-status-pending",
        3: "goods-status-shipping",
        4: "goods-status-completed",
        5: "goods-status-refund",
      };
      return classMap[status] || "goods-status-default";
    },

    // 复制订单号
    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?id=" + goods.childId,
      });
    },

    // 预约发货
    reserveDelivery(goods) {
      // 跳转到确认订单页面
      if (goods.status == 1) {
        uni.navigateTo({
          url: `/subPackages/orderQy/confrim?goodsId=${goods.goodsId}&orderChildId=${goods.childId}`,
        });
      } else {
        this.showLogisticsInfo(goods);
      }
    },

    // 使用门票
    useTicket(goods) {
      // 处理使用门票逻辑
      uni.showToast({
        title: "使用门票",
        icon: "none",
      });
    },

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

    // 关闭物流信息弹窗
    closeLogisticsPopup() {
      this.showLogisticsPopup = false;
      this.currentLogisticsInfo = null;
      this.currentGoodsInfo = 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);
      });
    },

    // 确认收货
    async confirmReceipt(goods) {
      uni.showModal({
        title: "确认收货",
        content: "确认已收到商品吗？",
        success: (res) => {
          if (res.confirm) {
            try {
              uni.showLoading({
                title: "确认中...",
              });

              // 调用确认收货API
              this.Post(
                {
                  childOrderId: goods.childId,
                },
                "/framework/order/complete",
                "DES"
              ).then((res) => {
                uni.hideLoading();
                if (res.code == 200) {
                  uni.showToast({
                    title: "确认收货成功",
                    icon: "success",
                  });
                  // 重新加载订单详情
                  setTimeout(() => {
                    this.loadOrderDetail();
                  }, 800);
                } else {
                  uni.showToast({
                    title: res.msg || "确认收货失败",
                    icon: "none",
                  });
                }
              });
            } catch (error) {
              uni.hideLoading();
              console.error("确认收货失败:", error);
              uni.showToast({
                title: "确认收货失败",
                icon: "none",
              });
            }
          }
        },
      });
    },

    // 显示售后商品选择弹窗
    handleShowAfterSalePopup() {
      this.showAfterSalePopup = true;
    },

    // 关闭售后商品选择弹窗
    closeAfterSalePopup() {
      this.showAfterSalePopup = false;
    },

    // 选择商品进行售后
    selectGoodsForAfterSale(goods) {
      this.currentGoodsInfo = goods; // 设置当前商品信息
      this.showAfterSalePopup = false; // 关闭弹窗

      // 构建商品信息对象
      const productInfo = {
        id: goods.goodsId,
        image: this.showImgJdsz(goods.goodsImg.split(",")[0]),
        title: goods.goodsTitle,
        subtitle: goods.skuName || "",
        description: this.getGoodsTypeName(goods.type),
      };

      uni.navigateTo({
        url: `/subPackages/afterSale/add?productInfo=${encodeURIComponent(
          JSON.stringify(productInfo)
        )}`,
      });
    },
  },
};
</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;
  position: relative;

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

// 商品状态标签
.goods-status-badge {
  position: absolute;
  top: -8rpx;
  right: -8rpx;
  padding: 4rpx 8rpx;
  border-radius: 8rpx;
  font-size: 20rpx;
  color: #fff;
  font-weight: 500;
  z-index: 10;

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

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

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

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

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

  &.goods-status-default {
    background-color: #999;
  }
}

.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;
}
.action-btn-bottom {
  padding: 20rpx 24rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  border: none;
  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;
}
.confirm-btn {
  background-color: #34c759;
  color: #ffffff;
}

.logistics-btn {
  background-color: #007aff;
  color: #ffffff;
  margin-top: 10rpx;
}
// 金额汇总
.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: 16rpx;

  .action-btn-bottom {
    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;

    &.after-sale-btn {
      background-color: #ff4757;
      color: #ffffff;
    }
  }
}

// 权益码弹窗
.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;
  }
}

// 物流弹窗状态信息
.status-info {
  display: flex;
  align-items: center;
  margin-bottom: 8rpx;
}

.status-badge-popup {
  padding: 6rpx 12rpx;
  border-radius: 12rpx;
  font-size: 22rpx;
  color: #fff;
  font-weight: 500;

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

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

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

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

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

  &.goods-status-default {
    background-color: #999;
  }
}

.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;
}
.goods-specs {
  margin-top: 10rpx;
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx;
}

.spec-tag {
  background: #f0f8ff;
  border: 1rpx solid #e6f3ff;
  border-radius: 12rpx;
  padding: 4rpx 12rpx;
  display: inline-block;
  margin-bottom: 6rpx;
  font-size: 22rpx;
  color: #4a90e2;
  font-weight: 500;
}

// 售后商品选择弹窗
.after-sale-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: flex-end;
  justify-content: center;
}

.after-sale-popup {
  width: 100%;
  max-height: 70vh;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

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

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

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

.after-sale-popup .popup-content {
  padding: 0;
  flex: 1;
  overflow-y: auto;
}

.goods-list {
  padding: 0 30rpx 30rpx;
}

.goods-select-item {
  display: flex;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  cursor: pointer;

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

  &:active {
    background-color: #f8f9fa;
  }
}

.goods-select-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.goods-select-image {
  width: 100rpx;
  height: 100rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.goods-select-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.goods-select-name {
	text-align: left;
  font-size: 28rpx;
  color: #333;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0;
}

.goods-select-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx;
}

.spec-tag {
  background: #f0f8ff;
  border: 1rpx solid #e6f3ff;
  border-radius: 12rpx;
  padding: 4rpx 12rpx;
  display: inline-block;
  font-size: 22rpx;
  color: #4a90e2;
  font-weight: 500;
}

.goods-select-info-row {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.goods-select-type {
  font-size: 22rpx;
  color: #999;
  background-color: #f5f5f5;
  padding: 4rpx 8rpx;
  border-radius: 6rpx;
}

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

.goods-select-arrow {
  margin-left: 20rpx;
}
</style>
