Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
36a311e1 by simon
Options

默认提交

1 parent 88a5d542
Inline Side-by-side
Showing 22 changed files with 890 additions and 148 deletions
......@@ -15,24 +15,24 @@ module.exports = {
list: [{
name: "register",
path: "/register",
type : "noAuth",
type: "noAuth",
value: ""
}, {
name: "login",
path: "/login",
type : "noAuth",
type: "noAuth",
value: ""
},
{
name: "modify password",
path: "",
type : "auth",
type: "auth",
value: ""
},
{
name: "logout",
path: "",
type : "auth",
type: "auth",
value: "logout"
},
]
......@@ -148,7 +148,7 @@ module.exports = {
placeHolder: "請輸入11位手機號碼",
areaCode: "+86"
}],
coutTips : "{second}秒後重新獲取",
coutTips: "{second}秒後重新獲取",
title: "歡迎註冊一賬通",
title2: "請設置新的密碼",
mobilePlaceholder: "请输入8位手机号码",
......@@ -191,8 +191,8 @@ module.exports = {
email: "電郵地址",
question: "問題或意見",
questionPlaceHolder: "（字數不超過500字）",
orderNo:"保單編號",
orderNoPlaceHolder:"如您為平安客戶，請提供保單編號",
orderNo: "保單編號",
orderNoPlaceHolder: "如您為平安客戶，請提供保單編號",
contactTime: "期望聯絡時間",
notice1: "本表格所收集的個人資料根據「平安人壽香港個人資料收集聲明」處理及只會被用作於聯絡 閣下之用。然而所收集的個人資料未經您明確授權將不會轉移至「平安人壽香港個人資料收集聲明」列明以外之第三者機構。您可選擇不向我們提供所需的個人資料，惟這樣可能導致我們不能聯絡您。您亦可根據「平安人壽香港個人資料收集聲明」之權利查閱及更正個人資料。",
notice2: "本人現確認明白並同意本人的個人資料根據中銀人壽個人資料收集聲明作以上述用途。",
......@@ -311,6 +311,118 @@ module.exports = {
},
]
},
policyChangeGuide: {
notice: "如需做其他保單變更聯繫客服（聯繫客服超鏈接跳轉公司聯繫信息頁）",
head1: "項目",
head2: "具體內容",
head3: "申請資格人",
head4: "受理時間",
head5: "應備材料",
download: "下載文檔",
form: [{
project: "退保",
content: "在猶豫期後解除合同，公司將退還保單現金價值或未滿期凈保費。（待產品精算確認）",
applicant: "投保人",
receptionTime: "保單效力終止前",
materialList: [{
name: "保險單",
},
{
name: "申請書",
type: 1,
},
{
name: "投保人有效身份證件",
},
{
name: "存折银行卡相关",
}
],
},
{
project: "猶豫期退保",
content: "在猶豫期內提出解除合同，公司會無息退還全部保費",
applicant: "投保人",
receptionTime: "猶豫期結束前",
materialList: [{
name: "保險單",
},
{
name: "申請書",
type: 1,
},
{
name: "投保人有效身份證件",
},
{
name: "存折银行卡相关",
},
{
name: "首期保費發票",
}
],
},
{
project: "客戶資料變更",
projectType: 1,
path: "/custom/service",
query: {
q: "m42"
},
content: "投保人、受保人、受益人的個人信息變更",
applicant: "投保人",
receptionTime: "不限",
materialList: [{
name: "申請書",
type: 1,
},
{
name: "必要的證明材料",
}
],
},
{
project: "聯系方式變更",
projectType: 1,
path: "/custom/service",
query: {
q: "m43"
},
content: "地址、電話等信息的變更",
applicant: "投保人",
receptionTime: "不限",
materialList: [{
name: "申請書",
type: 1,
},
{
name: "投保人有效身份證件",
}
],
},
{
project: "交費方式變更",
content: "更改保單的續期交費方式或交費賬號",
applicant: "投保人",
receptionTime: "保單交費期滿前",
materialList: [{
name: "申請書",
type: 1,
},
{
name: "保險單",
}
],
},
]
},
policyChangeContact: {
phone: "聯繫電話",
address: "聯繫地址",
email: "E-Mail",
checkTips: "本人不同意接收宣傳信息",
submit: "確認修改",
},
contactUs: {
service: {
center: {
......@@ -344,6 +456,9 @@ module.exports = {
menu2: "Pay premium",
menu3: "Query policy",
menu4: "Change policy",
menu41: "保單變更指引",
menu42: "聯系方式變更",
menu43: "客戶資料變更",
menu5: "Claim report",
menu6: "Reservation service",
menu7: "Suggestions",
......
......@@ -34,7 +34,8 @@ module.exports = {
path: "",
type: "auth",
value: "logout"
}]
}
]
},
navList: [{
name: "產品介紹",
......@@ -147,7 +148,7 @@ module.exports = {
placeHolder: "請輸入11位手機號碼",
areaCode: "+86"
}],
coutTips : "{second}秒後重新獲取",
coutTips: "{second}秒後重新獲取",
title: "歡迎註冊一賬通",
title2: "請設置新的密碼",
mobilePlaceholder: "請輸入8位手機號碼",
......@@ -190,8 +191,8 @@ module.exports = {
email: "電郵地址",
question: "問題或意見",
questionPlaceHolder: "（字數不超過500字）",
orderNo:"保單編號",
orderNoPlaceHolder:"如您為平安客戶，請提供保單編號",
orderNo: "保單編號",
orderNoPlaceHolder: "如您為平安客戶，請提供保單編號",
contactTime: "期望聯絡時間",
notice1: "本表格所收集的個人資料根據「平安人壽香港個人資料收集聲明」處理及只會被用作於聯絡 閣下之用。然而所收集的個人資料未經您明確授權將不會轉移至「平安人壽香港個人資料收集聲明」列明以外之第三者機構。您可選擇不向我們提供所需的個人資料，惟這樣可能導致我們不能聯絡您。您亦可根據「平安人壽香港個人資料收集聲明」之權利查閱及更正個人資料。",
notice2: "本人現確認明白並同意本人的個人資料根據中銀人壽個人資料收集聲明作以上述用途。",
......@@ -310,6 +311,118 @@ module.exports = {
},
]
},
policyChangeGuide: {
notice: "如需做其他保單變更聯繫客服（聯繫客服超鏈接跳轉公司聯繫信息頁）",
head1: "項目",
head2: "具體內容",
head3: "申請資格人",
head4: "受理時間",
head5: "應備材料",
download: "下載文檔",
form: [{
project: "退保",
content: "在猶豫期後解除合同，公司將退還保單現金價值或未滿期凈保費。（待產品精算確認）",
applicant: "投保人",
receptionTime: "保單效力終止前",
materialList: [{
name: "保險單",
},
{
name: "申請書",
type: 1,
},
{
name: "投保人有效身份證件",
},
{
name: "存折银行卡相关",
}
],
},
{
project: "猶豫期退保",
content: "在猶豫期內提出解除合同，公司會無息退還全部保費",
applicant: "投保人",
receptionTime: "猶豫期結束前",
materialList: [{
name: "保險單",
},
{
name: "申請書",
type: 1,
},
{
name: "投保人有效身份證件",
},
{
name: "存折银行卡相关",
},
{
name: "首期保費發票",
}
],
},
{
project: "客戶資料變更",
projectType: 1,
path: "/custom/service",
query: {
q: "m42"
},
content: "投保人、受保人、受益人的個人信息變更",
applicant: "投保人",
receptionTime: "不限",
materialList: [{
name: "申請書",
type: 1,
},
{
name: "必要的證明材料",
}
],
},
{
project: "聯系方式變更",
projectType: 1,
path: "/custom/service",
query: {
q: "m43"
},
content: "地址、電話等信息的變更",
applicant: "投保人",
receptionTime: "不限",
materialList: [{
name: "申請書",
type: 1,
},
{
name: "投保人有效身份證件",
}
],
},
{
project: "交費方式變更",
content: "更改保單的續期交費方式或交費賬號",
applicant: "投保人",
receptionTime: "保單交費期滿前",
materialList: [{
name: "申請書",
type: 1,
},
{
name: "保險單",
}
],
},
]
},
policyChangeContact: {
phone: "聯繫電話",
address: "聯繫地址",
email: "E-Mail",
checkTips: "本人不同意接收宣傳信息",
submit: "確認修改",
},
contactUs: {
service: {
center: {
......@@ -343,6 +456,9 @@ module.exports = {
menu2: "繳付保費",
menu3: "保單查詢",
menu4: "保單變更",
menu41: "保單變更指引",
menu42: "聯系方式變更",
menu43: "客戶資料變更",
menu5: "理賠申請",
menu6: "預約服務",
menu7: "投訴受理",
......
......@@ -34,7 +34,8 @@ module.exports = {
path: "",
type: "auth",
value: "logout"
}]
}
]
},
navList: [{
name: "产品介绍",
......@@ -147,7 +148,7 @@ module.exports = {
placeHolder: "请输入11位手机号码",
areaCode: "+86"
}],
coutTips : "{second}秒后重新获取",
coutTips: "{second}秒后重新获取",
title: "欢迎注册一账通",
title2: "请设置新的密码",
mobilePlaceholder: "请输入8位手机号码",
......@@ -190,8 +191,8 @@ module.exports = {
email: "电邮地址",
question: "问题或意见",
questionPlaceHolder: "（字数不超过500字）",
orderNo:"保单编号",
orderNoPlaceHolder:"如您为平安客户，请提供保单编号",
orderNo: "保单编号",
orderNoPlaceHolder: "如您为平安客户，请提供保单编号",
contactTime: "期望联络时间",
notice1: "本表格所收集的个人资料根据「平安人寿香港个人资料收集声明」处理及只会被用作于联络 阁下之用。然而所收集的个人资料未经您明确授权将不会转移至「平安人寿香港个人资料收集声明」列明以外之第三者机构。您可选择不向我们提供所需的个人资料，惟这样可能导致我们不能联络您。您亦可根据「平安人寿香港个人资料收集声明」之权利查阅及更正个人资料。",
notice2: "本人现确认明白并同意本人的个人资料根据中银人寿个人资料收集声明作以上述用途。",
......@@ -311,7 +312,118 @@ module.exports = {
},
]
},
policyChangeGuide: {
notice: "如需做其他保单变更联系客服（联系客服超链接跳转公司联系信息页）",
head1: "项目",
head2: "具体内容",
head3: "申请资格人",
head4: "受理时间",
head5: "应备材料",
download: "下载文档",
form: [{
project: "退保",
content: "在犹豫期后解除合同，公司将退还保单现金价值或未满期净保费。（待产品精算确认）",
applicant: "投保人",
receptionTime: "保单效力终止前",
materialList: [{
name: "保险单",
},
{
name: "申请书",
type: 1,
},
{
name: "投保人有效身份证件",
},
{
name: "存折银行卡相关",
}
],
},
{
project: "犹豫期退保",
content: "在犹豫期内提出解除合同，公司会无息退还全部保费",
applicant: "投保人",
receptionTime: "犹豫期结束前",
materialList: [{
name: "保险单",
},
{
name: "申请书",
type: 1,
},
{
name: "投保人有效身份证件",
},
{
name: "存折银行卡相关",
},
{
name: "首期保费发票",
}
],
},
{
project: "客户资料变更",
projectType: 1,
path: "/custom/service",
query: {
q: "m42"
},
content: "投保人、受保人、受益人的个人信息变更",
applicant: "投保人",
receptionTime: "不限",
materialList: [{
name: "申请书",
type: 1,
},
{
name: "必要的证明材料",
}
],
},
{
project: "联系信息变更",
projectType: 1,
path: "/custom/service",
query: {
q: "m43"
},
content: "地址、电话等信息的变更",
applicant: "投保人",
receptionTime: "不限",
materialList: [{
name: "申请书",
type: 1,
},
{
name: "投保人有效身份证件",
}
],
},
{
project: "交费方式变更",
content: "更改保单的续期交费方式或交费账号",
applicant: "投保人",
receptionTime: "保单交费期满前",
materialList: [{
name: "申请书",
type: 1,
},
{
name: "保险单",
}
],
},
]
},
policyChangeContact: {
phone: "联系电话",
address: "联系地址",
email: "E-Mail",
checkTips: "本人不同意接收宣传信息",
submit: "确认修改",
},
contactUs: {
service: {
center: {
......@@ -345,6 +457,9 @@ module.exports = {
menu2: "缴付保费",
menu3: "保单查询",
menu4: "保单变更",
menu41: "保单变更指引",
menu42: "联系方式变更",
menu43: "客户资料变更",
menu5: "理赔申请",
menu6: "预约服务",
menu7: "投诉受理",
......
......@@ -19,6 +19,7 @@
}
&-content {
color: $cFontGray;
background-color: #f2f2f2;
text-align: center;
border: solid 1px #f2f2f2;
......
......@@ -35,121 +35,6 @@
</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>
......
......@@ -23,10 +23,10 @@
<option>電話</option>
<option>電郵</option>
</select>
<option v-else class="ipt phone-ipt">
<select v-else class="ipt phone-ipt">
<option>电话</option>
<option>电邮</option>
</option>
</select>
</div>
</div>
......
import api from '@/api/api'
import {
httpGet,
httpPost
} from '@/api/fetch-api.js'
export default {
data() {
return {
key: 'value'
}
},
components: {},
methods: {
initData() {}
},
mounted() {},
created() {}
}
@import '@/styles/_support';
.container {
@extend .bb;
padding: 1.833333rem 3rem 2.5rem 2.166667rem;
width: 770px;
}
.border {
border-radius: 8px;
border: solid 1px #f2f2f2;
background-color: #ffffff;
}
.form {
display: flex;
flex-wrap: wrap;
&-item {
position: relative;
margin-bottom: 2.333333rem;
&:last-child{
margin-bottom: 0;
}
.label {
color: #f05a23;
display: flex;
align-items: center;
margin-bottom: .7rem;
.icon {
width: 2.166667rem;
display: flex;
}
img {
height: 1rem;
}
}
.ipt-wrap {
position: relative;
// input和下拉
.ipt {
@extend .bb;
width: 42.833333rem;
height: 3.5rem;
border: solid 1px #dcdddd;
background-color: #ffffff;
border-radius: 3.5rem;
padding: 0 2.083333rem;
}
.name-ipt {
width: 13.666667rem;
}
.phone-ipt {
width: 13.666667rem;
}
.mail-ipt {}
// 长文本
.textarea {
min-height: 8.75rem;
border-radius: 1rem;
@extend .bb;
padding: .75rem;
}
.down-arrow {
position: absolute;
top: 1.6rem;
right: 2rem;
background-image: url('~@/assets/images/reservation/re-down-arrow.png');
width: 1rem;
height: .666667rem;
pointer-events: none;
cursor: default;
}
.check-icon{
display: inline-block;
margin-left: 2.166667rem;
margin-right: .666667rem;
}
}
}
}
.submit-btn {
width: 13.583333rem;
height: 4.083333rem;
margin: 2.5rem auto 0;
line-height: 4.083333rem;
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, #ec6429, #ec6429);
text-align: center;
font-size: 1.291667rem;
letter-spacing: .129167rem;
color: #ffffff;
border-radius: 3.5rem;
cursor: pointer;
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, #ec6429, #ec6429);
}
<template>
<div class="container border">
<div class="form">
<div class="form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/policy-change-contact/icon-pcc-phone.png"></div>{{$t('policyChangeContact.phone')}}
</div>
<div class="ipt-wrap">
<input placeholder="香港（852）2888 8888" class="ipt mail-ipt" type="text">
<img class="check-icon" src="@/assets/images/reservation/un-check.png">
<span>{{$t("policyChangeContact.checkTips")}}</span>
</div>
</div>
<div class="form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/policy-change-contact/icon-pcc-location.png"></div>{{$t('policyChangeContact.address')}}
</div>
<div class="ipt-wrap">
<input placeholder="深圳市益田路5033號" class="ipt mail-ipt" type="text">
<img class="check-icon" src="@/assets/images/reservation/un-check.png">
<span>{{$t("policyChangeContact.checkTips")}}</span>
</div>
</div>
<div class="form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/policy-change-contact/icon-pcc-mail.png"></div>{{$t('policyChangeContact.email')}}
</div>
<div class="ipt-wrap">
<input placeholder="123@ping.com.cn" class="ipt mail-ipt" type="text">
<img class="check-icon" src="@/assets/images/reservation/un-check.png">
<span>{{$t("policyChangeContact.checkTips")}}</span>
</div>
</div>
</div>
<div class="submit-btn pointer">
{{$t("policyChangeContact.submit")}}
</div>
</div>
</template>
<script src="./policy-change-contact.js"></script>
<style lang="scss" scoped>
@import "./policy-change-contact.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: {
onProjectHandler(item) {
if (item.projectType == 1) {
this.$router.push({
path: item.path,
query: item.query
})
}
},
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 {
color: $cFontGray;
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: 60.833333rem;
height: 1px;
background-color: #dcdddd;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
z-index: 11;
}
.grid {
position: relative;
padding: 1.583333rem 2rem;
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: .25rem;
display: inline-block;
}
}
.ww {
position: relative;
line-height: 1.5;
.h-line {
position: absolute;
width: 100%;
height: 1px;
background-color: #dcdddd;
bottom: 0;
left: 0;
}
}
.w1 {}
.w5 {
.material {
@extend .fcc;
}
.h-line {
width: 9rem;
}
}
}
}
.t1 {
background-color: #f2f2f2;
}
.w1 {
width: 10.333333rem;
}
.w2 {
width: 16.916667rem;
}
.w3 {
width: 9.75rem;
}
.w4 {
width: 13.583333rem;
}
.w5 {
flex: 1;
}
}
.orange {
background-color: $cOrange;
}
.act {
color: $cOrange;
@extend .pointer;
text-decoration: underline;
}
.notice {
display: flex;
align-items: center;
.icon {
display: inline-block;
width: 1rem;
;
margin-right: .5rem;
}
margin-top: 1.25rem;
}
<template>
<div class="policy-change-guide-container">
<div class="table">
<div class="table-header orange">
<div class="table-header-item w1">{{$t('policyChangeGuide.head1')}}</div>
<div class="table-header-item w2">{{$t('policyChangeGuide.head2')}}</div>
<div class="table-header-item w3">{{$t('policyChangeGuide.head3')}}</div>
<div class="table-header-item w4">{{$t('policyChangeGuide.head4')}}</div>
<div class="table-header-item w5">{{$t('policyChangeGuide.head5')}}</div>
</div>
<div class="table-content">
<div v-for="(item,index) in i18n.policyChangeGuide.form" :key="index" class="table-content-item">
<div v-if="index < i18n.policyChangeGuide.form.length-1" class="hl"></div>
<div class="ww w1">
<div class="grid">
<div class="v-line"></div>
<span :class="{'act':item.projectType == 1}" @click="onProjectHandler(item)" v-html="item.project"> {{item.project}}</span>
</div>
</div>
<div class="ww w2">
<div class="grid">
<div class="v-line"></div>
<span v-html="item.content"> {{item.content}}</span>
</div>
</div>
<div class="ww w3">
<div class="grid">
<div class="v-line"></div>
<span v-html="item.applicant"> {{item.applicant}}</span>
</div>
</div>
<div class="ww w4">
<div class="grid">
<div class="v-line"></div>
<span v-html="item.receptionTime"> {{item.receptionTime}}</span>
</div>
</div>
<div class="ww w5">
<div class="grid">
<div class="material" :class="{'pointer':item2.type == 1}" v-for="(item2,index2) in item.materialList" :key="index2">
<img v-if="item2.type == 1" class="icon" src="@/assets/images/common-form/icon-cf-download.png" alt="">
<span :class="{'act':item2.type == 1}" v-html="item2.name">{{ item2.name }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="notice">
<img class="icon" src="@/assets/images/policy-change-guide/icon-pcg-notice.png" alt=""> {{$t("policyChangeGuide.notice")}}
</div>
</div>
</template>
<script src="./policy-change-guide.js"></script>
<style lang="scss" scoped>
@import "./policy-change-guide.scss";
</style>
import api from '@/api/api'
import {
httpGet,
httpPost
} from '@/api/fetch-api.js'
export default {
data() {
return {
key: 'value'
}
},
components: {},
methods: {
initData() {}
},
mounted() {},
created() {}
}
@import '@/styles/_support';
.content {}
.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;
}
<template>
<div class="container border">
policy-change-information
</div>
</template>
<script src="./policy-change-information.js"></script>
<style lang="scss" scoped>
@import "./policy-change-information.scss";
</style>
......@@ -11,10 +11,14 @@ import PaymentType from './components/payment-type.vue'
import ComplaintAcceptance from './components/complaint-acceptance.vue'
import CommonForm from './components/common-form.vue'
import PolicyChangeGuide from './components/policy-change-guide.vue'
import PolicyChangeContact from './components/policy-change-contact.vue'
import PolicyChangeInformation from './components/policy-change-information.vue'
export default {
data() {
return {
activity: "m7"
activity: "m1",
}
},
methods: {
......@@ -24,24 +28,32 @@ export default {
path: path
});
},
changeActivity(a) {
this.activity = a;
this.$route.query.q = a;
console.log(this.$route.query);
changeActivity(val) {
this.checkQuery(val)
},
checkQuery(a) {
if (a == "m4") {
a = "m41"
}
this.$router.push({
path: "/custom/service",
query: {
q: a
}
});
}
},
watch: {
$route() {
// let activity = this.$route.query.q;
// if (activity) {
// this.$set(this, 'activity', activity);
// }
let activity = this.$route.query.q;
if (activity) {
this.$set(this, 'activity', activity);
}
}
},
created() {
// let activity = this.$route.query.q;
// activity = activity ? activity : "m1";
// this.activity = activity;
let activity = this.$route.query.q;
this.$set(this, 'activity', activity);
},
components: {
ContactUs,
......@@ -49,6 +61,9 @@ export default {
reservation,
PaymentType,
ComplaintAcceptance,
CommonForm
CommonForm,
PolicyChangeGuide,
PolicyChangeContact,
PolicyChangeInformation
}
}
......
......@@ -75,6 +75,10 @@
}
}
.activity {
color: $cOrange;
}
}
.right-panel {
......
<template>
<div class="content">
<div class="left-panel">
<div v-for="(item,index) in 8" :key="index" class="menu-item" :class="{'activity' : activity == 'm' + (index+1)}" @click="changeActivity('m'+(index+1))">
<!-- 保存变更列表 -->
<template v-if="activity && activity.indexOf('m4') != -1 ">
<div v-for="(item,index) in 3" :key="item.id" class="menu-item" :class="{'activity' : activity == 'm4' + (index+1)}" @click="changeActivity('m4'+(index+1))">
<div class="tit">{{$t('customService.menu4'+(index+1))}}</div>
<div v-if="activity == 'm4' + (index+1)" class="sel" :class="{'sel-first':index == 0}"></div>
</div>
</template>
<!-- 主列表 -->
<template v-else>
<div v-for="(item,index) in 8" :key="item.id" class="menu-item" :class="{'activity' : activity == 'm' + (index+1)}" @click="changeActivity('m'+(index+1))">
<div class="icon-wrap">
<img class="icon" :src="require('@/assets/images/insurance-query/m'+(index+1) + (activity == 'm' + (index+1) ?'':'-unselect') +'.png')">
</div>
<div class="tit">{{$t('customService.menu'+(index+1))}}</div>
<div v-if="activity == 'm' + (index+1)" class="sel" :class="{'sel-first':index == 0}"></div>
</div>
</template>
</div>
<div class="right-panel">
<div class="panel" :class="{activity : activity == 'm1'}">
......@@ -19,7 +31,17 @@
<div class="panel" :class="{activity : activity == 'm3'}">
<insurance-query></insurance-query>
</div>
<div class="panel" :class="{activity : activity == 'm4'}"></div>
<!-- <div class="panel" :class="{activity : activity == 'm4'}"></div> -->
<div class="panel" :class="{activity : activity == 'm41'}">
<policy-change-guide></policy-change-guide>
</div>
<div class="panel" :class="{activity : activity == 'm42'}">
<policy-change-contact></policy-change-contact>
</div>
<div class="panel" :class="{activity : activity == 'm43'}">
<policy-change-information></policy-change-information>
</div>
<div class="panel" :class="{activity : activity == 'm5'}"></div>
<div class="panel" :class="{activity : activity == 'm6'}">
<reservation></reservation>
......