wxapp_shuibei/pages/users/vault/storeMetal/metalExchangeList.vue

<template>
  <view class="container">
    <view class="tabs-container">
      <view
        class="tab-item"
        :class="{ active: currentTab === 0 }"
        @click="switchTab(0)"
      >
        预约订单
      </view>
      <view
        class="tab-item"
        :class="{ active: currentTab === 1 }"
        @click="switchTab(1)"
      >
        提料订单
      </view>
    </view>

    <z-paging
      class="paging-box"
      ref="pagingRef"
      use-page-scroll
      v-model="currentList"
      @query="handleQuery"
      @refresherTouchend="refresherTouchend"
      :fixed="false"
      :empty-view-text="getEmptyText()"
    >
      <view
        class="list-item"
        v-for="(item, index) in combineList"
        :key="index"
        :class="{ 'reservation-item': currentTab === 0 }"
      >
        <view class="item-top">
          <view class="item-left">
            <view class="item-detail">
              <text class="detail-label">
                金属类型：<span class="detail-value">{{
                  item.metalTypeMsg
                }}</span>
              </text>
              <text class="detail-label" style="margin-left: 20rpx">
                克重：{{ item.weight }}g
              </text>
            </view>
            <view v-if="currentTab === 0" class="item-time">
              预约日期：{{ item.reservationDate }}
            </view>
            <view
              v-if="currentTab === 1"
              class="item-time"
              @click="copy(item.expressNo)"
            >
              快递单号：{{ item.expressNo || "发货后将在此处显示快递单号" }}
            </view>
            <view class="item-time">创建时间：{{ item.createTime }}</view>
          </view>
          <view v-if="currentTab === 0" class="item-status-tag">
            <view class="status-tag" :class="getStatusClass(item.status)">
              {{ getStatusText(item.status) }}
            </view>
          </view>
          <view v-if="currentTab === 1" class="item-amount">
            金价￥{{ item.realTimePrice }}/g
          </view>
        </view>

        <!-- 预约订单底部操作栏：取消订单（始终显示）+ 前往提料 -->
        <view v-if="currentTab === 0" class="item-operation">
          <!-- 取消订单：根据status控制可点击和颜色 -->
          <button
            class="cancel-btn"
            :class="{ 'cancel-btn--disabled': item.status !== 1 }"
            :disabled="item.status !== 1"
            @click="handleCancelReservation(item.reservationId)"
          >
            取消订单
          </button>
          <!-- 前往提料：根据status + 时间控制可点击和颜色 -->
          <button
            class="withdraw-btn"
            :class="{
              'withdraw-btn--disabled':
                item.status !== 1 || !canGoToWithdraw(item.reservationDate),
            }"
            :disabled="
              item.status !== 1 || !canGoToWithdraw(item.reservationDate)
            "
            @click="gotoWithdraw(item)"
          >
            前往提料
          </button>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import useZPaging from "@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js";
import { useAppStore } from "@/stores/app";
import { useToast } from "@/hooks/useToast";
import { getUserInfo } from "@/api/user";
import {
  getMetalOrderList,
  getMyReservations,
  cancelReservation,
} from "@/api/vault";

const appStore = useAppStore();
const { Toast } = useToast();
const pagingRef = ref(null);
useZPaging(pagingRef);

// tabs状态
const currentTab = ref(0); // 0-预约订单 1-提料订单
const reservationList = ref([]); // 预约订单数据
const recordList = ref([]); // 提料订单原始数据

// 金属类型映射
const metalTypeMap = {
  1: "黄金",
  2: "铂金",
  3: "白银",
};

// 根据当前tab返回对应的数据列表
const currentList = computed(() => {
  return currentTab.value === 0 ? reservationList.value : recordList.value;
});

// 处理列表数据格式化
const combineList = computed(() => {
  if (currentTab.value === 0) {
    return reservationList.value.map((item) => ({
      ...item,
      orderNo: item.reservationNo || item.id,
      weight: item.reservedWeight,
      metalTypeMsg: metalTypeMap[item.metalType] || "未知金属",
      reservationDate: item.reservationDate,
      createTime: item.createTime,
      status: item.status,
      reservationId: item.id || item.reservationId,
      metalType: item.metalType,
    }));
  } else {
    return recordList.value.map((item) => ({
      ...item,
      orderNo: item.orderNo,
      amount: item.totalAmount,
      weight: item.plateWeight,
      metalTypeMsg:
        item.metalTypeName || metalTypeMap[item.metalType] || "未知金属",
      expressName: item.expressCompanyName || "未选择",
      createTime: item.createTime,
      realTimePrice: item.realTimePrice,
      expressNo: item.expressNo,
    }));
  }
});

// 切换tabs
const switchTab = (tabIndex) => {
  currentTab.value = tabIndex;
  pagingRef.value?.reload();
};

// 空状态文本
const getEmptyText = () => {
  return currentTab.value === 0 ? "暂无预约订单" : "暂无提料兑换订单";
};

// 预约状态文本映射
const getStatusText = (status) => {
  const statusMap = {
    1: "已预约",
    2: "已完成",
    3: "已取消",
  };
  return statusMap[status] || "未知状态";
};

// 预约状态标签样式
const getStatusClass = (status) => {
  const classMap = {
    1: "status-reserved", // 已预约-绿色
    2: "status-completed", // 已完成-蓝色
    3: "status-canceled", // 已取消-灰色
  };
  return classMap[status] || "";
};

// 判断是否可点击「前往提料」（仅status=1时判断时间）
const canGoToWithdraw = (reservationDate) => {
  if (!reservationDate) return false;
  const reserveDate = new Date(reservationDate).getTime();
  const endTime = reserveDate + 24 * 60 * 60 * 1000;
  const now = new Date().getTime();
  return now > reserveDate && now < endTime;
};

// 前往提料页面
const gotoWithdraw = (item) => {
  uni.redirectTo({
    url: `/pages/users/vault/storeMetal/metalExchangeWithdraw?metalType=${item.metalType}&weight=${item.weight}&reservationId=${item.reservationId}`,
  });
};

// 统一查询入口
const handleQuery = async (page, pageSize) => {
  if (currentTab.value === 0) {
    await queryReservationList(page, pageSize);
  } else {
    await queryMaterialOrderList(page, pageSize);
  }
};

// 查询预约订单列表
const queryReservationList = async (page, pageSize) => {
  try {
    const params = { page, pageSize, uid: appStore.uid };
    const res = await getMyReservations(params);
    const newList = res?.data?.list || [];
    reservationList.value =
      page === 1 ? newList : [...reservationList.value, ...newList];
    const total = res?.data?.total || 0;
    pagingRef.value?.complete(reservationList.value, total);
  } catch (error) {
    console.error("预约订单查询失败:", error);
    pagingRef.value?.complete(false);
    Toast({ title: "查询失败，请稍后重试" });
  }
};

// 查询提料订单列表
const queryMaterialOrderList = async (page, pageSize) => {
  try {
    const params = { page, pageSize, uid: appStore.uid, userId: appStore.uid };
    const res = await getMetalOrderList(params);
    const newList = res?.data?.list || [];
    recordList.value = page === 1 ? newList : [...recordList.value, ...newList];
    const total = res?.data?.total || 0;
    pagingRef.value?.complete(recordList.value, total);
  } catch (error) {
    console.error("提料兑换订单查询失败:", error);
    pagingRef.value?.complete(false);
    Toast({ title: "查询失败，请稍后重试" });
  }
};

// 取消预约操作（仅status=1时触发，已通过按钮disabled控制）
const handleCancelReservation = async (reservationId) => {
  uni.showModal({
    title: "提示",
    content: "确定要取消该预约吗？取消后将无法恢复",
    confirmText: "确认取消",
    cancelText: "取消",
    success: async (res) => {
      if (res.confirm) {
        try {
          uni.showLoading({ title: "处理中...", mask: true });
          await cancelReservation(reservationId);
          uni.showToast({ title: "取消成功", icon: "success" });
          pagingRef.value?.reload();
        } catch (error) {
          console.error("取消预约失败:", error);
          uni.showToast({ title: "取消失败，请稍后重试", icon: "none" });
        } finally {
          uni.hideLoading();
        }
      }
    },
  });
};

onLoad(() => {
  pagingRef.value?.reload();
});

// 复制快递单号
const copy = (expressNo) => {
  if (!expressNo) return;
  uni.setClipboardData({
    data: expressNo,
    success: () => uni.showToast({ title: "复制成功", icon: "success" }),
    fail: (err) => {
      uni.showToast({ title: "复制失败", icon: "none" });
      console.error("复制失败：", err);
    },
  });
};
</script>

<style lang="scss" scoped>
$primary-color: #e9c279;
$text-color: #333;
$text-secondary: #666;
$text-light: #999;
$bg-color: #f5f5f5;
$white: #fff;
$cancel-color: #ff1e0f; // 取消按钮-启用色
$cancel-disabled-color: #ccc; // 取消按钮-禁用色
$withdraw-color: #007aff; // 提料按钮-启用色
$withdraw-disabled-color: #ccc; // 提料按钮-禁用色

// tabs样式
.tabs-container {
  display: flex;
  height: 80rpx;
  background-color: $white;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  overflow: hidden;

  .tab-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30rpx;
    color: $text-secondary;
    position: relative;

    &.active {
      color: $primary-color;
      font-weight: 500;

      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 4rpx;
        background-color: $primary-color;
      }
    }
  }
}

// 页面容器
.container {
  min-height: 100vh;
  overflow: hidden;
  background: $bg-color;
  padding: 20rpx;
}

// 分页列表容器
.paging-box {
  min-height: 60vh;
}

// 通用列表项样式
.list-item {
  background: $white;
  margin-bottom: 20rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

// 预约订单卡片专用样式
.reservation-item {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

// 卡片顶部区域
.item-top {
  display: flex;
  padding: 30rpx 25rpx;
  padding-bottom: 0;
  justify-content: space-between;
  align-items: flex-start;
}

// 左侧信息区域
.item-left {
  flex: 1;

  .item-detail {
    margin-bottom: 15rpx;
    font-size: 26rpx;

    .detail-label {
      color: $text-secondary;
    }

    .detail-value {
      color: $primary-color !important;
    }
  }

  .item-time {
    font-size: 22rpx;
    color: $text-light;
    margin-bottom: 8rpx;
  }
}

// 预约订单右上角状态标签
.item-status-tag {
  display: flex;
  align-items: flex-start;
}

// 提料订单右上角金价
.item-amount {
  font-size: 26rpx;
  font-weight: 500;
  color: $primary-color;
}

// 预约状态标签样式
.status-tag {
  width: 120rpx;
  text-align: center;
  padding: 4rpx 0;
  border-radius: 20rpx;
  font-size: 22rpx;
  color: $white;

  &.status-reserved {
    background-color: #4cd964;
  }

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

  &.status-canceled {
    background-color: $text-light;
  }
}

// 预约订单底部操作栏
.item-operation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50rpx;
  border-top: 1px solid #f5f5f5;
}

// 取消订单按钮-基础样式
.cancel-btn {
  flex: 1;
  height: 100%;
  background-color: $cancel-color;
  color: $white;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 0;
  cursor: pointer;

  &::after {
    border: none;
  }
}

// 取消订单按钮-禁用样式
.cancel-btn--disabled {
  background-color: $cancel-disabled-color;
  color: #fff;
  cursor: not-allowed; // 鼠标禁用样式
  opacity: 0.8;
}

// 前往提料按钮-基础样式
.withdraw-btn {
  flex: 1;
  height: 100%;
  background-color: $withdraw-color;
  color: $white;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 0;
  cursor: pointer;

  &::after {
    border: none;
  }
}

// 前往提料按钮-禁用样式
.withdraw-btn--disabled {
  background-color: $withdraw-disabled-color;
  color: #fff;
  cursor: not-allowed;
  opacity: 0.8;
}
</style>