recycle-front/wxcomponents/email-popup/email-popup.vue

<template>
  <view class="email-popup" v-if="show">
    <view class="popup-mask" @tap="onClose"></view>
    <view class="popup-content">
      <view class="popup-header">
        <text class="close" @tap="onClose">关闭</text>
        <text class="title">客服邮箱</text>
      </view>
      <view class="email-content" @tap="copyEmail">
        <text>hanhaihuishouhf@hh.com</text>
        <uni-icons type="email" size="23" class="copy-icon"></uni-icons>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'email-popup',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    onClose() {
      this.$emit('close')
    },
    copyEmail() {
      uni.setClipboardData({
        data: 'hanhaihuishouhf@hh.com',
        success: () => {
          uni.showToast({
            title: '邮箱已复制',
            icon: 'success'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.email-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;

  .popup-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
  }

  .popup-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-radius: 20rpx 20rpx 0 0;
    overflow: hidden;
    transform: translateY(0);
    transition: transform 0.3s ease-out;

    .popup-header {
      position: relative;
      height: 160rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1rpx solid #f5f5f5;

      .title {
        font-size: 34rpx;
        color: #333;
        font-weight: 500;
      }

      .close {
        position: absolute;
        left: 30rpx;
        font-size: 32rpx;
        color: #333;
      }
    }

    .email-content {
      height: 140rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 40rpx;
      margin-bottom: env(safe-area-inset-bottom);

      text {
        font-size: 36rpx;
        color: #333;
        font-weight: 400;
      }

      .copy-icon {
        background: #f5f5f5;
        padding: 20rpx;
        border-radius: 50%;
      }
    }
  }
}
</style>