Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
2d1755fc by simon
Options

更新内容 

首页内容

欠缺内容：
1.滑动动画
2.保费计算小工具
3.页首页脚
1 parent d94eb117
Inline Side-by-side
Showing 10 changed files with 355 additions and 68 deletions
......@@ -87,6 +87,8 @@ module.exports = {
// cms相关
// 首页联系方式
indexContact: "/pingan_hklife_webapi/policy/index/contact/save",
indexVideo: "/pingan_hklife_webapi/cms/indexVideo",
banner: "/pingan_hklife_webapi/cms/banner/list",
newsList: "/pingan_hklife_webapi/cms/news/list",
......@@ -109,6 +111,5 @@ module.exports = {
//首页产品列表
indexManageListApi: "/pingan_hklife_webapi/cms/index/manage",
//表单提交
indexContactApi:"/pingan_hklife_webapi/policy/index/contact/save"
};
......
......@@ -6,6 +6,7 @@ module.exports = {
Female: "Female",
Sex: "Sex",
Age: "Age",
Birthday: "Birthday",
},
message: {
login: 'Login',
......@@ -413,7 +414,15 @@ module.exports = {
Time: "Preferred contact time slot",
Inquiry: "Inquiry",
Submit: "Submit",
}
},
errorTips: {
e1: "Please select the collect title",
e2: "Please enter the collect name",
e3: "Please enter the collect mobile no",
e4: "Please enter the collect E-mail",
e5: "Please select the collect preferred contact time slot",
},
}
},
......
......@@ -6,6 +6,7 @@ module.exports = {
Female: "女性",
Sex: "性別",
Age: "年齡",
Birthday: "生日",
},
message: {
login: "Login",
......@@ -426,7 +427,16 @@ module.exports = {
Time: "理想聯絡時間",
Inquiry: "查詢事項",
Submit: "提交"
}
},
errorTips: {
e1: "請選擇稱呼",
e2: "請填寫姓名",
e3: "請填寫正確的聯絡電話",
e4: "請填寫正確的電郵地址",
e5: "請選擇理想聯絡時間",
},
}
},
complaintAcceptance: {
......
......@@ -6,6 +6,7 @@ module.exports = {
Age: "年龄",
Male: "男性",
Female: "女性",
Birthday: "生日",
},
message: {
login: "登入",
......@@ -410,7 +411,6 @@ module.exports = {
}
},
quote: {
quote: "立即报价",
want: "我想",
service: "联络客服",
......@@ -426,7 +426,14 @@ module.exports = {
Time: "理想联络时间",
Inquiry: "查询事项",
Submit: "提交"
}
},
errorTips: {
e1: "请选择称呼",
e2: "请填写姓名",
e3: "请正确的联络电话",
e4: "请填写正确的电邮地址",
e5: "请选择理想联络时间",
},
}
},
complaintAcceptance: {
......
......@@ -54,13 +54,13 @@ export default {
fileContentType: ""
},
errorTips: {
e1: "",
e2: "",
e3: "",
e4: "",
e5: "",
e6: "",
e7: ""
e1: "", // 电话号码
e2: "", // 地址
e3: "", // email
e4: "", // 国际地区取号
e5: "", // 电话区号
e6: "", // 省 中国大陆需要判断
e7: "", // 市 中国大陆需要判断
},
modalSimpleVisiable: false,
......
......@@ -12,11 +12,16 @@ import DatePicker from "@/components/date-picker/date-picker.vue";
import {
ddMMyyyy2yyyyMMdd
} from "@utils/utils.js";
import {
contactMethodCheck
} from "@utils/utils.js";
export default {
data() {
return {
key: "value",
PRODUCT_PRO_EASY: "PRODUCT_PRO_EASY", // 好医时
PRODUCT_REN_RICH: "PRODUCT_REN_RICH", // 平安福
// swiper
swiperOption: {
navigation: {
......@@ -43,28 +48,31 @@ export default {
// 投保
quoteData: {
gender: 1
gender: "",
birthday: ""
},
// 投保背景图
quoteBgUrl: "https://kdcdn.oss-cn-shenzhen.aliyuncs.com/temp/pingan-life/index-quote-bg-temp.png",
// quoteBgUrl: "https://kdcdn.oss-cn-shenzhen.aliyuncs.com/temp/pingan-life/index-quote-bg-temp.png",
// 表单
formData: {
gender: "",
birthDate: ""
title: "",
name: "",
mobile: "",
email: "",
contactTime: "",
inquiry: ""
},
// 性别列表
genderList: [{
n: "先生",
v: "M"
},
{
n: "女士",
v: "F"
}
],
// 错误提示
errTips: ""
errorTips: {
e1: "", // 称呼
e2: "", // 姓名
e3: "", // 联系电话
e4: "", // 電郵
e5: "", // 理想聯絡時間
e6: "", // 查詢事項
},
};
},
components: {
......@@ -78,6 +86,28 @@ export default {
return this.$i18n.messages && this.$i18n.locale ?
this.$i18n.messages[this.$i18n.locale] : {};
},
titleList() {
let result = [{
n: this.i18n.common.Male,
v: "M"
},
{
n: this.i18n.common.Female,
v: "F"
}
]
console.log("result:", result);
return result;
},
submitBtnDisabled() {
// let b1 = !this.selectedPolicies || this.selectedPolicies.length == 0;
// let b2 = !this.data.address && !this.data.email && !this.data.mobile;
let formData = this.formData;
let boo = !formData.title || !formData.name || !formData.mobile || !formData.email || !formData.contactTime;
return boo;
},
// 表格tab缩进计算
tableTapIndentation() {
let result = {};
......@@ -149,7 +179,7 @@ export default {
// });
// this.$set(this, "bannerList", bannerList);
// },
btnNavigateTo(type, link) {
btnNavigateTo(type, link, d) {
switch (type) {
case "none":
break;
......@@ -167,7 +197,8 @@ export default {
this.$router.push({
path: "/vhis",
query: {
p: link
p: link,
d: JSON.stringify(d)
}
});
break;
......@@ -218,10 +249,116 @@ export default {
*/
onQuoteHandler() {
// gotoVHIS();
if (this.curTab.relation == this.PRODUCT_PRO_EASY) {
let d = {
gender: this.quoteData.gender,
birthday: this.quoteData.birthday,
}
console.log("d:", d);
this.btnNavigateTo("vhis", this.curTab.lastBtnDescribe.l, d);
}
if (this.curTab.relation == this.PRODUCT_REN_RICH) {
this.$router.push({
path: "/gen/rich",
query: {}
});
}
},
// queryIndexManageListApi() {
/**
* 验证表单
*/
checkSubmit() {
if (this.submitBtnDisabled) return;
return new Promise((resolve, reject) => {
// },
this.errorTips = {
e1: "",
e2: "",
e3: "",
e4: "",
e5: "",
e6: "",
e7: ""
};
let formData = this.formData;
// 校验称呼
if (!formData.title) {
this.errorTips.e1 = this.i18n.index.contact.errorTips.e1;
}
// 校验姓名
if (!formData.name) {
this.errorTips.e2 = this.i18n.index.contact.errorTips.e2;
}
// 联系电话
if (formData.mobile) {
let hkMobile = contactMethodCheck("hkmobile", formData.mobile);
let zhMobile = contactMethodCheck("mobile", formData.mobile);
if (!hkMobile && !zhMobile) {
this.errorTips.e3 = this.i18n.index.contact.errorTips.e3;
}
} else {
this.errorTips.e3 = this.i18n.index.contact.errorTips.e3;
}
// 校验電郵
if (formData.email) {
if (formData.email && !contactMethodCheck("email", formData.email)) {
this.errorTips.e4 = this.i18n.index.contact.errorTips.e4;
}
} else {
this.errorTips.e4 = this.i18n.index.contact.errorTips.e4;
}
// 校验理想聯絡時間
if (!formData.contactTime) {
this.errorTips.e5 = this.i18n.index.contact.errorTips.e5;
}
// 查詢事項 不用校验
// if (!formData.inquiry) {
// this.errorTips.e6 = this.i18n.index.contact.errorTips.e6;
// }
let errorTips = this.errorTips;
if (!(errorTips.e1 && errorTips.e2 && errorTips.e3 && errorTips.e4 && errorTips.e5)) {
resolve();
}
});
},
/**
* 提交表单
*/
onSubmitContact() {
console.log("this.formData:", this.formData);
this.checkSubmit().then((result) => {
let formData = this.formData;
let data = {
sex: formData.title,
name: formData.name,
mobile: formData.mobile,
email: formData.email,
contactTime: formData.contactTime,
inquiry: formData.inquiry
}
console.log("data:", data);
httpPost({
url: api.indexContact,
data: data,
}).then((result) => {
console.log("indexContact result:", result);
}).catch((err) => {
});
})
},
initData() {
// this.fetchBanner().then(res => {
// this.bannerCandidateList = res;
......@@ -280,5 +417,22 @@ export default {
this.initData();
} catch (e) {}
});
}
},
watch: {
"formData.title": function () {
this.errorTips.e1 = "";
},
"formData.name": function () {
this.errorTips.e2 = "";
},
"formData.mobile": function () {
this.errorTips.e3 = "";
},
"formData.email": function () {
this.errorTips.e4 = "";
},
"formData.contactTime": function () {
this.errorTips.e5 = "";
},
},
};
......
......@@ -218,7 +218,16 @@
height: 540px;
}
.tit-wrap {
height: 670px;
display: flex;
// align-items: flex-end;
align-content: flex-end;
flex-wrap: wrap;
width: 100%;
.tit {
width: 100%;
font-size: 36px;
font-weight: bold;
text-align: center;
......@@ -235,11 +244,13 @@
color: #ffffff;
text-shadow: 0px 0px 16px rgba(0, 0, 0, 1);
}
}
.table {
// width: 1200px;
width: 1062px;
// background-color: wheat;
// display: none;
margin: 56px auto 0;
&-tab {
......@@ -321,6 +332,7 @@
.func {
}
// 性别和年龄选择
.func1 {
&-item {
display: flex;
......@@ -347,13 +359,23 @@
.age {
.ipt-wrap-linear {
width: 222px;
width: 250px;
.ipt-date {
padding: 0 24px;
width: 100%;
background-color: #ffffff;
border-radius: $borderRadius;
@include border-tans;
border-radius: 5px;
}
}
}
}
}
// 平安福保费计算
}
.arrow {
position: absolute;
width: 44px;
......@@ -444,9 +466,12 @@
width: 100%;
&-item {
.ipt-wrap-linear {
margin-bottom: 28px;
&-wrap {
margin-bottom: 36px;
position: relative;
}
.ipt-wrap-linear {
.cont {
.ipt {
text-align: center;
......@@ -472,6 +497,21 @@
}
}
}
.validator {
color: $cOrange2;
margin-top: 4px;
position: absolute;
left: 0;
display: flex;
align-items: center;
font-size: $fontSizeSmall-M2;
img {
display: inline-block;
margin-right: 4.8px;
}
}
.dear {
width: 40%;
margin-right: 26px;
......@@ -624,10 +664,10 @@
width: 100% !important;
border-right: none;
border-bottom: solid 2px #ffffff;
&:first-child{
&:first-child {
justify-content: center;
}
&:last-child{
&:last-child {
justify-content: center;
}
}
......@@ -666,7 +706,6 @@
.nav-tab {
font-size: $fontSize-M2;
&-item {
}
}
......
......@@ -73,12 +73,14 @@
</div>
<!-- 线上报价 -->
<div class="quote" :style="'background-image: url(' + quoteBgUrl + ');'">
<div class="space1"></div>
<div class="quote" :style="'background-image: url(' + curTab.pageMidImage + ');'">
<!-- <div class="space1"></div> -->
<div class="tit-wrap">
<div class="tit">{{curTab.pageMidTitle}}</div>
<div class="tit2">
{{curTab.pageMidDescribe}}
</div>
</div>
<!-- tab表格 -->
<div class="table" :class="{'table-1':dataList.length<=1}">
......@@ -105,36 +107,48 @@
</div>
</div>
<div class="panel panel-right">
<div class="func func1">
<div v-if="curTab.relation == PRODUCT_PRO_EASY " class="func func1">
<div class="func1-item">
<div class="k"> {{$t('common.Sex')}}</div>
<div class="gender">
<div class="gender-item" @click="onQuoteSexHandler(1)">
<div class="gender-item" @click="onQuoteSexHandler('M')">
{{$t('common.Male')}}
<img v-if="quoteData.gender == 1" src="@/assets/images/common/icon-male-act.png" alt />
<img v-if="quoteData.gender == 'M'" src="@/assets/images/common/icon-male-act.png" alt />
<img v-else src="@/assets/images/common/icon-male.png" alt />
</div>
<div class="gender-item" @click="onQuoteSexHandler(2)">
<div class="gender-item" @click="onQuoteSexHandler('F')">
{{$t('common.Female')}}
<img v-if="quoteData.gender == 2" src="@/assets/images/common/icon-female-act.png" alt />
<img v-if="quoteData.gender == 'F'" src="@/assets/images/common/icon-female-act.png" alt />
<img v-else src="@/assets/images/common/icon-female.png" alt />
</div>
</div>
</div>
<div class="func1-item">
<div class="k">{{$t('common.Age')}}</div>
<div class="k">{{$t('common.Birthday')}}</div>
<div class="age">
<div class="ipt-wrap-linear">
<div class="down-arrow"></div>
<div class="cont">
<el-select class="ipt" v-model="formData.gender" :placeholder="$t('common.Age')">
<!-- <el-select class="ipt" v-model="quoteData.age" :placeholder="$t('common.Age')">
<el-option v-for="(item, index) in 100" :key="index" :label="item" :value="item"></el-option>
</el-select>
</el-select> -->
<date-picker class="ipt-date" :placeholder="$t('index.contact.form.Time') + '*'" v-model="quoteData.birthday" :filtModel="['future']" :cusStyle="{
border: 'none !important',
'background-color': 'transparent !important',
padding: '16px 24px',
color: '#606266',
'text-align': 'center'
}">
</date-picker>
</div>
</div>
</div>
</div>
</div>
<div v-if="curTab.relation == PRODUCT_REN_RICH " class="func func2">
<!-- PRODUCT_REN_RICH -->
</div>
</div>
</div>
</div>
......@@ -157,46 +171,68 @@
<div class="form">
<div class="form-item fl">
<!-- 称呼 -->
<div class="ipt-wrap-linear dear">
<div class="form-item-wrap dear">
<div class="ipt-wrap-linear">
<div class="down-arrow"></div>
<div class="cont">
<el-select class="ipt" v-model="formData.gender" :placeholder="$t('index.contact.form.Title') + '*'">
<el-option v-for="(item, index) in genderList" :key="index" :label="item.n" :value="item.v"></el-option>
<el-select class="ipt" v-model="formData.title" :placeholder="$t('index.contact.form.Title') + '*'">
<el-option v-for="(item, index) in titleList" :key="index" :label="item.n" :value="item.v"></el-option>
</el-select>
</div>
</div>
<div class="validator" v-if="errorTips.e1.length > 0">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e1}}
</div>
</div>
<!-- 姓名 -->
<div class="ipt-wrap-linear name">
<div class="form-item-wrap name">
<div class="ipt-wrap-linear ">
<div class="cont">
<input autocomplete="new-password" class="ipt" type="text" :placeholder="$t('index.contact.form.Name') + '*'" />
<input v-model="formData.name" autocomplete="new-password" class="ipt" type="text" :placeholder="$t('index.contact.form.Name') + '*'" />
</div>
</div>
<div class="validator" v-if="errorTips.e2.length > 0">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e2}}
</div>
</div>
</div>
<div class="form-item">
<!-- 联系电话 -->
<div class="form-item">
<div class="form-item-wrap">
<div class="ipt-wrap-linear">
<div class="cont">
<input autocomplete="new-password" class="ipt" type="text" :placeholder="$t('index.contact.form.PhoneNumber') + '*'" />
<input v-model="formData.mobile" autocomplete="new-password" class="ipt" type="text" :placeholder="$t('index.contact.form.PhoneNumber') + '*'" />
</div>
</div>
<div class="validator" v-if="errorTips.e3.length > 0">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e3}}
</div>
</div>
</div>
<div class="form-item">
<!-- 電郵 -->
<div class="form-item">
<div class="form-item-wrap">
<div class="ipt-wrap-linear">
<div class="cont">
<input class="ipt" type="text" :placeholder="$t('index.contact.form.Email') + '*'" />
<input v-model="formData.email" class="ipt" type="text" :placeholder="$t('index.contact.form.Email') + '*'" />
</div>
</div>
<div class="validator" v-if="errorTips.e4.length > 0">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e4}}
</div>
</div>
</div>
<div class="form-item">
<!-- 理想聯絡時間 -->
<div class="form-item">
<div class="form-item-wrap">
<div class="ipt-wrap-linear">
<div class="down-arrow"></div>
<div class="cont">
<date-picker class="ipt-date" :formatter="'dd-MM-yyyy'" :placeholder="$t('index.contact.form.Time') + '*'" v-model="formData.birthDate" :filtModel="['future']" :cusStyle="{
<date-picker class="ipt-date" :placeholder="$t('index.contact.form.Time') + '*'" v-model="formData.contactTime" :filtModel="['future']" :cusStyle="{
border: 'none !important',
'background-color': 'transparent !important',
padding: '16px 24px',
......@@ -205,25 +241,35 @@
}"></date-picker>
</div>
</div>
<div class="validator" v-if="errorTips.e5.length > 0">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e5}}
</div>
</div>
</div>
<div class="form-item">
<!-- 查詢事項 -->
<div class="form-item">
<div class="form-item-wrap">
<div class="ipt-wrap-linear">
<div class="cont">
<textarea class="ipt textarea" :placeholder="$t('index.contact.form.Inquiry')"></textarea>
<textarea v-model="formData.inquiry" class="ipt textarea" :placeholder="$t('index.contact.form.Inquiry')"></textarea>
</div>
</div>
<div class="validator" v-if="errorTips.e6.length > 0">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e6}}
</div>
</div>
</div>
</div>
<!-- 错误提示 -->
<div class="err-tips">
<!-- <div class="err-tips">
<template v-if="errTips">
<img class="icon" src="@/assets/images/common/icon-alert-i.png" alt />
{{ errTips }}
</template>
</div>
<div class="submit-btn">{{ $t("index.contact.form.Submit") }}</div>
</div> -->
<div @click="onSubmitContact" class="submit-btn" :class="{disabled: submitBtnDisabled}">{{ $t("index.contact.form.Submit") }}</div>
</div>
<img class="pic-mobile pic-mobile-botom" src="@/assets/images/index/index-mobile.png" alt />
</div>
......
......@@ -24,7 +24,15 @@ function encryptContent(obj) {
return securityContent;
};
/**
* 路由上，p代表产品，d代表参数。
* d 是一个json结构，对应的数据结构是：
* name: 名字
gender: 性别，M：男；F：女
birthday: yyyy-MM-dd
certiType: 参考用户体系码表
certiNo:
*/
export default {
data() {
return {
......@@ -82,15 +90,28 @@ export default {
}
url += "&partnerId=PA001&productCode=" + productCode;
let data = null;
// console.log(JSON.stringify(this.information));
if (this.information && this.information.idType && this.information.idNo) {
let data = {
if (this.$route.query.d) {
try {
let queryData = JSON.parse(this.$route.query.d);
data = queryData;
} catch (e) {
console.error("paramster 'd' is not a json ", this.$route.query.d);
}
} else if (this.information && this.information.idType && this.information.idNo) {
data = {
name: this.information.fullName,
gender: this.information.sex,
birthday: this.information.birthDate,
certiType: this.information.policyIdType ? this.information.policyIdType : this.information.idType,
certiNo: this.information.idNo
};
}
console.log("before into vhis, and data = ", data);
if (data) {
url += "&data=" + encryptContent(data);
}
// url = "http://www.baidu.com"
......
......@@ -147,7 +147,7 @@
height: 15px;
pointer-events: none;
cursor: default;
z-index: 900;
z-index: 1001;
}
.eye {
......