baozhida-figure-platter/pages/index/index.vue

<template>
	<view class="content">
		<view class="notice_box">
			<u-notice-bar :text="text1" duration="7000" color="#000000" bgColor="#ffffff"></u-notice-bar>
		</view>
		<view class="box_platter">
			<input class="ter_input" :value="input" type="text" placeholder="请输入姓名" />
			<view class="tabs_card_ter">
				<x-tabs :current="current" :list="genderList" @change="change($event,1)"></x-tabs>
				<x-tabs :current="current1" :list="genderList1" @change="change($event,2)"></x-tabs>
			</view>
			<view class="box_date">{{solarTime}}</view>
			<view class="box_date">未知地区-即北京时间</view>
			<view class="space_between" style="margin-top: 20rpx;">
				<view class="same_row_in title_time">
					<span>真太阳时:</span>
					<span>{{solarTime}}</span>
				</view>
				<view class="same_row_in title_time">
					<span class="save_title">保存</span>
					<u-switch v-model="saveSummer" activeColor="#b2955d" inactiveColor="#e9e9eb" size="18"></u-switch>
				</view>
			</view>
			<view class="same_row_in title_time" style="margin-top: 10rpx;">
				<span>地址经纬:</span>
				<span>北纬39.93 东经116.42</span>
			</view>
			<view style="margin-top: 10rpx;">
				<span class="name_title">分类:</span>
			</view>
			<view class="same_row_in box_clock">
				<x-clock :size="160" :showSecond="true"></x-clock>
				<view class="card_clock_box">
					<view class="card_prin">
						<view class="cipal_box_flexil" v-for="(item,index) in principal" :key="index">
							{{item}}
						</view>
					</view>
					<view class="title_time marginTop_10">农历:2025年二月初一 巳时</view>
					<view class="title_time marginTop_10">公历:2025-02-28 09:55:34</view>
				</view>
			</view>
			<view class="btn_ter center_in" @click="getStartPlatting">开始排盘</view>
			<!-- <calendar :current="current1" @change="change($event,2)"></calendar> -->
		</view>
		<u-popup :show="timeShow" :round="10" closeOnClickOverlay @close="close">
			<view class="card_calendar">
				<calendar :current="current1" :principal="principal" :subpost="subpost" @cloudy="cloudy"
					@change="change($event,2)">
				</calendar>
			</view>
			<view class="card_four" v-if="eraData.length > 0 && eraFlag">
				<view class="card_column">
					<view class="card_era_ial">
						<view class="era_item center_in" :class="item == currentEra?'activate_title':''"
							v-for="(item,index) in eraData" :key="index" @click="selectEra(item,index)">
							{{item}}
						</view>
					</view>
					<!-- 90rpx 260rpx 440rpx 620rpx-->
					<view class="arrows_box" :style="{left: arrowLeft}"></view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import calendar from './components/calendar.vue';
	export default {
		components: {
			calendar
		},
		data() {
			return {
				timeShow: false,
				input: '',
				current: '男',
				genderList: [{
					type: '男',
					title: '男',
				}, {
					type: '女',
					title: '女',
				}],
				current1: 'solar',
				genderList1: [{
					type: 'solar',
					title: '公历',
				}, {
					type: 'lunar',
					title: '农历',
				}, {
					type: 'four',
					title: '四柱',
				}],
				currentEra: '',
				eraFlag: false,
				eraData: [],
				eraData1: ['甲', '乙', '丙', '丁', '戊', '己', '庚', '辛', '壬', '癸'],
				eraData2: ['子', '寅', '辰', '午', '申', '戌'],
				eraData3: ['丑', '卯', '巳', '未', '酉', '亥'],
				principal: ['甲', '乙', '丙', '丁', '子', '丑', '寅', '卯'],
				currentland: 0,
				subpost: [],
				arrowLeft: '90rpx',
				text1: 'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用',
				solarTime: '1990年10月10日 10:30',
				saveSummer: true,
			}
		},
		onLoad() {

		},
		methods: {
			change(event, type) {
				if (type == 1) {
					this.current = event.type
				}
				if (type == 2) {
					uni.hideTabBar()
					this.timeShow = true
					this.current1 = event.type
					if(event.type != 'four'){
						this.eraFlag = false
					}
				}
			},
			// 选择
			cloudy(event, index) {
				this.currentland = index
				if (index == 0 || index == 4) {
					this.arrowLeft = '90rpx'
				} else if (index == 1 || index == 5) {
					this.arrowLeft = '260rpx'
				} else if (index == 2 || index == 6) {
					this.arrowLeft = '440rpx'
				} else if (index == 3 || index == 7) {
					this.arrowLeft = '620rpx'
				}
				if (index < 4) {
					this.eraFlag = true
					this.eraData = this.eraData1
				} else {
					var num = index - 4
					var title = this.principal[num]
					var array1 = ['甲', '丙', '戊', '庚', '壬']
					var array2 = ['乙', '丁', '己', '辛', '癸']
					var flag = array1.includes(title)
					var flag1 = array2.includes(title)
					if (flag) {
						this.eraData = this.eraData2
					}
					if (flag1) {
						this.eraData = this.eraData3
					}
					this.eraFlag = true
				}
				this.currentEra = event
			},
			// 选择天干地支
			selectEra(event, index) {
				this.$set(this.principal, this.currentland, event);
				this.$set(this.subpost, this.currentland, event);
				let num = 0
				if (this.currentland < 4) {
					num = this.currentland + 4
				} else {
					num = this.currentland - 3
				}
				if (this.currentland == 7) {
					this.eraFlag = false
				} else {
					this.cloudy(event, num)
				}
			},
			getStartPlatting(){
				uni.navigateTo({
					url: '/pages/index/horoscope'
				})
			},
			close() {
				setTimeout(() => {
					uni.showTabBar()
				}, 100)
				this.timeShow = false
			}
		}
	}
</script>

<style>
	.notice_box {
		width: calc(100% - 40rpx);
		padding: 20rpx;
	}

	.box_platter {
		margin: 0rpx 20rpx 20rpx 20rpx;
		padding: 50rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.ter_input {
		padding-bottom: 10rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.tabs_card_ter {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}

	.btn_ter {
		margin-top: 30rpx;
		width: 100%;
		padding: 26rpx 0rpx;
		border-radius: 50rpx;
		background-color: rgba(1, 1, 1, 1);
		color: rgba(213, 189, 157, 1);
	}

	.card_calendar {
		padding: 30rpx;
		// #ifdef APP-PLUS || MP-WEIXIN
		padding-bottom: 0 !important;
		padding-bottom: constant(safe-area-inset-bottom) !important;
		padding-bottom: env(safe-area-inset-bottom) !important;
		// #endif
	}

	.card_four {
		position: absolute;
		top: -60rpx;
		width: 100%;
		height: auto;
	}

	.card_column {
		position: absolute;
		bottom: 0;
		width: calc(100% - 40rpx);
		height: auto;
		border-radius: 20rpx;
		background-color: #fff;
		padding: 20rpx;
	}

	.card_era_ial {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.era_item {
		color: #a3a3a3;
		font-size: 46rpx;
		width: 140rpx;
		padding: 10rpx 0rpx;
		border-radius: 40rpx;
	}

	.activate_title {
		color: #fff;
		background-color: #b2955d;
	}

	.arrows_box {
		position: absolute;
		bottom: -54rpx;
		border: 24rpx solid transparent;
		border-top: 36rpx solid #ffffff;
	}

	.box_date {
		font-size: 30rpx;
		padding: 20rpx 10rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.title_time {
		font-size: 22rpx;
		color: #9e9e9e;
	}

	.save_title {
		color: #333333;
		font-size: 28rpx;
		margin-right: 10rpx;
	}

	.marginTop_10 {
		margin-top: 10rpx;
	}

	.name_title {
		color: #333;
		margin-right: 10rpx;
		font-size: 30rpx;
	}

	.box_clock {
		padding: 20rpx 0rpx;
	}

	.card_clock_box {
		margin-left: 40rpx;
	}

	.card_prin {
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.cipal_box_flexil {
		flex: 0 0 25%;
		font-size: 32rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
</style>