Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
68150c6b by simon
Options

默认提交

1 parent a0f4a8df
Inline Side-by-side
Showing 8 changed files with 311 additions and 23 deletions

6.52 KB | W: | H:

4.34 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
...@@ -7,28 +7,39 @@ import { ...@@ -7,28 +7,39 @@ import {
7 import Date from '@/utils/date.js'; 7 import Date from '@/utils/date.js';
8 8
9 export default { 9 export default {
10 inheritAttrs: false,
10 props: { 11 props: {
11 // 周末是否可选 12 // 周末是否可选
13 value: {
14 type: String,
15 default: ""
16 },
17 // 周末是否可选
12 weekend: { 18 weekend: {
13 type: Boolean, 19 type: Boolean,
14 default: false 20 default: false
15 }, 21 },
16 filterDates: { 22 filterDates: {
17 type: Array, 23 type: Array,
18 default(){ 24 default () {
19 return ["2019-11-26", "2019-11-28"] 25 return [] // ["2019-11-26", "2019-11-28"]
20 } 26 }
21 } 27 }
22 }, 28 },
23 data() { 29 data() {
24 return { 30 return {
25 key: 'value', 31 dateValue: "", // 日期value yyyy-MM-dd
32 dateType: 1, // 选择显示类型 1.日 2.月 3.年
26 year: 1970, 33 year: 1970,
27 month: 1, // (1~12) 34 month: 1, // (1~12)
28 date: 1, // (1~31) 35 date: 1, // (1~31)
29 day: 0, // (0~6) 36 day: 0, // (0~6)
37 yearPage: 1,
38 yearList: [],
39 yearRange: "", // 年份范围
30 // 用户渲染的数据 40 // 用户渲染的数据
31 fortmatMonthData: [], 41 fortmatMonthData: [],
42 visible: false,
32 } 43 }
33 }, 44 },
34 components: {}, 45 components: {},
...@@ -44,7 +55,7 @@ export default { ...@@ -44,7 +55,7 @@ export default {
44 * 输出数据 55 * 输出数据
45 * fortmatMonthData 用于渲染日历的数据 56 * fortmatMonthData 用于渲染日历的数据
46 */ 57 */
47 formatMonth() { 58 formatDate() {
48 let result = []; 59 let result = [];
49 let year = this.year; 60 let year = this.year;
50 let month = this.month; 61 let month = this.month;
...@@ -99,7 +110,7 @@ export default { ...@@ -99,7 +110,7 @@ export default {
99 this.year = targetDate.getFullYear(); 110 this.year = targetDate.getFullYear();
100 this.month = targetDate.getMonth() + 1; 111 this.month = targetDate.getMonth() + 1;
101 this.date = targetDate.getDate(); 112 this.date = targetDate.getDate();
102 this.formatMonth(); 113 this.formatDate();
103 }, 114 },
104 // 上一个月 115 // 上一个月
105 prevMonth() { 116 prevMonth() {
...@@ -115,7 +126,7 @@ export default { ...@@ -115,7 +126,7 @@ export default {
115 let targetDate = Date.parse(dateStr).addYears(value); 126 let targetDate = Date.parse(dateStr).addYears(value);
116 this.year = targetDate.getFullYear(); 127 this.year = targetDate.getFullYear();
117 this.month = targetDate.getMonth() + 1; 128 this.month = targetDate.getMonth() + 1;
118 this.formatMonth(); 129 this.formatDate();
119 }, 130 },
120 // 上一年 131 // 上一年
121 prevYear() { 132 prevYear() {
...@@ -125,11 +136,116 @@ export default { ...@@ -125,11 +136,116 @@ export default {
125 nextYear() { 136 nextYear() {
126 this.addYear(1); 137 this.addYear(1);
127 }, 138 },
139 // 选择日期
128 selectDay(item) { 140 selectDay(item) {
129 if (!item) return; 141 if (!item) return;
130 let curData = item; 142 let curData = item;
131 let date = curData.date; 143 let curDate = curData.date;
132 this.date = date; 144 this.date = curDate;
145 let {
146 year,
147 month,
148 date
149 } = this;
150 this.dateValue = `${year}-${month}-${date}`;
151 this.showCalendar();
152 },
153 // 选择月份
154 selectMonth(item) {
155 if (!item) return;
156 this.dateType = 1;
157 this.month = item;
158 this.formatDate();
159 let {
160 year,
161 month,
162 date
163 } = this;
164 this.dateValue = `${year}-${month}-${date}`;
165 },
166 // 选择年份
167 selectYear(item) {
168 if (!item) return;
169 this.dateType = 2;
170 let curData = item;
171 let curYear = curData.year;
172 this.year = curYear;
173 let {
174 year,
175 month,
176 date,
177 } = this;
178 this.dateValue = `${year}-${month}-${date}`;
179 },
180
181 // 计算year渲染列表
182 refreshYearList() {
183
184 let yearPage = this.yearPage;
185 if (yearPage <= 0) return;
186 let yearList = [];
187 for (let index = 0; index < 12; index++) {
188 yearList.push({
189 year: yearPage * 10 + index - 1,
190 disable: index == 0 || index == 11
191 });
192 }
193 this.yearRange = `${yearPage * 10 + 0 }-${yearPage * 10 + 9 }`
194 this.yearList = yearList;
195 },
196 // 显示日历
197 showCalendar(boo) {
198 this.visible = boo;
199 this.dateType = 1;
200 let year = this.year;
201 let yearPage = Math.floor(year / 10);
202 this.yearPage = yearPage;
203 this.refreshYearList();
204 },
205 // 选择类型 年/月/日
206 onTypeHandler() {
207 let dateType = this.dateType;
208 if (dateType == 1) {
209 this.dateType = 2;
210 return;
211 }
212 if (dateType == 2) {
213 this.dateType = 3;
214 this.refreshYearList();
215 return;
216 }
217 },
218 // 上下按钮
219 onPrevHandler() {
220 if (this.dateType == 1) {
221 this.prevMonth();
222 return;
223 }
224 if (this.dateType == 2) {
225 this.prevYear();
226 return;
227 }
228 if (this.dateType == 3) {
229 this.yearPage--;
230 this.refreshYearList();
231 return;
232 }
233 },
234 onNextHandler() {
235 console.log("this.dateType:", this.dateType);
236 if (this.dateType == 1) {
237 this.nextMonth();
238 return;
239 }
240 if (this.dateType == 2) {
241 this.nextYear();
242 return;
243 }
244 if (this.dateType == 3) {
245 this.yearPage++;
246 this.refreshYearList();
247 return;
248 }
133 }, 249 },
134 initData() {} 250 initData() {}
135 }, 251 },
...@@ -140,6 +256,14 @@ export default { ...@@ -140,6 +256,14 @@ export default {
140 this.year = today.getFullYear(); 256 this.year = today.getFullYear();
141 this.month = today.getMonth() + 1; 257 this.month = today.getMonth() + 1;
142 this.date = today.getDate(); 258 this.date = today.getDate();
143 this.formatMonth(); 259 this.formatDate();
260 },
261 watch: {
262 value(val) {
263 this.dateValue = val;
264 },
265 dateValue(val) {
266 this.$emit('input', val)
267 }
144 } 268 }
145 } 269 }
......
1 @import '@/styles/_support'; 1 @import '@/styles/_support';
2 2
3 .comp {
4 position: relative;
5 height: 100px;
6
7
8 }
9
3 // 日历容器 10 // 日历容器
4 .date-wrap { 11 .date-wrap {
5 12
...@@ -8,7 +15,13 @@ ...@@ -8,7 +15,13 @@
8 15
9 // 日历 16 // 日历
10 .calendar-wrap { 17 .calendar-wrap {
11 position: relative; 18
19 position: absolute;
20 // position: relative;
21 z-index: 1101;
22 margin-top: 12px;
23 margin-left: 0px;
24
12 @extend .bb; 25 @extend .bb;
13 width: 450px; 26 width: 450px;
14 height: 320px; 27 height: 320px;
...@@ -41,6 +54,7 @@ ...@@ -41,6 +54,7 @@
41 } 54 }
42 55
43 .con { 56 .con {
57 @extend .bb;
44 margin: 12px auto 0; 58 margin: 12px auto 0;
45 59
46 // 表头 60 // 表头
...@@ -58,7 +72,6 @@ ...@@ -58,7 +72,6 @@
58 @extend .flb; 72 @extend .flb;
59 justify-content: flex-start; 73 justify-content: flex-start;
60 flex-wrap: wrap; 74 flex-wrap: wrap;
61 // margin-top: 0px;
62 75
63 .td { 76 .td {
64 text-align: center; 77 text-align: center;
...@@ -78,11 +91,33 @@ ...@@ -78,11 +91,33 @@
78 border-radius: 100%; 91 border-radius: 100%;
79 } 92 }
80 93
94 // 不需要选择状态
81 .sel { 95 .sel {
82 color: #ffffff; 96 color: #ffffff;
83 background-color: $cOrange; 97 background-color: $cOrange;
84 } 98 }
85 } 99 }
100
101 // 日
102 .day {}
103
104 .month,.year {
105
106 margin: 36px auto 0;
107
108 .tr {
109 .td {
110 width: calc(100%/4);
111 height: 64px;
112 }
113 }
114
115 .point {
116 width: 51px;
117 height: 51px;
118 line-height: 51px;
119 }
120 }
86 } 121 }
87 } 122 }
88 123
...@@ -90,3 +125,80 @@ ...@@ -90,3 +125,80 @@
90 color: #dcdddd !important; 125 color: #dcdddd !important;
91 cursor: default !important; 126 cursor: default !important;
92 } 127 }
128
129 .ipt-wrap {
130 position: relative;
131 display: flex;
132 justify-content: space-between;
133 z-index: 1;
134
135 // input和下拉
136 .ipt {
137 @extend .bb;
138 width: 100%;
139 height: 4.5rem;
140 border-radius: 4.5rem;
141 border: solid 1px #dcdddd !important;
142 background-color: #ffffff;
143 padding: 0 2rem;
144 flex: 1;
145 letter-spacing: .1rem;
146 }
147
148 // 长文本
149 .textarea {
150 min-height: 8.75rem;
151 border-radius: 1rem;
152 }
153
154 .down-arrow {
155 position: absolute;
156 top: 2.2rem;
157 right: 2rem;
158 }
159
160
161 .verify-btn {
162 @extend .fcc;
163 // font-family: Arial;
164 font-size: 18px;
165 width: 8.5rem;
166 border: solid 1px #dcdddd;
167 background-color: #f2f2f2;
168 flex: none;
169 margin-left: 1.5rem;
170 color: $cFontGray;
171 }
172
173
174 // 框内按钮
175 .ipt2 {
176 display: flex;
177 justify-content: space-between;
178 align-items: center;
179
180 .ipt-code {
181 flex: 1;
182 padding-right: 1.75rem;
183 }
184
185 .veri-btn {
186 color: $cOrange;
187 text-decoration: underline;
188 }
189
190 .veri-btn-default {
191 color: #aaaaaa;
192 }
193 }
194 }
195
196 // 遮罩
197 .date-mask {
198 width: 100%;
199 height: 100%;
200 position: fixed;
201 z-index: 1001;
202 left: 0;
203 top: 0;
204 }
......
1 1
2 <template> 2 <template>
3 <div class="comp"> 3 <div class="comp">
4 <div class="date-wrap"> 4 <div class="date-mask" v-if="visible" @click="showCalendar()"></div>
5 <div class="ipt-wrap">
6 <input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" placeholder="请选择日期" @click="showCalendar(true)" class="ipt" type="type" readonly="readonly">
7 </div>
8 <div v-if="visible" class="date-wrap">
5 <div class="calendar-wrap"> 9 <div class="calendar-wrap">
6 <!-- 标题 --> 10 <!-- 标题 -->
7 <div class="nav-wrap"> 11 <div class="nav-wrap">
8 <div class="date-wrap"> 12 <div class="date-wrap">
9 <div class="pointer nav-btn" @click="prevMonth"> 13 <div class="pointer nav-btn" @click="onPrevHandler">
10 <img src="@/assets/images/form/date-picker/data-picker-icon-up.png"> 14 <img src="@/assets/images/form/date-picker/data-picker-icon-up.png">
11 </div> 15 </div>
12 <div class="date"> 16 <div @click="onTypeHandler()" class="date">
13 <span class="pointer">{{year}}年{{month}}月</span> 17 <span class="pointer">
18 <template v-if="dateType == 1">
19 {{year}}年{{month}}月
20 </template>
21 <template v-if="dateType == 2">
22 {{year}}年
23 </template>
24 <template v-if="dateType == 3">
25 {{yearRange}}
26 </template>
27 </span>
14 </div> 28 </div>
15 <div class="pointer nav-btn" @click="nextMonth"> 29 <div class="pointer nav-btn" @click="onNextHandler">
16 <img src="@/assets/images/form/date-picker/data-picker-icon-down.png"> 30 <img src="@/assets/images/form/date-picker/data-picker-icon-down.png">
17 </div> 31 </div>
18 </div> 32 </div>
19 </div> 33 </div>
20 <!-- 日历躯干 --> 34 <!-- 日历躯干 日 -->
21 <div class="con"> 35 <div v-if="dateType == 1" class="con day">
22 <!-- 日历表头 --> 36 <!-- 日历表头 -->
23 <div class="th tr"> 37 <div class="th tr">
24 <div class="td" :class="{'disable':!weekend}">日</div> 38 <div class="td" :class="{'disable':!weekend}">日</div>
...@@ -38,6 +52,29 @@ ...@@ -38,6 +52,29 @@
38 </div> 52 </div>
39 </div> 53 </div>
40 </div> 54 </div>
55
56 <!-- 月 -->
57 <div v-if="dateType == 2" class="con month">
58 <div class="tr">
59 <div class="td" v-for="(item,index) in 12" :key="index">
60 <div @click="selectMonth(item || '')" class="pointer point ">
61 {{item}}月
62 </div>
63 </div>
64 </div>
65 </div>
66
67 <!-- 年 -->
68 <div v-if="dateType == 3" class="con year">
69 <div class="tr">
70 <div class="td" v-for="(item,index) in yearList" :key="index">
71 <div @click="selectYear(item.disable ? null : item)" class="pointer point" :class="{'disable':item.disable}">
72 {{item.year}}
73 </div>
74 </div>
75 </div>
76 </div>
77
41 </div> 78 </div>
42 </div> 79 </div>
43 </div> 80 </div>
......
...@@ -9,7 +9,8 @@ import DatePicker from '@/components/date-picker/date-picker.vue' ...@@ -9,7 +9,8 @@ import DatePicker from '@/components/date-picker/date-picker.vue'
9 export default { 9 export default {
10 data() { 10 data() {
11 return { 11 return {
12 key: 'value' 12 key: 'value',
13 value1: "",
13 } 14 }
14 }, 15 },
15 components: { 16 components: {
...@@ -19,5 +20,7 @@ export default { ...@@ -19,5 +20,7 @@ export default {
19 initData() {} 20 initData() {}
20 }, 21 },
21 mounted() {}, 22 mounted() {},
22 created() {} 23 created() {
24
25 }
23 } 26 }
......
...@@ -4,3 +4,8 @@ ...@@ -4,3 +4,8 @@
4 // background-color: wheat; 4 // background-color: wheat;
5 padding-bottom: 200px; 5 padding-bottom: 200px;
6 } 6 }
7
8
9 .date-wrap{
10 width: 320px;
11 }
......
1 1
2 <template> 2 <template>
3 <div class="content"> 3 <div class="content">
4 <date-picker> 4 <div class="date-wrap">
5 </date-picker> 5 <date-picker v-model="value1"></date-picker>
6 </div>
7 <div>{{value1}}</div>
6 </div> 8 </div>
7 </template> 9 </template>
8 10
......
...@@ -35,6 +35,7 @@ ...@@ -35,6 +35,7 @@
35 margin-left: -512px; 35 margin-left: -512px;
36 height: 100%; 36 height: 100%;
37 overflow: hidden; 37 overflow: hidden;
38
38 &-img { 39 &-img {
39 width: 100%; 40 width: 100%;
40 height: 100%; 41 height: 100%;
...@@ -75,6 +76,8 @@ ...@@ -75,6 +76,8 @@
75 position: absolute; 76 position: absolute;
76 width: 100%; 77 width: 100%;
77 color: #4c4948; 78 color: #4c4948;
79
80
78 } 81 }
79 82
80 .t1 { 83 .t1 {
...@@ -85,7 +88,9 @@ ...@@ -85,7 +88,9 @@
85 bottom: 11.42rem; 88 bottom: 11.42rem;
86 } 89 }
87 90
88 img {} 91 img {
92 height: 100%;
93 }
89 94
90 &:first-child { 95 &:first-child {
91 padding-left: 0; 96 padding-left: 0;
......