H5-Merchant/shop/productManagementModule/productManagement.vue

<template>
  <view class="product-manger-wrapper">
    <!-- <headersVue headerTitle="商品管理" @headerJump="headerJump"></headersVue> -->
    <view class="product-manger-content">
      <view class="product-manger-content--top">
        <searchVue @search="search" class="search-box"></searchVue>
        <view class="btn-product" @click="onHandleAddProduct">
          <image
            src="/static/images/new_ui/tianjiachanpin.png"
            mode="scaleToFill"
          />
          <view class="txt">添加商品</view>
        </view>
      </view>
      <view class="product-manger-content--tab">
        <tabsVue :category="dataList"  />
      </view>
    </view>
  </view>
</template>

<script>
import headersVue from "../components/headers/headers.vue";
import searchVue from "./components/search/search.vue";
import tabsVue from "./components/tablist.vue";
//商品列表
export default {
  components: {
    headersVue,
    searchVue,
	tabsVue
  },
  methods: {
    headerJump() {
      uni.switchTab({ url: "/pages/my/index" });
    },
    onHandleAddProduct() {
		uni.redirectTo({
			url:`./addProduct`
		})
	}
  },
  data() {
    return {
      dataList: [
        {
          type: 1,
          name: "出售中商品",
          count: 10
        },
        {
          type: 2,
          name: "仓库中商品",
          count: 31
        },
        {
          type: 3,
          name: "已售罄商品",
          count: 0
        },
        {
          type: 4,
          name: "警戒库存",
          count: 0
        },
        {
          type: 5,
          name: "回收站商品",
          count: 0
        },
        {
          type: 6,
          name: "待审核商品",
          count: 0
        },
        {
          type: 7,
          name: "审核未通过商品",
          count: 0
        }
      ],

    };
  }
};
</script>
<style>
page {
  background-color: #f7f8fc;
}
</style>
<style lang="scss" scoped>
.product-manger-wrapper {
  // margin-top: 96rpx;
  // border: 2rpx solid #f00;
  background: #fff;
  .product-manger-content {
    &--top {
      display: flex;
      .search-box {
        flex: 1;
      }
      .btn-product {
        user-select: none;
        width: 160rpx;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 15rpx;
        image {
          width: 32rpx;
          height: 32rpx;
        }
        .txt {
          font-weight: 400;
          font-size: 26rpx;
          color: #666666;
          word-break: break-all;
        }
      }
    }
  }
}
</style>