feiniao-youwei-uniapp/pages/tabBar/tree/components/memberLevel.vue

<template>
	<view class="member-level">
		<!-- 用户会员信息 -->
		<view class="user-wrap">
			<view class="user-info">
				<up-image class="avatar" :fade="false" :src="userLevel.icon" width="96rpx" height="96rpx"
					shape="circle"></up-image>
				<view class="level-wrap">
					<text class="name">V{{userLevel.id}} {{levelStr[userLevel.id]}}守护</text>
					<view class="progress-wrap">
						<view class="progress-value">
							<view class="total" :style="{ width: calcWidth(userLevel.energy,userLevel.energyMax+1) }"></view>
						</view>
						<view class="progress-score">
							<text class="cur-val">{{ userLevel.energy }}</text>/{{ userLevel.energyMax + 1 }}分
						</view>
					</view>
					<view class="level-desc">
						再累计能量 <text class="level-text">{{ userLevel.diffLevelEnergy }}分 </text>即可升级到
						{{levelStr[Number(userLevel.id) + 1]}}等级
					</view>
				</view>
			</view>
			<slot></slot>
		</view>
		<!-- 树信息 -->
		<view class="tree-info">
			<view class="info-text">
				<template v-if="treeData.farmName && treeData.farmName.length > 5">
					<view>{{treeData.farmName.slice(0,4)}}</view>
					<text>{{treeData.farmName.slice(4)}}</text>
				</template>
				<view v-else>{{treeData.farmName}}</view>
			</view>
			<view class="info-text">
				<view>{{treeData.age}}年{{ treeData.age > 9 ? "老树" : "树龄" }}</view>
				<text class="text">{{ treeData.pz }}</text>
			</view>
			<view class="info-text">
				<view>{{treeData.phenologyName}}</view>
				<text class="text">气候适宜-{{ treeData.howTxt || "果园采摘" }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import TREE from '@/api/tree.js'
	import {
		ref,
		watch
	} from "vue";

	const props = defineProps({
		treeData: {
			type: Object,
			defalut: {},
		},
	});
	
	function calcWidth(energy,energyMax){
	    let total = (energy / energyMax) * 100
	    if(total>100){
	        total = 100
	    }
	    return total + '%'
	}

	const levelStr = {
		0: "平民",
		1: "青铜",
		2: "白银",
		3: "赤金",
		4: "星勋",
	};

	const userLevel = ref({})
	watch(
		() => props.treeData,
		(newValue) => {
			userLevel.value = {
				...newValue.buyList[0].level,
				energy: newValue.buyList[0].energy,
				icon: newValue.buyList[0].icon
			}
		}
	);
</script>

<style lang="scss" scoped>
	@import "@/static/style/mixin.scss";

	.member-level {
		position: relative;
		&::before{
			content: '';
			position: absolute;
			top: -20rpx;
			width: 100%;
			height: 474rpx;
			background-image: linear-gradient(180deg,#008DFD,transparent);
		}
		.user-wrap {
			display: flex;
			border-radius: 70rpx 0 0 70rpx;
			padding: 16rpx 20rpx;
			margin: 0 0 10rpx 24rpx;
			position: relative;
			width: calc(100% - 24rpx);
			box-sizing: border-box;
			backdrop-filter: blur(14rpx);
			background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.4), transparent);

			.user-info {
				width: 100%;
				display: flex;

				.avatar {
					border: 2rpx solid #fff;
					border-radius: 50%;
				}

				.level-wrap {
					line-height: 32rpx;
					width: 55%;
					margin-left: 20rpx;

					.name {
						color: #fff;
						font-family: 'PangMenZhengDao';
					}

					.progress-wrap {
						font-size: 20rpx;
						color: rgba(0, 0, 0, 0.8);
						display: flex;
						align-items: center;
						justify-content: space-between;

						.progress-value {
							width: calc(100% - 140rpx);
							height: 16rpx;
							background: #E7E7E7;
							border-radius: 40rpx;
							border: 2rpx solid #fff;

							.total {
								width: 80%;
								height: 100%;
								border-radius: 20rpx;
								background-image: linear-gradient(120deg, #FDE492, #FB9C03);
							}
						}

						.cur-val {
							font-size: 26rpx;
							font-weight: 500;
							color: #fff;
						}
					}

					.level-desc {
						font-size: 20rpx;
						color: rgba(0, 0, 0, 0.84);

						.level-text {
							color: #fff;
						}
					}
				}
			}
		}

		.tree-info {
			width: 95%;
			height: 160rpx;
			box-sizing: border-box;
			padding: 0 50rpx 20rpx;
			@include ossBg("treePage/tree-info-bg.png");
			display: flex;
			justify-content: space-around;
			align-items: center;
			font-size: 28rpx;
			font-weight: 500;
			margin: auto;
			position: relative;
			z-index: 2;

			.info-text {
				text-align: center;
				line-height: 32rpx;
				font-family: 'SMILEYSANS';
				position: relative;

				.text {
					font-size: 22rpx;
				}
			}

			.info-text+.info-text {
				&::before {
					content: '';
					position: absolute;
					left: -34rpx;
					top: 14rpx;
					width: 1rpx;
					height: 38rpx;
					background: rgba(0, 0, 0, 0.26);
				}
			}
		}
	}
</style>