update pages/receipt/index.vue

WebApp-Lite/pages/receipt/index.vue

@@ -11,6 +11,9 @@
         <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>
     </view>
     <view class="receipt-view" :class="{show: showReceipt}" v-else>
       <view class="card-view" v-if="receiptInfo.location">
@@ -219,108 +222,148 @@
           </uni-collapse-item>
         </uni-collapse>
       </view>
-      <view class="card-view flexc" v-if="false">
+      <view class="card-view send-email" @click="showSendEmail">
         <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 flexc" @click="downloadReceipt">
+      <view class="card-view send-email" @click="downloadReceipt">
         <i-icon
           name="file-download-fill"
           color="#009E81"
           size="46rpx"/>
         <view class="text-email">Download receipt</view>
       </view>
-      <button class="ui-button button-anim" type="primary" @click="toHome">DONE</button>
+      <button class="ui-button button-anim" type="primary" @click="toHome" v-if="showHome">DONE</button>
     </view>
+    <dialog-email
+      :visible="emailDialog"
+      :loading="emailLoading"
+      @close="hideDialog"
+      @send="sendReceipt"/>
   </x-skeleton>
 </template>
 
 <script>
+import settings from '../../settings';
+import DialogEmail from './DialogEmail.vue';
 import apiCharge from '@/api/apiCharge';
-  export default {
-    data() {
-      return {
-        loading: true,
-        chargingPk: "",
-        receiptInfo: {
-          location: {},
-          chargingFee: {},
-          idleFee: {},
-          reservationFee: {}
-        },
-        isView: false,
-        isPending: true,
-        showReceipt: false,
-        loadingConfig: {
-          padding: "56rpx 32rpx",
-          headShow: false,
-          itemGap: '48rpx',
-          gridRows: 4,
-          textRows: 5,
-          textRowsGap: '36rpx',
-          textWidth: ['30%', '100%', '100%', '100%'],
-        }
+export default {
+  data() {
+    return {
+      loading: true,
+      chargingPk: "",
+      receiptInfo: {
+        location: {},
+        chargingFee: {},
+        idleFee: {},
+        reservationFee: {}
+      },
+      isView: false,
+      isPending: true,
+      showReceipt: false,
+      loadingConfig: {
+        padding: "56rpx 32rpx",
+        headShow: false,
+        itemGap: '48rpx',
+        gridRows: 4,
+        textRows: 5,
+        textRowsGap: '36rpx',
+        textWidth: ['30%', '100%', '100%', '100%'],
+      },
+      emailDialog: false,
+      emailLoading: false,
+      showHome: true
+    }
+  },
+  components: {DialogEmail},
+  onLoad(options) {
+    if (options.id) {
+      this.chargingPk = options.id;
+      if (options.action == "view") {
+        this.isView = true;
       }
-    },
-    onLoad(options) {
-      if (options.id) {
-        this.chargingPk = options.id;
-        if (options.action == "view") {
-          this.isView = true;
-        }
-        setTimeout(() => {
-          this.getReceipt();
-        }, this.isView ? 200 : 8000);
+      setTimeout(() => {
+        this.getReceipt();
+      }, this.isView ? 200 : 3000);
+    }
+  },
+  methods: {
+    toHome() {
+      if (this.isView) {
+        uni.navigateBack();
+      } else {
+        uni.reLaunch({
+          url: "/pages/index/index"
+        })
       }
     },
-    methods: {
-      toHome() {
-        if (this.isView) {
-          uni.navigateBack();
-        } else {
-          uni.navigateTo({
-            url: "/pages/index/index"
-          })
-        }
-      },
-      getReceipt() {
-        /*uni.showLoading({
-          title: "Loading..."
-        })*/
-        apiCharge.getReceipt(this.chargingPk).then(res => {
-          uni.hideLoading();
-          if (res.data) {
-            this.receiptInfo = res.data;
-            if (res.data.hasSettled) {
-              this.isPending = false;
-              setTimeout(() => {
-                this.showReceipt = true;
-              }, 500)
-            } else {
-              this.isPending = true;
-            }
+    getReceipt() {
+      /*uni.showLoading({
+        title: "Loading..."
+      })*/
+      apiCharge.getReceipt(this.chargingPk).then(res => {
+        uni.hideLoading();
+        if (res.data) {
+          this.receiptInfo = res.data;
+          if (res.data.hasSettled) {
+            this.isPending = false;
+            setTimeout(() => {
+              this.showReceipt = true;
+            }, 500)
+          } else {
+            this.isPending = true;
           }
-        }).catch(err => {
-          uni.showToast({
-            icon: "none",
-            title: err
-          });
-          this.isPending = true;
-        }).finally(() => {
-          this.loading = false;
-          uni.stopPullDownRefresh();
+        }
+      }).catch(err => {
+        uni.showToast({
+          icon: "none",
+          title: err
+        });
+        this.isPending = true;
+      }).finally(() => {
+        this.loading = false;
+        uni.stopPullDownRefresh();
+      })
+    },
+    showSendEmail() {
+      this.emailDialog = true;
+    },
+    hideDialog() {
+      this.emailDialog = false;
+    },
+    sendReceipt(email) {
+      uni.showLoading({
+        title: "Loading..."
+      })
+      this.emailLoading = true;
+      apiCharge.sendReceipt({
+        email,
+        chargingPk: this.chargingPk,
+      }).then(res => {
+        this.hideDialog();
+        uni.showToast({
+          icon: 'none',
+          title: "Success"
         })
-      },
-      downloadReceipt() {
-        apiCharge.downloadRecript(this.chargingPk);
-      }
+      }).catch(err => {
+        uni.showToast({
+          icon: 'none',
+          title: err
+        })
+      }).finally(() => {
+        this.emailLoading = false;
+      })
     },
-    onPullDownRefresh() {
-      this.getReceipt();
+    downloadReceipt() {
+      apiCharge.downloadRecript(this.chargingPk);
     }
+  },
+  onPullDownRefresh() {
+    this.getReceipt();
   }
+}
 </script>
 
 <style scoped>
@@ -449,9 +492,10 @@ import apiCharge from '@/api/apiCharge';
   font-size: 26rpx;
 }
 .receipt-logo {
-  width: 60rpx;
+  width: 150rpx;
   height: 60rpx;
-  margin-right: 32rpx;
+  margin-left: -24rpx;
+  margin-right: 8rpx;
 }
 .receipt-section-title {
   color: #000;
@@ -547,4 +591,12 @@ import apiCharge from '@/api/apiCharge';
   text-align: right;
   line-height: 36rpx;
 }
+.send-email {
+  display: flex;
+  align-items: center;
+  transition: all .1s;
+}
+.send-email:active {
+  background-color: #ededed;
+}
 </style>