update pages/receipt/index.vue

WebApp-Lite/pages/receipt/index.vue

@@ -5,14 +5,20 @@
     type="list"
     :configs="loadingConfig">
     <view class="init-view" v-if="isPending">
+      <view style="margin: 32rpx;" v-if="!emailSend">
+        <view class="email-title" v-if="false">Receive Receipt</view>
+        <input class="email-input" v-model="email" placeholder="Please input your email address"/>
+        <view style="padding: 0 32rpx;">
+          <button :disabled="emailLoading" class="ui-button" type="primary" @click="sendEmail">Send Receipt to My Email</button>
+        </view>
+      </view>
       <view class="flexlc padding16">
         <text class="text-title">We're still processing your receipt</text>
         <text class="text-message">We apologize for the inconvenience caused as we are still processing your settlement and unable to generate it as of yet.</text>
         <text class="text-message">Please refresh this page after a few minutes to view your receipt.</text>
         <text class="text-message">Thank you!</text>
-      </view>
-      <view style="padding: 32rpx;margin-top: 32rpx;">
-        <button class="ui-button button-anim" type="primary" @click="showSendEmail">Send Receipt to My Email</button>
+        <view class="text-message" style="margin-top: 42rpx;" v-if="emailSend">The receipt will be send to <b>{{emailSend}}</b></view>
+        <button class="ui-button button-anim" type="primary" @click="toHome" v-if="emailSend">BACK</button>
       </view>
     </view>
     <view class="receipt-view" :class="{show: showReceipt}" v-else>
@@ -222,12 +228,18 @@
           </uni-collapse-item>
         </uni-collapse>
       </view>
-      <view class="card-view send-email" @click="showSendEmail">
+      <view class="card-view send-email" @click="showSendEmail" v-if="!emailSend">
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M13 19C13 15.69 15.69 13 19 13C20.1 13 21.12 13.3 22 13.81V6C22 4.89 21.1 4 20 4H4C2.89 4 2 4.89 2 6V18C2 19.11 2.9 20 4 20H13.09C13.04 19.67 13 19.34 13 19ZM4 8V6L12 11L20 6V8L12 13L4 8ZM17.75 22.16L15 19.16L16.16 18L17.75 19.59L21.34 16L22.5 17.41L17.75 22.16Z" fill="#009E81"/>
         </svg>
         <view class="text-email">Send receipt to my email</view>
       </view>
+      <view class="card-view send-email" v-else>
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M13 19C13 15.69 15.69 13 19 13C20.1 13 21.12 13.3 22 13.81V6C22 4.89 21.1 4 20 4H4C2.89 4 2 4.89 2 6V18C2 19.11 2.9 20 4 20H13.09C13.04 19.67 13 19.34 13 19ZM4 8V6L12 11L20 6V8L12 13L4 8ZM17.75 22.16L15 19.16L16.16 18L17.75 19.59L21.34 16L22.5 17.41L17.75 22.16Z" fill="#009E81"/>
+        </svg>
+        <view class="text-email">The receipt will be send to <text>{{emailSend}}</text></view>
+      </view>
       <view class="card-view send-email" @click="downloadReceipt">
         <i-icon
           name="file-download-fill"
@@ -249,6 +261,7 @@
 import settings from '../../settings';
 import DialogEmail from './DialogEmail.vue';
 import apiCharge from '@/api/apiCharge';
+import validate from "/utils/validate.js";
 export default {
   data() {
     return {
@@ -272,6 +285,8 @@ export default {
         textRowsGap: '36rpx',
         textWidth: ['30%', '100%', '100%', '100%'],
       },
+      email: '',
+      emailSend: "",
       emailDialog: false,
       emailLoading: false,
       showHome: true
@@ -286,7 +301,7 @@ export default {
       }
       setTimeout(() => {
         this.getReceipt();
-      }, this.isView ? 200 : 3000);
+      }, this.isView ? 200 : 1000);
     }
   },
   methods: {
@@ -307,6 +322,9 @@ export default {
         uni.hideLoading();
         if (res.data) {
           this.receiptInfo = res.data;
+          if (res.data.email) {
+            this.emailSend = res.data.email
+          }
           if (res.data.hasSettled) {
             this.isPending = false;
             setTimeout(() => {
@@ -314,6 +332,11 @@ export default {
             }, 500)
           } else {
             this.isPending = true;
+            setTimeout(() => {
+              if (this.email == "") {
+                this.getReceipt();
+              }
+            }, 30000)
           }
         }
       }).catch(err => {
@@ -322,6 +345,11 @@ export default {
           title: err
         });
         this.isPending = true;
+        setTimeout(() => {
+          if (this.email == "") {
+            this.getReceipt();
+          }
+        }, 30000)
       }).finally(() => {
         this.loading = false;
         uni.stopPullDownRefresh();
@@ -333,6 +361,23 @@ export default {
     hideDialog() {
       this.emailDialog = false;
     },
+    sendEmail() {
+      if (this.email) {
+        if (validate.validEmail(this.email)) {
+          this.sendReceipt(this.email)
+        } else {
+          uni.showToast({
+            title: "Email format incorrect",
+            icon: "none"
+          })
+        }
+      } else {
+        uni.showToast({
+          title: "Please input your email address",
+          icon: "none"
+        })
+      }
+    },
     sendReceipt(email) {
       uni.showLoading({
         title: "Loading..."
@@ -343,10 +388,21 @@ export default {
         chargingPk: this.chargingPk,
       }).then(res => {
         this.hideDialog();
-        uni.showToast({
-          icon: 'none',
-          title: "Success"
-        })
+        this.emailSend = "" + this.email
+        /*uni.showModal({
+          title: "Receive Receipt",
+          content: "Operation successful",
+          cancelText: "CLOSE",
+          confirmText: "HOME",
+          success: (re) => {
+            if (re.confirm) {
+              this.toHome()
+            } else {
+              this.getReceipt();
+            }
+          }
+        })*/
+        this.email = "";
       }).catch(err => {
         uni.showToast({
           icon: 'none',
@@ -518,6 +574,9 @@ export default {
   font-size: 28rpx;
   padding-left: 24rpx;
 }
+.text-email text {
+  color: #009E81;
+}
 .receipt-site-name {
   color: #000;
   font-size: 36rpx;
@@ -599,4 +658,18 @@ export default {
 .send-email:active {
   background-color: #ededed;
 }
+.email-title {
+  color: #000;
+  font-size: 32rpx;
+  font-weight: bold;
+}
+.email-input {
+  color: #333;
+  margin: 42rpx 0;
+  font-size: 28rpx;
+  border-radius: 24rpx;
+  padding: 20rpx 28rpx;
+  border: 1px solid #ddd;
+  background-color: #f0f0f0;
+}
 </style>