browseItem.vue

<template>
  <!-- 浏览记录组件和收藏 -->
  <view class="browse">
    <u-card
      :head-border-bottom="false"
      v-for="(item, index) in list"
      :key="index"
    >
      <!-- 头部 -->
      <view slot="head">
        <view>
          <!-- 全选框 -->
          <u-icon
            :name="
              checkSelect(item) ? 'checkmark-circle-fill' : 'checkmark-circle'
            "
            v-if="edit"
            class="checkstyle"
            @click="allcheckFn(item)"
          ></u-icon>
          <slot v-bind:title="item"></slot>
        </view>
      </view>
      <!-- 主体 -->
      <view slot="body">
        <u-swipe-action
          :show="elData.show"
          v-for="(elData, indexs) in item.browseChild"
          :index="indexs"
          :key="indexs"
          @click="() => sliderClick(indexs, item.browseChild)"
          @open="open"
          :options="options"
        >
          <view class="item u-border-bottom">
            <!-- 多选框 -->
            <u-icon
              :name="
                selectedIds.indexOf(elData.id) > -1
                  ? 'checkmark-circle-fill'
                  : 'checkmark-circle'
              "
              v-if="edit"
              class="checkstyle"
              @click="selectItem(elData)"
            ></u-icon>
            <!-- 照片 -->
            <image
              class="imges"
              :src="`${imgUrl}${elData.originalImageCode}`"
            />
            <!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
            <view class="title-wrap">
              <view class="title">{{ elData.styleTag }}</view>
              <!-- 款号 -->
              <view class="modelno">
                <text class="textStyle1">款号</text>
                <text class="textStyle2">{{ elData.styleCode }}</text>
                <!-- 是否需要爱心 -->
                <view v-if="isbrowse">
                  <image
                    @click="browerClick(elData)"
                    src="@/static/images/brank/blackxin.png"
                    v-if="!elData.isFavorite"
                  ></image>
                  <image
                    @click="browerClick(elData)"
                    src="@/static/images/brank/lightxin.png"
                    v-else
                  ></image>
                </view>
              </view>
              <!-- 面料 -->
              <view class="fabric">
                <text class="textStyle1">面料</text>
                <text class="textStyle2">{{ elData.materialName }}</text>
              </view>
            </view>
          </view>
        </u-swipe-action>
      </view>
    </u-card>

    <!-- 弹出框 -->
    <view class="posi" v-show="edit">
      <view class="pop-up">
        <!-- <u-checkbox-group class="checkStyle">
          <u-checkbox v-model="playCheckout" name="全选" shape="circle"
            >全选</u-checkbox
          >
        </u-checkbox-group> -->
        <u-icon
          :name="playCheckout ? 'checkmark-circle-fill' : 'checkmark-circle'"
          class="checkstyles"
          size="42"
          @click="outsideChecked"
        ></u-icon>

        <u-button size="mini" class="bttn" @click="cancelCollection"
          >取消收藏</u-button
        >
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    //是否显示爱心
    isbrowse: {
      type: Boolean,
      default: false,
    },
    // 点击编辑的时候的显隐
    edit: {
      type: Boolean,
      default: false,
    },
    // 数据
    list: { type: Array },
    options: { type: Array },
  },
  data() {
    return {
      islove: false, // 爱心的黑暗显影
      imgUrl: this.$IMG_URL, // 图片前面的url
      selected: [], // 判断全选单选这些东西的
      // playCheckout: false, // 弹出全选
    };
  },
  computed: {
    selectedIds() {
      return this.selected.map((item) => item.id);
    },
    //监听外部全选值
    playCheckout() {
      let len = this.list.map((el) => {
        return el.browseChild;
      });
      if (this.selected.length == len.flat().length) {
        return true;
      }
    },
  },
  methods: {
    //判断全选按钮是否选中
    checkSelect(tree) {
      let childrenIds = tree.browseChild.map((item) => item.id);
      return (
        new Set(this.selectedIds.concat(childrenIds)).size ===
        this.selected.length
      );
    },
    // 多选
    allcheckFn(item) {
      //判断全选是否被选中
      if (!this.checkSelect(item)) {
        this.selected = this.selected.concat(
          item.browseChild.filter(
            ($item) => this.selectedIds.indexOf($item.id) === -1
          )
        );
      } else {
        let removeData = item.browseChild.map((item) => item.id);
        // this.selected = this.selected.concat(
        //     item.children.filter(($item) => this.selectedIds.indexOf($item.id) === -1)
        // );
        this.selected = this.selected.filter(
          (item) => removeData.indexOf(item.id) === -1
        );
      }
    },
    // 单选
    selectItem(item) {
      let index = this.selectedIds.indexOf(item.id);
      if (index > -1) {
        this.selected.splice(index, 1);
      } else {
        this.selected.push(item);
      }
    },
    // 取消收藏按钮
    cancelCollection() {
      let idItem = this.selected.map((el) => {
        return el.id;
      });
      this.unCollectionFn(idItem);
    },
    // 外部全选按钮
    outsideChecked() {
      if (this.playCheckout == true) {
        this.selected = [];
      } else {
        let len = this.list.map((el) => {
          return el.browseChild;
        });
        this.selected = len.flat();
      }
    },
    //收藏款式接口
    collectionFn(item) {
      this.$http("mobileBrand.styleCollect", { id: item }).then((res) => {
        if (res.code == 200) {
          this.$emit("update");
        }
      });
    },
    //取消款式接口
    unCollectionFn(param) {
      // let param = [item];
      this.$http("mobileBrand.cancelCollect", param).then((res) => {
        if (res.code == 200) {
          this.$emit("update");
        }
      });
    },
    // 爱心点击
    browerClick(item) {
      if (item.isFavorite == true) {
        this.$u.toast(`已取消收藏`);
        this.unCollectionFn([item.id]);
      } else {
        this.$u.toast(`已收藏款式`);
        this.collectionFn(item.id);
      }
    },
    //滑动删除的东西
    sliderClick(indexs, item) {
      let itemId = item[indexs].id;
      this.unCollectionFn([itemId]);
    },
    // 如果打开一个的时候，不需要关闭其他，则无需实现本方法
    // 没做目前没用
    open(index) {
      // 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
      // 原本为'false'，再次设置为'false'会无效
      this.list[index].show = true;
      this.list.map((val, idx) => {
        if (index != idx) this.list[idx].show = false;
      });
    },
  },
  components: {},
};
</script>

<style lang="scss" scoped>
// 选项
.checkstyle {
  font-size: 42rpx;
  margin-right: 10rpx;
}

.browse {
  ::v-deep .u-card__body {
    padding-top: 29rpx !important;
  }
  ::v-deep .u-card__head {
    padding-bottom: 0rpx !important;
  }
}
.item {
  display: flex;
  padding: 20rpx;
}

.imges {
  width: 162rpx;
  height: 162rpx;
  margin-right: 20rpx;
  border-radius: 12rpx;
}

.title {
  width: 440rpx;
  font-size: 28rpx;
  height: 40rpx;
  line-height: 40rpx;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 700;
  text-align: left;
  color: #333333;

  overflow: hidden; /*超出部分隐藏*/
  white-space: nowrap; /*禁止换行*/
  text-overflow: ellipsis;
}
//头部时间图标
.browseicon {
  width: 32rpx;
}
//头部时间
.browseTime {
  width: 252rpx;
  height: 32rpx;
  font-size: 32rpx;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  margin-left: 10rpx;
}
// 款号
.modelno {
  height: 40rpx;
  margin-top: 16rpx;
  display: flex;
  position: relative;
  image {
    height: 40rpx;
    width: 45rpx;
    position: absolute;
    right: 29rpx;
  }
}
//面料
.fabric {
  margin-top: 6rpx;
}
//款号面料
.textStyle1 {
  color: rgba(0, 0, 0, 0.4);
}
.textStyle2 {
  margin-left: 40rpx;
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 500;
  color: #333333;
}
::v-deep .u-border-bottom {
  padding-left: 0rpx;
}

.posi {
  position: fixed;
  bottom: 120rpx;
  height: 100rpx;
  width: 100%;
  background-color: white;
  .pop-up {
    position: relative;
    height: 100%;
    .checkstyles {
      position: absolute;
      left: 59rpx;
      top: 50%;
      transform: translateY(-50%);
    }
    .bttn {
      width: 160rpx;
      height: 64rpx;
      position: absolute;
      right: 30rpx;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
</style>