H5-Merchant/pages/onlineproductselection/onlineproductselection.vue

<template>
  <view class="online-class-wrapper">
    <view class="headers">
      <headersVue
        headerTitle="在线选品列表"
        @headerJump="headerJump"
      ></headersVue>
      <view class="headers-box">
        <searchVue
          placeholder="请输入商品名称"
          @search="onHandleSearch"
        ></searchVue>
        <CategoryNav
          :category="quanbuData"
          :curruntActive="curruntActivesd"
          @tabs="tabsCategoryNav"
        />
        <Statistics
          :category="categoryData"
          :curruntActive="curruntActive"
          @tabs="tabsStatistics"
        />

        <!-- <ActionButtons class="mt"/> -->
        <!-- <view class="sort-buttons">
      <button type="default" size="mini" @click="sortByPrice">{{ sortBy === 'price'? '销售价 ▲' : '销售价 ▼' }}</button>
      <button type="default" size="mini" @click="sortByProfit">{{ sortBy === 'profit'? '创客利润 ▲' : '创客利润 ▼' }}</button>
    </view> -->
      </view>
    </view>
    <view class="online-content">
      <view class="product-list">
        <template v-if="list.length > 0">
          <ProductCard
            :product="product"
            v-for="(product, index) in list"
            :key="index"
            @success="initData"
          />
        </template>
        <template v-else>
          <emptyDataVue />
        </template>
      </view>
      <view
        class=""
        v-if="tihsi == 0 && list.length > 0"
        style="margin: 60rpx 0 30rpx 0; color: #999999; font-size: 26rpx"
      >
        —— 已经到最底部了哦 ——
      </view>
    </view>
  </view>
</template>

<script>
import headersVue from "../../shop/components/headers/headers.vue";
import searchVue from "../../shop/commodity/components/search/search.vue";
import CategoryNav from "./components/listCard/CategoryNav.vue";
import Statistics from "./components/listCard/Statistics.vue";
import ActionButtons from "./components/listCard/ActionButtons.vue";
import ProductCard from "./components/listCard/ProductCardOnline.vue";
import emptyDataVue from "../../shop/components/emptyData/emptyData.vue";
import {
  statusFilterApi,
  categoryFilterApi,
  productSelectListApi,
  productDetailApi,
} from "@/commit/product.js";
export default {
  components: {
    headersVue,
    searchVue,
    CategoryNav,
    Statistics,
    ActionButtons,
    ProductCard,
    emptyDataVue,
  },
  data() {
    return {
      curruntActive: 0,
      curruntActivesd: 0,
      categoryData: [],

      quanbuData: [
        {
          cateIds: "",
          cateName: "全部",
        },
      ],
      list: [],

      tihsi: "",

      is_panudn: true,
      products: [
        {
          imageUrl: "商品图片地址1",
          title: "DT15100心相印茶语丝享100抽*20包三层塑装纸面巾",
          salePrice: 43.06,
          pension: 0.0,
          creatorProfit: 7.17,
          status: "正常",
          description: "心相印经典纸巾产品",
          isChecked: false,
        },
        {
          imageUrl: "商品图片地址2",
          title: "测试商品 请勿下单",
          salePrice: 72.88,
          pension: 0.0,
          creatorProfit: 12.14,
          status: "正常",
          description: "伊利测试商品 不会发货",
          isChecked: false,
        },
      ],
      searchValue: "",
      formData: {
        cate_ids: "",
        page: 1,
        limit: 10,
        type: "", //筛选类型
        profit: "", //筛选利润
        title: "", //筛选标题
        price: "", //筛选价格
      },
    };
  },
  async onLoad(params) {
    await this.getCategoryFilterApi();
    await this.initData();
     
  },
  onPullDownRefresh() {
    uni.showLoading({
      title: "加载中",
    });
    this.formData.page = 1;
    this.is_panudn = true;
    this.list = [];
    this.getProductList();
  },
  onReachBottom() {
    if (this.is_panudn == true) {
      this.formData.page++;
      this.getProductList();
    } else {
      return;
    }
  },
  methods: {
    async initData() {
      await this.getStatusFilter();
      await this.getProductList();
    },
    async getStatusFilter() {
      try {
        const res = await statusFilterApi();
        if (res.data.status == 200) {
          this.categoryData = res.data.data || [];
        }
      } catch (error) {}
    },
    async getCategoryFilterApi() {
      try {
        const res = await categoryFilterApi({
          page: 1,
          limit: 12,
        });
        if (res.data.status == 200) {
          let data = res.data.data.data || [];
          this.quanbuData = [
            {
              cateIds: "",
              cateName: "全部",
            },
          ];
          data.forEach((item) => {
            this.quanbuData.push(item);
          });
        }
        console.log(res.data, "9981");
      } catch (error) {}
    },
    headerJump() {
      uni.switchTab({ url: "../../shop/productManagementModule/index" });
    },
    goJump() {
      uni.redirectTo({ url: "./onlineDetail" });
    },
    onHandleSearch(val) {
      console.log(val);
      this.formData.title = val;
      this.getProductList();
    },
    async getProductList() {
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      try {
        const res = await productSelectListApi(this.formData);
        uni.stopPullDownRefresh();
        if (res.data.status == 200) {
          this.tihsi = res.data.data.data.lenght || 0;
          if (res.data.data.count > 0) {
            if (this.formData.page == 1) {
              this.list = res.data.data.data;
            } else {
              this.list = this.list.concat(res.data.data.data);
            }
          } else {
            if (this.formData.page == 1) {
              this.list = [];
            }
            this.is_panudn = false;
          }
          uni.hideLoading();
        }
		 uni.hideLoading();
      } catch (error) {
        uni.hideLoading();
		  
      }finally{
		  //  uni.hideLoading();
	  }
    },
    sortByPrice() {
      this.sortBy = this.sortBy === "price" ? "" : "price";
    },
    sortByProfit() {
      this.sortBy = this.sortBy === "profit" ? "" : "profit";
    },
    tabsStatistics({ index, item }) {
      this.curruntActive = index;
      this.formData.type = item.type;
      this.list = [];
      this.formData.page = 1;
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300,
      });
      this.getProductList();
    },
    tabsCategoryNav({ index, item }) {
      this.curruntActivesd = index;
      this.formData.cate_ids = item.cateIds;
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300,
      });
      this.list = [];
      this.formData.page = 1;
      this.getStatusFilter();
      this.getProductList();
    },
  },
  computed: {
    filteredProducts() {
      let filtered = this.products.filter((product) => {
        return product.title.includes(this.searchValue);
      });
      if (this.sortBy === "price") {
        return filtered.sort((a, b) => a.salePrice - b.salePrice);
      } else if (this.sortBy === "profit") {
        return filtered.sort((a, b) => a.creatorProfit - b.creatorProfit);
      }
      return filtered;
    },
  },
};
</script>
<style>
page {
  background-color: #f7f8fc;
  height: 100%;
}
</style>
<style lang="scss" scoped>
.online-class-wrapper {
  height: 100%;
  .headers {
    width: 100%;
    box-sizing: border-box;
    .headers-box {
      margin-top: 95rpx;
      position: fixed;
      top: 0rpx;
      width: 100%;
      z-index: 666;
    }
  }
  .online-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 450rpx;
    box-sizing: border-box;
    padding-bottom: 60rpx;
    width: 100%;
    .product-list {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
}
.mt {
  margin-top: 30rpx;
  padding: 0 15rpx;
}
.sort-buttons {
  display: flex;
  //   align-items: center;
  margin-bottom: 20rpx;
}
.sort-buttons button {
  margin-right: 10rpx;
}
</style>