Skip to content

dev / pingan-life-index-pro

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

默认提交

1 parent 31442ebf
Expand all
Inline Side-by-side
Showing 7 changed files with 216 additions and 7 deletions
import api from '@/api/api'
import {
httpGet,
httpPost
} from '@/api/fetch-api.js'
export default {
props: {
// 是否显示组件
visible: {
type: Boolean,
default: true,
},
// 标题，不建议使用
title: {
type: String,
default: "",
},
// 是否显示遮罩层
overlayShow: {
type: Boolean,
default: true,
},
// 点击关闭回调方法
close: {
type: Function,
default: null
},
// 点击蒙层回调方法
overlay: {
type: Function,
default: null
}
},
data() {
return {
key: 'value'
}
},
components: {},
methods: {
// 点击确认
onConfirmHandler() {
if (this.confirm) {
this.confirm();
}
},
// 点击取消
onCancelHandler() {
if (this.cancel) {
this.cancel();
}
},
// 点击关闭
onCloseHandler() {
if (this.close) {
this.close();
}
},
// 点击蒙层
onOverLayHandler() {
if (this.overlay) {
this.overlay();
}
},
initData() {}
},
mounted() {},
created() {}
}
@import '@/styles/_support';
.comp {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 100%;
@extend .fcc;
text-align: center;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba($color: #000000, $alpha: 0.7);
}
.modal {
position: relative;
width: 60rem;
min-height: 18.25rem;
border-radius: $borderRadius;
background-color: #ffffff;
height: 70vh;
&-title {
position: relative;
@extend .bb;
@include border-top-radius($borderRadius);
@include ellipsis(1);
font-size: $fontSizeTitle;
height: 5rem;
line-height: 5rem;
background-color: #f2f2f2;
text-align: left;
padding: 0 2.75rem;
.close-btn {
position: absolute;
top: 2rem;
right: 2rem;
}
}
&-icon-wrap {
@extend .fcc;
height: 12rem;
}
&-content {
position: relative;
@extend .bb;
font-size: $fontSize;
padding: $marginMedium-M 1rem $marginMedium-M 2rem;
height: 62vh;
&-desc {
text-align: left;
height: 100%;
overflow-y: scroll;
line-height: 2;
letter-spacing: 1.2px;
padding-right: 16px;
.t1 {
font-weight: bold;
}
}
}
&-btn-wrap {
display: flex;
justify-content: center;
.btn {
@include btc2(12rem, 3.6rem, 16px);
margin: 3rem 1rem 0;
@extend .pointer;
}
}
}
.hide {
display: none;
}
@media (max-width: 1200px) {
.comp {
position: fixed;
}
.modal {
position: absolute;
}
}
@media (max-width: 768px) {
.modal {
width: 90%;
height: auto;
&-title {}
&-icon-wrap {
height: 10rem;
img {
height: 100%;
}
}
&-content {
height: 70vh;
}
}
}
......@@ -15,6 +15,7 @@ import { contactMethodCheck } from '@utils/utils.js';
import modalComp from '@/components/modal-comp/modal-comp.vue';
import modalSimpleComp from '@/components/modal-simple-comp/modal-simple-comp.vue';
import modalProtocolComp from '@/components/modal-protocol-comp/modal-protocol-comp.vue';
import modalUploadCardComp from '@/components/modal-upload-card-comp/modal-upload-card-comp.vue';
import {
passwordEncrypt
......@@ -84,6 +85,7 @@ export default {
modalVisiable: false,
modalSimpleVisiable: false,
modalUploadCardVisiable: false,
modalProtocolVisiable:false,
targetPath: "",
modalIcon: "succ",
modalContent: ""
......@@ -92,6 +94,7 @@ export default {
components: {
modalComp,
modalSimpleComp,
modalProtocolComp,
modalUploadCardComp
},
computed: {
......@@ -138,14 +141,16 @@ export default {
closeModal() {
this.modalVisiable = false;
this.modalSimpleVisiable = false;
this.modalProtocolVisiable = false;
},
onCheckHandler() {
},
onProtocolHandler() {
this.$router.push({
path: "/protocol"
})
this.modalProtocolVisiable = true;
// this.$router.push({
// path: "/protocol"
// })
},
onSubmitHandler() {
......
......@@ -4,6 +4,9 @@
<modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp>
<modal-simple-comp :visible="modalSimpleVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="closeModal" :overlay="closeModal" :close="closeModal"></modal-simple-comp>
<modal-upload-card-comp :visible="modalUploadCardVisiable" :show-confirm="true" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback" :close="closeCallback"></modal-upload-card-comp>
<!-- 会员协议 -->
<modal-protocol-comp :visible="modalProtocolVisiable" :overlay="closeModal" :close="closeModal"></modal-protocol-comp>
<div class="ebg"></div>
<div class="content">
<div class="top-space"></div>
......
......@@ -10,6 +10,7 @@ import { contactMethodCheck } from '@utils/utils.js';
import modalComp from '@/components/modal-comp/modal-comp.vue';
import modalSimpleComp from '@/components/modal-simple-comp/modal-simple-comp.vue';
import modalProtocolComp from '@/components/modal-protocol-comp/modal-protocol-comp.vue';
import { passwordEncrypt } from '@/utils/encrypt.js';
import Vue from 'vue';
import { Loading } from 'vant';
......@@ -58,6 +59,7 @@ export default {
},
modalSimpleVisiable: false,
modalVisiable: false,
modalProtocolVisiable:false,
targetPath: "",
modalIcon: "succ",
modalContent: ""
......@@ -65,7 +67,8 @@ export default {
},
components: {
modalComp,
modalSimpleComp
modalSimpleComp,
modalProtocolComp
},
computed: {
...mapState({
......@@ -104,11 +107,13 @@ export default {
closeModal() {
this.modalVisiable = false;
this.modalSimpleVisiable = false;
this.modalProtocolVisiable = false;
},
onProtocolHandler() {
this.$router.push({
path: "/protocol"
})
this.modalProtocolVisiable = true;
// this.$router.push({
// path: "/protocol"
// })
},
handlerStdSendOTP() {
// 发送短信验证码
......
......@@ -3,6 +3,8 @@
<div>
<modal-simple-comp :visible="modalSimpleVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="closeModal" :close="closeModal"></modal-simple-comp>
<modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp>
<!-- 会员协议 -->
<modal-protocol-comp :visible="modalProtocolVisiable" :overlay="closeModal" :close="closeModal"></modal-protocol-comp>
<div class="ebg"></div>
<div class="content">
<div class="top-space"></div>
......