zm/nuttyreading-html
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

290
pages/timeAcupoint/timeAcupoint.vue
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;
}
}
}