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-06 13:05:23 +08:00
parent 8506d8a7dc
commit 3c83081ad5
3 changed files with 130 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
pages/acupoint/acupoint.vue
View File

@@ -174,6 +174,12 @@
this.getTitles(id) this.getTitles(id)
}, },
setOneCateIndex(item, index) { setOneCateIndex(item, index) {
if(item.title == "时辰取穴"){
uni.navigateTo({
url: "../timeAcupoint/timeAcupoint"
})
return
}
let id = item.id let id = item.id
this.curOneCateIndex = index this.curOneCateIndex = index
this.curTwoCateIndex = 0 this.curTwoCateIndex = 0

4
pages/peanut/home.vue
View File

@@ -24,10 +24,10 @@
<image src="../../static/icon/five4.png" mode="aspectFit"></image> <image src="../../static/icon/five4.png" mode="aspectFit"></image>
<text>五运六气</text> <text>五运六气</text>
</div> --> </div> -->
<div class="item item1" @click="onPageJump('../timeAcupoint/timeAcupoint')"> <!-- <div class="item item1" @click="onPageJump('../timeAcupoint/timeAcupoint')">
<image src="../../static/icon/five6.png" mode="aspectFit"></image> <image src="../../static/icon/five6.png" mode="aspectFit"></image>
<text>时辰取穴</text> <text>时辰取穴</text>
</div> </div> -->
<div class="item item1" @click="onPageJump('../peanut/searchFor')"> <div class="item item1" @click="onPageJump('../peanut/searchFor')">
<image src="../../static/icon/five3.png" mode="aspectFit"></image> <image src="../../static/icon/five3.png" mode="aspectFit"></image>
<text>书名检索</text> <text>书名检索</text>

281
pages/timeAcupoint/timeAcupoint.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<view class="container88"> <view class="container88">
<!-- 公共组件-每个页面必须引入 --> <!-- 公共组件-每个页面必须引入 -->
<public-module></public-module> --> <public-module></public-module>
<z-nav-bar title="时辰取穴"></z-nav-bar> <z-nav-bar title="时辰取穴"></z-nav-bar>
<view> <view>
<!-- {{date}}---{{timestamp}} --> <!-- {{date}}---{{timestamp}} -->
@@ -10,26 +10,31 @@
<uni-datetime-picker type="datetime" v-model="date" @change="changeLog" :clear-icon="false" /> <uni-datetime-picker type="datetime" v-model="date" @change="changeLog" :clear-icon="false" />
</view> </view>
<view class="flexbox box1 grayBg"> <view class="flexbox box1 grayBg">
<view class="">
<text style="color: #999; writing-mode: vertical-rl;">天干<br/>地支</text>
</view>
<view class="yunqi"> <view class="yunqi">
<view class=""> <view class="">
<text>五运：{{wy.zhuyun[wy.now]}}(主运) &nbsp; {{wy.keyun[wy.now]}}(客运) &nbsp; <text>{{tiangandizhi.hour}}</text>
{{wy.nianyun}}(年运)</text> <text>{{tiangandizhi.day}}</text>
</view> <text>{{tiangandizhi.month}}</text>
<view class=""> <text>{{tiangandizhi.year}}</text>
<text>六气：{{lq.zhuqi[lq.now]}}(主气) &nbsp; {{lq.keqi[lq.now]}}(客气)</text>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<!-- 主体 --> <!-- 主体 -->
<view class="centerBox"> <view class="centerBox">
↓ 24时辰对应穴位图表 左滑查看全部 ↓ 12时辰对应穴位图表 左滑查看全部
</view>
<view class="centerBox" style="text-align: right; padding-top: 0; font-size: 24rpx;">
注：表中带* 者是原穴
</view> </view>
<view class="container" style="display: flex;"> <view class="container" style="display: flex;">
<view class="d-table" style="width: 31%;"> <view class="d-table" style="width: 23%;position: relative; z-index: 1;">
<view class=""> <view class="leftBar">
<!-- <view :class="i === 1 ? 'd-th' : 'd-td'">张三</view> --> <!-- <view :class="i === 1 ? 'd-th' : 'd-td'">张三</view> -->
<table border cellspacing="0" style="width:100%;"> <table border cellspacing="0" style="width:100%; background-color:#fbd5ca;">
<tr> <tr>
<td class="oneHeight"></td> <td class="oneHeight"></td>
</tr> </tr>
@@ -37,30 +42,48 @@
<td class="" style="height: 100rpx;"></td> <td class="" style="height: 100rpx;"></td>
</tr> </tr>
<tr> <tr>
<td class="shuHeight1">23:00 - 01:00</td> <td class="shuHeight1">23 - 01</td>
</tr> </tr>
<tr class="cur"> <tr class="">
<td class="shuHeight1">23:00 - 01:00</td> <td class="shuHeight1">01 - 03</td>
</tr> </tr>
<tr> <tr>
<td class="shuHeight1">23:00 - 01:00</td> <td class="shuHeight1">03 - 05</td>
</tr> </tr>
<tr> <tr>
<td class="shuHeight1">23:00 - 01:00</td> <td class="shuHeight1">07 - 09</td>
</tr> </tr>
<tr> <tr>
<td class="shuHeight1">23:00 - 01:00</td> <td class="shuHeight1">09 - 11</td>
</tr> </tr>
<tr> <tr>
<td class="shuHeight1">23:00 - 01:00</td> <td class="shuHeight1">11 - 13</td>
</tr>
<tr>
<td class="shuHeight1">13 - 15</td>
</tr>
<tr>
<td class="shuHeight1">15 - 17</td>
</tr>
<tr>
<td class="shuHeight1">17 - 19</td>
</tr>
<tr>
<td class="shuHeight1">19 - 21</td>
</tr>
<tr>
<td class="shuHeight1">19 - 21</td>
</tr>
<tr>
<td class="shuHeight1">21 - 23</td>
</tr> </tr>
</table> </table>
</view> </view>
</view> </view>
<scroll-view scroll-x class="border-right" style="width: 70%;"> <scroll-view scroll-x class="border-right" style="width: 80%;">
<view class="d-table scroll-x"> <view class="d-table scroll-x">
<table border style="width: 800px;" cellspacing="0"> <table border style="width: 800px; background-color: antiquewhite;" cellspacing="0">
<tr class="tableTh"> <tr class="tableTh" >
<!-- <td colspan="1" class=""></td> --> <!-- <td colspan="1" class=""></td> -->
<td class="" colspan="2">灵龟八法</td> <td class="" colspan="2">灵龟八法</td>
<td class="" colspan="2">飞腾八法</td> <td class="" colspan="2">飞腾八法</td>
@@ -83,127 +106,40 @@
<td class="">过时泄本</td> <td class="">过时泄本</td>
<td class="">过时补原</td> <td class="">过时补原</td>
</tr> </tr>
<tr> <tr v-for="(item,index) in quxue" :key="index">
<td class="shuHeight verticalRl">太冲</td> <td class="shuHeight "><text class="verticalRl" :style="{color: getHightLightColor(item.lgbf.KX)}">{{item.lgbf.KX}}</text></td>
<td class="shuHeight verticalRl">太冲</td> <td class="shuHeight "><text class="verticalRl" :style="{color: getHightLightColor(item.lgbf.HX)}">{{item.lgbf.HX}}</text></td>
<td class="shuHeight verticalRl"> <td class="shuHeight "><text class="verticalRl" :style="{color: getHightLightColor(item.ftbf.KX)}">{{item.ftbf.KX}}</text></td>
<text class="verticalRl">丘*虚</text> <td class="shuHeight "><text class="verticalRl" :style="{color: getHightLightColor(item.ftbf.HX)}">{{item.ftbf.HX}}</text></td>
<text class="verticalRl">陷 谷</text> <td class="shuHeight ">
<text class="verticalRl">陷 谷</text> <view class="flexbox" v-if="item.zwlz.ngf.length > 0" style="justify-content: space-evenly;align-items: center; align-content: center;">
</td> <text class="verticalRl" :style="{color: getHightLightColor(item1)}" v-for="(item1,index1) in item.zwlz.ngf" :key="index1">{{item1}}</text>
<td class="shuHeight verticalRl">7</td>
<td class="shuHeight verticalRl">7</td>
<td class="shuHeight verticalRl">7</td> </view>
<td class="shuHeight verticalRl">7</td> </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"> <td class="shuHeight">
<text class="verticalRl">7</text> <text class="verticalRl" :style="{color: getHightLightColor(item.zwlz.nzf.bf)}">{{item.zwlz.nzf.bf}}</text>
</td> </td>
<td class="shuHeight"> <td class="shuHeight">
<text class="verticalRl">7</text> <text class="verticalRl" :style="{color: getHightLightColor(item.zwlz.nzf.xf)}">{{item.zwlz.nzf.xf}}</text>
</td> </td>
<td class="shuHeight"> <td class="shuHeight">
<text class="verticalRl">7</text> <text class="verticalRl" :style="{color: getHightLightColor(item.zwlz.nzf.gsxb)}">{{item.zwlz.nzf.gsxb}}</text>
</td> </td>
<td class="shuHeight"> <td class="shuHeight">
<text class="verticalRl">7</text> <text class="verticalRl" :style="{color: getHightLightColor(item.zwlz.nzf.gsbf)}">{{item.zwlz.nzf.gsbf}}</text>
</td> </td>
</tr> </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> </table>
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
<view class="centerBox">
注：表中带* 者是原穴
</view>
<music-play :playData="playData"></music-play> <music-play :playData="playData"></music-play>
<z-navigation></z-navigation> <z-navigation></z-navigation>
</view> </view>
@@ -238,31 +174,22 @@
pageHeight: uni.getSystemInfoSync().windowHeight - 200, pageHeight: uni.getSystemInfoSync().windowHeight - 200,
fiveYunNum: 5, fiveYunNum: 5,
// date: new Date().toISOString().slice(0, 10), // 只返回年月日 // date: new Date().toISOString().slice(0, 10), // 只返回年月日
date: Date.now() - 2 * 24 * 3600 * 1000, // 返回年月日带时间 date: new Date().getTime(), // 返回年月日带时间
dateToString: formatDateTime(new Date()), // 字符串格式的日期 dateToString: formatDateTime(new Date()), // 字符串格式的日期
timestamp: Date.now() - 2 * 24 * 3600 * 1000, // 时间戳 timestamp: Date.now() - 2 * 24 * 3600 * 1000, // 时间戳
wy: {
curTime: 0,
zhuyun: [],
keyun: [],
nianyun: '',
fiveTimes: []
},
showCalendar: false, showCalendar: false,
lq: { quxue: [], // 时辰取穴
curTime: 0, tiangandizhi:{},
zhuqi: [], yuanXue:[
keqi: [], '腕骨','丘墟','丘墟','太溪','大陵','京骨','阳池','太渊','合谷','太白','冲阳','神门'],
time: []
},
} }
}, },
onLoad() { onLoad() {
let da = new Date().toISOString().slice(0, 10) let da = new Date().toISOString().slice(0, 10)
this.timestamp = new Date(da).getTime() this.timestamp = new Date(da).getTime()
this.getYun(this.dateToString) console.log('初始时间', this.dateToString,this.date)
this.getXueWei(this.dateToString)
this.getTGDZ(this.dateToString)
}, },
onHide() { onHide() {
@@ -270,11 +197,17 @@
}, },
methods: { methods: {
scroll: function(e) {}, scroll: function(e) {},
// 获取五运六气 // 设置文字颜色
getYun(date) { getHightLightColor(text){
if(text.indexOf('*') != -1){
return "#9c3211"
}
},
// 获取天干地支
getTGDZ(date){
let that = this let that = this
$http.request({ $http.request({
url: "book/point/WYLQForYear", url: "book/point/TGDZForYear",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档 method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data: { data: {
"date": date "date": date
@@ -284,18 +217,32 @@
}, },
}) })
.then(res => { .then(res => {
if (res.code == 0 && res.wylq) { if (res.code == 0 ) {
console.log('获取成功', res.wylq) console.log('天干地支', res.tgdz)
this.wy.zhuyun = res.wylq.wy.zhuYun this.tiangandizhi = res.tgdz
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')
});
},
// 获取时辰取穴
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
} }
}).catch(e => { }).catch(e => {
@@ -306,7 +253,8 @@
console.log('change事件:', e); console.log('change事件:', e);
let ss = e.slice(0, 10) let ss = e.slice(0, 10)
this.timestamp = new Date(ss).getTime() this.timestamp = new Date(ss).getTime()
this.getYun(e) this.getXueWei(e)
this.getTGDZ(e)
}, },
}, },
@@ -319,7 +267,9 @@
<style lang="scss" scoped> <style lang="scss" scoped>
@import './scss/common.scss'; @import './scss/common.scss';
td {} .leftBar{
td{font-weight: bold; color: #a84a2d;}
}
tr.cur { tr.cur {
background-color: #f8d4c8; background-color: #f8d4c8;
@@ -327,7 +277,8 @@
} }
.tableTh { .tableTh {
font-weight: bold; background-color:#fbd5ca;
font-weight: bold; color: #a84a2d;
} }
.shuHeight { .shuHeight {
@@ -356,16 +307,16 @@
} }
table td { table td {
border-bottom: 1px solid #999; border-bottom: 1px solid #a84a2d;
border-right: 1px solid #999; border-right: 1px solid #a84a2d;
} }
table tr:first-child td { table tr:first-child td {
border-top: 1px solid #999; border-top: 1px solid #a84a2d;
} }
table tr td:first-child { table tr td:first-child {
border-left: 1px solid #999; border-left: 1px solid #a84a2d;
} }
td { td {
@@ -406,8 +357,10 @@
justify-content: space-between; justify-content: space-between;
.yunqi { .yunqi {
color: #c06346; color: #c06346; text-align: center;
line-height: 50rpx; text{
writing-mode: vertical-rl; line-height:60rpx;font-size: 30rpx;
}
} }
} }