接口对接+效果美化

2023-12-06 13:05:23 +08:00
parent 8506d8a7dc
commit 3c83081ad5
3 changed files with 130 additions and 171 deletions
--- a/pages/acupoint/acupoint.vue
+++ b/pages/acupoint/acupoint.vue
@@ -174,6 +174,12 @@
 				this.getTitles(id)
 			},
 			setOneCateIndex(item, index) {
+				if(item.title == "时辰取穴"){					
+					uni.navigateTo({
+						url: "../timeAcupoint/timeAcupoint"
+					})
+					return 
+				}				
 				let id = item.id
 				this.curOneCateIndex = index
 				this.curTwoCateIndex = 0
--- a/pages/peanut/home.vue
+++ b/pages/peanut/home.vue
@@ -24,10 +24,10 @@
 						<image src="../../static/icon/five4.png" mode="aspectFit"></image>
 						<text>五运六气</text>
 					</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>
 						<text>时辰取穴</text>
-					</div>
+					</div> -->
 					<div class="item item1" @click="onPageJump('../peanut/searchFor')">
 						<image src="../../static/icon/five3.png" mode="aspectFit"></image>
 						<text>书名检索</text>
--- a/pages/timeAcupoint/timeAcupoint.vue
+++ b/pages/timeAcupoint/timeAcupoint.vue
@@ -1,7 +1,7 @@
 <template>
 	<view class="container88">
 		<!-- 公共组件-每个页面必须引入 -->
-		<public-module></public-module> -->
+		<public-module></public-module>
 		<z-nav-bar title="时辰取穴"></z-nav-bar>
 		<view>
 			<!-- {{date}}---{{timestamp}} -->
@@ -9,27 +9,32 @@
 			<view class="datetimeBox">
 				<uni-datetime-picker type="datetime" v-model="date" @change="changeLog" :clear-icon="false" />
 			</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="">
-						<text>五运：{{wy.zhuyun[wy.now]}}(主运) &nbsp; {{wy.keyun[wy.now]}}(客运) &nbsp;
-							{{wy.nianyun}}(年运)</text>
-					</view>
-					<view class="">
-						<text>六气：{{lq.zhuqi[lq.now]}}(主气) &nbsp; {{lq.keqi[lq.now]}}(客气)</text>
-					</view>
+						<text>{{tiangandizhi.hour}}</text>
+						<text>{{tiangandizhi.day}}</text>
+						<text>{{tiangandizhi.month}}</text>
+						<text>{{tiangandizhi.year}}</text>
+					</view>						
 				</view>
 			</view>
 		</view>
 		<!-- 主体 -->
 		<view class="centerBox">
-			↓ 24时辰对应穴位图表 左滑查看全部
+			↓ 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: 31%;">
-				<view class="">
+			<view class="d-table" style="width: 23%;position: relative; z-index: 1;">
+				<view class="leftBar">
 					<!-- <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>
 							<td class="oneHeight"></td>
 						</tr>
@@ -37,30 +42,48 @@
 							<td class="" style="height: 100rpx;"></td>
 						</tr>
 						<tr>
-							<td class="shuHeight1">23:00 - 01:00</td>
+							<td class="shuHeight1">23 - 01</td>
 						</tr>
-						<tr class="cur">
-							<td class="shuHeight1">23:00 - 01:00</td>
+						<tr class="">
+							<td class="shuHeight1">01 - 03</td>
 						</tr>
 						<tr>
-							<td class="shuHeight1">23:00 - 01:00</td>
+							<td class="shuHeight1">03 - 05</td>
 						</tr>
 						<tr>
-							<td class="shuHeight1">23:00 - 01:00</td>
+							<td class="shuHeight1">07 - 09</td>
 						</tr>
 						<tr>
-							<td class="shuHeight1">23:00 - 01:00</td>
+							<td class="shuHeight1">09 - 11</td>
 						</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>
 					</table>
 				</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">
-					<table border style="width: 800px;" cellspacing="0">
-						<tr class="tableTh">
+					<table border style="width: 800px; background-color: antiquewhite;" cellspacing="0">
+						<tr class="tableTh" >
 							<!-- <td colspan="1" class=""></td> -->
 							<td class="" colspan="2">灵龟八法</td>
 							<td class="" colspan="2">飞腾八法</td>
@@ -83,127 +106,40 @@
 							<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>
+						<tr v-for="(item,index) in quxue" :key="index">
+							<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 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>
+								<text class="verticalRl" :style="{color: getHightLightColor(item.zwlz.nzf.bf)}">{{item.zwlz.nzf.bf}}</text>
 							</td>
 							<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 class="shuHeight">
-								<text class="verticalRl">7</text>
+								<text class="verticalRl" :style="{color: getHightLightColor(item.zwlz.nzf.gsxb)}">{{item.zwlz.nzf.gsxb}}</text>
 							</td>
 							<td class="shuHeight">
-								<text class="verticalRl">7</text>
+								<text class="verticalRl" :style="{color: getHightLightColor(item.zwlz.nzf.gsbf)}">{{item.zwlz.nzf.gsbf}}</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>

+		<view class="centerBox">
+			注：表中带* 者是原穴
+		</view>
 		<music-play :playData="playData"></music-play>
 		<z-navigation></z-navigation>
 	</view>
@@ -238,31 +174,22 @@
 				pageHeight: uni.getSystemInfoSync().windowHeight - 200,
 				fiveYunNum: 5,
 				// date: new Date().toISOString().slice(0, 10),      // 只返回年月日
-				date: Date.now() - 2 * 24 * 3600 * 1000, // 返回年月日带时间
+				date: new Date().getTime(), // 返回年月日带时间
 				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: []
-				},
-
+				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()
-			this.getYun(this.dateToString)
-
+			console.log('初始时间', this.dateToString,this.date)
+			this.getXueWei(this.dateToString)
+			this.getTGDZ(this.dateToString)
 		},

 		onHide() {
@@ -270,11 +197,17 @@
 		},
 		methods: {
 			scroll: function(e) {},
-			// 获取五运六气
-			getYun(date) {
+			// 设置文字颜色
+			getHightLightColor(text){
+				if(text.indexOf('*') != -1){
+					return "#9c3211"
+				}
+			},
+			// 获取天干地支
+			getTGDZ(date){
 				let that = this
 				$http.request({
-						url: "book/point/WYLQForYear",
+						url: "book/point/TGDZForYear",
 						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
 						data: {
 							"date": date
@@ -284,18 +217,32 @@
 						},
 					})
 					.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
-
+						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							
 						}

 					}).catch(e => {
@@ -306,7 +253,8 @@
 				console.log('change事件:', e);
 				let ss = e.slice(0, 10)
 				this.timestamp = new Date(ss).getTime()
-				this.getYun(e)
+				this.getXueWei(e)
+				this.getTGDZ(e)
 			},
 		},

@@ -319,7 +267,9 @@
 <style lang="scss" scoped>
 	@import './scss/common.scss';

-	td {}
+	.leftBar{
+		td{font-weight: bold; color: #a84a2d;}
+	}

 	tr.cur {
 		background-color: #f8d4c8;
@@ -327,7 +277,8 @@
 	}

 	.tableTh {
-		font-weight: bold;
+		background-color:#fbd5ca;
+		font-weight: bold;  color: #a84a2d;
 	}

 	.shuHeight {
@@ -356,16 +307,16 @@
 	}

 	table td {
-		border-bottom: 1px solid #999;
-		border-right: 1px solid #999;
+		border-bottom: 1px solid #a84a2d;
+		border-right: 1px solid #a84a2d;
 	}

 	table tr:first-child td {
-		border-top: 1px solid #999;
+		border-top: 1px solid #a84a2d;
 	}

 	table tr td:first-child {
-		border-left: 1px solid #999;
+		border-left: 1px solid #a84a2d;
 	}

 	td {
@@ -406,8 +357,10 @@
 		justify-content: space-between;

 		.yunqi {
-			color: #c06346;
-			line-height: 50rpx;
+			color: #c06346; text-align: center; 
+			text{
+				writing-mode: vertical-rl; line-height:60rpx;font-size: 30rpx;
+			}
 		}
 	}