wx-qhb/pageD/commodityManage/component/screenPopup.vue

<template>
  <view class="">
    <u-popup :show="show" :round="10" mode="top" @close="close">
      <view class="top-tab-search">
        <view class="search">
          <u--input
            v-model="searchData.keywords"
            placeholder="搜索商品名称"
            shape="circle"
            prefixIcon="search"
            prefixIconStyle="font-size: 22px;color: #909399"
          ></u--input>
          <view class="screen" @click="openPopup">
            筛选
            <image
              class="screen-icon"
              src="../../../static/mine/335.png"
              mode=""
            ></image>
          </view>
        </view>
        <view class="tab">
          <view class="top-tab">
            <view
              :class="{ commodity: followPopup == '' }"
              class="tab"
              @click="tabSwitch('')"
            >
              全部
            </view>
            <view
              :class="{ commodity: followPopup == 'normal' }"
              class="tab"
              @click="tabSwitch('normal')"
            >
              已上架
            </view>
            <view
              :class="{ commodity: followPopup == 'down' }"
              class="tab"
              @click="tabSwitch('down')"
            >
              已下架
            </view>
          </view>
        </view>
        <view class="btn-list">
          <view :class="{ 'select-tab': selectTab == 0 }" @click="selected(0)"
            >我的商品</view
          >
          <view :class="{ 'select-tab': selectTab == 1 }" @click="selected(1)"
            >供应链商品</view
          >
          <view :class="{ 'select-tab': selectTab == 2 }" @click="selected(2)"
            >平台自营商品</view
          >
        </view>
        <view class="reset-config">
          <button class="reset" @click="close">重置</button
          ><button class="config" @click="confirm">确定</button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      followPopup: "",
      selectTab: 0,
      searchData: {
        keywords: "",
        status: "",
        source: "0",
      },
    };
  },
  props: {
    follow: {
      typeof: String,
      default: "",
    },
    show: {
      typeof: Boolean,
      default: false,
    },
  },
  watch: {
    //监听横向tab栏的数据，同步父组件和子组件横向tab栏的状态
    follow(newVal) {
      this.followPopup = newVal;
    },
  },
  methods: {
    //切换tab
    tabSwitch(num) {
      this.followPopup = num;
      this.searchData.status = num;
    },
    //关闭弹窗,将数据传入如=父组件
    close() {
      this.$emit("close");
    },
    confirm() {
      this.$emit("close", this.searchData);
    },
    //切换选中状态
    selected(num) {
      this.selectTab = num;
      this.searchData.source = num;
    },
  },
};
</script>

<style scoped lang="scss">
.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: #f83224;
      font-weight: 600;
      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%);
    }
  }
  .btn-list {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 32rpx;
    view {
      width: 210rpx;
      height: 68rpx;
      text-align: center;
      line-height: 68rpx;
      background-color: #f3f3f3;
      border-radius: 10rpx;
      font-size: 26rpx;
      color: #444;
    }
    .select-tab {
      background-color: rgba(248, 50, 36, 0.1);
      color: #f83224;
      font-weight: 600;
    }
  }
  .reset-config {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 44rpx;
    .reset {
      width: 260rpx;
      height: 76rpx;
      background-color: #f3f3f3;
      border: none;
      border-radius: 38rpx;
      color: #333;
      font-size: 28rpx;
    }
    .config {
      width: 402rpx;
      height: 76rpx;
      background-color: #f83224;
      color: #fff;
      border: none;
      border-radius: 38rpx;
      font-size: 28rpx;
    }
  }
}
</style>