537 lines
12 KiB
Vue
537 lines
12 KiB
Vue
<template>
|
||
<view class="container88">
|
||
<!-- 公共组件-每个页面必须引入 -->
|
||
<public-module></public-module> -->
|
||
<z-nav-bar title="时辰取穴"></z-nav-bar>
|
||
<view>
|
||
<!-- {{date}}---{{timestamp}} -->
|
||
<!-- <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="flexbox box1 grayBg">
|
||
<view class="yunqi">
|
||
<view class="">
|
||
<text>五运：{{wy.zhuyun[wy.now]}}(主运) {{wy.keyun[wy.now]}}(客运)
|
||
{{wy.nianyun}}(年运)</text>
|
||
</view>
|
||
<view class="">
|
||
<text>六气：{{lq.zhuqi[lq.now]}}(主气) {{lq.keqi[lq.now]}}(客气)</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 主体 -->
|
||
<view class="centerBox">
|
||
↓ 24时辰对应穴位图表 左滑查看全部
|
||
</view>
|
||
<view class="container" style="display: flex;">
|
||
<view class="d-table" style="width: 31%;">
|
||
<view class="">
|
||
<!-- <view :class="i === 1 ? 'd-th' : 'd-td'">张三</view> -->
|
||
<table border cellspacing="0" style="width:100%;">
|
||
<tr>
|
||
<td class="oneHeight"></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="" style="height: 100rpx;"></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="shuHeight1">23:00 - 01:00</td>
|
||
</tr>
|
||
<tr class="cur">
|
||
<td class="shuHeight1">23:00 - 01:00</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="shuHeight1">23:00 - 01:00</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="shuHeight1">23:00 - 01:00</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="shuHeight1">23:00 - 01:00</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="shuHeight1">23:00 - 01:00</td>
|
||
</tr>
|
||
</table>
|
||
</view>
|
||
</view>
|
||
<scroll-view scroll-x class="border-right" style="width: 70%;">
|
||
<view class="d-table scroll-x">
|
||
<table border style="width: 800px;" cellspacing="0">
|
||
<tr class="tableTh">
|
||
<!-- <td colspan="1" class=""></td> -->
|
||
<td class="" colspan="2">灵龟八法</td>
|
||
<td class="" colspan="2">飞腾八法</td>
|
||
<td class="" colspan="5">子午流注</td>
|
||
</tr>
|
||
<tr class="tableTh">
|
||
<!-- <td colspan="1" rowspan="2" class=""></td> -->
|
||
<td class="" rowspan="2" style="height: 100rpx;">开穴</td>
|
||
<td class="" rowspan="2" style="height: 100rpx;">合穴</td>
|
||
<td class="" rowspan="2" style="height: 100rpx;">开穴</td>
|
||
<td class="" rowspan="2" style="height: 100rpx;">合穴</td>
|
||
<td class="" rowspan="2" style="height: 100rpx;">子午纳干</td>
|
||
<td colspan="4">子午纳子</td>
|
||
</tr>
|
||
<!-- </td>
|
||
</tr> -->
|
||
<tr class="tableTh">
|
||
<td class="">补法</td>
|
||
<td class="">泄法</td>
|
||
<td class="">过时泄本</td>
|
||
<td class="">过时补原</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="shuHeight verticalRl">太冲</td>
|
||
<td class="shuHeight verticalRl">太冲</td>
|
||
<td class="shuHeight verticalRl">
|
||
<text class="verticalRl">丘*虚</text>
|
||
<text class="verticalRl">陷 谷</text>
|
||
<text class="verticalRl">陷 谷</text>
|
||
</td>
|
||
<td class="shuHeight verticalRl">7</td>
|
||
<td class="shuHeight verticalRl">7</td>
|
||
|
||
<td class="shuHeight verticalRl">7</td>
|
||
<td class="shuHeight verticalRl">7</td>
|
||
<td class="shuHeight verticalRl">7</td>
|
||
<td class="shuHeight verticalRl">7</td>
|
||
</tr>
|
||
<tr class="cur">
|
||
<td class="shuHeight "><text class="verticalRl">太冲</text></td>
|
||
<td class="shuHeight "><text class="verticalRl">太冲</text></td>
|
||
<td class="shuHeight "><text class="verticalRl">太冲</text></td>
|
||
<td class="shuHeight "><text class="verticalRl">太冲</text></td>
|
||
<td class="shuHeight "><text class="verticalRl">太冲</text></td>
|
||
|
||
<td class="shuHeight">
|
||
<text class="verticalRl">7</text>
|
||
</td>
|
||
<td class="shuHeight">
|
||
<text class="verticalRl">7</text>
|
||
</td>
|
||
<td class="shuHeight">
|
||
<text class="verticalRl">7</text>
|
||
</td>
|
||
<td class="shuHeight">
|
||
<text class="verticalRl">7</text>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="shuHeight "><text class="verticalRl">太冲</text></td>
|
||
<td class="shuHeight "><text class="verticalRl">太冲</text></td>
|
||
<td class="shuHeight "><text class="verticalRl">太冲</text></td>
|
||
<td class="shuHeight "><text class="verticalRl">太冲</text></td>
|
||
<td class="shuHeight "><text class="verticalRl">太冲</text></td>
|
||
|
||
<td class="shuHeight">
|
||
<text class="verticalRl">7</text>
|
||
</td>
|
||
<td class="shuHeight">
|
||
<text class="verticalRl">7</text>
|
||
</td>
|
||
<td class="shuHeight">
|
||
<text class="verticalRl">7</text>
|
||
</td>
|
||
<td class="shuHeight">
|
||
<text class="verticalRl">7</text>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="shuHeight "><text class="verticalRl">太冲</text></td>
|
||
<td class="shuHeight "><text class="verticalRl">太冲</text></td>
|
||
<td class="shuHeight "><text class="verticalRl">太冲</text></td>
|
||
<td class="shuHeight "><text class="verticalRl">太冲</text></td>
|
||
<td class="shuHeight "><text class="verticalRl">太冲</text></td>
|
||
|
||
<td class="shuHeight">
|
||
<text class="verticalRl">7</text>
|
||
</td>
|
||
<td class="shuHeight">
|
||
<text class="verticalRl">7</text>
|
||
</td>
|
||
<td class="shuHeight">
|
||
<text class="verticalRl">7</text>
|
||
</td>
|
||
<td class="shuHeight">
|
||
<text class="verticalRl">7</text>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="shuHeight "><text class="verticalRl">太冲</text></td>
|
||
<td class="shuHeight "><text class="verticalRl">太冲</text></td>
|
||
<td class="shuHeight "><text class="verticalRl">太冲</text></td>
|
||
<td class="shuHeight "><text class="verticalRl">太冲</text></td>
|
||
<td class="shuHeight "><text class="verticalRl">太冲</text></td>
|
||
|
||
<td class="shuHeight">
|
||
<text class="verticalRl">7</text>
|
||
</td>
|
||
<td class="shuHeight">
|
||
<text class="verticalRl">7</text>
|
||
</td>
|
||
<td class="shuHeight">
|
||
<text class="verticalRl">7</text>
|
||
</td>
|
||
<td class="shuHeight">
|
||
<text class="verticalRl">7</text>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="shuHeight "><text class="verticalRl">太冲</text></td>
|
||
<td class="shuHeight "><text class="verticalRl">太冲</text></td>
|
||
<td class="shuHeight "><text class="verticalRl">太冲</text></td>
|
||
<td class="shuHeight "><text class="verticalRl">太冲</text></td>
|
||
<td class="shuHeight "><text class="verticalRl">太冲</text></td>
|
||
|
||
<td class="shuHeight">
|
||
<text class="verticalRl">7</text>
|
||
</td>
|
||
<td class="shuHeight">
|
||
<text class="verticalRl">7</text>
|
||
</td>
|
||
<td class="shuHeight">
|
||
<text class="verticalRl">7</text>
|
||
</td>
|
||
<td class="shuHeight">
|
||
<text class="verticalRl">7</text>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</view>
|
||
</scroll-view>
|
||
</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 {
|
||
playData: {},
|
||
pageWidth: uni.getSystemInfoSync().windowWidth,
|
||
pageHeight: uni.getSystemInfoSync().windowHeight - 200,
|
||
fiveYunNum: 5,
|
||
// date: new Date().toISOString().slice(0, 10), // 只返回年月日
|
||
date: Date.now() - 2 * 24 * 3600 * 1000, // 返回年月日带时间
|
||
dateToString: formatDateTime(new Date()), // 字符串格式的日期
|
||
timestamp: Date.now() - 2 * 24 * 3600 * 1000, // 时间戳
|
||
wy: {
|
||
curTime: 0,
|
||
zhuyun: [],
|
||
keyun: [],
|
||
nianyun: '',
|
||
fiveTimes: []
|
||
},
|
||
showCalendar: false,
|
||
lq: {
|
||
curTime: 0,
|
||
zhuqi: [],
|
||
keqi: [],
|
||
time: []
|
||
},
|
||
|
||
}
|
||
},
|
||
onLoad() {
|
||
let da = new Date().toISOString().slice(0, 10)
|
||
this.timestamp = new Date(da).getTime()
|
||
this.getYun(this.dateToString)
|
||
|
||
},
|
||
|
||
onHide() {
|
||
|
||
},
|
||
methods: {
|
||
scroll: function(e) {},
|
||
// 获取五运六气
|
||
getYun(date) {
|
||
let that = this
|
||
$http.request({
|
||
url: "book/point/WYLQForYear",
|
||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||
data: {
|
||
"date": date
|
||
},
|
||
header: { //默认 无 说明：请求头
|
||
'Content-Type': 'application/json'
|
||
},
|
||
})
|
||
.then(res => {
|
||
if (res.code == 0 && res.wylq) {
|
||
console.log('获取成功', res.wylq)
|
||
this.wy.zhuyun = res.wylq.wy.zhuYun
|
||
this.wy.keyun = res.wylq.wy.keYun
|
||
this.wy.nianyun = res.wylq.wy.nianYun
|
||
this.wy.fiveTimes = res.wylq.wy.time
|
||
this.wy.now = res.wylq.wy.now
|
||
this.wytext = 'text' + this.wy.now
|
||
|
||
|
||
this.lq = res.wylq.lq
|
||
|
||
}
|
||
|
||
}).catch(e => {
|
||
console.log(e, 'e')
|
||
});
|
||
},
|
||
changeLog(e) {
|
||
console.log('change事件:', e);
|
||
let ss = e.slice(0, 10)
|
||
this.timestamp = new Date(ss).getTime()
|
||
this.getYun(e)
|
||
},
|
||
},
|
||
|
||
components: {
|
||
musicPlay
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import './scss/common.scss';
|
||
|
||
td {}
|
||
|
||
tr.cur {
|
||
background-color: #f8d4c8;
|
||
color: #8d3d16;
|
||
}
|
||
|
||
.tableTh {
|
||
font-weight: bold;
|
||
}
|
||
|
||
.shuHeight {
|
||
height: 120rpx;
|
||
}
|
||
|
||
.shuHeight1 {
|
||
height: 120rpx;
|
||
}
|
||
|
||
.verticalRl {
|
||
writing-mode: vertical-rl;
|
||
}
|
||
|
||
.oneHeight {
|
||
height: 37rpx;
|
||
}
|
||
|
||
.twoHeight {
|
||
height: 94rpx;
|
||
}
|
||
|
||
table {
|
||
border-collapse: collapse;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
table td {
|
||
border-bottom: 1px solid #666;
|
||
border-right: 1px solid #666;
|
||
}
|
||
|
||
table tr:first-child td {
|
||
border-top: 1px solid #666;
|
||
}
|
||
|
||
table tr td:first-child {
|
||
border-left: 1px solid #666;
|
||
}
|
||
|
||
td {
|
||
padding: 8rpx 10rpx;
|
||
}
|
||
|
||
.oneWidth {
|
||
width: 124rpx;
|
||
}
|
||
|
||
/deep/ .uni-table-th {
|
||
padding: 14rpx 20rpx
|
||
}
|
||
|
||
* {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.centerBox {
|
||
text-align: center;
|
||
padding: 20px;
|
||
color: #888;
|
||
}
|
||
|
||
.yinli {
|
||
line-height: 50rpx;
|
||
|
||
text {
|
||
writing-mode: vertical-rl;
|
||
letter-spacing: 20rpx;
|
||
color: #c06346;
|
||
}
|
||
}
|
||
|
||
.box1 {
|
||
padding: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
justify-content: space-between;
|
||
|
||
.yunqi {
|
||
color: #c06346;
|
||
line-height: 50rpx;
|
||
}
|
||
}
|
||
|
||
.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> |