ChargEco/WebApp-Lite/pages/receipt/DialogEmail.vue

<template>
  <view class="dialog-email-layer flexcc" :class="{show: show}" @click="onHide" v-if="visible">
    <view class="dialog-email-view" :class="{show: show}" @click.stop="">
      <view class="dialog-email-title">Receive Receipt</view>
      <input class="dialog-email-input" v-model="email" placeholder="Please input your email address"/>
      <button :disabled="loading" class="ui-button" type="primary" style="font-size: 28rpx;" @click="sendEmail">SEND</button>
    </view>
  </view>
</template>

<script>
import validate from "/utils/validate.js";
export default {
  name: "DialogEmail",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      email: "",
      show: false
    };
  },
  watch: {
    visible(n, o) {
      if (n) {
        setTimeout(() => {
          this.show = true;
        }, 10)
      } else {
        this.email = "";
        this.ready = false;
      }
    }
  },
  mounted() {
    
  },
  methods: {
    onHide() {
      this.show = false;
      setTimeout(() => {
        this.$emit("close");
      }, 200)
    },
    sendEmail() {
      if (this.email) {
        if (validate.validEmail(this.email)) {
          this.$emit("send", this.email)
        } else {
          uni.showToast({
            title: "Email format incorrect",
            icon: "none"
          })
        }
      } else {
        uni.showToast({
          title: "Please input your email address",
          icon: "none"
        })
      }
    }
  }
}
</script>

<style scoped>
.dialog-email-layer {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  z-index: 5;
  position: fixed;
  transition: all 0.3s;
  background-color: rgba(28, 29, 29, 0.7);
}
.dialog-email-layer.show {
  opacity: 1;
}
.dialog-email-view {
  transform: scale(0);
  border-radius: 32rpx;
  background-color: white;
}
.dialog-email-view.show {
  width: 74vw;
  padding: 32rpx;
  transform: scale(1);
  transition: all 0.05s;
}
.dialog-email-title {
  color: #000;
  font-size: 32rpx;
  padding-top: 28rpx;
  font-weight: bold;
  text-align: center;
  word-wrap: break-word;
  word-break: break-all;
  white-space: pre-wrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.dialog-email-input {
  color: #333;
  margin: 42rpx 0;
  font-size: 28rpx;
  border-radius: 24rpx;
  padding: 20rpx 28rpx;
  border: 1px solid #ddd;
  background-color: #f0f0f0;
}
</style>