Skip to content

dev / pingan-life-index-pro

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

日历部分功能

1 parent dfb049f0
Expand all
Inline Side-by-side
Showing 21 changed files with 343 additions and 36 deletions
module.exports = {
presets: [
'@vue/app'
]
],
sourceType: 'unambiguous'
}
......
......@@ -69,7 +69,7 @@ html {
}
body{
font-size: 14px;
// font-size: 14px;
}
html,
......
import api from '@/api/api'
import {
httpGet,
httpPost
} from '@/api/fetch-api.js'
import Date from '@/utils/date.js';
export default {
props: {
// 周末是否可选
weekend: {
type: Boolean,
default: false
},
filterDates: {
type: Array,
default(){
return ["2019-11-26", "2019-11-28"]
}
}
},
data() {
return {
key: 'value',
year: 1970,
month: 1, // (1~12)
date: 1, // (1~31)
day: 0, // (0~6)
// 用户渲染的数据
fortmatMonthData: [],
}
},
components: {},
methods: {
/**
* 画月历图
* 所需数据
* year 年
* month 月 (1~12)
* date 日 (1~31)
* day 星期几 (0-6)
*
* 输出数据
* fortmatMonthData 用于渲染日历的数据
*/
formatMonth() {
let result = [];
let year = this.year;
let month = this.month;
// 获取当月天数
let dayNum = Date.getDaysInMonth(year, month - 1);
/**
* 排布出当月号码
* 组装数据
*/
for (let index = 0; index < dayNum; index++) {
let curData = {}
curData.standards = 0;
let date = index + 1;
let day = Date.parse(`${year}.${month}.${date}`).getDay();
let isWeekend = day == 0 || day == 6;
let disable = false; // 判断是否不可选
disable = isWeekend && !this.weekend; // 判断周末不可选
let filterDates = this.filterDates;
filterDates.forEach(element => {
let curDate = `${year}-${month}-${date}`;
if (element == curDate) {
disable = true;
}
});
curData = Object.assign({
year: year,
month: month,
date: date, // (1~31)
day: day,
isWeekend: isWeekend,
disable: disable,
}, curData);
result.push(curData);
}
// 当月1号星期几 0-6 往前塞值
let dateStr = month + '.' + '1' + '.' + year;
let firstDay = Date.parse(dateStr).getDay();
// 根据星期几在前面补空格 星期日0格子，星期一1格子，星期六6格子
for (let index = 0; index < firstDay; index++) {
result.unshift(null);
}
this.fortmatMonthData = result;
},
// 加/减 月份
addMonths(value) {
let dateStr = this.month + '.' + this.date + '.' + this.year;
let targetDate = Date.parse(dateStr).addMonths(value);
this.year = targetDate.getFullYear();
this.month = targetDate.getMonth() + 1;
this.date = targetDate.getDate();
this.formatMonth();
},
// 上一个月
prevMonth() {
this.addMonths(-1);
},
// 下一个月
nextMonth() {
this.addMonths(1);
},
// 加/减 年份
addYear(value) {
let dateStr = this.month + '.' + this.date + '.' + this.year;
let targetDate = Date.parse(dateStr).addYears(value);
this.year = targetDate.getFullYear();
this.month = targetDate.getMonth() + 1;
this.formatMonth();
},
// 上一年
prevYear() {
this.addYear(-1);
},
// 下一年
nextYear() {
this.addYear(1);
},
selectDay(item) {
if (!item) return;
let curData = item;
let date = curData.date;
this.date = date;
},
initData() {}
},
mounted() {},
created() {
// 设置今天日期
let today = Date.today();
this.year = today.getFullYear();
this.month = today.getMonth() + 1;
this.date = today.getDate();
this.formatMonth();
}
}
@import '@/styles/_support';
// 日历容器
.date-wrap {
font-family: Arial;
font-size: 14px;
// 日历
.calendar-wrap {
position: relative;
@extend .bb;
width: 450px;
height: 320px;
border-radius: $borderRadius;
background-color: wheat;
border: solid 1px #dcdddd;
padding: 28px 36px 18px 36px;
background-color: #ffffff;
// 年月标题
.nav-wrap {
@extend .flc;
align-items: center;
color: $cOrange;
.date-wrap {
@extend .flb;
align-items: center;
.date {
// margin: 0 40px;
width: 154px;
text-align: center;
}
}
.nav-btn2 {
color: #959595;
}
}
.con {
margin: 12px auto 0;
// 表头
.th {
@extend .flb;
// 单元格
.td {
color: $cOrange;
}
}
// 表体
.tr {
@extend .flb;
justify-content: flex-start;
flex-wrap: wrap;
// margin-top: 0px;
.td {
text-align: center;
width: calc(100%/7);
height: 34px;
@extend .flb;
justify-content: center;
align-items: center;
}
}
.point {
width: 28px;
height: 28px;
line-height: 28px;
text-align: center;
border-radius: 100%;
}
.sel {
color: #ffffff;
background-color: $cOrange;
}
}
}
}
.disable {
color: #dcdddd !important;
cursor: default !important;
}
<template>
<div class="comp">
<div class="date-wrap">
<div class="calendar-wrap">
<!-- 标题 -->
<div class="nav-wrap">
<div class="date-wrap">
<div class="pointer nav-btn" @click="prevMonth">
<img src="@/assets/images/form/date-picker/data-picker-icon-up.png">
</div>
<div class="date">
<span class="pointer">{{year}}年{{month}}月</span>
</div>
<div class="pointer nav-btn" @click="nextMonth">
<img src="@/assets/images/form/date-picker/data-picker-icon-down.png">
</div>
</div>
</div>
<!-- 日历躯干 -->
<div class="con">
<!-- 日历表头 -->
<div class="th tr">
<div class="td" :class="{'disable':!weekend}">日</div>
<div class="td">一</div>
<div class="td">二</div>
<div class="td">三</div>
<div class="td">四</div>
<div class="td">五</div>
<div class="td" :class="{'disable':!weekend}">六</div>
</div>
<!-- 日历主体 -->
<div class="tr">
<div class="td" v-for="(item,index) in fortmatMonthData" :key="index">
<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}">
<div>{{item && item.date || ""}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script src="./date-picker.js"></script>
<style lang="scss" scoped>
@import "./date-picker.scss";
</style>
......@@ -87,7 +87,7 @@ export default {
// console.log("curData.value == =", curData.value)
if (curData.value == "logout") {
// this.$store.commit("SET_USER_INFO", null);
this._loginHandler();
this.loginHandler();
} else {
// 不是的话，跳转页面
this.$router.push({
......@@ -101,13 +101,13 @@ export default {
// value: this.dataList[index]
// });
},
_loginHandler() {
loginHandler() {
httpPost({ url: api.logout }).then(() => {
this.$store.commit("SET_USER_INFO", null);
this._showLogoutTip();
this.showLogoutTip();
});
},
_showLogoutTip() {
showLogoutTip() {
// 登出后的提示
alert("登出成功");
}
......@@ -118,6 +118,5 @@ export default {
}
},
created() {
// this.
},
};
......
// @import '@/styles/_support';
@import '@/styles/_utils';
@import '@/styles/_support';
.v-footer {
font-family: MicrosoftYaHei;
color: #ffffff;
background-color: #2e2b2a;
font-size: $fontSizeSmall;
.footer-containter {
margin: 0 auto;
......@@ -35,9 +35,7 @@
// 热线
.hotline {
// margin-right: 8rem;
min-width: 280px;
// flex: 1;
.contact {
.n-item {
......@@ -45,9 +43,8 @@
}
.phone {
// font-family: Arial;
color: #ea5a26;
font-size: 1.666667rem;
font-size: $fontSizeTitle;
font-weight: bold;
}
......
......@@ -52,10 +52,7 @@
.t1 {
width: 100%;
text-align: center;
font-size: 18px;
// line-height: 1.8rem;
// background-color: wheat;
font-size: $fontSizeTitle;
}
}
......
......@@ -8,7 +8,7 @@
padding: 2.833333rem 4.0rem 0 3.5rem;
width: 64.166667rem;
height: 32.25rem;
border-radius: 8px;
border-radius: $borderRadius;
border: solid 1px #f2f2f2;
background-color: #ffffff;
}
......@@ -19,13 +19,13 @@
margin-bottom: 4.416667rem;
&-item {
font-size: 12px;
font-size: $paddingSmall;
&-tit {
display: flex;
align-items: center;
color: $cOrange;
font-size: 18px;
font-size: $fontSizeTitle;
font-weight: bold;
height: 2.833333rem;
......
......@@ -4,13 +4,17 @@ import {
httpPost
} from '@/api/fetch-api.js'
import DatePicker from '@/components/date-picker/date-picker.vue'
export default {
data() {
return {
key: 'value'
}
},
components: {},
components: {
DatePicker
},
methods: {
initData() {}
},
......
@import '@/styles/_support';
.content {}
.content {
// background-color: wheat;
padding-bottom: 200px;
}
......
<template>
<div class="content">
<date-picker>
</date-picker>
</div>
</template>
......
......@@ -4,6 +4,7 @@ import {
httpPost
} from '@/api/fetch-api.js'
export default {
data() {
return {
......
......@@ -16,7 +16,7 @@
.tit {
text-align: center;
font-size: 18px;
font-size: $fontSizeTitle;
font-weight: bold;
letter-spacing: 1.8px;
}
......
......@@ -153,11 +153,11 @@ const routes = [
}
},
// 404页面
{
path: '*', // * 表示上面路径匹配不到的都显示这个页面
name: '404',
component: Index
},
// {
// path: '*', // * 表示上面路径匹配不到的都显示这个页面
// name: '404',
// component: Index
// },
]
// add route path
......
......@@ -94,10 +94,13 @@
text-align: center;
color: #ffffff;
background-color: #f05a23;
// box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
// background-blend-mode: soft-light, ;
// background-image: linear-gradient(to bottom, #f05f28, #f05021);
box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
background-blend-mode: soft-light, ;
// background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #f05a23, #f05a23);
background-image: linear-gradient(to bottom, #f05f28, #f05021);
background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429);
}
......
......@@ -3,18 +3,23 @@
background-size: 100% 100%;
}
//flex 布局和 子元素 对其方式
.fl {
display: flex;
}
.fj {
.flc {
display: flex;
justify-content: center;
}
.flb {
display: flex;
justify-content: space-between;
}
.fla{
.fla {
display: flex;
align-items: center;
}
......@@ -53,10 +58,10 @@
text-align: center;
}
.bc{
.bc {
text-align: center;
}
.flex1{
.flex1 {
flex: 1;
}
......
......@@ -6,6 +6,10 @@
*
*/
$borderRadiusSmall:5px;
$borderRadius:8px;
// Margin
$marginSmall: 10px; // 小间距
$marginMedium: 28px; // 间距
......@@ -29,3 +33,9 @@ $cGray:#bfbfbf;
$cDark:#dcdcdc;
$cLightBlack:#333333;
$cFontGray: #4c4948;
// 移动端
$marginSmall-M: 10px; // 小间距
$marginMedium-M: 20px; // 间距
// $marginLarge: 28px;
......