Skip to content

M
million
Commit 388ccf00 authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent cb10135f
Show whitespace changes
Inline Side-by-side
Showing with 233 additions and 2 deletions
src/components/label_other/travel-list.vue → src/components/group/travel-list.vue
View file @ 388ccf00
...@@ -2,74 +2,45 @@ ...@@ -2,74 +2,45 @@
<div class="q-mt-lg q-mb-lg"> <div class="q-mt-lg q-mb-lg">
<div class="section-block download1"> <div class="section-block download1">
<div class="group-title">9月歐洲遊</div> <div class="group-title">9月歐洲遊</div>
<q-table <q-table :pagination.sync="paginationDesktop" :data="plugData.GroupSelfItems" :columns="columns" row-key="id"
:pagination.sync="paginationDesktop" :filter="filter" table-header-class="travel-list" card-class="travel-list" :pagination-label="formatLabel"
:data="data" rows-per-page-label=" " :rows-per-page-options="[]" TCNUM-data-labe="沒有找到適合的團期" v-if="!$q.screen.xs">
:columns="columns"
row-key="id"
:filter="filter"
table-header-class="travel-list"
card-class="travel-list"
:pagination-label="formatLabel"
rows-per-page-label=" "
:rows-per-page-options="[]"
no-data-labe="沒有找到適合的團期"
v-if="!$q.screen.xs"
>
<template v-slot:body="props"> <template v-slot:body="props">
<q-tr :props="props"> <q-tr :props="props">
<q-td key="travelDate" :props="props"> <q-td key="StartDate" :props="props">
<span class="text-red">{{ props.row.travelDate }}</span> <span class="text-red">{{ props.row.StartDate }}</span>
</q-td> </q-td>
<q-td key="no" :props="props">{{ props.row.no }}</q-td> <q-td key="TCNUM" :props="props">{{ props.row.TCNUM }}</q-td>
<q-td key="name" :props="props"> <q-td key="Title" :props="props">
<div style="max-width:435px;white-space: pre-wrap;"> <div style="max-width:435px;white-space: pre-wrap;">
<a href target="_blank">{{ props.row.name }}</a> <a href target="_blank">{{ props.row.Title }}</a>
</div> </div>
</q-td> </q-td>
<q-td key="days" :props="props">{{ props.row.days }}</q-td> <q-td key="DayNum" :props="props">{{ props.row.DayNum }}</q-td>
<q-td key="flight" :props="props"> <q-td key="FlightStatus" :props="props">
<!--v-if="props.row.FlightStatus"-->
<q-icon color="grey" name="iconfont iconhangbanxinxicopy" size="14" /> <q-icon color="grey" name="iconfont iconhangbanxinxicopy" size="14" />
</q-td> </q-td>
<q-td key="price" :props="props"> <q-td key="Price" :props="props">
<span caption>$</span> <span caption>$</span>
<span class="text-subtitle2 text-weight-medium">{{ props.row.price }}</span> <span class="text-subtitle2 text-weight-medium">{{ props.row.Price }}</span>
</q-td> </q-td>
<q-td key="site" :props="props"> <q-td key="Seat" :props="props">
<span <span
:class="{'text-orange':props.row.site>0,'text-pink':(props.row.site==0 && props.row.substitute),'text-red':(props.row.site==0 && !props.row.substitute)}" :class="{'text-orange':props.row.Seat>0,'text-pink':(props.row.Seat==0 && props.row.Substitute),'text-red':(props.row.Seat==0 && !props.row.Substitute)}">{{ props.row.Seat>0?'有名額':(props.row.Seat==0 && props.row.Substitute?'可候補':'名額已滿') }}</span>
>{{ props.row.site>0?'有名額':(props.row.site==0 && props.row.substitute?'可候補':'名額已滿') }}</span>
</q-td> </q-td>
<q-td key="id" :props="props"> <q-td key="TCID" :props="props">
<q-btn <q-btn type="a" @click="OpenNewUrl(props.row.LinkUrl)" target="_blank"
type="a" :label="props.row.Seat>0||props.row.Substitute?'我有興趣':'無法預訂'"
href="/start/pick-quasar-flavour" :color="props.row.Seat>0||props.row.Substitute?'indigo':'grey'" rounded unelevated
target="_blank" :disable="props.row.Seat==0&&props.row.Substitute" />
:label="props.row.site>0||props.row.substitute?'我有興趣':'無法預訂'"
:color="props.row.site>0||props.row.substitute?'indigo':'grey'"
rounded
unelevated
:disable="props.row.site==0&&props.row.substitute"
/>
</q-td> </q-td>
</q-tr> </q-tr>
</template> </template>
</q-table> </q-table>
<q-table <q-table :pagination.sync="pagination" v-if="$q.screen.xs" grid :data="plugData.GroupSelfItems" :columns="columns"
:pagination.sync="pagination" row-key="id" :filter="filter" table-header-class="travel-list" card-class="travel-list"
v-if="$q.screen.xs" :pagination-label="formatLabel" rows-per-page-label=" " :rows-per-page-options="[]" TCNUM-data-labe="沒有找到適合的團期">
grid
:data="data"
:columns="columns"
row-key="id"
:filter="filter"
table-header-class="travel-list"
card-class="travel-list"
:pagination-label="formatLabel"
rows-per-page-label=" "
:rows-per-page-options="[]"
no-data-labe="沒有找到適合的團期"
>
<template v-slot:item="props"> <template v-slot:item="props">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition">
<q-card class="q-mb-md q-pt-xs q-pb-xs" flat> <q-card class="q-mb-md q-pt-xs q-pb-xs" flat>
...@@ -77,33 +48,34 @@ ...@@ -77,33 +48,34 @@
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-item-label class="text-grey">團期</q-item-label> <q-item-label class="text-grey">團期</q-item-label>
<q-item-label class="text-red">{{props.row.travelDate}}</q-item-label> <q-item-label class="text-red">{{props.row.StartDate}}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-item-label class="text-grey">團號</q-item-label> <q-item-label class="text-grey">團號</q-item-label>
<q-item-label>{{props.row.no}}</q-item-label> <q-item-label>{{props.row.TCNUM}}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-item-label class="text-grey">團體名稱</q-item-label> <q-item-label class="text-grey">團體名稱</q-item-label>
<q-item-label lines="2"> <q-item-label lines="2">
<a href target="_blank">{{ props.row.name }}</a> <a href target="_blank">{{ props.row.Title }}</a>
</q-item-label> </q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-item-label class="text-grey">天數</q-item-label> <q-item-label class="text-grey">天數</q-item-label>
<q-item-label>{{props.row.days}}</q-item-label> <q-item-label>{{props.row.DayNum}}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-item-label class="text-grey">航班</q-item-label> <q-item-label class="text-grey">航班</q-item-label>
<q-item-label> <q-item-label>
<!--v-if="props.row.FlightStatus"-->
<q-icon color="grey" name="iconfont iconhangbanxinxicopy" size="14" /> <q-icon color="grey" name="iconfont iconhangbanxinxicopy" size="14" />
</q-item-label> </q-item-label>
</q-item-section> </q-item-section>
...@@ -113,7 +85,7 @@ ...@@ -113,7 +85,7 @@
<q-item-label class="text-grey">售價</q-item-label> <q-item-label class="text-grey">售價</q-item-label>
<q-item-label> <q-item-label>
<span caption>$</span> <span caption>$</span>
<span class="text-subtitle2 text-weight-medium">{{ props.row.price }}</span> <span class="text-subtitle2 text-weight-medium">{{ props.row.Price }}</span>
<span>起</span> <span>起</span>
</q-item-label> </q-item-label>
</q-item-section> </q-item-section>
...@@ -123,23 +95,16 @@ ...@@ -123,23 +95,16 @@
<q-item-label class="text-grey">狀態</q-item-label> <q-item-label class="text-grey">狀態</q-item-label>
<q-item-label> <q-item-label>
<span <span
:class="{'text-orange':props.row.site>0,'text-pink':(props.row.site==0 && props.row.substitute),'text-red':(props.row.site==0 && !props.row.substitute)}" :class="{'text-orange':props.row.Seat>0,'text-pink':(props.row.Seat==0 && props.row.Substitute),'text-red':(props.row.Seat==0 && !props.row.Substitute)}">{{ props.row.Seat>0?'有名額':(props.row.Seat==0 && props.row.Substitute?'可候補':'名額已滿') }}</span>
>{{ props.row.site>0?'有名額':(props.row.site==0 && props.row.substitute?'可候補':'名額已滿') }}</span>
</q-item-label> </q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-btn <q-btn type="a" @click="OpenNewUrl(props.row.LinkUrl)" target="_blank"
type="a" :label="props.row.Seat>0||props.row.Substitute?'我有興趣':'無法預訂'"
href="/start/pick-quasar-flavour" :color="props.row.Seat>0||props.row.Substitute?'indigo':'grey'" rounded unelevated
target="_blank" :disable="props.row.Seat==0&&props.row.Substitute" />
:label="props.row.site>0||props.row.substitute?'我有興趣':'無法預訂'"
:color="props.row.site>0||props.row.substitute?'indigo':'grey'"
rounded
unelevated
:disable="props.row.site==0&&props.row.substitute"
/>
</q-item-section> </q-item-section>
</q-item> </q-item>
</q-list> </q-list>
...@@ -152,7 +117,8 @@ ...@@ -152,7 +117,8 @@
</template> </template>
<script> <script>
export default { export default {
props: ["plugData"],
data() { data() {
return { return {
pagination: { pagination: {
...@@ -168,88 +134,75 @@ export default { ...@@ -168,88 +134,75 @@ export default {
rowsPerPage: 5 rowsPerPage: 5
}, },
filter: "", filter: "",
columns: [ columns: [{
{ name: "StartDate",
name: "travelDate",
required: true, required: true,
label: "出發日期", label: "出發日期",
align: "left", align: "left",
sortable: true sortable: true
}, },
{ {
name: "no", name: "TCNUM",
align: "center", align: "center",
label: "團號", label: "團號",
field: "no" field: "TCNUM"
}, },
{ name: "name", label: "團體名稱", align: "left", field: "name" },
{ name: "days", label: "天數", align: "left", field: "days" },
{ name: "flight", label: "航班", align: "left", field: "flight" },
{ name: "price", label: "售價", align: "left", field: "price" },
{ name: "site", label: "狀態", align: "left", field: "site" },
{ name: "id", label: "報名", align: "left", field: "id" }
],
data: [
{ {
id: 1, name: "Title",
travelDate: "2021-01-01", label: "團體名稱",
no: "EUR2021011", align: "left",
name: field: "Title"
"魅力歐洲～法比荷、最愛羅浮宮、特色三遊船、絕美羊角村、魅力風車城8日",
days: 11,
price: 10500.0,
site: 5,
substitute: true
}, },
{ {
id: 2, name: "DayNum",
travelDate: "2021-01-05", label: "天數",
no: "EUR2021012", align: "left",
name: field: "DayNum"
"魅力歐洲～法比荷、最愛羅浮宮、特色三遊船、絕美羊角村、魅力風車城8日",
days: 11,
price: 14999.0,
site: 5,
substitute: true
}, },
{ {
id: 3, name: "FlightStatus",
travelDate: "2021-01-21", label: "航班",
no: "EUR2021013", align: "left",
name: "魅力歐洲～法比荷、最愛羅浮宮、特色三遊船、絕美羊角村8日", field: "FlightStatus"
days: 11,
price: 15500.0,
site: 5,
substitute: true
}, },
{ {
id: 4, name: "Price",
travelDate: "2021-01-30", label: "售價",
no: "EUR2021014", align: "left",
name: field: "Price"
"魅力歐洲～法比荷、最愛羅浮宮、特色三遊船、絕美羊角村、魅力風車城、無敵海上美景8日", },
days: 11, {
price: 12500.0, name: "Seat",
site: 5, label: "狀態",
substitute: true align: "left",
field: "Seat"
},
{
name: "TCID",
label: "報名",
align: "left",
field: "TCID"
} }
] ],
}; };
}, },
methods: { methods: {
formatLabel(firstRowIndex, endRowIndex, totalRowsNumber) { formatLabel(firstRowIndex, endRowIndex, totalRowsNumber) {
return ""; return "";
} }
} },
}; };
</script> </script>
<style> <style>
.my-th-head { .my-th-head {
font-size: 18px !important; font-size: 18px !important;
font-weight: 600 !important; font-weight: 600 !important;
} }
.download1 .group-title {
.download1 .group-title {
margin: 0; margin: 0;
padding: 0; padding: 0;
line-height: unset; line-height: unset;
...@@ -258,11 +211,14 @@ export default { ...@@ -258,11 +211,14 @@ export default {
text-align: center; text-align: center;
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
} }
.travel-list th {
.travel-list th {
font-size: 16px !important; font-size: 16px !important;
} }
.travel-list td {
.travel-list td {
font-size: 14px !important; font-size: 14px !important;
} }
</style> </style>
src/pages/About.vue
View file @ 388ccf00
...@@ -93,6 +93,8 @@ ...@@ -93,6 +93,8 @@
<!--搜尋區塊(其他)search_el --> <!--搜尋區塊(其他)search_el -->
<searchel1 v-if="item.Id=='search_el'&&item.plugData.Type==1" :plugData="item.plugData"></searchel1> <searchel1 v-if="item.Id=='search_el'&&item.plugData.Type==1" :plugData="item.plugData"></searchel1>
<!--出團表group -->
<travelList v-if="item.Id=='group'" :plugData="item.plugData"></travelList>
</div> </div>
</template> </template>
...@@ -100,6 +102,10 @@ ...@@ -100,6 +102,10 @@
</template> </template>
<script> <script>
//出團表 group -Start
import travelList from "../components/group/travel-list";
//出團表 group -End
//搜尋區塊(輪播橫)search_s -Start //搜尋區塊(輪播橫)search_s -Start
import searchs1 from "../components/search_s/search_s1"; import searchs1 from "../components/search_s/search_s1";
import searchs2 from "../components/search_s/search_s2"; import searchs2 from "../components/search_s/search_s2";
...@@ -224,7 +230,8 @@ ...@@ -224,7 +230,8 @@
diyTitle, diyTitle,
paragraph, paragraph,
photo, photo,
diyForm diyForm,
travelList
}, },
data() { data() {
return { return {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment