新增支付公共页面

quasar.conf.js

@@ -170,7 +170,8 @@ module.exports = function( /* ctx */ ) {
                 'QStep',
                 'QToggle',
                 'QTime',
-                'QSpace'
+                'QSpace',
+                'QInnerLoading'
             ],
 
             directives: [

src/components/pay/wepay.vue

+<template>
+  <div class="text-center">
+    <q-inner-loading :showing="loading" label="正在加載中"></q-inner-loading>
+    <div v-if="$q.platform.is.desktop && orderNo && payUrl!='' && !loading" class="q-my-xl">
+        <QrcodeVue level="H" size="256" :value="payUrl"></QrcodeVue>
+        <div class="text-body2 q-mt-lg">請打開微信（WeChat），使用 [掃一掃]，掃描上方二維碼進行支付</div>
+    </div>
+    <div class="q-my-xl" v-if="!orderNo && !loading">
+        創建付款連接失敗，請刷新頁面重試
+    </div>
+  </div>
+</template>
+
+<script>
+import QrcodeVue from 'qrcode.vue'
+export default {
+    data() {
+        return {
+            loading:true,
+            payUrl:'weixin://wxpay/bizpayurl?pr=CDXqaD1zz'
+        }
+    },
+    props:{
+        orderNo:{
+            type:String,
+            required:true
+        }
+    },
+    components:{QrcodeVue},
+    created () {
+        if(this.orderNo){
+            this.initPayInfo()
+        }else{
+            this.loading=false
+        }
+    },
+    methods: {
+        initPayInfo(){
+            this.apipost("GetCodeByOrderNo_post",{OrderNo:this.orderNo},r=>{
+                if(r.data.resultCode==1){
+                    this.payUrl = r.data.data.code_url
+                    if(this.$q.platform.is.mobile){
+                        location.href=this.payUrl
+                    }
+                }
+                this.loading=false
+            })
+        }
+    },
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/pages/line/pay.vue

-<template>
-  <div class="content-page order-preview">
-    <q-stepper
-      v-model="step"
-      ref="stepper"
-      color="primary"
-      inactive-color="grey-5 "
-      done-color="primary"
-      class="bg-transparent"
-      flat
-      animated
-    >
-      <q-step
-        :name="1"
-        title="確認訂單"
-        icon="settings"
-        :done="step > 1"
-      ></q-step>
-
-      <q-step
-        :name="2"
-        title="付款"
-        icon="iconfont iconPayment-1"
-        :done="step > 2"
-      ></q-step>
-
-      <q-step
-        :name="3"
-        title="訂購完成"
-        icon="iconfont iconicon_finish_R"
-        :done="step == 3"
-      ></q-step>
-    </q-stepper>
-  </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            step:2
-        }
-    },
-}
-</script>
-
-<style>
-
-</style>
\ No newline at end of file

src/pages/pay.vue

+<template>
+  <div class="content-page order-preview order-pay-page" style="min-height:80vh;">
+    <q-stepper
+      v-model="step"
+      ref="stepper"
+      color="primary"
+      inactive-color="grey-5 "
+      done-color="primary"
+      class="bg-transparent"
+      flat
+      animated
+    >
+      <q-step
+        :name="1"
+        title="確認訂單"
+        icon="settings"
+        :done="step > 1"
+      ></q-step>
+
+      <q-step
+        :name="2"
+        title="付款"
+        icon="iconfont iconPayment-1"
+        :done="step > 2"
+      ></q-step>
+
+      <q-step
+        :name="3"
+        title="訂購完成"
+        icon="iconfont iconicon_finish_R"
+        :done="step == 3"
+      ></q-step>
+    </q-stepper>
+    <q-inner-loading :showing="loading" label="正在加載中"></q-inner-loading>
+    
+    <div v-if="!loading && orderInfo" :class="{ 'q-mx-md': $q.platform.is.mobile }">
+      <q-banner
+      class="bg-orange-2 text-orange"
+      rounded
+      dense
+      
+      >我們將會在您下單後為您鎖定空位。若您未能在半小時內完成支付，我們將自動取消訂單並且釋放位置。</q-banner
+    >
+    <div class="q-my-xl text-center" v-if="orderInfo.OrderStatus==1">
+      <span class="text-body1">待支付金額：</span>
+      <span class="text-h3 q-ml-sm text-dark text-weight-bold">{{(moneyFormat(orderInfo.TotalPrice,2))}}</span>
+    </div>
+    <div class="q-my-xl text-center" v-else>
+      <span class="text-h3 q-ml-sm text-dark text-weight-bold">
+        {{ orderInfo.OrderStatus==2||orderInfo.OrderStatus==3?'已支付成功':'訂單已取消' }}
+      </span>
+    </div>
+
+    <q-card flat class="q-pa-md" v-if="orderInfo.OrderStatus==1">
+      <div class="row q-mb-md items-center">
+        <div class="col text-h6 text-weight-bolder">支付方式</div>
+      </div>
+      <div class="row q-gutter-md">
+        <div
+          class="rounded-borders q-pa-sm bg-grey-2 cursor-pointer"
+          :class="{
+            'pay-active': showPay == 'wechat',
+            'pay-un-active': showPay != 'wechat',
+          }"
+          @click="showPayFormHandler('wechat')"
+        >
+          <q-img
+            src="../assets/img/pay/wepay.png"
+            spinner-color="white"
+            style="width: 100px"
+          />
+        </div>
+        <!-- <div class="rounded-borders q-pa-sm bg-grey-2 cursor-pointer">
+          <q-img  src="../assets/img/pay/alipay.png" spinner-color="white" style="height:25px;max-width: 150px;min-width: 30px" />
+        </div> -->
+      </div>
+      <div class="q-mt-md" v-if="showPay != ''">
+        <wechatpay v-if="showPay == 'wechat'" :order-no="orderNo"></wechatpay>
+      </div>
+    </q-card>
+
+    <q-card flat class="q-pa-md  q-my-xl">
+      <div class="row q-mb-md items-center">
+        <div class="col text-h6 text-weight-bolder">訂單資訊</div>
+        <div class="text-grey-5"># {{ orderNo }}</div>
+      </div>
+      <div class="row">
+        <q-img
+          :src="orderInfo.GoodsPic"
+          class="rounded-borders q-mr-md"
+          spinner-color="grey-2"
+          style="width: 150px"
+        />
+        <div class="col">
+          <div class="text-body1 ellipsis">{{ orderInfo.GoodsName }}</div>
+          <div class="q-mt-sm text-grey-6">{{ orderInfo.OrderMake }}</div>
+          <div class="q-mt-sm text-dark">
+            聯絡訊息：{{orderInfo.Name}}/{{ orderInfo.SurName }} {{ orderInfo.ContactNumber }} {{ orderInfo.Mailbox }}
+          </div>
+        </div>
+      </div>
+    </q-card>
+
+    
+  </div>
+    <div v-if="(!orderNo || orderNo == '') && !loading" class="text-center q-my-xl">
+      <none-data
+        iconType="order"
+        title="沒有找到您的訂單信息哦"
+        subtitle="趕緊去挑選心儀的旅遊產品吧,三秒後自動跳轉到首頁"
+      ></none-data>
+    </div>
+  </div>
+</template>
+
+<script>
+import wechatpay from "../components/pay/wepay";
+import NoneData from "src/components/common/noneData.vue";
+export default {
+  data() {
+    return {
+      step: 2,
+      showPay: "",
+      orderNo: "",
+      loading:true,
+      orderInfo:null
+    };
+  },
+  components: { wechatpay,NoneData },
+  created() {
+    this.checkParamsHandler()
+  },
+  methods: {
+    showPayFormHandler(payStr) {
+      this.showPay = payStr;
+    },
+    checkParamsHandler() {
+      if (this.$route.params && this.$route.params.id) {
+        this.getOrderInfoHandler(this.$route.params.id)
+      }else{
+        this.goHomeHandler()
+      }
+    },
+    getOrderInfoHandler(OrderNo){
+      this.apipost("GetDetailsByOrderNo_post",{OrderNo},r=>{
+        if(r.data.resultCode==1){
+          this.orderNo=OrderNo
+          this.orderInfo=r.data.data
+          this.loading=false
+        }else{
+          this.goHomeHandler()
+        }
+      })
+    },
+    goHomeHandler(){
+      this.loading=false
+      // setTimeout(() => {
+      //     location.href = location.origin;
+      //   }, 3000);
+    }
+  },
+};
+</script>
+
+<style>
+.order-pay-page .q-stepper__content {
+  display: none !important;
+}
+.pay-active {
+  border: 2px solid var(--q-color-primary);
+}
+.pay-un-active {
+  border: 2px solid #f5f5f5;
+}
+</style>

src/router/routes.js

@@ -157,7 +157,7 @@ const routes = [{
             {
                 path: '/pay/:id?', //自定义页面
                 component: () =>
-                    import ('pages/line/pay.vue')
+                    import ('pages/pay.vue')
             },
         ]