menber-center/pages/huiFeiJiaoJiao/huiFeiJiaoJiao.vue

<template>
	<view class="container">
		<view class="info-box">
			<view class="info-item">
				用&nbsp;&nbsp;户&nbsp;名：{{user.name}}
			</view>
			<view class="info-item">
				会籍情况：{{user.isMember ==='1' ? '有效' : '无效' }}
			</view>
			<view class="info-item">
				任职机构：{{user.corpName ?? '无'}}
			</view>
		</view>
		<view class="list-box">
			<view class="list-item-box">
				<view class="list-item">
					年份
				</view>
				<view class="list-item">
					是否缴费
				</view>
				<!-- <view class="list-item">
					会籍情况
				</view> -->
			</view>
			<view class="list-item-box" v-for="(item, index) in listData" :key="index">
				<view class="list-item">
					{{item.year}}
				</view>
				<!-- <view class="list-item">
					{{item.payed ? '是' : '否'}}
				</view> -->
				<view class="list-item">
					<view class="button" :class="[item.payed ? '' : 'error']" @click="onJiaoFei(item)">
						{{item.payed ? '已缴费' : '点击缴费'}}
					</view>
				</view>
			</view>
		</view>
		<view class="desc-box">
			<!-- <rich-text :nodes="explain"></rich-text> -->
			<view class="text" v-html="explain"></view>
			<!-- <mp-html :content="explain" /> -->
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		useAuthStore
	} from '@/store/authStore'

	import {
		list,
		getPersonCastAgree
	} from '@/api/cost.js'
	const authStore = useAuthStore()

	// 用户信息
	const user = ref({
		userIcon: '1',
		name: '某某某',
		corpName: '广州市xx地产有限公司',
		corpRegNo: '123xxxx',
		isMember: null
	})

	const listData = ref([])
	const explain = ref("")
	// const explain = ref(`
	// <p><span style="font-size: 14px;"></span></p><p style="line-height:150%"><span style="font-size: 14px; font-family: arial, helvetica, sans-serif;"><strong><span style="font-size: 14px; line-height: 150%;">会员会费缴交规则：</span></strong></span></p><p style="line-height:150%"><span style="line-height: 150%; font-family: arial, helvetica, sans-serif; font-size: 12px;">根据《广州市房地产中介协会章程》第五十六条，会费标准如下：</span></p><p style="line-height:150%"><span style="text-indent: 32px; font-family: arial, helvetica, sans-serif; font-size: 12px;"><span style="font-size: 12px; font-family: 宋体; text-indent: 32px; text-wrap-mode: wrap;">•&nbsp;</span>副会长单位：50000元/年；</span></p><p style="line-height:150%"><span style="text-indent: 32px; font-family: arial, helvetica, sans-serif; font-size: 12px;"><span style="font-size: 12px; font-family: 宋体; text-indent: 32px; text-wrap-mode: wrap;">•&nbsp;</span>理事单位：10000元/年；</span></p><p style="line-height:150%"><span style="text-indent: 32px; font-family: arial, helvetica, sans-serif; font-size: 12px;"><span style="font-size: 12px; font-family: 宋体; text-indent: 32px; text-wrap-mode: wrap;">•&nbsp;</span>普通会员单位：1000元/年；</span></p><p style="line-height:150%"><span style="text-indent: 32px; font-family: arial, helvetica, sans-serif; font-size: 12px;"><span style="font-size: 12px; font-family: 宋体; text-indent: 32px; text-wrap-mode: wrap;">•&nbsp;</span>个人会员：200元/年/人。</span></p><p><span style="font-family: arial, helvetica, sans-serif; font-size: 12px;">单位会员会籍为每年1月1日至12月31日；</span></p><p><span style="font-family: arial, helvetica, sans-serif; font-size: 12px;">个人会员会籍为每年5月1日至次年4月30日。</span></p><p>&nbsp;&nbsp;&nbsp;&nbsp;</p><p><br/></p>
	// `)

	function onJiaoFei(val) {
		if (val.payed) {
			return
		}
		uni.navigateTo({
			url: `/pages/geRenHuiFeiJiaoJiao/geRenHuiFeiJiaoJiao?year=${val.year}&duePrice=${val.duePrice}`
		})
	}

	onLoad(() => {
		user.value = authStore.userInfo
		list().then(res => {
			if (res && res.code === 0) {
				listData.value = res.data
			}
		})
		getPersonCastAgree().then(res => {
			if (res && res.code === 0) {
				// console.log("个人会费缴交",res.data)
				explain.value = res.data.content
// 				explain.value = `<p>
//     会员会费缴交规则：&nbsp;
// </p>
// <p>
//     根据协会章程，会费标准如下：
// </p>
// <ul class=" list-paddingleft-2">
//     <li>
//         <p>
//             副会长单位：50000元/年；
//         </p>
//     </li>
//     <li>
//         <p>
//             理事单位：10000元/年；
//         </p>
//     </li>
//     <li>
//         <p>
//             普通会员单位：1000元/年；<br/>
//         </p>
//     </li>
//     <li>
//         <p>
//             个人会员：200元/年/人。
//         </p>
//     </li>
// </ul>
// <p>
//     会员会籍为每年1月1日至12月31日。<br/>
// </p>`
			}
		})
	})
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		width: 100vw;
		background: rgb(141, 204, 255);
		background: -moz-linear-gradient(90deg, rgb(141, 204, 255) 10%, rgb(247, 247, 247) 30%);
		background: -webkit-linear-gradient(90deg, rgb(141, 204, 255) 10%, rgb(247, 247, 247) 30%);
		background: -o-linear-gradient(90deg, rgb(141, 204, 255) 10%, rgb(247, 247, 247) 30%);
		background: -ms-linear-gradient(90deg, rgb(141, 204, 255) 10%, rgb(247, 247, 247) 30%);
		background: linear-gradient(180deg, rgb(141, 204, 255) 10%, rgb(247, 247, 247) 30%);

		.info-box {
			margin: 0 20rpx;
			padding: 0 40rpx;
			padding-top: 50rpx;
			margin-bottom: 30rpx;

			.info-item {
				margin-bottom: 10rpx;
				font-size: 28rpx;
				font-weight: bold;
				letter-spacing: 3rpx;
			}
		}

		.list-box {
			margin: 0 20rpx;
			background-color: $uni-bg-color-grey;
			border-radius: $uni-card-border-radius;
			padding: 20rpx 15rpx;
			margin-bottom: 30rpx;

			.list-item-box {
				&:first-child {
					border-bottom: 5rpx solid #E6E6E6;
					font-size: 34rpx;
					font-weight: bold;

					.list-item {
						width: calc(100% / 2);
						text-align: center;

						&:last-child {
							color: #303133;
							font-weight: bold;
						}
					}
				}

				padding: 26rpx 0;
				text-align: center;
				font-size: 32rpx;
				font-weight: bold;
				display: flex;
				align-items: center;

				.list-item {
					width: calc(100% / 2);
					text-align: center;

					&:last-child {
						font-weight: normal;
					}
				}

				.button {
					width: fit-content;
					border-radius: 30rpx;
					color: #303133;
					margin: 0 auto;
					letter-spacing: 2rpx;
					font-size: 28rpx;
				}

				.primary {
					padding: 3px 0px;
					width: 200rpx;
					background-color: #0069f6;
				}
				

				.error {
					padding: 3px 0px;
					width: 200rpx;
					// padding: 5rpx 40rpx;
					color: $uni-text-color-inverse;
					background-color: #fe0000;
				}
			}
		}

		.desc-box {
			margin: 0 20rpx;
			padding-bottom: 30rpx;
			font-weight: bold;
			line-height: 180%;
		}
	}
</style>