585 lines
14 KiB
Vue
585 lines
14 KiB
Vue
<template>
|
||
<view class="container88">
|
||
<!-- 公共组件-每个页面必须引入 -->
|
||
<public-module></public-module>
|
||
<z-nav-bar title="时辰取穴"></z-nav-bar>
|
||
<view>
|
||
<!-- <uni-section :title="'date 对象用法：' + datetimesingle" type="line"></uni-section> -->
|
||
<!-- <view class="datetimeBox">
|
||
<uni-datetime-picker type="datetime" v-model="date" @change="changeLog" :clear-icon="false" />
|
||
</view> -->
|
||
<view class="box1 ">
|
||
<view class="" style="text-align: center; margin-top: 50rpx; align-items: center; margin-bottom: 30rpx;">
|
||
<!-- <text style="color: #666; line-height: 60rpx;">所查询时间：</text><br /> -->
|
||
<view class="" style="margin-bottom: 10rpx; ">
|
||
<text style="color: #a84a2d; font-size: 50rpx; white-space:nowrap; font-weight: bold;">{{dateToString}}</text>
|
||
</view>
|
||
<view class="">
|
||
<uni-datetime-picker type="datetime" v-model="date" @change="changeLog" :clear-icon="false" />
|
||
</view>
|
||
|
||
<!-- <uni-datetime-picker style="color: #666; " v-model="single"
|
||
>切换时间</uni-datetime-picker> -->
|
||
<!-- <uni-datetime-picker type="datetime" v-model="date" @change="changeLog" :clear-icon="false" /> -->
|
||
</view>
|
||
<view class="yunqi">
|
||
<!-- <text style="color: #666; line-height: 50rpx; width: 100%; margin-right: 15rpx;">天干地支</text> -->
|
||
<view class="shu">
|
||
<text>{{tiangandizhi.hour}} - 时</text>
|
||
<text>{{tiangandizhi.day}} - 日</text>
|
||
<text>{{tiangandizhi.month}} - 月</text>
|
||
<text>{{tiangandizhi.year}} - 年</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 当天 -->
|
||
<view class="curBox flexbox" style="justify-content: space-between;" v-if="showDetail">
|
||
<table border style=" text-align: center;;background-color: antiquewhite;" cellspacing="0">
|
||
<tr class="">
|
||
<!-- <td colspan="1" class=""></td> -->
|
||
<td class="" rowspan="2">灵龟八法</td>
|
||
<td class="">开穴</td>
|
||
<td class="curText" style="width: 130rpx"><text class="verticalRl" style="writing-mode: vertical-rl;">{{quxue[curIndex-2].lgbf.KX}}</text></td>
|
||
</tr>
|
||
<tr class="">
|
||
<td class="">合穴</td>
|
||
<td class="curText" v-if="quxue[curIndex-2].lgbf.HX != ''"><text class="verticalRl">{{quxue[curIndex-2].lgbf.HX}}</text></td>
|
||
<td class="curText" v-else> / </td>
|
||
</tr>
|
||
</table>
|
||
<table border style="text-align: center; margin-left: 10rpx;background-color: antiquewhite;"
|
||
cellspacing="0">
|
||
<tr class="">
|
||
<!-- <td colspan="1" class=""></td> -->
|
||
<td class="" rowspan="2">飞腾八法</td>
|
||
<td class="">开穴</td>
|
||
<td class="curText" style="width: 130rpx"><text class="">{{quxue[curIndex-2].ftbf.KX}}</text></td>
|
||
</tr>
|
||
<tr class="">
|
||
<td class="">合穴</td>
|
||
<td class="curText" v-if="quxue[curIndex-2].ftbf.HX != ''"><text class="">{{quxue[curIndex-2].ftbf.HX}}</text></td>
|
||
<td class="curText" v-else> / </td>
|
||
</tr>
|
||
</table>
|
||
</view>
|
||
<view class="curBox" style="margin-top: 10rpx;" v-if="showDetail">
|
||
<table border style=" width: 100%; text-align: center;background-color: antiquewhite;" cellspacing="0">
|
||
<tr class="">
|
||
<!-- <td colspan="1" class=""></td> -->
|
||
<td class="" rowspan="5">子午流注</td>
|
||
<td class="shuHeight" colspan="2" rowspan="1">子午纳干</td>
|
||
<td class="curText" style=" border: none; text-align: center; vertical-align: middle;" v-if="quxue[curIndex-2].zwlz.ngf.length > 0">
|
||
<text class="" style="display: inline-block; height: 100%;" v-for="(item, index) in quxue[curIndex-2].zwlz.ngf"
|
||
:style="{color: getHightLightColor(item)}">{{item}}</text>
|
||
</td>
|
||
<td class="curText" v-else> / </td>
|
||
</tr>
|
||
<tr class="">
|
||
<td class="" rowspan="4">子午纳子</td>
|
||
<td class="">补法</td>
|
||
<td class="curText" style="width: 200rpx;" v-if="quxue[curIndex-2].zwlz.nzf.bf != ''">
|
||
<text class="verticalRl"
|
||
:style="{color: getHightLightColor(quxue[curIndex-2].zwlz.nzf.bf)}">{{quxue[curIndex-2].zwlz.nzf.bf}}</text>
|
||
</td>
|
||
<td class="curText" v-else> / </td>
|
||
<!-- <td class="" v-if="quxue[curIndex-2].ftbf.HX != ''">{{quxue[curIndex-2].ftbf.HX}}</td>
|
||
<td class="" v-else> / </td> -->
|
||
</tr>
|
||
|
||
<tr class="">
|
||
<td class="">泄法</td>
|
||
<td class="curText" style="width: 200rpx;" v-if="quxue[curIndex-2].zwlz.nzf.xf != ''">
|
||
<text class="verticalRl"
|
||
:style="{color: getHightLightColor(quxue[curIndex-2].zwlz.nzf.xf)}">{{quxue[curIndex-2].zwlz.nzf.xf}}</text>
|
||
</td>
|
||
<td class="curText" v-else> / </td>
|
||
</tr>
|
||
<tr class="">
|
||
<td class="">过时泄本</td>
|
||
<td class="curText" style="width: 200rpx;" v-if="quxue[curIndex-2].zwlz.nzf.gsxb != ''">
|
||
<text class="verticalRl"
|
||
:style="{color: getHightLightColor(quxue[curIndex-2].zwlz.nzf.gsxb)}">{{quxue[curIndex-2].zwlz.nzf.gsxb}}</text>
|
||
</td>
|
||
<td class="curText" v-else> / </td>
|
||
</tr>
|
||
<tr class="">
|
||
<td class="">过时补原</td>
|
||
<td class="curText" style="width: 200rpx;" v-if="quxue[curIndex-2].zwlz.nzf.gsbf != ''">
|
||
<text class="verticalRl"
|
||
:style="{color: getHightLightColor(quxue[curIndex-2].zwlz.nzf.gsbf)}">{{quxue[curIndex-2].zwlz.nzf.gsbf}}</text>
|
||
</td>
|
||
<td class="curText" v-else> / </td>
|
||
</tr>
|
||
</table>
|
||
</view>
|
||
<view class="centerBox" style="text-align: right; padding-top:10rpx; font-size: 24rpx;">
|
||
注：表中带* 者是原穴
|
||
</view>
|
||
<!-- end -->
|
||
<view class="showBtn">
|
||
<text @click="showTotalFun" v-if="!showTotal">《 查看全部时辰对应穴位 》</text>
|
||
<!-- <text @click="showTotalFun" v-else>《 收起全部时辰 》</text> -->
|
||
</view>
|
||
<music-play :playData="playData"></music-play>
|
||
<z-navigation></z-navigation>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import musicPlay from '@/components/music.vue'
|
||
import $http from '@/config/requestConfig.js';
|
||
|
||
function formatDateTime(time) {
|
||
var date = new Date(time);
|
||
var y = date.getFullYear();
|
||
var m = date.getMonth() + 1;
|
||
m = m < 10 ? ('0' + m) : m;
|
||
var d = date.getDate();
|
||
d = d < 10 ? ('0' + d) : d;
|
||
var h = date.getHours();
|
||
h = h < 10 ? ('0' + h) : h;
|
||
var minute = date.getMinutes();
|
||
var second = date.getSeconds();
|
||
minute = minute < 10 ? ('0' + minute) : minute;
|
||
second = second < 10 ? ('0' + second) : second;
|
||
|
||
return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
|
||
};
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
showDetail: true,
|
||
showTotal: false,
|
||
single: '',
|
||
playData: {},
|
||
curIndex: null,
|
||
pageWidth: uni.getSystemInfoSync().windowWidth,
|
||
pageHeight: uni.getSystemInfoSync().windowHeight - 200,
|
||
fiveYunNum: 5,
|
||
// date: new Date().toISOString().slice(0, 10), // 只返回年月日
|
||
date: new Date().getTime(), // 返回年月日带时间
|
||
dateToString: formatDateTime(new Date()), // 字符串格式的日期
|
||
timestamp: Date.now() - 2 * 24 * 3600 * 1000, // 时间戳
|
||
showCalendar: false,
|
||
quxue: [], // 时辰取穴
|
||
tiangandizhi: {},
|
||
pageTime:{ // 页面得时间，载入时赋值
|
||
hour:0,
|
||
minute:0,
|
||
increments:0 // 分钟数距离整点的差额
|
||
},
|
||
myInterval:null, // 定时器
|
||
myDingshi: null,
|
||
}
|
||
},
|
||
onLoad() {
|
||
let da = new Date().toISOString().slice(0, 10)
|
||
this.timestamp = new Date(da).getTime()
|
||
// console.log('初始时间', this.dateToString, this.date)
|
||
this.getXueWei(this.dateToString)
|
||
this.getTGDZ(this.dateToString)
|
||
|
||
},
|
||
onUnload() {
|
||
this.pageTime.hour = 0
|
||
this.pageTime.minute = 0
|
||
this.pageTime.increments = 0
|
||
clearInterval(this.myDingshi)
|
||
clearTimeout(this.myInterval);
|
||
console.log('隐藏页面', this.myInterval, this.myDingshi)
|
||
},
|
||
onShow() {
|
||
// console.log('全局hours',this.$getHours.hourNumber,this.$getHours.minuteNumber)
|
||
var mydate = new Date()
|
||
this.pageTime.hour = mydate.getHours()
|
||
this.pageTime.minute = mydate.getMinutes()
|
||
console.log('全局hours', this.pageTime.hour,this.pageTime.minute)
|
||
this.pageTime.increments = 60 - this.pageTime.minute
|
||
console.log('距离整点', this.pageTime.increments, this.pageTime.increments * 60000, '毫秒后执行')
|
||
if(this.pageTime.increments > 0){
|
||
this.myInterval = setTimeout(() => {
|
||
this.autoChange()
|
||
this.myDingshi = setInterval(() => {
|
||
console.log('进入轮询')
|
||
this.autoChange()
|
||
},60 * 60000)
|
||
}, this.pageTime.increments * 60000)
|
||
}
|
||
},
|
||
onHide() {
|
||
clearTimeout(this.myInterval);
|
||
clearInterval(this.myDingshi)
|
||
console.log('清除定时器',this.myInterval, this.myDingshi)
|
||
//this.myInterval = null
|
||
},
|
||
methods: {
|
||
scroll: function(e) {},
|
||
autoChange(){
|
||
// console.log()
|
||
let da = new Date().toISOString().slice(0, 10)
|
||
this.timestamp = new Date(da).getTime()
|
||
this.dateToString = formatDateTime(new Date()), // 字符串格式的日期
|
||
this.getXueWei(this.dateToString)
|
||
this.getTGDZ(this.dateToString)
|
||
},
|
||
showTotalFun() {
|
||
uni.navigateTo({
|
||
url: "./totalTable"
|
||
})
|
||
// this.showTotal = !this.showTotal
|
||
},
|
||
// 设置文字颜色
|
||
getHightLightColor(text) {
|
||
if (text.indexOf('*') != -1) {
|
||
return "#9c3211"
|
||
}
|
||
},
|
||
// 获取天干地支
|
||
getTGDZ(date) {
|
||
let that = this
|
||
$http.request({
|
||
url: "book/point/TGDZForYear",
|
||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||
data: {
|
||
"date": date
|
||
},
|
||
header: { //默认 无 说明：请求头
|
||
'Content-Type': 'application/json'
|
||
},
|
||
})
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
console.log('天干地支', res.tgdz)
|
||
this.tiangandizhi = res.tgdz
|
||
}
|
||
|
||
}).catch(e => {
|
||
console.log(e, 'e')
|
||
});
|
||
},
|
||
// 获取时辰取穴
|
||
getXueWei(date) {
|
||
this.showDetail = false
|
||
let that = this
|
||
$http.request({
|
||
url: "book/point/SCQX",
|
||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||
data: {
|
||
"date": date
|
||
},
|
||
header: { //默认 无 说明：请求头
|
||
'Content-Type': 'application/json'
|
||
},
|
||
})
|
||
.then(res => {
|
||
if (res.code == 0 && res.flag.length > 0) {
|
||
console.log('时辰取穴', res.flag)
|
||
this.quxue = res.flag
|
||
this.curIndex = res.flag.findIndex(function(item) {
|
||
return item.now == true
|
||
})
|
||
this.curIndex = this.curIndex + 2
|
||
console.log(this.curIndex, 'this.curIndex')
|
||
this.showDetail = true
|
||
}
|
||
|
||
}).catch(e => {
|
||
this.curIndex = null
|
||
console.log(e, 'e')
|
||
});
|
||
},
|
||
// checkAdult(item) {
|
||
// return item.now == true
|
||
// },
|
||
changeLog(e) {
|
||
console.log('change事件:', e);
|
||
let ss = e.slice(0, 10)
|
||
this.timestamp = new Date(ss).getTime()
|
||
this.dateToString = e
|
||
this.getXueWei(e)
|
||
this.getTGDZ(e)
|
||
},
|
||
},
|
||
|
||
components: {
|
||
musicPlay
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import './scss/common.scss';
|
||
|
||
/deep/ .uni-date-editor { position: relative;
|
||
display: block; width:200rpx; height:34rpx;
|
||
background-image: url('@/static/icon/change.png');
|
||
background-size: contain; margin: 0 auto;
|
||
background-repeat: no-repeat;
|
||
padding-left: 50rpx;
|
||
background-position: left top;
|
||
.uni-date-editor--x{display: none;}
|
||
}
|
||
/deep/ .uni-date-editor::after{content: '切换时间'; font-size: 30rpx; position: absolute; top: -2px; left: 40rpx; top: 0; display: block;}
|
||
|
||
.showBtn {
|
||
text-align: center;
|
||
|
||
text {
|
||
color: #a84a2d;
|
||
}
|
||
}
|
||
|
||
.textBlock {
|
||
display: block
|
||
}
|
||
|
||
.curText { height: 90rpx;
|
||
background-color: #fbd5ca;
|
||
text{
|
||
writing-mode: vertical-rl !important;
|
||
}
|
||
|
||
}
|
||
|
||
.leftBar {
|
||
td {
|
||
font-weight: bold;
|
||
color: #a84a2d;
|
||
}
|
||
}
|
||
|
||
tr.cur {
|
||
background-color: #e7a896;
|
||
color: #fff;
|
||
|
||
td {
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.tableTh {
|
||
background-color: #fbd5ca;
|
||
font-weight: bold;
|
||
color: #a84a2d;
|
||
}
|
||
|
||
.shuHeight {
|
||
height: 100rpx;
|
||
}
|
||
|
||
.shuHeight1 {
|
||
height: 100rpx;
|
||
}
|
||
|
||
.verticalRl {
|
||
writing-mode: vertical-rl;
|
||
}
|
||
|
||
.oneHeight {
|
||
height: 50rpx;
|
||
}
|
||
|
||
.twoHeight {
|
||
height: 94rpx;
|
||
}
|
||
|
||
table {
|
||
border-collapse: collapse;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
table td {
|
||
border-bottom: 1px solid #a84a2d;
|
||
border-right: 1px solid #a84a2d;
|
||
}
|
||
|
||
table tr:first-child td {
|
||
border-top: 1px solid #a84a2d;
|
||
}
|
||
|
||
table tr td:first-child {
|
||
border-left: 1px solid #a84a2d;
|
||
}
|
||
|
||
td {
|
||
padding: 8rpx 10rpx;
|
||
}
|
||
|
||
.oneWidth {
|
||
width: 124rpx;
|
||
}
|
||
|
||
/deep/ .uni-table-th {
|
||
padding: 14rpx 20rpx
|
||
}
|
||
|
||
* {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.centerBox {
|
||
text-align: center;
|
||
padding: 20px;
|
||
color: #666;
|
||
}
|
||
|
||
.yinli {
|
||
line-height: 50rpx;
|
||
|
||
text {
|
||
writing-mode: vertical-rl;
|
||
letter-spacing: 20rpx;
|
||
color: #c06346;
|
||
}
|
||
}
|
||
|
||
.box1 {
|
||
padding: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.yunqi {
|
||
color: #c06346;
|
||
text-align: center;
|
||
margin-top: 20rpx;
|
||
|
||
.shu {
|
||
display: inline-block;
|
||
padding: 20rpx;
|
||
|
||
text {
|
||
writing-mode: vertical-rl;
|
||
line-height: 80rpx;
|
||
font-size:34rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.grayBg {
|
||
background-color: #eee;
|
||
}
|
||
|
||
.scroll-view_H {
|
||
white-space: nowrap;
|
||
width: 100%;
|
||
|
||
.leftone {
|
||
|
||
border-left: 1px solid #ddd;
|
||
}
|
||
|
||
.row {
|
||
display: inline-block;
|
||
text-align: center;
|
||
background-color: #fef9e4;
|
||
border-right: 1px solid #ddd;
|
||
border-bottom: 1px solid #ddd;
|
||
}
|
||
|
||
.row.cur {
|
||
background-color: #8d3d16;
|
||
color: #fff;
|
||
position: relative;
|
||
border-right: 0;
|
||
z-index: 5;
|
||
box-shadow: 0 0 10px #8d3d16;
|
||
}
|
||
|
||
.line {
|
||
padding: 20rpx;
|
||
border-top: 1px solid #ddd;
|
||
|
||
span {
|
||
font-size: 36rpx;
|
||
}
|
||
}
|
||
|
||
.line1 {
|
||
font-size: 24rpx;
|
||
height: 200rpx;
|
||
writing-mode: vertical-rl;
|
||
;
|
||
}
|
||
|
||
.zhuyun {
|
||
color: #8d3d16;
|
||
background-color: #faede7;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.keyun {
|
||
color: #c06346;
|
||
background-color: #fceeed;
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
|
||
.container88 {
|
||
padding: 10rpx;
|
||
|
||
background-color: #fff;
|
||
padding-bottom: 70rpx;
|
||
}
|
||
|
||
.datetimeBox {
|
||
width: 80%;
|
||
margin: 0 auto;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.liuqiBox {
|
||
.line.keyun {
|
||
padding: 60rpx 10rpx
|
||
}
|
||
}
|
||
|
||
.wuYunBox {
|
||
.row {
|
||
width: 20%;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
|
||
/deep/ .uni-calendar__content-mobile {
|
||
bottom: 100rpx !important;
|
||
}
|
||
|
||
.sizai {
|
||
.keyun {
|
||
position: relative;
|
||
}
|
||
|
||
.keyun::after {
|
||
position: absolute;
|
||
content: '';
|
||
top: 24rpx;
|
||
left: 0;
|
||
font-size: 24rpx;
|
||
display: block;
|
||
width: 100%;
|
||
color: #888;
|
||
text-align: center;
|
||
}
|
||
|
||
}
|
||
|
||
.sizai1 {
|
||
.keyun::after {
|
||
content: '（司天）';
|
||
}
|
||
}
|
||
|
||
.sizai2 {
|
||
.keyun::after {
|
||
content: '（在泉）';
|
||
}
|
||
}
|
||
|
||
.flexbox {
|
||
display: flex;
|
||
}
|
||
</style> |