Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
21f82d49 by simon
Options

版本提交

1 parent 059054a1
Inline Side-by-side
Showing 14 changed files with 718 additions and 64 deletions
......@@ -16,7 +16,7 @@ module.exports = {
name: "register",
path: "/register",
value: ""
},{
}, {
name: "login",
path: "/login",
value: ""
......@@ -42,38 +42,38 @@ module.exports = {
name: "Customer service",
path: "/custom/product",
list: [{
name: "Contact us",
path: "/custom/service?q=m1"
},
{
name: "Pay premium",
path: "/payment/type"
},
{
name: "Query policy",
path: "/custom/service?q=m3"
},
{
name: "Change policy",
path: "/custom/service?q=m4"
},
{
name: "Claim report",
path: "/custom/service?q=m5"
},
{
name: "Reservation service",
path: "/custom/service?q=m6"
},
{
name: "Suggestions",
path: "/custom/service?q=m7"
},
{
name: "Common form",
path: "/custom/service?q=m8"
},
]
name: "Contact us",
path: "/custom/service?q=m1"
},
{
name: "Pay premium",
path: "/payment/type"
},
{
name: "Query policy",
path: "/custom/service?q=m3"
},
{
name: "Change policy",
path: "/custom/service?q=m4"
},
{
name: "Claim report",
path: "/custom/service?q=m5"
},
{
name: "Reservation service",
path: "/custom/service?q=m6"
},
{
name: "Suggestions",
path: "/custom/service?q=m7"
},
{
name: "Common form",
path: "/custom/service?q=m8"
},
]
},
{
name: "News",
......@@ -110,7 +110,7 @@ module.exports = {
contactInformation: "Contact Information",
service: "Service",
qrcode: "Official Accounts",
copyright:"版權所有 © 中國平安保險（集團）股份有限公司未經許可不得復制、轉載或摘編，違者必究!"
copyright: "版權所有 © 中國平安保險（集團）股份有限公司未經許可不得復制、轉載或摘編，違者必究!"
},
login: {
title: "平安一賬通",
......@@ -208,6 +208,80 @@ module.exports = {
menu7: "Suggestions",
menu8: "Common form",
},
commonForm: {
head1: "表格類型",
head2: "表格名稱",
head3: "使用說明",
head4: "附件",
download: "下載文檔",
form: [{
type: "繳費類",
list: [{
name: "「電子入賬服務」及銀行戶口<br>直接付款授權申請",
desc: "申請設立「 電子入賬服務」 及銀行戶口<br>直接付款授權時須提供",
download: "",
},
{
name: "信用卡戶口直接付款授權書",
desc: "申請信用卡戶口直接付款授權時須提供",
download: "",
}
]
},
{
type: "保單變更類",
list: [{
name: "保險合同解除申請書",
desc: "退保、猶豫期退保業務適用",
download: "",
},
{
name: "保險合同變更申請書（ 保單貸款還款類）",
desc: "保單貸款、還款業務適用",
download: "",
},
{
name: "保險合同變更申請書（ 保險合同計劃變更類）",
desc: "加保、減保、新增附險、復效等業務適用",
download: "",
},
{
name: "保險合同變更申請書（ 客戶信息變更類）",
desc: "基本信息變更業務適用",
download: "",
},
{
name: "保險合同變更申請書（ 客戶權益變更類）",
desc: "交費方式、自墊選擇權變更、補發等業務適用",
download: "",
},
{
name: "授權委托書",
desc: "委托他人代辦時須提供",
download: "",
},
{
name: "稅收聲明",
desc: "CRS要求",
download: "",
},
{
name: "健康告知",
desc: "須二次核保的業務須提供",
download: "",
}
]
},
{
type: "理賠類",
list: [{
name: "理賠申請書",
desc: "紙質申請的應備文件",
download: "",
}]
},
]
},
customService: {
name: "Customer service",
menu1: "Contact us",
......@@ -246,7 +320,7 @@ module.exports = {
t4Title: "Beneficiary information",
t4NameCn: "Name (Cn)",
t4NameEn: "Name (En)",
t4Relation : "與受保人關係",
t4Relation: "與受保人關係",
t4Allocation: "Distribution ratio",
t5Title: "Payment information",
......@@ -263,8 +337,8 @@ module.exports = {
t6ClosingDate: "Closing date",
t6PaymentAmount: "Payment amount",
},
reservation :{
submitBtn : '確認'
reservation: {
submitBtn: '確認'
}
}
}
......
......@@ -16,7 +16,7 @@ module.exports = {
name: "註冊",
path: "/register",
value: ""
},{
}, {
name: "登入",
path: "/login",
value: ""
......@@ -208,6 +208,80 @@ module.exports = {
menu7: "投訴受理",
menu8: "常用表格",
},
commonForm: {
head1: "表格類型",
head2: "表格名稱",
head3: "使用說明",
head4: "附件",
download: "下載文檔",
form: [{
type: "繳費類",
list: [{
name: "「電子入賬服務」及銀行戶口<br>直接付款授權申請",
desc: "申請設立「 電子入賬服務」 及銀行戶口<br>直接付款授權時須提供",
download: "",
},
{
name: "信用卡戶口直接付款授權書",
desc: "申請信用卡戶口直接付款授權時須提供",
download: "",
}
]
},
{
type: "保單變更類",
list: [{
name: "保險合同解除申請書",
desc: "退保、猶豫期退保業務適用",
download: "",
},
{
name: "保險合同變更申請書（ 保單貸款還款類）",
desc: "保單貸款、還款業務適用",
download: "",
},
{
name: "保險合同變更申請書（ 保險合同計劃變更類）",
desc: "加保、減保、新增附險、復效等業務適用",
download: "",
},
{
name: "保險合同變更申請書（ 客戶信息變更類）",
desc: "基本信息變更業務適用",
download: "",
},
{
name: "保險合同變更申請書（ 客戶權益變更類）",
desc: "交費方式、自墊選擇權變更、補發等業務適用",
download: "",
},
{
name: "授權委托書",
desc: "委托他人代辦時須提供",
download: "",
},
{
name: "稅收聲明",
desc: "CRS要求",
download: "",
},
{
name: "健康告知",
desc: "須二次核保的業務須提供",
download: "",
}
]
},
{
type: "理賠類",
list: [{
name: "理賠申請書",
desc: "紙質申請的應備文件",
download: "",
}]
},
]
},
customService: {
name: "客戶服務",
menu1: "聯繫我們",
......@@ -246,7 +320,7 @@ module.exports = {
t4Title: "受益人資料", // t4BeneficiaryInformation
t4NameCn: "姓名（中文）",
t4NameEn: "姓名（英文）",
t4Relation : "與受保人關係",
t4Relation: "與受保人關係",
t4Allocation: "分配比例",
t5Title: "繳費資料",
......@@ -263,8 +337,8 @@ module.exports = {
t6ClosingDate: "實收日期",
t6PaymentAmount: "繳費金額",
},
reservation :{
submitBtn : '確認'
reservation: {
submitBtn: '確認'
}
}
}
......
......@@ -16,7 +16,7 @@ module.exports = {
name: "注册",
path: "/register",
value: ""
},{
}, {
name: "登陆",
path: "/login",
value: ""
......@@ -208,6 +208,81 @@ module.exports = {
menu7: "投诉受理",
menu8: "常用表格",
},
commonForm: {
head1: "表格类型",
head2: "表格名称",
head3: "使用说明",
head4: "附件",
download: "下载文档",
form: [{
type: "缴费类",
list: [{
name: "「电子入账服务」及银行户口<br>直接付款授权申请",
desc: "申请设立「电子入账服务」及银行户口<br>直接付款授权时须提供",
download: "",
},
{
name: "信用卡户口直接付款授权书",
desc: "申请信用卡户口直接付款授权时须提供",
download: "",
}
]
},
{
type: "保单变更类",
list: [{
name: "保险合同解除申请书",
desc: "退保、犹豫期退保业务适用",
download: "",
},
{
name: "保险合同变更申请书（保单贷款还款类）",
desc: "保单贷款、还款业务适用",
download: "",
},
{
name: "保险合同变更申请书（保险合同计划变更类）",
desc: "加保、减保、新增附险、复效等业务适用",
download: "",
},
{
name: "保险合同变更申请书（客户信息变更类）",
desc: "基本信息变更业务适用",
download: "",
},
{
name: "保险合同变更申请书（客户权益变更类）",
desc: "交费方式、自垫选择权变更、补发等业务适用",
download: "",
},
{
name: "授权委托书",
desc: "委托他人代办时须提供",
download: "",
},
{
name: "税收声明",
desc: "CRS要求",
download: "",
},
{
name: "健康告知",
desc: "须二次核保的业务须提供",
download: "",
}
]
},
{
type: "理赔类",
list: [{
name: "理赔申请书",
desc: "纸质申请的应备文件",
download: "",
}]
},
]
},
customService: {
name: "客户服务",
menu1: "联系我们",
......@@ -246,7 +321,7 @@ module.exports = {
t4Title: "受益人资料", // t4BeneficiaryInformation
t4NameCn: "姓名（中文）",
t4NameEn: "姓名（英文）",
t4Relation : "与受保人关系",
t4Relation: "与受保人关系",
t4Allocation: "分配比例",
t5Title: "缴费资料",
......@@ -263,8 +338,8 @@ module.exports = {
t6ClosingDate: "实收日期",
t6PaymentAmount: "缴费金额",
},
reservation :{
submitBtn : '确认'
reservation: {
submitBtn: '确认'
}
}
}
......
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';
.common-form-container {}
.table {
$girdHei: 4.333333rem;
text-align: center;
&-header {
@include border-top-radius(.666667rem);
display: flex;
align-items: center;
height: 2.5rem;
color: #ffffff;
font-weight: bold;
letter-spacing: .1rem;
&-item {}
}
&-content {
background-color: #f2f2f2;
text-align: center;
border: solid 1px #f2f2f2;
@include border-bottom-radius(.666667rem);
$gridHei: 4.333333rem;
&-item {
position: relative;
// @extend .fcc;
display: flex;
align-items: center;
width: 100%;
height: auto;
.hl {
position: absolute;
width: 5.25rem;
height: 1px;
background-color: #dcdddd;
bottom: 0;
left: .75rem;
}
.grid {
position: relative;
height: $gridHei;
@extend .fcc;
// border-bottom: solid 1px #f2f2f2;
background-color: #ffffff;
.v-line {
position: absolute;
width: 1px;
height: 2.25rem;
background-color: #dcdddd;
right: 0;
top: 0;
bottom: 0;
margin: auto 0;
}
.icon{
margin-right: .916667rem;
}
}
.ww {
position: relative;
.h-line {
position: absolute;
width: 100%;
height: 1px;
background-color: #dcdddd;
bottom: 0;
left: 0;
}
}
.w1 {}
.w4 {
.h-line {
width: 9rem;
}
color: $cOrange;
}
}
}
.t1 {
background-color: #f2f2f2;
}
.w1 {
width: 7rem;
}
.w2 {
width: 23rem;
}
.w3 {
width: 23.5rem;
}
.w4 {
flex: 1;
}
}
.orange {
background-color: $cOrange;
}
<template>
<div class="common-form-container">
<div class="table">
<div class="table-header orange">
<div class="table-header-item w1">{{$t('commonForm.head1')}}</div>
<div class="table-header-item w2">{{$t('commonForm.head2')}}</div>
<div class="table-header-item w3">{{$t('commonForm.head3')}}</div>
<div class="table-header-item w4">{{$t('commonForm.head4')}}</div>
</div>
<div class="table-content">
<div v-for="(item,index) in i18n.commonForm.form" :key="index" class="table-content-item">
<div v-if="index < i18n.commonForm.form.length-1" class="hl"></div>
<div class="ww w1">
{{item.type}}
</div>
<div class="ww w2">
<div v-for="(item2,index2) in item.list" :key="index2" class="grid">
<div class="v-line"></div>
<div v-if="index < i18n.commonForm.form.length-1 || index2 < item.list.length-1" class="h-line"></div>
<span v-html="item2.name"> {{item2.name}}</span>
</div>
</div>
<div class="ww w3">
<div v-for="(item2,index2) in item.list" :key="index2" class="grid">
<div class="v-line"></div>
<div v-if="index < i18n.commonForm.form.length-1 || index2 < item.list.length-1" class="h-line"></div>
<span v-html="item2.desc"> {{item2.desc}}</span>
</div>
</div>
<div class="ww w4">
<div v-for="(item2,index2) in item.list" :key="index2" class="grid pointer">
<div v-if="index < i18n.commonForm.form.length-1 || index2 < item.list.length-1" class="h-line"></div>
<img class="icon" src="@/assets/images/common-form/icon-cf-download.png" alt=""> {{$t('commonForm.download')}}
</div>
</div>
</div>
<!-- 繳費類 -->
<!-- <div class="table-content-item">
<div class="hl"></div>
<div class="ww w1">
繳費類
</div>
<div class="ww w2">
<div class="grid">
<div class="v-line"></div>
<div class="h-line"></div>
「電子入賬服務」及銀行戶口
<br> 直接付款授權申請
</div>
<div class="grid">
<div class="v-line"></div>
<div class="h-line"></div>
信用卡戶口直接付款授權書
</div>
</div>
<div class="ww w3">
<div class="grid">
<div class="v-line"></div>
<div class="h-line"></div>
申請設立「電子入賬服務」及銀行戶口
<br>直接付款授權時須提供
</div>
<div class="grid">
<div class="v-line"></div>
<div class="h-line"></div>
申請信用卡戶口直接付款授權時須提供
</div>
</div>
<div class="ww w4">
<div class="grid pointer">
<div class="h-line"></div>
<img class="icon" src="@/assets/images/common-form/icon-cf-download.png" alt=""> 下載文檔
</div>
<div class="grid pointer">
<div class="h-line"></div>
<img class="icon" src="@/assets/images/common-form/icon-cf-download.png" alt=""> 下載文檔
</div>
</div>
</div> -->
<!-- 保單變更類 -->
<!-- <div class="table-content-item">
<div class="hl"></div>
<div class="ww w1">
保單變更類
</div>
<div class="ww w2">
<div class="grid">
<div class="v-line"></div>
<div class="h-line"></div>
保險合同解除申請書
</div>
<div class="grid">
<div class="v-line"></div>
<div class="h-line"></div>
信用卡戶口直接付款授權書
</div>
</div>
<div class="ww w3">
<div class="grid">
<div class="v-line"></div>
<div class="h-line"></div>
申請設立「電子入賬服務」及銀行戶口
<br>直接付款授權時須提供
</div>
<div class="grid">
<div class="v-line"></div>
<div class="h-line"></div>
申請信用卡戶口直接付款授權時須提供
</div>
</div>
<div class="ww w4">
<div class="grid pointer">
<div class="h-line"></div>
<img class="icon" src="@/assets/images/common-form/icon-cf-download.png" alt=""> 下載文檔
</div>
<div class="grid pointer">
<div class="h-line"></div>
<img class="icon" src="@/assets/images/common-form/icon-cf-download.png" alt=""> 下載文檔
</div>
</div>
</div> -->
<!-- 理賠類 -->
<!-- <div class="table-content-item">
<div class="ww w1">
理賠類
</div>
<div class="ww w2">
<div class="grid">
<div class="v-line"></div>
理賠申請書
</div>
</div>
<div class="ww w3">
<div class="grid">
<div class="v-line"></div>
紙質申請的應備文件
</div>
</div>
<div class="ww w4">
<div class="grid pointer">
<img class="icon" src="@/assets/images/common-form/icon-cf-download.png" alt=""> 下載文檔
</div>
</div>
</div> -->
</div>
</div>
</div>
</template>
<script src="./common-form.js"></script>
<style lang="scss" scoped>
@import "./common-form.scss";
</style>
@import '@/styles/_support';
.content {}
.contact-us-container {}
.border {
@extend .bb;
padding: 2.833333rem 4.0rem 0 3.5rem;
width: 770px;
height: 387px;
border-radius: 8px;
border: solid 1px #f2f2f2;
background-color: #ffffff;
}
.info {
display: flex;
justify-content: space-between;
margin-bottom: 4.416667rem;
&-item {
font-size: 12px;
&-tit {
display: flex;
align-items: center;
color: $cOrange;
font-size: 18px;
font-weight: bold;
height: 2.833333rem;
.icon-wrap {
margin-right: .75rem;
}
}
&:last-child {
margin-right: 0;
}
}
.qrcode-wrap {
text-align: center;
// margin:;
// margin-right: ;
.qrocde {}
}
ul {
list-style-type: none;
margin-top: 1.5rem;
}
li {
background-image: url('~@assets/images/payment-type/icon-li.png');
background-repeat: no-repeat;
background-position: 0rem .5rem;
padding-left: 1rem;
margin: .6rem 0;
}
}
.info2 {
.info-item {
margin: 0;
}
}
......
<template>
<div class="contact-us-container">
<div class="border">
contact-us
<div class=" border">
<div class="info">
<div class="info-item">
<div class="info-item-tit">
<div class="icon-wrap">
<img class="icon" src="@/assets/images/contact-us/icon-cs-service.png">
</div>
客戶服務中心
</div>
<div class="info-item-detail">
<ul>
<li>地址：香港尖沙嘴港威永金融大樓</li>
<li>服務時間：星期壹至五9:00-18:00</li>
</ul>
</div>
</div>
<div class="info-item">
<div class="info-item-tit">
<div class="icon-wrap">
<img class="icon" src="@/assets/images/contact-us/icon-cs-call.png">
</div>
客戶服務熱線
</div>
<div class="info-item-detail">
<ul>
<li>香港號碼：(852)2983 8866</li>
<li>內地號碼：(86)40078 95511</li>
<li>服務時間：星期壹至五9:00-18:00</li>
</ul>
</div>
</div>
<div class="info-item">
<div class="info-item-tit">
<div class="icon-wrap">
<img class="icon" src="@/assets/images/contact-us/icon-cs-email.png">
</div>
客戶服務電郵
</div>
<div class="info-item-detail">
<ul>
<li>cs@pingan.com.hk</li>
</ul>
</div>
</div>
</div>
<!-- 微信公众号 -->
<div class="info info2">
<div class="info-item">
<div class="info-item-tit">
<div class="icon-wrap">
<img class="icon" src="@/assets/images/contact-us/icon-cs-wechat.png">
</div>
微信公眾號
</div>
<div class="info-item-detail">
<ul>
<li>登陸「微信」APP，按右上角的「+按鈕並選擇「添加朋友」選擇「公眾號」輸入並搜索「平安人壽香港」</li>
<li>登陸「微信」APP，按右上角的「+」按鈕並選擇「掃壹掃」</li>
</ul>
</div>
</div>
<div class="qrcode-wrap">
<img src="@/assets/images/contact-us/cs-qrcode.png">
<div class="t1">官方公眾號</div>
</div>
</div>
</div>
</div>
</template>
......
......@@ -8,11 +8,12 @@ import ContactUs from './components/contact-us.vue'
import InsuranceQuery from './components/insurance-query.vue'
import reservation from './components/reservation.vue'
import PaymentType from './components/payment-type.vue'
import CommonForm from './components/common-form.vue'
export default {
data() {
return {
activity: "m3"
activity: "m8"
}
},
methods: {
......@@ -29,24 +30,23 @@ export default {
}
},
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);
}
// $route() {
// let activity = this.$route.query.q;
// if (activity) {
// this.$set(this, 'activity', activity);
// }
// }
},
created() {
let activity = this.$route.query.q;
activity = activity ? activity : "m3";
this.activity = activity;
// let activity = this.$route.query.q;
// activity = activity ? activity : "m3";
// this.activity = activity;
},
components: {
ContactUs,
InsuranceQuery,
reservation,
PaymentType
PaymentType,
CommonForm
}
}
......
......@@ -22,7 +22,8 @@
.menu-item {
position: relative;
@extend .bb;
padding: 1rem 0;
padding: 1.25rem 0;
// height: 3.833333rem;
font-weight: bold;
color: $cFontGray;
text-align: center;
......
......@@ -25,7 +25,9 @@
<reservation></reservation>
</div>
<div class="panel" :class="{activity : activity == 'm7'}"></div>
<div class="panel" :class="{activity : activity == 'm8'}"></div>
<div class="panel" :class="{activity : activity == 'm8'}">
<common-form></common-form>
</div>
</div>
</div>
</template>
......
......@@ -50,5 +50,4 @@
.bc{
text-align: center;
}
......