bigdata_WX/pages/index/components/ImagePopup.vue

<template>
  <view class="popup-mask" v-if="visible" @click="handleClose">
    <view class="popup-content" @click.stop>
      <view class="close-btn" @click="handleClose">×</view>
      <image class="popup-image" :src="imageUrl" mode="widthFix"></image>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ImagePopup',
  props: {
    imageUrl: {
      type: String,
      default: '',
    },
    storageKey: {
      type: String,
      default: 'version_shown',
    },
  },
  data() {
    return {
      visible: false,
    };
  },
  mounted() {
    // this.checkAndShowPopup();
  },
  methods: {
    checkAndShowPopup() {
      const hasShown = uni.getStorageSync(this.storageKey);
      if (!hasShown) {
        this.visible = true;
      }
    },
    handleClose() {
      this.visible = false;
      uni.setStorage({
        key: this.storageKey,
        data: true,
      });
      this.$emit('close');
    },
  },
};
</script>

<style lang="less" scoped>
.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;

  .popup-content {
    position: relative;
    width: 85%;
    max-width: 600rpx;
    background-color: transparent;
    border-radius: 16rpx;
    box-sizing: border-box;

    .close-btn {
      position: absolute;
      bottom: -60rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 56rpx;
      height: 56rpx;
      line-height: 48rpx;
      text-align: center;
      font-size: 40rpx;
      color: #999;
      background-color: rgba(255, 255, 255, 0.9);
      border-radius: 50%;
      border: 2rpx solid #ddd;
      z-index: 10;
      cursor: pointer;

      &:active {
        background-color: #f5f5f5;
      }
    }

    .popup-image {
      width: 100%;
      border-radius: 8rpx;
    }
  }
}
</style>