提繳版本

quasar.conf.js

@@ -87,7 +87,7 @@ module.exports = configure(function (ctx) {
             include: path.resolve(__dirname, './src/i18n/**')
           }
         ]
-      ]
+      ],
       // alias:[{
       //   '@': path.resolve(__dirname, './src')
       // }],

src/boot/i18n.ts

@@ -24,6 +24,8 @@ declare module 'vue-i18n' {
 const i18n = createI18n({
   locale: localStorage.getItem('lanuage') ?? 'zhTW',
   legacy: false,
+  warnHtmlInMessage:false,
+  warnHtmlMessage:false,
   globalInjection: true,
   messages
 })

src/components/CompositionComponent.vue

 <template>
-	<div>
+	<div class="text-center">
 		<!-- <img src="../assets/images/lg-logo.png" style="height:200px;"/> -->
 		<img src="../assets/images/home.png" style="width: 50%;"/>
-		<div class="q-mt-lg text-h3 text-grey-4 text-center">歡迎使用JVS同業預定系統</div>
+		<!-- <div class="q-mt-lg text-h3 text-grey-4 text-center">歡迎使用JVS同業預定系統</div> -->
 	</div>
 </template>
 

src/components/hotel/list/ListCar.vue

@@ -2,14 +2,20 @@
   <q-card class="bg-white q-pb-md window-height column" :style="{'width':$q.platform.is.desktop?'500px':'400px'}">
     <div class="q-pt-md q-px-lg row items-center justify-between">
       <span class="text-h6">{{ $t('hotel.car.subtitle') }}</span>
-      <span v-html="$t('hotel.car.title', { days: cars.length, hotels: HotelLength })" class="q-pa-sm rounded-border bg-orange-1 text-orange-8 f12"></span>
+      <span class="q-pa-sm rounded-border bg-orange-1 text-orange-8 f12">
+        {{$t('hotel.car.title')}}
+        <span class="din text-orange-10">{{cars.length}}</span>
+        {{$t('hotel.car.title1')}}
+        <span class="din text-primary">{{HotelLength}}</span>
+        {{$t('hotel.car.title2')}}
+      </span>
       <div v-if="$q.platform.is.desktop" class="q-pa-sm" :class="{'draw-close':$q.platform.is.desktop,'draw-close-modile':$q.platform.is.mobile}">
         <q-icon name="close" size="26px" v-close-popup></q-icon>
       </div>
     </div>
     <q-separator color="grey-3" class="q-mt-md" />
     <q-scroll-area v-if="cars && cars.length > 0" :thumb-style="scrollStyle.thumbStyle" :bar-style="scrollStyle.barStyle" class="col">
-      
+
       <div class="q-pa-sm rounded-borders bg-dark text-grey-2 q-mx-md q-mt-md" v-for="(x,xi) in cars" >
         <div class="text-subtitle1 din text-weight-bolder">{{ x.Date }}</div>
         <q-list bordered separator>
@@ -76,7 +82,7 @@
       <div class="col "
       :class="{'row':$q.platform.is.desktop,'wrap':$q.platform.is.desktop,'justify-between':$q.platform.is.desktop,'q-py-lg':$q.platform.is.desktop,'q-py-sm':$q.platform.is.mobile,}">
           <div :class="{'col-6':$q.platform.is.desktop}">
-            <n-select filterable :class="{'q-pr-sm':$q.platform.is.desktop,'q-pb-lg':$q.platform.is.desktop,'q-pb-sm':$q.platform.is.mobile}" 
+            <n-select filterable :class="{'q-pr-sm':$q.platform.is.desktop,'q-pb-lg':$q.platform.is.desktop,'q-pb-sm':$q.platform.is.mobile}"
               v-model:value="parameters.OrderType" :placeholder="$t('hotel.car.OrderType')" :options="cacheHotels" max-tag-count="responsive" size="large" value-field="ID" label-field="Name" />
           </div>
           <div v-if="parameters.OrderType == 2" :class="{'col-6':$q.platform.is.desktop}">
@@ -89,7 +95,7 @@
           <div :class="{'col-6':$q.platform.is.desktop}">
             <q-input v-model="parameters.ContactNumber" :class="{'col-6':$q.platform.is.desktop,'q-pr-sm':$q.platform.is.desktop,'q-pb-lg':$q.platform.is.desktop,'q-pb-sm':$q.platform.is.mobile}" reverse-fill-mask dense type="text" standout :label="$t('hotel.car.inputText') + $t('hotel.car.ContactNumber')" ref="ContactNumberRef" :rules="$q.platform.is.desktop?[val => !!val || $t('hotel.car.inputText') + $t('hotel.car.ContactNumber')]:[val => !!val || '']" />
           </div>
-          
+
         </template>
         <q-input :class="{'col-6':$q.platform.is.desktop,'q-pl-sm':$q.platform.is.desktop&&parameters.OrderType == 1,'q-pr-sm':$q.platform.is.desktop&&parameters.OrderType == 2,'q-pb-lg':$q.platform.is.desktop}" v-model="parameters.Remark" reverse-fill-mask dense filled clearable type="text" :label="$t('hotel.car.Remark')" />
       </div>
@@ -125,7 +131,7 @@ import { useQuasar } from 'quasar'
 export default defineComponent({
   props: {},
   setup(props, context) {
-    const orderstatus = inject(DirtionmaryHelper.HOTEL_CAR_ORDER_STATUS) as Boolean
+    const orderstatus = inject(DirtionmaryHelper.HOTEL_CAR_ORDER_STATUS) as any
     const cars = inject(DirtionmaryHelper.HOTEL_CAR_LIST) as any
     const editor = inject(DirtionmaryHelper.HOTEL_UPDATEHOTEL_CAR) as any
     const { t } = useI18n()

src/components/hotel/list/ListTable.vue

@@ -99,7 +99,7 @@ export default defineComponent({
   setup() {
     const $q=useQuasar()
     const { t } = useI18n()
-    const orderstatus = inject(DirtionmaryHelper.HOTEL_CAR_ORDER_STATUS) as Boolean
+    const orderstatus = inject(DirtionmaryHelper.HOTEL_CAR_ORDER_STATUS) as any
     const search = inject(DirtionmaryHelper.HOTEL_QUERY_PARAM) as any
     const updateHotel = inject(DirtionmaryHelper.HOTEL_UPDATEHOTEL_CAR) as any
     watch(search, (n, o) => {
@@ -114,7 +114,7 @@ export default defineComponent({
         data.orderSubmitItemObj=null
         data.orderSubmitObj=null
       }
-      methods.initHotels()
+      //methods.initHotels()
     })
     watch(orderstatus,(n,o)=>{
       if(orderstatus.value==true){

src/components/hotel/list/TableOperation.vue

@@ -13,7 +13,11 @@
             <q-date v-model="joinHouse.dateRange" :options="optionsFn" range mask="YYYY/MM/DD" landscape @range-end="dateRangeHandler"></q-date>
           </q-popup-proxy> -->
         </q-field>
-        <span class="text-grey-6 f12" v-html="$t('hotel.inhouseDays', { day: joinHouse.days })"></span>
+        <span class="text-grey-6 f12">
+          {{$t('hotel.inhouseDays')}}
+          <span class="din text-yellow-10">{{joinHouse.days}}</span>
+          {{$t('unit.night')}}
+        </span>
       </div>
     </div>
     <div class="f12 text-negative q-mb-md">{{ $t('hotel.waringTips') }}</div>
@@ -43,7 +47,9 @@
               </q-input>
             </div>
             <div :class="{'col':$q.platform.is.desktop,'text-center':$q.platform.is.desktop,'text-right':$q.platform.is.mobile,}">
-              <span class="f12 text-grey-6" v-html="$t('hotel.yg', { roomCount: item.Number })"></span>
+              <span class="f12 text-grey-6">
+                {{$t('hotel.yg')}}<span class="din text-yellow-10">{{item.Number}}</span> {{$t('unit.jf')}}
+              </span>
             </div>
           </div>
         </div>
@@ -140,7 +146,7 @@ export default defineComponent({
         methods.setList()
       }
     )
-      
+
     //   今天购买数量
     watch(data.parameters, (n, o) => {
       methods.calculateNum()

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

@@ -61,7 +61,7 @@
             <q-td :props="props">
               <div class="room-item f12 text-grey-6" v-for="x in props.row.RoomList">
                 <span class="q-mr-md"> {{ x.RoomInfo.TypeName }}: {{ x.Number }} {{ $t('unit.jian') }} </span>
-                <span class="q-mr-md"> {{ $t('hotelorder.people') }}: {{ x.PeopleNum ?? 1 }} {{ $t('unit.ren') }} </span>
+                <span class="q-mr-md"> {{ $t('hotelorder.people') }}: {{ x.PeopleNumber ?? 1 }} {{ $t('unit.ren') }} </span>
                 <span class="q-mr-md"> {{ $t('hotelorder.unitPrice') }}: {{ x.Unit_Price ?? 1 }} </span>
                 <span class="q-mr-md"> {{ $t('hotelorder.xj') }}: {{ x.Money ?? 1 }} </span>
               </div>
@@ -95,12 +95,22 @@
           <svg-icon color=" svg-red" icon="Code/Warning-1-circle.svg" :size="16" v-if="$q.platform.is.desktop"></svg-icon>
           <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>
+              <div class="f12">
+                {{$t('hotelorder.pay.t1')}}
+                <span class="text-orange">{{x.PaymentDate}}</span>
+                {{$t('hotelorder.pay.t11')}}
+                <span class="text-orange">{{x.FinalPaymentDate}}</span>
+                {{$t('hotelorder.pay.t12')}}
+              </div>
               <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>
+              <div class="f12">
+                {{$t('hotelorder.pay.t2')}}
+                <span class="text-negative">{{x.UploadGuestDate }}</span>
+                {{$t('hotelorder.pay.t21')}}
+              </div>
               <div class="row items-center f12 q-mt-sm">
                 <div class="text-accent q-mr-md" v-if="x.GuestFileList.length>0">{{x.GuestFileList[0].split('/').at(-1)}}</div>
                 <q-btn dense unelevated color="primary" size="sm" class="q-mr-sm"  v-if="x.GuestFileList.length>0">
@@ -203,7 +213,7 @@
               <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>

src/i18n/zh-TW/index.ts

@@ -34,7 +34,9 @@ export default {
     jian: '間',
     ren: '人',
     jp: '円',
-    jpc: '¥'
+    jpc: '¥',
+    night: '晚',
+    jf:'間房'
   },
   expends:{
     on:'展開',
@@ -52,8 +54,11 @@ export default {
       copy: '複製'
     },
     pay: {
-      t1: '出發前收款酒店，請您於 <span class="text-orange">{d}</span> 前支付訂金，並且於 <span class="text-negative">{e}</span> 日前支付尾款',
-      t2: '到店自付酒店，需要您於 <span class="text-negative">{e}</span> 前上傳旅客名單'
+      t1: '出發前收款酒店，請您於 ',
+      t11: '前支付訂金，並且於 ',
+      t12:' 日前支付尾款',
+      t2: '到店自付酒店，需要您於 ',
+      t21: ' 前上傳旅客名單'
     },
     hands:'手配費',
     payinfo: '查看支付方式',
@@ -148,9 +153,9 @@ export default {
     maxPrice: '最高價格',
     waringTips:'注意：以下計費與報價均是按照人數進行計費',
     inHouseDate:'入住日期',
-    inhouseDays:'共計 <span class="din text-yellow-10">{day}</span> 晚',
+    inhouseDays:'共計',
     bigTips:'本房型不同的酒店入住人數限制不同，系統默認該房型只能入住一人',
-    yg:'預計 <span class="din text-yellow-10">{roomCount}</span> 間房',
+    yg:'預計 ',
     outbind:'超出現有的庫存預定，我們會即時與酒店協商，請保證收訊通暢',
     car: {
       shoppingTitle: '購物車',
@@ -169,7 +174,9 @@ export default {
       Remark: '備註',
       scattered: '散客',
       group: '團',
-      title:'本次行程<span class="din text-orange-10">{days}</span>天，入住<span class="din text-primary">{hotels}</span>個酒店',
+      title:'本次行程',
+      title1:'天，入住',
+      title2:'個酒店',
       subtitle:'酒店採購單',
       sumPrice:'訂單總金額'
     },

src/pages/hotel/ModifyHotelOrder.vue

@@ -2,7 +2,13 @@
   <div class="fix-height-subpage no-wrap q-pa-md" v-if="order">
     <div class="q-py-sm q-px-md rounded-borders bg-white row items-center justify-between f12">
       <div class="f12 text-grey-6">{{ $t('hotelorder.search.orderNum') }}：{{ order.OrderNo }}</div>
-      <div v-html="$t('hotel.car.title', { days: order.DetailList.length, hotels: order.HotelCount })" class="q-pa-sm rounded-border text-orange-10 f12"></div>
+      <div class="q-pa-sm rounded-border text-orange-10 f12">
+        {{$t('hotel.car.title')}}
+        <span class="din text-orange-10">{{order.DetailList.length}}</span>
+        {{$t('hotel.car.title1')}}
+        <span class="din text-primary">{{order.HotelCount}}</span>
+        {{$t('hotel.car.title2')}}
+      </div>
       <div class="q-ml-md f12" :class="[order.typeInfo.Color]">
         <q-icon :name="order.typeInfo.Icon" />
         <span class="q-ml-sm">{{ order.typeInfo.StatusName }}</span>
@@ -25,7 +31,9 @@
                 <div>{{ z.Unit_Price }}/{{ $t('unit.ren') }}</div>
               </span>
               <div class="col">
-                <div class="f12 text-grey-6 text-center col" v-html="$t('hotel.yg', { roomCount: z.Number })"></div>
+                <div class="f12 text-grey-6 text-center col">
+                  {{$t('hotel.yg')}}<span class="din text-yellow-10">{{z.Number}}</span> {{$t('unit.jf')}}
+                </div>
                 <!-- <div>{{$t('hotelorder.xj')}}：{{moneyFormat(z.Money)}}</div> -->
               </div>
               <span>