tourism/uni_applet/pageA/cxTable.vue

<template>
	<view class="content">
		<image src="https://taohaoliang.oss-cn-beijing.aliyuncs.com/chaoxi.png" mode="" style="width: 100vw;height: 100vh;"></image>
		<view class="table">
			<view class="row" v-for="(item,index) in tableList" :class="item.check?'row-active':''">
				<image src="../static/image/today.png" mode="widthFix" v-if="item.check" style="width: 34rpx;position: absolute;left: 5px;height: auto;"></image>
				<view class="col1 color">
					{{item.name}}
				</view>
				<view class="col2 col">
					{{item.val1}}
				</view>
				<view class="col3 col">
					{{item.val2}}
				</view>
				<view class="col4 col">
					{{item.val3}}
				</view>
				<view class="col5 col">
					{{item.val4}}
				</view>
			</view>
			<view class="bottom">
				<view class="title">
					热门赶海地点推荐:
				</view>
				<view class="text">
					白沙湾黄金海岸、仙人岛海域、金沙滩、望海寨龟石滩、山海广场
				</view>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShowStyle:false,
				tableList: [{
						name: '日期/时间',
						val1: '涨潮',
						val2: '落潮',
						val3: '涨潮',
						val4: '落潮',
						check:false,
					},
					{
						name: '初一/十六',
						val1: '5:44',
						val2: '11:44',
						val3: '17:44',
						val4: '23:44',
						check:false,
					}, {
						name: '初二/十七',
						val1: '6:32',
						val2: '12:32',
						val3: '18:32',
						val4: '24:32',
						check:false,
					}, {
						name: '初三/十八',
						val1: '7:20',
						val2: '12:20',
						val3: '19:20',
						val4: '1:20',
						check:false,
					}, {
						name: '初四/十九',
						val1: '8:08',
						val2: '14:08',
						val3: '20:08',
						val4: '2:08',
						check:false,
					}, {
						name: '初五/二十',
						val1: '8:56',
						val2: '14:56',
						val3: '20:56',
						val4: '2:56',
						check:false,
					}, {
						name: '初六/廿一',
						val1: '9:44',
						val2: '15:44',
						val3: '21:44',
						val4: '3:44',
						check:false,
					}, {
						name: '初七/廿二',
						val1: '10:32',
						val2: '16:32',
						val3: '22:32',
						val4: '4:32',
						check:false,
					}, {
						name: '初八/廿三',
						val1: '11:20',
						val2: '17:20',
						val3: '23:20',
						val4: '5:20',
						check:false,
					}, {
						name: '初九/廿四',
						val1: '12:08',
						val2: '18:08',
						val3: '0:08',
						val4: '6:08',
						check:false,
					}, {
						name: '初十/廿五',
						val1: '12:56',
						val2: '18:56',
						val3: '0:56',
						val4: '6:56',
						check:false,
					}, {
						name: '十一/廿六',
						val1: '13:44',
						val2: '19:44',
						val3: '1:44',
						val4: '7:44',
						check:false,
					}, {
						name: '十二/廿七',
						val1: '14:32',
						val2: '20:32',
						val3: '2:32',
						val4: '8:32',
						check:false,
					}, {
						name: '十三/廿八',
						val1: '15:20',
						val2: '21:20',
						val3: '3:20',
						val4: '9:20',
						check:false,
					}, {
						name: '十四/廿九',
						val1: '16:08',
						val2: '22:08',
						val3: '4:08',
						val4: '10:08',
						check:false,
					}, {
						name: '十五/三十',
						val1: '17:56',
						val2: '23:56',
						val3: '5:56',
						val4: '10:56',
						check:false,
					}
				],
				day:''
			}
		},
		onLoad() {
			this.getLunar()
		},
		methods: {
			setRowColor(){
				for(let i = 1;i<this.tableList.length;i++){
					this.tableList[i].false
					let _array = this.tableList[i].name.split("/")
					if(this.day==_array[0]||this.day==_array[1]){
						this.tableList[i+1].check = true
					}
				}
			},
			getLunar(){
				let that = this
				var nyear;
				var nmonth;
				var nday = -1;
				var nwday;
				var nhrs;
				var nmin;
				var nsec;
				var lmonth, lday, lleap; //农历参数
				function Draw() {
					NewTick();
					
					//显示时间
					var s = nyear + '年' + nmonth + '月' + nday + '日 ' + '星期' + cweekday(nwday) + ' ' + shapetime(nhrs, nmin, nsec);
					s += " 农历" + lmonth + "月" + lday; //农历
					 that.day= lday;
					//需要展示在页面地方
					console.log("农历日期---",that.day);
					that.setRowColor()
					
				}
				function NewTick() {
					let noww = new Date();
					if (noww.getDate() != nday) {
						nyear = noww.getFullYear();
						nmonth = noww.getMonth() + 1;
						nwday = noww.getDay();
						nday = noww.getDate();
						getlunar(); //获取农历
					}
					nhrs = noww.getHours();
					nmin = noww.getMinutes();
					nsec = noww.getSeconds();
				}
				
				
				//辅助函数
				var hzWeek = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日");
				function cweekday(wday) {
					console.log('星期---',hzWeek[wday]);
				}
				function shapetime(vhrs, vmin, vsec) {
					if (vsec <= 9) vsec = "0" + vsec;
					if (vmin <= 9) vmin = "0" + vmin;
					if (vhrs <= 9) vhrs = "0" + vhrs;
					// return vhrs + ":" + vmin + ":" + vsec
					console.log("时间日期---",vhrs + ":" + vmin + ":" + vsec);
				}
				
				//阴历函数开始
				var lunarInfo = new Array(0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, 0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977, 0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, 0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, 0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, 0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, 0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, 0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, 0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, 0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x05ac0, 0x0ab60, 0x096d5, 0x092e0, //1990
					0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, 0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, 0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, 0x05aa0, 0x076a3, 0x096d0, 0x04bd7, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, 0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, 0x14b63);
				function lYearDays(y) {
					var i, sum = 348;
					for (i = 0x8000; i > 0x8; i >>= 1) sum += (lunarInfo[y - 1900] & i) ? 1 : 0;
					return (sum + leapDays(y));
				}
				function leapDays(y) {
					if (leapMonth(y)) return ((lunarInfo[y - 1900] & 0x10000) ? 30 : 29);
					else return (0);
				}
				function leapMonth(y) {
					return (lunarInfo[y - 1900] & 0xf);
				}
				function monthDays(y, m) {
					return ((lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29);
				}
				function Lunar(y, m, d) {
					var i, leap = 0,
						temp = 0;
					var offset = (Date.UTC(y, m, d) - Date.UTC(1900, 0, 31)) / 86400000;
					for (i = 1900; i < 2050 && offset > 0; i++) {
						temp = lYearDays(i);
						offset -= temp;
					}
					if (offset < 0) {
						offset += temp;
						i--;
					}
					this.year = i;
					leap = leapMonth(i);
					this.isLeap = false;
					for (i = 1; i < 13 && offset > 0; i++) {
						if (leap > 0 && i == (leap + 1) && this.isLeap == false) {--i;
							this.isLeap = true;
							temp = leapDays(this.year);
						} else {
							temp = monthDays(this.year, i);
						}
						if (this.isLeap == true && i == (leap + 1)) this.isLeap = false;
						offset -= temp;
					}
					if (offset == 0 && leap > 0 && i == leap + 1) if (this.isLeap) {
						this.isLeap = false;
					} else {
						this.isLeap = true; --i;
					}
					if (offset < 0) {
						offset += temp; --i;
					}
					this.month = i;
					this.day = offset + 1;
				}
				var nStr1 = new Array('', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二');
				var nStr2 = new Array('初', '十', '廿', '卅', '□');
				function GetcDay(d) {
					var s;
					switch (d) {
						case 10:
							s = '初十';
							break;
						case 20:
							s = '二十';
							break;
						case 30:
							s = '三十';
							break;
						default:
							s = nStr2[Math.floor(d / 10)];
							s += nStr1[d % 10];
							break;
					}
					return (s);
				}
				function GetcMon(m) {
					if (m == 1) return '正';
					else return nStr1[m];
				}
				function getlunar() {
					var lObj = new Lunar(nyear, nmonth - 1, nday);
					lmonth = GetcMon(lObj.month);
					lday = GetcDay(lObj.day);
					lleap = lObj.isLeap;
					if (lleap == 1) {
						lmonth = "闰" + lmonth;
					}
				}
				//阴历函数结束
				Draw();
			},

		}
	}
</script>

<style scoped lang="scss">
	.content {
		position: relative;
		overflow: hidden;
		height: 100vh;

		.table {
			position: absolute;
			top: 200rpx;
			padding: 20rpx 0;
			width: 90%;
			right: 0;
			left: 0;
			margin: auto;

			.row {
				display: flex;
				justify-content: space-around;
				align-items: center;
				.col1 {
					width: 40%;
					display: flex;
					justify-content: center;
				}
				.col{
					width: 20%;
					display: flex;
					justify-content: center;
				}
			}
			.row:nth-of-type(2n){
				    background: rgba(255, 255, 255, 0.6);
				    padding: 8rpx 0;
			}
			.row:nth-of-type(2n+1){
				       background: rgba(214, 214, 214, 0.7);
				       padding: 8rpx 0;
			}
			.row:nth-of-type(1){
				     padding: 16rpx 0;
					 font-weight: bold;
			}
		}
		.row-active{
			background: #92b8f1!important;
		}
		.bottom{
			margin-top: 50rpx;
			background: rgba(255, 255, 255, 0.7);
			    padding: 20rpx;
			   box-shadow: 2px 3px 3px 1px rgba(187, 187, 187, 0.4);
			    border-radius: 20rpx;
			.title{
				font-size: 38rpx;
				    margin-bottom: 10rpx;
				    font-weight: bold;
				
			}
			.text{
				font-size: 32rpx;
			}
		}
		
	}
</style>