no message

src/App.vue

@@ -73,6 +73,8 @@ export default defineComponent({
     font-size: 12px
 .fz10
     font-size: 10px
+.fz14
+    font-size: 14px
 .fz16
     font-size: 16px
 .fz18

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

@@ -34,7 +34,7 @@
               <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">
-                  <TableOperation :hotelInfor="x"></TableOperation>
+                  <TableOperation :HotelRow="props.row" :hotelInfor="x"></TableOperation>
                 </q-popup-proxy>
               </div>
             </template>
@@ -42,7 +42,7 @@
             <div class="td-item cursor-pointer">
               {{ x.Inventory }}/{{ x.UseInventory }}/{{ x.RemainingInventory }}
               <q-popup-proxy v-if="x.RemainingInventory>0" class="no-shadow">
-                <TableOperation :hotelInfor="x"></TableOperation>
+                <TableOperation :HotelRow="props.row" :hotelInfor="x"></TableOperation>
               </q-popup-proxy>
             </div>
             <div class="td-item" :class="{ 'bg-red-9 text-white': x.UseInventory - x.Inventory > 0 }">

src/components/hotel/list/ListCar.vue

@@ -57,6 +57,7 @@
   import { dispatchAction } from '../../../store/utils';
   import { UserActionsType } from '../../../store/modules/user/actions';
   import useScrollModule from '../../../module/scrollbar/scrollModule'
+  import { DirtionmaryHelper } from '../../../config/dictionary'
   import message from '../../../utils/message'
   export default defineComponent({
     props: {
@@ -66,19 +67,24 @@
       // }
     },
     setup(props) {
+      inject(DirtionmaryHelper.HOTEL_CAR_LIST)
+      const HotelCarList = inject(DirtionmaryHelper.HOTEL_CAR_LIST) as any
       const {locale,t } = useI18n();
       const data=reactive({
         scrollStyle: {} as any,
         addNum: 1,
+        DataList:[]
       })
       data.scrollStyle = useScrollModule().scrollStyle
       const methods = {
-        
+        getList(){
+          console.log(HotelCarList._value,'----')
+        }
       }
       onMounted(()=>{
-        
+        methods.getList()
       })
-      return {...toRefs(data),...methods}
+      return {...toRefs(data),HotelCarList,...methods}
     }
   })
   </script>

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

 <template>
-    <q-card flat class="q-pa-md bg-grey-1" 
-    style="shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15)"
-    :style="{'width':$q.platform.is.desktop?'260px':'260px'}">
-        <div class="row no-wrap items-center">
-            <div>
-                <q-btn rounded dense color="white" text-color="black" size="xs" icon="remove" @click='addGoods(0)'/>
+    <q-card flat class="q-px-lg q-py-sm bg-grey-1" 
+    style="shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15)">
+        <div class="text-blue column q-pb-sm fz16">
+            <div class="row items-center justify-center">{{HotelRow.HotelName}}</div>
+            <div class="row justify-start">
+                <span class="fz12 text-grey-6">{{hotelInfor.DateStr}}</span>
             </div>
-            <div class="q-px-sm">
-                <q-input style="width: 100%;" v-model="addNum" class="col q-mr-md" mask="#.##" 
-                reverse-fill-mask dense type="text" standout :label="$t('hotel.shopping.labelNum')" />
+        </div>
+        <template v-for="(item,index) in parameters.DetailList">
+            <div class="row no-wrap justify-between items-center q-py-sm">
+                <div class="q-pr-md column">
+                    <div class="f12 q-pb-xs">
+                        <template v-if="item.RoomType==1">{{$t('hotel.shopping.StandardRooms')}}</template>
+                        <template v-if="item.RoomType==2">{{$t('hotel.shopping.maxRooms')}}</template>
+                        <template v-if="item.RoomType==3">{{$t('hotel.shopping.naturalRooms')}}</template>
+                        <template v-if="item.RoomType==4">{{$t('hotel.shopping.ThreeRooms')}}</template>
+                        <template v-if="item.RoomType==5">{{$t('hotel.shopping.driverRoom')}}</template>
+                    </div>
+                    <div class="text-red fz10">
+                        <span class="fz10">¥</span>
+                        <span class="fz14 q-pl-xs text-weight-bold">{{item.Unit_Price}}</span>
+                    </div>
+                </div>
+                <div class="row items-center justify-between">
+                    <div>
+                        <q-btn rounded dense color="white" text-color="black" size="xs" icon="remove" @click='addGoods(item,0)'/>
+                    </div>
+                    <div class="q-px-sm" style="width: 110px;">
+                        <q-input style="width: 100%;" v-model="item.Number" class="col q-mr-md" mask="#.##" 
+                        reverse-fill-mask dense type="text" standout :label="$t('hotel.shopping.labelNum')" />
+                    </div>
+                    <div>
+                        <q-btn rounded dense color="primary" size="xs" icon="add" @click='addGoods(item,1)'/>
+                    </div>
+                </div>
             </div>
-            <div>
-                <q-btn rounded dense color="primary" size="xs" icon="add" @click='addGoods(1)'/>
+        </template>
+        <div class="row justify-between q-pt-md">
+            <div class="text-grey-6 fz12">
+                {{$t('hotel.shopping.only')}}
+                <span class="text-orange-14 fz16 q-px-xs">{{onlyNum}}</span>
+                {{$t('hotel.shopping.between')}}
             </div>
-        </div>
-        <div class="row justify-end q-pt-md">
-            <div class="q-pl-md">
-                <q-btn round class="border-radius" color="red" size="sm" icon="shopping_cart" :title="$t('hotel.car.addShopping')" @click="join"/>
+            <div class="row items-center q-pl-md">
+                <div v-if="total>0" class="q-pr-md f12">
+                    <span>{{$t('hotel.shopping.TheSelected')}}</span>
+                    <span class="text-red q-px-sm">{{total}}</span>
+                    <span>{{$t('hotel.shopping.between')}}</span>
+                </div>
+                <div>
+                    <q-btn round class="border-radius" 
+                    :color="total==0?'grey-6':'red'" size="sm" icon="shopping_cart" 
+                    :title="$t('hotel.car.addShopping')" @click="total==0?'':join()"/>
+                </div>
             </div>
         </div>
     </q-card>
   </template>
   
   <script lang="ts">
-  import { defineComponent, ref, reactive, toRefs, provide, onMounted, inject } from 'vue'
+  import { defineComponent, ref, reactive, toRef, toRefs, provide, onMounted, inject, watch } from 'vue'
   import { SitLang } from '../../../@types';
   import { useI18n } from 'vue-i18n'
   import { dispatchAction } from '../../../store/utils';
   import { UserActionsType } from '../../../store/modules/user/actions';
+  import { DirtionmaryHelper } from '../../../config/dictionary'
   import message from '../../../utils/message'
   export default defineComponent({
     props: {
-        HotelId:{
-            type: String,
+        HotelRow:{
+            type: Object,
             require: true
         },
         hotelInfor:{
@@ -40,54 +77,86 @@
             require: true
         }
     },
-    setup(props) {
+    setup(props, context) {
       const {locale,t } = useI18n();
+      inject(DirtionmaryHelper.HOTEL_CAR_LIST)
+      const HotelCarList = inject(DirtionmaryHelper.HOTEL_CAR_LIST)
       const data=reactive({
-        addNum: 1,
+        HotelRow: props.HotelRow,
+        hotelInfor: props.hotelInfor,
+        onlyNum: '' as any,
         parameters:{
-            Money: String,
+            Money: '' as String,
             DetailList: [] as Array<any>,
-            Remark: String,
-        }
+            Remark: '' as String,
+        },
+        total: 0,
       })
-      let dataMsg = {
-        HotelId: props.HotelId as String,
-        Date: props.hotelInfor.DateStr as String,
-        RoomType:'' as String,
-        Unit_Price:'' as String,
-        Number:'' as String,
-        Destription:'' as String,
-      }
-    //   if(data.hotelInfor.PriceList[0].AddBedPrice){
-    //     dataMsg.
-    //     data.parameters.DetailList.push(dataMsg)
-    //   }
-      console.log(props.hotelInfor.DateStr,'---')
-    //   console.log(props.hotelInfor.PriceList[0].AddBedPrice,'====3人間成本价')
-    //   console.log(props.hotelInfor.PriceList[0].BidroomPrice,'====大床成本价')
-    //   console.log(props.hotelInfor.PriceList[0].CostPrice,'====標間成本价')
-    //   console.log(props.hotelInfor.PriceList[0].GuideRoomPrice,'====司機房成本价')
-    //   console.log(props.hotelInfor.PriceList[0].SingleroomPrice,'====自然单间成本价')
-      
-      data.addNum = inject('addNum')
+      data.onlyNum = JSON.parse(JSON.stringify(data.hotelInfor.RemainingInventory))
+    //   今天购买数量
+      watch(data.parameters, (n, o) => {
+        methods.calculateNum()
+     })
       const methods = {
-        addGoods(type:any){
-            if(type==1&&data.addNum<data.hotelInfor.RemainingInventory){
-                data.addNum++
-            }else if(type==0&&data.addNum>1){
-                data.addNum--
+        addGoods(item: String,type:any){
+            if(type==1&&item.Number<data.hotelInfor.RemainingInventory){
+                if(data.total<data.hotelInfor.RemainingInventory){
+                   item.Number++ 
+                }
+            }else if(type==0&&item.Number>0){
+                item.Number--
             }
         },
+        // 计算房间数量
+        calculateNum(){
+            data.total = 0
+            data.parameters.DetailList.forEach(item => {
+                if(data.total<data.hotelInfor.RemainingInventory){
+                  data.total+=item.Number  
+                }
+            })
+        },
+        // 加入购物车
         join(){
-            if(data.addNum<1){
+            if(data.total<1||data.total>data.hotelInfor.RemainingInventory){
                 message.errorMsg(`${t('hotel.shopping.small')}1${t('hotel.shopping.big')}${data.hotelInfor.RemainingInventory}`)
             }
-        }
+            HotelCarList.value = []
+            data.parameters.DetailList.forEach(item=>{
+                if(item.Number>0){
+                    HotelCarList.value.push(item)
+                }
+            })
+            console.log(HotelCarList.value)
+        },
+        setList(){
+            data.parameters.DetailList = [] as Array<any>
+                // 1:標間成本价 2:大床成本价 3:自然間成本价 4:3人間成本价 5:司機房成本价 稅金 TaxesPrice  入湯稅 PriceInTangTax
+            let roomTyps=['CostPrice','BidroomPrice','SingleroomPrice','AddBedPrice','GuideRoomPrice']
+            let tempPrice=data.hotelInfor.PriceList[0]
+            let hotel=data.hotelInfor
+            roomTyps.forEach((x:any,i:number)=>{
+                if(tempPrice[x]>0){
+                    let dataMsg = {
+                        HotelId:  data.HotelRow.HotelId,
+                        Date: hotel.DateStr,
+                        RoomType: i+1,
+                        Unit_Price: tempPrice[x],
+                        Number: 1,
+                        Destription: '',
+                        TaxesPrice: tempPrice.TaxesPrice,
+                        PriceInTangTax: tempPrice.PriceInTangTax,
+                        HotelName: data.HotelRow.HotelName,
+                    }
+                    data.parameters.DetailList.push(dataMsg)
+                }
+            })
+        },
       }
       onMounted(()=>{
-        
+        methods.setList()
       })
-      return {...toRefs(data),...methods}
+      return {...toRefs(data),HotelCarList,...methods}
     }
   })
   </script>

src/config/dictionary.ts

@@ -17,5 +17,10 @@ class DirtionmaryHelper {
 	 * 酒店查詢參數
 	 */
 	static readonly HOTEL_QUERY_PARAM = 'hotelqueryparam'
+
+	/**
+	 * 购物车参数
+	 */
+	 static readonly HOTEL_CAR_LIST = 'hotelcarlist'
 }
 export { userDictionmary,DirtionmaryHelper }

src/i18n/zh-TW/index.ts

@@ -38,7 +38,6 @@ export default {
     hotelRate: '酒店星級',
     minPrice: '最低價格',
     maxPrice: '最高價格',
-
     car:{
       shoppingTitle: '購物車',
       addShopping: '加入購物車',
@@ -47,9 +46,17 @@ export default {
       between: '间',
     },
     shopping:{
-      labelNum: '加入數量',
+      labelNum: '數量',
       small: '數量不能小於',
       big: '大於剩餘數嘚',
+      StandardRooms: '標間',
+      maxRooms: '大床間',
+      naturalRooms: '自然間',
+      ThreeRooms: '三人間',
+      driverRoom: '司機間',
+      only: '僅剩',
+      between: '間',
+      TheSelected: '已选',
     },
     pricetips: '酒店報價表',
     buy:'預定',

src/pages/hotel/HotelList.vue

 <template>
   <div class="fix-height-subpage column no-wrap q-pa-md">
-    <list-header></list-header>
+    <list-header @update:model-value="validateSendStatus"></list-header>
     <div class="col q-mt-md" :class="{'light-shadow q-pa-md bg-white rounded-border':$q.platform.is.desktop}">
       <list-table></list-table>
     </div>
@@ -40,7 +40,11 @@ export default {
       MinPrice:''
     })
     provide(DirtionmaryHelper.HOTEL_QUERY_PARAM, search)
-    const methods = {}
+    const HotelCarList = ref([])
+    provide(DirtionmaryHelper.HOTEL_CAR_LIST, HotelCarList)
+    const methods = {
+      
+    }
     return {
       ...toRefs(data),
       ...methods