wx-qhb/pageD/commodityManage/commodityManage.vue

<template>
  <view>
    <!-- 顶部搜索加tab栏部分，点击批量打折是隐藏该部分 -->
    <view class="top-tab-search" v-if="!batch">
      <view class="search">
        <u--input
          v-model="keywords"
          placeholder="搜索商品名称"
          shape="circle"
          prefixIcon="search"
          prefixIconStyle="font-size: 22px;color: #909399"
          @change="search"
        ></u--input>
        <view class="screen" @click="openPopup">
          筛选
          <image
            class="screen-icon"
            src="../../static/mine/334.png"
            mode=""
          ></image>
        </view>
      </view>
      <view class="tab">
        <view class="top-tab">
          <view
            :class="{ commodity: follow == '' }"
            class="tab"
            @click="tabSwitch('')"
          >
            全部
          </view>
          <view
            :class="{ commodity: follow == 'normal' }"
            class="tab"
            @click="tabSwitch('normal')"
          >
            已上架
          </view>
          <view
            :class="{ commodity: follow == 'down' }"
            class="tab"
            @click="tabSwitch('down')"
          >
            已下架
          </view>
        </view>
      </view>
    </view>
    <!-- 顶部搜索加tab栏部分，点击批量打折是隐藏该部分 -->

    <!-- 内容 -->
    <view class="page">
      <u-checkbox-group
        v-model="selectedGoods"
        placement="column"
        @change="checkboxChange"
      >
        <view v-for="item in goodsList" :key="item.id">
          <view class="list">
            <view class="radio" v-if="batch">
              <u-checkbox
                :name="item.id"
                shape="circle"
                color="#f83224"
                activeColor="#f83224"
                :disabled="item.goods.status == 'down'"
              >
              </u-checkbox>
            </view>
            <GoodsInformation
              :batch="batch"
              productAndCommodity="commodity"
              @openDiscountsPopup="openDiscountsPopup"
              :status="status"
              :itemInfo="item"
              @toDetail="toDetail"
            />
          </view>
        </view>
      </u-checkbox-group>
    </view>
    <view class="footer" v-if="!batch">
      <view class="batch" @click="batchDiscount"> 批量打折 </view>
      <!-- <button class="btn-1">上架平台商品</button> -->
    </view>
    <view class="footer" v-else>
      <view class="batch" @click="allSelect">
        <radio
          :checked="value"
          style="transform: scale(0.7)"
          color="#f83224"
          activeBackgroundColor="#f83224"
        ></radio>
        全选
      </view>
      <view
        style="
          font-size: 26rpx;
          margin-left: 20rpx;
          color: rgba(54, 54, 54, 0.5);
        "
        @click="cancelDiscount"
        >取消打折</view
      >
      <button class="btn" @click="wantDiscount">我要打折</button>
    </view>
    <!-- 筛选弹窗 -->
    <ScreenPopup :show="show" @close="close" :follow="follow" />
    <!-- 筛选弹窗 -->

    <!-- 打折弹窗 -->
    <DiscountsPopup
      :show="discountsShow"
      :selectGoodsInformation="selectGoodsInformation"
      @close="closeDiscountsPopup"
    />
    <!-- 打折弹窗 -->

    <!-- 批量打折 -->
    <BatchDiscountPopup
      :show="batchPopup"
      @close="closeDiscountsPopup"
      :selectGoodsInformation="selectGoodsInformation"
    />

    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import GoodsInformation from "./component/goodsInformation.vue";
import ScreenPopup from "./component/screenPopup.vue";
import DiscountsPopup from "./component/discountsPopup.vue";
import BatchDiscountPopup from "./component/batchDiscountPopup.vue";
export default {
  components: {
    GoodsInformation,
    ScreenPopup,
    DiscountsPopup,
    BatchDiscountPopup,
  },
  data() {
    return {
      follow: "",
      status: "1",
      show: false,
      discountsShow: false,
      selectGoodsInformation: {},
      batch: false,
      value: false,
      batchPopup: false,
      goodsList: [],
      keywords: "", //搜索关键字
      source: "",
      selectedGoods: [],
    };
  },
  computed: {
    i18n() {
      return this.$t("index");
    },
    //可选的商品数量，去掉下架的商品
    goodsLength() {
      let num = 0;
      this.goodsList.map((item) => {
        if (item.goods.status != "down") {
          num++;
        }
      });
      return num;
    },
  },
  watch: {
    selectedGoods(newVal) {
      if (this.goodsLength == newVal.length) {
        this.value = true;
      } else {
        this.value = false;
      }
    },
  },
  methods: {
    //切换横向tab栏
    tabSwitch(num) {
      this.follow = num;
      this.getCommodityList(num);
    },
    checkboxChange(e) {
      console.log(e);
    },
    //搜索
    search(e) {
      this.getCommodityList();
    },
    //打开筛选弹窗
    openPopup() {
      this.show = true;
    },
    //关闭筛选弹窗
    close(data) {
      this.show = false;
      if (data) {
        this.keywords = data.keywords;
        this.source = data.source;
        this.getCommodityList(data.status);
      } else {
        this.keywords = "";
        this.source = "";
        this.getCommodityList();
      }
      // this.follow = num;
    },
    //全选
    allSelect() {
      //判断是否已经全选
      if (this.selectedGoods.length == this.goodsLength) {
        this.selectedGoods = [];
      } else {
        this.goodsList.map((item) => {
          if (
            this.selectedGoods.indexOf(item.id) == -1 &&
            item.goods.status != "down"
          ) {
            this.selectedGoods.push(item.id);
          }
        });
      }
    },
    //批量打折
    batchDiscount() {
      this.batch = !this.batch;
      uni.setNavigationBarTitle({
        title: "批量打折",
      });
    },
    cancelDiscount() {
      this.batch = false;
      uni.setNavigationBarTitle({
        title: "商品管理",
      });
      this.selectedGoods = [];
    },
    //打开我要打折窗口
    wantDiscount() {
      if (this.selectedGoods == 0) {
        this.$refs.uToast.show({
          type: "default",
          title: "默认主题",
          message: "请选择至少一个商品",
        });
        return;
      }
      this.batchPopup = true;
    },

    //关闭折扣弹窗
    closeDiscountsPopup(value) {
      //判断是批量打折还是单个打折
      if (this.batchPopup) {
        this.batchPopup = false;
        if (value) {
          uni.$u.http
            //将选中商品的id使用","拼接
            .post(`/api/goods/discount`, {
              merchant_goods_id: this.selectedGoods.join(","),
              mer_discount: value,
            })
            .then((res) => {
              this.getCommodityList(this.follow);
            });
          this.batch = false;
          uni.setNavigationBarTitle({
            title: "商品管理",
          });
        }
      } else if (this.discountsShow) {
        this.discountsShow = false;
        if (value) {
          uni.$u.http
            .post(`/api/goods/discount`, {
              merchant_goods_id: this.selectGoodsInformation.id,
              mer_discount: value,
            })
            .then((res) => {
              this.getCommodityList(this.follow);
            });
        }
      }
    },
    //打开折扣弹窗
    openDiscountsPopup(value) {
      this.selectGoodsInformation = value;
      this.discountsShow = true;
    },
    toDetail() {
      uni.navigateTo({
        url: "/pageD/productDetails/productDetails",
      });
    },
    getCommodityList(status = "") {
      let userId;
      uni.getStorage({
        key: "user_info",
        success: ({ data }) => {
          userId = data.merchant.id;
        },
      });
      uni.$u.http
        .post(`/api/goods/merchant_goods`, {
          page: 1,
          limit: 10,
          merchant_id: userId,
          status: status,
          keywords: this.keywords,
          source: this.source,
        })
        .then((res) => {
          this.goodsList = res.data;
        });
    },
  },
  mounted() {
    this.getCommodityList();
    uni.setNavigationBarTitle({
      title: "商品管理",
    });
  },
};
</script>

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

  .search {
    display: flex;
    align-items: center;

    .screen {
      display: flex;
      align-items: center;
      font-size: 26rpx;
      color: #333;
      margin-left: 20rpx;

      .screen-icon {
        width: 24rpx;
        height: 24rpx;
        margin-left: 5rpx;
      }
    }
  }

  .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;
  background-color: #fff;
  margin-bottom: 150rpx;

  .list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;

    .radio {
      margin-right: 20rpx;
    }
  }
}

.footer {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  bottom: 0;
  background-color: #fff;
  width: 93%;
  padding: 16rpx 24rpx 70rpx 24rpx;

  .batch {
    color: #333;
    font-size: 28rpx;
    margin-right: 50rpx;
    display: flex;
    align-items: center;
  }

  .btn-1 {
    width: 236rpx;
    height: 76rpx;
    border-radius: 52rpx;
    background-color: #fff;
    color: #f83224;
    border: 2rpx solid #f83224;
    padding: 0;
    margin: 0;
    font-size: 30rpx;
  }

  .btn {
    width: 236rpx;
    height: 76rpx;
    border-radius: 52rpx;
    background-color: #f83224;
    color: #fff;
    border: none;
    padding: 0;
    margin: 0;
    font-size: 30rpx;
  }
}
</style>