VAVABUY/pages/channel/index.vue

<template>
  <Theme>
    <view class="wrap">
      <Navbar title="tabbar.订单" leftShow border fixed>
        <template #right>
          <navMenu :options="{ icon: 'icon-home', text: '主页' }" />
        </template>
      </Navbar>
      <!-- <view class="tops" id="tabs" :style="{ top: tabTop + 'px' }">
        <view class="tab">
          <Tab :active="actvieNum" keyName="text" :tabList="tabList" @confirm="tabClick" />
        </view>
        <view class="product_sort">
          <view class="sort_list" :class="sortActive == index ? 'sort_active' : ''" v-for="item, index in sortList"
            :key="index" @click="item.callback(item, index)">
            <trans :_t="item.text" />
            <template v-if="item.isTrue == 1">
              <view class="sort_arrow">
                <view class="sort_arrow_top"
                  :style="defaultParams.sort == 'moneyAsc' ? { borderBottom: '4px solid #f0700c' } : {}"></view>
                <view class="sort_arrow_bottom"
                  :style="defaultParams.sort == 'moneyDesc' ? { borderTop: '4px solid #f0700c' } : {}"></view>
              </view>
            </template>
          </view>
        </view>
      </view> -->
      <view class="content">
        <List
          url="/shop/search/recommend"
          :topHeight="tabHeight"
          :defaultParams="defaultParams"
          ref="listRef"
        >
          <template #item="{ item }">
            <shopList :channel="actvieNum" :item="item" />
          </template>
        </List>
      </view>
    </view>
    <Tabbar page="channel" />
  </Theme>
</template>
<script setup>
import { ref, reactive, computed, onMounted, nextTick } from "vue";
import Tabbar from "@/components/tabbar";
import navMenu from "@/components/nav_menu";
import Navbar from "@/components/navbar";
import { onReachBottom } from "@dcloudio/uni-app";
import List from "@/components/list";
import { query, systemInfo } from "@/utils";
import shopList from "../index/components/shop_list";
import popup from "@/components/popup";
import Tab from "@/components/tabs";

const searchValue = ref("");
const listRef = ref(null);
const popupRef = ref(null);
const actvieNum = ref(1);
const tabHeight = ref(0);
const tabTop = ref(44);
const sortActive = ref(0);
const tabList = ref([
  {
    icon: "icon-ds-1688",
    text: "1688",
    channel: 0,
  },
  {
    icon: "icon-ds-taobao",
    text: "淘宝",
    channel: 1,
  },
  {
    icon: "icon-ds-jd",
    text: "JD",
    channel: 3,
  },
]);
const defaultParams = reactive({});
const sortList = reactive([
  {
    text: "综合",
    sort: "",
    callback: (index) => {
      actvieNum.value = index;
      defaultParams.sort = "";
      nextTick(() => {
        listRef.value && listRef.value.handleRefresh();
      });
    },
  },
  {
    text: "价格",
    isTrue: 1,
    sort: "moneyDesc", // moneyAsc 升序
    callback: (item, index) => {
      priceClick(item, index);
    },
  },
]);

const priceClick = (item, index) => {
  if (sortActive.value == index) {
    if (defaultParams.sort == "moneyAsc") {
      defaultParams.sort = "";
      sortActive.value = 0;
    } else {
      defaultParams.sort = "moneyAsc";
    }
  } else {
    sortActive.value = index;
    defaultParams.sort = item.sort;
  }
  nextTick(() => {
    listRef.value && listRef.value.handleRefresh();
  });
};

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

onMounted(() => {
  nextTick(async () => {
    tabTop.value = systemInfo().statusBarHeight;
    nextTick(() => {
      listRef.value && listRef.value.getData();
    });
  });
});

onReachBottom(() => {
  nextTick(() => {
    listRef.value && listRef.value.scrolltolower();
  });
});
uni.hideTabBar();
</script>
<style lang="less" scoped>
@import url("@/style.less");

.wrap {
  min-height: calc(100vh - 50px);
  background-color: var(--bg);

  .nav_center {
    width: calc(100% - 46px - 50px);

    .icon-camera {
      color: #adb8cc;
      font-size: 56rpx;
    }
  }

  .nav_right {
    .icon-font {
      .size(28px);
      color: var(--text);
    }
  }

  .tops {
    // position: fixed;
    // top: 44px;
    // left: 0;
    // right: 0;
    // background-color: var(--bg);
    // z-index: 1;
    .tab {
      padding: 0 24rpx;
    }

    .product_sort {
      .flex();
      padding: 24rpx 32rpx;

      .sort_list {
        color: var(--text);
        .size(24rpx);
        line-height: 40rpx;
        margin-right: 72rpx;
        padding: 16rpx 0;
        .ver();

        .sort_arrow {
          margin-left: 20rpx;

          &_top {
            border-bottom: 4px solid #adb8cc;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            font-size: 0;
            height: 0;
            line-height: 0;
            margin-bottom: 1px;
            width: 0;
          }

          &_bottom {
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 4px solid #adb8cc;
            font-size: 0;
            height: 0;
            line-height: 0;
            margin-top: 1px;
            width: 0;
          }
        }
      }

      .sort_active {
        color: var(--primary);
      }
    }
  }

  .content {
    padding: 16rpx 32rpx;

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

          .u-list-item {
            width: calc((100% - 16rpx) / 2);
          }
        }
      }
    }
  }
}

.pop_cont {
  color: var(--text);
  .size(28rpx);
  line-height: 60rpx;
}

.pop_tip {
  color: var(--text-01);
  .size(28rpx);
  line-height: 60rpx;
}

.pop_btn {
  margin-top: 32rpx;
  height: 76rpx;
  padding: 16rpx 30rpx;
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 16rpx;
  .size(24rpx);
  .flex_center();
}
</style>