wagoo-douy3/src/components/CompareModal.vue

<template>
  <select-modal
    class="good-info-modal"
    title="洗护对比图"
    @close="$emit('close', false)"
  >
    <view class="compare-content">
      <view class="compare-wrapper">
        <text class="fs-36 app-fc-normal">洗护前</text>
        <view class="flex-row-start imgs-list">
          <view
            class="imgs-item"
            :class="{ 'no-margin': index % 3 === 2 }"
            v-for="(item, index) in beforeImgs"
            :key="index"
            @click="selectItem(item, index)"
          >
            <image class="item-img" :src="item.fullUrl" mode="aspectFit" />
            <image
              v-if="selectList.some(v => v.url === item.url)"
              class="select-icon"
              src="@/static/images/cart_checked.png"
            />
            <view v-else class="select-icon un-select"></view>
          </view>
        </view>

        <text class="fs-36 app-fc-normal">洗护后</text>
        <view class="flex-row-start imgs-list">
          <view
            class="imgs-item"
            :class="{ 'no-margin': index % 3 === 2 }"
            v-for="(item, index) in afterImgs"
            :key="index"
            @click="selectItem(item, index)"
          >
            <image class="item-img" :src="item.fullUrl" mode="aspectFit" />
            <image
              v-if="selectList.some(v => v.url === item.url)"
              class="select-icon"
              src="@/static/images/cart_checked.png"
            />
            <view v-else class="select-icon un-select"></view>
          </view>
        </view>
      </view>

      <view
        class="flex-row-between compare-footer"
        v-if="isCanRemark || isCanShare"
      >
        <!-- <view
          v-if="isCanRemark"
          class="flex-center fs-30 app-fc-white confirm-btn left"
          @click="submit"
        >
          添加到评论
        </view> -->

        <view
          v-if="isCanShare"
          class="flex-center fs-30 app-fc-white confirm-btn"
          @click="shareToCommunity"
        >
          一键转发到宠圈
        </view>
      </view>
    </view>
  </select-modal>
</template>

<script>
import SelectModal from "@/components/select-modal.vue";

export default {
  props: {
    isCanShare: {
      type: Boolean,
      default: false,
    },
    isCanRemark: {
      type: Boolean,
      default: false,
    },
    beforeImgs: {
      type: Array,
      default: () => [],
    },
    afterImgs: {
      type: Array,
      default: () => [],
    },
    selectImgs: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      selectList: [], // 选中的图片
    };
  },
  components: {
    SelectModal,
  },
  watch: {
    selectImgs: {
      handler(val) {
        this.selectList = val;
      },
      immediate: true,
    },
  },
  methods: {
    submit() {
      if (!this.selectList?.length) {
        uni.showToast({
          title: "请选择图片",
          icon: "none",
        });
        return;
      }
      this.$emit("add", this.selectList);
    },
    shareToCommunity() {
      const front = this.selectList
          .filter((v) => this.beforeImgs.some((item) => v.url === item.url))
          .map((v) => v.url)
      const end = this.selectList
          .filter((v) => this.afterImgs.some((item) => v.url === item.url))
          .map((v) => v.url)
      if (!front.length) {
        uni.showToast({
          title: "请至少选择一张洗护前图片",
          icon: "none",
        });
        return
      }
      if (!end.length) {
        uni.showToast({
          title: "请至少选择一张洗护后图片",
          icon: "none",
        });
        return
      }
      this.$emit("share", {
        front: front,
        end: end,
      });
    },
    selectItem(item) {
      const index = this.selectList.findIndex((v) => v.url === item.url);
      if (index < 0) {
        this.selectList.push(item);
      } else {
        this.selectList.splice(index, 1);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .selected-modal .model-container {
    background-color: #fff0f5;
  }
}

.compare-content {
  padding: 48rpx 32rpx 0;
  box-sizing: border-box;
  

  .compare-wrapper {
    max-height: 60vh;
    overflow: auto;
  }

  .imgs-list {
    flex-wrap: wrap;
    margin-top: 28rpx;
    margin-bottom: 40rpx;

    .imgs-item {
      width: 204rpx;
      height: 204rpx;
      border-radius: 20rpx;
      position: relative;
      margin-right: 14rpx;
      margin-bottom: 14rpx;
      background: #fff;

      &.no-margin {
        margin-right: 0;
      }

      .item-img {
        width: 100%;
        height: 100%;
        border-radius: 20rpx;
      }

      .select-icon {
        position: absolute;
        top: 10rpx;
        right: 10rpx;
        width: 24rpx;
        height: 24rpx;

        .un-select {
          border: 3rpx solid #beb5ba;
          border-radius: 30rpx;
        }
      }
    }
  }

  .compare-footer {
    background: #fff;
    padding: 20rpx 0 0;

    .confirm-btn {
      flex: 1;
      height: 90rpx;
      border-radius: 90rpx;
      background: $app_color_main;
      border-radius: 45rpx 45rpx 45rpx 45rpx;
      color: #fff;

      &.left {
        margin-right: 32rpx;
      }
    }
  }
}
</style>