bigDataApp/pages/distribution/components/LandPopup.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.landName || '-' }}</view>
      </view>
      <view class="layer-popup__content">
        <DescriptionItem labelWidth="140rpx">
          <view slot="title">基地面积</view>
          <view slot="content">{{ `${dataSource.landArea || '-'} 亩` }}</view>
        </DescriptionItem>
        <DescriptionItem labelWidth="140rpx">
          <view slot="title">基地负责人</view>
          <view slot="content">{{ dataSource.landManagerName || '-' }}</view>
        </DescriptionItem>
        <DescriptionItem labelWidth="140rpx">
          <view slot="title">联系方式</view>
          <view slot="content">{{ dataSource.landTel || '-' }}</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: 'LandPopup',
  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/landDetail?landId=${this.dataSource.landId}`
      });
    }
  }
};
</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;
  }
}
</style>