Skip to content

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

页面修改

parent cb10135f
Hide 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,117 +117,108 @@ ...@@ -152,117 +117,108 @@
</template> </template>
<script> <script>
export default { export default {
data() { props: ["plugData"],
return { data() {
pagination: { return {
sortBy: "id", pagination: {
descending: false, sortBy: "id",
page: 1, descending: false,
rowsPerPage: 1 page: 1,
}, rowsPerPage: 1
paginationDesktop: {
sortBy: "id",
descending: false,
page: 1,
rowsPerPage: 5
},
filter: "",
columns: [
{
name: "travelDate",
required: true,
label: "出發日期",
align: "left",
sortable: true
}, },
{ paginationDesktop: {
name: "no", sortBy: "id",
align: "center", descending: false,
label: "團號", page: 1,
field: "no" rowsPerPage: 5
}, },
{ name: "name", label: "團體名稱", align: "left", field: "name" }, filter: "",
{ name: "days", label: "天數", align: "left", field: "days" }, columns: [{
{ name: "flight", label: "航班", align: "left", field: "flight" }, name: "StartDate",
{ name: "price", label: "售價", align: "left", field: "price" }, required: true,
{ name: "site", label: "狀態", align: "left", field: "site" }, label: "出發日期",
{ name: "id", label: "報名", align: "left", field: "id" } align: "left",
], sortable: true
data: [ },
{ {
id: 1, name: "TCNUM",
travelDate: "2021-01-01", align: "center",
no: "EUR2021011", label: "團號",
name: field: "TCNUM"
"魅力歐洲～法比荷、最愛羅浮宮、特色三遊船、絕美羊角村、魅力風車城8日", },
days: 11, {
price: 10500.0, name: "Title",
site: 5, label: "團體名稱",
substitute: true align: "left",
}, field: "Title"
{ },
id: 2, {
travelDate: "2021-01-05", name: "DayNum",
no: "EUR2021012", label: "天數",
name: align: "left",
"魅力歐洲～法比荷、最愛羅浮宮、特色三遊船、絕美羊角村、魅力風車城8日", field: "DayNum"
days: 11, },
price: 14999.0, {
site: 5, name: "FlightStatus",
substitute: true label: "航班",
}, align: "left",
{ field: "FlightStatus"
id: 3, },
travelDate: "2021-01-21", {
no: "EUR2021013", name: "Price",
name: "魅力歐洲～法比荷、最愛羅浮宮、特色三遊船、絕美羊角村8日", label: "售價",
days: 11, align: "left",
price: 15500.0, field: "Price"
site: 5, },
substitute: true {
}, name: "Seat",
{ label: "狀態",
id: 4, align: "left",
travelDate: "2021-01-30", field: "Seat"
no: "EUR2021014", },
name: {
"魅力歐洲～法比荷、最愛羅浮宮、特色三遊船、絕美羊角村、魅力風車城、無敵海上美景8日", name: "TCID",
days: 11, label: "報名",
price: 12500.0, align: "left",
site: 5, field: "TCID"
substitute: true }
} ],
]
}; };
}, },
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 {
margin: 0; .download1 .group-title {
padding: 0; margin: 0;
line-height: unset; padding: 0;
margin-bottom: 20px; line-height: unset;
font-size: 24px; margin-bottom: 20px;
text-align: center; font-size: 24px;
font-weight: 600; text-align: center;
text-align: center; font-weight: 600;
} text-align: center;
.travel-list th { }
font-size: 16px !important;
} .travel-list th {
.travel-list td { font-size: 16px !important;
font-size: 14px !important; }
}
</style> .travel-list td {
\ No newline at end of file font-size: 14px !important;
}
</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,8 +102,12 @@ ...@@ -100,8 +102,12 @@
</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";
import searchs3 from "../components/search_s/search_s3"; import searchs3 from "../components/search_s/search_s3";
//搜尋區塊(輪播橫)search_s -End //搜尋區塊(輪播橫)search_s -End
...@@ -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