bigDataApp/pages/distribution/components/LayerPopup.vue

<template>
  <u-popup
    v-model="layerVisible"
    @close="layerClose"
    :round="8"
    :closeOnClickOverlay="false"
    @open="layerOpen"
    mode="bottom"
  >
    <view class="layer-popup">
      <view class="layer-popup__header">
        <view class="layer-popup__close">
          <u-icon
            name="close"
            size="36rpx"
            color="#4e6961"
            @click="layerClose"
          ></u-icon>
        </view>
        <view class="layer-popup__title">图层</view>
      </view>
      <view class="layer-popup__content">
        <view class="layer-panel" v-for="item in layerList" :key="item.id">
          <view class="layer-panel__header">{{ item.title }}</view>
          <view class="layer-panel__content">
            <u-row gutter="0">
              <u-col
                span="6"
                style="padding:0;width:calc(50% - 10rpx);margin-right:10rpx;flex:auto"
                v-for="checkItem in item.children"
                :key="checkItem.id"
              >
                <view
                  class="check-item"
                  :class="{ active: checkItem.isActive }"
                  @click="checkItem.isActive = !checkItem.isActive"
                >
                  <text>{{ checkItem.title }}</text>
                  <view class="check-item__icon">
                    <image
                      src="../../assets/checkedSelect.png"
                      class="icon"
                      v-if="checkItem.isActive"
                    />
                    <image
                      src="../../assets/checkedDisabled.png"
                      class="icon"
                      v-else
                    />
                  </view>
                </view>
              </u-col>
            </u-row>
          </view>
        </view>
        <view class="layer-panel">
          <view class="layer-panel__header">地图</view>
          <view class="layer-panel__content">
            <u-row gutter="0" customStyle="flex-wrap: wrap">
              <u-col span="3" customStyle="margin-bottom: 16px">
                <view
                  class="map-check-item"
                  @click="handleToggleMap(0)"
                  :class="{ active: currentMapIndex === 0 }"
                >
                  <image
                    src="../../assets/map-01.png"
                    class="map-check-item__img"
                  />
                  <view class="map-check-item__text">电子地图</view>
                </view>
              </u-col>
              <u-col span="3" customStyle="margin-bottom: 16px">
                <view
                  class="map-check-item"
                  @click="handleToggleMap(1)"
                  :class="{ active: currentMapIndex === 1 }"
                >
                  <image
                    src="../../assets/map-02.png"
                    class="map-check-item__img"
                  />
                  <view class="map-check-item__text">卫星地图</view>
                </view>
              </u-col>
            </u-row>
          </view>
        </view>
      </view>
      <view class="layer-popup__footer">
        <u-button
          type="primary"
          size="normal"
          customStyle="border-radius:16rpx"
          @click="handleConfirm"
          class="submit"
        >
          确定
        </u-button>
      </view>
    </view>
  </u-popup>
</template>

<script>
import { map } from 'lodash-es';

export default {
  name: 'LayerPopup',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      layerVisible: false,
      layerList: [
        {
          id: '1',
          title: '图层管理',
          children: [
            {
              id: '1-1',
              title: '设备',
              value: 'device',
              isActive: true
            },
            {
              id: '1-2',
              title: '地块',
              value: 'block',
              isActive: true
            },
            {
              id: '1-3',
              title: '基地',
              value: 'land',
              isActive: true
            },
            // {
            //   id: '1-4',
            //   title: '水源',
            //   isActive: false
            // },
            {
              id: '1-5',
              title: '种植作物',
			  value: 'crop',
              isActive: true
            }
          ]
        }
      ],
      currentMapIndex: 1
    };
  },
  watch: {
    visible(newVal) {
      if (newVal !== this.layerVisible) {
        this.layerVisible = newVal;
      }
    }
  },
  methods: {
    layerClose() {
      this.$emit('update:visible', false);
      this.$emit('close');
    },
    layerOpen() {
      this.$emit('layerOpen');
    },
    handleToggleMap(index) {
      this.currentMapIndex = index;
    },
    handleConfirm() {
      const selectedLayers = this.layerList.reduce((acc, layer) => {
        const selectedChildren = layer.children.filter(
          (child) => child.isActive
        );

        if (selectedChildren.length) {
          acc.push(...selectedChildren);
        }
        return acc;
      }, []);

      this.layerClose();
      this.$emit('confirm', {
        renderTypes: map(selectedLayers, 'value'),
        isSatellite: this.currentMapIndex === 1
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.layer-popup {
  background-color: #fff;

  &__header {
    position: relative;
    height: 96rpx;
    color: #fff;
    border-bottom: 1rpx solid #e4e7ed;
  }

  &__title {
    text-align: center;
    font-size: 32rpx;
    line-height: 96rpx;
    color: #042118;
  }

  &__close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 20rpx;
    color: #4e6961;
  }

  &__content {
    padding: 32rpx;
    background-color: #fff;
  }

  &__footer {
    display: flex;
    justify-content: center;
    padding: 16rpx 0rpx;
    background-color: #fff;
    box-shadow: 0 -2px 4px 0 #0000001a;
  }
}

.layer-panel {
  &__header {
    font-size: 32rpx;
    line-height: 46rpx;
    color: #042118;
    font-weight: 500;
    margin-bottom: 16rpx;
  }

  &__content {
    padding: 16rpx 0;
  }
}

.check-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 70rpx;
  font-size: 32rpx;
  color: #042118;
  background: #f5f7fa;
  border-radius: 8rpx;
  padding: 4rpx 32rpx;
  margin:8rpx 0;
  border: 1rpx solid transparent;

  &.active {
    background: #fff;
    border-color: #14a478;
  }

  &__icon {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 48rpx;
    height: 48rpx;

    .icon {
      width: 100%;
      height: 100%;
    }
  }
}

.map-check-item {
  position: relative;
  width: 136rpx;
  height: 126rpx;
  font-size: 32rpx;
  color: #fff;
  border-radius: 8rpx;
  border: 1rpx solid transparent;
  overflow: hidden;

  &.active {
    background: #fff;
    border-color: #14a478;

    .map-check-item__text {
      background-color: #14a478;
    }
  }

  &__img {
    width: 100%;
    height: 100%;
  }

  &__text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 44rpx;
    font-size: 28rpx;
    line-height: 44rpx;
    text-align: center;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.6);
  }
}
.submit{
  width: 100%;
  margin: 0 5%;
  display: flex;
  height: 40px;
  padding: 8px 12px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  flex: 1 0 0;
  border-radius: 8px;
  background:  #0BBC58;
}
</style>