no message

src/components/hotel/order/list/OrderList.vue

@@ -96,8 +96,8 @@
           <div class="q-ml-sm">
             <div class="q-mb-sm" v-if="x.CustomerPayType == 2 || x.CustomerPayType == 3">
               <div class="f12" v-html="$t('hotelorder.pay.t1', { d: x.PaymentDate, e: x.FinalPaymentDate })"></div>
-              <q-btn dense outline color="accent" size="sm" class="q-mt-sm" :label="$t('hotelorder.payinfo')"></q-btn>
-              <q-btn dense unelevated color="accent" size="sm" class="q-mt-sm q-ml-sm" :label="$t('hotelorder.sendpay')"></q-btn>
+              <q-btn dense outline color="accent" size="sm" class="q-mt-sm" :label="$t('hotelorder.payinfo')" @click="ViewPayment"></q-btn>
+              <!-- <q-btn dense unelevated color="accent" size="sm" class="q-mt-sm q-ml-sm" :label="$t('hotelorder.sendpay')"></q-btn> -->
             </div>
             <div v-if="x.CustomerPayType == 1 || x.CustomerPayType == 3">
               <div class="f12" v-html="$t('hotelorder.pay.t2', { e: x.UploadGuestDate })"></div>
@@ -174,6 +174,34 @@
     <svg-icon :size="50" color="nav" icon="General/Clipboard.svg"></svg-icon>
     <div class="q-mt-md f12 text-grey-6">{{ $t('noneData') }}</div>
   </div>
+  <q-dialog v-model="PaymentDialog">
+    <div class="rounded-borders bg-white q-px-lg q-pb-lg q-pt-lg" :style="{'width': $q.platform.is.desktop?'450px':'450px'}">
+      <div class="orderListDialog-title row justify-center q-pb-xs ">
+        <span class="text-weight-bold">{{$t('hotelorder.dialog.title')}}</span>
+        <q-icon class="orderListDialog-close text-grey" name="close" @click="PaymentDialog=false"></q-icon>
+      </div>
+      <div class="orderListDialog-bg column rounded-borders q-ma-lg q-py-lg q-px-lg">
+        <div class="orderListDialog-img">
+          <div class="row items-end q-pb-md">
+            <span class="text-grey-3">{{$t('hotelorder.dialog.AccountName')}}：</span>
+            <span class="text-weight-bold text-white" style="font-size: 18px;">張三</span>
+          </div>
+          <div class="row items-center justify-between q-pb-sm">
+            <div>
+              <span class="text-grey-3">{{$t('hotelorder.dialog.account')}}：</span>
+              <span class="text-cyan-12 text-weight-bold" style="font-size: 18px;">7489327279423</span>
+            </div>
+            <q-btn size="xs" color="cyan-12 q-ml-sm">
+              <span class="text-dark">{{$t('hotelorder.dialog.copy')}}</span></q-btn>
+          </div>
+        </div>
+        
+      </div>
+      <div class="row justify-center q-pb-lg q-px-lg q-mx-lg">
+        <span class="text-center text-grey-8 q-px-lg">{{$t('hotelorder.dialog.prompt')}}</span>
+      </div>
+    </div>
+  </q-dialog>
 </template>
 
 <script lang="ts">
@@ -204,6 +232,7 @@ export default defineComponent({
     })
 
     const data = reactive({
+      PaymentDialog: false,
       orders: [] as Array<any>,
       status: [] as Array<StandardStatus>,
       rooms: [] as Array<RoomType>,
@@ -229,6 +258,9 @@ export default defineComponent({
     })
 
     const methods = {
+      ViewPayment(){
+        data.PaymentDialog = true
+      },
       initOrders() {
         let param = Object.assign(data.pages, search)
         //data.orders = []
@@ -336,4 +368,24 @@ export default defineComponent({
   height: 28px;
   line-height: 28px;
 }
+.orderListDialog-title{
+  position: relative;
+}
+.orderListDialog-title span{
+  font-size: 20px;
+}
+.orderListDialog-close{
+  position: absolute;
+  right: 0;
+  top: -10px;
+  font-size: 26px;
+}
+.orderListDialog-bg{
+  background: #5098FF;
+  border-radius: 10px;
+}
+.orderListDialog-img{
+  background: url('../../../../assets/images/wallet.png')no-repeat right #5098FF;
+  background-size: 97px 100%;
+}
 </style>

src/i18n/zh-TW/index.ts

@@ -35,6 +35,13 @@ export default {
     off:'收起'
   },
   hotelorder: {
+    dialog:{
+      title: '您的專屬付款賬戶如下',
+      AccountName: '戶名',
+      account: '賬號',
+      prompt: '我們將會在您付款後的1-2個工作日內完成確認,確認後自動更新訂單入款',
+      copy: '複製'
+    },
     pay: {
       t1: '出發前收款酒店，請您於 <span class="text-orange">{d}</span> 前支付訂金，並且於 <span class="text-negative">{e}</span> 日前支付尾款',
       t2: '到店自付酒店，需要您於 <span class="text-negative">{e}</span> 前上傳旅客名單'