MoeNovaClient/pages/crowdFunding/orderList.vue

<template>
  <view class="order-list-page">
    <!-- 顶部自定义导航栏 -->
    <view class="custom-navbar">
      <view class="navbar-left">
        <text class="fa fa-angle-left" @click="goBack"></text>
      </view>
      <view class="navbar-center">
        <view class="navbar-title one-omit">
          时间是一种解药时间是一种解药时间是一种解药时间是一种解药时间是一种解药
        </view>
      </view>
      <view class="navbar-right" @click="showActionSheet">
        <image
          src="@/static/icon/more2.png"
          style="width: 64rpx; height: 64rpx; margin-top: 15rpx"
          mode="widthFix"
        ></image>
      </view>
    </view>

    <!-- Tab导航  -->
    <view class="tabs-section">
      <scroll-view
        scroll-x
        class="tabs-scroll-view"
        :show-scrollbar="false"
        :scroll-into-view="'tab-' + (currentTab - 1)"
        scroll-with-animation
      >
        <view class="tabs-wrapper">
          <view
            v-for="(tab, index) in tabs"
            :key="index"
            :id="'tab-' + index"
            :class="['tab-item', currentTab === index ? 'active' : '']"
            @click="switchTab(index)"
          >
            <view class="tab" :class="{ active: currentTab === index }">
              <text class="left">{{ tab.name }}</text>
              <view class="line"></view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- Swiper订单列表 -->
    <swiper
      :current="currentTab"
      @change="onSwiperChange"
      class="order-swiper"
      :style="'height:' + swiperHeight + 'px'"
    >
      <swiper-item v-for="tab in tabs" :key="tab.type">
        <view class="order-list">
          <view
            class="order-card"
            v-for="order in getOrdersByTab(tab.type)"
            :key="order.id"
          >
            <view class="order-header">
              <text class="project-title">{{ order.projectTitle }}</text>
              <text class="tag-initiator" v-if="order.isInitiator">发起人</text>
              <text
                class="order-status"
                :class="'status-' + order.statusType"
                >{{ order.statusText }}</text
              >
            </view>
            <view class="order-main" @click="goToOrderDetail(order)">
              <image class="order-img" :src="order.img" />
              <view class="order-info">
                <view class="order-title">{{ order.title }}</view>
                <view class="order-spec">{{ order.spec }}</view>
              </view>
              <view class="order-price">
                <view>￥{{ order.price }}</view>
                <view class="order-count">x{{ order.count }}</view>
              </view>
            </view>
            <view class="order-actions">
              <!-- 1. 支付失败 -->
              <template v-if="order.statusType === 'payFail'">
                <view class="btn btn-delete" @click="deleteOrder(order)"
                  >删除订单</view
                >
              </template>
              <!-- 2. 待支付 -->
              <template v-else-if="order.statusType === 'waitPay'">
                <view class="btn btn-pay" @click="pay(order)">立即支付</view>
                <view class="btn btn-cancel" @click="cancelOrder(order)"
                  >取消订单</view
                >
              </template>
              <!-- 3. 已付款待发货 -->
              <template v-else-if="order.statusType === 'paid'">
                <view class="btn btn-cancel" @click="cancelOrder(order)"
                  >取消订单</view
                >
              </template>
              <!-- 4. 商品已发货 -->
              <template v-else-if="order.statusType === 'waitReceive'">
                <view class="btn btn-confirm" @click="confirmReceive(order)"
                  >确认收货</view
                >
              </template>
              <!-- 5. 交易完成 -->
              <template v-else-if="order.statusType === 'finish'">
                <!-- <view class="btn btn-comment" @click="commentOrder(order)">去评价</view> -->
                <view class="btn btn-delete" @click="deleteOrder(order)"
                  >删除订单</view
                >
              </template>
              <!-- 6. 已退款 -->
              <template v-else-if="order.statusType === 'refund'">
                <view class="btn btn-delete" @click="deleteOrder(order)"
                  >删除订单</view
                >
              </template>
            </view>
          </view>
        </view>
      </swiper-item>
    </swiper>
    <DialogBox ref="DialogBox"></DialogBox>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0,
      tabs: [
        { name: "全部", type: "all" },
        { name: "待支付", type: "waitPay" },
        { name: "已付款", type: "paid" },
        { name: "待发货", type: "waitSend" },
        { name: "待收货", type: "waitReceive" },
        { name: "交易完成", type: "finish" },
        { name: "已退款", type: "refund" },
        { name: "支付失败", type: "payFail" },
      ],
      orderList: [
        {
          id: 1,
          projectTitle: "也许时间是一种解药",
          isInitiator: true,
          statusType: "payFail",
          statusText: "支付失败",
          img: "/static/crowdFunding/top-img.png",
          title: "【Woh】灯塔 塔罗牌 治愈风泛伟特系卡牌设计",
          spec: "灯塔MINI版",
          price: 389.0,
          count: 1,
        },
        {
          id: 2,
          projectTitle: "也许时间是一种解药",
          isInitiator: true,
          statusType: "waitPay",
          statusText: "待支付",
          img: "/static/crowdFunding/top-img.png",
          title: "【Woh】灯塔 塔罗牌 治愈风泛伟特系卡牌设计",
          spec: "灯塔MINI版",
          price: 389.0,
          count: 1,
        },
        {
          id: 3,
          projectTitle: "也许时间是一种解药",
          isInitiator: true,
          statusType: "paid",
          statusText: "已付款待发货",
          img: "/static/crowdFunding/top-img.png",
          title: "【Woh】灯塔 塔罗牌 治愈风泛伟特系卡牌设计",
          spec: "灯塔MINI版",
          price: 389.0,
          count: 1,
        },
        {
          id: 4,
          projectTitle: "也许时间是一种解药",
          isInitiator: true,
          statusType: "waitReceive",
          statusText: "商品已发货",
          img: "/static/crowdFunding/top-img.png",
          title: "【Woh】灯塔 塔罗牌 治愈风泛伟特系卡牌设计",
          spec: "灯塔MINI版",
          price: 389.0,
          count: 1,
        },
        {
          id: 5,
          projectTitle: "也许时间是一种解药",
          isInitiator: true,
          statusType: "finish",
          statusText: "交易完成",
          img: "/static/crowdFunding/top-img.png",
          title: "【Woh】灯塔 塔罗牌 治愈风泛伟特系卡牌设计",
          spec: "灯塔MINI版",
          price: 389.0,
          count: 1,
        },
        {
          id: 6,
          projectTitle: "也许时间是一种解药",
          isInitiator: true,
          statusType: "refund",
          statusText: "已退款",
          img: "/static/crowdFunding/top-img.png",
          title: "【Woh】灯塔 塔罗牌 治愈风泛伟特系卡牌设计",
          spec: "灯塔MINI版",
          price: 389.0,
          count: 1,
        },
      ],
      swiperHeight: 600, // 默认高度，后续可动态调整
    };
  },
  computed: {
    filteredOrders() {
      if (this.tabs[this.currentTab].type === "all") return this.orderList;
      return this.orderList.filter(
        (o) => o.statusType === this.tabs[this.currentTab].type
      );
    },
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    switchTab(index) {
      this.currentTab = index;
    },
    onSwiperChange(e) {
      this.currentTab = e.detail.current;
      this.$nextTick(() => {
        this.updateSwiperHeight();
      });
    },
    getOrdersByTab(type) {
      if (type === "all") return this.orderList;
      return this.orderList.filter((o) => o.statusType === type);
    },
    updateSwiperHeight() {
      // 动态获取当前swiper-item内容高度
      this.$nextTick(() => {
        const query = uni.createSelectorQuery().in(this);
        query
          .selectAll(".order-list")
          .boundingClientRect((rects) => {
            if (rects && rects[this.currentTab]) {
              this.swiperHeight = rects[this.currentTab].height || 600;
            }
          })
          .exec();
      });
    },
    goToOrderDetail(order) {
      uni.navigateTo({
        url: "/pages/crowdFunding/orderDetail?orderId=" + order.id,
      });
    },
    pay(order) {
      /* 支付逻辑 */
    },
    deleteOrder(order) {
      /* 删除逻辑 */
    },
    cancelOrder(order) {
      /* 取消/退款逻辑 */
    },
    confirmReceive(order) {
      /* 确认收货逻辑 */
    },
    commentOrder(order) {
      /* 评价逻辑 */
    },
  },
  mounted() {
    this.updateSwiperHeight();
  },
  watch: {
    currentTab() {
      this.$nextTick(() => {
        this.updateSwiperHeight();
      });
    },
  },
};
</script>

<style lang="scss">
.order-list-page {
  min-height: 100vh;
  background: #f6faf6;
  .custom-navbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 90rpx;
    padding: 0 20rpx;
    padding-top: var(--status-bar-height);
    background-color: #ffffff;
    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-center {
      .navbar-title {
        max-width: 450rpx;
        font-family: "PingFang SC-Bold";
        font-weight: 400;
        font-size: 32rpx;
        color: #1f1f1f;
        padding-left: 20rpx;
      }
    }

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

      .fa-ellipsis-h {
        font-size: 36rpx;
        color: #333;
      }
    }
  }

  .tabs-section {
    background: #fff;

    .tabs-scroll-view {
      width: 100vw;
      box-sizing: border-box;
      padding-left: 50rpx;

      .tabs-wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 72rpx;

        .tab {
          position: relative;
          width: auto;
          height: 48rpx;
          font-size: 32rpx;
          font-family: "PingFang SC-Bold";
          color: #999;
          font-weight: 400;
          transition: all 0.5s;
          margin-right: 40rpx;

          .left {
            white-space: nowrap;
            display: inline-block;
          }

          ::after {
            content: "";
            position: absolute;
            right: -15rpx;
            top: 0;
            width: 96rpx;
            height: 48rpx;
            background-image: url("../../static/me/wd_img_qiehuan.png");
            background-size: auto 100%;
            background-repeat: no-repeat;
            opacity: 0;
          }

          &.active {
            color: #1f1f1f;

            text {
              font-family: "PingFang SC-Bold";
            }

            ::after {
              opacity: 0.7;
            }
          }
        }
      }
    }
  }

  .order-list {
    padding: 0 0 32rpx 0;

    .order-card {
      background: #fff;
      border-radius: 18rpx;
      margin: 32rpx 24rpx 0 24rpx;
      padding: 24rpx;

      .order-header {
        display: flex;
        align-items: center;
        margin-bottom: 12rpx;

        .project-title {
          font-size: 28rpx;
          font-weight: bold;
          color: #1f1f1f;
          margin-right: 12rpx;
        }

        .tag-initiator {
          font-size: 20rpx;
          color: #b6ff4b;
          background: #1f1f1f;
          border-radius: 8rpx;
          padding: 2rpx 12rpx;
          margin-right: 12rpx;
        }

        .order-status {
          font-size: 24rpx;
          margin-left: auto;

          &.status-waitPay {
            color: #888;
          }

          &.status-paid {
            color: #1f1f1f;
          }

          &.status-waitSend {
            color: #888;
          }

          &.status-waitReceive {
            color: #888;
          }

          &.status-waitComment {
            color: #ff9900;
          }

          &.status-refund {
            color: #1f1f1f;
          }

          &.status-finish {
            color: #888;
          }
        }
      }

      .order-main {
        display: flex;
        align-items: center;
        margin-bottom: 12rpx;

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

        .order-info {
          flex: 1;

          .order-title {
            font-size: 28rpx;
            color: #1f1f1f;
            font-weight: bold;
            margin-bottom: 8rpx;
          }

          .order-spec {
            font-size: 24rpx;
            color: #888;
          }
        }

        .order-price {
          text-align: right;

          view {
            font-size: 28rpx;
            color: #1f1f1f;
          }

          .order-count {
            font-size: 22rpx;
            color: #888;
          }
        }
      }

      .order-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 18rpx;

        .btn {
          min-width: 120rpx;
          height: 56rpx;
          line-height: 56rpx;
          border-radius: 32rpx;
          text-align: center;
          font-size: 26rpx;
          padding: 0 24rpx;
          background: #f6faf6;
          color: #1f1f1f;
          border: 2rpx solid #e5e5e5;

          &.btn-pay {
            background: #1f1f1f;
            color: #acf934;
            border: none;
          }

          &.btn-delete {
            background: #f6faf6;
            color: #888;
            border: 2rpx solid #e5e5e5;
          }

          &.btn-cancel {
            background: #f6faf6;
            color: #888;
            border: 2rpx solid #e5e5e5;
          }

          &.btn-remind {
            background: #fffbe6;
            color: #1f1f1f;
            border: 2rpx solid #ffe58f;
          }

          &.btn-confirm {
            background: #1f1f1f;
            color: #acf934;
            border: none;
          }

          &.btn-comment {
            background: #fff;
            color: #1f1f1f;
            border: 2rpx solid #e5e5e5;
          }

          &.btn-refund {
            background: #fff;
            color: #1f1f1f;
            border: 2rpx solid #e5e5e5;
          }
        }
      }
    }
  }

  .order-swiper {
    width: 100vw;
    background: transparent;
    transition: height 0.3s;
  }
}
</style>