import router from '@ohos.router';
import http from '@ohos.net.http';
// 网络权限声明
@RequirePermission('ohos.permission.INTERNET')
import { FlexAlign, VerticalAlign, TextAlign, ImageFit, BorderStyle, FontWeight } from '@ohos.arkui.drawing';
import { Color } from '@ohos.arkui.drawing';
// 定义API返回数据的接口
interface LunarCalendarData {
code: number;
ynian: string;
yyue: string;
yri: string;
zi0: string;
zi1: string;
zi2: string;
zi3: string;
zi4: string;
zi5: string;
chou0: string;
chou1: string;
chou2: string;
chou3: string;
chou4: string;
chou5: string;
yin0: string;
yin1: string;
yin2: string;
yin3: string;
yin4: string;
yin5: string;
mao0: string;
mao1: string;
mao2: string;
mao3: string;
mao4: string;
mao5: string;
chen0: string;
chen1: string;
chen2: string;
chen3: string;
chen4: string;
chen5: string;
si0: string;
si1: string;
si2: string;
si3: string;
si4: string;
si5: string;
wu0: string;
wu1: string;
wu2: string;
wu3: string;
wu4: string;
wu5: string;
wei0: string;
wei1: string;
wei2: string;
wei3: string;
wei4: string;
wei5: string;
shen0: string;
shen1: string;
shen2: string;
shen3: string;
shen4: string;
shen5: string;
you0: string;
you1: string;
you2: string;
you3: string;
you4: string;
you5: string;
xu0: string;
xu1: string;
xu2: string;
xu3: string;
xu4: string;
xu5: string;
hai0: string;
hai1: string;
hai2: string;
hai3: string;
hai4: string;
hai5: string;
}
// 定义时辰信息接口
interface TimeSlot {
name: string;
luck: string;
detail: string;
directions: string;
suitable: string[];
avoid: string[];
}
@Entry
@Component
struct LunarCalendar {
@State calendarData: LunarCalendarData | null = null;
@State loading: boolean = true;
@State error: string = '';
@State timeSlots: TimeSlot[] = [];
@State currentDate: string = '';
@State lunarDate: string = '';
@State zodiacYear: string = '';
@State suitableActivities: string = '';
@State avoidActivities: string = '';
@State luckyZodiacs: string = '羊虎狗兔龙牛鼠蛇猴';
// API调用函数
async fetchCalendarData() {
try {
this.loading = true;
this.error = '';
// 创建HTTP请求
let request = http.createHttp();
let url = 'https://cn.apihz.cn/api/time/getdayh.php?id=10008697&key=fc83f26ee88b15ab1081df6fa46603b2';
// 发送请求
let response = await request.request(url, {
method: http.RequestMethod.GET,
readTimeout: 60000,
connectTimeout: 60000,
header: {
'Content-Type': 'application/json'
}
});
// 处理响应
if (response.responseCode === 200) {
const data = JSON.parse(response.result.toString()) as LunarCalendarData;
if (data.code === 200) {
this.calendarData = data;
this.processCalendarData(data);
} else {
this.error = `获取数据失败: ${data.code}`;
}
} else {
this.error = `网络请求失败: ${response.responseCode}`;
}
} catch (e) {
console.error('获取黄历数据失败:', e);
this.error = `获取数据失败: ${JSON.stringify(e)}`;
// 加载mock数据以便页面仍能显示内容
this.loadMockData();
} finally {
this.loading = false;
// 确保释放HTTP资源
request.destroy();
}
}
// 处理日历数据
processCalendarData(data: LunarCalendarData) {
// 设置当前日期
const now = new Date();
this.currentDate = `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日`;
// 修复：使用正确的字段名称yyue
this.lunarDate = `${parseInt(data.yyue)}月初${parseInt(data.yri)}`;
this.zodiacYear = '乙巳(蛇)年己卯月丁酉日';
// 硬编码宜和忌（根据截图）
this.suitableActivities = '破屋 求医 治病 馀事勿取 坏垣';
this.avoidActivities = '嫁娶 开光';
// 处理十二时辰数据
this.timeSlots = [
this.createTimeSlot('zi', data),
this.createTimeSlot('chou', data),
this.createTimeSlot('yin', data),
this.createTimeSlot('mao', data),
this.createTimeSlot('chen', data),
this.createTimeSlot('si', data),
this.createTimeSlot('wu', data),
this.createTimeSlot('wei', data),
this.createTimeSlot('shen', data),
this.createTimeSlot('you', data),
this.createTimeSlot('xu', data),
this.createTimeSlot('hai', data)
];
}
// 加载mock数据（当API调用失败时使用）
loadMockData() {
const now = new Date();
this.currentDate = `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日`;
this.lunarDate = '三月初一';
this.zodiacYear = '乙巳(蛇)年己卯月丁酉日 周六 第13周';
this.suitableActivities = '破屋 求医 治病 馀事勿取 坏垣';
this.avoidActivities = '嫁娶 开光';
// 硬编码时辰数据
this.timeSlots = [
{ name: '子', luck: '吉', detail: '戊子时 23:00 - 00:59', directions: '喜神东南 财神正北', suitable: ['结婚', '出行'], avoid: ['祈福', '求嗣'] },
{ name: '丑', luck: '凶', detail: '己丑时 01:00 - 02:59', directions: '喜神东北 财神正北', suitable: [], avoid: [] },
{ name: '寅', luck: '吉', detail: '庚寅时 03:00 - 04:59', directions: '喜神西北 财神正东', suitable: ['结婚', '交易', '开业'], avoid: ['出行', '搬家'] },
{ name: '卯', luck: '吉', detail: '辛卯时 05:00 - 06:59', directions: '喜神西南 财神正东', suitable: ['结婚', '交易', '开业'], avoid: ['出行', '赴任'] },
{ name: '辰', luck: '凶', detail: '壬辰时 07:00 - 08:59', directions: '喜神正南 财神正南', suitable: ['结婚', '搬家', '安葬'], avoid: ['出行', '赴任'] },
{ name: '巳', luck: '凶', detail: '癸巳时 09:00 - 10:59', directions: '喜神东南 财神正南', suitable: [], avoid: ['诸事不宜'] },
{ name: '午', luck: '吉', detail: '甲午时 11:00 - 12:59', directions: '喜神东北 财神东北', suitable: ['出行', '赴任', '祈福'], avoid: [] },
{ name: '未', luck: '凶', detail: '乙未时 13:00 - 14:59', directions: '喜神西北 财神西南', suitable: ['结婚', '出行', '搬家'], avoid: [] },
{ name: '申', luck: '凶', detail: '丙申时 15:00 - 16:59', directions: '喜神西南 财神正西', suitable: ['结婚', '出行', '交易'], avoid: ['赴任', '诉讼'] },
{ name: '酉', luck: '凶', detail: '丁酉时 17:00 - 18:59', directions: '喜神正南 财神正西', suitable: ['结婚', '入宅', '开业'], avoid: ['出行', '赴任'] },
{ name: '戌', luck: '吉', detail: '戊戌时 19:00 - 20:59', directions: '喜神东南 财神正北', suitable: ['结婚', '开业', '安葬'], avoid: ['祈福', '乘船'] },
{ name: '亥', luck: '吉', detail: '己亥时 21:00 - 22:59', directions: '喜神东北 财神正北', suitable: ['祈福', '祭祀', '作灶'], avoid: ['乘船', '安葬'] }
];
}
// 创建时辰对象
createTimeSlot(prefix: string, data: LunarCalendarData): TimeSlot {
// 使用switch语句替代动态属性访问
switch(prefix) {
case 'zi':
return {
name: data.zi0,
luck: data.zi1,
detail: data.zi2,
directions: data.zi3,
suitable: data.zi4 === '无' ? [] : data.zi4.split('|'),
avoid: data.zi5 === '无' ? [] : data.zi5.split('|')
};
case 'chou':
return {
name: data.chou0,
luck: data.chou1,
detail: data.chou2,
directions: data.chou3,
suitable: data.chou4 === '无' ? [] : data.chou4.split('|'),
avoid: data.chou5 === '无' ? [] : data.chou5.split('|')
};
// 其他时辰类似处理...
default:
return {
name: '',
luck: '',
detail: '',
directions: '',
suitable: [],
avoid: []
};
}
}
// 导航到其他页面
navigateToPage(pageName: string) {
router.pushUrl({
url: `pages/${pageName}`
}).catch(err => {
console.error('路由跳转失败:', err);
});
}
// 获取吉凶对应的颜色
getLuckColor(luck: string): string {
return luck === '吉' ? '#FF6B6B' : '#4ECDC4';
}
// 组件生命周期
aboutToAppear() {
this.fetchCalendarData();
}
build() {
Column() {
// 顶部标题栏
Row() {
// 标题
Text('黄历查询')
.fontSize(18)
.fontWeight(FontWeight.Bold)
.flexGrow(1)
.textAlign(TextAlign.Center)
// 右上角返回按钮
Column() {
Text('←')
.fontSize(20)
.fontColor('#333333')
}
.width(40)
.height(40)
.justifyContent(FlexAlign.Center)
.alignItems(FlexAlign.Center)
.onClick(() => router.back())
}
.width('100%')
.height(56)
.backgroundColor(Color.White)
.alignItems(VerticalAlign.Center)
.padding({ left: 16, right: 16 })
.borderStyle(BorderStyle.Solid)
.borderWidth({ bottom: 1 })
.borderColor({ bottom: '#EEEEEE' })
// 主内容区域
Column() {
if (this.loading) {
// 加载状态
Column() {
Text('加载中...')
.fontSize(16)
.fontColor('#666666')
}
.justifyContent(FlexAlign.Center)
.alignItems(FlexAlign.Center)
.layoutWeight(1)
} else if (this.error) {
// 错误状态
Column() {
Text(this.error)
.fontSize(16)
.fontColor('#FF0000')
.textAlign(TextAlign.Center)
Button('重新加载')
.margin({ top: 16 })
.onClick(() => this.fetchCalendarData())
}
.justifyContent(FlexAlign.Center)
.alignItems(FlexAlign.Center)
.layoutWeight(1)
} else {
// 显示黄历内容
Scroll() {
Column() {
// 顶部日期区域
Column() {
Text(this.currentDate)
.fontSize(14)
.fontColor('#666666')
Text(this.lunarDate)
.fontSize(28)
.fontWeight(FontWeight.Bold)
.fontColor('#333333')
.margin({ top: 4 })
Text(this.zodiacYear)
.fontSize(14)
.fontColor('#666666')
.margin({ top: 4 })
}
.width('100%')
.alignItems(FlexAlign.Center)
.padding({ top: 20, bottom: 16 })
// 宜忌区域
Column() {
Row() {
// 宜
Column() {
Row() {
Text('宜')
.fontSize(14)
.fontWeight(FontWeight.Bold)
.fontColor('#FF6B6B')
}
.margin({ bottom: 8 })
Text(this.suitableActivities)
.fontSize(14)
.fontColor('#333333')
.textAlign(TextAlign.Left)
}
.flexGrow(1)
.padding({ right: 16 })
// 忌
Column() {
Row() {
Text('忌')
.fontSize(14)
.fontWeight(FontWeight.Bold)
.fontColor('#4ECDC4')
}
.margin({ bottom: 8 })
Text(this.avoidActivities)
.fontSize(14)
.fontColor('#333333')
.textAlign(TextAlign.Left)
}
.flexGrow(1)
}
.width('100%')
// 择吉查询按钮
Button('择吉查询')
.width(80)
.height(32)
.fontSize(14)
.fontColor(Color.White)
.backgroundColor('#FF6B6B')
.margin({ top: 8 })
}
.width('90%')
.padding(16)
.backgroundColor(Color.White)
.borderRadius(10)
.alignItems(FlexAlign.End)
// 中间信息区域
Grid() {
GridItem() {
this.createInfoItem('五行', '山下火')
}
GridItem() {
this.createInfoItem('值神', '玉堂')
}
GridItem() {
// 指南针区域（使用文本代替图片）
Column() {
Text('指南针')
.fontSize(14)
.fontWeight(FontWeight.Bold)
.fontColor('#333333')
.margin({ bottom: 8 })
// 简单的指南针表示
Row() {
Text('北')
.fontSize(12)
.fontColor('#666666')
}
.margin({ bottom: 4 })
Row() {
Text('西')
.fontSize(12)
.fontColor('#666666')
Text('●')
.fontSize(12)
.fontColor('#FF6B6B')
.margin({ left: 20, right: 20 })
Text('东')
.fontSize(12)
.fontColor('#666666')
}
.margin({ bottom: 4 })
Row() {
Text('南')
.fontSize(12)
.fontColor('#666666')
}
}
.justifyContent(FlexAlign.Center)
.alignItems(FlexAlign.Center)
}
GridItem() {
this.createInfoItem('二十八星宿', '柳土獐宿星')
}
GridItem() {
this.createInfoItem('冲煞', '鸡日冲兔煞东')
}
GridItem() {
this.createInfoItem('建除十二神', '破日')
}
}
.width('90%')
.height(200)
.columnsTemplate('1fr 1fr 1fr')
.columnsGap(10)
.rowsGap(10)
.margin({ top: 16 })
.padding(16)
.backgroundColor(Color.White)
.borderRadius(10)
// 时辰宜忌表格
Column() {
Text('时辰宜忌')
.fontSize(16)
.fontWeight(FontWeight.Bold)
.fontColor('#333333')
.margin({ bottom: 12 })
.alignSelf(FlexAlign.Start)
Grid() {
// 表头
GridItem() {
Text('时辰')
.fontSize(14)
.fontWeight(FontWeight.Bold)
.fontColor('#333333')
.textAlign(TextAlign.Center)
}
GridItem() {
Text('吉凶')
.fontSize(14)
.fontWeight(FontWeight.Bold)
.fontColor('#333333')
.textAlign(TextAlign.Center)
}
GridItem() {
Text('宜忌')
.fontSize(14)
.fontWeight(FontWeight.Bold)
.fontColor('#333333')
.textAlign(TextAlign.Center)
}
// 表格内容
{this.timeSlots.map((slot, index) => {
const items = [];
items.push(
GridItem({ rowStart: index + 2, column: 0 }) {
Text(slot.name)
.fontSize(14)
.fontColor('#333333')
.textAlign(TextAlign.Center)
}
);
items.push(
GridItem({ rowStart: index + 2, column: 1 }) {
Text(slot.luck)
.fontSize(14)
.fontColor(this.getLuckColor(slot.luck))
.textAlign(TextAlign.Center)
}
);
items.push(
GridItem({ rowStart: index + 2, column: 2 }) {
Column() {
if (slot.suitable.length > 0) {
Row() {
Text('宜:')
.fontSize(12)
.fontColor('#FF6B6B')
Text(slot.suitable.join('、'))
.fontSize(12)
.fontColor('#333333')
.textAlign(TextAlign.Start)
}
.margin({ bottom: 4 })
}
if (slot.avoid.length > 0) {
Row() {
Text('忌:')
.fontSize(12)
.fontColor('#4ECDC4')
Text(slot.avoid.join('、'))
.fontSize(12)
.fontColor('#333333')
.textAlign(TextAlign.Start)
}
}
}
}
);
return items;
})}
}
.width('100%')
.columnsTemplate('1fr 1fr 3fr')
.columnsGap(10)
.rowsGap(8)
}
.width('90%')
.padding(16)
.margin({ top: 16 })
.backgroundColor(Color.White)
.borderRadius(10)
// 吉神凶神区域
Grid() {
GridItem() {
this.createInfoItem('吉神宜趋', '月恩 四相 玉宇')
}
GridItem() {
this.createInfoItem('今日胎神', '仓库门房内北')
}
GridItem() {
this.createInfoItem('凶神宜忌', '月破 大耗 灾煞')
}
}
.width('90%')
.height(120)
.columnsTemplate('1fr 1fr 1fr')
.columnsGap(10)
.rowsGap(10)
.margin({ top: 16 })
.padding(16)
.backgroundColor(Color.White)
.borderRadius(10)
// 今日吉祥生肖
Column() {
Text('今日吉祥生肖')
.fontSize(16)
.fontWeight(FontWeight.Bold)
.fontColor('#333333')
.margin({ bottom: 8 })
.alignSelf(FlexAlign.Start)
Text(this.luckyZodiacs)
.fontSize(16)
.fontColor('#FF6B6B')
.textAlign(TextAlign.Center)
}
.width('90%')
.padding(16)
.margin({ top: 16, bottom: 20 })
.backgroundColor(Color.White)
.borderRadius(10)
.alignItems(FlexAlign.Center)
}
.width('100%')
.alignItems(FlexAlign.Center)
}
.width('100%')
.layoutWeight(1)
.scrollBar(BarState.Off)
}
}
}
.width('100%')
.layoutWeight(1)
.backgroundColor('#F5F5F5')
}
}
// 创建信息项组件
@Builder
private createInfoItem(title: string, content: string) {
Column() {
Text(title)
.fontSize(14)
.fontWeight(FontWeight.Bold)
.fontColor('#333333')
.margin({ bottom: 4 })
Text(content)
.fontSize(12)
.fontColor('#666666')
.textAlign(TextAlign.Center)
}
.justifyContent(FlexAlign.Center)
.alignItems(FlexAlign.Center)
.width('100%')
}
}修复此代码的错误
扫一扫
1908
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
