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" :currentActive="currentActive"/>
      </view>
    </view>
    <view class="product-manger-content--list">
      <view class="list-card" v-for="(item, index) in dataList" :key="index">
        <view class="list-card-top">
          <view class="list-card-top--left">
             <image
                src="/static/images/new_ui/tianjiachanpin.png"
                mode="scaleToFill"
              />
          </view>
          <view class="list-card-top--right">
            <view class="list-card-top--right-title">此处显示商品名称最多一行，显示不下此处显示商品名称最多一行，显示不下</view>
            <view class="list-card-top--right-description">
              <view class="list-card-top--right-description--left">
                <text class="title">销量</text>
                <text>5000</text>
              </view>
              <view class="list-card-top--right-description--right">
                <text class="title">库存</text>
                <text>5000</text>
              </view>
            </view>
            <view class="list-card-top--right-price">
              <view class="list-card-top--right-price--left">
                <text>¥</text>
                <text class="price">5000</text>
              </view>
            </view>
          </view>
        </view>
        <view class="list-card-bottom-btn">
          <view class="list-card-bottom-btn-list">
            <view class="list-card-bottom-btn-list--item">推荐</view>
            <view class="list-card-bottom-btn-list--item">驳回原因</view>
            <view class="list-card-bottom-btn-list--item">上架</view>
            <view class="list-card-bottom-btn-list--item">下架</view>
            <view class="list-card-bottom-btn-list--item">删除草稿</view>
          </view>

          </view>

        </view>
              <view
        class=""
        v-if="tihsi == 0"
        style="margin: 60rpx 0 30rpx 0; color: #999999; font-size: 26rpx"
      >
        —— 已经到最底部了哦 ——
      </view>
      </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: {
    		onPullDownRefresh() {
			uni.showLoading({
				title: '加载中',
			});
			this.page = 1
			this.is_panudn = true
			this.list = []
			// this.orderList();
		},
		onReachBottom() {
      console.log('onReachBottom')
			// if (this.is_panudn == true) {
			// 	this.page++;
			// 	this.orderList();
			// } else {
			// 	return
			// }
		},
    headerJump() {
      uni.switchTab({ url: "/shop/productManagementModule/index" });
    },
    onHandleAddProduct() {
      uni.redirectTo({
        url: `./addProduct`,
      });
    },
  },
  onLoad(options) {
    this.currentActive = options.tabIndex || "0";
  },
  data() {
    return {
      currentActive:'0',
      tihsi: 0,
      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;
 

  .product-manger-content {
    background: #fff;
    position: fixed;
    top: 80rpx;
    width: 100%;
    z-index: 666;
    &--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;
        }
      }
    }
  }
  .product-manger-content--list {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(100% - 52rpx);
    // border: 2rpx solid #f00;
    margin: 328rpx 26rpx 26rpx;
    overflow: auto;
    .list-card {
      width: 100%;
      min-height: 274rpx;
      background: #ffffff;
      border-radius: 8rpx;
      margin-bottom: 26rpx;
      box-sizing: border-box;
      padding: 22rpx 20rpx 22rpx;
      .list-card-top {
        display: flex;
        gap: 20rpx;
        .list-card-top--left {
          width: 150rpx;
          height: 150rpx;
          flex-shrink: 0;
          border-radius: 7rpx;
          background: #d8d8d8;
          // text-align: center;
          image {
            width: 100%;
            height: 100%;
            border-radius: 7rpx;
          }
        }
        .list-card-top--right {
          flex: 1;

          .list-card-top--right-title {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 26rpx;
            color: #333333;
            line-height: 37rpx;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
          }
          .list-card-top--right-description {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 22rpx;
            color: #666666;
            line-height: 30rpx;
            word-break: break-all;
            display: flex;
            gap: 20rpx;
            justify-content: flex-start;
            padding: 13rpx 0 20rpx 0;
          }
          .list-card-top--right-description--left,
          .list-card-top--right-description--right {
            flex: 40%;
            .title {
              padding-right: 16rpx;
            }
          }
          .list-card-top--right-price {
            font-family: PingFangSC, PingFang SC;
            .list-card-top--right-price--left {
              word-break: break-all;
              .price {
                font-weight: 600;
                font-size: 36rpx;
                color: #333333;
                line-height: 38rpx;
              }
            }
          }
        }
      }
      .list-card-bottom-btn {
        padding-top: 30rpx;
        .list-card-bottom-btn-list {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          flex-wrap: wrap;
          gap: 20rpx;
          user-select: none;
          .list-card-bottom-btn-list--item {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 146rpx;
            height: 60rpx;
            border-radius: 8rpx;
            border: 1rpx solid #e5e5e5;
            font-weight: 400;
            font-size: 24rpx;
            color: #333333;
          }
        }
      }
    }
  }
}
</style>