H5-Merchant/pages/supplychainon/supplychainon.vue

<template>
  <view class="supplychainon-wrapper">
    <headerCom headerTitle="供应链列表" @headerJump="headerJump"></headerCom>
    <view class="headers-box">
      <searchVue
        placeholder="请输入商品名称"
        @search="onHandleSearch"
      ></searchVue>
      <tablist
        class="mt"
        :category="category"
        :curruntActive="curruntActive"
        @tabs="tabsHandleClick"
      ></tablist>
    </view>
    <view class="content-wrapper">
      <template v-if="list.length > 0">
        <ProductCard
          class="mrb"
          v-for="(item, index) in list"
          :key="index"
          :data="item"
          @status-change="handleStatusChange"
          @edit-price="handleEditPrice"
        />
      </template>
      <template v-else>
        <emptyDataVue style="top: initial" />
      </template>
      <view
        v-if="tihsi == 0 && list.length > 0"
        class=""
        style="margin: 0rpx 0 30rpx 0; color: #999999; font-size: 26rpx"
      >
        —— 已经到最底部了哦 ——
      </view>
    </view>
    <priceEditModal v-if="isshow" @close="isshow=false"/>
  </view>
</template>

<script>
import headerCom from "../../shop/components/headers/headers.vue";
import searchVue from "./search/search.vue";
import tablist from "./tablist.vue";
import ProductCard from "./ProductCard.vue";
import emptyDataVue from "../../shop/components/emptyData/emptyData.vue";
import priceEditModal from './price-edit-modal.vue'
import {
  getSupplyChainList,
  getSupplyChainTab,
  postchangeshow,
} from "@/commit/product.js";
export default {
  components: {
    headerCom,
    searchVue,
    tablist,
    ProductCard,
    emptyDataVue,
    priceEditModal
  },
  data() {
    return {
      page: 1,
      limit: 10,
      tihsi: "",
      list: [],
      keywords: "",
      is_panudn: true,
      productData: {},
      curruntActive: 0,
      category: [],
      type: 1,
      isshow:false
    };
  },
  async onLoad(options) {
    this.curruntActive = options.indexs || options.tabIndex || "0";
    this.type = options.type || 1;
    await this.getSupplyChainTabData();
    await this.getSupplyChainListData();
  },
  onPullDownRefresh() {
    uni.showLoading({
      title: "加载中",
    });
    this.page = 1;
    this.is_panudn = true;
    this.list = [];
    this.getSupplyChainListData();
  },
  onReachBottom() {
    if (this.is_panudn == true) {
      this.page++;
      this.getSupplyChainListData();
    } else {
      return;
    }
  },
  methods: {
    async tabsHandleClick({ index, item }) {
      this.indexs = index;
      this.curruntActive = index;
      this.list = [];
      this.type = item.type || 1;
      this.page = 1;
      this.is_panudn = true;
      await this.getSupplyChainListData();
    },
    async getSupplyChainTabData() {
      try {
        const res = await getSupplyChainTab();
        if (res.data.status === 200) {
          this.category = res.data.data || [];
        }
      } catch (error) {}
    },
    async getSupplyChainListData() {
      uni.showLoading({
        title: "加载中",
      });
      try {
        const res = await getSupplyChainList({
          page: this.page,
          limit: this.limit,
          keyword: this.keywords,
          type: this.type,
          spec_type: null, //商品规格 null 0 1
        });
        uni.stopPullDownRefresh();
        if (res.data.status === 200) {
          this.tihsi = res.data.data.list.length || 0;
          console.log(this.tihsi, "this.tihsi");
          if (res.data.data.count > 0) {
            if (this.page == 1) {
              this.list = res.data.data.list;
            } else {
              this.list = this.list.concat(res.data.data.list);
            }
          } else {
            if (this.page == 1) {
              this.list = [];
            }
            this.is_panudn = false;
          }
          uni.hideLoading();
        }
      } catch (error) {}
    },
    headerJump() {
      uni.switchTab({ url: "/shop/productManagementModule/index" });
    },
    async onHandleSearch(val) {
      this.keywords = val;
      await this.getSupplyChainListData();
    },
    handleStatusChange(row) {
      let ids = [];
      ids.push(row.product_id);
      uni.showLoading({
        title: "状态更改中",
      });
      postchangeshow({ ids: ids, is_show: row.is_show })
        .then((res) => {
          if (res.data.status === 200) {
            uni.showToast({
              title: res.data.message,
              icon: "none",
            });
            this.getSupplyChainTabData();
            this.getSupplyChainListData();
          }
        })
        .catch((err) => {
          uni.hideLoading();
          uni.hideToast();
        });
    },
   handleEditPrice(data){
    //  this.productData = data;
     this.isshow = true;
   }
  },
};
</script>
<style>
page {
  background-color: #f7f8fc;
  /* height: 100%; */
}
</style>
<style lang="scss" scoped>
.supplychainon-wrapper {
  .headers-box {
    position: fixed;
    top: 88rpx;
    left: 0;
    width: 100%;
    z-index: 33;
  }
  .content-wrapper {
    width: calc(100% - 52rpx);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 340rpx 26rpx 0rpx;
    padding-bottom: 60rpx;
  }
}
.mt {
  margin-top: 0rpx;
}
.mrb {
  margin-bottom: 26rpx;
}
</style>