完成PC端內容

src/components/hotel/list/ListHeader.vue

@@ -46,7 +46,7 @@
     <q-btn color="primary" unelevated :label="$t('query')" />
 
   </div>
-  <q-dialog v-if="cars.length>0" v-model="rightCarOpen" maximized full-height position="right">
+  <q-dialog v-model="rightCarOpen" maximized full-height position="right">
     <list-car @close="close" @success="setSuccess"></list-car>
   </q-dialog>
 

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

@@ -33,6 +33,9 @@
             <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-tooltip>
+                  <sample-price-list :price="x"></sample-price-list>
+                </q-tooltip>
               </div>
             </template>
             <div class="td-item bg-dark" v-else></div>
@@ -88,21 +91,29 @@ import { date,useQuasar } from 'quasar'
 import { DateType, getDateType, getDayOfWeek } from '../../../utils/tools'
 import { useI18n } from 'vue-i18n'
 import HotelPriceList from './HotelPriceList.vue'
-import TableOperation from "./Table-Operation.vue"
+import TableOperation from "./TableOperation.vue"
+import SamplePriceList from './SamplePriceList.vue'
 export default defineComponent({
-  components: { HotelPriceList, TableOperation },
+  components: { HotelPriceList, TableOperation,SamplePriceList },
   name: 'list-table',
   setup() {
     const $q=useQuasar()
     const { t } = useI18n()
-    inject(DirtionmaryHelper.HOTEL_QUERY_PARAM)
     const search = inject(DirtionmaryHelper.HOTEL_QUERY_PARAM) as any
+    const updateHotel = inject(DirtionmaryHelper.HOTEL_UPDATEHOTEL_CAR) as any
     watch(search, (n, o) => {
       if (data.loading) return
       data.pages.pageIndex = 1
       methods.calcDateRangeCols()
       methods.initHotels()
     })
+    watch(updateHotel,(n,o)=>{
+      if(updateHotel.value.HotelId){
+        data.showOrderPreview=true
+        data.orderSubmitItemObj=null
+        data.orderSubmitObj=null
+      }
+    })
 
     const data = reactive({
       hotels: [] as Array<any>,
@@ -237,7 +248,7 @@ export default defineComponent({
 .hotel-table .q-table td {
   padding: 0 !important;
 }
-.td-item.cursor-pointer:hover{
+/* .td-item.cursor-pointer:hover{
     color: var(--q-primary) !important;
-  }
+  } */
 </style>

src/components/hotel/list/SamplePriceList.vue

+<template>
+  <div v-if="rooms.length>0" class="row q-pa-sm rounded-borders">
+    <div class="price-item q-ma-none text-white" :class="{'q-ml-md':i>0}" v-for="(x,i) in rooms">
+      <div class="label">{{ x.name }}</div>
+      <div class="f12">{{ x.price }}</div>
+    </div>
+  </div>
+  <div v-if="rooms.length==0">{{$t('hotel.col.noMore')}}</div>
+</template>
+
+<script lang="ts">
+import { X } from 'app/dist/spa/assets/index.89636ad9'
+import { defineComponent, toRefs, reactive, inject } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { moneyFormat } from '../../../utils/tools'
+export default defineComponent({
+  props: {
+    price: {
+      type: Object,
+      default: {},
+      require: true
+    }
+  },
+  setup(props) {
+    const { t } = useI18n()
+    const data = reactive({
+      rooms:[] as Array<any>
+    })
+    const methods = {
+      setCurrentHotel() {
+        let temp = props.price.PriceList?props.price.PriceList[0]:null
+        if(!temp) return
+        let roomTyps = ['BidroomPrice', 'SingleroomPrice', 'AddBedPrice', 'GuideRoomPrice']
+        let roomLangs = [t('hotel.rooms.big'), t('hotel.rooms.sing'), t('hotel.rooms.three'), t('hotel.rooms.driver')]
+        roomTyps.forEach((x: any, i: number) => {
+          if (temp[x] > 0) {
+            data.rooms.push({
+              price:moneyFormat(temp[x]),
+              name:roomLangs[i]
+            })
+          }
+        })
+      }
+    }
+
+    methods.setCurrentHotel()
+
+    return { ...toRefs(data) }
+  }
+})
+</script>
+
+<style scoped>
+.price-item {
+  margin-top: 8px;
+}
+.price-item .label {
+  opacity: 0.5;
+  font-size: 12px;
+  font-weight: 400;
+}
+</style>

src/components/hotel/list/Table-Operation.vue → src/components/hotel/list/TableOperation.vue

@@ -2,7 +2,7 @@
   <q-card flat class="q-pa-lg" style="shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15); width: 50vw">
     <div class="q-mb-xs">
       <div class="">
-        <span class="text-primary text-h6">{{ HotelRow.HotelName }}</span>
+        <span class="text-primary text-h6">{{ parameters.HotelName }}</span>
       </div>
       <div class="q-my-md rounded-borders q-pa-sm bg-yellow-1 row items-center justify-between">
         <q-field stack-label :label="$t('hotel.inHouseDate')" class="text-primary" standout dense>
@@ -66,7 +66,7 @@
       </div>
       <div class="row items-center q-pl-md">
         <div>
-          <q-btn flat dense color="dark" :label="$t('close')" class="q-mr-sm" v-close-popup/>
+          <q-btn flat dense color="dark" :label="$t('close')" class="q-mr-sm" @click="editor={}" v-close-popup/>
           <q-btn unelevated dense color="negative" :disable="total==0" icon="shopping_cart" :label="$t('hotel.car.addShopping')" @click="join" />
         </div>
       </div>
@@ -85,11 +85,11 @@ export default defineComponent({
   props: {
     HotelRow: {
       type: Object,
-      require: true
+      require: false
     },
     hotelInfor: {
       type: Object,
-      require: true
+      require: false
     }
   },
   emits:['close'],
@@ -97,9 +97,10 @@ export default defineComponent({
     const { t } = useI18n()
     const qDateProxyOpera = ref<any>(null)
     const cars = inject(DirtionmaryHelper.HOTEL_CAR_LIST) as any
+    const editor = inject(DirtionmaryHelper.HOTEL_UPDATEHOTEL_CAR) as any
     const data = reactive({
-      HotelRow: props.HotelRow as any,
-      hotelInfor: props.hotelInfor as any,
+      HotelRow: {} as any,
+      hotelInfor: {} as any,
       onlyNum: 0,
       parameters: {
         HotelId: '',
@@ -163,7 +164,7 @@ export default defineComponent({
             data.sumPeople += parseInt(item.PeopleNumber)
         })
       },
-      joinOverride(){
+      join(){
         const temp= JSON.parse(JSON.stringify(data.parameters))
         temp.Money=0
         temp.Total=data.total
@@ -173,10 +174,11 @@ export default defineComponent({
           temp.Money+=(x.PeopleNumber*(x.Unit_Price+x.TaxesPrice+x.PriceInTangTax))
         });
         let existsIndex = cars.value.findIndex((x:any)=>x.Date == temp.Date)
-        let exists = existsIndex==-1?null:cars[existsIndex]
+
+        let exists = existsIndex==-1?null:cars.value[existsIndex]
         if(exists){
-          let existsHotel = exists.Hotels?.find((h:any)=>h.HotelId==temp.HotelId)
-          if(existsHotel) exists.Hotels.remove(existsHotel)
+          let existsHotel = exists.Hotels.findIndex((h:any)=>h.HotelId==temp.HotelId)
+          if(existsHotel!=-1) exists.Hotels.splice(existsHotel,1)
         }else{
           exists = {
             Date:temp.Date,
@@ -185,83 +187,17 @@ export default defineComponent({
           cars.value.push(exists)
         }
         exists.Hotels.push(temp)
-        console.log(cars.value)
+        cars.value.sort((x:any,y:any)=>{
+          return new Date(x.Date).getDate()-new Date(y.Date).getDate()
+        })
         message.successMsg(t('success'))
+        editor.value={}
         context.emit('close')
       },
-      // 加入购物车
-      join() {
-        methods.joinOverride()
-        return
-        // if (data.total < 1 || data.total > data.hotelInfor.RemainingInventory) {
-        //   message.errorMsg(`${t('hotel.shopping.small')}1${t('hotel.shopping.big')}${data.hotelInfor.RemainingInventory}`)
-        // }
-        // const parameters = data.parameters
-        // let msgData = {
-        //   HotelId: parameters.HotelId,
-        //   HotelName: parameters.HotelName,
-        //   TaxesPrice: 0.0,
-        //   PriceInTangTax: 0.0,
-        //   timeList: [] as Array<any>
-        // }
-        // let msg = {
-        //   Date: parameters.Date,
-        //   total: data.total,
-        //   RemainingInventory: parameters.RemainingInventory,
-        //   rooms: [] as Array<any>
-        // }
-        // data.parameters.DetailList.forEach((x, index) => {
-        //   msgData.TaxesPrice = x.TaxesPrice
-        //   msgData.PriceInTangTax = x.PriceInTangTax
-        //   //console.log(moneyFormat(x.Unit_Price),11111111)
-        //   if (x.Number > 0) {
-        //     let ArrData = {
-        //       HotelId: x.HotelId,
-        //       Date: x.Date,
-        //       RoomType: x.RoomType,
-        //       RoomName: x.RoomName,
-        //       Unit_Price: x.Unit_Price,
-        //       Number: x.Number,
-        //       PeopleNumber: x.PeopleNumber,
-        //       Destription: x.Destription,
-        //       TaxesPrice: x.TaxesPrice,
-        //       PriceInTangTax: x.PriceInTangTax
-        //     }
-        //     msg.rooms.push(ArrData)
-        //   }
-        // })
-        // msgData.timeList.push(msg)
-        // if (data.total > 0) {
-        //   let list = HotelCarList.value
-        //   if (list.length > 0) {
-        //     let fault = true
-        //     list.forEach((item: any, index: number) => {
-        //       if (item.HotelId == parameters.HotelId) {
-        //         item.timeList.forEach((x: any, i: number) => {
-        //           if (fault && x.Date == parameters.Date) {
-        //             HotelCarList.value[index].timeList.splice(i, 1)
-        //             HotelCarList.value[index].timeList.push(msg)
-        //             fault = false
-        //           } else if (fault && x.Date != parameters.Date) {
-        //             HotelCarList.value[index].timeList.push(msg)
-        //             fault = false
-        //           }
-        //         })
-        //       }
-        //     })
-        //     if (fault) HotelCarList.value.push(msgData)
-        //   } else {
-        //     HotelCarList.value.push(msgData)
-        //   }
-        // }
-        // message.successMsg(`${t('success')}`)
-        // context.emit('close')
-      },
       // 组装可选房间
       setList() {
-        methods.setDateRange()
+
         data.parameters.DetailList = [] as Array<any>
-        // 1:標間成本价 2:大床成本价 3:自然間成本价 4:3人間成本价 5:司機房成本价 稅金 TaxesPrice  入湯稅 PriceInTangTax
         let roomTyps = ['CostPrice', 'BidroomPrice', 'SingleroomPrice', 'AddBedPrice', 'GuideRoomPrice']
         let roomLangs = [t('hotel.rooms.normal'), t('hotel.rooms.big'), t('hotel.rooms.sing'), t('hotel.rooms.three'), t('hotel.rooms.driver')]
         let tips = ['', t('hotel.bigTips'), '', '', '']
@@ -274,6 +210,7 @@ export default defineComponent({
         data.parameters.RemainingInventory = hotel.RemainingInventory
         data.parameters.TaxesPrice = tempPrice.TaxesPrice
         data.parameters.PriceInTangTax= tempPrice.PriceInTangTax,
+        methods.setDateRange()
         roomTyps.forEach((x: any, i: number) => {
           if (tempPrice[x] > 0) {
             let dataMsg = {
@@ -305,17 +242,29 @@ export default defineComponent({
         if (qDateProxyOpera.value) qDateProxyOpera.value.hide()
       },
       setDateRange() {
-        data.joinHouse.StartDate = date.formatDate(new Date(data.hotelInfor.DateStr), 'YYYY/MM/DD')
+        data.joinHouse.StartDate = date.formatDate(new Date(data.parameters.Date), 'YYYY/MM/DD')
         data.joinHouse.EndDate = date.formatDate(date.addToDate(new Date(data.joinHouse.StartDate), { days: 1 }), 'YYYY/MM/DD')
         data.joinHouse.dateRangeFormat = `${data.joinHouse.StartDate} - ${data.joinHouse.EndDate} `
         data.joinHouse.days = date.getDateDiff(new Date(data.joinHouse.EndDate), new Date(data.joinHouse.StartDate), 'days')
       },
       optionsFn(cd: any) {
         return cd >= date.formatDate(date.addToDate(new Date(), { days: 7 }), 'YYYY/MM/DD')
+      },
+      setInjectHandler(){
+        data.parameters = editor.value
+        methods.calculateNum()
+        methods.setDateRange()
       }
     }
+    if(props.HotelRow && props.hotelInfor){
+      data.HotelRow = props.HotelRow
+      data.hotelInfor = props.hotelInfor
       methods.setList()
-    return { ...toRefs(data), ...methods }
+    }else{
+      methods.setInjectHandler()
+    }
+
+    return { ...toRefs(data), ...methods,editor }
   }
 })
 </script>

src/config/dictionary.ts

@@ -32,5 +32,10 @@ class DirtionmaryHelper {
    * 酒店購物車緩存
    */
   static readonly HOTEL_HOTELCARS_CACHE = "hotelcarscache"
+
+  /**
+   * 要修改的酒店預訂對象
+   */
+  static readonly HOTEL_UPDATEHOTEL_CAR = "hotelupdatecar"
 }
 export { userDictionmary,DirtionmaryHelper }

src/i18n/zh-TW/index.ts

@@ -13,6 +13,14 @@ export default {
   query: '檢索',
   noneData: '沒有找到相關的數據',
   loading: '正在加載數據',
+  dialog:{
+    titles:{
+      hotel:'移除酒店警示'
+    },
+    contents:{
+      hotel:'你確定要移除{day}的酒店{hotel}?'
+    }
+  },
   close:'關閉',
   unit: {
     jian: '間',
@@ -112,6 +120,7 @@ export default {
     time: 'h'
   },
   hotel: {
+    groupPrice:'合計',
     pageTitle: '酒店檢索',
     area: '檢索區域',
     searchName: '酒店名稱',
@@ -130,7 +139,7 @@ export default {
       orderTitle: '訂單',
       people: '人',
       between: '间',
-      submit: '提交',
+      submit: '確認下單',
       tax: '税',
       soup: '入汤',
       OrderType: '訂單類型',
@@ -142,7 +151,8 @@ export default {
       scattered: '散客',
       group: '團',
       title:'本次行程<span class="din text-orange-10">{days}</span>天，入住<span class="din text-primary">{hotels}</span>個酒店',
-      subtitle:'酒店採購單'
+      subtitle:'酒店採購單',
+      sumPrice:'訂單總金額'
     },
     shopping:{
       labelNum: '房數',
@@ -183,7 +193,8 @@ export default {
       ins: '庫存',
       sins: '剩餘庫存',
       uins: '已預訂',
-      more: '更多房型報價'
+      more: '更多房型報價',
+      noMore: '沒有其他房型報價'
     },
     datetype: {
       red: '紅日',

src/pages/hotel/HotelList.vue

@@ -14,7 +14,7 @@ import svgIcon from '../../components/global/svg-icon.vue'
 import { defineComponent, inject, provide, reactive, ref, toRefs } from 'vue'
 import { DirtionmaryHelper } from '../../config/dictionary'
 import ListHeader from '../../components/hotel/list/ListHeader.vue'
-import ListTable from '../../components/hotel/list/List-Table.vue'
+import ListTable from '../../components/hotel/list/ListTable.vue'
 export default defineComponent({
   components: { svgIcon, ListHeader, ListTable },
   setup() {
@@ -47,6 +47,8 @@ export default defineComponent({
       HotelCarList.value = JSON.parse(cacheCars)
     }
     provide(DirtionmaryHelper.HOTEL_CAR_LIST, HotelCarList)
+    const updateObj = ref<any>({})
+    provide(DirtionmaryHelper.HOTEL_UPDATEHOTEL_CAR,updateObj)
     const methods = {
 
     }