new-zx-front-app/sheep/components/s-wallet-card/s-wallet-card.vue

<!-- 装修用户组件：用户资产 -->
<template>
	<view>
		<view class="progress-box" @tap="state.showProtocol = true">
			<view class="progress-container">
				<view class="progress-bar" :style="{ width: progressWidth }">
				</view>
				<view class="progress-text">
					{{userWallet.socialStatusLevel || "无等级"}}
				</view>

			</view>
		</view>
		<!-- <view class="ss-wallet-menu-wrap ss-flex ss-col-center">
			<view class="menu-item ss-flex-1 ss-flex-col  ss-col-center">
				<view class="value-box ">
					<view class="value-text ">看点</view>
				</view>
				<view class="menu-title ss-m-t-15">*888</view>
				<view class="menu-title ss-m-t-15">看广告做任务得收益</view>
			</view>
			<view class="menu-item ss-flex-1 ss-flex-col  ss-col-center"
				@tap="sheep.$router.go('/pages/user/wallet/score')">
				<view class="value-box ">
					<view class="value-text">积分</view>
				</view>
				<view class="menu-title ss-m-t-15">#{{ userInfo.point || 0 }}</view>
				<view class="menu-title ss-m-t-15">=数字人民币:7263</view>
				注释 <view class="menu-title ss-m-t-15">=NFR(数字资产):87263</view> 
				<view class="menu-mini-title ss-m-t-15">[按32小时市场均值实时换算]</view>
			</view>
			<view class="menu-item ss-flex-1 ss-flex-col  ss-col-center"
				@tap="sheep.$router.go('/pages/user/wallet/team')">
				<view class="value-box ">
					<view class="value-text">团队</view>
				</view>
				<view class="menu-title ss-m-t-15">88人</view>
				<view class="menu-title ss-m-t-15">直推人今日贡献#92</view>
				<view class="menu-title ss-m-t-15">直推人总贡献值#7692</view>
			</view>
			<view class="menu-item ss-flex-col  ss-col-center menu-wallet">
				<view class="value-box ">
					<view class="value-text">NFR</view>
				</view>
				<view class="menu-title ss-m-t-15">8734枚</view>
				<view class="menu-title ss-m-t-15">历史转换数量</view>
				<view class="menu-title ss-m-t-15">点击跳转查看行情</view>
			</view>
		</view> -->

		<view class="ss-wallet-menu-wrap ss-flex ss-col-center">
			<view class="menu-item ss-flex-1 ss-flex-col  ss-col-center ss-row-center"
				@tap="sheep.$router.go('/pages/user/wallet/score')">
				<view class="value-box ">
					<view class="value-text">数字<br/>权益</view>
				</view>
				<view class="menu-title  ss-m-t-15">可用:{{ points2point(userWallet.integralDO.currentQuota)  }}</view>
				<view class="menu-title ss-m-t-15">待确权:{{ points2point(userWallet.integralDO.freezeQuota)  }}</view>
			</view>
			<view class="menu-item ss-flex-1 ss-flex-col  ss-col-center ss-row-center"
				@tap="sheep.$router.go('/pages/user/wallet/team')">
				<view class="value-box ">
					<view class="value-text">团队</view>
				</view>

				<view class="menu-title ss-m-t-15">{{ userWallet.descNo  }}人</view>
			</view>

		</view>

		<!-- 积分确权 -->
		<su-popup :show="state.showProtocol" type="center" round="10" :isMaskClick="false" showClose @close="close">
			<view class="head-nav">
				<view :class="state.navIndex==0?'activite':''" class="ss-m-l-20" @click="checkIndex(0)">
					身价产生规则
				</view>
				<view :class="state.navIndex==1?'activite':''" class="ss-m-l-20" @click="checkIndex(1)">
					身价权益
				</view>
			</view>
			<scroll-view class="scroll-view_H" scroll-y="true">
				<richtext title="身价产生规则" v-if="state.navIndex==0" type='tab' />
				<richtext title="身价权益" v-if="state.navIndex==1" type='tab' />
			</scroll-view>
		</su-popup>
	</view>
</template>

<script setup>
	/**
	 * 装修组件 - 订单菜单组
	 */
	import {
		computed,
		reactive
	} from 'vue';
	import sheep from '@/sheep';
	import {
		fen2yuan,
		points2point
	} from '../../hooks/useGoods';
	import richtext from '@/pages/public/richtext'


	const state = reactive({
		showProtocol: false,
		navIndex: 0
	})
	const userWallet = computed(() => sheep.$store('user').userWallet);
	const userInfo = computed(() => sheep.$store('user').userInfo);
	const numData = computed(() => sheep.$store('user').numData);
	const progressWidth = computed(() => {
		if (!userWallet.value.socialStatusPoint && !userWallet.value.socialStatusPoint){
			return "0%"
		}
		const progress = ((userWallet.value.socialStatusPoint / (userWallet.value.socialStatusPoint +
		userWallet.value.socialUpNeed)) * 100) + "%"
		// console.log(progress)
		return progress
	})

	// 查看协议
	function onProtocol(title) {
		sheep.$router.go('/pages/public/richtext', {
			title,
		});
	}
	const close = () => {
		state.showProtocol = false
	}

	function checkIndex(index) {
		state.navIndex = index;
	}
</script>

<style lang="scss" scoped>
	.head-nav {
		margin: 20rpx auto;
		display: flex;
		align-items: center;
		color: #CCCCCC;

	}

	.activite {
		box-sizing: border-box;
		color: rgb(14, 147, 46);
		border-bottom: 4rpx solid rgb(14, 147, 46);
	}

	.head-nav>view {
		padding-bottom: 10rpx;
	}

	.content {
		/* background: #008000; */
		height: 100%;
	}

	.scroll-view_H {
		width: 600rpx;
		height: 700rpx;
		padding: 20rpx;
	}

	.progress-box {
		padding: 40rpx 40rpx 0;
	}

	/* 进度条容器 */
	.progress-container {
		width: 100%;
		/* 全宽 */
		height: 40rpx;
		/* 高度 */
		background-color: #e0e0e0;
		/* 背景色 */
		border-radius: 20rpx;
		/* 圆角 */
		position: relative;
		/* 相对定位，用于文本定位 */

	}

	/* 进度条 */
	.progress-bar {
		height: 100%;
		background: rgb(14, 147, 46);
		/* 渐变色 */
		border-radius: 20rpx;
		/* 圆角 */
		position: relative;
		/* 相对定位，用于文本定位 */
		display: flex;
		/* 开启 Flex 布局 */
		align-items: center;
		/* 垂直居中 */
		justify-content: center;
		/* 水平居中 */
	}

	/* 进度文本 */
	.progress-text {
		color: white;
		font-size: 16px;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.ss-wallet-menu-wrap {
		flex-wrap: wrap;
		height: auto;
		padding: 40rpx;

		.menu-wallet {
			width: 144rpx;
		}

		// .menu-item:nth-child(1),
		// .menu-item:nth-child(2) {
		// 	border-bottom: 4rpx solid #f6f6f6;
		// }

		.menu-item:nth-child(odd) {
			border-right: 4rpx solid #f6f6f6;
		}

		.menu-item {
			height: 300rpx;
			flex: 0 0 50%;
			/* flex-grow: 0, flex-shrink: 0, flex-basis: 50% */
			box-sizing: border-box;
			padding: 20rpx;

			/* 确保 padding 和 border 不会使元素宽度超过 50% */
			/* 可选，为了视觉效果 */
			.menu-title {
				font-size: 32rpx;
				line-height: 32rpx;
				color: #333333;
			}

			/* 可选，为了视觉效果 */
			.menu-mini-title {
				font-size: 20rpx;
				line-height: 20rpx;
				color: #333333;
			}

			.item-icon {
				width: 44rpx;
				height: 44rpx;
			}

			.value-box {
				width: 120rpx;
				height: 120rpx;
				// line-height: 100rpx;
				text-align: center;
				border-radius: 50%;
				border: 2px solid #f6f6f6;
				display:flex;
				align-items: center;
				justify-content: center;
				.value-text {
					font-size: 28rpx;
					color: #000000;
					// line-height: 100rpx;
					vertical-align: text-bottom;
					font-family: OPPOSANS;
				}

				.unit-text {
					font-size: 24rpx;
					color: #343434;
					line-height: 24rpx;
				}
			}
		}
	}
</style>