VAVABUY/pagesBuyer/home/index.vue

<template>
  <Theme>
    <view class="wrap" :style="{ '--tabbarHeight': tabbarHeight + 'px' }">
      <view class="cont">
        <view class="cont_bg" id="tob">
          <Navbar bgColor="transparent" fixed>
            <template #left>
              <view class="nav_left">
                <image
                  src="@/static/logo.png"
                  class="nav_logo"
                  mode="widthFix"
                ></image>
              </view>
            </template>
            <template #right>
              <view class="nav_right">
                <view class="icon-badge-wrap">
                  <image
                    src="/static/home/kefu.png"
                    class="mobile_system"
                    @click="toGo('/pages/setting/system')"
                  >
                  </image>
                  <up-badge
                    type="error"
                    max="99"
                    :value="unreadCount"
                    class="tips"
                    v-if="unreadCount > 0"
                  ></up-badge>
                </view>

                <image
                  src="/static/language.png"
                  class="mobile_language"
                  @click="toGo('/pages/setting/language_currency')"
                ></image>
                <navMenu />
              </view>
            </template>
          </Navbar>
          <view class="bg_top">
            <view class="search">
              <Search
                v-model="defaultParams.keywords"
                border="none"
                @input="onSearchInput"
                @click="searchClick"
                :placeholder="t('请粘贴商品链接或关键字')"
              >
                <template #prefix>
                  <i class="icon-font icon-search"></i>
                </template>
                <template #suffix>
                  <i class="icon-font icon-camera"></i>
                </template>
              </Search>
            </view>
          </view>
          </view>
          <view class="content">
            <!-- 轮播图区域 -->
            <view class="banner-section">
            <Swiper @click="swiperClick" height="108px" class="swiper-box" />
            </view>

          <!-- Tab导航 -->
          <view class="tab-section">
            <up-tabs
              :list="tabList"
              :current="currentTab"
              key="currentTab"
              keyName="name"
              @change="onTabChange"
              :lineHeight="2"
              lineColor="var(--black)"
              :activeStyle="{
                color: 'var(--black)',
                fontWeight: 'bold',
                transform: 'scale(1.05)',
              }"
              :inactiveStyle="{
                color: '#767676',
                transform: 'scale(1)',
              }"
            />
                </view>

          <!-- 商品列表 -->
          <view class="products_section">
            <List
              ref="listRef"
              url="/seller/goods/lists"
              :defaultParams="defaultParams"
              @datas="getList"
            >
              <template #item="{ item }">
                <productItem :item="item" />
              </template>
            </List>
          </view>
        </view>
      </view>
    </view>

    <IosUpdateModal />
    <blindModel />
    <Tabbar page="index" @getTabbarHeight="getTabbarHeight" />
  </Theme>
</template>

<script setup>
import Tabbar from "@/components/tabbar";
import Navbar from "@/components/navbar";
import Swiper from "@/components/swiper";
import blindModel from "@/components/blindModel";
import Search from "@/components/input";
import navMenu from "@/components/nav_menu";
import IosUpdateModal from "@/components/IosUpdateModal";
import List from "@/components/list";
import productItem from "./components/product_item";
import {
  computed,
  ref,
  watch,
  nextTick,
  onMounted,
  reactive,
  watchEffect,
} from "vue";
import { onLoad, onShow, onUnload, onHide } from "@dcloudio/uni-app";
import { storeToRefs } from "pinia";
import {
  useShopStore,
  useSystemStore,
  useMessageStore,
  useTabbarStore,
  useUserStore,
} from "@/store";
import { t } from "@/locale";
import { query, systemInfo } from "@/utils";

const useShop = useShopStore();
const useSystem = useSystemStore();
const useTabbar = useTabbarStore();
const useUser = useUserStore();

const langList = computed(() => useSystem.getLangeuage);
const lang = computed(() => useSystem.getLang);
const token = computed(() => useUser.getToken);
const symbol = computed(() => useSystem.getSymbol);
const userType = computed(() => useUser.getUserType);

const useMessage = useMessageStore();
const { globalMap } = storeToRefs(useMessage);
const unreadCount = ref(0);
watch(
  () => globalMap.value.noticeChannel,
  (newVal, oldVal) => {
    if (newVal) {
      unreadCount.value = newVal.unreadCount;
    }
  },
  {
    deep: true,
    immediate: true,
  }
);

const searchValue = ref("");
const tabbarHeight = ref(0);

// Tab数据
const tabList = ref([]);

watchEffect(() => {
  tabList.value = [
    { name: t("推荐"), sort: "views" },
    { name: t("新品"), sort: "id" },
  ];
});
const currentTab = ref(0);

// List组件引用
const listRef = ref(null);

// 默认参数
const defaultParams = reactive({
  keywords: "",
  sort: "views",
});

// Tab切换
const onTabChange = (item, index) => {
  if (!item) return;
  currentTab.value = index;
  defaultParams.sort = item.sort;
  listRef.value && listRef.value.handleRefresh();
};

// 搜索输入
const onSearchInput = (value) => {
  searchValue.value = value;
  defaultParams.keywords = value;
  listRef.value && listRef.value.handleRefresh();
};

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

const searchClick = () => {
  // toGo("/pagesBuyer/home/search");
};

const toGo = (url) => {
  if (!url) return;
  uni.navigateTo({ url });
};

const swiperClick = (item) => {
  if (item.action == "goto_product") {
    toGo("/pagesBuyer/home/products");
  } else if (item.action == "goto_activity") {
    toGo("/pagesBuyer/home/activity");
  }
};

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

const loadPageData = async () => {
  listRef.value && listRef.value.handleRefresh();
  await useSystem.setBoxes({}, { isLoading: true });
};

onShow(() => {
  loadPageData();
});

onMounted(() => {
  loadPageData();
});
</script>

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

.wrap {
  background: var(--bor-color);
  min-height: calc(100vh - var(--tabbarHeight));
  padding-bottom: var(--tabbarHeight);

  .nav_left {
    display: flex;
    align-items: center;

    .nav_logo {
      width: 284rpx;
    }
  }

  .nav_right {
    display: flex;
    align-items: center;

    .mobile_language {
      width: 48rpx;
      height: 48rpx;
      margin: 0 20rpx 0 24rpx;
    }

    .icon-badge-wrap {
      position: relative;
      display: inline-block;
      width: 48rpx;
      height: 48rpx;

      .mobile_system {
        width: 48rpx;
        height: 48rpx;
      }

      .tips {
        position: absolute;
        right: -10rpx;
        top: -8rpx;
        z-index: 2;
      }
    }
  }

  .cont {
    width: 100%;
    background-color: var(--light);
    &_bg {
      // position: sticky;
      // top: 0;
      z-index: 88;
      background-color: var(--black);

      .bg_top {
        padding: 0 30rpx;

        .search {
          padding: 26rpx 0 60rpx 0;

          :deep(.u-input) {
            padding: 0 20px 0 16px !important;

            .u-input__content__field-wrapper__field {
              height: 47px;
            }
          }

          .icon-search {
            color: var(--text);
            font-size: 40rpx;
          }

          .icon-camera {
            color: var(--text-01);
            font-size: 70rpx;
          }
        }

        .debug-info {
          padding: 10rpx 0;
          text-align: center;

          text {
            font-size: 24rpx;
            color: var(--primary);
            background: rgba(255, 107, 107, 0.1);
            padding: 8rpx 16rpx;
            border-radius: 20rpx;
          }
        }
      }
    }

    .content {
      width: 100%;
      padding: 30rpx 30rpx;
      position: relative;
      box-sizing: border-box;
      margin-top: -30rpx;
      border-radius: 20rpx 20rpx 0 0;
      z-index: 99;
      background-color: var(--bor-color);

      .banner-section {
        margin-bottom: 38rpx;
      }

      .tab-section {
        margin-bottom: 32rpx;
      }

        .swiper-box {
          width: 100%;
          border-radius: 20rpx;
          overflow: hidden;
      }

      .products_section {
        /deep/ .uni-scroll-view-content {
          margin-top: 16rpx;

          > uni-view {
            .flex();
            flex-wrap: wrap;
            gap: 8rpx 16rpx;

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