VAVABUY/pages/order/index.vue

<template>
  <Theme>
    <view class="wrap">
      <Navbar autoBack fixed leftShow>
        <template #center>
          <view class="nav_title">
            <trans _t="tabbar.订单" />
          </view>
          <view class="bg_logo">{{ verConfig.appNames }}</view>
        </template>
        <template #right>
          <uni-icons
            type="search"
            color="var(--light)"
            size="24"
            @click="toOrder"
          ></uni-icons>
        </template>
      </Navbar>
      <Tab
        :active="actvieNum"
        keyName="text"
        :tabList="tabList"
        @confirm="tabClick"
        id="tabs"
      />
      <template v-if="actvieNum == 0">
        <OrderList
          :tabHeight="tabHeight"
          :tabbarHeight="tabbarHeight"
          :tabParams="tabParams"
          navShow
        />
        <!-- <view class="content">
          <List url="/shop/order/list" :topHeight="tabHeight" :defaultParams="defaultParams" ref="listRef"
            @datas="getList">
            <template #item="{ item }">
              <OrderList :item="item" @on-check="onCheck" />
            </template>
</List>
</view> -->
      </template>
      <template v-else-if="actvieNum == 1">
        <OrderList2 navShow />
      </template>
      <template v-else-if="actvieNum == 2">
        <OrderList3 :tabHeight="tabHeight" :tabParams="tabParams" navShow />
      </template>
      <!-- <OrderCompleted class="order_completed" /> -->
    </view>
    <Tabbar page="order" @getTabbarHeight="getTabbarHeight" />
  </Theme>
</template>

<script setup>
import Tabbar from "@/components/tabbar";
import { ref, computed, onMounted, nextTick, reactive } from "vue";
import Tab from "@/components/tabs";
import OrderList from "../dashboard/order.vue";
import OrderList2 from "../dashboard/warehouse.vue";
import OrderList3 from "../dashboard/parcel.vue";
import { query } from "@/utils";
import verConfig from "@/ver.config";
import { t } from "@/locale";
import Navbar from "@/components/navbar";
import { onShow } from "@dcloudio/uni-app";
import { useShopStore } from "@/store";
// import OrderCompleted from './components/OrderCompleted.vue';

const useShop = useShopStore();
const tabParams = computed(() => useShop.getTabParams);
const tabHeight = ref(0);
uni.hideTabBar();

const tabList = ref([
  {
    //text: t('代购订单'),
    text: "我的订单",
    channel: 0,
  },
  {
    text: "商品仓库",
    channel: 1,
  },
  {
    text: "集运包裹",
    channel: 2,
    url: "/shop/packages/lists",
  },
]);

const actvieNum = ref(0);
const actvieUrl = ref("/shop/order/list");
const defaultParams = reactive({
  begin: "",
  end: "",
  keywords: "",
  status: "",
});

const dataList = ref([]);
const listRef = ref(null);
const tabbarHeight = ref(0);

const getList = (list) => {
  dataList.value = list;
};

const getTabbarHeight = (height) => {
  tabbarHeight.value = height;
};

const tabClick = (item, index) => {
  actvieUrl.value = item.url;
  defaultParams.channel = item.channel;
  if (actvieNum.value == index) return;
  actvieNum.value = item.channel;
  // nextTick(() => {
  //   listRef.value && listRef.value.handleRefresh();
  // })
};

const onCheck = (item) => {
  uni.navigateTo({ url: `/pages/order/details?oid=${item.orderId}` });
};

const toOrder = () => {
  uni.navigateTo({ url: `/pages/dashboard/order` });
};

onMounted(() => {
  nextTick(async () => {
    const res = await query("#tabs", this);
    tabHeight.value = res.height;
    actvieNum.value = useShop.tabParams?.tab || 0;
    // nextTick(() => {
    //   listRef.value && listRef.value.handleRefresh();
    // })
  });
});
onShow(() => {
  nextTick(() => {
    actvieNum.value = useShop.tabParams?.tab || 0;
    // listRef.value && listRef.value.handleRefresh();
  });
});
</script>

<style lang="less" scoped>
@import url("@/style.less");

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

  .order_completed {
    position: fixed;
    top: 600rpx;
    right: 0rpx;
    z-index: 999;
  }

  :deep(.u-navbar__content) {
    background-color: var(--black) !important;
  }

  .tab {
    background-color: var(--black);
  }

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

  .bg_logo {
    position: absolute;
    .size(128rpx);
    color: var(--inputBg);
    opacity: 0.06;
    top: 0;
    left: 50%;
    font-weight: bold;
    transform: translateX(-50%);
    line-height: 88rpx;
    text-transform: uppercase;
    font-family: "HarmonyOS_Sans";
    text-wrap: nowrap;
  }

  /deep/ .tab {
    .tab_list {
      font-weight: 500;
      padding: 26rpx 0;
    }

    .active {
      color: var(--light);

      &::before {
        background-color: var(--light);
        height: 4rpx;
        width: 38rpx;
        margin: 16rpx auto;
      }
    }
  }

  .content {
    /deep/ .wrap_list {
      .uni-scroll-view-content {
        > uni-view {
          .flex();
          flex-wrap: wrap;
          gap: 24rpx;
          padding: 24rpx 32rpx;

          .u-list-item {
            width: calc((100% - 48rpx) / 3);
          }
        }
      }
    }
  }
}
</style>