Skip to content

dev / pingan-life-index-pro

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

默认提交

1 parent bdf9b528
Inline Side-by-side
Showing 13 changed files with 433 additions and 22 deletions
......@@ -168,6 +168,19 @@ module.exports = {
}
},
},
complaintAcceptance: {
name: "姓名",
namePlaceholder: "姓名",
contactType: "聯絡方式",
email: "電郵地址",
question: "問題或意見",
questionPlaceHolder: "（字數不超過500字）",
orderNo:"保單編號",
orderNoPlaceHolder:"如您為平安客戶，請提供保單編號",
contactTime: "期望聯絡時間",
notice1: "本表格所收集的個人資料根據「平安人壽香港個人資料收集聲明」處理及只會被用作於聯絡 閣下之用。然而所收集的個人資料未經您明確授權將不會轉移至「平安人壽香港個人資料收集聲明」列明以外之第三者機構。您可選擇不向我們提供所需的個人資料，惟這樣可能導致我們不能聯絡您。您亦可根據「平安人壽香港個人資料收集聲明」之權利查閱及更正個人資料。",
notice2: "本人現確認明白並同意本人的個人資料根據中銀人壽個人資料收集聲明作以上述用途。",
},
reservation: {
name: "姓名",
namePlaceholder: "姓名",
......
......@@ -168,6 +168,19 @@ module.exports = {
}
},
},
complaintAcceptance: {
name: "姓名",
namePlaceholder: "姓名",
contactType: "聯絡方式",
email: "電郵地址",
question: "問題或意見",
questionPlaceHolder: "（字數不超過500字）",
orderNo:"保單編號",
orderNoPlaceHolder:"如您為平安客戶，請提供保單編號",
contactTime: "期望聯絡時間",
notice1: "本表格所收集的個人資料根據「平安人壽香港個人資料收集聲明」處理及只會被用作於聯絡 閣下之用。然而所收集的個人資料未經您明確授權將不會轉移至「平安人壽香港個人資料收集聲明」列明以外之第三者機構。您可選擇不向我們提供所需的個人資料，惟這樣可能導致我們不能聯絡您。您亦可根據「平安人壽香港個人資料收集聲明」之權利查閱及更正個人資料。",
notice2: "本人現確認明白並同意本人的個人資料根據中銀人壽個人資料收集聲明作以上述用途。",
},
reservation: {
name: "姓名",
namePlaceholder: "姓名",
......
......@@ -168,6 +168,19 @@ module.exports = {
}
},
},
complaintAcceptance: {
name: "姓名",
namePlaceholder: "姓名",
contactType: "联络方式",
email: "电邮地址",
question: "问题或意见",
questionPlaceHolder: "（字数不超过500字）",
orderNo:"保单编号",
orderNoPlaceHolder:"如您为平安客户，请提供保单编号",
contactTime: "期望联络时间",
notice1: "本表格所收集的个人资料根据「平安人寿香港个人资料收集声明」处理及只会被用作于联络 阁下之用。然而所收集的个人资料未经您明确授权将不会转移至「平安人寿香港个人资料收集声明」列明以外之第三者机构。您可选择不向我们提供所需的个人资料，惟这样可能导致我们不能联络您。您亦可根据「平安人寿香港个人资料收集声明」之权利查阅及更正个人资料。",
notice2: "本人现确认明白并同意本人的个人资料根据中银人寿个人资料收集声明作以上述用途。",
},
reservation: {
name: "姓名",
namePlaceholder: "姓名",
......
import api from '@/api/api'
import {
httpGet,
httpPost
} from '@/api/fetch-api.js'
export default {
data() {
return {
key: 'value',
isHkCus : true,
checked : false
}
},
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';
.top-space {
// height: 4.25rem;
}
.reservation-container {
width: 64.25rem;
border-radius: .666667rem;
border: solid .083333rem #f2f2f2;
background-color: #ffffff;
padding: 2.666667rem 2.833333rem 2.833333rem 2rem;
}
.form {
display: flex;
// justify-content: space-between;
flex-wrap: wrap;
&-item {
position: relative;
// padding: 0 1.25rem 0 2.166667rem;
margin-bottom: 2.333333rem;
.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: 100%;
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;
}
}
}
// 不换行
&-item2 {
display: flex;
margin-bottom: 2.25rem;
.label {
min-width: 12.833333rem;
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: center;
flex-wrap: wrap;
.label {
// min-width: 8.833333rem;
}
.ipt-wrap {
width: 50%;
margin-left: 1.75rem;
input {
// font-size: 1.166667rem;
letter-spacing: .116667rem;
color: #4c4948;
font-family: Arial;
}
}
.ipt-wrap2{
flex: 1;
}
.cont {
.calendar {
img {
max-width: 96%;
}
}
}
.mt8 {
margin-top: .666667rem;
margin-left: 10rem;
}
}
}
.form2{
.form-item{
margin-right: 1.166667rem;
&:last-child{
margin-right: 0;
}
}
}
.notice {
margin-top: 4rem;
@extend .bb;
padding: 0 1rem;
&-item {
position: relative;
line-height: 2;
letter-spacing: 1.2px;
margin-bottom: 1rem;
&-icon {
position: absolute;
top: .5rem;
}
}
}
.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);
}
input {
padding: 0 2.083333rem;
color: #333333;
font-size: 12px;
}
<template>
<div class="reservation-container">
<!-- 顶头iterm -->
<div class="form form2">
<div class="form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-name.png"></div> {{$t('complaintAcceptance.name')}}
</div>
<div class="ipt-wrap">
<input :placeholder="$t('complaintAcceptance.namePlaceholder')" class="ipt name-ipt" type="text">
</div>
</div>
<div class="form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-contact.png"></div>{{$t('complaintAcceptance.contactType')}}
</div>
<div class="ipt-wrap">
<div class="down-arrow"></div>
<select v-if="locale !='zh'" class="ipt phone-ipt">
<option>電話</option>
<option>電郵</option>
</select>
<option v-else class="ipt phone-ipt">
<option>电话</option>
<option>电邮</option>
</option>
</div>
</div>
<div class="form-item flex1">
<div class="label">
<div class="icon"><img src="@/assets/images/complaint-acceptance/icon-ca-mail.png"></div>{{$t('complaintAcceptance.email')}}
</div>
<div class="ipt-wrap">
<input class="ipt mail-ipt" type="text">
</div>
</div>
</div>
<!-- 长文本 -->
<div class="form">
<div class="pure-u-1 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-arrow-reservation.png"></div>{{$t('complaintAcceptance.question')}}
</div>
<div class="ipt-wrap">
<textarea :placeholder="$t('complaintAcceptance.questionPlaceHolder')" class="ipt textarea"></textarea>
</div>
</div>
<!-- 保单编号 非必填 -->
<div class="pure-u-1 form-item form-item3">
<div class="label">
<div class="icon"><img src="@/assets/images/complaint-acceptance/icon-ca-no.png"></div>{{$t('complaintAcceptance.orderNo')}}
</div>
<div class="ipt-wrap ipt-wrap2">
<input :placeholder="$t('complaintAcceptance.orderNoPlaceHolder')" class="ipt" type="text">
</div>
</div>
<!-- 联络时间 -->
<div class="form-item form-item3">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-calendar.png"></div>{{$t('complaintAcceptance.contactTime')}}
</div>
<div class="ipt-wrap">
<input value="2019/10/16" class="ipt" type="text">
</div>
<div class="mt8">
<div class="label">
</div>
<div class="calendar">
<img src="@/assets/images/reservation/re-calendar.png">
</div>
</div>
</div>
</div>
<!-- 通知 -->
<div class="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('complaintAcceptance.notice1')}}
</p>
<p class="notice-item pointer" @click="checked = !checked">
<img v-if="!checked" class="notice-item-icon" src="@/assets/images/reservation/un-check.png">
<img v-else class="notice-item-icon" src="@/assets/images/reservation/check.png"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{$t('complaintAcceptance.notice2')}}
</p>
</div>
<!-- 提交按钮 -->
<div class="submit-btn">
{{$t('customService.reservation.submitBtn')}}
</div>
</div>
</template>
<script src="./complaint-acceptance.js"></script>
<style lang="scss" scoped>
@import "./complaint-acceptance.scss";
</style>
......@@ -124,21 +124,27 @@ input {
align-items: center;
flex-wrap: wrap;
.label {
min-width: 8.833333rem;
// min-width: 8.833333rem;
}
.ipt-wrap {
width: 50%;
margin-left: 1.75rem;
input {
font-size: 1.166667rem;
// font-size: 1.166667rem;
letter-spacing: .116667rem;
color: #4c4948;
font-family: Arial;
}
}
.ipt-wrap2{
flex: 1;
}
.cont {
.calendar {
img {
......@@ -146,10 +152,11 @@ input {
}
}
}
}
.mt8 {
margin-top: .666667rem;
.mt8 {
margin-top: .666667rem;
margin-left: 10rem;
}
}
}
......
......@@ -73,6 +73,7 @@
</div>
</div>
<!-- 联络时间 -->
<div class="pure-u-1 form-item">
<div class="form-item3">
<div class="label">
......@@ -81,12 +82,12 @@
<div class="ipt-wrap">
<input value="2019/10/16" class="ipt" type="text">
</div>
</div>
<div class="form-item3 mt8">
<div class="label">
</div>
<div class="calendar">
<img src="@/assets/images/reservation/re-calendar.png">
<div class="mt8">
<div class="label">
</div>
<div class="calendar">
<img src="@/assets/images/reservation/re-calendar.png">
</div>
</div>
</div>
</div>
......@@ -100,8 +101,7 @@
</p>
<p class="notice-item pointer" @click="checked = !checked">
<img v-if="!checked" class="notice-item-icon" src="@/assets/images/reservation/un-check.png">
<img v-else class="notice-item-icon" src="@/assets/images/reservation/check.png">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{$t('reservation.notice2')}}
<img v-else class="notice-item-icon" src="@/assets/images/reservation/check.png"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{$t('reservation.notice2')}}
</p>
</div>
......
......@@ -8,12 +8,13 @@ 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 ComplaintAcceptance from './components/complaint-acceptance.vue'
import CommonForm from './components/common-form.vue'
export default {
data() {
return {
activity: "m1"
activity: "m7"
}
},
methods: {
......@@ -31,22 +32,23 @@ export default {
},
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;
// activity = activity ? activity : "m1";
// this.activity = activity;
},
components: {
ContactUs,
InsuranceQuery,
reservation,
PaymentType,
ComplaintAcceptance,
CommonForm
}
}
......
......@@ -24,7 +24,9 @@
<div class="panel" :class="{activity : activity == 'm6'}">
<reservation></reservation>
</div>
<div class="panel" :class="{activity : activity == 'm7'}"></div>
<div class="panel" :class="{activity : activity == 'm7'}">
<complaint-acceptance></complaint-acceptance>
</div>
<div class="panel" :class="{activity : activity == 'm8'}">
<common-form></common-form>
</div>
......
......@@ -51,3 +51,7 @@
.bc{
text-align: center;
}
.flex1{
flex: 1;
}
......