wx-qhb/pageD/supplyChainGoods/supplyChainGoods.vue

<template>
  <view>
    <view class="top-tab-search">
      <u--input
        placeholder="搜索商品名称"
        shape="circle"
        prefixIcon="search"
        prefixIconStyle="font-size: 22px;color: #909399"
        v-model="searchValue"
        @change="search"
      ></u--input>
      <view class="tab">
        <view class="top-tab">
          <view
            :class="{ commodity: follow == 'null' }"
            class="tab"
            @click="tabSwitch('null')"
          >
            全部
          </view>
          <view
            :class="{ commodity: follow == 'normal' }"
            class="tab"
            @click="tabSwitch('normal')"
          >
            已上架
          </view>
          <view
            :class="{ commodity: follow == 7 }"
            class="tab"
            @click="tabSwitch(7)"
          >
            审核中
          </view>
          <view
            :class="{ commodity: follow == 2 }"
            class="tab"
            @click="tabSwitch(2)"
          >
            审核失败
          </view>
          <view
            :class="{ commodity: follow == 'down' }"
            class="tab"
            @click="tabSwitch('down')"
          >
            已下架
          </view>
        </view>
      </view>
    </view>

    <view class="page">
      <view v-for="item in goodsList" :key="item.id">
        <GoodsInformation
          productAndCommodity="product"
          :status="status"
          @toDetail="toDetail"
          :itemInfo="item"
          @goodsUpDown="goodsUpDown"
        />
      </view>
    </view>
    <!-- <view class="footer">
      <button class="btn">添加供应链商品</button>
    </view> -->
  </view>
</template>

<script>
import GoodsInformation from "../components/goodsInformation.vue";
export default {
  components: {
    GoodsInformation,
  },
  data() {
    return {
      follow: "null",
      status: "null",
      page: 1,
      goodsList: [],
      reviewStatus: "",
      productStatus: "",
      searchValue: "",
    };
  },
  computed: {
    i18n() {
      return this.$t("index");
    },
  },
  methods: {
    tabSwitch(num) {
      this.follow = num;
      //num类型为数字时，搜索审核中的商品，为字符串是搜索审核完成的商品
      if (typeof num == "number") {
        this.reviewStatus = num;
        this.productStatus = "";
      } else {
        this.productStatus = num;
        this.reviewStatus = "";
      }

      this.getinfoList();
    },
    //跳转商品详情
    toDetail(value) {
      uni.navigateTo({
        url: `/pageD/productDetails/productDetails?goodsId=${value.id}&pageStatus=supply`,
      });
    },
    //搜索
    search(e) {
      console.log(e);
      this.getinfoList();
    },
    //获取供应链商品列表
    getinfoList() {
      let api;
      //判断字段存不存在，存在则向后端传输该字段，不存在则不传输
      if (this.productStatus) {
        api = `/api/goods/catena_goods?page=${this.page}&limit=10&status=${this.productStatus}`;
      } else if (this.reviewStatus) {
        api = `/api/goods/catena_goods?page=${
          this.page
        }&limit=10&review_status=${
          this.reviewStatus == 7 ? "0" : this.reviewStatus
        }`;
      } else {
        api = `/api/goods/catena_goods?page=${this.page}&limit=10`;
      }
      //拼接搜索字段
      api = api + `&keyword=${this.searchValue}`;
      uni.$u.http.get(api).then((res) => {
        this.goodsList = res.data;
      });
    },
    //商品上架，下架
    goodsUpDown(value, item) {
      // uni.#u.http.post(``)
    },
  },
  mounted() {
    this.getinfoList();
    uni.setNavigationBarTitle({
      title: "我的供应链商品",
    });
  },
};
</script>

<style lang="scss" scoped>
.top-tab-search {
  background-color: #fff;
  padding: 10rpx 24rpx;

  .top-tab {
    margin-top: 10rpx;
    padding: 0 20rpx;
    display: flex;
    justify-content: space-between;

    .tab {
      font-size: 26rpx;
      color: rgba(34, 34, 34, 0.8);
      flex-shrink: 0;
      height: 44rpx;
      display: flex;
      align-items: flex-end;
      padding-bottom: 12rpx;
    }

    .commodity {
      position: relative;
      font-weight: 600;
    }

    .commodity::before {
      content: "";
      display: block;
      height: 4rpx;
      width: 50%;
      background: #f83224;
      position: absolute;
      bottom: -10rpx;
      opacity: 0.8;
      left: 50%;
      transform: translate(-50%, 50%);
    }
  }
}

.page {
  padding: 20rpx 24rpx;
}
.footer {
  position: fixed;
  bottom: 0;
  background-color: #fff;
  width: 100%;
  padding: 16rpx 24rpx 70rpx 24rpx;
  .btn {
    border-radius: 52rpx;
    background-color: #f83224;
    color: #fff;
    border: none;
    padding: 0;
    margin: 0;
    width: 94%;
    font-size: 30rpx;
  }
}
</style>