no message

src/components/scattered/list/ListTable.vue

@@ -18,7 +18,7 @@
       <template v-slot:body-cell-reviewRating="props">
         <q-td :props="props">
           <div class="row no-wrap items-center">
-              <q-rating v-model="props.row.reviewRating" size="1.5em" color="orange" :max="props.row.reviewRating"
+              <q-rating v-model="props.row.reviewRating" size="1.5em" color="orange" :max="5"
               icon="star_border"
               icon-selected="star"
               icon-half="star_half" no-dimming readonly />
@@ -60,6 +60,55 @@
         <q-pagination class="full-width justify-end" v-model="pages.displayFrom" color="primary" :max="pageCount" :input="true" @update:model-value="changePageHandler" />
       </template>
     </q-table>
+    <q-table
+      hide-header
+      v-else
+      :title="pageTitle"
+      :rows="hotels"
+      grid
+      :columns="mobileCols"
+      row-key="name"
+      card-class="no-shadow bg-primary text-white"
+      :pagination="pages"
+      :loading="loading"
+    >
+    <template v-slot:top>
+        <div class="row full-width">
+          <div class="col"></div>
+          <q-btn class="hover q-mr-md" v-for="(item,index) in 2"
+          :class="{'bg-blue text-white':pages.sort==index+1,'bg-grey-3':pages.sort!=index+1}" @click="pages.sort=index+1,initHotels()">
+            {{index+1==1?$t('v101.scattered.anrenqi'):$t('v101.scattered.anjiage')}}
+          </q-btn>
+        </div>
+      </template>
+    <template v-slot:item="props">
+      <div @click="goUrl('/scattered/HotelDetails',props.row)" class="rounded-borders bg-primary text-white col-12 q-mb-sm" style="padding: 12px;margin-left: 12px;margin-right: 12px; width: calc(100% - 24px);">
+        <div @click.stop="showHotelDetailHandler(props.row.HotelId)">
+          <div style="opacity: 0.54;font-weight: 500;font-size: 12px;margin-bottom: 4px;">{{$t('v101.scattered.titleHeard1')}}</div>
+          <div style="font-size: 13px;">{{props.row.hotelName}}</div>
+        </div>
+        <div class="q-my-md">
+          <div style="opacity: 0.54;font-weight: 500;font-size: 12px;margin-bottom: 4px;">{{$t('v101.scattered.titleHeard2')}}</div>
+          <div style="font-size: 13px;">
+            <q-rating v-model="props.row.reviewRating" size="1.5em" color="orange" :max="5"
+            icon="star_border"
+            icon-selected="star"
+            icon-half="star_half" no-dimming readonly />
+          <span class="q-ml-xs" v-if="props.row.reviewRating>0">{{props.row.reviewRating}}</span>
+          </div>
+        </div>
+        <div>
+          <div style="opacity: 0.54;font-weight: 500;font-size: 12px;margin-bottom: 4px;">{{$t('v101.scattered.titleHeard3')}}</div>
+          <div class="">
+            <span>円{{props.row.lowrateBySetCurrency.toFixed(2)}}</span>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template v-slot:bottom>
+        <q-pagination class="full-width justify-end" v-model="pages.displayFrom" color="primary" :max="pageCount" :input="true" @update:model-value="changePageHandler" />
+      </template>
+    </q-table>
   </div>
 </template>
 
@@ -110,7 +159,9 @@ export default defineComponent({
       pageCount: 0,
       pageTitle: '' as (string | undefined),
       mobileCols:[
-        
+        {name:'hotelName',label:t('hotel.col.first'),field:(row:any)=>row.hotelName},
+        {name:'TotalInventory',label:t('hotel.col.three'),field:(row:any)=>row.TotalInventory},
+        {name:'LowerPrice',label:t('hotel.col.four'),field:(row:any)=>`¥${row.LowerPrice.toFixed(2)}${$t('unit.jp')} ${t('hotel.col.low')}`}
       ],
       showPriceList:false,
       queryHotelObj:{},