VAVABUY/pages/dashboard/favorites.vue

<template>
  <Theme>
    <view class="wrap">
      <Navbar fixed border>
        <template #center>
          <view class="nav_search">
            <Search
              v-model="searchValue"
              @confirm="searchConfirm"
              :placeholder="t('商品的链接或名称')"
            >
              <template #prefix>
                <i class="icon-font icon-search"></i>
              </template>
            </Search>
          </view>
        </template>
        <template #right>
          <navMenu :options="{ icon: 'icon-home', text: '主页' }" />
        </template>
      </Navbar>
      <view class="content">
        <view id="tabs" :style="{ top: tabTop + 'px' }">
          <!-- <view class="cont_tab">
            <Tab :active="tabActive" :tabList="tabList" @confirm="tabConfirm" keyName="text" />
          </view> -->
          <y-select
            v-model:current="cateId"
            :label="selectLabel"
            :options="selectList"
            key-name="text"
            @select="selectItem"
            ref="selectRef"
          >
            <template #optionItem="{ item }">
              <view class="select_item">
                <image
                  :src="`../../static/shop/icon_${item.channel}.png`"
                  class="img"
                  v-if="typeof item.channel == 'number'"
                ></image>
                <view class="_item_text">
                  <trans :_t="item.text" />
                </view>
              </view>
            </template>
          </y-select>
        </view>
        <view class="cont" :style="{ 'padding-top': tabHeight + 'px' }">
          <List
            url="/shop/collect/list"
            pagesize="10"
            :topHeight="tabHeight"
            :class="tabActive == 0 ? 'list0' : 'list1'"
            :defaultParams="{ keywords: searchValue, ...params }"
            ref="listRef"
          >
            <template #item="{ item }">
              <template v-if="tabActive == 0">
                <good_list :item="item" @delete="deleteItem" />
              </template>
              <template v-else>
                <shop_list :item="item" @delete="deleteItem" />
              </template>
            </template>
          </List>
        </view>
      </view>
    </view>
  </Theme>
</template>
<script setup>
import Navbar from "@/components/navbar";
import navMenu from "@/components/nav_menu";
import Search from "@/components/input";
import Tab from "@/components/tabs";
import List from "@/components/list";
import { ref, onMounted, nextTick, computed } from "vue";
import { t } from "@/locale";
import ySelect from "@/components/select";
import good_list from "./components/good_list";
import shop_list from "./components/shop_list";
import { query, systemInfo } from "@/utils";
import { onReachBottom, onLoad } from "@dcloudio/uni-app";

const searchValue = ref("");
const tabActive = ref(0);
const listRef = ref(null);
const tabList = [
  { text: "产品", type: "good" },
  { text: "店铺", type: "shop" },
];
const cateId = ref(0);
const tabTop = ref(44);
const selectRef = ref(null);
const tabHeight = ref(0);
const change = ref(null);
const selectList = [
  {
    text: "默认",
    channel: "",
  },
  {
    text: "1688",
    channel: 0,
  },
  {
    text: "淘宝",
    channel: 1,
  },
  {
    text: "JD",
    channel: 3,
  },
];
const selectLabel = computed(() => selectList[cateId.value].text);
const params = computed(() => {
  return {
    type: tabList[tabActive.value].type,
    channel: selectList[cateId.value].channel,
    change: change.value,
  };
});

const searchConfirm = () => {
  nextTick(() => {
    listRef.value && listRef.value.handleRefresh();
  });
};

const selectItem = () => {
  nextTick(() => {
    listRef.value && listRef.value.handleRefresh();
  });
};
const deleteItem = (res) => {
  nextTick(() => {
    listRef.value && listRef.value.handleRefresh(true);
  });
};

const tabConfirm = (item, index) => {
  selectRef.value && selectRef.value.close();
  if (!item) return;
  if (tabActive.value == index) return;
  tabActive.value = index;
  nextTick(() => {
    listRef.value && listRef.value.handleRefresh();
  });
};

onMounted(async () => {
  const res = await query("#tabs", this);
  tabTop.value = res.top + systemInfo().statusBarHeight;
  tabHeight.value = res.height;
});
onLoad((options) => {
  change.value = options.change;
  nextTick(() => {
    listRef.value && listRef.value.getData();
  });
});
onReachBottom(() => {
  nextTick(() => {
    listRef.value && listRef.value.scrolltolower();
  });
});
</script>
<style lang="less" scoped>
@import url("@/style.less");

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

  /deep/ .u-navbar__content {
    justify-content: unset;

    .u-navbar__content__left,
    .u-navbar__content__right {
      position: unset;
    }
  }

  .nav_search {
    flex: 1;

    .icon-search {
      color: #a8abb2;
      .size(16px);
    }
  }

  .content {
    // flex-grow: 1;
    // height: calc(100vh - 44px);
    flex-direction: column;
    .flex();

    #tabs {
      position: fixed;
      top: 44px;
      left: 0;
      right: 0;
      z-index: 1;
    }

    .cont_tab {
      background-color: var(--light);
      padding: 0 24rpx;
    }

    /deep/ .u-select {
      padding: 0 32rpx;
      background-color: var(--bg);

      .select_item {
        color: #606266;
        cursor: pointer;
        .ver();
        font-size: 28rpx;
        line-height: 44rpx;
        padding: 10rpx 32rpx;
        white-space: nowrap;

        .img {
          width: calc(32rpx);
          height: calc(32rpx);
          display: block;
        }

        ._item_text {
          .ver();
          font-size: 28rpx;
          font-weight: 500;
          line-height: 60rpx;
          color: #62708c;
          margin: 0 8rpx;
          font-weight: 700;
        }
      }
    }

    .cont {
      flex-grow: 1;
      overflow: hidden scroll;
      padding: 0 32rpx;
      background-color: var(--bg);
    }

    .cont_footer {
      line-height: 120rpx;
      background-color: var(--light);
      box-shadow: 0 -4px 6px #0000000d;
      padding: 0 24rpx;
      .flex_position(space-between);

      .total_btn {
        .size(24rpx);
        height: 38px;
        margin-left: 16rpx;
        min-width: 180rpx;
        background-color: var(--black);
        color: var(--light);
        border-radius: 16rpx;
        padding: 16rpx 30rpx;
        text-align: center;
        .flex_center();
        margin-left: 24rpx;
      }
    }
  }

  .list0 {
    /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>