修改

src/pages.json

@@ -17,6 +17,12 @@
 			"style": {
 				"navigationBarTitleText": "公积金地图"
 			}
+		},
+		{
+			"path": "pages/loan/loan",
+			"style": {
+				"navigationBarTitleText": "公积金贷款详情"
+			}
 		}
 	],
 	"globalStyle": {

src/pages/index/index.vue

@@ -106,10 +106,10 @@
 							<span class="fakeStar txt">{{loadData.bjye}}</span>
 							<span class="iconfont icon-yanjing-zhengyan"></span>
 						</view>
-						<router-link to="/loan" class="getMore">
+						<view @click="goToLoan" class="getMore">
 							<span>更多</span>
 							<span class="iconfont icon-jiantou2"></span>
-						</router-link>
+						</view>
 					</view>
 				</view>
 			</view>
@@ -184,6 +184,13 @@
 			animationDuration: 200
 		})
 	}
+	const goToLoan = () => {
+		xma.navigateTo({
+			url: "/pages/loan/loan",
+			animationType: 'pop-in',
+			animationDuration: 200
+		})
+	}
 	xh.initRexma({
 		code: '5dd7bdcc8619335e543621040d9d34d5', // 端内小程序唯一 code
 	});

src/pages/loan/loan.vue

+<template>
+	<view class="main">
+		<view class="backToMain"><view @click="goToIndex"><span class="iconfont icon-jiantouzuo"></span></view></view>
+		<view class="inner">
+			<view class="loan1">
+				<p>当前贷款余额(元)</p>
+				<view class="amount">{{loadData.bjye}}</view>
+			</view>
+			<view class="box">
+				<view class="box2citem">
+					<view class="box2citem_l">当前状态</view>
+					<view class="box2citem_r orange">{{loadData.sqstatus}}</view>
+				</view>
+				<view class="box2citem">
+					<view class="box2citem_l">已还本金</view>
+					<view class="box2citem_r">{{loadData.ljbj}}</view>
+				</view>
+				<view class="box2citem">
+					<view class="box2citem_l">已还利息</view>
+					<view class="box2citem_r">{{loadData.ljlx}}</view>
+				</view>
+			</view>
+			<view class="box">
+				<view class="item_title">您的公积金贷款账户信息</view>
+				<view class="thin-line-scaled"></view>
+				<view class="box2citem">
+					<view class="box2citem_l">贷款金额</view>
+					<view class="box2citem_r">{{loadData.jkje}}</view>
+				</view>
+				<view class="box2citem">
+					<view class="box2citem_l">月还款额</view>
+					<view class="box2citem_r">{{loadData.yhje}}</view>
+				</view>
+				<view class="box2citem">
+					<view class="box2citem_l">还款方式</view>
+					<view class="box2citem_r">{{loadData.hkfs}}</view>
+				</view>
+				<view class="box2citem">
+					<view class="box2citem_l">最近一次还款时间</view>
+					<view class="box2citem_r">{{loadData.yhym}}</view>
+				</view>
+				<view class="box2citem">
+					<view class="box2citem_l">贷款年限</view>
+					<view class="box2citem_r">{{loadData.jkqx}}</view>
+				</view>
+				<view class="box2citem">
+					<view class="box2citem_l">发放日期</view>
+					<view class="box2citem_r">{{loadData.ksym}}</view>
+				</view>
+				<view class="box2citem">
+					<view class="box2citem_l">到期日期</view>
+					<view class="box2citem_r">{{loadData.jsrq}}</view>
+				</view>
+				<view class="box2citem">
+					<view class="box2citem_l">放款银行</view>
+					<view class="box2citem_r">{{loadData.ocid}}</view>
+				</view>
+				<view class="box2citem">
+					<view class="box2citem_l">房屋地址</view>
+					<view class="box2citem_r">{{loadData.xxdz}}</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		computed
+	} from 'vue'
+	import {loanPinia} from '@/store'
+	const loanStore=loanPinia()
+	const goToIndex = () => {
+		xma.navigateTo({
+			url: "/pages/index/index",
+			animationType: 'pop-in',
+			animationDuration: 200
+		})
+	}
+const loadData = computed(() => {
+		return loanStore.loanInfo || ""
+	})
+
+</script>
+
+<style scoped>
+	* {
+		padding: 0px;
+		margin: 0px;
+		font-family: "Microsoft YaHei";
+	}
+
+	#app {
+		background-color: white !important;
+	}
+
+	.main {
+		width: 100%;
+		max-width: 750px;
+		box-sizing: border-box;
+		background: linear-gradient(to bottom, rgba(255, 121, 2, 1), rgba(242, 242, 242, 0));
+		background-size: 100% 500px;
+		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;}
+	.thin-line-scaled {
+		position: relative;
+		left: -2.5%;
+		right: 0%;
+		width: 210%;
+		height: 1px;
+		background-color: rgba(168, 168, 168, 0.5);
+		transform: scale(50%);
+		transform-origin: left center;
+		margin-bottom: 18px;
+	}
+
+	.inner {
+		width: 90%;
+		margin: 20px auto;
+	}
+
+	.box {
+		font-size: 16px;
+		border-radius: 6px;
+		background-color: white;
+		padding: 20px 20px 5px 20px;
+		box-sizing: border-box;
+		margin-bottom: 15px;
+	}
+
+	.loan1 {
+		margin: 70px auto 40px;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		color: white
+	}
+
+	.loan1 p {
+		font-size: 16px;
+		margin-bottom: 5px;
+	}
+
+	.loan1 view {
+		font-size: 34px;
+		font-weight: bold;
+	}
+
+	.box .item_title {
+		padding-left: 7px;
+		border-left: 3px solid rgb(255, 122, 2);
+		font-size: 16px;
+		line-height: 14px;
+		margin-bottom: 15px;
+		font-weight: bold
+	}
+
+	.box2citem {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 12px;
+		flex-wrap: wrap;
+	}
+
+	.box2citem_l {
+		color: rgb(155, 155, 155);
+		font-size: 16px;
+	}
+
+	.box2citem_r {
+		color: rgb(62, 56, 56);
+		font-size: 16px;
+	}
+
+	.box2citem_r.orange {
+		color: rgb(255, 122, 2)
+	}
+</style>
\ No newline at end of file