<template>
	<view class="container">
		<view class="info-box">
			<view class="info-item-box flex">
				<view class="label">
					机构名称
				</view>
				<view class="text">
					{{ info.name }}
				</view>
			</view>
			<view class="info-item-box flex">
				<view class="label">
					支付项目
				</view>
				<view class="text">
					{{ info.payProject }}
				</view>
			</view>
			<view class="info-item-box flex">
				<view class="label">
					类型
				</view>
				<view class="text">
					{{ info.type }}
				</view>
			</view>
			<view class="info-item-box flex">
				<view class="label">
					年份
				</view>
				<view class="text">
					{{ info.year }}年
				</view>
			</view>
			<view class="info-item-box flex">
				<view class="label">
					金额
				</view>
				<view class="text">
					{{ info.price }}元
				</view>
			</view>
			<view class="info-item-box flex">
				<view class="label">
					会籍有效期
				</view>
				<view class="text">
					{{ info.periodOfValidity }}
				</view>
			</view>
			<view class="info-item-box row">
				<view class="label">
					描述:
				</view>
				<view class="text" v-html="info.remark"></view>
			</view>
		</view>
		<view class="bottom-box">
			<u-button type="error" shape="circle" @click="onSubmit">支付</u-button>
		</view>
	</view>
</template>
<script setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	
	const id = ref()
	
	const info = ref({
		name: '某某某机构', // 机构名称
		payProject: '2024年度普通会员单位会费', // 支付项目
		type: '普通会员单位会费', // 类型
		year: '2024', // 年份
		price: '1000', // 金额
		periodOfValidity: '2024.1.1-2024.12.31',
		remark: '根据《协会章程》规定，会费标准如下:<br/>1、副会长单位:50000元/年;<br/>2、常务理事及理事单位:10000元/年;<br/>3、普通会员单位:1000元/年;单位会员会籍为每年1月1日至12月31日。<br/>会员可享受以下权利:<br/>1、协会的选举权、被选举权和表决权;<br/>2、优先参加协会组织开展的各类活动;<br/>3、获得协会服务的优先权;<br/>4、对协会工作的批评建议权和监督权;<br/>5、请求协会维护合法权益;<br/>6、入会自愿、退会自由。'
	})
	
	function onSubmit() {
		console.log('点击缴费');
	}
	
	onLoad((load) => {
		id.value = load.id
	})
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		width: 100vw;
		background-color: $uni-bg-color;
		padding: 20rpx;
		.info-box {
			padding: 30rpx;
			background-color: $uni-bg-color-grey;
			border-radius: $uni-card-border-radius;
			.info-item-box {
				font-size: $uni-title-font-size-2;
				border-bottom: 1rpx solid #E6E6E6;
				height: 82rpx;
				.label {
					font-weight: bold;
				}
			}
			.flex {
				display: flex;
				align-items: center;
				.label {
					width: 30%;
				}
				.text {
					width: 70%;
				}
			}
			.row {
				.label {
					line-height: 62rpx;
				}
				.text {
					line-height: 42rpx;
					font-size: $uni-title-font-size-3;
					font-weight: bold;
				}
			}
		}
	
		.bottom-box {
			padding: 20rpx;
			
			position: absolute;
			bottom: 50rpx;
			width: 95%;
		}
	}
</style>