Skip to content

M
mongo-ui
Commit 3eb69823 authored by 郝聪敏's avatar 郝聪敏
Browse files
Options

Merge branch 'goods-other' into 'master' 

Goods other

See merge request !25
parents ba6fdcf4 3be0e743
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 11799 additions and 9232 deletions
src/App.vue
View file @ 3eb69823
<template>
<div id="app">
<router-view />
<div class="loading-container">
<cr-loading v-show="isLoading" class="loading" size="24px">加载中...</cr-loading>
<div class="loading-container" v-show="isLoading">
<cr-loading class="loading" size="24px">加载中...</cr-loading>
</div>
</div>
</template>
......@@ -16,30 +16,30 @@ export default {
...mapActions(["setIsLoading"])
},
mounted() {
console.log(this.isLoading)
console.log(this.isLoading);
}
};
</script>
<style lang="less" scoped>
@import "./style/index.less";
@import "./style/index.less";
.loading-container {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
justify-content:center;
align-items: center;
.loading {
padding: 6px;
border-radius: 6px;
background-color: rgba(0, 0, 0, 0.5);
.loading-container {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
.loading {
padding: 6px;
border-radius: 6px;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
@{deep} .cr-loading--text {
color: #fff;
@{deep} .cr-loading--text {
color: #fff;
}
}
}
}
</style>
src/api/detail.huagui.shouxian.js 0 → 100644
View file @ 3eb69823
This diff is collapsed.
src/api/detail.taikang.yiliaobaozhang.js 0 → 100644
View file @ 3eb69823
This diff is collapsed.
src/api/detail.zhongan.yiliaobaozhang.js 0 → 100644
View file @ 3eb69823
This diff is collapsed.
src/api/goodsList.mock.js
View file @ 3eb69823
......@@ -9,13 +9,14 @@ export default [
children: [
{
id: 1,
itype: "mi",
img: good01,
title: "万家保·百万医疗险",
sub: "产品优势",
glory: "好评榜第1名",
price: "0",
unit: "",
allow: false
allow: true
}
]
},
......@@ -25,6 +26,7 @@ export default [
children: [
{
id: 1,
itype: "cii",
img: good02,
title: "万家保·重疾轻症险",
sub: "100种重疾+40种轻症",
......@@ -32,16 +34,6 @@ export default [
price: "3",
unit: "首月",
allow: true
},
{
id: 1,
img: good02,
title: "百年康惠保2.0重大疾病险",
sub: "产品优势",
glory: "",
price: "0",
unit: "",
allow: false
}
]
},
......@@ -51,13 +43,14 @@ export default [
children: [
{
id: 1,
itype: "ai",
img: good03,
title: "万家保·综合意外险",
sub: "产品优势",
glory: "开车必备",
price: "0",
unit: "",
allow: false
allow: true
}
]
},
......@@ -67,13 +60,14 @@ export default [
children: [
{
id: 1,
itype: "li",
img: good04,
title: "华贵大麦2020定期寿险",
sub: "产品优势",
glory: "",
price: "0",
unit: "",
allow: false
allow: true
}
]
}
......
src/api/order.js 0 → 100644
View file @ 3eb69823
import req from "@/service/http";
// 下单流程
export const placeOrder = {
// 创建保单订单
create: params => {
return req.post("policy_order", params);
},
// 获取订单支付信息
pay: params => {
return req.post("pay/go", params);
},
// 轮询支付结果
polling: params => {
return req.get("pay/result", params);
}
};
src/api/user.js 0 → 100644
View file @ 3eb69823
import req from "@/service/http";
// 手机号登录
export const loginByPhone = param => {
return req.post("user/login", param);
};
// 信用钱包用户自动登录
export const loginByxyqb = param => {
return req.get("xyqb_user_info", param);
};
// 微信用户获取openid
export const getwxOpenId = param => {
return req.post("wechat/code", param);
};
// 获取短信验证码
export const getCaptchaSms = param => {
return req.post("captcha/sms", param);
};
// 获取图形验证码
export const getCaptchaImg = param => {
return req.post("captcha/image", param);
};
src/components/CompactCellGroup.vue
View file @ 3eb69823
......@@ -11,7 +11,12 @@
:key="index"
:title="item.title.tpl || item.title"
:value="item.value.tpl || item.value"
:class="{ 'compact-cell': 1, 'compact-cell_br': item.value.longTxt }"
:class="{
'compact-cell': 1,
'compact-cell_br': item.value.longTxt,
'compact-cell_divider': item.divider,
'compact-cell_inline': item.inline
}"
@click="cellClick(item)"
>
<template v-if="item.title.needSlot" slot="title">
......@@ -20,6 +25,7 @@
<template v-if="item.value.needSlot">
<div v-html="item.value.tpl"></div>
</template>
<cr-divider :hairline="false" :style="{ color: '#ECE9E9' }" v-if="item.divider" />
</cr-cell>
</cr-cell-group>
</template>
......@@ -71,6 +77,7 @@ export default {
border-radius: @border-radius-md;
padding: @padding-md;
@{deep} .cr-cell {
justify-content: space-between;
&-group {
&::after {
display: none;
......@@ -78,9 +85,11 @@ export default {
}
&__title {
color: @gray-5;
flex: none;
}
&__value {
color: @black;
flex: none;
}
}
}
......@@ -111,5 +120,26 @@ export default {
width: 70%;
}
}
&_divider {
height: 32px;
overflow: initial;
@{deep} .cr-cell__value {
width: 100%;
overflow: initial;
}
.cr-divider {
position: absolute;
top: 0;
left: -15px;
width: calc(100% + 30px);
}
}
&_inline {
@{deep} .cr-cell__title {
color: @gray-4 !important;
font-size: @font-size-12 !important;
margin-bottom: 10px;
}
}
}
</style>
src/components/GoodAction.vue
View file @ 3eb69823
......@@ -7,11 +7,17 @@
</a>
</div>
<div class="good-action-content">
<h6>首月<strong>3</strong>元</h6>
<small>次月5.6元/月起</small>
<slot>
<h6 v-if="content.title">
{{ content.title[2] || "" }}
<strong>{{ content.title[0] || "" }}</strong>
{{ content.title[1] || "" }}
</h6>
<small v-if="content.sub">{{ content.sub }}</small>
</slot>
</div>
<div class="good-action-right">
<cr-button type="warning" round @click="rightClick">我要投保</cr-button>
<cr-button type="warning" round @click="rightClick" native-type="submit">我要投保</cr-button>
</div>
</div>
</template>
......@@ -40,7 +46,7 @@ export default {
}
},
content: {
type: String,
type: [String, Object],
default: ""
}
},
......
src/components/GoodList/index.less
View file @ 3eb69823
......@@ -53,6 +53,7 @@
}
}
&-img {
position: relative;
img {
display: block;
position: relative;
......
src/components/GoodList/index.vue
View file @ 3eb69823
......@@ -93,7 +93,7 @@ export default {
if (!item.allow) {
return;
}
this.$router.push({ path: "/goods/detail", query: { id: item.id } });
this.$router.push({ path: "/goods/detail", query: { id: item.id, type: item.itype } });
}
}
};
......
src/components/Modal.vue
View file @ 3eb69823
......@@ -129,7 +129,7 @@ export default {
display: flex;
justify-content: space-between;
align-items: center;
padding: @padding-lg;
padding: 0 @padding-lg @padding-lg;
&.split {
.cr-button {
width: 48%;
......
src/components/PopupAreaPicker.vue 0 → 100644
View file @ 3eb69823
<template>
<div class="picker-wrap">
<div
class="picker-wrap-txt"
:class="{ placeholder: !String(pickerValShow) }"
@click="show = true"
>
{{ pickerValShow || placeholder }}
</div>
<cr-popup v-model="show" position="bottom" get-container="body">
<cr-area ref="area" :list="areaList" @cancel="onCancel" @confirm="onConfirm" />
</cr-popup>
</div>
</template>
<script>
import popupPickerMixin from "../mixins/popupPicker.mixin.js";
import areaList from "@qg/cherry-ui/src/area/demo/china";
export default {
name: "PopupAreaPicker",
mixins: [popupPickerMixin],
data() {
return {
refName: "area",
areaList
};
},
methods: {
handleResult(res) {
let valShow = [];
let val = [];
res.forEach(item => {
valShow.push(item.name);
val.push(item.code);
});
this.pickerValShow = valShow.join(",");
this.pickerVal = val;
}
}
};
</script>
<style lang="less">
.picker-wrap {
width: 100%;
&-txt {
height: 24px;
color: #333;
font-size: 14px;
}
.placeholder {
color: #ccc;
}
}
</style>
src/components/PopupDatePicker.vue 0 → 100644
View file @ 3eb69823
<template>
<div class="picker-wrap">
<div
class="picker-wrap-txt"
:class="{ placeholder: !String(pickerValShow) }"
@click="show = true"
>
{{ pickerValShow || placeholder }}
</div>
<cr-popup v-model="show" position="bottom" get-container="body">
<cr-date-picker ref="datepicker" @confirm="onConfirm" @cancel="onCancel" />
</cr-popup>
</div>
</template>
<script>
import popupPickerMixin from "../mixins/popupPicker.mixin.js";
export default {
name: "PopupDatePicker",
mixins: [popupPickerMixin],
data() {
return {
refName: "datepicker"
};
},
methods: {
handleResult(res) {
this.pickerValShow = res;
this.pickerVal = res;
}
}
};
</script>
<style lang="less">
.picker-wrap {
width: 100%;
&-txt {
height: 24px;
color: #333;
font-size: 14px;
}
.placeholder {
color: #ccc;
}
}
</style>
src/components/PopupPicker.vue 0 → 100644
View file @ 3eb69823
<template>
<div class="picker-wrap">
<div
class="picker-wrap-txt"
:class="{ placeholder: !String(pickerValShow) }"
@click="show = true"
>
{{ pickerValShow || placeholder }}
</div>
<cr-popup v-model="show" position="bottom" get-container="body">
<cr-picker
ref="picker"
:columns="pickerData"
show-toolbar
@cancel="onCancel"
@confirm="onConfirm"
/>
</cr-popup>
</div>
</template>
<script>
import popupPickerMixin from "../mixins/popupPicker.mixin.js";
export default {
name: "PopupPicker",
mixins: [popupPickerMixin],
methods: {
handleResult(res) {
this.pickerValShow = res[0];
this.pickerVal = res[1];
}
}
};
</script>
<style lang="less">
.picker-wrap {
width: 100%;
&-txt {
height: 24px;
color: #333;
font-size: 14px;
}
.placeholder {
color: #ccc;
}
}
</style>
src/config/dev.config.js
View file @ 3eb69823
export default {
basicHost: "https://talos-vcc.liangkebang.net"
basicHost: "http://yapi.quantgroups.com/mock/329/",
wxAppId: "wx514de17b23d53a20"
};
src/config/prod.config.js
View file @ 3eb69823
export default {
basicHost: "https://talos-vcc.liangkebang.net"
basicHost: "https://talos-vcc.liangkebang.net",
wxAppId: "wx514de17b23d53a20"
};
src/mixins/dialogMixin.js deleted 100644 → 0
View file @ ba6fdcf4
export default {
props: ["showmodal"],
methods: {
modalClose() {
this.$emit("update:showmodal", false);
}
}
};
src/mixins/popupPicker.mixin.js 0 → 100644
View file @ 3eb69823
/*
* @Description: PopupPicker mixin
* @Date: 2020-07-28 19:46:31
* @LastEditors: gzw
* @LastEditTime: 2020-07-28 20:33:52
*/
// TODO 默认值需要处理
const VALUE_CHANGE_EVENT = "input";
export default {
name: "PopupPicker",
props: {
value: null,
placeholder: {
type: String,
default: "请选择"
},
pickerData: {
type: Array,
default() {
return [];
}
}
},
data() {
return {
show: false,
pickerVal: "",
refreshed: false,
refName: "picker",
pickerValShow: ""
};
},
watch: {
show(val) {
if (val && !this.refreshed) {
this.refreshed = true;
this.$refs[this.refName].refreshColumns();
}
}
// value: {
// immediate: true,
// handler(val) {
// this.pickerValShow = val[0];
// this.pickerVal = val[1];
// }
// }
},
methods: {
onCancel() {
this.show = false;
},
onConfirm(picker, res) {
this.handleResult(res);
this.$emit(VALUE_CHANGE_EVENT, String(this.pickerVal));
this.onCancel();
}
}
};
src/router/index.js
View file @ 3eb69823
......@@ -12,7 +12,7 @@ const routes = [
{
path: "/home",
name: "Home",
component: () => import("../views/Home/index.vue")
component: () => import("../views/Home/index.vue")
},
{
path: "/goods",
......@@ -59,6 +59,11 @@ const routes = [
name: "Detail",
component: () => import("../views/Policy/Detail/index.vue")
},
{
path: "/policy/add",
name: "AddPolicy",
component: () => import("../views/Policy/Add/index.vue")
},
{
path: "/policy/payment-record",
name: "PaymentRecord",
......@@ -74,6 +79,11 @@ const routes = [
name: "Introduction",
component: () => import("../views/Introduction/index.vue")
},
{
path: "/paytest",
name: "Introduction",
component: () => import("../views/paytest")
},
{
path: "*",
redirect: "/goods"
......
src/service/cherry-ui.js
View file @ 3eb69823
......@@ -19,7 +19,7 @@ const {
// Uploader,
Notify,
Picker,
// Area,
Area,
// Dialog,
Field,
Checkbox,
......@@ -32,8 +32,8 @@ const {
// CardList,
// Search,
// List,
// Stepper,
// DatePicker,
Stepper,
DatePicker,
// SwipeCell,
Form,
Tabbar,
......@@ -55,12 +55,17 @@ Vue.use(Col);
Vue.use(Popup);
Vue.use(Divider);
Vue.use(Toast);
Vue.use(Notify);
Vue.use(Picker);
Vue.use(Area);
Vue.use(Field);
Vue.use(Checkbox);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Switch);
Vue.use(Tag);
Vue.use(Stepper);
Vue.use(DatePicker);
Vue.use(Form);
Vue.use(Tabbar);
Vue.use(TabbarItem);
......
src/service/http.js
View file @ 3eb69823
......@@ -2,7 +2,8 @@
import store from "@/store";
import axios from "axios";
import cherry from "@qg/cherry-ui";
import config from '../config';
import config from "../config";
// import qs from "qs";
const CancelToken = axios.CancelToken;
const { Notify } = cherry;
......@@ -10,7 +11,7 @@ const { Notify } = cherry;
axios.defaults.baseURL = config.basicHost;
axios.defaults.timeout = 30000;
let cancel;
// let cancel;
let pending = {};
let reqNum = 0;
......@@ -27,7 +28,7 @@ function clearRequest() {
reqNum--;
if (reqNum <= 0) {
store.dispatch("setIsLoading", false);
};
}
}
//请求拦截器
......@@ -36,9 +37,9 @@ axios.interceptors.request.use(
beforeRequest();
//发起请求时，取消掉当前正在进行的相同请求
if (pending[config.url]) {
pending[config.url]('取消重复请求')
pending[config.url]("取消重复请求");
}
config.cancelToken = new CancelToken(c => pending[config.url] = c);
config.cancelToken = new CancelToken(c => (pending[config.url] = c));
return config;
},
......@@ -53,9 +54,10 @@ axios.interceptors.response.use(
afterRequest();
delete pending[response.config.url];
if (response.data.code === 0) {
return response.data.data;
}
Notify({ type: 'danger', message: response.data.msg || '后端服务异常' });
return response.data;
// return response.data.data;
}
Notify({ type: "danger", message: response.data.msg || "后端服务异常" });
},
err => {
if (err && err.response) {
......@@ -100,7 +102,7 @@ axios.interceptors.response.use(
err.message = `连接错误${err.response.status}`;
}
} else {
if (err.message == '操作取消') {
if (err.message == "操作取消") {
err.response = {};
err.response.status = 409;
err.response.data = {};
......@@ -110,10 +112,51 @@ axios.interceptors.response.use(
}
}
Notify({ type: 'danger', message: err.message })
Notify({ type: "danger", message: err.message });
return Promise.resolve(err.response);
}
);
export default axios;
export default {
axios,
//get请求
get(url, params = {}) {
return new Promise((resolve, reject) => {
axios({
method: "get",
// url: url + "?" + qs.stringify(params),
url: url,
params,
headers: {
"Content-Type": "application/json"
}
})
.then(res => {
resolve(res);
})
.catch(e => {
reject(e);
});
});
},
//post请求
post(url, params = {}) {
return new Promise((resolve, reject) => {
axios({
method: "post",
url,
data: params,
headers: {
"Content-Type": "application/json"
}
})
.then(res => {
resolve(res);
})
.catch(e => {
reject(e);
});
});
}
};
src/service/pay.service.js 0 → 100644
View file @ 3eb69823
/*
* @Description: 支付微信h5, jsapi, 第三方收银台，跳转）
* @Date: 2020-07-28 15:03:52
* @LastEditors: gzw
* @LastEditTime: 2020-07-28 15:20:28
*/
/**
* payByWeixinJsapi
* @description: 微信通过jsapi支付
* 可以在微信浏览器调起支付
* @param {type}
* @return:
*/
export function payByWeixinJsapi() {
function onBridgeReady() {
// eslint-disable-next-line no-undef
WeixinJSBridge.invoke(
"getBrandWCPayRequest",
{
appId: "wx2421b1c4370ec43b", //公众号名称，由商户传入
timeStamp: "1395712654", //时间戳，自1970年以来的秒数
nonceStr: "e61463f8efa94090b1f366cccfbbb444", //随机串
package: "prepay_id=u802345jgfjsdfgsdg888",
signType: "MD5", //微信签名方式：
paySign: "70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名
},
function(res) {
if (res.err_msg == "get_brand_wcpay_request:ok") {
// 使用以上方式判断前端返回,微信团队郑重提示：
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
// 支付取消
} else {
// 支付失败
}
}
);
}
if (typeof WeixinJSBridge == "undefined") {
if (document.addEventListener) {
document.addEventListener("WeixinJSBridgeReady", onBridgeReady, false);
} else if (document.attachEvent) {
document.attachEvent("WeixinJSBridgeReady", onBridgeReady);
document.attachEvent("onWeixinJSBridgeReady", onBridgeReady);
}
} else {
onBridgeReady();
}
}
/**
* payByWeixinH5
* @description: 微信通过H5支付
* 可以在浏览器调起微信支付
* @param {type}
* @return:
*/
export function payByWeixinH5() {
window.location.href = "";
}
/**
* payByThirdPartyCashier
* @description: 第三方收银台
* @param {type}
* @return:
*/
export function payByThirdPartyCashier() {
window.location.href = "";
}
src/store/index.js
View file @ 3eb69823
......@@ -6,7 +6,7 @@ Vue.use(Vuex);
export default new Vuex.Store({
state: {
activeIdx: 0,
isLoading: true
isLoading: false
},
mutations: {
setActiveIdx(state, value) {
......@@ -17,11 +17,11 @@ export default new Vuex.Store({
}
},
actions: {
setActiveIdx({commit}, args) {
commit('setActiveIdx', args)
setActiveIdx({ commit }, args) {
commit("setActiveIdx", args);
},
setIsLoading({commit}, args) {
commit('setIsLoading', args)
setIsLoading({ commit }, args) {
commit("setIsLoading", args);
}
},
modules: {}
......
src/style/index.less
View file @ 3eb69823
......@@ -33,6 +33,10 @@ a {
height: @button-large-height !important;
line-height: @button-large-line-height !important;
}
&--small {
height: @button-small-height !important;
line-height: @button-small-line-height !important;
}
}
.cr-tag {
......@@ -82,3 +86,6 @@ a {
}
}
}
.cr-notify {
font-size: @font-size-14;
}
\ No newline at end of file
src/views/Goods/Detail/AIDetail.vue 0 → 100644
View file @ 3eb69823
<template>
<div class="container">
<nav-tab :nav-list="navBarOptions" />
<detail-header @click="goInsureState = true" :det="headerInfo" />
<div class="det-body">
<card title="保险计划" :option="['查看详情']" @option-click="openIframePupop(4)">
<cr-radio-btn v-model="formData.planValue" :radio-data="planOptions" />
<compactCellGroup :cell-data="planCellData" :text-bold="true" />
<plan-tip :tip-list="planTipOptions" />
</card>
<div id="det_insure">
<insure-person-form v-model="formData" :radio-options="personFormOptions" />
<auto-deduct
v-model="formData.auto"
:cell-data="autoCellInfo"
@cell-click="openIframePupop"
/>
<protocol-read
v-model="formData.pact"
:cell-data="noticeCellData"
@cell-click="openIframePupop"
/>
</div>
<card class="intro" id="det_intro">
<cr-image
:src="item"
v-for="(item, index) in introImg"
:key="index"
width="100%"
height="auto"
/>
</card>
<cps-case :case-data="caseInfo" />
<div id="det_process">
<cps-process :process-data="processDetail" @click="openIframePupop(5)" />
</div>
<cps-qa :qa-data="qaInfo" />
</div>
<detail-footer :company-info="companyInfo" />
<copyright />
<good-action @leftClick="goInsureState = true" :content="goodActionInfo" />
<popup-with-iframe
v-model="popupShow"
:title="pupopData.title"
:content="pupopData.content"
:url="pupopData.url"
>
<cps-process-detail v-if="currentPupopIndex === 5" :process-data="processDetail" />
<cps-rate v-if="currentPupopIndex === 6" />
</popup-with-iframe>
<go-insure-dialog
v-model="goInsureState"
:title="headerInfo.title"
:pay-data="goodBuyModalInfo"
/>
</div>
</template>
<script>
/**
* @description: 华太轻重疾险 Critical illness insurance
*/
import CrRadioBtn from "@/components/CrRadioBtn";
import Card from "@/components/Card";
import Copyright from "@/components/Copyright";
import GoodAction from "@/components/GoodAction";
import Collapse from "@/components/Collapse";
import DetailHeader from "./modules/DetailHeader";
import DetailFooter from "./modules/DetailFooter";
import CompactCellGroup from "@/components/CompactCellGroup";
import CpsCase from "./modules/CpsCase";
import CpsProcess from "./modules/CpsProcess";
import CpsQa from "./modules/CpsQA";
import PopupWithIframe from "@/components/PopupWithIframe";
import GoInsureDialog from "./modules/GoInsureDialog";
import CpsProcessDetail from "./modules/CpsProcessDetail";
import CpsRate from "./modules/CpsRate";
import PlanTip from "./modules/PlanTip";
import InsurePersonForm from "./modules/InsurePersonForm";
import AutoDeduct from "./modules/AutoDeduct";
import ProtocolRead from "./modules/ProtocolRead";
import NavTab from "./modules/NavTab";
import Detail from "@/api/detail.zhongan.yiliaobaozhang";
export default {
name: "GoodsDetail-CII",
components: {
DetailHeader,
DetailFooter,
CompactCellGroup,
CrRadioBtn,
Card,
// eslint-disable-next-line
Collapse,
CpsCase,
CpsProcess,
CpsQa,
Copyright,
PopupWithIframe,
GoodAction,
GoInsureDialog,
CpsProcessDetail,
CpsRate,
PlanTip,
InsurePersonForm,
AutoDeduct,
ProtocolRead,
NavTab
},
data() {
return {
...Detail,
popupShow: false,
currentPupopIndex: null,
formData: {
planValue: "5",
insured: "1",
payway: "1",
auto: false,
pact: false
},
goInsureState: false,
showLayer: false
};
},
computed: {
pupopData() {
const { popupArray, currentPupopIndex } = this;
return popupArray[currentPupopIndex] || {};
},
planCellData() {
const { planCellInfo } = this;
const { planValue } = this.formData;
return planCellInfo[planValue];
},
noticeCellData() {
const { noticeCellInfo } = this;
const { planValue } = this.formData;
return noticeCellInfo[planValue];
},
personFormOptions() {
const { insuredOptions, paywayOptions } = this;
return {
insuredOptions,
paywayOptions
};
}
},
methods: {
openIframePupop(index) {
if (index === 4) {
this.$router.push("/goods/plan");
return;
}
this.currentPupopIndex = index;
this.popupShow = true;
}
}
};
</script>
<style lang="less" src="./index.less" scoped></style>
src/views/Goods/Detail/CIIDetail.vue 0 → 100644
View file @ 3eb69823
<template>
<cr-form scroll-to-error @submit="onSubmit" @failed="onFailed" class="container">
<nav-tab :nav-list="navBarOptions" />
<detail-header @click="goInsureState = true" :det="headerInfo" />
<div class="det-body">
<card title="保险计划" :option="['查看详情']" @option-click="openIframePupop(4)">
<cr-radio-btn v-model="formData.planValue" :radio-data="planOptions" />
<compactCellGroup :cell-data="planCellData" :text-bold="true" />
<plan-tip :tip-list="planTipOptions" />
</card>
<div id="det_insure">
<insure-person-form v-model="formData" :radio-options="personFormOptions" />
<auto-deduct
v-model="formData.auto"
:cell-data="autoCellInfo"
@cell-click="openIframePupop"
/>
<protocol-read
v-model="formData.pact"
:cell-data="noticeCellData"
@cell-click="openIframePupop"
/>
</div>
<card class="intro" id="det_intro">
<cr-image
:src="item"
v-for="(item, index) in introImg"
:key="index"
width="100%"
height="auto"
/>
</card>
<cps-case :case-data="caseInfo" />
<div id="det_process">
<cps-process :process-data="processDetail" @click="openIframePupop(5)" />
</div>
<cps-qa :qa-data="qaInfo" />
</div>
<detail-footer :company-info="companyInfo" />
<copyright />
<good-action @leftClick="goInsureState = true" :content="goodActionInfo" />
<popup-with-iframe
v-model="popupShow"
:title="pupopData.title"
:content="pupopData.content"
:url="pupopData.url"
>
<cps-process-detail v-if="currentPupopIndex === 5" :process-data="processDetail" />
<cps-rate v-if="currentPupopIndex === 6" />
</popup-with-iframe>
<go-insure-dialog
v-model="goInsureState"
:title="headerInfo.title"
:pay-data="goodBuyModalInfo"
/>
</cr-form>
</template>
<script>
/**
* @description: 华太轻重疾险 Critical illness insurance
*/
import CrRadioBtn from "@/components/CrRadioBtn";
import Card from "@/components/Card";
import Copyright from "@/components/Copyright";
import GoodAction from "@/components/GoodAction";
import Collapse from "@/components/Collapse";
import DetailHeader from "./modules/DetailHeader";
import DetailFooter from "./modules/DetailFooter";
import CompactCellGroup from "@/components/CompactCellGroup";
import CpsCase from "./modules/CpsCase";
import CpsProcess from "./modules/CpsProcess";
import CpsQa from "./modules/CpsQA";
import PopupWithIframe from "@/components/PopupWithIframe";
import GoInsureDialog from "./modules/GoInsureDialog";
import CpsProcessDetail from "./modules/CpsProcessDetail";
import CpsRate from "./modules/CpsRate";
import PlanTip from "./modules/PlanTip";
import InsurePersonForm from "./modules/InsurePersonForm";
import AutoDeduct from "./modules/AutoDeduct";
import ProtocolRead from "./modules/ProtocolRead";
import NavTab from "./modules/NavTab";
import Detail from "@/api/detail.huatai.zhongjixian";
export default {
name: "GoodsDetail-CII",
components: {
DetailHeader,
DetailFooter,
CompactCellGroup,
CrRadioBtn,
Card,
// eslint-disable-next-line
Collapse,
CpsCase,
CpsProcess,
CpsQa,
Copyright,
PopupWithIframe,
GoodAction,
GoInsureDialog,
CpsProcessDetail,
CpsRate,
PlanTip,
InsurePersonForm,
AutoDeduct,
ProtocolRead,
NavTab
},
data() {
return {
...Detail,
popupShow: false,
currentPupopIndex: null,
formData: {
planValue: "3",
insured: "1",
payway: "1",
auto: false,
pact: false
},
goInsureState: false,
showLayer: false
};
},
computed: {
pupopData() {
const { popupArray, currentPupopIndex } = this;
return popupArray[currentPupopIndex] || {};
},
planCellData() {
const { planCellInfo } = this;
const { planValue } = this.formData;
return planCellInfo[planValue];
},
noticeCellData() {
const { noticeCellInfo } = this;
const { planValue } = this.formData;
return noticeCellInfo[planValue];
},
personFormOptions() {
const { insuredOptions, paywayOptions } = this;
return {
insuredOptions,
paywayOptions
};
}
},
methods: {
openIframePupop(index) {
if (index === 4) {
this.$router.push("/goods/plan");
return;
}
this.currentPupopIndex = index;
this.popupShow = true;
},
onSubmit(values) {
console.log("submit", values);
},
onFailed(errorInfo) {
const { errors } = errorInfo;
this.$notify({ type: "warning", message: errors[0].message });
this.goInsureState = true;
}
}
};
</script>
<style lang="less" src="./index.less" scoped></style>
src/views/Goods/Detail/LIDetail.vue 0 → 100644
View file @ 3eb69823
<template>
<div class="container">
<nav-tab :nav-list="navBarOptions" />
<detail-header @click="goInsureState = true" :det="headerInfo">
<div class="li-header">
<plan-tip :tip-list="planTipOptions" />
<cr-divider :hairline="false" :style="{ color: '#ECE9E9' }" />
<h5>什么样的人需要定期寿险？</h5>
<p>有房贷、有车贷的家庭顶梁柱</p>
<p>有子女抚养、老人赡养的家庭依靠</p>
<p>家庭主要收入来源的贡献者</p>
</div>
</detail-header>
<div class="det-body">
<card
title="保险计划"
footer="true"
:option="['查看详情']"
@option-click="openIframePupop(4)"
>
<compactCellGroup :cell-data="planCellInfo" :text-bold="true" />
<div class="cal-footer" slot="footer">
<div class="cal-footer-num">
<h4>155<small>元/年起</small></h4>
</div>
<cr-button type="warning">算一算保费</cr-button>
</div>
</card>
<card class="intro" id="det_intro">
<cr-image
:src="item"
v-for="(item, index) in introImg"
:key="index"
width="100%"
height="auto"
/>
</card>
<cps-case :case-data="caseInfo" />
<div id="det_process">
<cps-process :process-data="processDetail" @click="openIframePupop(5)" />
</div>
<div id="det_notice">
<protocol-read
title="理赔须知"
:options="[]"
:text-bold="true"
v-model="formData.pact"
:cell-data="noticeCellInfo"
@cell-click="openIframePupop"
>
<div class="important-intro">
<h6 class="important-intro-title">重点说明</h6>
<ul class="important-intro-list">
<li class="important-intro-item">
投保人可以为父母、配偶、子女，但是必须获得被保险人的同意并认可保险金额，如果未经被保险人同意并认可金额的，合同无效。
</li>
<li class="important-intro-item">
等待期内，被保险人如因非意外导致身故或身体全残，保险公司返还合同实际交纳的保险费，保险合同终止。
</li>
<li class="important-intro-item">本产品为消费型，保险期满后不返还保费。</li>
<li class="important-intro-item">
本产品有20天犹豫期，在犹豫期内退保不收取任何费用，无息返还所交保费。犹豫期过后退保将承担保费损失。如需退保，请拨打华贵保险，客服电话400-684-1888。
</li>
</ul>
</div>
</protocol-read>
</div>
<div id="det_qa"><cps-qa :qa-data="qaInfo" /></div>
</div>
<detail-footer :company-info="companyInfo" />
<copyright />
<good-action @leftClick="goInsureState = true" :content="goodActionInfo" />
<popup-with-iframe
v-model="popupShow"
:title="pupopData.title"
:content="pupopData.content"
:url="pupopData.url"
>
<cps-process-detail v-if="currentPupopIndex === 5" :process-data="processDetail" />
<cps-rate v-if="currentPupopIndex === 6" />
</popup-with-iframe>
<go-insure-dialog
v-model="goInsureState"
:title="headerInfo.title"
:pay-data="goodBuyModalInfo"
/>
</div>
</template>
<script>
/**
* @description: 华贵大麦2020定期寿险 Life insurance
*/
import CrRadioBtn from "@/components/CrRadioBtn";
import Card from "@/components/Card";
import Copyright from "@/components/Copyright";
import GoodAction from "@/components/GoodAction";
import Collapse from "@/components/Collapse";
import DetailHeader from "./modules/DetailHeader";
import DetailFooter from "./modules/DetailFooter";
import CompactCellGroup from "@/components/CompactCellGroup";
import CpsCase from "./modules/CpsCase";
import CpsProcess from "./modules/CpsProcess";
import CpsQa from "./modules/CpsQA";
import PopupWithIframe from "@/components/PopupWithIframe";
import GoInsureDialog from "./modules/GoInsureDialog";
import CpsProcessDetail from "./modules/CpsProcessDetail";
import CpsRate from "./modules/CpsRate";
import PlanTip from "./modules/PlanTip";
import ProtocolRead from "./modules/ProtocolRead";
import NavTab from "./modules/NavTab";
import Detail from "@/api/detail.huagui.shouxian";
export default {
name: "GoodsDetail-CII",
components: {
DetailHeader,
DetailFooter,
CompactCellGroup,
// eslint-disable-next-line
CrRadioBtn,
Card,
// eslint-disable-next-line
Collapse,
CpsCase,
CpsProcess,
CpsQa,
Copyright,
PopupWithIframe,
GoodAction,
GoInsureDialog,
CpsProcessDetail,
CpsRate,
PlanTip,
NavTab,
ProtocolRead
},
data() {
return {
...Detail,
popupShow: false,
currentPupopIndex: null,
formData: {
insured: "1",
payway: "1",
pact: false
},
goInsureState: false,
showLayer: false
};
},
computed: {
pupopData() {
const { popupArray, currentPupopIndex } = this;
return popupArray[currentPupopIndex] || {};
}
},
methods: {
openIframePupop(index) {
if (index === 4) {
this.$router.push("/goods/plan");
return;
}
this.currentPupopIndex = index;
this.popupShow = true;
}
}
};
</script>
<style lang="less" src="./index.less" scoped></style>
src/views/Goods/Detail/MIDetail.vue 0 → 100644
View file @ 3eb69823
<template>
<div class="container">
<nav-tab :nav-list="navBarOptions" />
<detail-header @click="goInsureState = true" :det="headerInfo" />
<div class="det-body">
<card title="保险计划" :option="['查看详情']" @option-click="openIframePupop(4)">
<compactCellGroup :cell-data="planCellInfo" :text-bold="true" />
<plan-tip :tip-list="planTipOptions" />
</card>
<div id="det_insure">
<insure-person-form v-model="formData" :radio-options="personFormOptions" />
<auto-deduct
v-model="formData.auto"
:cell-data="autoCellInfo"
@cell-click="openIframePupop"
/>
<protocol-read
v-model="formData.pact"
:cell-data="noticeCellInfo"
@cell-click="openIframePupop"
/>
</div>
<card class="intro" id="det_intro">
<cr-image
:src="item"
v-for="(item, index) in introImg"
:key="index"
width="100%"
height="auto"
/>
</card>
<cps-case :case-data="caseInfo" />
<div id="det_process">
<cps-process :process-data="processDetail" @click="openIframePupop(5)" />
</div>
<cps-qa :qa-data="qaInfo" />
</div>
<detail-footer :company-info="companyInfo" />
<copyright />
<good-action @leftClick="goInsureState = true" :content="goodActionInfo" />
<popup-with-iframe
v-model="popupShow"
:title="pupopData.title"
:content="pupopData.content"
:url="pupopData.url"
>
<cps-process-detail v-if="currentPupopIndex === 5" :process-data="processDetail" />
<cps-rate v-if="currentPupopIndex === 6" />
</popup-with-iframe>
<go-insure-dialog
v-model="goInsureState"
:title="headerInfo.title"
:pay-data="goodBuyModalInfo"
/>
</div>
</template>
<script>
/**
* @description: 泰康600万医疗保障 medical insurance
*/
import CrRadioBtn from "@/components/CrRadioBtn";
import Card from "@/components/Card";
import Copyright from "@/components/Copyright";
import GoodAction from "@/components/GoodAction";
import Collapse from "@/components/Collapse";
import DetailHeader from "./modules/DetailHeader";
import DetailFooter from "./modules/DetailFooter";
import CompactCellGroup from "@/components/CompactCellGroup";
import CpsCase from "./modules/CpsCase";
import CpsProcess from "./modules/CpsProcess";
import CpsQa from "./modules/CpsQA";
import PopupWithIframe from "@/components/PopupWithIframe";
import GoInsureDialog from "./modules/GoInsureDialog";
import CpsProcessDetail from "./modules/CpsProcessDetail";
import CpsRate from "./modules/CpsRate";
import PlanTip from "./modules/PlanTip";
import InsurePersonForm from "./modules/InsurePersonForm";
import AutoDeduct from "./modules/AutoDeduct";
import ProtocolRead from "./modules/ProtocolRead";
import NavTab from "./modules/NavTab";
import Detail from "@/api/detail.taikang.yiliaobaozhang";
export default {
name: "GoodsDetail-CII",
components: {
DetailHeader,
DetailFooter,
CompactCellGroup,
// eslint-disable-next-line
CrRadioBtn,
Card,
// eslint-disable-next-line
Collapse,
CpsCase,
CpsProcess,
CpsQa,
Copyright,
PopupWithIframe,
GoodAction,
GoInsureDialog,
CpsProcessDetail,
CpsRate,
PlanTip,
InsurePersonForm,
AutoDeduct,
ProtocolRead,
NavTab
},
data() {
return {
...Detail,
popupShow: false,
currentPupopIndex: null,
formData: {
insured: "1",
payway: "1",
medical: "1",
auto: false,
pact: false
},
goInsureState: false,
showLayer: false
};
},
computed: {
pupopData() {
const { popupArray, currentPupopIndex } = this;
return popupArray[currentPupopIndex] || {};
},
personFormOptions() {
const { insuredOptions, paywayOptions, medicalOptions } = this;
return {
insuredOptions,
paywayOptions,
medicalOptions
};
}
},
methods: {
openIframePupop(index) {
if (index === 4) {
this.$router.push("/goods/plan");
return;
}
this.currentPupopIndex = index;
this.popupShow = true;
}
}
};
</script>
<style lang="less" src="./index.less" scoped></style>
src/views/Goods/Detail/index.less
View file @ 3eb69823
......@@ -12,6 +12,9 @@
display: block;
height: 60px;
}
@{deep} .cr-field--error-message {
display: none;
}
}
.intro {
margin: 10px 0;;
......@@ -28,3 +31,74 @@
margin-bottom: 0;
}
}
.li-header {
text-align: left;
.plan-tip {
justify-content: space-between;
font-size: @font-size-14;
padding-bottom: 4px;
}
.svg-icon {
height: 14px;
width: 14px;
}
h5 {
font-size: @font-size-18;
color: @orange-dark;
font-weight: @font-weight-bold;
margin-bottom: 16px;
}
p {
font-size: @font-size-14;
color: @black;
line-height: @line-height-lg;
}
}
.cal-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0 20px;
&-num {
h4 {
color: @red;
font-weight: @font-weight-bold;
font-size: @font-size-20;
line-height: @line-height-md;
}
small {
margin-left: 4px;
color: @gray-4;
line-height: @line-height-sm;
font-size: @font-size-12;
}
}
.cr-button {
border-radius: @border-radius-sm !important;
font-size: @font-size-12;
height: @button-default-height !important;
line-height: @button-default-line-height !important;
width: 110px;
}
}
.important-intro {
padding-top: 16px;
&-title {
font-weight: @font-weight-bold;
font-size: @font-size-14;
color: @black;
line-height: @line-height-lg;
margin-bottom: 8px;
}
&-list {
padding-left: 14px;
}
&-item {
list-style-type: decimal;
padding-left: 8px;
font-size: @font-size-12;
line-height: @line-height-sm + 2;
color: @gray-5;
margin-bottom: 12px;
}
}
src/views/Goods/Detail/index.vue
View file @ 3eb69823
<template>
<div class="container">
<nav-tab :nav-list="navBarOptions" />
<detail-header @click="goInsureState = true" :det="headerInfo" />
<div class="det-body">
<card title="保险计划" :option="['查看详情']" @option-click="openIframePupop(4)">
<cr-radio-btn v-model="formData.planValue" :radio-data="planOptions" />
<compactCellGroup :cell-data="planCellData" :text-bold="true" />
<plan-tip :tip-list="planTipOptions" />
</card>
<div id="det_insure">
<insure-person-form v-model="formData" :radio-options="personFormOptions" />
<auto-deduct
v-model="formData.auto"
:cell-data="autoCellInfo"
@cell-click="openIframePupop"
/>
<protocol-read
v-model="formData.pact"
:cell-data="noticeCellData"
@cell-click="openIframePupop"
/>
</div>
<card class="intro" id="det_intro">
<cr-image
:src="item"
v-for="(item, index) in introImg"
:key="index"
width="100%"
height="auto"
/>
</card>
<cps-case :case-data="caseInfo" />
<div id="det_process">
<cps-process :process-data="processDetail" @click="openIframePupop(5)" />
</div>
<cps-qa :qa-data="qaInfo" />
</div>
<detail-footer :company-info="companyInfo" />
<copyright />
<good-action @click="goInsureState = true" @leftClick="modalShow = true" />
<popup-with-iframe
v-model="popupShow"
:title="pupopData.title"
:content="pupopData.content"
:url="pupopData.url"
>
<cps-process-detail v-if="currentPupopIndex === 5" :process-data="processDetail" />
<cps-rate v-if="currentPupopIndex === 6" />
</popup-with-iframe>
<record-layer v-model="showLayer" desc="敬请期待" />
<go-insure-dialog v-model="goInsureState" />
<div>
<cii-detail v-if="detailType === 'cii'" />
<mi-detail v-if="detailType === 'mi'" />
<ai-detail v-if="detailType === 'ai'" />
<li-detail v-if="detailType === 'li'" />
</div>
</template>
<script>
import CrRadioBtn from "@/components/CrRadioBtn";
import Card from "@/components/Card";
import Copyright from "@/components/Copyright";
import GoodAction from "@/components/GoodAction";
import RecordLayer from "@/components/RecordLayer";
import Collapse from "@/components/Collapse";
import DetailHeader from "./modules/DetailHeader";
import DetailFooter from "./modules/DetailFooter";
import CompactCellGroup from "@/components/CompactCellGroup";
import CpsCase from "./modules/CpsCase";
import CpsProcess from "./modules/CpsProcess";
import CpsQa from "./modules/CpsQA";
import PopupWithIframe from "@/components/PopupWithIframe";
import GoInsureDialog from "./modules/GoInsureDialog";
import CpsProcessDetail from "./modules/CpsProcessDetail";
import CpsRate from "./modules/CpsRate";
import PlanTip from "./modules/PlanTip";
import InsurePersonForm from "./modules/InsurePersonForm";
import AutoDeduct from "./modules/AutoDeduct";
import ProtocolRead from "./modules/ProtocolRead";
import NavTab from "./modules/NavTab";
import Detail from "@/api/detail.huataizhongjixian";
import ciiDetail from "./CIIDetail";
import miDetail from "./MIDetail";
import liDetail from "./LIDetail";
import aiDetail from "./AIDetail";
export default {
name: "GoodsDetail",
components: {
DetailHeader,
DetailFooter,
CompactCellGroup,
CrRadioBtn,
Card,
// eslint-disable-next-line
Collapse,
CpsCase,
CpsProcess,
CpsQa,
Copyright,
PopupWithIframe,
GoodAction,
GoInsureDialog,
CpsProcessDetail,
CpsRate,
RecordLayer,
PlanTip,
InsurePersonForm,
AutoDeduct,
ProtocolRead,
NavTab
ciiDetail,
miDetail,
aiDetail,
liDetail
},
data() {
return {
...Detail,
popupShow: false,
currentPupopIndex: null,
formData: {
planValue: "3",
insured: "1",
payway: "1",
auto: false,
pact: false
},
goInsureState: false,
showLayer: false
detailType: "li"
};
},
computed: {
pupopData() {
const { popupArray, currentPupopIndex } = this;
return popupArray[currentPupopIndex] || {};
},
planCellData() {
const { planValue } = this.formData;
let _data = [
{ title: "100种重大疾病医疗保险金", value: "30万" },
{ title: "40种轻症保险金", value: "6万" },
{ title: "投保年龄", value: "30天~50周岁" },
{ title: "保险期限", value: "1年" }
];
switch (planValue) {
case "3":
_data = [
{ title: "100种重大疾病医疗保险金", value: "30万" },
{ title: "40种轻症保险金", value: "6万" },
{ title: "投保年龄", value: "30天~50周岁" },
{ title: "保险期限", value: "1年" }
];
break;
case "2":
_data = [
{ title: "100种重大疾病医疗保险金", value: "20万" },
{ title: "40种轻症保险金", value: "4万" },
{ title: "投保年龄", value: "30天~60周岁" },
{ title: "保险期限", value: "1年" }
];
break;
case "1":
_data = [
{ title: "100种重大疾病医疗保险金", value: "10万" },
{ title: "40种轻症保险金", value: "2万" },
{ title: "投保年龄", value: "30天~60周岁" },
{ title: "保险期限", value: "1年" }
];
break;
default:
break;
}
return _data;
},
noticeCellData() {
const { planValue } = this.formData;
return [
{ title: "投保年龄", value: `30天~${planValue === "3" ? 5 : 6}0周岁` },
{ title: "保障期限", value: "1年（可续保至99周岁）" },
{ title: "等待期", value: "90天" },
{
title: "保费",
value: {
needSlot: true,
tpl: "保费与保额、被保人年龄有关<br />首月3元，次月5.6元/月起",
longTxt: true
}
}
];
},
personFormOptions() {
const { insuredOptions, paywayOptions } = this;
return {
insuredOptions,
paywayOptions
};
}
},
methods: {
openIframePupop(index) {
if (index === 4) {
this.$router.push("/goods/plan");
return;
}
this.currentPupopIndex = index;
this.popupShow = true;
}
mounted() {
this.detailType = this.$route.query.type;
}
};
</script>
<style lang="less" src="./index.less" scoped></style>
src/views/Goods/Detail/modules/CpsRate.vue
View file @ 3eb69823
......@@ -31,7 +31,7 @@
<script>
import crRadioBtn from "@/components/CrRadioBtn";
import detail from "@/api/detail.huataizhongjixian";
import detail from "@/api/detail.huatai.zhongjixian";
const { rateInfo } = detail;
export default {
name: "GoodsDetail",
......@@ -57,7 +57,7 @@ export default {
amountOptions() {
const { rateInfo, titleIndex } = this;
const _length = rateInfo[titleIndex].list.length;
return detail[titleIndex].list.map((item, index) => `${_length - index}0万保额`);
return rateInfo[titleIndex].list.map((item, index) => `${_length - index}0万保额`);
},
listOptions() {
const { rateInfo, titleIndex, amountIndex } = this;
......
src/views/Goods/Detail/modules/DetailHeader.vue
View file @ 3eb69823
......@@ -8,24 +8,29 @@
<div class="det-hd-recommend">
<h2 class="det-hd-recommend-h2">智能产品官-小果</h2>
<h1 class="det-hd-recommend-h1">为您优选推荐</h1>
<cr-tag>
<cr-tag v-if="props.det.company">
由
<strong>{{ props.det.company }}</strong>
承保
</cr-tag>
<div class="tag-placeholder" v-else></div>
</div>
<div class="det-hd-insured" :class="{ stamp: props.det.stamp }">
<h1 class="det-hd-insured-title">{{ props.det.title }}</h1>
<small class="det-hd-insured-sub">
<slot>{{ props.det.sub }}</slot>
</small>
<h5 class="det-hd-insured-price" v-html="props.det.price"></h5>
<cr-button type="warning" block @click="listeners.click">立即开启保障</cr-button>
<div class="det-hd-insured-people">
已有
<em>{{ props.det.insuredNum }}</em>
位用户投保
</div>
<slot>
<small class="det-hd-insured-sub">
{{ props.det.sub }}
</small>
<h5 class="det-hd-insured-price" v-html="props.det.price"></h5>
<cr-button type="warning" block @click="listeners.click" native-type="submit">
立即开启保障
</cr-button>
<div class="det-hd-insured-people">
已有
<em>{{ props.det.insuredNum }}</em>
位用户投保
</div>
</slot>
</div>
</div>
</template>
......@@ -154,4 +159,30 @@ export default {
}
}
}
.tag-placeholder {
height: 30px;
}
.taikang {
.det-hd {
&-recommend {
color: @black;
.cr-tag {
color: @white;
background: linear-gradient(178deg, rgba(114, 114, 114, 1) 0%, rgba(0, 0, 0, 1) 100%);
strong {
color: @orange-light;
}
}
}
}
}
.zhongan {
.det-hd {
&-recommend {
.cr-tag {
background: linear-gradient(180deg, rgba(122, 127, 255, 1) 0%, rgba(74, 78, 182, 1) 100%);
}
}
}
}
</style>
src/views/Goods/Detail/modules/GoInsureDialog.vue
View file @ 3eb69823
<template>
<cr-popup
v-model="show"
:style="{ backgroundColor: 'transparent' }"
closeable
get-container="body"
close-icon="close"
class="panel-wrap"
>
<div class="panel">
<div class="panel-head">
<h4>
立即拥有
<br />30万重疾轻症保障
</h4>
</div>
<div class="panel-body">
<compactCellGroup class="pay-det" :cell-data="payCellData" :text-bold="true" />
<div class="pay-tip">*不满意可随时退保</div>
<div class="pay-protocol">
<div class="pay-protocol-tip">投保前请阅读</div>
<div class="pay-protocol-link">
<a href="javascript:;" @click="openIframePupop(0)">保险条款</a>
<i></i>
<a href="javascript:;" @click="openIframePupop(1)">健康告知</a>
<i></i>
<a href="javascript:;" @click="openIframePupop(2)">投保须知与声明</a>
<i></i>
<a href="javascript:;" @click="openIframePupop(3)">服务协议</a>
</div>
</div>
<cr-button type="warning" size="large" block @click="go">好的 继续</cr-button>
<modal v-model="show" :closeable="true" cancel-btn="" confirm-btn="好的 继续" @confirm="go">
<h4 slot="title">立即拥有<br />{{ title }}</h4>
<compactCellGroup class="pay-det" :cell-data="payCellData" :text-bold="true" />
<div class="pay-tip">*不满意可随时退保</div>
<div class="pay-protocol">
<div class="pay-protocol-tip">投保前请阅读</div>
<div class="pay-protocol-link">
<a href="javascript:;" @click="openIframePupop(0)">保险条款</a>
<i></i>
<a href="javascript:;" @click="openIframePupop(1)">健康告知</a>
<i></i>
<a href="javascript:;" @click="openIframePupop(2)">投保须知与声明</a>
<i></i>
<a href="javascript:;" @click="openIframePupop(3)">服务协议</a>
</div>
</div>
</cr-popup>
</modal>
</template>
<script>
import CompactCellGroup from "@/components/CompactCellGroup";
import Modal from "@/components/Modal";
const DIALOG_CHANGE_EVENT = "input";
export default {
name: "GoInsureDialog",
components: {
CompactCellGroup
CompactCellGroup,
Modal
},
props: {
value: null
value: null,
title: {
type: String,
default: ""
},
payData: {
type: Array,
default() {
return [];
}
}
},
data() {
return {
......@@ -53,10 +48,7 @@ export default {
{ title: "首月保费", value: "3元" },
{
title: "次月保费",
value: {
tpl: "5.6元/月起（共11期）",
longTxt: true
}
value: "5.6元/月起（共11期）"
}
]
};
......
src/views/Goods/Detail/modules/InsurePersonForm.vue
View file @ 3eb69823
......@@ -2,20 +2,71 @@
<card title="请填写投保信息">
<h6 class="insure-form-title">本人信息</h6>
<cr-cell-group class="insure-form">
<cr-field v-model="formData.selfName" placeholder="请输入投保人姓名" label="姓名" />
<cr-field v-model="formData.selfIdNo" placeholder="信息保密，仅用于投保" label="身份证号" />
<cr-field
name="selfName"
v-model="formData.selfName"
placeholder="请输入投保人姓名"
label="姓名"
:rules="[{ required: true, message: '请输入姓名' }]"
/>
<cr-field
name="selfIdNo"
v-model="formData.selfIdNo"
placeholder="信息保密，仅用于投保"
label="身份证号"
:rules="[{ required: true, message: '请输入身份证号' }]"
/>
<cr-field
name="selfIdNo"
v-model="formData.selfIdNo"
placeholder="请输入您的手机号码"
label="手机号码"
:rules="[{ required: true, message: '请输入手机号码' }]"
/>
<cr-field
name="selfIdNo"
v-model="formData.selfIdNo"
placeholder="请输入短信验证码"
label="验证码"
:rules="[{ required: true, message: '请输入验证码' }]"
>
<a href="javascript:;" slot="button">获取验证码</a>
</cr-field>
</cr-cell-group>
<h6 class="insure-form-title">为谁投保</h6>
<cr-radio-btn v-model="formData.insured" :radio-data="radioOptions.insuredOptions" />
<cr-cell-group class="insure-form">
<cr-field v-model="formData.relativeName" placeholder="请输入投保人姓名" label="姓名" />
<cr-field
name="relativeName"
v-model="formData.relativeName"
placeholder="请输入被保人姓名"
label="姓名"
:rules="[{ required: true, message: '请输入姓名' }]"
/>
<cr-field
name="relativeIdNo"
v-model="formData.relativeIdNo"
placeholder="信息保密，仅用于投保"
label="身份证号"
:rules="[{ required: true, message: '请输入身份证号' }]"
/>
<cr-cell class="insure-form-item_nobg" v-if="radioOptions.medicalOptions">
<template slot="title">
<span>有无医保</span>
<cr-icon type="question-o" color="#ccc" />
</template>
<cr-radio-btn
name="medical"
v-model="formData.medical"
:radio-data="radioOptions.medicalOptions"
/>
</cr-cell>
<cr-cell title="缴费方式" class="insure-form-item_nobg">
<cr-radio-btn v-model="formData.payway" :radio-data="radioOptions.paywayOptions" />
<cr-radio-btn
name="payway"
v-model="formData.payway"
:radio-data="radioOptions.paywayOptions"
/>
</cr-cell>
</cr-cell-group>
</card>
......
src/views/Goods/Detail/modules/NavTab.vue
View file @ 3eb69823
......@@ -91,7 +91,7 @@ export default {
position: fixed;
top: 0;
left: 0;
z-index: 200;
z-index: 98;
width: 100%;
.cr-tabbar {
background-color: @white;
......
src/views/Goods/Detail/modules/ProtocolRead.vue
View file @ 3eb69823
<template>
<card title="投保须知" :option="['查看完整费率表']" footer="协议" @option-click="openIframe(6)">
<card :title="title" :option="options" footer="协议" @option-click="openIframe(6)">
<compactCellGroup :cell-data="cellData" />
<div class="insure-form-pact" slot="footer">
<cr-checkbox shape="round" icon-size="13px" v-model="pact" checked-color="#FFC842">
投保前请阅读
</cr-checkbox>
<div class="insure-form-pact-link">
<a href="javascript:;" @click="openIframe(0)">保险条款</a>
<i></i>
<a href="javascript:;" @click="openIframe(1)">健康告知</a>
<i></i>
<a href="javascript:;" @click="openIframe(2)">投保须知与声明</a>
<i></i>
<a href="javascript:;" @click="openIframe(3)">服务协议</a>
<slot></slot>
<template v-slot:footer>
<div class="insure-form-pact" slot="footer">
<cr-field name="pact" :rules="[{ required: true, message: '请阅读协议并确认' }]">
<template #input>
<cr-checkbox shape="round" icon-size="13px" v-model="pact" checked-color="#FFC842">
投保前请阅读
</cr-checkbox>
</template>
</cr-field>
<div class="insure-form-pact-link">
<a href="javascript:;" @click="openIframe(0)">保险条款</a>
<i></i>
<a href="javascript:;" @click="openIframe(1)">健康告知</a>
<i></i>
<a href="javascript:;" @click="openIframe(2)">投保须知与声明</a>
<i></i>
<a href="javascript:;" @click="openIframe(3)">服务协议</a>
</div>
</div>
</div>
</template>
</card>
</template>
......@@ -30,6 +37,18 @@ export default {
Card
},
props: {
title: {
type: String,
default() {
return "投保须知";
}
},
options: {
type: Array,
default() {
return ["查看完整费率表"];
}
},
value: null,
cellData: {
type: Array,
......@@ -71,6 +90,13 @@ export default {
justify-content: space-between;
align-items: center;
padding: 14px 0;
.cr-cell {
padding: 0;
width: auto;
&::after {
display: none;
}
}
@{deep} .cr-checkbox__label {
font-size: @font-size-11;
color: @gray-4;
......
src/views/Goods/Inform/index.vue
View file @ 3eb69823
......@@ -30,19 +30,16 @@
<cr-button @click="$router.back()">不符合</cr-button>
<cr-button type="warning" @click="conform">符合，立即投保</cr-button>
</div>
<record-layer v-model="showLayer" desc="不能支付,敬请期待"></record-layer>
</div>
</template>
<script>
import card from "@/components/Card";
import RecordLayer from "@/components/RecordLayer";
export default {
name: "GoodsInform",
components: {
card,
RecordLayer
card
},
data() {
return {
......
src/views/Goods/Plan/index.vue
View file @ 3eb69823
......@@ -18,7 +18,7 @@
<script>
import PopupWithIframe from "@/components/PopupWithIframe";
import card from "@/components/Card";
import detail from "@/api/detail.huataizhongjixian";
import detail from "@/api/detail.huatai.zhongjixian";
const { planInfo } = detail;
export default {
name: "GoodsDetail",
......
src/views/Policy/Add/index.less 0 → 100644
View file @ 3eb69823
@import "../../../style/var.less";
@import "../../../style/mixins.less";
.container {
overflow: hidden;
background-color: @white;
&::after {
content: " ";
display: block;
height: 70px;
}
}
.policy {
&-tip {
background: rgba(255, 228, 162, 1);
border-radius: @border-radius-sm;
font-size: @font-size-14;
color: @red;
line-height: @line-height-sm;
padding: @padding-xs + 1;
text-align: center;
&-wrap {
padding: @padding-md + 3 @padding-md;
}
}
&-form {
padding: 0 @padding-md;
.svg-icon {
height: 16px;
width: 16px;
align-self: center;
}
.radio-btn {
width: 100%;
justify-content: start;
flex-wrap: wrap;
margin-bottom: -8px;
@{deep} .cr-radio {
box-shadow: none;
border: 1px solid #ccc;
height: 24px;
line-height: 24px;
flex: none;
min-width: 40px;
padding: 0 15px;
margin-right: 6px;
margin-bottom: 8px;
&__label {
color: #aaa;
}
&.checked {
border-color: @orange-light;
color: @black;
.cr-radio__label {
color: @black;
}
}
}
}
@{deep} .cr-cell {
color: @black;
padding: @padding-sm 0;
&-group {
margin-bottom: 32px;
&__title {
font-size: @font-size-18;
font-weight: @font-weight-bold;
color: @black;
line-height: @line-height-lg;
padding: @padding-xs + 1 0 @padding-lg;
}
&::after {
border-top-width: 0;
}
}
&__title {
width: 100px !important;
}
&:not(:last-child)::after {
border-color: #ECE9E9;
left: 0;
}
}
}
}
.form-unit {
color: @black;
}
\ No newline at end of file
src/views/Policy/Add/index.vue 0 → 100644
View file @ 3eb69823
This diff is collapsed.
src/views/User/Family/index.vue
View file @ 3eb69823
......@@ -144,10 +144,10 @@ export default {
};
},
methods: {
async onSubmit(values) {
async onSubmit() {
// console.log('sucess', values);
},
onFailed(errorInfo) {
onFailed() {
// console.log('fail', errorInfo);
},
onConfirm(picker, res) {
......
src/views/paytest.vue 0 → 100644
View file @ 3eb69823
<template>
<div class="container">
<cr-button block type="danger" @click="login">登录</cr-button>
<cr-divider />
<cr-button block>生成订单（微信JSAPI支付）</cr-button>
<cr-button block>生成订单（微信H5支付）</cr-button>
<cr-button block>生成订单（第三方收银台支付）</cr-button>
<cr-divider />
<cr-button type="warning" block>调起支付</cr-button>
<cr-divider />
<div class="state">
<h5>基本信息：</h5>
<p>当前环境：{{ browerEnv }}</p>
<p>登录状态：{{ !!mongoToken }}</p>
<p v-if="browerEnv === 'weixin'">微信code获取状态：</p>
<cr-divider />
<h5>登录信息：</h5>
<p v-for="(item, key) in loginInfo" :key="key">{{ key }}: {{ item }}</p>
<cr-divider />
<h5>支付信息：</h5>
<p v-for="(item, key) in payInfo" :key="key">{{ key }}: {{ item }}</p>
<cr-divider />
<h5>订单信息：</h5>
<p v-for="(item, key) in orderInfo" :key="key">{{ key }}: {{ item }}</p>
<cr-divider />
<h5>保险订单信息：</h5>
<p
v-for="(item, key) in insuredOrderInfo"
:key="key"
v-html="`${key}: ${brFilter(item)}`"
></p>
</div>
</div>
</template>
<script>
/**
* @description: 支付测试页面
* @param {type}
* @return:
*/
import { loginByPhone, getwxOpenId } from "@/api/user";
import cfg from "@/config";
export default {
name: "paytest",
data() {
return {
browerEnv: "",
xyqbToken: "",
mongoToken: "",
loginInfo: {
phoneNo: "18611428880",
verifyCode: "123456",
loginChannel: "1"
},
insuredOrderInfo: {
insuredUserInfo: {
phoneNo: "13209654413",
userInfoSecId: "commodo",
userName: "罗刚",
idNo: "566254180010306614",
longTerm: false,
validEnd: "1978-11-18",
relation: "1",
socialSecurity: false,
email: "s.yfyviye@mxxv.ki",
annualIncome: "17159",
addressCode: "110100",
addressDetail: "海外",
occupation: "5",
height: 169,
weight: 58,
bankCardCode: "ICBC",
bankCardNo: "6220549771082240618"
},
productNo: "1",
holderUserInfo: {
phoneNo: "13499177270",
userInfoSecId: "eu in",
userName: "崔静",
idNo: "16479119920330003X",
longTerm: false,
validEnd: "1985-09-23",
socialSecurity: false,
email: "n.ata@ueccvun.bz",
annualIncome: "35555",
addressCode: "110100",
addressDetail: "白城市",
occupation: "1",
height: 186,
weight: 54,
bankCardCode: "ICBC",
bankCardNo: "667782802278796"
},
insuredAmount: "57",
policyPeriod: "26",
paymentType: 4,
paymentPeriod: "et in",
effectiveDate: "2003-07-06 23:11:44",
autoRenewPolicy: true
},
orderInfo: {},
openId: localStorage.getItem("openId"),
payInfo: {}
};
},
mounted() {
this.getCurrentBrowerEnv();
},
methods: {
async login() {
const res = await loginByPhone(this.loginInfo);
if (res.code === 0) {
this.mongoToken = res.data.token;
localStorage.setItem("mongoToken", res.data.token);
}
},
getCurrentBrowerEnv() {
const ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
this.browerEnv = "weixin";
this.getWxOpenId();
} else if (ua.match(/xyqb/i) == "xyqb") {
this.browerEnv = "xyqb";
} else {
this.browerEnv = "h5";
}
},
async getWxOpenId() {
if (this.openId) return;
const code = this.$route.query.code;
const res = await getwxOpenId({ code, appId: cfg.wxAppId });
if (res.code === 0) {
this.openId = res.data.openId;
localStorage.setItem("openId", res.data.openId);
}
},
getUserState() {
this.mongoToken = localStorage.getItem("mongoToken");
},
brFilter(txt) {
let val = JSON.stringify(txt);
val = val.replace(/[{},]/g, "<br />").replace(/"/g, "");
return val;
}
}
};
</script>
<style lang="less" scoped>
.container {
padding: 5px 15px;
font-size: 14px;
background-color: #fff;
}
.state {
line-height: 24px;
margin-bottom: 15px;
height: 44vh;
overflow: scroll;
background-color: #fcfcfc;
box-shadow: inset 0 0 9px 0px rgba(0, 0, 0, 0.1);
padding: 0 10px;
border-radius: 8px;
h5 {
font-weight: bold;
margin: 15px 0;
}
}
.cr-button {
margin-bottom: 15px;
}
</style>
yarn.lock
View file @ 3eb69823
This diff is collapsed.
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