Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
45eca518 by joe
Options

预约

1 parent dace31a0
Inline Side-by-side
Showing 11 changed files with 639 additions and 32 deletions
......@@ -43,7 +43,7 @@ module.exports = {
path: "/custom/product",
list: [{
name: "Contact us",
path: ""
path: "/custom/service?q=m1"
},
{
name: "Pay premium",
......@@ -51,27 +51,27 @@ module.exports = {
},
{
name: "Query policy",
path: "/custom/service"
path: "/custom/service?q=m3"
},
{
name: "Change policy",
path: ""
path: "/custom/service?q=m4"
},
{
name: "Claim report",
path: ""
path: "/custom/service?q=m5"
},
{
name: "Reservation service",
path: "/reservation"
path: "/custom/service?q=m6"
},
{
name: "Suggestions",
path: ""
path: "/custom/service?q=m7"
},
{
name: "Common form",
path: ""
path: "/custom/service?q=m8"
},
]
},
......
......@@ -43,7 +43,7 @@ module.exports = {
path: "/custom/product",
list: [{
name: "聯系我們",
path: ""
path: "/custom/service?q=m1"
},
{
name: "繳付保費",
......@@ -51,27 +51,27 @@ module.exports = {
},
{
name: "保單查詢",
path: "/custom/service"
path: "/custom/service?q=m3"
},
{
name: "保單變更",
path: ""
path: "/custom/service?q=m4"
},
{
name: "理賠申請",
path: ""
path: "/custom/service?q=m5"
},
{
name: "預約服務",
path: "/reservation"
path: "/custom/service?q=m6"
},
{
name: "投訴受理",
path: ""
path: "/custom/service?q=m7"
},
{
name: "常用表格",
path: ""
path: "/custom/service?q=m8"
},
]
},
......
......@@ -43,7 +43,7 @@ module.exports = {
path: "/custom/product",
list: [{
name: "联系我们",
path: ""
path: "/custom/service?q=m1"
},
{
name: "缴付保费",
......@@ -51,27 +51,27 @@ module.exports = {
},
{
name: "保单查询",
path: "/custom/service"
path: "/custom/service?q=m3"
},
{
name: "保单变更",
path: ""
path: "/custom/service?q=m4"
},
{
name: "理赔申请",
path: ""
path: "/custom/service?q=m5"
},
{
name: "预约服务",
path: "/reservation"
path: "/custom/service?q=m6"
},
{
name: "投诉受理",
path: ""
path: "/custom/service?q=m7"
},
{
name: "常用表格",
path: ""
path: "/custom/service?q=m8"
},
]
},
......
import api from '@/api/api'
import {
httpGet,
httpPost
} from '@/api/fetch-api.js'
export default {
data() {
return {
key: 'value',
dataList: [],
curIndex: 0,
}
},
components: {},
computed: {
locale() {
return this.$i18n.locale || 'tc';
},
i18n() {
return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
},
},
methods: {
onOverHandler(val) {
this.curIndex = val;
},
initData() {
let i18n = this.$i18n.locale;
let list = [{
tit: "亲临客服中心付款",
type: "",
}, {
tit: "网银付款",
type: "",
}, {
tit: "电汇付款",
type: "",
}, {
tit: "柜员机付款",
type: "",
}, {
tit: "「缴费灵」付款",
type: "",
}, {
tit: "香港邮政局",
type: "",
}];
if (i18n != 'zh') {
list = [{
tit: "親臨客服中心付款",
type: "",
}, {
tit: "網銀付款",
type: "",
}, {
tit: "電匯付款",
type: "",
}, {
tit: "櫃員機付款",
type: "",
}, {
tit: "「繳費靈」付款",
type: "",
}, {
tit: "香港郵政局",
type: "",
}];
}
this.$set(this, 'dataList', list);
}
},
mounted() {
this.initData();
},
created() {
}
}
@import '@/styles/_support';
.content {
}
.top-space {
height: 2.25rem;
}
.box {
border: solid 1px #f2f2f2;
background-color: #ffffff;
@extend .bb;
padding: 4.5rem 1.75rem 3.5rem;
border-bottom: none;
@include border-top-radius(.75rem);
}
.payment {
min-height: 26rem;
&-nav {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
&-item {
@extend .pointer;
@include border-top-radius(.5rem);
display: flex;
justify-content: center;
align-items: center;
height: 3.75rem;
background-color: #f2f2f2;
width: 12rem;
&-icon {
margin-right: .5rem;
img {
max-height: 1.75rem;
max-width: 1.5rem;
}
}
}
.active {
color: #ffffff;
background-image: linear-gradient(to bottom, #f05f28, #f05021);
}
}
&-line {
height: 1px;
background-color: #f05a23;
}
&-cont {
margin-top: 3.5rem;
max-width: 67.5rem;
&-item {
@extend .bb;
line-height: 3;
padding: 0 1rem;
ul {
list-style-type: none;
}
li {
background-image: url('~@assets/images/payment-type/icon-li.png');
background-repeat: no-repeat;
background-position: 0rem 1.25rem;
padding-left: 1rem;
}
}
}
}
<template>
<div class="">
<div class="box">
<div class="payment">
<div class="payment-nav">
<div @mouseover="onOverHandler(index)" class="payment-nav-item" :class="{'active' : index == curIndex}" v-for="(item, index) in dataList" :key="item.id">
<div class="payment-nav-item-icon">
<img :src="require('@assets/images/payment-type/icon-payment-'+(index+1)+(index == curIndex?'-act':'')+'.png')">
</div>
{{ item.tit }}
</div>
</div>
<div class="payment-line"></div>
<div class="payment-cont">
<template v-if="locale =='zh'">
<!-- 简体 -->
<div v-if="curIndex == 0" class="payment-cont-item">
<ul>
<li>现金：缴付保费的上限为每张保单15,000美元正或等值港元。</li>
<li>支票：请以划线支票付款，抬头写上「中国平安人寿保险股份有限公司香港分公司」并于支票背面写上缴费通知书右上方的「收款单编号」</li>
<li>信用卡：您可透过信用卡以港元缴费，最高缴款额须按您的指定银行而定。</li>
<li>易办事：您可透过由「易办事」会员银行发行的提款卡及具备提款功能之信用卡透过易办事以港元缴付费用，最高缴款额须按您的指定银行而定。</li>
</ul>
客户服务中心地址：香港尖沙嘴港威永金融大楼
<br>服务时间：星期一至五上午9时至下午6时正
</div>
<div v-else-if="curIndex == 1" class="payment-cont-item">
您可通过本港银行提供的「网上缴费服务」以港元信用卡/银行账户缴交保费。详情请联络您的银行。
<ul>
<li>1.通过「本港银行港元信用卡」进行网上缴费：
<br>缴费商户 : 中国平安人寿保险股份有限公司香港分公司
<br>提款账户: 请选择「港元信用卡」
<br>账单号码: 缴费通知书上之「账单号码」
</li>
<li>2.通过「本港银行账户」进行网上缴费：
<br>缴费商户: 中国平安人寿保险股份有限公司香港分公司
<br>提款账户 :请选择往来或储蓄账户
<br>账单号码: 缴费通知书上之「收款单编号」
<br>账单类别: 11 - 缴付港元，12 - 缴付美元，13 - 缴付人民币
</li>
</ul>
</div>
<div v-else-if="curIndex == 2" class="payment-cont-item">
您可通过本港银行把保费电汇至以下银行户口。
<br>收款银行：**银行
<br>银行地址：香港***
<br>收款人名字：中国平安人寿保险股份有限公司香港分公司
<br>银行代码：***
<br>收款人账号：***-******
<br>代号：******
</div>
<div v-else-if="curIndex == 3" class="payment-cont-item">
您可通过24小时「银通」自动柜员机从您的香港银行账户转账付款。
<br>请选择服务:「缴费」>「输入商户号码」
<br>商户编号 : ****
<br>账单类别 : 01 - 新单保费 ，02 - 续期保费及征费，03 - 偿还个人保单贷款
<br>账单号码 : 缴费通知书右上方之「收款单编号」
</div>
<div v-else-if="curIndex == 4" class="payment-cont-item">
缴费灵网上服务: 请浏览www.ppshk.com
<br>缴费灵电话服务: 请致电18033 (广东话) 或18031 (英语)
<br>商户编号 : ****
<br>账单类别 : 01 - 保费及保费征费/偿还保单贷款
<br>账单号码:缴费通知书右上方之「账单号码」
</div>
<div v-else-if="curIndex == 5" class="payment-cont-item">
请携同缴费通知书到香港任何一间邮政局以现金、支票及易办事缴费。
<br>1.每笔现金交易金额的上限为港元80,000。
<br>2.易办事交易上限为港元50,000.00。
<br>3.支票交易无上限。
<br>4.支票的截数日期为星期一至五下午3时及星期六上午11时，现金/ 易办事的截数日期为星期一至六下午6时，星期日及公众假期会于下一个工作天处理，请预留最少三个工作天处理有关付款。
</div>
</template>
<template v-else>
<!-- 繁体-->
<div v-if="curIndex == 0" class="payment-cont-item">
<ul>
<li>現金：繳付保費的上限為每張保單15,000美元正或等值港元。</li>
<li>支票：請以劃線支票付款，擡頭寫上「中國平安人壽保險股份有限公司香港分公司」並於支票背面寫上繳費通知書右上方的「收款單編號」</li>
<li>信用卡：您可透過信用卡以港元繳費，最高繳款額須按您的指定銀行而定。</li>
<li>易辦事：您可透過由「易辦事」會員銀行發行的提款卡及具備提款功能之信用卡透過易辦事以港元繳付費用，最高繳款額須按您的指定銀行而定。</li>
</ul>
客戶服務中心地址：香港尖沙嘴港威永金融大樓
<br>服務時間：星期壹至五上午9時至下午6時正
</div>
<div v-else-if="curIndex == 1" class="payment-cont-item">
您可通過本港銀行提供的「網上繳費服務」以港元信用卡/銀行賬戶繳交保費。詳情請聯絡您的銀行。
<ul>
<li>1.通過「本港銀行港元信用卡」進行網上繳費：
<br>繳費商戶 : 中國平安人壽保險股份有限公司香港分公司
<br>提款賬戶: 請選擇「港元信用卡」
<br>賬單號碼: 繳費通知書上之「賬單號碼」
</li>
<li>2.通過「本港銀行賬戶」進行網上繳費：
<br>繳費商戶: 中國平安人壽保險股份有限公司香港分公司
<br>提款賬戶 :請選擇往來或儲蓄賬戶
<br>賬單號碼: 繳費通知書上之「收款單編號」
<br>賬單類別: 11 - 繳付港元，12 - 繳付美元，13 - 繳付人民幣
</li>
</ul>
</div>
<div v-else-if="curIndex == 2" class="payment-cont-item">
您可通過本港銀行把保費電匯至以下銀行戶口。
<br>收款銀行：**銀行
<br>銀行地址：香港***
<br>收款人名字：中國平安人壽保險股份有限公司香港分公司
<br>銀行代碼：***
<br>收款人賬號：***-******
</div>
<div v-else-if="curIndex == 3" class="payment-cont-item">
您可通過24小時「銀通」自動櫃員機從您的香港銀行賬戶轉賬付款。
<br>請選擇服務:「繳費」>「輸入商戶號碼」
<br>商戶編號 : ****
<br>賬單類別 : 01 - 新單保費 ，02 - 續期保費及征費，03 - 償還個人保單貸款
<br>賬單號碼 : 繳費通知書右上方之「收款單編號
</div>
<div v-else-if="curIndex == 4" class="payment-cont-item">
繳費靈網上服務: 請瀏覽www.ppshk.com
<br>繳費靈電話服務: 請致電18033 (廣東話) 或18031 (英語)
<br>商戶編號 : ****
<br>賬單類別 : 01 - 保費及保費征費/償還保單貸款
<br>賬單號碼:繳費通知書右上方之「賬單號碼」
</div>
<div v-else-if="curIndex == 5" class="payment-cont-item">
請攜同繳費通知書到香港任何壹間郵政局以現金、支票及易辦事繳費。
<br>1.每筆現金交易金額的上限為港元80,000。
<br>2.易辦事交易上限為港元50,000.00。
<br>3.支票交易無上限。
<br>4.支票的截數日期為星期壹至五下午3時及星期六上午11時，現金/ 易辦事的截數日期為星期壹至六下午6時，星期日及公眾假期會於下壹個工作天處理， 請預留最少三個工作天處理有關付款。
</div>
</template>
</div>
</div>
</div>
</div>
</template>
<script src="./payment-type.js"></script>
<style lang="scss" scoped>
@import "./payment-type.scss";
</style>
import api from '@/api/api'
import {
httpGet,
httpPost
} from '@/api/fetch-api.js'
export default {
data() {
return {
key: 'value'
}
},
components: {},
computed: {
locale() {
return this.$i18n.locale || 'tc';
},
i18n() {
return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
}
},
methods: {
initData() {}
},
mounted() {},
created() {}
}
@import '@/styles/_support';
input {
padding: 0 2.083333rem /* 25/12 */;
}
.content {
padding-bottom: 6rem;
}
.top-space {
height: 4.25rem;
}
.box {}
.form {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
&-item {
position: relative;
padding: 0 1.75rem;
margin-bottom: 2.5rem;
.label {
color: #f05a23;
display: flex;
align-items: center;
margin-bottom: .7rem;
img {
height: 1rem;
margin-right: .8rem;
}
}
.ipt-wrap {
position: relative;
// input和下拉
.ipt {
@extend .bb;
width: 100%;
height: 3.5rem;
border: solid 1px #dcdddd;
background-color: #ffffff;
border-radius: 3.5rem;
padding: 0 2.083333rem /* 25/12 */;
}
// 长文本
.textarea {
min-height: 8.75rem;
border-radius: 1rem;
@extend .bb;
padding: .75rem;
}
.down-arrow {
position: absolute;
top: 1.6rem;
right: 2rem;
}
}
}
// 不换行
&-item2 {
display: flex;
.label {
min-width: 13.75rem;
height: 2.5rem;
}
.cont {
display: flex;
.boo-btn {
width: 5.25rem;
height: 2.5rem;
line-height: 2.5rem;
border: solid 1px #dcdddd;
background-color: #ffffff;
border-radius: 2.5rem;
text-align: center;
margin: 0 0.6rem;
}
.active {
border: none;
color: #ffffff;
background-color: #f05a23;
box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
background-blend-mode: soft-light, ;
// background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #f05a23, #f05a23);
background-image: linear-gradient(to bottom, #f05f28, #f05021);
}
}
}
&-item3 {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
.label {
min-width: 13.75rem;
}
.cont {
.calendar {
img {
max-width: 96%;
}
}
}
}
}
.notice {
margin-top: 4rem;
@extend .bb;
padding: 0 1rem;
&-item {
position: relative;
line-height: 2;
letter-spacing: 1.2px;
margin-bottom: 1rem;
&-icon {
// display: inline-block;
position: absolute;
top: .5rem;
}
}
}
<template>
<div class="">
<div class="box">
<div class="gird-g form">
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<img src="@/assets/images/reservation/icon-re-name.png"> {{$t('reservation.name')}}
</div>
<div class="ipt-wrap">
<input :placeholder="$t('reservation.namePlaceholder')" class="ipt" type="text">
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<img src="@/assets/images/reservation/icon-re-contact.png">{{$t('reservation.contactType')}}
</div>
<div class="ipt-wrap">
<img class="down-arrow" src="@/assets/images/reservation/re-down-arrow.png" alt="">
<select class="ipt">
<option v-if="locale !='zh'">電話</option>
<option v-else>电话</option>
</select>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<img src="@/assets/images/reservation/icon-re-name.png">{{$t('reservation.contact')}}
</div>
<div class="ipt-wrap">
<input :placeholder="$t('reservation.contactPlaceholder')" class="ipt" type="text">
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<img src="@/assets/images/reservation/icon-re-clock.png">{{$t('reservation.reservationType')}}
</div>
<div class="ipt-wrap">
<img class="down-arrow" src="@/assets/images/reservation/re-down-arrow.png" alt="">
<select class="ipt">
<template v-if="locale =='zh'">
<option>投保咨询</option>
<option>代办保单变更</option>
</template>
<template v-else>
<option>投保咨詢</option>
<option>代辦保單變更</option>
</template>
</select>
</div>
</div>
<div class="pure-u-1 form-item">
<div class="label">
<img src="@/assets/images/reservation/icon-re-arrow-reservation.png">{{$t('reservation.reservationRemark')}}
</div>
<div class="ipt-wrap">
<textarea :placeholder="$t('reservation.reservationRemarkPlaceholder')" class="ipt textarea"></textarea>
</div>
</div>
<div class="pure-u-1 form-item form-item2">
<div class="label">
<img src="@/assets/images/reservation/icon-re-custom.png">{{$t('reservation.hkClient')}}
</div>
<div class="cont">
<div class="boo-btn pointer active">{{$t('reservation.yes')}}</div>
<div class="boo-btn pointer">{{$t('reservation.no')}}</div>
</div>
</div>
<div class="pure-u-1 form-item form-item3">
<div class="label">
<img src="@/assets/images/reservation/icon-re-calendar.png">{{$t('reservation.contactTime')}}
</div>
<div class="cont">
<div class="calendar">
<img src="@/assets/images/reservation/re-calendar.png">
</div>
</div>
</div>
</div>
</div>
<div class="box notice">
<p class="notice-item">
<img class="notice-item-icon" src="@/assets/images/reservation/icon-re-notice.png"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{$t('reservation.notice1')}}
</p>
<p class="notice-item">
<img class="notice-item-icon" src="@/assets/images/reservation/icon-re-notice.png"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{$t('reservation.notice2')}}
</p>
</div>
</div>
</template>
<script src="./reservation.js"></script>
<style lang="scss" >
@import "./reservation.scss";
</style>
......@@ -5,6 +5,8 @@ import {
} from '@/api/fetch-api.js'
import InsuranceQuery from './components/insurance-query.vue'
import reservation from './components/reservation.vue'
import PaymentType from './components/payment-type.vue'
export default {
data() {
......@@ -13,19 +15,31 @@ export default {
}
},
methods: {
initData() {},
toPath(path) {
this.$router.push({
path: path
});
}
initData() { },
toPath(path) {
this.$router.push({
path: path
});
}
},
watch: {
$route() {
let activity = this.$route.query.q;
// console.log("watch", this.$route);
if (activity) {
this.$set(this, 'activity', activity);
}
// console.log("activity === ", this.activity);
}
},
created() {
let activity = this.$route.params.p;
let activity = this.$route.query.q;
activity = activity ? activity : "m3";
this.activity = activity;
},
components: {
InsuranceQuery
InsuranceQuery,
reservation,
PaymentType
}
}
......
......@@ -22,7 +22,7 @@
<i class="m5"></i>{{$t('customService.menu5')}}
</div>
<div class="separator"></div>
<div class="menu-item" :class="{activity : activity == 'm6'}" @click="toPath('/reservation')/*activity = 'm6'*/">
<div class="menu-item" :class="{activity : activity == 'm6'}" @click="/*toPath('/reservation')*/activity = 'm6'">
<i class="m6"></i>{{$t('customService.menu6')}}
</div>
<div class="separator"></div>
......@@ -62,13 +62,17 @@
</div>
<div class="right-panel">
<div class="panel" :class="{activity : activity == 'm1'}"></div>
<div class="panel" :class="{activity : activity == 'm2'}"></div>
<div class="panel" :class="{activity : activity == 'm2'}">
<payment-type></payment-type>
<div class="empty-line"></div></div>
<div class="panel" :class="{activity : activity == 'm3'}">
<insurance-query></insurance-query>
<div class="empty-line"></div></div>
<div class="panel" :class="{activity : activity == 'm4'}"></div>
<div class="panel" :class="{activity : activity == 'm5'}"></div>
<div class="panel" :class="{activity : activity == 'm6'}"></div>
<div class="panel" :class="{activity : activity == 'm6'}">
<reservation></reservation>
<div class="empty-line"></div></div>
<div class="panel" :class="{activity : activity == 'm7'}"></div>
<div class="panel" :class="{activity : activity == 'm8'}"></div>
</div>
......