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"
      ></tablist>
    </view>
    <view class="content-wrapper">
      <ProductCard class="mrb" />
      <ProductCard class="mrb" />
      <ProductCard class="mrb" />
      <ProductCard class="mrb" />
      <ProductCard class="mrb" />
      <ProductCard class="mrb" />
        <view
      class=""
      style="margin: 60rpx 0 30rpx 0; color: #999999; font-size: 26rpx"
    >
      —— 已经到最底部了哦 ——
    </view>
    </view>
  
  </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";
export default {
  components: {
    headerCom,
    searchVue,
    tablist,
    ProductCard,
  },
  data() {
    return {
      productData: {},
      curruntActive: 0,
      category: [
        {
          type: 1,
          name: "出售中商品",
          count: 0,
        },
        {
          type: 2,
          name: "仓库中商品",
          count: 0,
        },
      ],
    };
  },
  onLoad(options) {
    this.curruntActive = options.indexs || "0";
  },
  methods: {
    headerJump() {
      uni.switchTab({ url: "/shop/productManagementModule/index" });
    },
    onHandleSearch(val) {
      console.log(val);
    },
  },
};
</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: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 340rpx 0rpx 0rpx;
    padding-bottom: 60rpx;
  }
}
.mt {
  margin-top: 0rpx;
}
.mrb {
  margin-bottom: 26rpx;
}
</style>