展开个人会费缴交

pages.json

@@ -274,6 +274,17 @@
 					"titleNView": true
 				}
 			}
+		},
+		{
+			"path" : "pages/geRenHuiFeiJiaoJiao/geRenHuiFeiJiaoJiao",
+			"style" : 
+			{
+				"navigationBarTitleText" : "个人会费缴交",
+				"enablePullDownRefresh": false,
+				"app-plus": {
+					"titleNView": true
+				}
+			}
 		}
 	],
 	"globalStyle": {

pages/geRenHuiFeiJiaoJiao/geRenHuiFeiJiaoJiao.vue

@@ -0,0 +1,36 @@
+<template>
+	<view class="container">
+		<view class="info-box">
+			
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import { ref } from 'vue'
+	import { onLoad } from '@dcloudio/uni-app'
+	
+	const id = ref()
+	
+	const info = ref({
+		username: '某某某',
+		payProject: '2024年度个人会费',
+		type: '个人会费',
+		year: '2024年',
+		price: '200',
+		time: '2024.05.1-2025.4.30'
+	})
+	
+	onLoad((load) => {
+		id.value = load.id
+	})
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		height: 100vh;
+		width: 100vw;
+		background-color: $uni-bg-color;
+		padding: 0 20rpx;
+	}
+</style>

pages/huiFeiJiaoJiao/huiFeiJiaoJiao.vue

@@ -35,7 +35,7 @@
 				</view>
 				<view class="list-item" v-html="item.status ? '完成学分' : '学分未达标,<br/>不能申请年检'"></view>
 				<view class="list-item">
-					<view class="button" :class="[item.isPay ? 'primary' : 'error']">
+					<view class="button" :class="[item.isPay ? 'primary' : 'error']" @click="onJiaoFei(item)">
 						{{item.isPay ? '已缴费' : '未缴，点击缴费'}}
 					</view>
 				</view>
@@ -120,6 +120,14 @@
 			isPay: 0
 		},
 	])
+	function onJiaoFei(val) {
+		if (val.isPay) {
+			return
+		}
+		uni.navigateTo({
+			url: `/pages/geRenHuiFeiJiaoJiao/geRenHuiFeiJiaoJiao?id=${val.id}`
+		})
+	}
 	
 	onLoad(() => {
 		console.log('onLoad')
@@ -212,7 +220,6 @@
 				display: flex;
 				align-items: center;
 				font-size: $uni-font-size-2;
-				line-height: 50rpx;
 				&:before {
 					content: '•';
 					font-size: 50rpx;

uni.scss

@@ -119,10 +119,13 @@ $uni-card-border-radius: 20rpx;
 	z-index: 999;
 }
 
-// 底部悬停
-@mixin bottomMagnet($height) {
-	position: sticky;
-	top: calc(100vw - $height);
-	z-index: 999;
+/**
+ * 底部悬停
+ * 使用该样式，会使元素脱离文档高度，致使出现内容被遮挡。需在其同层条件下新增一个元素，与其高度保持一致，保证高度不会丢失
+ */
+@mixin bottomMagnet() {
+	position: fixed;
+	bottom: 0;
+	width: 100%;
 }