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 @@
<div class="q-mt-lg q-mb-lg">
<div class="section-block download1">
<div class="group-title">9月歐洲遊</div>
<q-table
:pagination.sync="paginationDesktop"
: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="沒有找到適合的團期"
v-if="!$q.screen.xs"
>
<q-table :pagination.sync="paginationDesktop" :data="plugData.GroupSelfItems" :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="[]" TCNUM-data-labe="沒有找到適合的團期" v-if="!$q.screen.xs">
<template v-slot:body="props">
<q-tr :props="props">
<q-td key="travelDate" :props="props">
<span class="text-red">{{ props.row.travelDate }}</span>
<q-td key="StartDate" :props="props">
<span class="text-red">{{ props.row.StartDate }}</span>
</q-td>
<q-td key="no" :props="props">{{ props.row.no }}</q-td>
<q-td key="name" :props="props">
<q-td key="TCNUM" :props="props">{{ props.row.TCNUM }}</q-td>
<q-td key="Title" :props="props">
<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>
</q-td>
<q-td key="days" :props="props">{{ props.row.days }}</q-td>
<q-td key="flight" :props="props">
<q-td key="DayNum" :props="props">{{ props.row.DayNum }}</q-td>
<q-td key="FlightStatus" :props="props">
<!--v-if="props.row.FlightStatus"-->
<q-icon color="grey" name="iconfont iconhangbanxinxicopy" size="14" />
</q-td>
<q-td key="price" :props="props">
<q-td key="Price" :props="props">
<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 key="site" :props="props">
<q-td key="Seat" :props="props">
<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)}"
>{{ props.row.site>0?'有名額':(props.row.site==0 && props.row.substitute?'可候補':'名額已滿') }}</span>
: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>
</q-td>
<q-td key="id" :props="props">
<q-btn
type="a"
href="/start/pick-quasar-flavour"
target="_blank"
: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 key="TCID" :props="props">
<q-btn type="a" @click="OpenNewUrl(props.row.LinkUrl)" target="_blank"
:label="props.row.Seat>0||props.row.Substitute?'我有興趣':'無法預訂'"
:color="props.row.Seat>0||props.row.Substitute?'indigo':'grey'" rounded unelevated
:disable="props.row.Seat==0&&props.row.Substitute" />
</q-td>
</q-tr>
</template>
</q-table>
<q-table
:pagination.sync="pagination"
v-if="$q.screen.xs"
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="沒有找到適合的團期"
>
<q-table :pagination.sync="pagination" v-if="$q.screen.xs" grid :data="plugData.GroupSelfItems" :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="[]" TCNUM-data-labe="沒有找到適合的團期">
<template v-slot:item="props">
<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>
......@@ -77,33 +48,34 @@
<q-item>
<q-item-section>
<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>
<q-item>
<q-item-section>
<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>
<q-item>
<q-item-section>
<q-item-label class="text-grey">團體名稱</q-item-label>
<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-section>
</q-item>
<q-item>
<q-item-section>
<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>
<q-item>
<q-item-section>
<q-item-label class="text-grey">航班</q-item-label>
<q-item-label>
<!--v-if="props.row.FlightStatus"-->
<q-icon color="grey" name="iconfont iconhangbanxinxicopy" size="14" />
</q-item-label>
</q-item-section>
......@@ -113,7 +85,7 @@
<q-item-label class="text-grey">售價</q-item-label>
<q-item-label>
<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>
</q-item-label>
</q-item-section>
......@@ -123,23 +95,16 @@
<q-item-label class="text-grey">狀態</q-item-label>
<q-item-label>
<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)}"
>{{ props.row.site>0?'有名額':(props.row.site==0 && props.row.substitute?'可候補':'名額已滿') }}</span>
: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>
</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-btn
type="a"
href="/start/pick-quasar-flavour"
target="_blank"
: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-btn type="a" @click="OpenNewUrl(props.row.LinkUrl)" target="_blank"
:label="props.row.Seat>0||props.row.Substitute?'我有興趣':'無法預訂'"
:color="props.row.Seat>0||props.row.Substitute?'indigo':'grey'" rounded unelevated
:disable="props.row.Seat==0&&props.row.Substitute" />
</q-item-section>
</q-item>
</q-list>
......@@ -152,117 +117,108 @@
</template>
<script>
export default {
data() {
return {
pagination: {
sortBy: "id",
descending: false,
page: 1,
rowsPerPage: 1
},
paginationDesktop: {
sortBy: "id",
descending: false,
page: 1,
rowsPerPage: 5
},
filter: "",
columns: [
{
name: "travelDate",
required: true,
label: "出發日期",
align: "left",
sortable: true
export default {
props: ["plugData"],
data() {
return {
pagination: {
sortBy: "id",
descending: false,
page: 1,
rowsPerPage: 1
},
{
name: "no",
align: "center",
label: "團號",
field: "no"
paginationDesktop: {
sortBy: "id",
descending: false,
page: 1,
rowsPerPage: 5
},
{ 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,
travelDate: "2021-01-01",
no: "EUR2021011",
name:
"魅力歐洲～法比荷、最愛羅浮宮、特色三遊船、絕美羊角村、魅力風車城8日",
days: 11,
price: 10500.0,
site: 5,
substitute: true
},
{
id: 2,
travelDate: "2021-01-05",
no: "EUR2021012",
name:
"魅力歐洲～法比荷、最愛羅浮宮、特色三遊船、絕美羊角村、魅力風車城8日",
days: 11,
price: 14999.0,
site: 5,
substitute: true
},
{
id: 3,
travelDate: "2021-01-21",
no: "EUR2021013",
name: "魅力歐洲～法比荷、最愛羅浮宮、特色三遊船、絕美羊角村8日",
days: 11,
price: 15500.0,
site: 5,
substitute: true
},
{
id: 4,
travelDate: "2021-01-30",
no: "EUR2021014",
name:
"魅力歐洲～法比荷、最愛羅浮宮、特色三遊船、絕美羊角村、魅力風車城、無敵海上美景8日",
days: 11,
price: 12500.0,
site: 5,
substitute: true
}
]
};
},
methods: {
formatLabel(firstRowIndex, endRowIndex, totalRowsNumber) {
return "";
}
}
};
filter: "",
columns: [{
name: "StartDate",
required: true,
label: "出發日期",
align: "left",
sortable: true
},
{
name: "TCNUM",
align: "center",
label: "團號",
field: "TCNUM"
},
{
name: "Title",
label: "團體名稱",
align: "left",
field: "Title"
},
{
name: "DayNum",
label: "天數",
align: "left",
field: "DayNum"
},
{
name: "FlightStatus",
label: "航班",
align: "left",
field: "FlightStatus"
},
{
name: "Price",
label: "售價",
align: "left",
field: "Price"
},
{
name: "Seat",
label: "狀態",
align: "left",
field: "Seat"
},
{
name: "TCID",
label: "報名",
align: "left",
field: "TCID"
}
],
};
},
methods: {
formatLabel(firstRowIndex, endRowIndex, totalRowsNumber) {
return "";
}
},
};
</script>
<style>
.my-th-head {
font-size: 18px !important;
font-weight: 600 !important;
}
.download1 .group-title {
margin: 0;
padding: 0;
line-height: unset;
margin-bottom: 20px;
font-size: 24px;
text-align: center;
font-weight: 600;
text-align: center;
}
.travel-list th {
font-size: 16px !important;
}
.travel-list td {
font-size: 14px !important;
}
</style>
\ No newline at end of file
.my-th-head {
font-size: 18px !important;
font-weight: 600 !important;
}
.download1 .group-title {
margin: 0;
padding: 0;
line-height: unset;
margin-bottom: 20px;
font-size: 24px;
text-align: center;
font-weight: 600;
text-align: center;
}
.travel-list th {
font-size: 16px !important;
}
.travel-list td {
font-size: 14px !important;
}
</style>
src/pages/About.vue
View file @ 388ccf00
......@@ -93,6 +93,8 @@
<!--搜尋區塊(其他)search_el -->
<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>
</template>
......@@ -100,8 +102,12 @@
</template>
<script>
//出團表 group -Start
import travelList from "../components/group/travel-list";
//出團表 group -End
//搜尋區塊(輪播橫)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 searchs3 from "../components/search_s/search_s3";
//搜尋區塊(輪播橫)search_s -End
......@@ -224,7 +230,8 @@
diyTitle,
paragraph,
photo,
diyForm
diyForm,
travelList
},
data() {
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