TianHeJianKang/components/HS/YGSNHS.vue

<template>
	<view class="box">
		<view class="imgBox" v-if='user!=""'>
			<view class="img1Border">
				<!-- 外层红圈 -->
			</view>
			<!-- 底图 -->
			<image class="img1" src="@/static/jieqi/huaShenDi.png" mode=""></image>
			<!-- <image class="img1" :src="user.user_solar_term_img_url" mode=""></image> -->
			<!-- 缺失图 -->
			<image v-if="user!=''" class="img2"
				:style="{transform:`translate(-50%,-50%) rotate(${(jq(user.receive_solar_term_name)*15)+45}deg)`}"
				src="@/static/jieqi/huaShenTouMing.png" mode=""></image>
			<!-- 文本图 -->
			<image class="img3" src="@/static/jieqi/wenBen.png" mode=""></image>
			<!-- 中心花神图 -->
			<view class="texBox" style="font-size: 0;">
				<img style="width:176rpx ;height: 176rpx;" :src="jqImg()" mode=""></img>
			</view>
			<!-- 外圈太阳图列表 -->
			<view class="taiYang" v-for="(v,i) in list" :key="i"
				:style="{transform:`translate(-50%,-50%) rotate(${(jq(v.solar_term_name)*15)+30}deg)`}">
				<!-- 我祝福的部分 -->
				<view class="" v-if="v.user_id===v.noble_person_user_id&&v.is_send_convergence!==0">
					<image v-if="v.pay_num==1" class="img" src="@/static/jieqi/woZhuFu1.png" mode=""></image>
					<image v-else-if="v.pay_num==2" class="img" src="@/static/jieqi/woZhuFu2.png" mode=""></image>
					<image v-else-if="v.pay_num==3" class="img" src="@/static/jieqi/woZhuFu3.png" mode=""></image>
					<image v-else class="img" src="@/static/jieqi/wuZhuFu.png" mode=""></image>
				</view>
				<!-- 贵人祝福的部分 -->
				<view class="" v-if="v.user_id!==v.noble_person_user_id&&v.is_send_convergence!==0">
					<image v-if="v.pay_num==1" class="img" src="@/static/jieqi/guiRen1.png" mode=""></image>
					<image v-else-if="v.pay_num==2" class="img" src="@/static/jieqi/guiRen2.png" mode=""></image>
					<image v-else-if="v.pay_num==3" class="img" src="@/static/jieqi/guiRen3.png" mode=""></image>
					<image v-else class="img" src="@/static/jieqi/guiRen.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="my">
			<view class="" style="display: flex;">
				我的花神
				<view class="">
					<image class="img" src="@/static/jieqi/wuZhuFu.png" mode=""></image>
				</view>
			</view>
			<view class="" style="display: flex;"  v-if="guiRen.length!=0">
				贵人帮助的花神
				<view class="">
					<image class="img" src="@/static/jieqi/guiRen.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
	<!-- 我是贵人 -->
	<view class="guiRenBox" v-if="guiRen.length!=0">
		<view class="guiRnIC">
			贵人
		</view>
			<view class="userBox">
				<view class="">
					<image class="img" :src="guiRen.avatar" mode=""></image>
				</view>
				<view class="name">
					{{HTTP.name(guiRen.user_name)}}
					<view style="display: flex;
							border-radius: 6rpx;
							padding: 0 8rpx;
							margin-top: 4rpx;
							margin-left: 16rpx;
							text-align: center;
							justify-content: center;
							height: 36rpx;
							color: #fff;font-size: 20rpx;line-height: 36rpx;"  :style="jieqiFn(guiRen.solar_term_name,1)">
						<view class="">
							{{guiRen.eight_year}}
						</view>
						<span style="display: inline-block;width: 4rpx;margin: 0 8rpx;;margin-top: 14rpx;
								height: 4rpx;border-radius: 50%;background: #fff;"></span>
						<view class="">
							{{guiRen.solar_term_name}}({{guiRen.flower}})
						</view>
					</view>
				</view>
			</view>
			<!-- 模拟分割线 -->
			<view class="fenGe">
				
			</view>
			<!-- 祝福信息 -->
			<view class="zhuFuTEX">
				祝福了{{guiRen.bless_flower}}
			</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		jieqiFn,
		BASE_URL
	} from '@/config'
	import {
		HTTP
	} from "@/api/http.js"
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app"
	const list = ref([])
	const data = ref('')
	const user = ref('')
	const guiRen=ref("")
	const dataFn = (e) => {
		console.log(e, '数据传来了吗')
		list.value=e.pool_list
		user.value = e.receiveUser
		guiRen.value=e.noble_person
	}
	defineExpose({
		dataFn
	})
	// 获取我的花神列表
	// const userFloraList = async () => {
	// 	let res = await HTTP.HZ.userFloraList({})
	// 	if (res.code == 200) {
	// 		list.value = res.data.list
	// 		data.value = res.data
	// 	} else {
	// 		uni.showToast({
	// 			duration: 2000,
	// 			icon: 'none',
	// 			title: res.msg
	// 		})
	// 	}
	// }

	// const userUserinfo = async () => { //获取个人信息
	// 	let res = await HTTP.MY.userUserinfo({})

	// 	if (res.code == 200) {
	// 		user.value = res.data
	// 		uni.setStorageSync("user", HTTP.jsonf(user.value))
	// 	}
	// 	console.log(res, '我是个人信息啊')
	// }
	// 节气花神
	const jqImg = (e) => {
		let a = `../../../static/jieqi/${jq(user.value.receive_solar_term_name)}.png`
		console.log(a, '////')
		return a
	}

	// 节气图
	const jq = (v) => {
		if (v == "立春") {
			return 1
		}
		if (v == "雨水") {
			return 2
		}
		if (v == "惊蛰") {
			return 3
		}
		if (v == "春分") {
			return 4
		}
		if (v == "清明") {
			return 5
		}
		if (v == "谷雨") {
			return 6
		}
		if (v == "立夏") {
			return 7
		}
		if (v == "小满") {
			return 8
		}
		if (v == "芒种") {
			return 9
		}
		if (v == "夏至") {
			return 10
		}
		if (v == "小暑") {
			return 11
		}
		if (v == "大暑") {
			return 12
		}
		if (v == "立秋") {
			return 13
		}
		if (v == "处暑") {
			return 14
		}
		if (v == "白露") {
			return 15
		}
		if (v == "秋分") {
			return 16
		}
		if (v == "寒露") {
			return 17
		}
		if (v == "霜降") {
			return 18
		}
		if (v == "立冬") {
			return 19
		}
		if (v == "小雪") {
			return 20
		}
		if (v == "大雪") {
			return 21
		}
		if (v == "冬至") {
			return 22
		}
		if (v == "小寒") {
			return 23
		}
		if (v == "大寒") {
			return 24
		}
	}

	// onShow(() => {
	// 	// userFloraList()
	// 	let a = uni.getStorageSync("user")
	// 	if (a) {
	// 		user.value = HTTP.jsonp(a)
	// 	} else {
	// 		userUserinfo()
	// 	}
	// })
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.box {
		width: 686rpx;
		background: #fff;
		border-radius: 16rpx;
		margin: 0 auto;

		.my {
			font-weight: 400;
			font-size: 28rpx;
			color: #353844;
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			.img {
				width: 36rpx;
				height: 36rpx;
				margin-left: 8rpx;
			}
		}
	}

	.imgBox {
		width: 686rpx;
		height: 640rpx;
		background: #fff;
		border-radius: 16rpx;
		text-align: center;
		position: relative;
		margin: 0 auto;
	}

	// 圆盘边框
	.img1Border {
		position: absolute;
		width: 530rpx;
		height: 528rpx;
		z-index: 1;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border: 10rpx solid #CC1312;
		border-radius: 50%;
	}

	// 圆盘
	.img1 {
		position: absolute;
		width: 520rpx;
		height: 520rpx;
		z-index: 1;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.img2 {
		position: absolute;
		top: 50%;
		width: 520rpx;
		height: 520rpx;
		left: 50%;
		// opacity: 0.7;
		// transform: translateX(-50%) rotate(146deg);
		z-index: 2;
	}

	.img3 {
		position: absolute;
		top: 50%;
		width: 520rpx;
		height: 520rpx;
		left: 50%;
		// opacity: 0.7;
		transform: translate(-50%,-50%);
		z-index: 3;
	}

	// 圆盘内的文字
	.texBox {
		position: absolute;
		width: 180rpx;
		height: 180rpx;
		// background: #353844;
		z-index: 3;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}

	//外圈太阳图
	.taiYang {
		position: absolute;
		top: 50%;
		left: 50%;
		// transform: translate(-50%,-50%) rotate(90deg);
		z-index: 10;
		width: 36rpx;
		height: 600rpx;
		font-size: 0;
		// background: #CC1312;
		// display: flex;
		// justify-content: flex-end;

		.img {
			width: 36rpx;
			height: 36rpx;
		}

	}
	// 贵人
	.guiRenBox{
		width: 686rpx;
		// height: 260rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 0 auto;
		margin-top: 20rpx ;
		padding: 32rpx;
		position: relative;
		.guiRnIC{
			position: absolute;
			top: 0;
			right: 0;
			width: 80rpx;
			height: 38rpx;
			background: #FF2424;
			border-radius: 0rpx 16rpx 0rpx 16rpx;
			font-weight: 600;
			font-size: 24rpx;
			color: #FFEA55;
			text-align: center;
			line-height: 38rpx;
		}
		.userBox{
			display: flex;
			.img{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
			.name{
				display: flex;
				font-weight: 600;
				font-size: 28rpx;
				color: #353844;
				padding-top: 20rpx;
				margin-left: 16rpx;
			}
		}
	}
	// 模拟分割
	.fenGe{
		height: 4rpx;
		background: #f5f5f5;
		margin-top: 32rpx;
		margin-bottom: 32rpx;
	}
	.zhuFuTEX{
		font-weight: 400;
		font-size: 28rpx;
		color: #353844;
	}
</style>