VAVABUY/pages/shop/index.vue

<template>
  <Theme>
    <view class="wrap">
      <Navbar autoBack fixed @leftClick="leftClick" @rightClick="rightClick">
        <template #left>
          <view class="nav_left">
            <uni-icons type="cart" color="var(--light)" size="24"></uni-icons>
          </view>
        </template>
        <template #center>
          <view class="nav_title">
            <trans _t="tabbar.商城" />
          </view>
          <view class="bg_logo">{{ verConfig.appNames }}</view>
        </template>
        <template #right>
          <view class="nav_right">
            <uni-icons type="star" color="var(--light)" size="24"></uni-icons>
          </view>
        </template>
      </Navbar>
      <view class="content">
        <view class="search">
          <Search
            v-model="searchValue"
            :placeholder="t('请输入关键字')"
            @confirm="searchConfirm"
          >
            <template #prefix>
              <i class="icon-font icon-search"></i>
            </template>
            <template #suffix>
              <!-- <popOver placement="bottom-end" :options="optionsList" isArrow ref="popoverRef">
                <i class="icon-font icon-camera"></i>
              </popOver> -->
            </template>
          </Search>
        </view>
        <view class="tops" id="tabs">
          <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 var(--black)' }
                        : {}
                    "
                  ></view>
                  <view
                    class="sort_arrow_bottom"
                    :style="
                      defaultParams.sort == 'moneyDesc'
                        ? { borderTop: '4px solid var(--black)' }
                        : {}
                    "
                  ></view>
                </view>
              </template>
            </view>
          </view>
        </view>
        <view class="content">
          <List
            url="/shop/goods/list"
            :topHeight="tabHeight"
            isCache
            :defaultParams="defaultParams"
            ref="listRef"
            @datas="getList"
          >
            <template #item="{ item, index }">
              <shopList
                :channel="defaultParams.channel"
                :search="defaultParams.keyWord"
                :item="item"
                @collect="collectClick($event, index)"
              />
            </template>
          </List>
        </view>
      </view>
    </view>
  </Theme>
</template>

<script setup>
import Navbar from "@/components/navbar";
import verConfig from "@/ver.config";
import Search from "@/components/input";
import popOver from "@/components/popover";
import Tab from "@/components/tabs";
import List from "@/components/list";
import { query, systemInfo } from "@/utils";
import shopList from "../index/components/shop_list";
import { onShow, onReachBottom } from "@dcloudio/uni-app";
import { SHOP_USER_COLLECT } from "@/api";
import { ref, nextTick, reactive, onMounted } from "vue";
import { t } from "@/locale";
import { useCacheStore, useTabbarStore } from "@/store";

const useCache = useCacheStore();
const useTabbar = useTabbarStore();
const searchValue = ref("");
const listRef = ref(null);
const actvieNum = ref(1);
const sortActive = ref(0);
const tabHeight = ref(0);
const dataList = ref([]);
const tabList = ref([
  {
    img: "../../static/shop/icon_0.png",
    text: "1688",
    channel: 0,
  },
  {
    img: "../../static/shop/icon_1.png",
    text: "淘宝",
    channel: 1,
  },
  {
    img: "../../static/shop/icon_3.png",
    text: "JD",
    channel: 3,
  },
]);
const defaultParams = reactive({
  channel: tabList.value[actvieNum.value].channel,
  keyWord: "",
  start_price: "",
  end_price: "",
  sort: "",
  img: "",
});
const sortList = reactive([
  {
    text: "综合",
    sort: "",
    callback: (item, index) => {
      sortActive.value = index;
      defaultParams.sort = "";
      nextTick(() => {
        listRef.value && listRef.value.handleRefresh();
      });
    },
  },
  {
    text: "价格",
    isTrue: 1,
    sort: "moneyDesc", // moneyAsc 升序
    callback: (item, index) => {
      priceClick(item, index);
    },
  },
]);

const leftClick = () => {
  uni.switchTab({ url: "/pages/shop/cart" });
  useTabbar.getPageCur("shop");
};
const rightClick = () => {
  uni.navigateTo({ url: `/pages/dashboard/favorites` });
};

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

const searchConfirm = () => {
  defaultParams.keyWord = searchValue.value;
  nextTick(() => {
    listRef.value && listRef.value.handleRefresh();
  });
};
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();
  });
};

const collectClick = (item, index) => {
  setCollect(
    {
      channel: tabList.value[actvieNum.value].channel,
      type: "good",
      goods_id: item.num_iid,
      seller_id: item.seller_id,
      title: item.title,
      pic_url: item.pic_url,
      price: item.price,
    },
    index
  );
};

const setCollect = async (params, index) => {
  try {
    const res = await SHOP_USER_COLLECT(params);
    nextTick(() => {
      dataList.value[index].isCollect = res.data.collect;
      listRef.value && listRef.value.setList(dataList.value);
      useCache.changeShopCollect({
        channel: params.channel,
        goods_id: params.goods_id,
        isCollect: res.data.collect,
      });
    });
  } catch (error) {
    Toast(error.msg);
  }
};

onMounted(() => {
  nextTick(async () => {
    const res = await query("#tabs", this);
    // tabTop.value = res.top + systemInfo().statusBarHeight;
    tabHeight.value = res.height;
    nextTick(() => {
      // listRef.value && listRef.value.getData();
    });
  });
});

onShow(() => {
  nextTick(async () => {
    listRef.value && listRef.value.handleRefresh();
  });
});

onReachBottom(() => {
  nextTick(() => {
    listRef.value && listRef.value.scrolltolower();
  });
});
uni.hideTabBar();
</script>

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

.wrap {
  background: var(--bg);
  overflow: hidden;
  .flex();
  flex-direction: column;

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

  .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;
  }

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

  .nav_right {
    color: var(--primary);
    .size(24rpx);
    font-weight: 500;
  }

  .content {
    .search {
      padding: 20rpx 30rpx;
      background-color: var(--black);

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

      :deep(.u-input) {
        padding: 0 32rpx !important;

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

    .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-01);
          .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(--black);
        }
      }
    }

    .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);
            }
          }
        }
      }
    }
  }
}
</style>