Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
7d6affad by simon
Options

日历部分功能

1 parent dfb049f0
Inline Side-by-side
Showing 21 changed files with 343 additions and 36 deletions
1 module.exports = { 1 module.exports = {
2 presets: [ 2 presets: [
3 '@vue/app' 3 '@vue/app'
4 ] 4 ],
5 sourceType: 'unambiguous'
5 } 6 }
......
...@@ -69,7 +69,7 @@ html { ...@@ -69,7 +69,7 @@ html {
69 } 69 }
70 70
71 body{ 71 body{
72 font-size: 14px; 72 // font-size: 14px;
73 } 73 }
74 74
75 html, 75 html,
......
1 import api from '@/api/api'
2 import {
3 httpGet,
4 httpPost
5 } from '@/api/fetch-api.js'
6
7 import Date from '@/utils/date.js';
8
9 export default {
10 props: {
11 // 周末是否可选
12 weekend: {
13 type: Boolean,
14 default: false
15 },
16 filterDates: {
17 type: Array,
18 default(){
19 return ["2019-11-26", "2019-11-28"]
20 }
21 }
22 },
23 data() {
24 return {
25 key: 'value',
26 year: 1970,
27 month: 1, // (1~12)
28 date: 1, // (1~31)
29 day: 0, // (0~6)
30 // 用户渲染的数据
31 fortmatMonthData: [],
32 }
33 },
34 components: {},
35 methods: {
36 /**
37 * 画月历图
38 * 所需数据
39 * year 年
40 * month 月 (1~12)
41 * date 日 (1~31)
42 * day 星期几 (0-6)
43 *
44 * 输出数据
45 * fortmatMonthData 用于渲染日历的数据
46 */
47 formatMonth() {
48 let result = [];
49 let year = this.year;
50 let month = this.month;
51
52 // 获取当月天数
53 let dayNum = Date.getDaysInMonth(year, month - 1);
54
55 /**
56 * 排布出当月号码
57 * 组装数据
58 */
59 for (let index = 0; index < dayNum; index++) {
60 let curData = {}
61 curData.standards = 0;
62 let date = index + 1;
63 let day = Date.parse(`${year}.${month}.${date}`).getDay();
64 let isWeekend = day == 0 || day == 6;
65 let disable = false; // 判断是否不可选
66 disable = isWeekend && !this.weekend; // 判断周末不可选
67 let filterDates = this.filterDates;
68 filterDates.forEach(element => {
69 let curDate = `${year}-${month}-${date}`;
70 if (element == curDate) {
71 disable = true;
72 }
73 });
74 curData = Object.assign({
75 year: year,
76 month: month,
77 date: date, // (1~31)
78 day: day,
79 isWeekend: isWeekend,
80 disable: disable,
81 }, curData);
82 result.push(curData);
83 }
84
85 // 当月1号星期几 0-6 往前塞值
86 let dateStr = month + '.' + '1' + '.' + year;
87 let firstDay = Date.parse(dateStr).getDay();
88
89 // 根据星期几在前面补空格 星期日0格子，星期一1格子，星期六6格子
90 for (let index = 0; index < firstDay; index++) {
91 result.unshift(null);
92 }
93 this.fortmatMonthData = result;
94 },
95 // 加/减 月份
96 addMonths(value) {
97 let dateStr = this.month + '.' + this.date + '.' + this.year;
98 let targetDate = Date.parse(dateStr).addMonths(value);
99 this.year = targetDate.getFullYear();
100 this.month = targetDate.getMonth() + 1;
101 this.date = targetDate.getDate();
102 this.formatMonth();
103 },
104 // 上一个月
105 prevMonth() {
106 this.addMonths(-1);
107 },
108 // 下一个月
109 nextMonth() {
110 this.addMonths(1);
111 },
112 // 加/减 年份
113 addYear(value) {
114 let dateStr = this.month + '.' + this.date + '.' + this.year;
115 let targetDate = Date.parse(dateStr).addYears(value);
116 this.year = targetDate.getFullYear();
117 this.month = targetDate.getMonth() + 1;
118 this.formatMonth();
119 },
120 // 上一年
121 prevYear() {
122 this.addYear(-1);
123 },
124 // 下一年
125 nextYear() {
126 this.addYear(1);
127 },
128 selectDay(item) {
129 if (!item) return;
130 let curData = item;
131 let date = curData.date;
132 this.date = date;
133 },
134 initData() {}
135 },
136 mounted() {},
137 created() {
138 // 设置今天日期
139 let today = Date.today();
140 this.year = today.getFullYear();
141 this.month = today.getMonth() + 1;
142 this.date = today.getDate();
143 this.formatMonth();
144 }
145 }
1 @import '@/styles/_support';
2
3 // 日历容器
4 .date-wrap {
5
6 font-family: Arial;
7 font-size: 14px;
8
9 // 日历
10 .calendar-wrap {
11 position: relative;
12 @extend .bb;
13 width: 450px;
14 height: 320px;
15 border-radius: $borderRadius;
16 background-color: wheat;
17 border: solid 1px #dcdddd;
18 padding: 28px 36px 18px 36px;
19 background-color: #ffffff;
20
21 // 年月标题
22 .nav-wrap {
23 @extend .flc;
24 align-items: center;
25 color: $cOrange;
26
27 .date-wrap {
28 @extend .flb;
29 align-items: center;
30
31 .date {
32 // margin: 0 40px;
33 width: 154px;
34 text-align: center;
35 }
36 }
37
38 .nav-btn2 {
39 color: #959595;
40 }
41 }
42
43 .con {
44 margin: 12px auto 0;
45
46 // 表头
47 .th {
48 @extend .flb;
49
50 // 单元格
51 .td {
52 color: $cOrange;
53 }
54 }
55
56 // 表体
57 .tr {
58 @extend .flb;
59 justify-content: flex-start;
60 flex-wrap: wrap;
61 // margin-top: 0px;
62
63 .td {
64 text-align: center;
65 width: calc(100%/7);
66 height: 34px;
67 @extend .flb;
68 justify-content: center;
69 align-items: center;
70 }
71 }
72
73 .point {
74 width: 28px;
75 height: 28px;
76 line-height: 28px;
77 text-align: center;
78 border-radius: 100%;
79 }
80
81 .sel {
82 color: #ffffff;
83 background-color: $cOrange;
84 }
85 }
86 }
87 }
88
89 .disable {
90 color: #dcdddd !important;
91 cursor: default !important;
92 }
1
2 <template>
3 <div class="comp">
4 <div class="date-wrap">
5 <div class="calendar-wrap">
6 <!-- 标题 -->
7 <div class="nav-wrap">
8 <div class="date-wrap">
9 <div class="pointer nav-btn" @click="prevMonth">
10 <img src="@/assets/images/form/date-picker/data-picker-icon-up.png">
11 </div>
12 <div class="date">
13 <span class="pointer">{{year}}年{{month}}月</span>
14 </div>
15 <div class="pointer nav-btn" @click="nextMonth">
16 <img src="@/assets/images/form/date-picker/data-picker-icon-down.png">
17 </div>
18 </div>
19 </div>
20 <!-- 日历躯干 -->
21 <div class="con">
22 <!-- 日历表头 -->
23 <div class="th tr">
24 <div class="td" :class="{'disable':!weekend}">日</div>
25 <div class="td">一</div>
26 <div class="td">二</div>
27 <div class="td">三</div>
28 <div class="td">四</div>
29 <div class="td">五</div>
30 <div class="td" :class="{'disable':!weekend}">六</div>
31 </div>
32 <!-- 日历主体 -->
33 <div class="tr">
34 <div class="td" v-for="(item,index) in fortmatMonthData" :key="index">
35 <div @click="selectDay(item.disable ? null : item)" v-if="item && item.date" class="pointer point" :class="{'sel':item && item.date && item.date == date,'disable':item.disable}">
36 <div>{{item && item.date || ""}}</div>
37 </div>
38 </div>
39 </div>
40 </div>
41 </div>
42 </div>
43 </div>
44 </template>
45
46 <script src="./date-picker.js"></script>
47 <style lang="scss" scoped>
48 @import "./date-picker.scss";
49 </style>
...@@ -87,7 +87,7 @@ export default { ...@@ -87,7 +87,7 @@ export default {
87 // console.log("curData.value == =", curData.value) 87 // console.log("curData.value == =", curData.value)
88 if (curData.value == "logout") { 88 if (curData.value == "logout") {
89 // this.$store.commit("SET_USER_INFO", null); 89 // this.$store.commit("SET_USER_INFO", null);
90 this._loginHandler(); 90 this.loginHandler();
91 } else { 91 } else {
92 // 不是的话，跳转页面 92 // 不是的话，跳转页面
93 this.$router.push({ 93 this.$router.push({
...@@ -101,13 +101,13 @@ export default { ...@@ -101,13 +101,13 @@ export default {
101 // value: this.dataList[index] 101 // value: this.dataList[index]
102 // }); 102 // });
103 }, 103 },
104 _loginHandler() { 104 loginHandler() {
105 httpPost({ url: api.logout }).then(() => { 105 httpPost({ url: api.logout }).then(() => {
106 this.$store.commit("SET_USER_INFO", null); 106 this.$store.commit("SET_USER_INFO", null);
107 this._showLogoutTip(); 107 this.showLogoutTip();
108 }); 108 });
109 }, 109 },
110 _showLogoutTip() { 110 showLogoutTip() {
111 // 登出后的提示 111 // 登出后的提示
112 alert("登出成功"); 112 alert("登出成功");
113 } 113 }
...@@ -118,6 +118,5 @@ export default { ...@@ -118,6 +118,5 @@ export default {
118 } 118 }
119 }, 119 },
120 created() { 120 created() {
121 // this.
122 }, 121 },
123 }; 122 };
......
1 // @import '@/styles/_support'; 1 @import '@/styles/_support';
2 @import '@/styles/_utils';
3 2
4 .v-footer { 3 .v-footer {
5 font-family: MicrosoftYaHei; 4 font-family: MicrosoftYaHei;
6 color: #ffffff; 5 color: #ffffff;
7 background-color: #2e2b2a; 6 background-color: #2e2b2a;
7 font-size: $fontSizeSmall;
8 8
9 .footer-containter { 9 .footer-containter {
10 margin: 0 auto; 10 margin: 0 auto;
...@@ -35,9 +35,7 @@ ...@@ -35,9 +35,7 @@
35 35
36 // 热线 36 // 热线
37 .hotline { 37 .hotline {
38 // margin-right: 8rem;
39 min-width: 280px; 38 min-width: 280px;
40 // flex: 1;
41 39
42 .contact { 40 .contact {
43 .n-item { 41 .n-item {
...@@ -45,9 +43,8 @@ ...@@ -45,9 +43,8 @@
45 } 43 }
46 44
47 .phone { 45 .phone {
48 // font-family: Arial;
49 color: #ea5a26; 46 color: #ea5a26;
50 font-size: 1.666667rem; 47 font-size: $fontSizeTitle;
51 font-weight: bold; 48 font-weight: bold;
52 } 49 }
53 50
......
...@@ -52,10 +52,7 @@ ...@@ -52,10 +52,7 @@
52 .t1 { 52 .t1 {
53 width: 100%; 53 width: 100%;
54 text-align: center; 54 text-align: center;
55 font-size: 18px; 55 font-size: $fontSizeTitle;
56 // line-height: 1.8rem;
57
58 // background-color: wheat;
59 56
60 } 57 }
61 } 58 }
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
8 padding: 2.833333rem 4.0rem 0 3.5rem; 8 padding: 2.833333rem 4.0rem 0 3.5rem;
9 width: 64.166667rem; 9 width: 64.166667rem;
10 height: 32.25rem; 10 height: 32.25rem;
11 border-radius: 8px; 11 border-radius: $borderRadius;
12 border: solid 1px #f2f2f2; 12 border: solid 1px #f2f2f2;
13 background-color: #ffffff; 13 background-color: #ffffff;
14 } 14 }
...@@ -19,13 +19,13 @@ ...@@ -19,13 +19,13 @@
19 margin-bottom: 4.416667rem; 19 margin-bottom: 4.416667rem;
20 20
21 &-item { 21 &-item {
22 font-size: 12px; 22 font-size: $paddingSmall;
23 23
24 &-tit { 24 &-tit {
25 display: flex; 25 display: flex;
26 align-items: center; 26 align-items: center;
27 color: $cOrange; 27 color: $cOrange;
28 font-size: 18px; 28 font-size: $fontSizeTitle;
29 font-weight: bold; 29 font-weight: bold;
30 height: 2.833333rem; 30 height: 2.833333rem;
31 31
......
...@@ -4,13 +4,17 @@ import { ...@@ -4,13 +4,17 @@ import {
4 httpPost 4 httpPost
5 } from '@/api/fetch-api.js' 5 } from '@/api/fetch-api.js'
6 6
7 import DatePicker from '@/components/date-picker/date-picker.vue'
8
7 export default { 9 export default {
8 data() { 10 data() {
9 return { 11 return {
10 key: 'value' 12 key: 'value'
11 } 13 }
12 }, 14 },
13 components: {}, 15 components: {
16 DatePicker
17 },
14 methods: { 18 methods: {
15 initData() {} 19 initData() {}
16 }, 20 },
......
1 @import '@/styles/_support'; 1 @import '@/styles/_support';
2 2
3 .content {} 3 .content {
4 // background-color: wheat;
5 padding-bottom: 200px;
6 }
......
1 1
2 <template> 2 <template>
3 <div class="content"> 3 <div class="content">
4 4 <date-picker>
5 </date-picker>
5 </div> 6 </div>
6 </template> 7 </template>
7 8
......
...@@ -4,6 +4,7 @@ import { ...@@ -4,6 +4,7 @@ import {
4 httpPost 4 httpPost
5 } from '@/api/fetch-api.js' 5 } from '@/api/fetch-api.js'
6 6
7
7 export default { 8 export default {
8 data() { 9 data() {
9 return { 10 return {
......
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
16 16
17 .tit { 17 .tit {
18 text-align: center; 18 text-align: center;
19 font-size: 18px; 19 font-size: $fontSizeTitle;
20 font-weight: bold; 20 font-weight: bold;
21 letter-spacing: 1.8px; 21 letter-spacing: 1.8px;
22 } 22 }
......
...@@ -153,11 +153,11 @@ const routes = [ ...@@ -153,11 +153,11 @@ const routes = [
153 } 153 }
154 }, 154 },
155 // 404页面 155 // 404页面
156 { 156 // {
157 path: '*', // * 表示上面路径匹配不到的都显示这个页面 157 // path: '*', // * 表示上面路径匹配不到的都显示这个页面
158 name: '404', 158 // name: '404',
159 component: Index 159 // component: Index
160 }, 160 // },
161 ] 161 ]
162 162
163 // add route path 163 // add route path
......
...@@ -94,10 +94,13 @@ ...@@ -94,10 +94,13 @@
94 text-align: center; 94 text-align: center;
95 color: #ffffff; 95 color: #ffffff;
96 background-color: #f05a23; 96 background-color: #f05a23;
97 // box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
98 // background-blend-mode: soft-light, ;
99 // background-image: linear-gradient(to bottom, #f05f28, #f05021);
100
97 box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2); 101 box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
98 background-blend-mode: soft-light, ; 102 background-blend-mode: soft-light, ;
99 // background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #f05a23, #f05a23); 103 background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429);
100 background-image: linear-gradient(to bottom, #f05f28, #f05021);
101 } 104 }
102 105
103 106
......
...@@ -3,18 +3,23 @@ ...@@ -3,18 +3,23 @@
3 background-size: 100% 100%; 3 background-size: 100% 100%;
4 } 4 }
5 5
6
7 //flex 布局和 子元素 对其方式 6 //flex 布局和 子元素 对其方式
8 .fl { 7 .fl {
9 display: flex; 8 display: flex;
10 } 9 }
11 10
12 .fj { 11 .flc {
12 display: flex;
13 justify-content: center;
14 }
15
16 .flb {
13 display: flex; 17 display: flex;
14 justify-content: space-between; 18 justify-content: space-between;
15 } 19 }
16 20
17 .fla{ 21
22 .fla {
18 display: flex; 23 display: flex;
19 align-items: center; 24 align-items: center;
20 } 25 }
...@@ -53,10 +58,10 @@ ...@@ -53,10 +58,10 @@
53 text-align: center; 58 text-align: center;
54 } 59 }
55 60
56 .bc{ 61 .bc {
57 text-align: center; 62 text-align: center;
58 } 63 }
59 64
60 .flex1{ 65 .flex1 {
61 flex: 1; 66 flex: 1;
62 } 67 }
......
...@@ -6,6 +6,10 @@ ...@@ -6,6 +6,10 @@
6 * 6 *
7 */ 7 */
8 8
9
10 $borderRadiusSmall:5px;
11 $borderRadius:8px;
12
9 // Margin 13 // Margin
10 $marginSmall: 10px; // 小间距 14 $marginSmall: 10px; // 小间距
11 $marginMedium: 28px; // 间距 15 $marginMedium: 28px; // 间距
...@@ -29,3 +33,9 @@ $cGray:#bfbfbf; ...@@ -29,3 +33,9 @@ $cGray:#bfbfbf;
29 $cDark:#dcdcdc; 33 $cDark:#dcdcdc;
30 $cLightBlack:#333333; 34 $cLightBlack:#333333;
31 $cFontGray: #4c4948; 35 $cFontGray: #4c4948;
36
37
38 // 移动端
39 $marginSmall-M: 10px; // 小间距
40 $marginMedium-M: 20px; // 间距
41 // $marginLarge: 28px;
......