add pages/receipt/DialogEmail.vue

WebApp-Lite/pages/receipt/DialogEmail.vue

@@ -0,0 +1,124 @@
+<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>