添加

quasar.conf.js

@@ -50,7 +50,7 @@ module.exports = configure(function (ctx) {
 
     // Full list of options: https://v2.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
     build: {
-      vueRouterMode: 'hash', // available values: 'hash', 'history'
+      vueRouterMode: 'history', // available values: 'hash', 'history'
       target: {
         browser: ['es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1'],
         node: 'node16'

src/App.vue

@@ -56,7 +56,7 @@ export default defineComponent({
 .msl
     font-family: 'msl'
 .din
-    font-family: 'din'
+    font-family: 'din' !important
 .Poppins
     font-family: 'Poppins'
 
@@ -228,4 +228,13 @@ body
   td:first-child, th:first-child
     position: sticky
     left: 0
+.draw-close
+  position: fixed
+  right: 500px
+  top: 200px
+  border-bottom-left-radius: 5px
+  border-top-left-radius: 5px
+  background: var(--q-primary)
+  color: white
+  cursor: pointer
 </style>

src/components/hotel/list/List-Table.vue

 <template>
-  <div class="full-height column">
+  <div class="full-height column hotel-list">
     <q-table v-if="$q.platform.is.desktop" :loading="loading" :rows="hotels" :loading-label="$t('loading')" class="sticky-column-table col sticky-header-column-table hotel-table" flat :pagination="pages" :no-data-label="$t('noneData')">
       <template v-slot:top>
         <div class="row full-width">
@@ -29,23 +29,15 @@
             <div class="td-item">{{ $t('hotel.table.ins') }}</div>
             <div class="td-item">{{ $t('hotel.table.limit') }}</div>
           </q-td>
-          <q-td v-for="x in props.row.subList">
+          <q-td v-for="x in props.row.subList" @click="showOrderSubmitHandler(props.row,x)">
             <template v-if="x.PriceList && x.PriceList.length > 0">
               <div class="td-item cursor-pointer" :class="[x.PriceList[0].ins.bg, x.PriceList[0].ins.color]">
                 {{ x.PriceList[0].CostPrice }}
-                <q-popup-proxy v-if="x.RemainingInventory>0" class="no-shadow"  transition-show="scale" transition-hide="scale">
-                  <TableOperation :HotelRow="props.row" :hotelInfor="x"></TableOperation>
-                  <q-btn v-close-popup label="关闭" color="primary" flat style="float:right" />
-                </q-popup-proxy>
               </div>
             </template>
             <div class="td-item bg-dark" v-else></div>
             <div class="td-item cursor-pointer">
               {{ x.Inventory }}/{{ x.UseInventory }}/{{ x.RemainingInventory }}
-              <q-popup-proxy v-if="x.RemainingInventory>0" class="no-shadow" transition-show="scale" transition-hide="scale">
-                <TableOperation :HotelRow="props.row" :hotelInfor="x"></TableOperation>
-                <q-btn v-close-popup label="关闭" color="primary" flat style="float:right" />
-              </q-popup-proxy>
             </div>
             <div class="td-item" :class="{ 'bg-red-9 text-white': x.UseInventory - x.Inventory > 0 }">
               <span v-if="x.UseInventory - x.Inventory > 0">
@@ -80,6 +72,9 @@
     <q-dialog v-model="showPriceList">
       <hotel-price-list :hotel="queryHotelObj"></hotel-price-list>
     </q-dialog>
+    <q-dialog v-model="showOrderPreview" persistent>
+      <TableOperation :HotelRow="orderSubmitObj" :hotelInfor="orderSubmitItemObj" @close="showOrderPreview = false"></TableOperation>
+    </q-dialog>
   </div>
 </template>
 
@@ -127,7 +122,10 @@ export default defineComponent({
         {name:'LowerPrice',label:t('hotel.col.four'),field:(row:any)=>`¥${row.LowerPrice.toFixed(2)}円 ${t('hotel.col.low')}`}
       ],
       showPriceList:false,
-      queryHotelObj:{}
+      queryHotelObj:{},
+      orderSubmitObj:{} as any,
+      orderSubmitItemObj:{} as any,
+      showOrderPreview: false
     })
 
 
@@ -155,7 +153,7 @@ export default defineComponent({
                   x.LowerPrice=methods.calcLowerPrice(x)
                 }
               })
-              
+
               data.hotels = r.data.data.pageData
             } else {
               message.errorMsg(r.data.message)
@@ -200,6 +198,11 @@ export default defineComponent({
       viewHotelPriceListHandler(e:any,row:any,index:number){
         data.queryHotelObj = row
         data.showPriceList = true
+      },
+      showOrderSubmitHandler(row:any,col:any){
+        data.orderSubmitObj = row
+        data.orderSubmitItemObj = col
+        data.showOrderPreview = true
       }
     }
     methods.calcDateRangeCols()
@@ -210,6 +213,9 @@ export default defineComponent({
 </script>
 
 <style>
+.q-dialog__inner--minimized > div{
+    max-width: unset !important;
+}
 .cos-item-icon {
   width: 14px;
   height: 14px;

src/components/hotel/list/ListHeader.vue

@@ -44,18 +44,17 @@
       </q-popup-proxy>
     </q-btn>
     <q-btn color="primary" unelevated :label="$t('query')" />
-    
+
   </div>
-  <q-dialog v-if="HotelCarList.length>0" v-model="rightCarOpen" maximized full-height position="right">
-    <ListCar @close="close" @success="setSuccess"></ListCar>
+  <q-dialog v-if="cars.length>0" v-model="rightCarOpen" maximized full-height position="right">
+    <list-car @close="close" @success="setSuccess"></list-car>
   </q-dialog>
-  
+
 </template>
 
 <script lang="ts">
 import svgIcon from '../../global/svg-icon.vue'
 import { computed, inject, provide, reactive, ref, toRefs, defineComponent, onMounted, watch } from 'vue'
-import { DirtionmaryHelper } from '../../../config/dictionary'
 import HotelService from '../../../api/hotel'
 import message from '../../../utils/message'
 import { ApiResult } from '../../../@types/enumHelper'
@@ -69,8 +68,7 @@ import { DirtionmaryHelper } from '../../../config/dictionary'
 export default defineComponent({
   components: { svgIcon, ListCar },
   setup() {
-    inject(DirtionmaryHelper.HOTEL_CAR_LIST)
-    const HotelCarList = inject(DirtionmaryHelper.HOTEL_CAR_LIST) as any
+    const cars = inject(DirtionmaryHelper.HOTEL_CAR_LIST) as any
     const $q = useQuasar()
     const qDateProxy = ref(null) as any
     const qNameProxy = ref(null) as any
@@ -186,18 +184,12 @@ export default defineComponent({
       },
       setSuccess(){
         data.rightCarOpen = false
-        // HotelCarList.value = [] as Array<any>
-        // data.HotelLength = 0
       },
       getLength(){
         data.HotelLength = 0
-        if(HotelCarList.value.length>0){
-          HotelCarList.value.forEach(item=>{
-            item.timeList.forEach(t=>{
-              if(t.rooms.length>0){
-                data.HotelLength+=t.rooms.length
-              }
-            })
+        if(cars.value.length>0){
+          cars.value.forEach((item:any)=>{
+            data.HotelLength+=item.Hotels.length
           })
         }
       },
@@ -216,7 +208,8 @@ export default defineComponent({
     })
     methods.initAddress()
     methods.initHotels()
-    watch(HotelCarList.value, (n, o) => {
+    watch(cars.value, (n, o) => {
+      localStorage.setItem(DirtionmaryHelper.HOTEL_HOTELCARS_CACHE,JSON.stringify(cars.value))
       methods.getLength()
     })
     onMounted(()=>{
@@ -229,7 +222,7 @@ export default defineComponent({
       qNameProxy,
       searchCnt,
       search,
-      HotelCarList
+      cars
     }
   }
 })

src/config/dictionary.ts

@@ -27,5 +27,10 @@ class DirtionmaryHelper {
 	 * 酒店订单查询条件
 	 */
 	static readonly HOTEL_ORDER_SEARCH = 'hotelordersearch'
+
+  /**
+   * 酒店購物車緩存
+   */
+  static readonly HOTEL_HOTELCARS_CACHE = "hotelcarscache"
 }
 export { userDictionmary,DirtionmaryHelper }

src/i18n/zh-TW/index.ts

@@ -13,6 +13,7 @@ export default {
   query: '檢索',
   noneData: '沒有找到相關的數據',
   loading: '正在加載數據',
+  close:'關閉',
   unit: {
     jian: '間',
     ren: '人',
@@ -117,9 +118,15 @@ export default {
     hotelRate: '酒店星級',
     minPrice: '最低價格',
     maxPrice: '最高價格',
+    waringTips:'注意：以下計費與報價均是按照人數進行計費',
+    inHouseDate:'入住日期',
+    inhouseDays:'共計 <span class="din text-yellow-10">{day}</span> 晚',
+    bigTips:'本房型不同的酒店入住人數限制不同，系統默認該房型只能入住一人',
+    yg:'預計 <span class="din text-yellow-10">{roomCount}</span> 間房',
+    outbind:'超出現有的庫存預定，我們會即時與酒店協商，請保證收訊通暢',
     car: {
       shoppingTitle: '購物車',
-      addShopping: '加入購物車',
+      addShopping: '暫存購物車',
       orderTitle: '訂單',
       people: '人',
       between: '间',
@@ -133,7 +140,9 @@ export default {
       inputText: '請輸入',
       Remark: '備註',
       scattered: '散客',
-      group: '團'
+      group: '團',
+      title:'本次行程<span class="din text-orange-10">{days}</span>天，入住<span class="din text-primary">{hotels}</span>個酒店',
+      subtitle:'酒店採購單'
     },
     shopping:{
       labelNum: '房數',
@@ -152,7 +161,7 @@ export default {
     pricetips: '酒店報價表',
     buy: '預定',
     table: {
-      price: '價格',
+      price: '價格(標準間)',
       ins: '總/用/剩',
       limit: '超定'
     },

src/pages/hotel/HotelList.vue

@@ -41,7 +41,11 @@ export default defineComponent({
     })
 
     provide(DirtionmaryHelper.HOTEL_QUERY_PARAM, search)
-    const HotelCarList = ref([])
+    const HotelCarList = ref<Array<any>>([])
+    const cacheCars = localStorage.getItem(DirtionmaryHelper.HOTEL_HOTELCARS_CACHE)
+    if(cacheCars){
+      HotelCarList.value = JSON.parse(cacheCars)
+    }
     provide(DirtionmaryHelper.HOTEL_CAR_LIST, HotelCarList)
     const methods = {
 

src/utils/tools.ts

@@ -122,7 +122,30 @@ export function getHotelRoomType(getNormal:boolean = false):Array<RoomType>{
   })
   return rooms
 }
-
+export function moneyFormat (num:any, decimal = 2, split = ','):any {
+  function thousandFormat (num:any):any{
+    const len = num.length
+    return len <= 3 ? num : thousandFormat(num.substr(0, len - 3)) + split + num.substr(len - 3, 3)
+  }
+  if (isFinite(num)) { // num是数字
+    if (num === 0) { // 为0
+      return num.toFixed(decimal)
+    } else { // 非0
+      var res = ''
+      var dotIndex = String(num).indexOf('.')
+      if (dotIndex === -1) { // 整数
+        res = thousandFormat(String(num)) + '.' + '0'.repeat(decimal)
+      } else {
+        const numStr = String((Math.round(num * Math.pow(10, decimal)) / Math.pow(10, decimal)).toFixed(decimal)) // 四舍五入，然后固定保留2位小数
+        const decimals = numStr.slice(dotIndex, dotIndex + decimal + 1) // 截取小数位
+        res = thousandFormat(numStr.slice(0, dotIndex)) + decimals
+      }
+      return res
+    }
+  } else {
+    return '--'
+  }
+}
 export function getHotelOrderType(getNormal:boolean = false):Array<OrderType>{
   let types = [] as Array<OrderType>
   if(getNormal){

tsconfig.json

 {
   "extends": "@quasar/app-vite/tsconfig-preset",
   "compilerOptions": {
+    "target": "es5",
+    "lib": ["es2017","DOM"],
     "baseUrl": "."
   }
 }