Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
d8dabbb4 by simon
Options

Merge branch 'master' of 120.27.44.69:dev/pingan-life-index-pro

2 parents 716fc33d d982c9f3
Inline Side-by-side
Showing 21 changed files with 799 additions and 19 deletions
......@@ -11,10 +11,63 @@ module.exports = {
nav: {
ttt: "2"
},
product : {
btnPosition : "Booking service",
iconProblem : "Common problem",
iconProcess : "Insurance process",
iconProduct : "Product details"
product: {
btnPosition: "Booking service",
iconProblem: "Common problem",
iconProcess: "Insurance process",
iconProduct: "Product details"
},
customService: {
name: "Customer service",
menu1: "Query",
menu2: "Change",
menu3: "Renewal",
menu4: "Claim",
menu5: "Booking",
menu6: "Complaint",
insuranceQuery: {
InsurantNumber: "Insurant number",
Insurant: "Insurant",
InsurantName: "Insurant name",
InsurantAmount: "Insurant amount",
effectiveDate: "Effective date",
period: "Guarantee period",
t2Title: "Guarantee information",
t2InsurantClassify: "Name of insurance",
t2InsurantAmount: "Insured amount",
t3Title: "Customer information",
t3InsurantNameCn: "Name of applicant (Cn)",
t3InsurantNameEn: "Name of applicant (En)",
t3InsurantIdNumber: "ID Number",
t3InsurantContactAddress: "Contact address",
t3InsurantAddress: "Address",
t3InsurantMobile: "mobile",
t3InsurantEmail: "email",
t3InsuredNameCn: "Name of insured (Cn)",
t3InsuredNameEn: "Name of insured (En)",
t3InsuredBirthday: "Birthday",
t3InsuredIdNumber: "ID Number",
t4Title: "Beneficiary information",
t4NameCn: "Name (Cn)",
t4NameEn: "Name (En)",
t4Allocation: "Distribution ratio",
t5Title: "Payment information",
t5PaymentPeriod: "Payment period",
t5PaymentMethod: "Payment method",
t5PaymentCurrency: "Payment currency",
t5CurrentPremium: "Current premium",
t5PaymentBank: "Payment bank",
t5PaymentAccount: "Payment account",
t6Title: "Payment record",
t6PaymentPeriod: "Payment period",
t6PaymentMethod: "Payment method",
t6ClosingDate: "Closing date",
t6PaymentAmount: "Payment amount",
}
}
}
......
......@@ -16,5 +16,58 @@ module.exports = {
iconProblem : "常見問題",
iconProcess : "投保流程",
iconProduct : "產品詳情"
},
customService : {
name : "客户服务",
menu1 : "保單查詢",
menu2 : "保全變更",
menu3 : "續期繳費",
menu4 : "理賠申請",
menu5 : "預約服務",
menu6 : "投訴受理",
insuranceQuery: {
InsurantNumber: "保單號碼",
Insurant: "被保人",
InsurantName: "險種名稱",
InsurantAmount: "保險金額",
effectiveDate: "生效日期",
period: "保障年期",
t2Title : "保障內容",
t2InsurantClassify : "險種名稱",
t2InsurantAmount : "保額",
t3Title : "客戶資料",
t3InsurantNameCn : "投保人姓名（中文）",
t3InsurantNameEn : "投保人姓名（英文）",
t3InsurantIdNumber : "證件號碼",
t3InsurantContactAddress : "聯繫地址",
t3InsurantAddress : "居住地址",
t3InsurantMobile : "手提電話",
t3InsurantEmail : "電子郵箱",
t3InsuredNameCn : "受保人姓名（中文）",
t3InsuredNameEn : "受保人姓名（英文）",
t3InsuredBirthday : "出生日期",
t3InsuredIdNumber : "證件號碼",
t4Title : "受益人資料", // t4BeneficiaryInformation
t4NameCn : "姓名（中文）",
t4NameEn : "姓名（英文）",
t4Allocation : "分配比例",
t5Title : "繳費資料",
t5PaymentPeriod: "續費年期",
t5PaymentMethod: "繳費方式",
t5PaymentCurrency: "繳費幣種",
t5CurrentPremium: "當期保費",
t5PaymentBank: "繳費銀行",
t5PaymentAccount: "繳費帳號",
t6Title : "繳費記錄",
t6PaymentPeriod: "繳費期",
t6PaymentMethod : "繳費方式",
t6ClosingDate : "實收日期",
t6PaymentAmount : "繳費金額",
}
}
}
......
module.exports = {
message: {
login: '登录',
Username: '用户名',
Password: '密码',
Captcha: '验证码',
Language: '语言',
zh: '中文',
en: '英文'
login: '登录',
Username: '用户名',
Password: '密码',
Captcha: '验证码',
Language: '语言',
zh: '中文',
en: '英文'
},
nav: {
ttt: "1"
ttt: "1"
},
product : {
btnPosition : "预约服务",
iconProblem : "常见问题",
iconProcess : "投保流程",
iconProduct : "产品详情"
product: {
btnPosition: "预约服务",
iconProblem: "常见问题",
iconProcess: "投保流程",
iconProduct: "产品详情"
},
customService: {
name : "客戶服務",
menu1: "保单查询",
menu2: "保全变更",
menu3: "续期缴费",
menu4: "理赔申请",
menu5: "预约服务",
menu6: "投诉受理",
insuranceQuery: {
InsurantNumber: "保单号码",
Insurant: "被保人",
InsurantName: "险种名称",
InsurantAmount: "保险金额",
effectiveDate: "生效日期",
period: "保障年期",
t2Title : "保障内容",
t2InsurantClassify : "险种名称",
t2InsurantAmount : "保额",
t3Title : "客户资料",
t3InsurantNameCn : "投保人姓名（中文）",
t3InsurantNameEn : "投保人姓名（英文）",
t3InsurantIdNumber : "证件号码",
t3InsurantContactAddress : "联系地址",
t3InsurantAddress : "居住地址",
t3InsurantMobile : "手提电话",
t3InsurantEmail : "电子邮箱",
t3InsuredNameCn : "受保人姓名（中文）",
t3InsuredNameEn : "受保人姓名（英文）",
t3InsuredBirthday : "出生日期",
t3InsuredIdNumber : "证件号码",
t4Title : "受益人资料", // t4BeneficiaryInformation
t4NameCn : "姓名（中文）",
t4NameEn : "姓名（英文）",
t4Allocation : "分配比例",
t5Title : "缴费资料",
t5PaymentPeriod: "缴费年期",
t5PaymentMethod: "缴费方式",
t5PaymentCurrency: "缴费币种",
t5CurrentPremium: "当期保费",
t5PaymentBank: "缴费银行",
t5PaymentAccount: "缴费账号",
t6Title : "缴费记录",
t6PaymentPeriod: "缴费期",
t6PaymentMethod : "缴费方式",
t6ClosingDate : "实收日期",
t6PaymentAmount : "缴费金额",
}
}
}
}
\ No newline at end of file
......
import api from '@/api/api'
import {
httpGet,
httpPost
} from '@/api/fetch-api.js'
// import InsuranceQuery from './components/insurance-query'
export default {
data() {
return {
activity: "m1",
insuranceForm: {
f1 : true,
f2 : true,
f3 : true,
f4 : true,
f5 : true,
}
}
},
methods: {
initData() { },
},
created() { },
components: {
// InsuranceQuery
}
}
.content {
display: flex;
}
.left-panel {
width: 12.833333rem ;
height: 42.333333rem ;
margin-left: 3.166667rem;
.separator {
margin:auto;
width: 10.5rem ;
height: .083333rem;
background-color: #dcdddd;
}
.menu-item {
height: 5.916667rem;
line-height: 5.916667rem;
font-size: 1.5rem ;
font-weight: bold;
color: #4c4948;
text-align: center;
cursor: pointer;
i {
display: inline-block;
width: 1.666667rem ;
height: 1.666667rem;
margin-right: 1.333333rem;
vertical-align: middle;
}
.m1 {
background: url("~@/assets/images/insurance-query/m1-unselect.png") no-repeat center center;
background-size: 100% 100%;
}
.m2 {
background: url("~@/assets/images/insurance-query/m2-unselect.png") no-repeat center center;
background-size: 100% 100%;
}
.m3 {
background: url("~@/assets/images/insurance-query/m3-unselect.png") no-repeat center center;
background-size: 100% 100%;
}
.m4 {
background: url("~@/assets/images/insurance-query/m4-unselect.png") no-repeat center center;
background-size: 100% 100%;
}
.m5 {
background: url("~@/assets/images/insurance-query/m5-unselect.png") no-repeat center center;
background-size: 100% 100%;
}
.m6 {
background: url("~@/assets/images/insurance-query/m6-unselect.png") no-repeat center center;
background-size: 100% 100%;
}
}
.menu-item.activity {
color: #f05a23 !important;
.m1 {
background: url("~@/assets/images/insurance-query/m1.png") no-repeat center center;
background-size: 100% 100%;
}
.m2 {
background: url("~@/assets/images/insurance-query/m2.png") no-repeat center center;
background-size: 100% 100%;
}
.m3 {
background: url("~@/assets/images/insurance-query/m3.png") no-repeat center center;
background-size: 100% 100%;
}
.m4 {
background: url("~@/assets/images/insurance-query/m4.png") no-repeat center center;
background-size: 100% 100%;
}
.m5 {
background: url("~@/assets/images/insurance-query/m5.png") no-repeat center center;
background-size: 100% 100%;
}
.m6 {
background: url("~@/assets/images/insurance-query/m6.png") no-repeat center center;
background-size: 100% 100%;
}
}
}
.min-panel {
margin-left: .666667rem;
width: 1.166667rem;
.item {
width: 1.166667rem ;
height: 6rem;
display: flex;
justify-content: flex-start;
align-items: center;
}
.activity .triangle {
width: .583333rem;
height: 1.166667rem ;
background: url("~@/assets/images/insurance-query/triangle.png") no-repeat center center;
background-size: 100% 100%;
}
}
.right-panel {
margin-left: 1.166667rem;
width: 64.166667rem ;
background-color: #ffffff;
.panel {
display: none;
}
.activity {
display: block !important;
}
}
/** 可以抽出来作为一个插件 **/
.cell-group {
margin-bottom: 1rem /* 12/12 */;
div{
font-size: 1rem /* 12/12 */;
color: #4c4948;
}
.w1 {
min-width: 9.166667rem /* 110/12 */;
text-align: center;
}
.w2 {
min-width: 6.25rem /* 75/12 */;
text-align: center;
}
.table-header {
width: 64.166667rem /* 770/12 */;
height: 2.5rem /* 30/12 */;
border-top-left-radius: .666667rem /* 8/12 */;
border-top-right-radius: .666667rem /* 8/12 */;
background-color: #f2f2f2;
display: flex;
align-items: center;
.normal-header {
width: 58.833333rem /* 706/12 */;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
.title {
font-size: 1rem /* 12/12 */;
font-weight: bold;
color: #575453;
}
.guide {
transition: all 0.5s;
cursor: pointer;
width: 1rem /* 12/12 */;
height: .666667rem /* 8/12 */ ;
background: url("~@/assets/images/insurance-query/triangle-down.png") no-repeat center center;
background-size: 100% 100%;
}
.rotate180 {
transform: rotate(180deg);
transition: all 0.5s;
}
}
}
.table-content {
width: 64.166667rem /* 770/12 */;
height: auto;
display: inline-block;
border-bottom-left-radius: .666667rem /* 8/12 */;
border-bottom-right-radius: .666667rem /* 8/12 */;
border-left: solid .083333rem /* 1/12 */ #f2f2f2;
border-right: solid .083333rem /* 1/12 */ #f2f2f2;
border-bottom: solid .083333rem /* 1/12 */ #f2f2f2;
padding: 0 2.583333rem /* 31/12 */;
max-height: 41.666667rem /* 500/12 */;
transition: max-height ease-out 0.3s !important;
overflow: hidden;
.data-line {
height: 4.416667rem /* 53/12 */;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
.cell1 {
width: 29.166667rem /* 350/12 */;
display: flex;
justify-content: space-between;
margin: auto;
}
.separator-v {
height: 2.5rem /* 30/12 */;
width: .166667rem /* 2/12 */;
background-color: #f2f2f2;
margin: 0 .916667rem /* 11/12 */;
}
}
.label span {
color: #f05a23;
margin-left: .583333rem /* 7/12 */;
cursor: pointer;
text-decoration: underline;
}
.separator-h {
width: 58.833333rem /* 706/12 */;
height: .083333rem /* 1/12 */;
background-color: #f2f2f2;
}
}
.orange {
background-color: #f05a23 !important;
div {
color: #ffffff;
}
}
.hide {
max-height: 0;
border-bottom:none;
}
}
.empty-line {
height: 1.333333rem /* 16/12 */;
}
\ No newline at end of file
<template>
<div class="content">
<div class="left-panel">
<div class="menu-item" :class="{activity : activity == 'm1'}" @click="activity = 'm1'">
<i class="m1"></i>{{$t('customService.menu1')}}
<div></div>
</div>
<div class="separator"></div>
<div class="menu-item" :class="{activity : activity == 'm2'}" @click="activity = 'm2'">
<i class="m2"></i>{{$t('customService.menu2')}}
</div>
<div class="separator"></div>
<div class="menu-item" :class="{activity : activity == 'm3'}" @click="activity = 'm3'">
<i class="m3"></i>{{$t('customService.menu3')}}
</div>
<div class="separator"></div>
<div class="menu-item" :class="{activity : activity == 'm4'}" @click="activity = 'm4'">
<i class="m4"></i>{{$t('customService.menu4')}}
</div>
<div class="separator"></div>
<div class="menu-item" :class="{activity : activity == 'm5'}" @click="activity = 'm5'">
<i class="m5"></i>{{$t('customService.menu5')}}
</div>
<div class="separator"></div>
<div class="menu-item" :class="{activity : activity == 'm6'}" @click="activity = 'm6'">
<i class="m6"></i>{{$t('customService.menu6')}}
</div>
</div>
<div class="min-panel">
<div class="item" :class="{activity : activity == 'm1'}">
<div class="triangle"></div>
</div>
<div class="item" :class="{activity : activity == 'm2'}">
<div class="triangle"></div>
</div>
<div class="item" :class="{activity : activity == 'm3'}">
<div class="triangle"></div>
</div>
<div class="item" :class="{activity : activity == 'm4'}">
<div class="triangle"></div>
</div>
<div class="item" :class="{activity : activity == 'm5'}">
<div class="triangle"></div>
</div>
<div class="item" :class="{activity : activity == 'm6'}">
<div class="triangle"></div>
</div>
</div>
<div class="right-panel">
<div class="panel" :class="{activity : activity == 'm1'}">
<div class="cell-group">
<div class="table-header orange">
<div class="normal-header">
<div class="td w1">{{$t('customService.insuranceQuery.InsurantNumber')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.Insurant')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.InsurantName')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.InsurantAmount')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.effectiveDate')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.period')}}</div>
</div>
</div>
<div class="table-content">
<div class="data-line">
<div class="td w1">P3**********0772</div>
<div class="td w2">平安</div>
<div class="td w2">分红重疾</div>
<div class="td w2">HK$10,000</div>
<div class="td w2">2020-1-1</div>
<div class="td w2">終身</div>
</div>
</div>
</div>
<div class="cell-group">
<div class="table-header">
<div class="normal-header">
<div class="title">{{$t('customService.insuranceQuery.t2Title')}}</div>
<div class="guide" :class="{rotate180 : !insuranceForm.f1}" @click="insuranceForm.f1 = !insuranceForm.f1"></div>
</div>
</div>
<div class="table-content" :class="{hide : !insuranceForm.f1}">
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t2InsurantClassify')}}</div>
<div class="label">分紅重疾</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.InsurantAmount')}}</div>
<div class="label">HK$10,000</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.effectiveDate')}}</div>
<div class="label">2020-1-1</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.period')}}</div>
<div class="label">终身</div>
</div>
</div>
</div>
</div>
<div class="cell-group">
<div class="table-header">
<div class="normal-header">
<div class="title">{{$t('customService.insuranceQuery.t3Title')}}</div>
<div class="guide" :class="{rotate180 : !insuranceForm.f2}" @click="insuranceForm.f2 = !insuranceForm.f2"></div>
</div>
</div>
<div class="table-content" :class="{hide : !insuranceForm.f2}">
<div class="data-line">
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantNameCn')}}<span>修改</span>
</div>
<div class="label">平安</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantNameEn')}}<span>修改</span>
</div>
<div class="label">Pingan</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.effectiveDate')}}</div>
<div class="label">2020-1-1</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantIdNumber')}}<span>修改</span>
</div>
<div class="label">123*****567</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantContactAddress')}}<span>修改</span>
</div>
<div class="label">深圳市益田路5033號</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantAddress')}}<span>修改</span>
</div>
<div class="label">深圳市益田路5033號</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantMobile')}}<span>修改</span>
</div>
<div class="label">（852）2888 8888</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantEmail')}}<span>修改</span>
</div>
<div class="label">123@ping.com.cn</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsuredNameCn')}}<span>修改</span>
</div>
<div class="label">平安</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsuredNameEn')}}<span>修改</span>
</div>
<div class="label">Pingan</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t3InsuredBirthday')}}</div>
<div class="label">1999-1-1</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsuredIdNumber')}}<span>修改</span>
</div>
<div class="label">123*****567</div>
</div>
</div>
</div>
</div>
<div class="cell-group">
<div class="table-header">
<div class="normal-header">
<div class="title">{{$t('customService.insuranceQuery.t4Title')}}</div>
<div class="guide" :class="{rotate180 : !insuranceForm.f3}" @click="insuranceForm.f3 = !insuranceForm.f3"></div>
</div>
</div>
<div class="table-content" :class="{hide : !insuranceForm.f3}">
<div class="data-line">
<div class="td">{{$t('customService.insuranceQuery.t4NameCn')}}</div>
<div class="td">{{$t('customService.insuranceQuery.t4NameEn')}}</div>
<div class="td">{{$t('customService.insuranceQuery.t4Allocation')}}</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="td">張三</div>
<div class="td">Zhangsan</div>
<div class="td">50%</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="td">李四</div>
<div class="td">Lisi</div>
<div class="td">50%</div>
</div>
</div>
</div>
<div class="cell-group">
<div class="table-header">
<div class="normal-header">
<div class="title">{{$t('customService.insuranceQuery.t5Title')}}</div>
<div class="guide" :class="{rotate180 : !insuranceForm.f4}" @click="insuranceForm.f4 = !insuranceForm.f4"></div>
</div>
</div>
<div class="table-content" :class="{hide : !insuranceForm.f4}">
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5PaymentPeriod')}}</div>
<div class="label">30年</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5PaymentMethod')}}</div>
<div class="label">銀行轉帳</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5PaymentCurrency')}}</div>
<div class="label">港幣</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5CurrentPremium')}}</div>
<div class="label">HK$2,000</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5PaymentBank')}}</div>
<div class="label">平安銀行</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5PaymentAccount')}}</div>
<div class="label">1234******888</div>
</div>
</div>
<div class="separator-h"></div>
</div>
</div>
<div class="cell-group">
<div class="table-header">
<div class="normal-header">
<div class="title">{{$t('customService.insuranceQuery.t6Title')}}</div>
<div class="guide" :class="{rotate180 : !insuranceForm.f5}" @click="insuranceForm.f5 = !insuranceForm.f5"></div>
</div>
</div>
<div class="table-content" :class="{hide : !insuranceForm.f5}">
<div class="data-line">
<div class="td w2">{{$t('customService.insuranceQuery.t6PaymentPeriod')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.t6PaymentMethod')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.t6ClosingDate')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.t6PaymentAmount')}}</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="td w2">首期</div>
<div class="td w2">現金</div>
<div class="td w2">2020-1-1</div>
<div class="td w2">HK$2,000</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="td w2">第二期</div>
<div class="td w2">現金</div>
<div class="td w2">2020-1-1</div>
<div class="td w2">HK$2,000</div>
</div>
</div>
</div>
<div class="empty-line"></div>
</div>
<div class="panel" :class="{activity : activity == 'm2'}">m2</div>
<div class="panel" :class="{activity : activity == 'm3'}">m3</div>
<div class="panel" :class="{activity : activity == 'm4'}">m4</div>
<div class="panel" :class="{activity : activity == 'm5'}">m5</div>
<div class="panel" :class="{activity : activity == 'm6'}">m6</div>
</div>
</div>
</template>
<script src="./custom-service.js"></script>
<style lang="scss" scoped>
@import "./custom-service.scss";
</style>
\ No newline at end of file
......@@ -113,6 +113,14 @@ const routes = [
title: ''
}
},
{
path: '/custom/service',
name: 'customService',
component: () => import('./pages/custom-service/custom-service.vue'),
meta: {
title: '保单查询'
}
},
{
path: '/demo',
......