121 lines
2.7 KiB
XML
121 lines
2.7 KiB
XML
<template>
|
|
<div class="detail-page" @swipe="goBack">
|
|
<text>{{ year }}年{{ formattedMonth }}月{{ day }}日</text>
|
|
<text if="{{!!week}}">周{{ week }}</text>
|
|
<text if="{{!!lunarYear}}">
|
|
{{ lunarYear }}年 {{ lunarMonth }}月 {{ lunarDay }}
|
|
</text>
|
|
<text>{{ festival }}</text>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import router from "@blueos.app.appmanager.router";
|
|
import sloarToLunar from "../../common/utils/sloarToLunar";
|
|
|
|
export default {
|
|
data: {
|
|
year: "",
|
|
month: "",
|
|
day: "",
|
|
week: null,
|
|
lunarYear: null,
|
|
lunarMonth: null,
|
|
lunarDay: null,
|
|
festival: "",
|
|
formattedMonth: '',
|
|
gregorianFestival: { //阳历
|
|
"1.1": "元旦",
|
|
"2.14": "情人节",
|
|
"3.8": "妇女节",
|
|
"3.12": "植树节",
|
|
"4.1": "愚人节",
|
|
"5.1": "劳动节",
|
|
"5.4": "青年节",
|
|
"6.1": "儿童节",
|
|
"9.10": "教师节",
|
|
"10.1": "国庆节",
|
|
"12.25": "圣诞节"
|
|
},
|
|
lunarFestival: { //阴历
|
|
"正月初一": "春节",
|
|
"正月十五": "元宵节",
|
|
"五月初五": "端午节",
|
|
"七月初七": "七夕节",
|
|
"七月十五": "中元节",
|
|
"八月十五": "中秋节",
|
|
"九月初九": "重阳节",
|
|
"腊月初八": "腊八节",
|
|
"腊月廿三": "小年",
|
|
"腊月三十": "除夕",
|
|
}
|
|
},
|
|
|
|
onInit() {
|
|
const { year, month, day } = this;
|
|
this.year = parseInt(year); // 转换为整数
|
|
this.month = parseInt(month); // 转换为整数
|
|
this.day = parseInt(day); // 转换为整数
|
|
|
|
const { lunarYear, lunarMonth, lunarDay } = sloarToLunar(this.year, this.month, this.day);
|
|
this.lunarYear = lunarYear;
|
|
this.lunarMonth = lunarMonth;
|
|
this.lunarDay = lunarDay;
|
|
this.getWeek();
|
|
this.formattedMonth = this.month < 10 ? `0${this.month}` : this.month;
|
|
const lunar = `${lunarMonth}月${lunarDay}`;
|
|
if (this.lunarFestival.hasOwnProperty(lunar)) {
|
|
this.festival = this.lunarFestival[lunar];
|
|
}
|
|
const solar = `${this.month}.${this.day}`;
|
|
if (this.gregorianFestival.hasOwnProperty(solar)) {
|
|
this.festival = this.gregorianFestival[solar];
|
|
}
|
|
},
|
|
|
|
getWeek() {
|
|
const { year, month, day } = this;
|
|
const weeks = ["日", "一", "二", "三", "四", "五", "六"];
|
|
const weekIndex = new Date(year, month - 1, day).getDay();
|
|
this.week = weeks[weekIndex];
|
|
},
|
|
backClick() {
|
|
router.back();
|
|
},
|
|
|
|
goBack(eve) {
|
|
if (eve.direction === "right") {
|
|
router.back();
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.detail-page {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 240px;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
text {
|
|
font-size: 40px;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
}
|
|
.container {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 40px;
|
|
justify-content: center;
|
|
padding: 10px;
|
|
color: white;
|
|
border-radius: 20px;
|
|
margin: 0px 20px 0px 20px;
|
|
background-color: grey;
|
|
}
|
|
</style> |