bigDataApp/pages/distribution/components/BlockPopup.vue

<template>
  <u-popup
    :show="layerVisible"
    @close="layerClose"
    :round="8"
    @open="layerOpen"
  >
    <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"
          >{{
            `${dataSource.groupName || '未分组'}-${dataSource.blockName || '-'}`
          }}
        </view>
      </view>
      <view class="layer-popup__content">
        <view
          class="crop-card"
          v-for="item in dataSource.fmsPlanCropResVoList || []"
          :key="item.planId"
        >
          <view class="crop-card__title"
            >{{ item.cropName || '' }} - {{ item.planPeriodname || '' }}</view
          >
          <view class="crop-card__body">
            <view class="crop-card__label">种植面积</view>
            <view class="crop-card__value">{{ item.planArea || '-' }} 亩</view>
          </view>
        </view>
        <DescriptionItem>
          <view slot="title">地块面积</view>
          <view slot="content">{{ dataSource.blockArea || '-' }} 亩</view>
        </DescriptionItem>
        <DescriptionItem>
          <view slot="title">地块类型</view>
          <view slot="content">{{ dataSource.blockTypeContent || '-' }}</view>
        </DescriptionItem>
        <DescriptionItem>
          <view slot="title">负责人</view>
          <view slot="content">{{ dataSource.blockManagername || '-' }}</view>
        </DescriptionItem>
        <DescriptionItem>
          <view slot="title">联系方式</view>
          <view slot="content">{{ dataSource.blockTel || '-' }}</view>
        </DescriptionItem>
        <DescriptionItem>
          <view slot="title">所属基地</view>
          <view slot="content">{{ dataSource.landName || '-' }}</view>
        </DescriptionItem>

        <view class="layer-popup__link" @click="handleLink">详情</view>
      </view>
    </view>
  </u-popup>
</template>

<script>
import DescriptionItem from '@/components/Descriptions/DescriptionItem.vue';

export default {
  name: 'DevicePopup',
  components: {
    DescriptionItem
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    dataSource: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      layerVisible: false
    };
  },
  watch: {
    visible(newVal) {
      if (newVal !== this.layerVisible) {
        this.layerVisible = newVal;
      }
    }
  },
  methods: {
    layerClose() {
      this.$emit('update:visible', false);
      this.$emit('close');
    },
    layerOpen() {
      this.$emit('layerOpen');
    },
    handleLink() {
      uni.navigateTo({
        url: `/fmsPages/land/blockDetail?blockId=${this.dataSource.blockId}`
      });
    }
  }
};
</script>

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

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

  &__title {
    text-align: left;
    font-size: 32rpx;
    line-height: 96rpx;
    color: #042118;
    max-width: 80%;
  }

  &__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 32rpx;
    background-color: #fff;
    box-shadow: 0 -2px 4px 0 #0000001a;
  }

  &__link {
    color: #14a478;
    font-size: 28rpx;
    text-align: center;
    line-height: 40rpx;
    margin-top: 16rpx;
  }
}

.crop-card {
  background-color: #f5f7fa;
  border-radius: 8rpx;
  padding: 16rpx 32rpx;
  margin-bottom: 16rpx;

  &:last-child {
    margin-bottom: 0;
  }

  &__title {
    font-size: 28rpx;
    line-height: 34rpx;
    margin-bottom: 6rpx;
    color: #333;
  }

  &__body {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    line-height: 44rpx;
  }

  &__label {
    color: #9ba6a3;
    margin-right: 16rpx;
  }

  &__value {
    color: #333;
  }
}
</style>