Commit 376f65f1 authored by 郭志伟's avatar 郭志伟 Committed by 郝聪敏

feat: 首页完善

parent 93944ff6
......@@ -4,7 +4,7 @@
* @Description: 华贵大麦2020定期寿险
* @Date: 2020-07-27 15:46:37
* @LastEditors: gzw
* @LastEditTime: 2020-08-07 15:20:28
* @LastEditTime: 2020-08-10 14:51:04
*/
import goodsBg from "@/assets/images/goods/detail/shouxian/bg.png";
......@@ -82,7 +82,7 @@ export default {
popupArray: [
{
title: "保险条款",
url: "http://mangguo-contract.qthbx.com/huatai-bao-xian-tiao-kuan-v1/"
url: "http://mangguo-contract.qthbx.com/hua-gui-bao-xian-tiao-kuan-v1/"
},
{
title: "健康告知",
......@@ -102,6 +102,10 @@ export default {
{
title: "自动续保服务协议",
url: "http://mangguo-contract.qthbx.com/zi-dong-xu-bao-fu-wu-xie-yi-v1/"
},
{
title: "人身保险投保提示书",
url: "http://mangguo-contract.qthbx.com/hua-gui-ren-shen-bao-xian-tou-bao-ti-shi-shu-v1/"
}
],
caseInfo: {
......
......@@ -4,7 +4,7 @@
* @Description:众安50万意外险
* @Date: 2020-07-27 15:46:37
* @LastEditors: gzw
* @LastEditTime: 2020-08-07 16:25:27
* @LastEditTime: 2020-08-10 14:59:04
*/
import goodsBg from "@/assets/images/goods/detail/yiwaixian/bg.png";
......@@ -129,7 +129,7 @@ export default {
popupArray: [
{
title: "保险条款",
url: "http://mangguo-contract.qthbx.com/huatai-bao-xian-tiao-kuan-v1/"
url: "http://mangguo-contract.qthbx.com/zhong-an-baoxiantiaokuan-v1/"
},
{
title: "健康告知",
......
......@@ -13,7 +13,9 @@
<small>AI小果:为您提供30s快速测评</small>
</div>
<div class="ai-test-cell-btn">
<cr-button type="warning">开始测评</cr-button>
<cr-button type="warning" @click="parent.$router.push('/home/smart-measure')">
开始测评
</cr-button>
</div>
</cr-row>
</div>
......
......@@ -136,6 +136,9 @@
font-weight: 600;
color: #242629;
line-height: 31px;
display: block;
position: relative;
z-index: 2;
}
.Hc-card-result {
......@@ -158,13 +161,15 @@
width: 80px;
height: 30px;
background: #FFFFFF;
&.active {
opacity: 0.4;
}
&:nth-child(3) {
border-radius: 20px 0 0 20px;
}
&:nth-child(4) {
opacity: 0.4;
// opacity: 0.4;
border-radius: 0 20px 20px 0;
}
......@@ -183,6 +188,7 @@
.Hc-card-image {
position: absolute;
z-index: 1;
right: 15px;
bottom: 0;
width: 132px;
......
......@@ -8,14 +8,14 @@
src="@/assets/images/home/activity@2x.png"
/>
<div class="home-service">
<div class="home-service-item">
<router-link tag="div" to="/home/smart-measure" class="home-service-item">
<svg-icon icon-class="risk-assessment" class-name="Hs-item-svg" />
<span class="Hs-item-text">智能风险评测</span>
</div>
<div class="home-service-item">
</router-link>
<router-link tag="div" to="/consultant" class="home-service-item">
<svg-icon icon-class="consult-service" class-name="Hs-item-svg" />
<span class="Hs-item-text">1对1咨询服务</span>
</div>
</router-link>
</div>
<div class="home-select">
<p class="home-select-title">芒果保险精选推荐</p>
......@@ -38,13 +38,23 @@
<div class="home-classroom">
<p class="home-classroom-title">芒果小课堂</p>
<div class="home-classroom-card">
<p class="Hc-card-question">医保到底能保多少?</p>
<a :href="articleList[0].url" target="_blank" class="Hc-card-question">
{{ articleList[0].title }}
</a>
<p class="Hc-card-result">已有1.8万人认为有用</p>
<div class="Hc-card-operation">
<div
class="Hc-card-operation"
:class="{ active: articleUseful === '0' }"
@click="clickUsefulOption('0')"
>
<svg-icon class-name="Hcc-operation-svg" icon-class="useful" />
<span class="Hcc-operation-text">有用</span>
</div>
<div class="Hc-card-operation">
<div
class="Hc-card-operation"
:class="{ active: articleUseful === '1' }"
@click="clickUsefulOption('1')"
>
<svg-icon class-name="Hcc-operation-svg" icon-class="useless" />
<span class="Hcc-operation-text">没用</span>
</div>
......@@ -56,22 +66,14 @@
src="@/assets/images/home/teacher@2x.png"
/>
</div>
<div class="home-classroom-item">
<div class="Hc-item-left">
<p>保险公司公司会倒闭吗?</p>
<p>芒果小课堂</p>
</div>
<cr-image
class="Hc-item-right"
width=""
height=""
fit="cover"
src="@/assets/images/home/teacher@2x.png"
/>
</div>
<div class="home-classroom-item">
<a
:href="item.url"
class="home-classroom-item"
v-for="(item, index) in articleList.slice(1)"
:key="index"
>
<div class="Hc-item-left">
<p>科学投保要知道以下几大原则</p>
<p>{{ item.title }}</p>
<p>芒果小课堂</p>
</div>
<cr-image
......@@ -81,81 +83,73 @@
fit="cover"
src="@/assets/images/home/teacher@2x.png"
/>
</div>
</a>
</div>
<div class="home-phone">
<p>客服电话:XXXXXXXX</p>
<p>客服电话:010-82194734</p>
<p>服务时间:9:00-21:00</p>
</div>
<div class="home-logo">
<svg-icon icon-class="logo" class-name="home-logo-svg" />
<p class="home-logo-info">全天候保险代理股份有限公司</p>
<p class="home-logo-info">京ICP备XXXXXXXX号</p>
</div>
<copyright :logo="true" />
<tabbar></tabbar>
</div>
</template>
<script>
import GoodList from "@/components/GoodList/index";
import good01 from "@/assets/images/goods/goods-01.png";
import good02 from "@/assets/images/goods/goods-02.png";
import good03 from "@/assets/images/goods/goods-03.png";
import good04 from "@/assets/images/goods/goods-04.png";
import Tabbar from "@/components/Tabbar";
const goodsList = [
{
id: 1,
img: good01,
title: "万家保·百万医疗险",
sub: "产品优势",
glory: "好评榜第1名",
price: "0",
unit: "",
allow: true
},
{
id: 2,
img: good02,
title: "万家保·重疾轻症险",
sub: "100种重疾+40种轻症",
glory: "",
price: "3",
unit: "首月",
allow: true
},
{
id: 3,
img: good03,
title: "万家保·综合意外险",
sub: "产品优势",
glory: "开车必备",
price: "0",
unit: "",
allow: true
},
{
id: 4,
img: good04,
title: "华贵大麦2020定期寿险",
sub: "产品优势",
glory: "",
price: "0",
unit: "",
allow: true
}
];
import Copyright from "@/components/Copyright";
import { list } from "@/api/product";
import goodsList from "@/api/goodsList.mock";
export default {
name: "Home",
components: {
GoodList,
Tabbar
Tabbar,
Copyright
},
data() {
return {
goodsList
goodsList,
articleUseful: localStorage.getItem("articleUseful"),
articleList: [
{
title: "25~45岁间该怎么买保险",
url: "https://mp.weixin.qq.com/s/yG_n8cnvsFd9NPIYZycYvg"
},
{
title: "有了医保,还需要买商业保险吗?",
url: "https://mp.weixin.qq.com/s/6GZTTDwwHMHaIKFib7QGfg"
},
{
title: "常见保险有几类,作用是什么?",
url: "https://mp.weixin.qq.com/s/rIhVsxnxcxHfiYHIwq11hQ"
}
]
};
},
mounted() {
this.getList();
},
methods: {
clickUsefulOption(val) {
this.articleUseful = val;
localStorage.setItem("articleUseful", val);
},
async getList() {
const res = await list();
if (res) {
goodsList.forEach(item => {
res.forEach(it => {
if (it.productNo === item.id) {
item.price = it.downPayPrice ?? item.price;
item.regularPrice = it.regularPrice ?? 0;
// item.title = it.title ?? item.title;
}
});
});
this.goodsList = goodsList;
}
}
}
};
</script>
......
......@@ -335,12 +335,19 @@
<a href="javascript:;" @click="openIframePupop(1)">转账授权书</a>
</div>
<div class="pay-protocol-link pay-protocol-link_wrap">
<a href="javascript:;" @click="openIframePupop(3)">人身保险投保提示书</a>
<a href="javascript:;" @click="openIframePupop(8)">人身保险投保提示书</a>
<a href="javascript:;" @click="openIframePupop(3)">税收居民身份证明</a>
<a href="javascript:;" @click="openIframePupop(3)">风控查询授权书</a>
</div>
</div>
</go-insure-dialog>
<popup-with-iframe
v-model="popupShow"
:title="pupopData.title"
:content="pupopData.content"
:url="pupopData.url"
>
</popup-with-iframe>
</div>
</template>
......@@ -350,6 +357,7 @@ import CrRadioBtn from "@/components/CrRadioBtn";
import PopupPicker from "@/components/PopupPicker";
import PopupAreaPicker from "@/components/PopupAreaPicker";
import PopupDatePicker from "@/components/PopupDatePicker";
import PopupWithIframe from "@/components/PopupWithIframe";
import Stepper from "@/components/Stepper";
import GoInsureDialog from "@/views/Goods/Detail/modules/GoInsureDialog";
import detailPayMixin from "@/views/Goods/Detail/modules/detailPay.mixin";
......@@ -370,6 +378,7 @@ export default {
PopupPicker,
PopupAreaPicker,
PopupDatePicker,
PopupWithIframe,
Stepper
},
data() {
......@@ -378,6 +387,8 @@ export default {
headerInfo,
calTimer: null,
goInsureState: false,
popupShow: false,
currentPupopIndex: null,
goodActionInfo: {},
goodBuyModalInfo: [],
policyFormData: JSON.parse(sessionStorage.getItem("policyFormData") || "{}"),
......@@ -439,6 +450,9 @@ export default {
};
},
watch: {
popupShow(val) {
if (!val && this.currentPupopIndex === 6) this.currentPupopIndex = null;
},
headerInfo: {
deep: true,
handler(val) {
......@@ -459,9 +473,7 @@ export default {
clearTimeout(this.calTimer);
}
this.calTimer = setTimeout(() => {
this.$refs.policyForm.validate().then(() => {
this.calFee();
});
this.calFee();
}, 600);
}
},
......@@ -480,6 +492,10 @@ export default {
},
computed: {
...mapState(["showAuthXyqb"]),
pupopData() {
const { popupArray, currentPupopIndex } = this;
return popupArray[currentPupopIndex] || {};
},
formDataCpu() {
return JSON.parse(JSON.stringify(this.formData));
}
......@@ -505,6 +521,8 @@ export default {
},
nextStep() {
this.subFromData = JSON.parse(JSON.stringify(this.formData));
this.subFromData.insuredUserInfo.socialSecurity =
this.subFromData.insuredUserInfo.socialSecurity === "1" ? true : false;
this.generateOrder();
},
relationChange(relation = this.formData.insuredUserInfo.relation) {
......@@ -528,6 +546,10 @@ export default {
...{ name, idNo, userInfoSecId, socialSecurity: socialSecurity ? "1" : "0" }
};
},
openIframePupop(index) {
this.currentPupopIndex = index;
this.popupShow = true;
},
getParamFromSession() {
const {
amountInsured: insuredAmount,
......@@ -568,7 +590,13 @@ export default {
paymentPeriod: payPeriod,
payType
} = this.formData.productItem;
const { idNo, socialSecurity } = this.formData.insuredUserInfo;
let idNo = "";
const { socialSecurity } = this.formData.insuredUserInfo;
if (this.formData.insuredUserInfo.relation !== "0") {
idNo = this.formData.insuredUserInfo.idNo;
} else {
idNo = this.formData.holderUserInfo.idNo;
}
if (!amountInsured || !policyPeriod || !payPeriod || !payType || !idNo || !socialSecurity)
return;
const _param = {
......@@ -576,7 +604,7 @@ export default {
productUserInfo: {
userInfo: {
idNo,
socialSecurity
socialSecurity: socialSecurity === "1" ? true : false
},
productItem: {
amountInsured,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment