默认提交
Showing
22 changed files
with
655 additions
and
67 deletions
src/assets/images/common/card-back.png
0 → 100644
3.35 KB
src/assets/images/common/card-front.png
0 → 100644
2.96 KB
219 Bytes
... | @@ -14,6 +14,11 @@ module.exports = { | ... | @@ -14,6 +14,11 @@ module.exports = { |
14 | form: { | 14 | form: { |
15 | datePicker: { | 15 | datePicker: { |
16 | datePlaceholder: "please select date" | 16 | datePlaceholder: "please select date" |
17 | }, | ||
18 | modalUploadCard:{ | ||
19 | tit:"請上傳證件資料", | ||
20 | front:"證件正面", | ||
21 | back:"證件反面", | ||
17 | } | 22 | } |
18 | }, | 23 | }, |
19 | nav: { | 24 | nav: { | ... | ... |
... | @@ -14,6 +14,11 @@ module.exports = { | ... | @@ -14,6 +14,11 @@ module.exports = { |
14 | form: { | 14 | form: { |
15 | datePicker: { | 15 | datePicker: { |
16 | datePlaceholder: "请选择日期" | 16 | datePlaceholder: "请选择日期" |
17 | }, | ||
18 | modalUploadCard:{ | ||
19 | tit:"請上傳證件資料", | ||
20 | front:"證件正面", | ||
21 | back:"證件反面", | ||
17 | } | 22 | } |
18 | }, | 23 | }, |
19 | nav: { | 24 | nav: { | ... | ... |
... | @@ -14,6 +14,11 @@ module.exports = { | ... | @@ -14,6 +14,11 @@ module.exports = { |
14 | form: { | 14 | form: { |
15 | datePicker: { | 15 | datePicker: { |
16 | datePlaceholder: "请选择日期" | 16 | datePlaceholder: "请选择日期" |
17 | }, | ||
18 | modalUploadCard: { | ||
19 | tit: "请上传证件资料", | ||
20 | front: "证件正面", | ||
21 | back: "证件反面", | ||
17 | } | 22 | } |
18 | }, | 23 | }, |
19 | nav: { | 24 | nav: { |
... | @@ -49,19 +54,19 @@ module.exports = { | ... | @@ -49,19 +54,19 @@ module.exports = { |
49 | name: "产品介绍", | 54 | name: "产品介绍", |
50 | path: "", | 55 | path: "", |
51 | list: [{ | 56 | list: [{ |
52 | name: "自愿医保基本计划", | 57 | name: "自愿医保基本计划", |
53 | path: "/empty" | 58 | path: "/empty" |
54 | }, | 59 | }, |
55 | { | 60 | { |
56 | name: "分红终身寿险", | 61 | name: "分红终身寿险", |
57 | path: "/product" | 62 | path: "/product" |
58 | }] | 63 | } |
64 | ] | ||
59 | }, | 65 | }, |
60 | { | 66 | { |
61 | name: "客户服务", | 67 | name: "客户服务", |
62 | path: "", | 68 | path: "", |
63 | list: [ | 69 | list: [{ |
64 | { | ||
65 | name: "客户服务导航", | 70 | name: "客户服务导航", |
66 | path: "/custom/product" | 71 | path: "/custom/product" |
67 | }, | 72 | }, |
... | @@ -103,24 +108,25 @@ module.exports = { | ... | @@ -103,24 +108,25 @@ module.exports = { |
103 | name: "关于我们", | 108 | name: "关于我们", |
104 | path: "", | 109 | path: "", |
105 | list: [{ | 110 | list: [{ |
106 | name: "平安人寿香港", | 111 | name: "平安人寿香港", |
107 | path: "/profile" | 112 | path: "/profile" |
108 | }, | 113 | }, |
109 | { | 114 | { |
110 | name: "公司活动", | 115 | name: "公司活动", |
111 | path: "/empty" | 116 | path: "/empty" |
112 | },{ | 117 | }, { |
113 | name: "新闻中心", | 118 | name: "新闻中心", |
114 | path: "/news/list" | 119 | path: "/news/list" |
115 | }, | 120 | }, |
116 | { | 121 | { |
117 | name: "企业社会责任", | 122 | name: "企业社会责任", |
118 | path: "/empty" | 123 | path: "/empty" |
119 | }, | 124 | }, |
120 | { | 125 | { |
121 | name: "奖项殊荣", | 126 | name: "奖项殊荣", |
122 | path: "/empty" | 127 | path: "/empty" |
123 | }] | 128 | } |
129 | ] | ||
124 | }, | 130 | }, |
125 | { | 131 | { |
126 | name: "加入我们", | 132 | name: "加入我们", |
... | @@ -612,7 +618,7 @@ module.exports = { | ... | @@ -612,7 +618,7 @@ module.exports = { |
612 | } | 618 | } |
613 | }, | 619 | }, |
614 | policyChangeInformation: { | 620 | policyChangeInformation: { |
615 | title : "客户资料变更", | 621 | title: "客户资料变更", |
616 | hkClient: "是否平安香港客戶", | 622 | hkClient: "是否平安香港客戶", |
617 | yes: "是", | 623 | yes: "是", |
618 | no: "否", | 624 | no: "否", | ... | ... |
1 | @import '@/styles/_support'; | 1 | @import '@/styles/_support'; |
2 | 2 | ||
3 | .comp { | 3 | .comp { |
4 | position: absolute; | 4 | position: fixed; |
5 | top: 0; | ||
6 | left: 0; | ||
5 | z-index: 999; | 7 | z-index: 999; |
6 | width: 100%; | 8 | width: 100%; |
7 | height: 100%; | 9 | height: 100%; |
... | @@ -21,8 +23,6 @@ | ... | @@ -21,8 +23,6 @@ |
21 | @extend .bb; | 23 | @extend .bb; |
22 | width: 46.25rem; | 24 | width: 46.25rem; |
23 | height: 28.5rem; | 25 | height: 28.5rem; |
24 | // width: 36rem; | ||
25 | // min-height: 22.5rem; | ||
26 | border-radius: 1.25rem; | 26 | border-radius: 1.25rem; |
27 | background-color: #ffffff; | 27 | background-color: #ffffff; |
28 | padding: 4.5rem 2rem 2.5rem; | 28 | padding: 4.5rem 2rem 2.5rem; |
... | @@ -58,6 +58,37 @@ | ... | @@ -58,6 +58,37 @@ |
58 | } | 58 | } |
59 | } | 59 | } |
60 | 60 | ||
61 | .hide{ | 61 | .hide { |
62 | display: none; | 62 | display: none; |
63 | } | 63 | } |
64 | |||
65 | @media (max-width: 1200px) { | ||
66 | .comp { | ||
67 | position: fixed; | ||
68 | } | ||
69 | |||
70 | .modal { | ||
71 | // width: 90%; | ||
72 | position: absolute; | ||
73 | } | ||
74 | } | ||
75 | |||
76 | |||
77 | @media (max-width: 768px) { | ||
78 | .modal { | ||
79 | // height: 28.5rem; | ||
80 | width: 90%; | ||
81 | height: auto; | ||
82 | |||
83 | &-title { | ||
84 | margin-bottom: 1rem; | ||
85 | } | ||
86 | |||
87 | &-icon-wrap { | ||
88 | height: 10rem; | ||
89 | img{ | ||
90 | height: 100%; | ||
91 | } | ||
92 | } | ||
93 | } | ||
94 | } | ... | ... |
1 | import api from '@/api/api' | ||
2 | import { | ||
3 | httpGet, | ||
4 | httpPost | ||
5 | } from '@/api/fetch-api.js' | ||
6 | |||
7 | |||
8 | export default { | ||
9 | props: { | ||
10 | // 是否显示组件 | ||
11 | visible: { | ||
12 | type: Boolean, | ||
13 | default: true, | ||
14 | }, | ||
15 | // 标题名称 需要再 assets/images/common/ 目录下添加图标 | ||
16 | icon: { | ||
17 | type: String, | ||
18 | default: "succ", | ||
19 | }, | ||
20 | // 标题,不建议使用 | ||
21 | title: { | ||
22 | type: String, | ||
23 | default: "", | ||
24 | }, | ||
25 | // 文案 | ||
26 | content: { | ||
27 | type: String, | ||
28 | default: "", | ||
29 | }, | ||
30 | // 确认文案 | ||
31 | confirmText: { | ||
32 | type: String, | ||
33 | default: "確認", | ||
34 | }, | ||
35 | // 取消文案 | ||
36 | cancelText: { | ||
37 | type: String, | ||
38 | default: "取消", | ||
39 | }, | ||
40 | // 是否显示确认按钮 | ||
41 | showConfirm: { | ||
42 | type: Boolean, | ||
43 | default: true, | ||
44 | }, | ||
45 | // 是否显示取消按钮 | ||
46 | showCancel: { | ||
47 | type: Boolean, | ||
48 | default: false, | ||
49 | }, | ||
50 | // 是否显示遮罩层 | ||
51 | overlayShow: { | ||
52 | type: Boolean, | ||
53 | default: true, | ||
54 | }, | ||
55 | |||
56 | // 确定按钮回调方法 | ||
57 | confirm: { | ||
58 | type: Function, | ||
59 | default: null | ||
60 | }, | ||
61 | // 取消按钮回调方法 | ||
62 | cancel: { | ||
63 | type: Function, | ||
64 | default: null | ||
65 | }, | ||
66 | // 点击关闭回调方法 | ||
67 | close: { | ||
68 | type: Function, | ||
69 | default: null | ||
70 | }, | ||
71 | // 点击蒙层回调方法 | ||
72 | overlay: { | ||
73 | type: Function, | ||
74 | default: null | ||
75 | } | ||
76 | }, | ||
77 | data() { | ||
78 | return { | ||
79 | key: 'value' | ||
80 | } | ||
81 | }, | ||
82 | components: {}, | ||
83 | methods: { | ||
84 | // 点击确认 | ||
85 | onConfirmHandler() { | ||
86 | if (this.confirm) { | ||
87 | this.confirm(); | ||
88 | } | ||
89 | }, | ||
90 | // 点击取消 | ||
91 | onCancelHandler() { | ||
92 | if (this.cancel) { | ||
93 | this.cancel(); | ||
94 | } | ||
95 | }, | ||
96 | // 点击关闭 | ||
97 | onCloseHandler() { | ||
98 | if (this.close) { | ||
99 | this.close(); | ||
100 | } | ||
101 | }, | ||
102 | // 点击蒙层 | ||
103 | onOverLayHandler() { | ||
104 | if (this.overlay) { | ||
105 | this.overlay(); | ||
106 | } | ||
107 | }, | ||
108 | initData() {} | ||
109 | }, | ||
110 | mounted() {}, | ||
111 | created() {} | ||
112 | } |
1 | @import '@/styles/_support'; | ||
2 | |||
3 | .comp { | ||
4 | position: fixed; | ||
5 | top: 0; | ||
6 | left: 0; | ||
7 | z-index: 999; | ||
8 | width: 100%; | ||
9 | height: 100%; | ||
10 | @extend .fcc; | ||
11 | text-align: center; | ||
12 | } | ||
13 | |||
14 | .overlay { | ||
15 | position: absolute; | ||
16 | width: 100%; | ||
17 | height: 100%; | ||
18 | background: rgba($color: #000000, $alpha: 0.7); | ||
19 | } | ||
20 | |||
21 | .modal { | ||
22 | position: relative; | ||
23 | width: 45.5rem; | ||
24 | min-height: 18.25rem; | ||
25 | border-radius: $borderRadius; | ||
26 | background-color: #ffffff; | ||
27 | |||
28 | &-title { | ||
29 | position: relative; | ||
30 | @extend .bb; | ||
31 | @include border-top-radius($borderRadius); | ||
32 | @include ellipsis(1); | ||
33 | font-size: $fontSizeTitle; | ||
34 | font-weight: bold; | ||
35 | height: 5rem; | ||
36 | line-height: 5rem; | ||
37 | // font-weight: bold; | ||
38 | background-color: #f2f2f2; | ||
39 | text-align: left; | ||
40 | padding: 0 3rem; | ||
41 | |||
42 | .close-btn { | ||
43 | position: absolute; | ||
44 | top: 2rem; | ||
45 | right: 2rem; | ||
46 | } | ||
47 | } | ||
48 | |||
49 | &-icon-wrap { | ||
50 | @extend .fcc; | ||
51 | height: 12rem; | ||
52 | } | ||
53 | |||
54 | &-content { | ||
55 | @extend .fcc; | ||
56 | @extend .bb; | ||
57 | font-size: $fontSize; | ||
58 | font-weight: bold; | ||
59 | min-height: 13.25rem; | ||
60 | padding: $marginMedium-M 3rem; | ||
61 | } | ||
62 | |||
63 | &-btn-wrap { | ||
64 | display: flex; | ||
65 | justify-content: center; | ||
66 | |||
67 | .btn { | ||
68 | @include btc2(12rem, 3.6rem, 16px); | ||
69 | margin: 3rem 1rem 0; | ||
70 | @extend .pointer; | ||
71 | } | ||
72 | } | ||
73 | } | ||
74 | |||
75 | .hide { | ||
76 | display: none; | ||
77 | } | ||
78 | |||
79 | @media (max-width: 1200px) { | ||
80 | .comp { | ||
81 | position: fixed; | ||
82 | } | ||
83 | |||
84 | .modal { | ||
85 | position: absolute; | ||
86 | } | ||
87 | } | ||
88 | |||
89 | |||
90 | @media (max-width: 768px) { | ||
91 | .modal { | ||
92 | |||
93 | width: 90%; | ||
94 | height: auto; | ||
95 | |||
96 | &-title {} | ||
97 | |||
98 | &-icon-wrap { | ||
99 | height: 10rem; | ||
100 | |||
101 | img { | ||
102 | height: 100%; | ||
103 | } | ||
104 | } | ||
105 | } | ||
106 | } |
1 | |||
2 | <template> | ||
3 | <div class="comp" :class="{'hide' : !visible }"> | ||
4 | <div @click="onOverLayHandler()" class="overlay" v-if="overlayShow"></div> | ||
5 | <div class="modal"> | ||
6 | <div class="modal-title"> | ||
7 | {{title}} | ||
8 | <img @click="onCloseHandler()" class="close-btn pointer" :src="require('@assets/images/common/icon-modal-simple-close.png')"> | ||
9 | </div> | ||
10 | <div class="modal-content">{{content}}</div> | ||
11 | </div> | ||
12 | </div> | ||
13 | </template> | ||
14 | |||
15 | <script src="./modal-simple-comp.js"></script> | ||
16 | <style lang="scss" scoped> | ||
17 | @import "./modal-simple-comp.scss"; | ||
18 | </style> |
1 | import api from '@/api/api' | ||
2 | import { | ||
3 | httpGet, | ||
4 | httpPost | ||
5 | } from '@/api/fetch-api.js' | ||
6 | |||
7 | |||
8 | export default { | ||
9 | props: { | ||
10 | // 是否显示组件 | ||
11 | visible: { | ||
12 | type: Boolean, | ||
13 | default: true, | ||
14 | }, | ||
15 | // 标题名称 需要再 assets/images/common/ 目录下添加图标 | ||
16 | icon: { | ||
17 | type: String, | ||
18 | default: "succ", | ||
19 | }, | ||
20 | // 标题,不建议使用 | ||
21 | title: { | ||
22 | type: String, | ||
23 | default: "", | ||
24 | }, | ||
25 | // 文案 | ||
26 | content: { | ||
27 | type: String, | ||
28 | default: "", | ||
29 | }, | ||
30 | // 确认文案 | ||
31 | confirmText: { | ||
32 | type: String, | ||
33 | default: "確認", | ||
34 | }, | ||
35 | // 取消文案 | ||
36 | cancelText: { | ||
37 | type: String, | ||
38 | default: "取消", | ||
39 | }, | ||
40 | // 是否显示确认按钮 | ||
41 | showConfirm: { | ||
42 | type: Boolean, | ||
43 | default: true, | ||
44 | }, | ||
45 | // 是否显示取消按钮 | ||
46 | showCancel: { | ||
47 | type: Boolean, | ||
48 | default: false, | ||
49 | }, | ||
50 | // 是否显示遮罩层 | ||
51 | overlayShow: { | ||
52 | type: Boolean, | ||
53 | default: true, | ||
54 | }, | ||
55 | |||
56 | // 确定按钮回调方法 | ||
57 | confirm: { | ||
58 | type: Function, | ||
59 | default: null | ||
60 | }, | ||
61 | // 取消按钮回调方法 | ||
62 | cancel: { | ||
63 | type: Function, | ||
64 | default: null | ||
65 | }, | ||
66 | // 点击关闭回调方法 | ||
67 | close: { | ||
68 | type: Function, | ||
69 | default: null | ||
70 | }, | ||
71 | // 点击蒙层回调方法 | ||
72 | overlay: { | ||
73 | type: Function, | ||
74 | default: null | ||
75 | } | ||
76 | }, | ||
77 | data() { | ||
78 | return { | ||
79 | key: 'value' | ||
80 | } | ||
81 | }, | ||
82 | components: {}, | ||
83 | methods: { | ||
84 | // 点击确认 | ||
85 | onConfirmHandler() { | ||
86 | if (this.confirm) { | ||
87 | this.confirm(); | ||
88 | } | ||
89 | }, | ||
90 | // 点击取消 | ||
91 | onCancelHandler() { | ||
92 | if (this.cancel) { | ||
93 | this.cancel(); | ||
94 | } | ||
95 | }, | ||
96 | // 点击关闭 | ||
97 | onCloseHandler() { | ||
98 | if (this.close) { | ||
99 | this.close(); | ||
100 | } | ||
101 | }, | ||
102 | // 点击蒙层 | ||
103 | onOverLayHandler() { | ||
104 | if (this.overlay) { | ||
105 | this.overlay(); | ||
106 | } | ||
107 | }, | ||
108 | initData() {} | ||
109 | }, | ||
110 | mounted() {}, | ||
111 | created() {} | ||
112 | } |
1 | @import '@/styles/_support'; | ||
2 | |||
3 | .comp { | ||
4 | position: fixed; | ||
5 | top: 0; | ||
6 | left: 0; | ||
7 | z-index: 999; | ||
8 | width: 100%; | ||
9 | height: 100%; | ||
10 | @extend .fcc; | ||
11 | text-align: center; | ||
12 | } | ||
13 | |||
14 | .overlay { | ||
15 | position: absolute; | ||
16 | width: 100%; | ||
17 | height: 100%; | ||
18 | background: rgba($color: #000000, $alpha: 0.7); | ||
19 | } | ||
20 | |||
21 | .modal { | ||
22 | @extend .bb; | ||
23 | position: relative; | ||
24 | width: 45.5rem; | ||
25 | min-height: 23.25rem; | ||
26 | border-radius: $borderRadius; | ||
27 | background-color: #ffffff; | ||
28 | padding-bottom: $marginMedium-M; | ||
29 | |||
30 | |||
31 | &-title { | ||
32 | position: relative; | ||
33 | @extend .bb; | ||
34 | @include border-top-radius($borderRadius); | ||
35 | @include ellipsis(1); | ||
36 | font-size: $fontSizeTitle; | ||
37 | font-weight: bold; | ||
38 | height: 5rem; | ||
39 | line-height: 5rem; | ||
40 | // font-weight: bold; | ||
41 | background-color: #f2f2f2; | ||
42 | text-align: left; | ||
43 | padding: 0 3rem; | ||
44 | |||
45 | .close-btn { | ||
46 | position: absolute; | ||
47 | top: 2rem; | ||
48 | right: 2rem; | ||
49 | } | ||
50 | } | ||
51 | |||
52 | &-icon-wrap { | ||
53 | @extend .fcc; | ||
54 | height: 12rem; | ||
55 | } | ||
56 | |||
57 | &-content { | ||
58 | @extend .fcc; | ||
59 | @extend .bb; | ||
60 | font-size: $fontSize; | ||
61 | font-weight: bold; | ||
62 | min-height: 13.25rem; | ||
63 | padding: $marginMedium-M 3rem; | ||
64 | |||
65 | .upload { | ||
66 | display: flex; | ||
67 | flex-wrap: wrap; | ||
68 | justify-content: center; | ||
69 | align-content: center; | ||
70 | |||
71 | &-item { | ||
72 | padding: 0 $marginSmallHalf; | ||
73 | } | ||
74 | } | ||
75 | } | ||
76 | |||
77 | &-btn-wrap { | ||
78 | display: flex; | ||
79 | justify-content: center; | ||
80 | |||
81 | .btn { | ||
82 | @include btc2(12rem, 3.6rem, 16px); | ||
83 | margin: 0 1rem 0; | ||
84 | @extend .pointer; | ||
85 | } | ||
86 | } | ||
87 | } | ||
88 | |||
89 | .hide { | ||
90 | display: none; | ||
91 | } | ||
92 | |||
93 | @media (max-width: 1200px) { | ||
94 | .comp { | ||
95 | position: fixed; | ||
96 | } | ||
97 | |||
98 | .modal { | ||
99 | position: absolute; | ||
100 | } | ||
101 | } | ||
102 | |||
103 | |||
104 | @media (max-width: 768px) { | ||
105 | .modal { | ||
106 | width: 90%; | ||
107 | height: auto; | ||
108 | |||
109 | &-title {} | ||
110 | |||
111 | &-icon-wrap { | ||
112 | height: 10rem; | ||
113 | |||
114 | img { | ||
115 | height: 100%; | ||
116 | } | ||
117 | } | ||
118 | |||
119 | &-content { | ||
120 | .upload { | ||
121 | &-item { | ||
122 | width: auto; | ||
123 | } | ||
124 | } | ||
125 | } | ||
126 | } | ||
127 | } |
1 | |||
2 | <template> | ||
3 | <div class="comp" :class="{'hide' : !visible }"> | ||
4 | <div @click="onOverLayHandler()" class="overlay" v-if="overlayShow"></div> | ||
5 | <div class="modal"> | ||
6 | <div class="modal-title"> | ||
7 | {{$t('form.modalUploadCard.tit')}} | ||
8 | <img @click="onCloseHandler()" class="close-btn pointer" :src="require('@assets/images/common/icon-modal-simple-close.png')"> | ||
9 | </div> | ||
10 | <div class="modal-content"> | ||
11 | <div class="gird-g upload"> | ||
12 | <div class="pure-u-1 pure-u-md-1-2 upload-item"> | ||
13 | <div class="tit"> {{$t('form.modalUploadCard.front')}}</div> | ||
14 | <img class="poster pointer" :src="require('@assets/images/common/card-front.png')" alt=""> | ||
15 | </div> | ||
16 | <div class="pure-u-1 pure-u-md-1-2 upload-item"> | ||
17 | <div class="tit"> {{$t('form.modalUploadCard.back')}}</div> | ||
18 | <img class="poster pointer" :src="require('@assets/images/common/card-back.png')" alt=""> | ||
19 | </div> | ||
20 | </div> | ||
21 | </div> | ||
22 | <div class="modal-btn-wrap"> | ||
23 | <div @click="onCancelHandler()" v-if="showCancel" class="btn">{{cancelText}}</div> | ||
24 | <div @click="onConfirmHandler()" v-if="showConfirm" class="btn">{{confirmText}}</div> | ||
25 | </div> | ||
26 | </div> | ||
27 | </div> | ||
28 | </template> | ||
29 | |||
30 | <script src="./modal-upload-card-comp.js"></script> | ||
31 | <style lang="scss" scoped> | ||
32 | @import "./modal-upload-card-comp.scss"; | ||
33 | </style> |
... | @@ -25,20 +25,9 @@ export default { | ... | @@ -25,20 +25,9 @@ export default { |
25 | e2: "", | 25 | e2: "", |
26 | e3: "" | 26 | e3: "" |
27 | }, | 27 | }, |
28 | dataForm: { | ||
29 | |||
30 | }, | ||
31 | insuranceForm: { | ||
32 | f1: true, | ||
33 | f2: true, | ||
34 | f3: true, | ||
35 | f4: true, | ||
36 | f5: true, | ||
37 | } | ||
38 | } | 28 | } |
39 | }, | 29 | }, |
40 | components: { | 30 | components: {}, |
41 | }, | ||
42 | computed: { | 31 | computed: { |
43 | locale() { | 32 | locale() { |
44 | return this.$i18n.locale || 'tc'; | 33 | return this.$i18n.locale || 'tc'; |
... | @@ -155,5 +144,5 @@ export default { | ... | @@ -155,5 +144,5 @@ export default { |
155 | mounted() { | 144 | mounted() { |
156 | this.initData(); | 145 | this.initData(); |
157 | }, | 146 | }, |
158 | created() { } | 147 | created() {} |
159 | } | 148 | } | ... | ... |
... | @@ -4,15 +4,20 @@ import { | ... | @@ -4,15 +4,20 @@ import { |
4 | httpPost | 4 | httpPost |
5 | } from '@/api/fetch-api.js' | 5 | } from '@/api/fetch-api.js' |
6 | 6 | ||
7 | import modalUploadCardComp from '@/components/modal-upload-card-comp/modal-upload-card-comp.vue'; | ||
8 | |||
7 | export default { | 9 | export default { |
8 | data() { | 10 | data() { |
9 | return { | 11 | return { |
10 | key: 'value', | 12 | key: 'value', |
11 | isHkCus : true, | 13 | isHkCus: true, |
12 | checked : false | 14 | checked: false, |
15 | modalUploadCardVisiable: false, | ||
13 | } | 16 | } |
14 | }, | 17 | }, |
15 | components: {}, | 18 | components: { |
19 | modalUploadCardComp | ||
20 | }, | ||
16 | computed: { | 21 | computed: { |
17 | locale() { | 22 | locale() { |
18 | return this.$i18n.locale || 'tc'; | 23 | return this.$i18n.locale || 'tc'; | ... | ... |
This diff is collapsed.
Click to expand it.
1 | 1 | import { | |
2 | import { mapGetters, mapActions, mapState } from "vuex"; | 2 | mapGetters, |
3 | mapActions, | ||
4 | mapState | ||
5 | } from "vuex"; | ||
3 | 6 | ||
4 | import api from '@/api/api' | 7 | import api from '@/api/api' |
5 | import { | 8 | import { |
... | @@ -9,7 +12,11 @@ import { | ... | @@ -9,7 +12,11 @@ import { |
9 | 12 | ||
10 | 13 | ||
11 | import modalComp from '@/components/modal-comp/modal-comp.vue'; | 14 | import modalComp from '@/components/modal-comp/modal-comp.vue'; |
12 | import { passwordEncrypt } from '@/utils/encrypt.js'; | 15 | import modalSimpleComp from '@/components/modal-simple-comp/modal-simple-comp.vue'; |
16 | import modalUploadCardComp from '@/components/modal-upload-card-comp/modal-upload-card-comp.vue'; | ||
17 | import { | ||
18 | passwordEncrypt | ||
19 | } from '@/utils/encrypt.js'; | ||
13 | 20 | ||
14 | 21 | ||
15 | export default { | 22 | export default { |
... | @@ -49,10 +56,10 @@ export default { | ... | @@ -49,10 +56,10 @@ export default { |
49 | }, | 56 | }, |
50 | errorTips: { | 57 | errorTips: { |
51 | // 账密登录页 | 58 | // 账密登录页 |
52 | e1: "",// 账号 | 59 | e1: "", // 账号 |
53 | e2: "",// 密码 | 60 | e2: "", // 密码 |
54 | e3: "",// 图像验证码 | 61 | e3: "", // 图像验证码 |
55 | e4: "",// 勾选同意 | 62 | e4: "", // 勾选同意 |
56 | // 短信验证码 | 63 | // 短信验证码 |
57 | oe1: "", // 账号 | 64 | oe1: "", // 账号 |
58 | oe2: "", // 短信验证码 | 65 | oe2: "", // 短信验证码 |
... | @@ -62,13 +69,17 @@ export default { | ... | @@ -62,13 +69,17 @@ export default { |
62 | p5: "" | 69 | p5: "" |
63 | }, | 70 | }, |
64 | modalVisiable: false, | 71 | modalVisiable: false, |
72 | modalSimpleVisiable: false, | ||
73 | modalUploadCardVisiable: false, | ||
65 | targetPath: "", | 74 | targetPath: "", |
66 | modalIcon: "succ", | 75 | modalIcon: "succ", |
67 | modalContent: "" | 76 | modalContent: "" |
68 | } | 77 | } |
69 | }, | 78 | }, |
70 | components: { | 79 | components: { |
71 | modalComp | 80 | modalComp, |
81 | modalSimpleComp, | ||
82 | modalUploadCardComp | ||
72 | }, | 83 | }, |
73 | computed: { | 84 | computed: { |
74 | ...mapState({ | 85 | ...mapState({ |
... | @@ -112,7 +123,7 @@ export default { | ... | @@ -112,7 +123,7 @@ export default { |
112 | onLoginTypeHandler(val) { | 123 | onLoginTypeHandler(val) { |
113 | this.type = val; | 124 | this.type = val; |
114 | }, | 125 | }, |
115 | initData() { }, | 126 | initData() {}, |
116 | handlerIsShowImageVcode() { | 127 | handlerIsShowImageVcode() { |
117 | return new Promise((resolve, reject) => { | 128 | return new Promise((resolve, reject) => { |
118 | httpPost({ | 129 | httpPost({ |
... | @@ -381,7 +392,10 @@ export default { | ... | @@ -381,7 +392,10 @@ export default { |
381 | data["vcodeuuid"] = this.values.vcodeuuid; | 392 | data["vcodeuuid"] = this.values.vcodeuuid; |
382 | data["imageValue"] = this.loginForm.imageValue; | 393 | data["imageValue"] = this.loginForm.imageValue; |
383 | } | 394 | } |
384 | httpPost({ url: api.stdSendOTP, data: data }); | 395 | httpPost({ |
396 | url: api.stdSendOTP, | ||
397 | data: data | ||
398 | }); | ||
385 | }, | 399 | }, |
386 | _startTimeClick() { | 400 | _startTimeClick() { |
387 | this.times.remain = 120; | 401 | this.times.remain = 120; |
... | @@ -429,11 +443,18 @@ export default { | ... | @@ -429,11 +443,18 @@ export default { |
429 | }, | 443 | }, |
430 | modalCallback() { | 444 | modalCallback() { |
431 | this.modalVisiable = false; | 445 | this.modalVisiable = false; |
446 | this.modalSimpleVisiable = false; | ||
447 | this.modalUploadCardVisiable = false; | ||
432 | if (this.targetPath) { | 448 | if (this.targetPath) { |
433 | this.$router.push({ | 449 | this.$router.push({ |
434 | "path": this.targetPath | 450 | "path": this.targetPath |
435 | }); | 451 | }); |
436 | } | 452 | } |
453 | }, | ||
454 | closeCallback() { | ||
455 | this.modalVisiable = false; | ||
456 | this.modalSimpleVisiable = false; | ||
457 | this.modalUploadCardVisiable = false; | ||
437 | } | 458 | } |
438 | }, | 459 | }, |
439 | watch: { | 460 | watch: { |
... | @@ -471,5 +492,5 @@ export default { | ... | @@ -471,5 +492,5 @@ export default { |
471 | // console.log("PK === ", this.PK) | 492 | // console.log("PK === ", this.PK) |
472 | // console.log("E === ", this.E) | 493 | // console.log("E === ", this.E) |
473 | }, | 494 | }, |
474 | created() { } | 495 | created() {} |
475 | } | 496 | } | ... | ... |
This diff is collapsed.
Click to expand it.
... | @@ -24,14 +24,14 @@ | ... | @@ -24,14 +24,14 @@ |
24 | <div class="pure-u-1 form-item"> | 24 | <div class="pure-u-1 form-item"> |
25 | <div class="ipt-wrap"> | 25 | <div class="ipt-wrap"> |
26 | <img class="down-arrow" src="@/assets/images/reservation/re-down-arrow.png" alt=""> | 26 | <img class="down-arrow" src="@/assets/images/reservation/re-down-arrow.png" alt=""> |
27 | <select class="ipt" v-model="mobileNoType" > | 27 | <select class="ipt" v-model="mobileNoType"> |
28 | <option v-for="(item,index) in mobileOptions" :key="index" :value="item.type">{{item.name}}</option> | 28 | <option v-for="(item,index) in mobileOptions" :key="index" :value="item.type">{{item.name}}</option> |
29 | </select> | 29 | </select> |
30 | </div> | 30 | </div> |
31 | </div> | 31 | </div> |
32 | <div class="pure-u-1 form-item"> | 32 | <div class="pure-u-1 form-item"> |
33 | <div class="ipt-wrap"> | 33 | <div class="ipt-wrap"> |
34 | <div class="ipt ipt2" :class="{err : errorTips.p1.length > 0}" > | 34 | <div class="ipt ipt2" :class="{err : errorTips.p1.length > 0}"> |
35 | <div class="region-tel">{{mobileTip.areaCode}}</div> | 35 | <div class="region-tel">{{mobileTip.areaCode}}</div> |
36 | <input :placeholder="mobileTip.placeHolder" class="ipt-tel" type="text" v-model="registerForm.mobileNo"> | 36 | <input :placeholder="mobileTip.placeHolder" class="ipt-tel" type="text" v-model="registerForm.mobileNo"> |
37 | </div> | 37 | </div> |
... | @@ -43,7 +43,7 @@ | ... | @@ -43,7 +43,7 @@ |
43 | 43 | ||
44 | <div class="pure-u-1 form-item" v-if="registerCheck.showImageCode"> | 44 | <div class="pure-u-1 form-item" v-if="registerCheck.showImageCode"> |
45 | <div class="ipt-wrap"> | 45 | <div class="ipt-wrap"> |
46 | <input :placeholder="$t('login.verifyPlaceholder')" class="ipt ipt-verify" :class="{err : errorTips.p3.length > 0}" type="text" v-model="registerForm.imageValue"> | 46 | <input :placeholder="$t('login.verifyPlaceholder')" class="ipt ipt-verify" :class="{err : errorTips.p3.length > 0}" type="text" v-model="registerForm.imageValue"> |
47 | <div class="ipt verify-btn pointer vcode" @click="handlerRefreshImageVcode"> | 47 | <div class="ipt verify-btn pointer vcode" @click="handlerRefreshImageVcode"> |
48 | <img :src="values.imageBase64"> | 48 | <img :src="values.imageBase64"> |
49 | </div> | 49 | </div> |
... | @@ -54,7 +54,7 @@ | ... | @@ -54,7 +54,7 @@ |
54 | </div> | 54 | </div> |
55 | <div class="pure-u-1 form-item"> | 55 | <div class="pure-u-1 form-item"> |
56 | <div class="ipt-wrap"> | 56 | <div class="ipt-wrap"> |
57 | <div class="ipt ipt2" :class="{err : errorTips.p2.length > 0}" > | 57 | <div class="ipt ipt2" :class="{err : errorTips.p2.length > 0}"> |
58 | <input :placeholder="$t('register.verifyCodePlaceholder')" class="ipt-code" type="text" v-model="registerForm.opt"> | 58 | <input :placeholder="$t('register.verifyCodePlaceholder')" class="ipt-code" type="text" v-model="registerForm.opt"> |
59 | <div v-if="times.remain == 0" class="veri-btn pointer" @click="handlerStdSendOTP">{{$t('register.verifyCodeGet')}}</div> | 59 | <div v-if="times.remain == 0" class="veri-btn pointer" @click="handlerStdSendOTP">{{$t('register.verifyCodeGet')}}</div> |
60 | <div v-else class="veri-btn-default">{{times.tip}}</div> | 60 | <div v-else class="veri-btn-default">{{times.tip}}</div> |
... | @@ -87,7 +87,7 @@ | ... | @@ -87,7 +87,7 @@ |
87 | <img src="@/assets/images/register/icon-register-lock.png"> {{$t('register.newPassword')}} | 87 | <img src="@/assets/images/register/icon-register-lock.png"> {{$t('register.newPassword')}} |
88 | </div> | 88 | </div> |
89 | <div class="ipt-wrap"> | 89 | <div class="ipt-wrap"> |
90 | <input :placeholder="$t('register.newPasswordPlaceholder')" class="ipt" :class="{err : errorTips.p4.length > 0}" type="password" v-model="values.password"> | 90 | <input :placeholder="$t('register.newPasswordPlaceholder')" class="ipt" :class="{err : errorTips.p4.length > 0}" type="password" v-model="values.password"> |
91 | </div> | 91 | </div> |
92 | <div class="validator" v-if="errorTips.p4.length > 0 "> | 92 | <div class="validator" v-if="errorTips.p4.length > 0 "> |
93 | <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.p4}} | 93 | <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.p4}} |
... | @@ -98,7 +98,7 @@ | ... | @@ -98,7 +98,7 @@ |
98 | <img src="@/assets/images/register/icon-register-lock.png"> {{$t('register.newPasswordSure')}} | 98 | <img src="@/assets/images/register/icon-register-lock.png"> {{$t('register.newPasswordSure')}} |
99 | </div> | 99 | </div> |
100 | <div class="ipt-wrap"> | 100 | <div class="ipt-wrap"> |
101 | <input :placeholder="$t('register.newPasswordSurePlaceholder')" class="ipt" :class="{err : errorTips.p5.length > 0}" type="password" v-model="values.passwordRepeat"> | 101 | <input :placeholder="$t('register.newPasswordSurePlaceholder')" class="ipt" :class="{err : errorTips.p5.length > 0}" type="password" v-model="values.passwordRepeat"> |
102 | </div> | 102 | </div> |
103 | <div class="validator" v-if="errorTips.p5.length > 0 "> | 103 | <div class="validator" v-if="errorTips.p5.length > 0 "> |
104 | <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.p5}} | 104 | <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.p5}} | ... | ... |
... | @@ -8,6 +8,24 @@ | ... | @@ -8,6 +8,24 @@ |
8 | * | 8 | * |
9 | */ | 9 | */ |
10 | 10 | ||
11 | // 居中按钮样式 | ||
12 | @mixin btn-center($width, $height) { | ||
13 | width: $width; | ||
14 | height: $height; | ||
15 | line-height: $height; | ||
16 | text-align: center; | ||
17 | } | ||
18 | |||
19 | // 超过多少行自动省略 默认一行 | ||
20 | @mixin ellipsis($line:1) { | ||
21 | display: -webkit-box; | ||
22 | word-break: break-all; | ||
23 | -webkit-box-orient: vertical; | ||
24 | -webkit-line-clamp: $line; | ||
25 | overflow: hidden; | ||
26 | text-overflow: ellipsis; | ||
27 | } | ||
28 | |||
11 | // 文字截取 | 29 | // 文字截取 |
12 | @mixin text-overflow() { | 30 | @mixin text-overflow() { |
13 | overflow: hidden; | 31 | overflow: hidden; | ... | ... |
-
Please register or sign in to post a comment