Skip to content

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

feature: 跑流程

parent 1aadee42
Show whitespace changes
Inline Side-by-side
Showing with 262 additions and 147 deletions
src/components/LoginModal.vue
View file @ a4bfd397
......@@ -90,7 +90,7 @@ export default {
this.formData.openId = localStorage.getItem("openId") || null;
const res = await loginByPhone(this.formData);
if (res) {
this.$notify("登录成功");
this.$notify({ type: "success", message: "登录成功" });
this.setIsShowLogin(false);
// localStorage.setItem("mongoToken", res.token);
// TODO 开发目前使用这个token
......
src/mixins/formValidate.mixin.js
View file @ a4bfd397
import cherry from "@qg/cherry-ui";
const { Notify } = cherry;
export default {
methods: {
onFailed(errorInfo) {
Notify(errorInfo?.errors?.[0]?.message || "校验失败");
this.$notify({ type: "warning", message: errorInfo?.errors?.[0]?.message || "校验失败" });
}
}
};
src/store/modules/user.js
View file @ a4bfd397
import GOODS_LIST from "@/api/goodsList.mock";
import { getUserInfo, getFamilyList } from "@/api/user";
import { getPolicyList } from "@/api/policy";
import man from "@/assets/images/user/man@2x.png";
import woman from "@/assets/images/user/woman@2x.png";
import avatar from "@/assets/images/user/avatar@2x.png";
import _ from "lodash";
const CONSTANT = {
avatar: {
man: "../../../assets/images/user/man@2x.png",
woman: "../../../assets/images/user/woman@2x.png"
man,
woman
},
relation: ["本人", "父母", "配偶", "子女"]
};
// 0: man; 1: woman
function getReletion(relation, gender) {
let result = "";
if ([1, 3].includes(+relation)) {
if (+relation === 1) {
result = +gender ? "父亲" : "母亲";
result = +gender ? "母亲" : "父亲";
} else {
result = +gender ? "儿子" : "女儿";
result = +gender ? "女儿" : "儿子";
}
} else {
result = CONSTANT.relation[+relation];
......@@ -33,7 +37,7 @@ export default {
userInfo: {
name: "未登录",
phoneNoMask: "点击登录",
avatar: "../../assets/images/user/avatar@2x.png",
avatar,
auth: false
}
},
......@@ -63,10 +67,11 @@ export default {
const policyListFilted = policyList
.filter(
policy =>
_.some(goodsList, { id: +policy.productNo }) &&
+family.userInfoSecId === +policy.insuredUserSecId
_.some(goodsList, { id: policy.productNo }) &&
+family.userInfoSecId === +policy.insuredUserSecId &&
["6.1", "6.2", "6.3"].includes(policy.policyState)
)
.map(policy => ({ ...policy, ..._.find(goodsList, { id: +policy.productNo }) }))
.map(policy => ({ ...policy, ..._.find(goodsList, { id: policy.productNo }) }))
.sort((a, b) => a.termType > b.termType);
return policyListFilted?.[0] || goodsList[0];
......
src/views/Home/Activity/index.less
View file @ a4bfd397
......@@ -66,6 +66,7 @@
&-prize {
margin: 20px 7px;
width: 362px;
height: 362px;
background: url('../../../assets/images/home/zhuanpan.png') no-repeat 0 0 /contain;
......@@ -177,7 +178,7 @@
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0 10px 24px;
margin: 0 20px 24px;
height: 139px;
background: url('../../../assets/images/home/jiangpin.png') no-repeat 0 0 /contain;
......
src/views/Home/Activity/index.vue
View file @ a4bfd397
......@@ -97,6 +97,7 @@
</template>
<script>
import Modal from "../modules/Modal";
import localStorage from "@/service/localStorage";
export default {
name: "Activity",
......@@ -106,6 +107,7 @@ export default {
data() {
return {
isGoing: false,
isLogin: localStorage.get("mongoToken"),
modal: {
winning: false,
guide: false,
......@@ -114,7 +116,16 @@ export default {
}
};
},
computed: {},
computed: {
voteButtonText() {
if (!this.isLogin) {
return "去投票";
}
}
},
created() {
},
methods: {
gameStart() {
this.$nextTick(() => {
......@@ -125,7 +136,7 @@ export default {
const pointer = document.querySelector(".activity-prize-pointer");
// 1. 计算旋转角度
let rotateItemDeg = (3 * 360) / 6; // 每个item旋转角度, 第一个不用旋转
let rotate = rotateItemDeg + 5 * 360;
let rotate = rotateItemDeg + 4 * 360;
let rotateSpeed = ((rotateItemDeg / 360) * 1 + 5).toFixed(2);
// 2. 重置转盘样式
turntable.removeAttribute("style");
......
src/views/Home/index.less
View file @ a4bfd397
......@@ -174,14 +174,13 @@
height: 30px;
background: #FFFFFF;
&.active {
opacity: 0.4;
background:rgba(255,255,255,.4);
}
&:nth-child(3) {
border-radius: 20px 0 0 20px;
}
&:nth-child(4) {
// opacity: 0.4;
border-radius: 0 20px 20px 0;
}
......
src/views/Policy/Detail/index.less
View file @ a4bfd397
......@@ -319,7 +319,9 @@
.Pdbc-user-info {
display: flex;
justify-content: space-around;
// justify-content: space-around;
box-sizing: border-box;
padding: 0 16px;
align-items: center;
width: 100%;
height: 50px;
......@@ -327,6 +329,7 @@
border-radius: 14px;
span:first-child {
width: 55px;
font-size: 14px;
font-weight: 500;
color: #333333;
......@@ -334,6 +337,7 @@
}
span:last-child {
// flex: 1;
font-size: 14px;
font-weight: 400;
color: #666666;
......@@ -357,7 +361,7 @@
}
&-question {
margin-top: 24px;
// margin-top: 24px;
.card-head();
}
......@@ -373,15 +377,34 @@
&-agreement {
display: flex;
justify-content: space-between;
font-size: 0;
flex-wrap: wrap;
span {
a {
font-size: 12px;
color: #333;
font-weight: 400;
color: #333333;
line-height: 24px;
&::after {
display: inline-block;
content: " ";
width: 0;
height: 12px;
border-right: 1px #333 solid;
margin: 0 5px;
vertical-align: -2px;
}
&:last-child::after {
display: none;
}
}
// span {
// font-size: 12px;
// font-weight: 400;
// color: #333333;
// line-height: 24px;
// }
}
}
.Pdb-operation {
......
src/views/Policy/Detail/modules/SecurityContent.vue
View file @ a4bfd397
......@@ -2,40 +2,24 @@
<div class="Pdb-content">
<div class="Pdb-content-head">
<span class="Pdbc-head-name">保障内容</span>
<span class="Pdbc-head-status">查看详情</span>
<router-link
tag="span"
:to="{ name: 'GoodsPlan', query: { type: detail.type } }"
class="Pdbc-head-status"
>
查看详情
</router-link>
</div>
<div class="Pdb-content-body">
<div class="Pdbc-body-item">
<span>100种重大疾病医疗保险金（0免赔额）</span>
<span>600万</span>
</div>
<div class="Pdbc-body-item">
<span>一般医疗保险金（1万免赔额）</span>
<span>300万</span>
</div>
<div class="Pdbc-body-item">
<span>质子重离子医疗保险金（60%赔付）</span>
<span>600万</span>
</div>
<div class="Pdbc-body-item">
<span>意外身故</span>
<span>1万</span>
</div>
<div class="Pdbc-body-item">
<span>意外伤残</span>
<span>1万</span>
</div>
<div class="Pdbc-body-item">
<span>意外住院津贴</span>
<span>100元/天</span>
</div>
<div class="Pdbc-body-item">
<span>生效日期</span>
<span>{{ EffectiveDate }}</span>
</div>
<div class="Pdbc-body-item">
<span>终止日期</span>
<span>{{ EndDate }}</span>
<div
class="Pdbc-body-item"
v-for="(item, index) in content"
:key="index"
:class="{ inline: item.inline }"
>
<span>{{ item.title }}</span>
<span>{{ item.value }}</span>
<cr-divider v-if="item.divider" />
</div>
</div>
<div class="Pdb-content-operation">
......@@ -59,13 +43,20 @@
</template>
<script>
import { parseTime } from "@/service/utils";
export default {
name: "SecurityContent",
props: {
data: {
type: Object,
default: () => ({})
default() {
return {};
}
},
detail: {
type: Object,
default() {
return {};
}
}
},
data() {
......@@ -77,6 +68,16 @@ export default {
},
EndDate() {
return parseTime(this.data.policyEndDate, "{y}-{m}-{d}");
},
content() {
const planCellInfo = this.detail.planCellInfo
? JSON.parse(JSON.stringify(this.detail.planCellInfo))
: [];
planCellInfo.push(
{ title: "生效日期", value: this.EffectiveDate },
{ title: "终止日期", value: this.EndDate }
);
return planCellInfo;
}
},
methods: {
......
src/views/Policy/PaymentRecord/index.vue
View file @ a4bfd397
......@@ -124,23 +124,23 @@ export default {
recordDate: v.recordDate,
amountText: `${v.amount}元`,
payStatusText:
v.currentPayState === "1" ? "已欠费" : v.currentPayState === "2" ? "缴费成功" : "-"
v.currentPayState === "1" ? "已欠费" : v.currentPayState === "3" ? "缴费成功" : "-"
})) || [];
if (["9-5", "9-6"].includes(status)) {
list.unshift({
termNoText:
this.record?.refundRecord?.currentState === "1"
this.record?.refundRecord?.currentState === "2"
? "退款中"
: this.record?.refundRecord?.currentState === "2"
: this.record?.refundRecord?.currentState === "3"
? "退款成功"
: "-",
recordDate: this.record?.refundRecord?.payTime || "-",
amountText: `${this.record?.refundRecord?.amount}元`,
payStatusText:
this.record?.refundRecord?.currentState === "1"
this.record?.refundRecord?.currentState === "2"
? "应退金额"
: this.record?.refundRecord?.currentState === "2"
: this.record?.refundRecord?.currentState === "3"
? "已退金额"
: "-"
});
......
src/views/Policy/modules/InsuranceRecommend.vue
View file @ a4bfd397
<template>
<div class="policy-recommend">
<div class="policy-recommend-content">
<cr-image class="Prc-left" width="" height="" src="@/assets/images/goods/goods-01.png" />
<cr-image class="Prc-left" width="" height="" :src="goods.img" />
<div class="Prc-right">
<p class="Prc-right-title">
<span>600万</span>
<span>医疗保障</span>
<span>30万</span>
<span>{{ goods.guarantee_title }}</span>
</p>
<p class="Prc-right-desc">看病报销医药费,最高600万</p>
<p class="Prc-right-desc">{{ goods.guarantee_sub }}</p>
</div>
</div>
<cr-button class="policy-recommend-button" @click="goNext()">点此投保</cr-button>
......@@ -20,13 +20,22 @@
</div>
</template>
<script>
import GOODS_LIST from "@/api/goodsList.mock";
const goods = GOODS_LIST.find(v => v.id === "HTDQZJX001");
export default {
name: "InsuranceRecommend",
data() {
return {
goods
};
},
methods: {
goNext() {
this.$router.push({
path: "/goods/detail",
query: { id: "TKYLX001", type: "mi" }
query: { id: this.goods.id, type: this.goods.itype }
});
}
}
......
src/views/Policy/modules/PolicyItem.vue
View file @ a4bfd397
......@@ -123,7 +123,6 @@ export default {
return text === "保障中";
},
goNext(text, item) {
console.log(item);
if (["为家人投保", "重新投保"].includes(text)) {
this.$router.push({
path: "/goods/detail",
......
src/views/User/Family/index.less
View file @ a4bfd397
......@@ -66,9 +66,14 @@
line-height: 16px;
}
&_overlay {
&_overlay_2 {
border-radius: 17px;
margin-top: 35px;
margin-top: 10px;
box-shadow: 0px -5px 25px 0px rgba(0,0,0,0.07), 0px -20px 0 -10px #FFFFFF;
}
&_overlay_3 {
border-radius: 17px;
margin-top: 15px;
box-shadow: 0px -5px 25px 0px rgba(0,0,0,0.07), 0px -20px 0 -10px #FFFFFF, 0px -25px 25px 0px rgba(0,0,0,0.07), 0px -33px 0 -14px #FFFFFF;
}
}
......
src/views/User/Family/index.vue
View file @ a4bfd397
......@@ -19,7 +19,11 @@
</div>
<div class="family-list" v-else>
<div
class="family-list-item_overlay family-list-item"
:class="[
{ 'family-list-item_overlay_2': familyList.length === 2 },
{ 'family-list-item_overlay_3': familyList.length >= 3 },
'family-list-item'
]"
@click="go(`/user/family/detail/${familyList[0].userInfoSecId}`)"
>
<div class="Fl-item-left">
......@@ -30,7 +34,7 @@
<p class="Fl-item-right" v-if="familyList[0].auth">已认证</p>
</div>
</div>
<div class="family-collapse" @click="isCollapse = !isCollapse">
<div class="family-collapse" v-if="familyList.length !== 1" @click="isCollapse = !isCollapse">
<span class="family-collapse-text">{{ collapseText }}</span>
<svg-icon
icon-class="triangle-down"
......
src/views/User/Family/modules/FamilyForm.vue
View file @ a4bfd397
......@@ -84,7 +84,7 @@
<span>与您关系:</span>
<span>{{ formData.relation }}</span>
</div>
<div class="Fc-modal-item">
<div class="Fc-modal-item" v-if="formData.socialSecurity">
<span>有无社保:</span>
<span>{{ formData.socialSecurity === "true" ? "有社保" : "无社保" }}</span>
</div>
......@@ -204,16 +204,23 @@ export default {
this.modal.confirm = false;
// 组件不支持boolean,需转换
const params = {
...this.formData,
socialSecurity: this.formData?.socialSecurity === "true" ? true : false
name: this.formData?.nameMask,
idNo: this.formData?.idNoMask,
relation: this.getReletion(this.formData?.relation)
};
// 转换参数类型
if (this.formData?.socialSecurity !== "") {
params.socialSecurity = this.formData?.socialSecurity === "true" ? true : false;
}
if (this.type === "add") {
await addFamily(params);
await this.setFamilyList();
this.formData = _.cloneDeep(defaultFormData);
} else {
params.userInfoSecId = this.information?.userInfoSecId;
await updateFamily(params);
this.$router.push("/user/family");
}
await this.setFamilyList();
this.formData = _.cloneDeep(defaultFormData);
},
onConfirm(picker, res) {
this.formData.relation = res[0];
......@@ -228,9 +235,25 @@ export default {
}
},
async delFamily() {
console.log(this.information);
this.modal.delete = false;
await delFamily();
await delFamily({ userInfoSecId: this.information?.userInfoSecId });
this.$router.push("/user/family");
},
getReletion(relation) {
let result = -1;
if (["父亲", "母亲"].includes(relation)) {
result = 1;
} else if (["女儿", "儿子"].includes(relation)) {
result = 3;
} else if (relation === "本人") {
result = 0;
} else if (relation === "配偶") {
result = 2;
}
return result;
}
}
};
......
src/views/User/HelpCenter/index.less
View file @ a4bfd397
......@@ -39,6 +39,7 @@
left: 0;
right: 0;
bottom: 0;
overflow-y: scroll;
padding: 15px 20px 0;
background: #FFFFFF;
border-radius: 32px 32px 0 0;
......
src/views/User/index.less
View file @ a4bfd397
......@@ -187,6 +187,22 @@
font-size: 11px;
font-weight: 400;
color: @tag-warning-light-color;
&_illness {
background: #FFD8BF;
color: #FF6702;
}
&_life {
background: #F3F2F1;
color: #DDB984;
}
&_casualty {
background: #F6E8FF;
color: #858AFF;
}
&_medical {
background: #FFEAB7;
color: #EAAD1A;
}
}
}
.Ufii-middle-footer {
......
src/views/User/index.vue
View file @ a4bfd397
<template>
<div class="user">
<div class="user-info">
<div class="user-info-account" @click="go('', true)">
<div class="user-info-account" @click="go()">
<span>{{ userInfo.name }}</span>
<span>{{ userInfo.phoneNoMask }}</span>
</div>
<div class="user-info-image" @click="go('', true)">
<div class="user-info-image" @click="go()">
<cr-image
class="user-info-image-avatar"
width=""
......@@ -30,7 +30,7 @@
<span class="user-insurance-list-title">全部保单</span>
</div>
<div class="user-insurance-divider"></div>
<div class="user-insurance-list" @click="go('', true)">
<div class="user-insurance-list" @click="go()">
<div class="user-insurance-list-icon">
<svg-icon icon-class="claims-apply" class-name="user-insurance-list-icon-svg" />
<!-- <div class="user-insurance-list-icon-dot"></div> -->
......@@ -41,20 +41,29 @@
<user-family @go="go"></user-family>
<div class="user-service">
<p class="user-service-title">我的服务</p>
<div class="user-service-main" @click="go('', true)">
<cr-cell title="帮助中心" :icon="help" class="user-service-main-item">
<div class="user-service-main">
<cr-cell
title="帮助中心"
:icon="help"
class="user-service-main-item"
@click="go('/user/help-center', false)"
>
<svg-icon slot="right-icon" icon-class="arrow" class-name="user-service-main-item-svg" />
</cr-cell>
<cr-cell title="客服电话" :icon="customerService" class="user-service-main-item">
<cr-cell
title="客服电话"
:icon="customerService"
class="user-service-main-item"
@click="go()"
>
<svg-icon slot="right-icon" icon-class="arrow" class-name="user-service-main-item-svg" />
</cr-cell>
</div>
</div>
<div class="user-logo">
<svg-icon icon-class="logo" class-name="user-logo-svg" />
<p class="user-logo-desc" @click="go('/introduction')">了解芒果保险</p>
<p class="user-logo-desc" @click="go('/introduction', false)">了解芒果保险</p>
</div>
<record-layer v-model="showLayer" desc="敬请期待"></record-layer>
<tabbar></tabbar>
</div>
</template>
......@@ -64,15 +73,14 @@ import customerService from "@/assets/images/user/customer-service@2x.png";
import help from "@/assets/images/user/help@2x.png";
import UserFamily from "./modules/UserFamily";
import Tabbar from "@/components/Tabbar";
import RecordLayer from "@/components/RecordLayer";
import { getPolicyList } from "@/api/policy";
import localStorage from "@/service/localStorage";
export default {
name: "User",
components: {
UserFamily,
Tabbar,
RecordLayer
Tabbar
},
data() {
return {
......@@ -84,22 +92,36 @@ export default {
};
},
computed: {
...mapState("user", ["familyList", "userInfo"])
...mapState("user", ["familyList", "userInfo"]),
...mapState(["isShowLogin"])
},
async created() {
this.setUserInfo();
const policyList = await getPolicyList();
await this.setFamilyList(policyList);
this.showDot = policyList.some(policy => policy.policyState === "6.3");
created() {
if (localStorage.get("mongoToken")) {
this.getUserInfo();
}
},
watch: {
isShowLogin(val) {
if (!val && localStorage.get("mongoToken")) {
this.getUserInfo();
}
}
},
methods: {
...mapActions("user", ["setFamilyList", "setUserInfo"]),
go(path, isOverlay = false) {
if (isOverlay) {
this.showLayer = true;
} else {
this.$router.push(path);
...mapActions(["setIsShowLogin"]),
go(path, isNeedLogin = true) {
if (isNeedLogin && !localStorage.get("mongoToken")) {
this.setIsShowLogin(true);
return;
}
if (path) this.$router.push(path);
},
async getUserInfo() {
this.setUserInfo();
const policyList = await getPolicyList();
await this.setFamilyList(policyList);
this.showDot = policyList.some(policy => policy.policyState === "6.3");
}
}
};
......
src/views/User/modules/UserFamily.vue
View file @ a4bfd397
......@@ -22,8 +22,12 @@
</div>
</div>
<div class="user-family-insurance">
<!-- user-family-insurance-item-middle_enable 保障中 -->
<div class="user-family-insurance-item" v-for="(item, index) in policyList" :key="index">
<div
class="user-family-insurance-item"
@click="go('/policy/detail', item)"
v-for="(item, index) in policyList"
:key="index"
>
<cr-image
round
width=""
......@@ -31,59 +35,43 @@
class="user-family-insurance-item-left"
:src="item.productNo ? item.icon : item.icon_closed"
/>
<div class="user-family-insurance-item-middle">
<div
:class="[
{ 'user-family-insurance-item-middle_enable': item.productNo },
'user-family-insurance-item-middle'
]"
>
<div class="Ufii-middle-main">
<span class="Ufii-middle-main-title">{{ item.guarantee_title }}</span>
<span class="Ufii-middle-main-status" v-if="item.productNo">保障中</span>
<span
:class="[
{ 'Ufii-middle-main-status_medical': item.itype === 'mi' },
{ 'Ufii-middle-main-status_illness': item.itype === 'cii' },
{ 'Ufii-middle-main-status_casualty': item.itype === 'ai' },
{ 'Ufii-middle-main-status_life': item.itype === 'li' },
'Ufii-middle-main-status'
]"
v-if="item.productNo"
>保障中</span
>
</div>
<div class="Ufii-middle-footer">{{ item.guarantee_sub }}</div>
</div>
<p class="user-family-insurance-item-right" v-if="!item.productNo">开启保障</p>
</div>
<!-- <div class="user-family-insurance-item">
<cr-image round width="" height="" class="user-family-insurance-item-left" :src="illness" />
<div class="user-family-insurance-item-middle">
<div class="Ufii-middle-main">
<span class="Ufii-middle-main-title">重疾保障</span>
<span class="status">保障中</span>
</div>
<div class="Ufii-middle-footer">100种重症+40种轻症</div>
</div>
<p class="user-family-insurance-item-right">开启保障</p>
</div>
<div class="user-family-insurance-item">
<cr-image
round
width=""
height=""
class="user-family-insurance-item-left"
:src="casualty"
/>
<div class="user-family-insurance-item-middle">
<div class="Ufii-middle-main">
<span class="Ufii-middle-main-title">意外保障</span>
<span class="Ufii-middle-main-status">保障中</span>
</div>
<div class="Ufii-middle-footer">意外风险覆盖全,最高100万保额</div>
</div>
<p class="user-family-insurance-item-right">开启保障</p>
</div>
<div class="user-family-insurance-item">
<cr-image round width="" height="" class="user-family-insurance-item-left" :src="illness" />
<div class="user-family-insurance-item-middle">
<div class="Ufii-middle-main">
<span class="Ufii-middle-main-title">人寿保障</span>
<span class="status">保障中</span>
</div>
<div class="Ufii-middle-footer">最高350万保额,顶梁柱必备</div>
<p
class="user-family-insurance-item-right"
v-if="!item.productNo"
@click.stop="go('/goods/detail', item)"
>
开启保障
</p>
</div>
<p class="user-family-insurance-item-right">开启保障</p>
</div> -->
</div>
</div>
</template>
<script>
import { mapState } from "vuex";
import localStorage from "@/service/localStorage";
import GOODS_LIST from "@/api/goodsList.mock";
export default {
name: "UserFamily",
......@@ -96,22 +84,33 @@ export default {
computed: {
...mapState("user", ["familyList"]),
policyList() {
if (!localStorage.get("mongoToken")) {
// 未登录时返回默认徽章墙
const policyList = GOODS_LIST.filter(v => v.id !== "BNZJX001");
return policyList;
}
return this.familyList[this.activeIndex]?.policyList;
}
},
watch: {
familyList() {
this.$nextTick(() => {
console.log(this.familyList.length);
const offsetWidth = document.querySelector(".user-family-info").offsetWidth;
const scrollWidth = document.querySelector(".user-family-info").scrollWidth;
this.isFixed = scrollWidth > offsetWidth;
// console.log(scrollWidth, offsetWidth, this.isFixed);
});
}
},
methods: {
go(path) {
go(path, params) {
if (path === "/goods/detail" && params) {
path = {
path,
query: { id: params.id, type: params.itype }
};
} else if (path === "/policy/detail" && params.orderNo) {
path = `${path}/${params.orderNo}`;
}
this.$emit("go", path);
}
}
......
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