no message

src/components/ticket/list/ListHeader.vue

 <template>
   <div class="rounded-borders bg-white row items-center q-pa-md">
     <n-cascader v-if="$q.platform.is.desktop" class="col-2 no-border" @update:value="changearea" v-model:value="cascader.addressValue" size="large" :placeholder="$t('hotel.area')" clearable check-strategy="all" :options="provinces" value-field="ID" label-field="Name" remote :on-load="loadChilds" cascade />
-    <q-input v-model="searchClone.TicketName" standout :class="{'q-ml-lg':$q.platform.is.desktop,'col':$q.platform.is.mobile}" style="min-width:190px;" dense :label="$t('v102.ticket.name')" />
+    <q-field v-if="$q.platform.is.desktop" stack-label :label="$t('daterange')" standout class="q-ml-lg col-2" style="min-width: 190px" dense>
+      <div class="self-center full-width no-outline" tabindex="0">{{ searchClone.OpenTime }}</div>
+      <q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
+        <q-date v-model="searchClone.OpenTime" :options="optionsFn" mask="YYYY/MM/DD"  @update:model-value="dateRangeHandler"></q-date>
+      </q-popup-proxy>
+    </q-field>
+    <q-input v-model="searchClone.Name" standout :class="{'q-ml-lg':$q.platform.is.desktop,'col':$q.platform.is.mobile}" style="min-width:150px;" dense :label="$t('v102.ticket.name')" />
     <div class="col" v-if="$q.platform.is.desktop"></div>
-    <q-btn v-if="searchClone.ViewType==1" :round="$q.platform.is.mobile" :dense="$q.platform.is.mobile" flat :icon="$q.platform.is.desktop?'view_list':'view_stream'" class="bg-grey-3 hover q-mr-md" color="dark" @click="changeViewHandler(2)">
+    <q-btn v-if="searchClone.ViewType==1" :round="$q.platform.is.mobile" :dense="$q.platform.is.mobile" flat :icon="$q.platform.is.desktop?'view_list':'view_stream'" class="bg-grey-3 hover q-mr-md q-ml-md" color="dark" @click="changeViewHandler(2)">
       <q-tooltip class="bg-dark">{{ $t('v102.ticket.toggleListType1') }}</q-tooltip>
     </q-btn>
-    <q-btn v-if="searchClone.ViewType==2" :round="$q.platform.is.mobile" :dense="$q.platform.is.mobile" flat icon="grid_view" class="bg-grey-3 hover q-mr-md" color="dark" @click="changeViewHandler(1)">
+    <q-btn v-if="searchClone.ViewType==2" :round="$q.platform.is.mobile" :dense="$q.platform.is.mobile" flat icon="grid_view" class="bg-grey-3 hover q-mr-md q-ml-md" color="dark" @click="changeViewHandler(1)">
       <q-tooltip class="bg-dark">{{ $t('v102.ticket.toggleListType2') }}</q-tooltip>
     </q-btn>
-    <q-btn color="primary" :round="$q.platform.is.mobile" :dense="$q.platform.is.mobile" :icon="$q.platform.is.mobile?'search':''" unelevated :label="$q.platform.is.mobile?'':$t('query')" @click="setSearchHandler"/>
+    <q-btn unelevated class="bg-grey-3 hover q-mr-md" :title="$t('morequery')">
+      <q-badge rounded class="din bg-red-2 text-red-14 text-weight-bold" floating :label="searchCnt" v-if="searchCnt > 0" />
+        <svg-icon color="dark" icon="Text/Filter.svg" :tips="$t('morequery')" :size="20"></svg-icon>
+        <q-tooltip>{{ $t('morequery') }}</q-tooltip>
+        <q-popup-proxy class="no-shadow" style="box-shadow: 0 0 50px #ddd !important" :offset="[0, 20]" :model-value="canHide">
+          <q-card class="q-pa-md rounded-borders" style="width: 300px">
+            <div class="q-mb-md text-subtitle2">{{ $t('morequery') }}</div>
+            <div class="q-my-md" v-if="$q.platform.is.mobile">
+              <n-cascader class="col-2 no-border" @update:value="changearea" v-model:value="cascader.addressValue" size="large" :placeholder="$t('hotel.area')" clearable check-strategy="all" :options="provinces" value-field="ID" label-field="Name" remote :on-load="loadChilds" cascade />
+            </div>
+            <div class="q-my-md" v-if="$q.platform.is.mobile">
+              <q-field stack-label :label="$t('daterange')" standout class="col-2" style="min-width: 190px" dense>
+                <div class="self-center full-width no-outline" tabindex="0">{{ searchClone.OpenTime }}</div>
+                <q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
+                  <q-date v-model="searchClone.OpenTime" :options="optionsFn" mask="YYYY/MM/DD"  @update:model-value="dateRangeHandler"></q-date>
+                </q-popup-proxy>
+              </q-field>
+            </div>
+            <div class="row items-center">
+              <q-input v-model="searchClone.StartPrice" class="col q-mr-md" mask="#.##" reverse-fill-mask dense type="text" standout :label="$t('hotel.minPrice')" />
+              <q-input v-model="searchClone.EndPrice" class="col" dense mask="#.##" reverse-fill-mask ftype="text" standout :label="$t('hotel.maxPrice')" />
+            </div>
+            
+          </q-card>
+        </q-popup-proxy>
+    </q-btn>
+    <q-btn v-if="$q.platform.is.desktop" color="primary" unelevated :label="$t('query')" @click="setSearchHandler"/>
+    <q-btn v-else color="primary" :round="$q.platform.is.mobile" :dense="$q.platform.is.mobile" :icon="$q.platform.is.mobile?'search':''" unelevated :label="$q.platform.is.mobile?'':$t('query')" @click="setSearchHandler"/>
     <!-- view_list grid_view -->
   </div>
 </template>
 
 <script lang="ts">
-import { inject, reactive, toRefs } from 'vue'
+import svgIcon from '../../global/svg-icon.vue'
+import { date } from 'quasar'
+import { useQuasar } from 'quasar'
+import { computed, ref, inject, reactive, toRefs } from 'vue'
 import { DirtionmaryHelper } from 'src/config/dictionary'
 import HotelService from 'src/api/hotel'
 import { CascaderOption, NCascader } from 'naive-ui'
 import { ApiResult } from 'src/@types/enumHelper'
 import message from 'src/utils/message'
 export default {
-  components: { NCascader },
+  components: { svgIcon, NCascader },
   setup(props) {
+    const $q = useQuasar()
+    const qDateProxy = ref(null) as any
     const data = reactive({
+      defalutUrl: ref('https://cdn.quasar.dev/img/mountains.jpg'),
       addressParams: {
         Id: '651'
       },
@@ -32,7 +71,8 @@ export default {
       cascader: {
         addressValue: null
       } as any,
-      searchClone:{} as any
+      searchClone:{} as any,
+      canHide: false,
     })
     const search = inject(DirtionmaryHelper.TICKET_QUERY_PARAM) as any
     data.searchClone = JSON.parse(JSON.stringify(search.msg))
@@ -77,14 +117,14 @@ export default {
         })
       },
       changearea(e: number, option: any, pathValues: Array<any>) {
-        data.searchClone.Province = 0
-        data.searchClone.City = 0
+        data.searchClone.QProvince = 0
+        data.searchClone.QCity = 0
         if (pathValues) {
           if (pathValues.length > 0) {
-            data.searchClone.Province = pathValues[0].ID
+            data.searchClone.QProvince = pathValues[0].ID
           }
           if (pathValues.length > 1) {
-            data.searchClone.City = pathValues[1].ID
+            data.searchClone.QCity = pathValues[1].ID
           }
         }
       },
@@ -94,10 +134,28 @@ export default {
       changeViewHandler(t:number){
         data.searchClone.ViewType=t
         methods.setSearchHandler()
+      },
+      dateRangeHandler(e: any) {
+        if (qDateProxy.value) qDateProxy.value.hide()
+      },
+      optionsFn(cd: any) {
+        return cd >= date.formatDate(date.addToDate(new Date(), { days: 1 }), 'YYYY/MM/DD')
+      },
     }
+    const searchCnt = computed(() => {
+      let setCnt = 0
+      if ($q.platform.is.mobile) {
+        if (data.searchClone.QProvince > 0) setCnt++
+        if (data.searchClone.OpenTime) setCnt++
       }
+      if (data.searchClone.StartPrice>0) setCnt++
+      if (data.searchClone.EndPrice>0) setCnt++
+      return setCnt
+    })
     methods.initAddress()
     return {
+      qDateProxy,
+      searchCnt,
       ...toRefs(data),
       ...methods
     }

src/components/ticket/list/ListTable.vue

 <template>
   <div v-if="search.msg.ViewType == 1 || $q.platform.is.mobile" class="q-pt-lg row" :class="{ 'q-col-gutter-sm': $q.platform.is.mobile, 'q-col-gutter-lg': $q.platform.is.desktop }">
     <q-card v-for="x in tickets" :class="{ 'col-4': $q.screen.lt.lg && $q.platform.is.desktop, 'col-3': $q.screen.gt.md && $q.platform.is.desktop, 'col-6': $q.platform.is.mobile && search.msg.ViewType == 1, 'col-12 q-mb-sm': $q.platform.is.mobile && search.msg.ViewType == 2 }" class="transparent" flat>
-      <img src="https://cdn.quasar.dev/img/mountains.jpg" />
+      <q-img :src="x.PicPathList[0]" :ratio="16 / 9" spinner-color="grey" spinner-size="50px" width="100%" fit="cover" class="rounded-borders">
+        <template v-slot:error>
+          <div class="absolute-full flex flex-center bg-blue-1 text-dark">
+            {{$t('v102.ticket.load')}}
+          </div>
+        </template>
+      </q-img>
       <q-card-section class="bg-white">
-        <div class="text-subtitle1 text-weight-bolder ellipsis-2-lines cursor-pointer" :class="{ 'text-subtitle2': $q.platform.is.mobile }" @click="showCardHandler">四川阿壩州四姑娘山雙橋溝</div>
-        <div class="f12 text-grey-700 ellipsis">中國 四川省阿坝藏族羌族自治州 小金縣 四姑娘山風景區</div>
+        <div class="text-subtitle1 text-weight-bolder ellipsis-2-lines cursor-pointer" :class="{ 'text-subtitle2': $q.platform.is.mobile }" @click="showCardHandler(x)">{{x.Name}}</div>
+        <div class="f12 text-grey-700 ellipsis">{{$t('v102.ticket.Japan')}} {{x.ProvinceName}} {{x.CityName}} {{x.Address}}</div>
         <div class="q-mt-lg row items-center">
           <div class="text-grey-900 col" :class="{ f12: $q.platform.is.mobile, 'text-subtitle2 text-weight-bold': $q.platform.is.desktop }">
             {{ $t('v102.ticket.showtt.t1') }}
-            <span class="text-weight-bolder">3</span>
+            <span class="text-weight-bolder">{{x.TicketPriceList.length}}</span>
             {{ $t('v102.ticket.showtt.t2') }}
           </div>
-          <q-btn color="primary" icon="local_grocery_store" unelevated dense size="sm" :label="$q.platform.is.desktop || search.msg.ViewType == 2 ? $t('v102.ticket.buy') : $t('v102.ticket.shortBuy')" @click="toPreviewOrderHandler(1003)"/>
+          <q-btn color="primary" icon="local_grocery_store" unelevated dense size="sm" :label="$q.platform.is.desktop || search.msg.ViewType == 2 ? $t('v102.ticket.buy') : $t('v102.ticket.shortBuy')" @click="toPreviewOrderHandler(x.ID)"/>
         </div>
       </q-card-section>
     </q-card>
@@ -20,27 +26,33 @@
   <div v-if="search.msg.ViewType == 2 && $q.platform.is.desktop" class="q-pt-lg">
     <q-card v-for="i in tickets" flat class="full-width q-pa-sm row q-mb-md">
       <div>
-        <q-img src="http://imgfile.oytour.com/Upload/DMC/20200313032017962.jpg" :ratio="16 / 9" spinner-color="grey" spinner-size="50px" width="130px" fit="cover" class="rounded-borders" />
+        <q-img :src="i.PicPathList[0]" :ratio="16 / 9" spinner-color="grey" spinner-size="50px" width="130px" fit="cover" class="rounded-borders">
+          <template v-slot:error>
+            <div class="absolute-full flex flex-center bg-blue-1 text-dark">
+              {{$t('v102.ticket.load')}}
+            </div>
+          </template>
+        </q-img>
       </div>
       <div class="q-ml-md col">
-        <div class="text-subtitle1 text-weight-bolder cursor-pointer" @click="showCardHandler">飞弹日枝山王神社</div>
+        <div class="text-subtitle1 text-weight-bolder cursor-pointer" @click="showCardHandler(i)">{{i.Name}}</div>
         <div class="f14 text-grey-600">
           {{ $t('v102.ticket.addr') }}：
-          <span>〒930-0064 富山県富山市山王町4-12</span>
-          <q-btn color="primary" icon="map" :label="$t('v102.ticket.map')" size="sm" dense flat class="q-ml-md" />
+          <span>{{i.CityName}} {{i.Address}}</span>
+          <q-btn color="primary" icon="map" :label="$t('v102.ticket.map')" size="sm" dense flat class="q-ml-md" @click="showCardHandler(i)"/>
         </div>
         <div>
-          <q-badge outline color="positive" label="历史建筑" class="q-mr-md" />
-          <q-badge outline color="positive" label="人文景观" />
+          <q-badge v-if="i.GeographicTag" v-for="s in i.GeographicTag.split(',')" outline color="positive" :label="s" class="q-mr-md" />
+          <q-badge v-if="i.ScenicSpotTag" v-for="s in i.ScenicSpotTag.split(',')" outline color="warning" :label="s" class="q-mr-md" />
         </div>
       </div>
       <div>
         <div class="text-h6 din text-negative">
-          <span>900.00</span>
+          <span>{{i.MinPrice.toFixed(2)}}</span>
           <span class="f12 text-grey-600 q-ml-sm">{{$t('unit.jp')}}{{ $t('hotel.col.low') }}</span>
         </div>
         <div class="text-right">
-          <q-btn color="primary" icon="shopping_cart" :label="$t('v102.ticket.buy')" dense outline size="sm" @click="toPreviewOrderHandler(1003)"/>
+          <q-btn color="primary" icon="shopping_cart" :label="$t('v102.ticket.buy')" dense outline size="sm" @click="toPreviewOrderHandler(i.ID)"/>
         </div>
       </div>
     </q-card>
@@ -50,12 +62,15 @@
     <q-pagination class="full-width justify-end" v-model="pages.PageIndex" color="primary" :max="pages.PageCount" :input="true" @update:model-value="changePageHandler" />
   </div>
   <q-dialog v-model="showDetails">
-    <ticket-card></ticket-card>
+    <ticket-card :ticket="detailsObj"></ticket-card>
   </q-dialog>
 </template>
 
 <script lang="ts">
+import { ApiResult } from '../../../@types/enumHelper'
 import { useQuasar } from 'quasar'
+import TicketService from '../../../api/ticket'
+import message from '../../../utils/message'
 import { DirtionmaryHelper } from 'src/config/dictionary'
 import { defineComponent, inject, reactive, toRefs, watch } from 'vue'
 import { useRouter } from 'vue-router'
@@ -74,6 +89,7 @@ export default defineComponent({
         PageCount: 30
       },
       tickets: [] as any[],
+      detailsObj: {} as any,
       showDetails: false
     })
 
@@ -97,19 +113,32 @@ export default defineComponent({
 
     const methods = {
       getTickets() {
-        data.tickets = []
-        for (let i = 0; i < data.pages.PageSize; i++) {
-          data.tickets.push({})
+        let param = Object.assign(data.pages, search.msg)
+        TicketService.getTicketList(param)
+          .then(r => {
+            if (r.data.resultCode == ApiResult.SUCCESS) {
+              data.tickets = r.data.data.pageData
+              data.pages.PageCount = r.data.data.pageCount
+            } else {
+              message.errorMsg(r.data.message)
             }
+          }).catch(e => {
+            message.errorMsg(e.message)
+            data.loading = false
+          })
       },
       toPreviewOrderHandler(id:number){
-        $router.push({ path:`/ticket/preview/${id}`})
+        // 
+        let onldOpen = `${search.msg.OpenTime.split('/')}`
+        let newOpen = onldOpen.substring(0,4) + onldOpen.substring(5,7) + onldOpen.substring(8,10)
+        $router.push({ path:`/ticket/preview/${id}/${newOpen}`})
       },
       changePageHandler(n: number) {
         data.pages.PageIndex = n
         methods.getTickets()
       },
-      showCardHandler(){
+      showCardHandler(x:any){
+        data.detailsObj=x
         data.showDetails=true
       }
     }

src/i18n/zh-TW/index.ts

@@ -789,9 +789,19 @@ export default {
   v102:{
     ticket:{
       pageTitle:"票券檢索",
-      name:'請輸入票券名稱',
+      name:'請輸入景點名稱',
       toggleListType1:"列表模式",
       toggleListType2:"卡片模式",
+      Japan: '日本',
+      stoppage:'停止如場',
+      recommendTime: '推薦遊玩',
+      hour: '小時',
+      minutes: '分鐘',
+      ticketet: '兒童票',
+      ticketcr: '成人票',
+      ticketxs: '學生票',
+      ticketjt: '家庭套票（2大1小）',
+      load:'加載失敗',
       showtt:{
         t1:'共',
         t2:'種票型'
@@ -864,8 +874,10 @@ export default {
         t:'修改取件方式',
         c:'取消修改',
         s:'保存修改'
-      }
-    }
+      },
+      
+    },
+    
   },
   //#endregion
 }

src/pages/ticket/TicketList.vue

@@ -6,6 +6,7 @@
 </template>
 
 <script lang="ts">
+import { date } from 'quasar'
 import { inject, provide, reactive, toRefs, defineComponent } from 'vue';
 import useMetaModule from '../../module/meta/metaModule'
 import { useI18n } from 'vue-i18n'
@@ -25,12 +26,15 @@ export default defineComponent({
     })
     const search = reactive({
       msg:{
-        StartDate: '',
-        Country: '651',
-        Province: 0,
-        City: 0,
-        TicketName:'',
-        ViewType:1
+        QCountry: '651',
+        QProvince: 0,
+        QCity: 0,
+        QDistrict: 0,
+        Name:'',
+        OpenTime: date.formatDate(date.addToDate(new Date(), { days: 1 }), 'YYYY/MM/DD'),
+        StartPrice: '',
+        EndPrice: '',
+        ViewType:1,//列表模式
       }
     })
     provide(DirtionmaryHelper.TICKET_QUERY_PARAM, search)

src/router/routes.ts

@@ -17,7 +17,7 @@ const routes: RouteRecordRaw[] = [
       { path: '/scattered/HotelOrder', component: () => import('pages/scattered/HotelOrder.vue') },
       { path: '/comingsoon', component: () => import('pages/ComingSoon.vue') },
       { path: '/ticket/list', component: () => import('pages/ticket/TicketList.vue') },
-      {path: '/ticket/preview/:ticketId', component: () => import('pages/ticket/TicketOrderPreview.vue')},
+      {path: '/ticket/preview/:ticketId/:Time', component: () => import('pages/ticket/TicketOrderPreview.vue')},
       {path: '/ticket/order', component: () => import('pages/ticket/TicketOrder.vue')}
     ]
   },