时辰取穴:当前时辰+全部时辰

This commit is contained in:
@fawn-nine
2023-12-07 13:47:28 +08:00
parent fdd19cc195
commit 073c3b4a74
6 changed files with 1273 additions and 138 deletions

View File

@@ -543,6 +543,14 @@
"navigationBarTitleText" : "时辰取穴",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/timeAcupoint/totalTable",
"style" :
{
"navigationBarTitleText" : "全部穴位一览表",
"enablePullDownRefresh" : false
}
}
],
"globalStyle": {

View File

@@ -336,7 +336,8 @@
onLoad(e) {
// 隐藏原生的tabbar
uni.hideTabBar();
// this.requestIapOrder()
// this.requestIapOrder()
},
onHide() {
this.page = 1

View File

@@ -0,0 +1,528 @@
<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="">
<text style="color: #666; line-height: 60rpx;">所查询时间</text><br />
<text style="color: #666; white-space:nowrap;;">{{dateToString}}</text>
</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="centerBox">
12时辰对应穴位图表 左滑查看全部
</view>
<view class="centerBox" style="text-align: right; padding-top: 0; font-size: 24rpx;">
表中带* 者是原穴
</view>
<view class="container" style="display: flex;">
<view class="d-table" style="width:15%;position: relative; z-index: 1;">
<view class="leftBar">
<!-- <view :class="i === 1 ? 'd-th' : 'd-td'">张三</view> -->
<table border cellspacing="0" style="width:100%; background-color:#fbd5ca;">
<tr>
<td class="oneHeight"></td>
</tr>
<tr>
<td class="" style="height: 100rpx;"></td>
</tr>
<tr :class="curIndex == 2 ? 'cur' :''">
<td class="shuHeight1">23~01</td>
</tr>
<tr :class="curIndex == 3 ? 'cur' :''">
<td class="shuHeight1">01~03</td>
</tr>
<tr :class="curIndex == 4 ? 'cur' :''">
<td class="shuHeight1">03~05</td>
</tr>
<tr :class="curIndex == 5 ? 'cur' :''">
<td class="shuHeight1">05~07</td>
</tr>
<tr :class="curIndex == 6 ? 'cur' :''">
<td class="shuHeight1">07~09</td>
</tr>
<tr :class="curIndex == 7 ? 'cur' :''">
<td class="shuHeight1">09~11</td>
</tr>
<tr :class="curIndex == 8 ? 'cur' :''">
<td class="shuHeight1">11~13</td>
</tr>
<tr :class="curIndex == 9 ? 'cur' :''">
<td class="shuHeight1">13~15</td>
</tr>
<tr :class="curIndex == 10 ? 'cur' :''">
<td class="shuHeight1">15~17</td>
</tr>
<tr :class="curIndex == 11 ? 'cur' :''">
<td class="shuHeight1">17~19</td>
</tr>
<tr :class="curIndex == 12 ? 'cur' :''">
<td class="shuHeight1">19~21</td>
</tr>
<tr :class="curIndex == 13 ? 'cur' :''">
<td class="shuHeight1">21~23</td>
</tr>
</table>
</view>
</view>
<scroll-view scroll-x class="border-right" style="width: 85%;">
<view class="d-table scroll-x">
<table border style="width: 600px; background-color: antiquewhite;" cellspacing="0">
<tr class="tableTh">
<!-- <td colspan="1" class=""></td> -->
<td class="oneHeight" colspan="2">灵龟八法</td>
<td class="oneHeight" colspan="2">飞腾八法</td>
<td class="oneHeight" 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 v-for="(item,index) in quxue" :key="index" :class="item.now ? 'cur' : ''">
<td class="shuHeight "><text class="verticalRl"
:style="{color: getHightLightColor(item.lgbf.KX)}">{{item.lgbf.KX}}</text></td>
<td class="shuHeight "><text class="verticalRl"
:style="{color: getHightLightColor(item.lgbf.HX)}">{{item.lgbf.HX}}</text></td>
<td class="shuHeight "><text class="verticalRl"
:style="{color: getHightLightColor(item.ftbf.KX)}">{{item.ftbf.KX}}</text></td>
<td class="shuHeight "><text class="verticalRl"
:style="{color: getHightLightColor(item.ftbf.HX)}">{{item.ftbf.HX}}</text></td>
<td class="shuHeight ">
<view class="flexbox" v-if="item.zwlz.ngf.length > 0"
style="justify-content: space-evenly;align-items: center; align-content: center;">
<text class="verticalRl" :style="{color: getHightLightColor(item1)}"
v-for="(item1,index1) in item.zwlz.ngf" :key="index1">{{item1}}</text>
</view>
</td>
<td class="shuHeight">
<text class="verticalRl"
:style="{color: getHightLightColor(item.zwlz.nzf.bf)}">{{item.zwlz.nzf.bf}}</text>
</td>
<td class="shuHeight">
<text class="verticalRl"
:style="{color: getHightLightColor(item.zwlz.nzf.xf)}">{{item.zwlz.nzf.xf}}</text>
</td>
<td class="shuHeight">
<text class="verticalRl"
:style="{color: getHightLightColor(item.zwlz.nzf.gsxb)}">{{item.zwlz.nzf.gsxb}}</text>
</td>
<td class="shuHeight">
<text class="verticalRl"
:style="{color: getHightLightColor(item.zwlz.nzf.gsbf)}">{{item.zwlz.nzf.gsbf}}</text>
</td>
</tr>
</table>
</view>
</scroll-view>
</view>
<view class="centerBox">
表中带* 者是原穴
</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: {},
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: {},
yuanXue: [
'腕骨', '丘墟', '丘墟', '太溪', '大陵', '京骨', '阳池', '太渊', '合谷', '太白', '冲阳', '神门'
],
}
},
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)
},
onHide() {
},
methods: {
scroll: function(e) {},
// 设置文字颜色
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) {
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')
}
}).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';
.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: right;
.shu {
text {
writing-mode: vertical-rl;
line-height: 60rpx;
font-size: 30rpx;
}
}
}
}
.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>

View File

@@ -4,18 +4,26 @@
<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">
<!-- <view class="datetimeBox">
<uni-datetime-picker type="datetime" v-model="date" @change="changeLog" :clear-icon="false" />
</view>
<view class="flexbox box1 grayBg">
<view class="">
<text style="color: #666; line-height: 60rpx;">所查询时间</text><br />
<text style="color: #666; white-space:nowrap;;">{{dateToString}}</text>
</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>
<!-- <text style="color: #666; line-height: 50rpx; width: 100%; margin-right: 15rpx;">天干地支</text> -->
<view class="shu">
<text>{{tiangandizhi.hour}} - </text>
<text>{{tiangandizhi.day}} - </text>
@@ -25,133 +33,94 @@
</view>
</view>
</view>
<!-- 主体 -->
<view class="centerBox">
12时辰对应穴位图表 左滑查看全部
<!-- 当天 -->
<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: 0; font-size: 24rpx;">
表中带* 者是原穴
</view>
<view class="container" style="display: flex;">
<view class="d-table" style="width:15%;position: relative; z-index: 1;">
<view class="leftBar">
<!-- <view :class="i === 1 ? 'd-th' : 'd-td'">张三</view> -->
<table border cellspacing="0" style="width:100%; background-color:#fbd5ca;">
<tr>
<td class="oneHeight"></td>
</tr>
<tr>
<td class="" style="height: 100rpx;"></td>
</tr>
<tr :class="curIndex == 2 ? 'cur' :''">
<td class="shuHeight1">23~01</td>
</tr>
<tr :class="curIndex == 3 ? 'cur' :''">
<td class="shuHeight1">01~03</td>
</tr>
<tr :class="curIndex == 4 ? 'cur' :''">
<td class="shuHeight1">03~05</td>
</tr>
<tr :class="curIndex == 5 ? 'cur' :''">
<td class="shuHeight1">05~07</td>
</tr>
<tr :class="curIndex == 6 ? 'cur' :''">
<td class="shuHeight1">07~09</td>
</tr>
<tr :class="curIndex == 7 ? 'cur' :''">
<td class="shuHeight1">09~11</td>
</tr>
<tr :class="curIndex == 8 ? 'cur' :''">
<td class="shuHeight1">11~13</td>
</tr>
<tr :class="curIndex == 9 ? 'cur' :''">
<td class="shuHeight1">13~15</td>
</tr>
<tr :class="curIndex == 10 ? 'cur' :''">
<td class="shuHeight1">15~17</td>
</tr>
<tr :class="curIndex == 11 ? 'cur' :''">
<td class="shuHeight1">17~19</td>
</tr>
<tr :class="curIndex == 12 ? 'cur' :''">
<td class="shuHeight1">19~21</td>
</tr>
<tr :class="curIndex == 13 ? 'cur' :''">
<td class="shuHeight1">21~23</td>
</tr>
</table>
</view>
</view>
<scroll-view scroll-x class="border-right" style="width: 85%;">
<view class="d-table scroll-x">
<table border style="width: 600px; background-color: antiquewhite;" cellspacing="0">
<tr class="tableTh">
<!-- <td colspan="1" class=""></td> -->
<td class="oneHeight" colspan="2">灵龟八法</td>
<td class="oneHeight" colspan="2">飞腾八法</td>
<td class="oneHeight" 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 v-for="(item,index) in quxue" :key="index" :class="item.now ? 'cur' : ''">
<td class="shuHeight "><text class="verticalRl"
:style="{color: getHightLightColor(item.lgbf.KX)}">{{item.lgbf.KX}}</text></td>
<td class="shuHeight "><text class="verticalRl"
:style="{color: getHightLightColor(item.lgbf.HX)}">{{item.lgbf.HX}}</text></td>
<td class="shuHeight "><text class="verticalRl"
:style="{color: getHightLightColor(item.ftbf.KX)}">{{item.ftbf.KX}}</text></td>
<td class="shuHeight "><text class="verticalRl"
:style="{color: getHightLightColor(item.ftbf.HX)}">{{item.ftbf.HX}}</text></td>
<td class="shuHeight ">
<view class="flexbox" v-if="item.zwlz.ngf.length > 0"
style="justify-content: space-evenly;align-items: center; align-content: center;">
<text class="verticalRl" :style="{color: getHightLightColor(item1)}"
v-for="(item1,index1) in item.zwlz.ngf" :key="index1">{{item1}}</text>
</view>
</td>
<td class="shuHeight">
<text class="verticalRl"
:style="{color: getHightLightColor(item.zwlz.nzf.bf)}">{{item.zwlz.nzf.bf}}</text>
</td>
<td class="shuHeight">
<text class="verticalRl"
:style="{color: getHightLightColor(item.zwlz.nzf.xf)}">{{item.zwlz.nzf.xf}}</text>
</td>
<td class="shuHeight">
<text class="verticalRl"
:style="{color: getHightLightColor(item.zwlz.nzf.gsxb)}">{{item.zwlz.nzf.gsxb}}</text>
</td>
<td class="shuHeight">
<text class="verticalRl"
:style="{color: getHightLightColor(item.zwlz.nzf.gsbf)}">{{item.zwlz.nzf.gsbf}}</text>
</td>
</tr>
</table>
</view>
</scroll-view>
</view>
<view class="centerBox">
<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>
@@ -181,6 +150,9 @@
export default {
data() {
return {
showDetail: true,
showTotal: false,
single: '',
playData: {},
curIndex: null,
pageWidth: uni.getSystemInfoSync().windowWidth,
@@ -198,7 +170,7 @@
],
}
},
onLoad() {
onLoad() {
let da = new Date().toISOString().slice(0, 10)
this.timestamp = new Date(da).getTime()
console.log('初始时间', this.dateToString, this.date)
@@ -211,6 +183,12 @@
},
methods: {
scroll: function(e) {},
showTotalFun() {
uni.navigateTo({
url: "./totalTable"
})
// this.showTotal = !this.showTotal
},
// 设置文字颜色
getHightLightColor(text) {
if (text.indexOf('*') != -1) {
@@ -242,6 +220,7 @@
},
// 获取时辰取穴
getXueWei(date) {
this.showDetail = false
let that = this
$http.request({
url: "book/point/SCQX",
@@ -262,6 +241,7 @@
})
this.curIndex = this.curIndex + 2
console.log(this.curIndex, 'this.curIndex')
this.showDetail = true
}
}).catch(e => {
@@ -291,6 +271,37 @@
<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;
@@ -386,17 +397,22 @@
.box1 {
padding: 20rpx;
margin-bottom: 20rpx;
justify-content: space-between; align-items: center;
justify-content: space-between;
align-items: center;
.yunqi {
color: #c06346;
text-align: right;
text-align: center;
margin-top: 20rpx;
.shu {
display: inline-block;
padding: 20rpx;
text {
writing-mode: vertical-rl;
line-height: 60rpx;
font-size: 30rpx;
line-height: 80rpx;
font-size:34rpx;
}
}
}

View File

@@ -0,0 +1,582 @@
<template>
<view class="container88">
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<view class="whiteBg">
<z-nav-bar title="" ></z-nav-bar>
</view>
<!-- <view class="whiteBg"></view> -->
<view>
<view class="box1 ">
<view class="" style="text-align: center; margin-top: 150rpx; align-items: center; margin-bottom: 10rpx;">
<!-- <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 type="datetime" v-model="date" @change="changeLog" :clear-icon="false" /> -->
</view>
</view>
</view>
<view class="hole">
<!-- 全部表格 -->
<view class="centerBox" style="padding-top: 10rpx;">
12时辰对应穴位图表
</view>
<view class="container" style="display: flex;">
<view class="d-table" style="width:15%;position: relative; z-index: 1;">
<view class="leftBar">
<!-- <view :class="i === 1 ? 'd-th' : 'd-td'">张三</view> -->
<table border cellspacing="0" style="width:100%; background-color:#fbd5ca;">
<tr>
<td class="shuHeight1"></td>
</tr>
<tr>
<td style="height: 150rpx;"></td>
</tr>
<tr :class="curIndex == 2 ? 'cur' :''">
<td class="shuHeight1">23~01</td>
</tr>
<tr :class="curIndex == 3 ? 'cur' :''">
<td class="shuHeight1">01~03</td>
</tr>
<tr :class="curIndex == 4 ? 'cur' :''">
<td class="shuHeight1">03~05</td>
</tr>
<tr :class="curIndex == 5 ? 'cur' :''">
<td class="shuHeight1">05~07</td>
</tr>
<tr :class="curIndex == 6 ? 'cur' :''">
<td class="shuHeight1">07~09</td>
</tr>
<tr :class="curIndex == 7 ? 'cur' :''">
<td class="shuHeight1">09~11</td>
</tr>
<tr :class="curIndex == 8 ? 'cur' :''">
<td class="shuHeight1">11~13</td>
</tr>
<tr :class="curIndex == 9 ? 'cur' :''">
<td class="shuHeight1">13~15</td>
</tr>
<tr :class="curIndex == 10 ? 'cur' :''">
<td class="shuHeight1">15~17</td>
</tr>
<tr :class="curIndex == 11 ? 'cur' :''">
<td class="shuHeight1">17~19</td>
</tr>
<tr :class="curIndex == 12 ? 'cur' :''">
<td class="shuHeight1">19~21</td>
</tr>
<tr :class="curIndex == 13 ? 'cur' :''">
<td class="shuHeight1">21~23</td>
</tr>
</table>
</view>
</view>
<scroll-view scroll-x class="border-right" style="width: 85%;">
<view class="d-table scroll-x">
<table border style="width: 84vw; background-color: antiquewhite;" cellspacing="0">
<tr class="tableTh">
<!-- <td colspan="1" class=""></td> -->
<td class="shuHeight" colspan="2">灵龟八法</td>
<td class="shuHeight" colspan="2">飞腾八法</td>
<td class="shuHeight" colspan="5">子午流注</td>
</tr>
<tr class="tableTh">
<!-- <td colspan="1" rowspan="2" class=""></td> -->
<td class="" rowspan="2" style="height: 150rpx;">开穴</td>
<td class="" rowspan="2" style="height: 150rpx;">合穴</td>
<td class="" rowspan="2" style="height: 150rpx;">开穴</td>
<td class="" rowspan="2" style="height: 150rpx;">合穴</td>
<td class="" rowspan="2" style="height: 150rpx;">子午纳干</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 v-for="(item,index) in quxue" :key="index" :class="item.now ? 'cur' : ''">
<td class="shuHeight "><text class="verticalRl"
:style="{color: getHightLightColor(item.lgbf.KX)}">{{item.lgbf.KX}}</text></td>
<td class="shuHeight "><text class="verticalRl"
:style="{color: getHightLightColor(item.lgbf.HX)}">{{item.lgbf.HX}}</text></td>
<td class="shuHeight "><text class="verticalRl"
:style="{color: getHightLightColor(item.ftbf.KX)}">{{item.ftbf.KX}}</text></td>
<td class="shuHeight "><text class="verticalRl"
:style="{color: getHightLightColor(item.ftbf.HX)}">{{item.ftbf.HX}}</text></td>
<td class="shuHeight ">
<view class="flexbox" v-if="item.zwlz.ngf.length > 0"
style="justify-content: space-evenly;align-items: center; align-content: center;">
<text class="verticalRl" :style="{color: getHightLightColor(item1)}"
v-for="(item1,index1) in item.zwlz.ngf" :key="index1">{{item1}}</text>
</view>
</td>
<td class="shuHeight">
<text class="verticalRl"
:style="{color: getHightLightColor(item.zwlz.nzf.bf)}">{{item.zwlz.nzf.bf}}</text>
</td>
<td class="shuHeight">
<text class="verticalRl"
:style="{color: getHightLightColor(item.zwlz.nzf.xf)}">{{item.zwlz.nzf.xf}}</text>
</td>
<td class="shuHeight">
<text class="verticalRl"
:style="{color: getHightLightColor(item.zwlz.nzf.gsxb)}">{{item.zwlz.nzf.gsxb}}</text>
</td>
<td class="shuHeight">
<text class="verticalRl"
:style="{color: getHightLightColor(item.zwlz.nzf.gsbf)}">{{item.zwlz.nzf.gsbf}}</text>
</td>
</tr>
</table>
</view>
</scroll-view>
</view>
<view class="centerBox" style="text-align: right; padding-top:10rpx; font-size: 24rpx;">
表中带* 者是原穴
</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 {
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: {},
yuanXue: [
'腕骨', '丘墟', '丘墟', '太溪', '大陵', '京骨', '阳池', '太渊', '合谷', '太白', '冲阳', '神门'
],
}
},
onLoad() {
// 页面自动横屏
// #ifdef APP-PLUS
// plus.screen.lockOrientation("landscape-primary");
// uni.showLoading({
// title: "加载中..."
// })
// setTimeout(() => {
// plus.screen.unlockOrientation();
// plus.screen.lockOrientation('landscape-primary');
// uni.hideLoading();
// }, 1200)
// #endif
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() {
// 退出当前页面时 自动切换成竖屏
// #ifdef APP-PLUS
// plus.screen.lockOrientation("portrait-primary");
// #endif
},
onHide() {
},
methods: {
scroll: function(e) {},
showTotalFun() {
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) {
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')
}
}).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';
.whiteBg{background-color: #fff; overflow: hidden; position: fixed; top: 0; width: 100vw; z-index: 5;}
/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 {
background-color: #fbd5ca;
writing-mode: vertical-rl;
}
.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: 48rpx;
}
}
}
}
.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>

BIN
static/icon/change.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB