修改

src/pages.json

@@ -23,6 +23,12 @@
 			"style": {
 				"navigationBarTitleText": "公积金贷款详情"
 			}
+		},
+		{
+			"path": "pages/list/list",
+			"style": {
+				"navigationBarTitleText": "公积金缴交明细"
+			}
 		}
 	],
 	"globalStyle": {

src/pages/index/index.vue

@@ -33,10 +33,10 @@
 					</view>
 					<view class="iboxcommon">
 						<view class="thin-line-scaled"></view>
-						<router-link to="/list/0" class="iboxc">
+						<view @click="goToList0" class="iboxc">
 							<span>账户变动明细</span>
 							<span class="iconfont icon-jiantou2"></span>
-						</router-link>
+						</view>
 					</view>
 				</view>
 			</view>
@@ -134,12 +134,14 @@
 	import {
 		mapPinia,
 		personPinia,
-		loanPinia
+		loanPinia,
+		listPinia
 	} from '@/store';
 
 	const personStore = personPinia()
 	const mapStore = mapPinia()
 	const loanStore = loanPinia()
+	const listStore=listPinia()
 	const getCurrentTimestamp = () => {
 		return Date.now();
 	}
@@ -191,6 +193,13 @@
 			animationDuration: 200
 		})
 	}
+	const goToList0=()=>{
+		xma.navigateTo({
+			url: "/pages/list/list?type=0",
+			animationType: 'pop-in',
+			animationDuration: 200
+		})
+	}
 	xh.initRexma({
 		code: '5dd7bdcc8619335e543621040d9d34d5', // 端内小程序唯一 code
 	});
@@ -214,6 +223,26 @@
 				success: function(res) {
 					const info = JSON.parse(res.data.data)
 					personStore.person = info.body.detail;
+					
+					//公积金缴费明细
+					xma.request({
+						url: 'https://onemoment.gywb.cn/back/sgy-gjj/gjj/gjjzgcjmx',
+						data: {
+							"eatda": "string",
+							"iseqno": "string",
+							"jzh": "string",
+							"sdata": "string",
+							"spcode": spcode.value,
+							"transcode": "string"
+						},
+						header: {
+							'content-type': 'application/json'
+						},
+						method: "POST",
+						success: function(res) {
+							const data = JSON.parse(res.data.data)
+							listStore.listInfo = data.data.records[0].list.acc_info
+						}})
 					//公积金贷款信息
 					xma.request({
 						url: 'https://onemoment.gywb.cn/back/sgy-gjj/gjj/gjjdkxx',
@@ -274,7 +303,7 @@
 			return year + '年' + month + '月'
 		}
 	})
-	// onMounted(() => {})
+
 </script>
 <style scoped>
 	* {

src/pages/list/list.vue

+<template>
+	<view class="main">
+				<view class="backToMain"><view @click="goToIndex"><span class="iconfont icon-jiantouzuo"></span></view></view>
+		<view class="acctitle">账户变动明细</view>
+		<view class="box1">
+			<view class="b1item">
+				<p class="btxt" @click="handleAll">全部</p>
+				<view class="line" :class="{'active':activeFlag==0}"></view>
+			</view>
+			<view class="b1item">
+				<p class="btxt" @click="handleSave">缴存</p>
+				<view class="line" :class="{'active':activeFlag==1}"></view>
+			</view>
+			<view class="b1item">
+				<p class="btxt" @click="handlePay">提取</p>
+				<view class="line" :class="{'active':activeFlag==2}"></view>
+			</view>
+		</view>
+		<view class="box2 inner">
+			<view class="item">
+				<!-- <view class="item_title">2024年</view> -->
+				<view class="box2c">
+					<view class="box2cibox">
+						<template v-if="tempDataSets.length>0">
+							<view class="box2citem" v-for="item in tempDataSets" @click="getDetail(item)">
+								<view class="box2citem1">{{item.spjym}}</view>
+								<view class="box2citem2">{{item.cllx}}</view>
+								<view class="box2citem3" :class="{'green':item.sr!='','orange':item.zc!=''}">{{item.zc||item.sr}}</view>
+								<a class="box2citem4"><span class="iconfont icon-jiantou2"></span></a>
+							</view>
+						</template>
+						<template v-else>
+							<view class="noinfo">未查询到相关信息</view>
+						</template>
+					</view>
+				</view>
+			</view>
+		</view>
+		<!--缴纳详细情况-->
+		<view class="detail" v-if="detailFlag">
+			<view class="nav">
+				<span class="iconfont icon-jiantouzuo" @click="closeDetail"></span>
+				<view>账户变动详情</view>
+				<span></span>
+			</view>
+			<view class="delbox">
+				<view class="delitem">
+					<view class="del_t">处理类型</view>
+					<view class="del_c">{{detailContent.cllx}}</view>
+				</view>
+				<view class="delitem">
+					<view class="del_t">{{detailContent.sr!=""?"收入":"支出（合计）"}}</view>
+					<view class="del_c">{{detailContent.zc||detailContent.sr}}</view>
+				</view>
+				<view class="delitem" v-if="detailContent.zc!=''">
+					<view class="del_t">支出（公积金）</view>
+					<view class="del_c">{{detailContent.zchj}}</view>
+				</view>
+				<view class="delitem">
+					<view class="del_t">{{detailContent.sr!=""?"汇缴年月":"具体日期"}}</view>
+					<view class="del_c">{{detailContent.spjym}}</view>
+				</view>
+				<view class="delitem">
+					<view class="del_t">具体日期</view>
+					<view class="del_c">{{detailContent.qrrq}}</view>
+				</view>
+				<view class="delitem">
+					<view class="del_t">单位名称</view>
+					<view class="del_c">{{detailContent.snname}}</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		onMounted,
+		ref,
+		computed,
+		watch
+	} from 'vue'
+	
+	import {
+		useRoute
+	} from 'vue-router'
+
+import { listPinia } from '@/store';
+const listStore=listPinia()
+	const dataSets = computed(() => {
+		return listStore.listInfo || []
+	})
+	const tempDataSets = ref([])
+	const route = useRoute()
+	const activeFlag = ref(route.query.type)
+	const detailFlag = ref(false)
+	const detailContent = ref({})
+	
+
+	const changeTempList = (n) => {
+		switch (Number(n)) {
+			case 0:
+				tempDataSets.value = dataSets.value;
+				break;
+			case 1:
+				tempDataSets.value = dataSets.value.filter(item => item.zc == "");
+				break;
+			case 2:
+				tempDataSets.value = dataSets.value.filter(item => item.sr == "");
+				break;
+			default:
+				tempDataSets.value = dataSets.value;
+				break;
+		}
+	}
+	watch(activeFlag, (nv, ov) => {
+		changeTempList(nv)
+	})
+	const handleAll = () => {
+		activeFlag.value = 0
+	}
+	const handleSave = () => {
+		activeFlag.value = 1;
+	}
+
+	const handlePay = () => {
+		activeFlag.value = 2;
+	}
+	const getDetail = (item) => {
+		detailContent.value = item;
+		detailFlag.value = true;
+	}
+
+	const closeDetail = () => {
+		detailFlag.value = false;
+		detailContent.value = {}
+	}
+	const goToIndex = () => {
+		xma.navigateTo({
+			url: "/pages/index/index",
+			animationType: 'pop-in',
+			animationDuration: 200
+		})
+	}
+	onMounted(() => {
+		changeTempList(activeFlag.value)
+	})
+</script>
+
+<style scoped>
+	* {
+		padding: 0px;
+		margin: 0px;
+		font-family: "Microsoft YaHei";
+		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+	}
+
+	.main {
+		width: 100%;
+		max-width: 750px;
+		background: linear-gradient(to bottom, rgba(255, 121, 2, 1), rgba(242, 242, 242, 1));
+		background-size: 100% 400px;
+		background-repeat: no-repeat;
+		padding-top: 1px;
+		box-sizing: border-box;
+		padding-bottom: 10px;
+		position:relative;
+	}
+	.backToMain .icon-jiantouzuo{color:white;position:absolute;top:15px;left:6%;font-size:20px;font-weight: bold;}
+	.inner {
+		width: 88%;
+		margin: 20px auto;
+	}
+
+	a {
+		text-decoration: none;
+	}
+
+	.box1 {
+		position: relative;
+		width: 88%;
+		padding: 10px 40px 1px 40px;
+		color: black;
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+		margin: 20px auto 15px;
+		border-top: 5px solid #ff7902;
+		background-color: white;
+		border-bottom-left-radius: 10px;
+		border-bottom-right-radius: 10px;
+	}
+
+	.b1item {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+	}
+
+	.b1item .btxt {
+		font-size: 18px;
+		margin-bottom: 10px;
+	}
+
+	.b1item .line {
+		width: 0;
+		height: 3px;
+		border-radius: 3px;
+		background-color: white;
+		margin: 0 auto;
+		display: none;
+		transform-origin: center;
+		transition: all linear 0.4s;
+	}
+
+	.b1item .line.active {
+		display: block;
+		width: 90%;
+		background-color: #ff7902;
+	}
+
+	.item {
+		font-size: 16px;
+		border-radius: 6px;
+		background-color: white;
+		padding: 18px 15px 0px;
+		box-sizing: border-box;
+		margin-bottom: 30px;
+	}
+
+	.item .item_title {
+		font-size: 20px;
+		line-height: 14px;
+		margin-bottom: 15px;
+	}
+
+	.thin-line-scaled {
+		width: 217%;
+		height: 1px;
+		left: -4%;
+		position: relative;
+		background-color: rgb(168, 168, 168);
+		transform: scale(50%);
+		transform-origin: left center;
+		position: absolute;
+
+		top: 0px;
+
+	}
+
+	.box2citem {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+		padding: 10px 0 10px 0;
+	}
+
+	.acctitle {
+		color: white;
+		font-size: 22px;
+		text-align: center;
+		margin: 70px auto 10px;
+	}
+
+	.box2citem1 {
+		color: rgb(175, 167, 167);
+		font-size: 16px;
+		flex: 1
+	}
+
+	.box2citem2 {
+		color: black;
+		flex: 4;
+		padding-left: 15px;
+	}
+
+	.box2citem3 {
+		color: #ff7f02;
+		flex: 1;
+		text-align: right;
+	}
+
+	.box2citem3.orange {
+		color: #ff7f02
+	}
+
+	.box2cibox .noinfo {
+		color: rgb(175, 167, 167);
+		font-size: 16px;
+	}
+
+	.box2citem3.green {
+		color: #00aa00
+	}
+
+	.box2citem4 {
+		color: rgb(175, 167, 167);
+		flex: 1;
+		text-align: right;
+	}
+
+	.box2cibox {
+		position: relative;
+	}
+
+	.detail {
+		position: fixed;
+		z-index: 99;
+		top: 0px;
+		left: 0px;
+		right: 0px;
+		bottom: 0px;
+		background-color: #f2f2f2;
+	}
+
+	.detail .nav {
+		display: flex;
+		padding: 12px 20px;
+		box-sizing: border-box;
+		align-items: center;
+		justify-content: space-between;
+		background: white;
+	}
+
+	.detail .nav span {
+		flex: 1;
+		text-align: left;
+	}
+
+	.detail .nav view {
+		flex: 4;
+		text-align: center;
+	}
+
+	.detail .delbox {
+		width: 92%;
+		margin: 20px auto;
+		background: white;
+		border-radius: 10px;
+		padding: 18px 13px 18px 13px;
+		box-sizing: border-box;
+	}
+
+	.delbox .delitem {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		font-size: 14px;
+		margin-bottom: 10px;
+	}
+
+	.delbox .delitem .del_t {
+		text-align: left;
+		color: #9b9b9b
+	}
+
+	.delbox .delitem .del_c {
+		text-align: right;
+		color: black
+	}
+</style>
\ No newline at end of file

src/store/index.ts

@@ -9,4 +9,6 @@ export * from './person';
 // 模块统一导出
 export * from './map';
 // 模块统一导出
-export * from './loan';
\ No newline at end of file
+export * from './loan';
+// 模块统一导出
+export * from './list';
\ No newline at end of file

src/store/list.js

+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+
+export const listPinia = defineStore('list', () => {
+	const listInfo = ref(null)
+	return { listInfo }
+})
\ No newline at end of file