Skip to content

M
million
Commit 41473c5b authored by zhengke's avatar zhengke
Browse files
Options

增加

parent 3bd7db05
Hide whitespace changes
Inline Side-by-side
Showing with 618 additions and 0 deletions
quasar.conf.js
View file @ 41473c5b
......@@ -148,6 +148,7 @@ module.exports = function( /* ctx */ ) {
'QCardActions',
'QCheckbox',
'QPagination',
'QRadio',
],
directives: [
......
src/pages/usercenter/passengerList.vue 0 → 100644
View file @ 41473c5b
<style>
.order-buy {
display: flex;
flex-wrap: wrap;
padding: 30px 20px 50px;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.order-buy .tab-list {
width: 100%;
margin-bottom: 30px;
text-align: center;
border-bottom: 1px solid #eee;
}
.order-buy .tab-list li {
position: relative;
padding: 0 20px;
height: 70px;
line-height: 70px;
color: #666;
font-size: 16px;
list-style-type: none;
display: inline-block;
vertical-align: middle;
}
.order-buy .is-checked {
color: #3ba4ff
}
.order-buy .is-checked::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
width: 100%;
height: 2px;
background-color: #00afff;
}
.clearfix:after {
content: "\0020";
display: block;
height: 0;
clear: both;
}
.Order_content {
width: 100%;
display: flex;
justify-content: space-between;
}
.order-info {
margin-right: 20px;
/* float: left; */
width: calc(100% - 300px - 20px);
}
.order-right {
padding: 30px;
width: 300px;
height: 320px;
font-size: 15px;
background-color: #fff;
border: 1px solid #e5e5e5;
}
.order-info-block {
margin-bottom: 30px;
padding: 40px 30px;
background-color: #fff;
border: 1px solid #e5e5e5;
}
.order_tour_title {
width: 100%;
margin-bottom: 15px;
font-size: 22px;
font-weight: bold;
}
.tour-desc {
margin-bottom: 0;
display: flex;
flex-wrap: wrap;
}
.tour-cover {
margin-right: 20px;
width: 320px;
}
@media only screen and (max-width: 1080px) {
.order-buy .tour-desc .tour-cover {
width: 280px;
}
.tour-desc .tour_content {
width: calc(100% - 280px - 20px);
}
}
.tour-cover .tour_img {
padding-bottom: 60%;
background-size: cover;
}
.tour-desc .tour_content {
width: calc(100% - 320px - 20px);
}
.tour-detail-list {
margin-bottom: 8px;
font-size: 15px;
color: #666;
padding: 0;
margin-top: 0;
}
.tour-detail-list li {
margin-bottom: 2px;
display: flex;
line-height: 2;
list-style-type: none;
}
.tour-detail-list li span {
font-weight: bold;
padding-right: 15px;
color: #333;
white-space: nowrap;
}
.warning-bar {
margin-bottom: 20px;
padding: 15px 20px;
font-weight: 700;
background-color: #fffde7;
font-size: 14px;
color: #ff9800;
display: flex;
align-items: center;
}
.order-info-block .buy-title {
margin-bottom: 5px;
font-size: 20px;
font-weight: bold;
}
.dot_list {
font-size: 15px;
line-height: 1.8;
padding-left: 20px;
list-style-type: disc;
}
.account_labelName {
margin: 20px 0 10px 0;
font-size: 15px;
}
.order-buy .q-field__control {
height: 46px;
}
.order-buy .q-field__control {
min-height: 46px !important;
}
.order-buy .q-field__native {
min-height: 46px;
}
.order-buy .q-field__marginal {
height: 46px;
}
.buy_aside {}
.aside-title {
font-size: 18px;
margin-bottom: 10px;
font-weight: bold;
}
.passRadio {
padding: 0 4px;
border-bottom: 1px solid #eee;
}
.passRadio:last-child {
border: 0;
}
.member-data {
margin: 15px 0;
border: 1px solid #eee;
}
.data-header {
position: relative;
padding: 0 20px;
line-height: 60px;
background-color: #fafafa;
cursor: pointer;
}
.data-header .gustNum {
font-size: 20px;
font-weight: bold;
}
.data-header i {
position: absolute;
top: 0;
right: 20px;
font-size: 23px;
}
.order-buy .data-content {
padding: 30px;
}
.remind-question {
margin: 20px 0 10px 0;
font-size: 16px;
}
.tip-text {
margin-bottom: 10px;
font-size: 14px;
color: #999;
}
.warning-bar2 {
margin: 10px 0 20px 0;
padding: 15px 20px;
font-weight: 700;
background-color: #fffde7;
color: #ff9800;
}
</style>
<template>
<q-page>
<div class="order-buy">
<ul class="tab-list">
<li>01. 填寫訂購單</li>
<li>02. 付款方式</li>
<li class="is-checked">03. 填寫旅客資料</li>
</ul>
<div class="Order_content">
<div class="order-info">
<div class="order-info-block">
<div class="order_tour_title">
【台灣虎航 早去午回】東京自由行5日 淺草集市廣場飯店Agora Place Asakusa(含稅、飯店早餐、WIFI機)[含稅]
</div>
<div class="tour-desc">
<div class="tour-cover">
<div class="tour_img"
style='background-image: url("http://imgfile.oytour.com/static/websiteimg/default_scence2.jpg");'>
</div>
</div>
<div class="tour_content">
<ul class="tour-detail-list">
<li>
<span>銷售說明</span>0
</li>
<li>
<span>訂單編號</span>B575187833
</li>
<li>
<span>旅遊日期</span>2020-10-13
</li>
<li>
<span>出發成員</span>1位成人 (共1人)
</li>
<li>
<span>團費總計</span>$15900
</li>
</ul>
</div>
</div>
</div>
<div class="warning-bar">
<q-icon name="warning" class="text-orange" style="font-size: 1.5rem;" />
所有資料確認送出後將無法修改，如需修改資料請洽客服。
</div>
<!-- 旅客资料开始 -->
<div class="order-info-block" v-if="shape==1">
<div class="buy-title">旅客資料</div>
<div class="member-data" v-for="(item,index) in passengerList" :key="index">
<div class="data-header">
<div class="gustNum">旅客 1</div>
<i class="iconfont iconarrow-top"></i>
</div>
<div class="data-content">
<div class="row q-col-gutter-x-xs q-col-gutter-y-lg">
<div class="account-group col-6">
<div class="account_labelName">中文姓</div>
<q-input outlined v-model="item.SurName" class="bg-grey-1" />
</div>
<div class="account-group col-6">
<div class="account_labelName">中文名</div>
<q-input outlined v-model="item.Name" class="bg-grey-1" />
</div>
</div>
<div class="row q-col-gutter-x-xs q-col-gutter-y-lg">
<div class="account-group col-6">
<div class="account_labelName">護照姓 ( 英文 )</div>
<q-input outlined v-model="item.ESurName" class="bg-grey-1" />
</div>
<div class="account-group col-6">
<div class="account_labelName">護照名 ( 英文 )</div>
<q-input outlined v-model="item.EName" class="bg-grey-1" />
</div>
</div>
<div class="row q-col-gutter-x-xs q-col-gutter-y-lg">
<div class="account-group col-6">
<div class="account_labelName">身分證字號</div>
<q-input outlined v-model="item.IdCard" class="bg-grey-1" />
</div>
</div>
<div class="row q-col-gutter-x-xs q-col-gutter-y-lg">
<div class="account-group col-6">
<div class="account_labelName">出生日期</div>
<q-input outlined v-model="item.Birthday" class="bg-grey-1" />
</div>
<div class="account-group col-6">
<div class="account_labelName">性別</div>
<q-select filled v-model="item.Sex" :options="sexArray" emit-value map-options>
</q-select>
</div>
</div>
<div class="remind-question">
是否服役中、為役男身份或接近役齡？
</div>
<div class="tip-text">
*服役中包含替代役，役男身份指年滿18歲至服兵役前，接近役齡指年滿16歲至18歲，若為免役者請勾選否。
</div>
<div>
<div class="q-gutter-sm">
<q-radio v-model="item.inservice" :val="1" label="否" />
<q-radio v-model="item.inservice" :val="2" label="服役中" />
<q-radio v-model="item.inservice" :val="3" label="役男身份" />
<q-radio v-model="item.inservice" :val="4" label="接近役齡" />
</div>
</div>
<div class="warning-bar2" v-if="item.inservice>1">
<div>請於出團前七天內上傳符合以下規定之護照畫面：</div>
<ol class="dot_list" style="font-size:14px;">
<li v-if="item.inservice==2">若您正在服役，出國必須蓋兩種章： 【持照人出國應經核准】【 年 月 日之前同意出國 字第 號核准】。</li>
<li v-if="item.inservice==3">若您是役男者，出國前必須前往戶籍所在地之鄉鎮市區公所兵役科(課)蓋兩種章：【持照人出國應經核准尚未履行兵役義務】【役男出國核准 年 月
日前一次有效 縣 市公所】</li>
<li v-if="item.inservice==4">若您是役齡男子，出國前必須前往戶籍所在地之鄉鎮市區公所兵役科(課)一種章：【尚未履行兵役義務】。</li>
</ol>
</div>
<div class="row q-col-gutter-x-xs q-col-gutter-y-lg">
<div class="account-group col-6">
<div class="account_labelName">護照號碼</div>
<q-input outlined v-model="item.PassportNo" class="bg-grey-1" />
</div>
<div class="account-group col-6">
<div class="account_labelName">護照效期截止日期</div>
<q-input filled v-model="item.PassportExpiry" mask="date">
<template v-slot:append>
<q-icon name="event" class="cursor-pointer">
<q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
<q-date v-model="item.PassportExpiry" @input="() => $refs.qDateProxy.hide()" />
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</div>
</div>
<div class="row q-col-gutter-x-xs q-col-gutter-y-lg">
<div class="account-group col-6">
<div class="account_labelName">機上餐食</div>
<q-select filled v-model="item.airfood" :options="airFood" emit-value map-options>
</q-select>
</div>
<div class="account-group col-6">
<div class="account_labelName">旅程餐食</div>
<q-select filled v-model="item.tripfood" :options="airFood" emit-value map-options>
</q-select>
</div>
</div>
<div class="row q-col-gutter-x-xs q-col-gutter-y-lg">
<div class="account-group col-12">
<div class="account_labelName">其他備註</div>
<q-input filled type="textarea" v-model="item.otherRemark" />
</div>
</div>
</div>
</div>
</div>
<!-- 旅客资料结束 -->
<!-- 收件资料开始 -->
<div class="order-info-block" v-if="shape==2">
<div class="buy-title">收件資料</div>
<ol class="dot_list">
<li>請指定一位聯絡人並提供正確聯絡資訊，領隊將以電話聯絡做行前說明與重要事項通知。</li>
<li>請提供可收掛號郵件之地址，以利資料郵遞。</li>
</ol>
<div class="row q-col-gutter-x-xs q-col-gutter-y-lg">
<div class="account-group col-6">
<div class="account_labelName">姓名</div>
<q-input outlined v-model="receivedMsg.Name" class="bg-grey-1" />
</div>
<div class="account-group col-6">
<div class="account_labelName">電子信箱</div>
<q-input outlined v-model="receivedMsg.Email" class="bg-grey-1" />
</div>
</div>
<div class="row q-col-gutter-x-xs q-col-gutter-y-lg">
<div class="account-group col-6">
<div class="account_labelName">手機號碼</div>
<q-input outlined v-model="receivedMsg.Phone" />
</div>
<div class="account-group col-6">
<div class="account_labelName">說明會資料寄送地址</div>
<div class="row q-col-gutter-x-xs q-col-gutter-y-lg">
<div class="account-group col-4">
<q-input outlined v-model="receivedMsg.zipCode" class="bg-grey-1" />
</div>
<div class="account-group col-4">
<q-select filled v-model="receivedMsg.city" :options="cityArray" emit-value map-options>
</q-select>
</div>
<div class="account-group col-4">
<q-select filled v-model="receivedMsg.area" :options="areaArray" emit-value map-options>
</q-select>
</div>
</div>
</div>
</div>
<div class="row q-col-gutter-x-xs q-col-gutter-y-lg">
<div class="account-group col-12">
<div class="account_labelName">手機號碼</div>
<q-input outlined placehoder="地址" v-model="receivedMsg.Address" />
</div>
</div>
<div class="row q-col-gutter-x-xs q-col-gutter-y-lg">
<div class="account-group col-12">
<q-btn color="primary" style="width:100%;height:50px;margin-top:20px;" label="確認送出" />
</div>
</div>
</div>
<!-- 收件资料结束 -->
<!-- 收据开立开始 -->
<div class="order-info-block" v-if="shape==3">
<div class="buy-title">收據開立</div>
<ol class="dot_list">
<li>據財政部規定，旅行業為特殊行業，因此使用的是【代收轉付收據】而不開立一般的【統一發票】。
依台財稅字第10504544630號，以電子收據方式開立旅行業代收轉付收據，並透過電子郵件【旅行業代收轉付電子收據開立通知信】寄送給收據收件人，【電子代收轉付收據】一樣可以申請報帳，如需紙本收據，可直接經由電子郵件中的【代收轉付明細】連結查詢並列印，請注意！列印功能僅能使用一次。
</li>
<li>
【代收轉付收據】若須「抬頭」、「統編」務請於規定時間內提供收據資料；團體行程(包含團體自由行)最遲請於出發前10個工作日主動提供，出發日在10天內的團體行程，請於付款後24小時內提供收據資料；其他商品請於付款後3個工作日內提供。未於期限內提供者，將以整筆訂單且無抬頭統編之方式開立。
</li>
<li>收據資料送出後如欲修改，請於收到收據後當月聯絡客服人員。</li>
</ol>
<div class="row q-col-gutter-x-xs q-col-gutter-y-lg">
<div class="account-group col-6">
<q-select filled v-model="receiptMsg.receipType" :options="recepArray" emit-value map-options>
</q-select>
</div>
</div>
<div class="row q-col-gutter-x-xs q-col-gutter-y-lg" v-if="receiptMsg.receipType==1">
<div class="account-group col-6">
<div class="account_labelName">抬頭</div>
<q-input outlined v-model="receiptMsg.head" />
</div>
<div class="account-group col-6">
<div class="account_labelName">統一編號</div>
<q-input outlined v-model="receiptMsg.number" />
</div>
</div>
<div class="row q-col-gutter-x-xs q-col-gutter-y-lg">
<div class="account-group col-6">
<div class="account_labelName">收件人</div>
<q-input outlined v-model="receiptMsg.recipient" />
</div>
<div class="account-group col-6">
<div class="account_labelName">電子信箱</div>
<q-input outlined v-model="receiptMsg.email" />
</div>
</div>
<div class="row q-col-gutter-x-xs q-col-gutter-y-lg">
<div class="account-group col-12">
<q-btn color="primary" style="width:100%;height:50px;margin-top:20px;" label="確認送出" />
</div>
</div>
</div>
<!-- 收据开立结束 -->
</div>
<div class="order-right">
<div class="buy_aside">
<div class="aside-title">資料填寫進度 (0/3)</div>
<div class="q-gutter-sm">
<div class="passRadio">
<q-radio v-model="shape" :val="1" label="旅客資料" />
</div>
<div class="passRadio">
<q-radio v-model="shape" :val="2" label="收件資料" />
</div>
<div class="passRadio">
<q-radio v-model="shape" :val="3" label="收據開立" />
</div>
</div>
<q-btn color="white" text-color="black" style="width:100%;height:40px;margin-top:10px;" label="回訂單明細" />
<q-btn color="primary" style="width:100%;height:40px;margin-top:15px;" label="前往付款" />
</div>
</div>
</div>
</div>
</q-page>
</template>
<script>
export default {
props: [],
data() {
return {
//收件资料msg
receivedMsg: {
Name: '', //聯絡人姓名
Email: '', //電子信箱
Phone: '', //手機號碼
zipCode: '', //邮政编码
city: '', //市
area: '', //区
Address: '' //地址
},
//台湾市列表
cityArray: [],
//台湾区列表
areaArray: [],
//收據開立Msg
receiptMsg: {
receipType: 1, //是否需要抬头
head: '', //抬頭
number: '', //統一編號
recipient: '', //收件人
email: '' //電子信箱
},
//是否需要抬头下拉
recepArray: [{
value: 1,
label: '需要有抬頭統編的收據'
}, {
value: 2,
label: '一般收據'
}],
//单选显示哪个
shape: 1,
passengerList: [{
SurName: '', // 中文姓
Name: '', // 中文名
ESurName: '', //護照姓 ( 英文 )
EName: '', //護照名 ( 英文 )
IdCard: '', //身份证号码
Birthday: '', //出生日期
Sex: 1, //性别
inservice: 1, //是否服役中
PassportNo: '', //护照号
PassportExpiry: '', // 護照效期截止日期
airfood: 1, //机上餐食
tripfood: 1, //旅程餐食
otherRemark: '' //其他备注
}],
date: '', //要删的
//性别
sexArray: [{
value: 1,
label: "男"
},
{
value: 2,
label: "女"
},
],
//餐食
airFood: [{
value: 1,
label: "葷食"
},
{
value: 2,
label: "素食"
}
]
};
},
created() {
},
mounted() {
},
methods: {
},
};
</script>
src/router/routes.js
View file @ 41473c5b
......@@ -58,6 +58,11 @@ const routes = [{
component: () =>
import('pages/usercenter/orderlistInfo.vue')
},
{
path: '/passengerList/:id', //旅客名单
component: () =>
import('pages/usercenter/passengerList.vue')
},
{
path: '/register', //用户注册
component: () =>
......
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