VAVABUY/pages/store/index.vue

<template>
  <Theme>
    <view class="wrap">
      <!-- 导航栏 -->
      <Navbar fixed leftIconColor="var(--black)" title="店铺订单列表"> </Navbar>

      <view class="tab-section">
        <Tab :active="currentTab" :tabList="tabList" @confirm="onTabChange" />
      </view>

      <!-- 订单列表 -->
      <view class="content">
        <List
          ref="listRef"
          :defaultParams="defaultParams"
          @datas="getList"
          :isLoading="false"
          url="/seller/seller/order"
        >
          <template #item="{ item }">
            <orderItem
              :item="item"
              @click="toOrderDetail"
              @action="handleOrderAction"
            />
          </template>
        </List>
      </view>
    </view>
  </Theme>
</template>
  
  <script setup>
import { ref, reactive, onMounted } from "vue";
import Navbar from "@/components/navbar";
import Tab from "@/components/tabs";
import List from "@/components/list";
import orderItem from "./components/order_item";
import { t } from "@/locale";
import { Toast } from "@/utils";
import { SELLER_SELLER_GETPAY } from "@/api";

const listRef = ref(null);

// Tab列表
const tabList = ref(["全部", "待发货"]);

// 当前Tab
const currentTab = ref(0);

// 默认参数
const defaultParams = reactive({
  status: 0, // 0=>全部 300=>待发货
});

// Tab切换
const onTabChange = (item, index) => {
  currentTab.value = index;
  const statusMap = [0, 300];
  defaultParams.status = statusMap[index];
  listRef.value && listRef.value.handleRefresh();
};

// 获取列表数据
const getList = (data) => {
  // console.log("订单列表数据:", data);
};

// 跳转到订单详情
const toOrderDetail = (order) => {
  uni.navigateTo({
    url: `/pages/store/detail?id=${order.id}`,
  });
};

// 处理订单操作
const handleOrderAction = async (order) => {
  try {
    const res = await SELLER_SELLER_GETPAY(order.id);
    uni.navigateTo({
      url: `/pages/shop/payment?oid=${res.data.sid}&type=sellerpay`,
    });
  } catch (error) {
    Toast(error.msg);
  }
};

onMounted(() => {
  listRef.value && listRef.value.handleRefresh();
});
</script>
  
  <style lang="less" scoped>
@import url("@/style.less");

.wrap {
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;

  .nav_title {
    color: var(--black);
  }

  .tab-section {
    background: var(--light);
    border-bottom: 1rpx solid var(--border);
    padding: 0 30rpx;

    :deep(.u-tabs) {
      .u-tabs__wrapper__nav {
        padding: 0;
      }

      .u-tabs__wrapper__nav__item {
        padding: 24rpx 16rpx;
        font-size: 28rpx;
        font-weight: 500;
      }

      .u-tabs__wrapper__nav__item--active {
        font-weight: bold;
      }

      .u-tabs__wrapper__scroll-view {
        height: 80rpx;
      }
    }
  }

  .content {
    flex: 1;
    padding: 20rpx 30rpx;
    padding-bottom: calc(90rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(90rpx + env(safe-area-inset-bottom));

    // 列表样式
    :deep(.list-container) {
      display: flex;
      flex-direction: column;
      gap: 20rpx;
    }
  }
}
</style>