2025-10-16

收货地址页面40%

pages.json

@@ -103,6 +103,13 @@
 				"navigationBarTitleText": "商品分类",
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path": "pages/my/shippingAddress",
+			"style": {
+				"navigationBarTitleText": "收获地址",
+				"navigationStyle": "custom"
+			}
 		}
 	],
 	"globalStyle": {

pages/my/my.vue

@@ -81,7 +81,7 @@
 						</view>
 					</view>
 				</view>
-				
+
 				<view class="menu-list">
 					<view class="menu-item">
 						<u-image src="/static/my/01.png" width="40%" mode="widthFix"></u-image>
@@ -113,7 +113,7 @@
 							充值中心
 						</view>
 					</view>
-					<view class="menu-item">
+					<view class="menu-item" @click="handleShippingAddress">
 						<u-image src="/static/my/06.png" width="40%" mode="widthFix"></u-image>
 						<view class="menu-text">
 							收货地址
@@ -147,6 +147,12 @@
 
 	const user = ref()
 
+	const handleShippingAddress = () => {
+		uni.navigateTo({
+			url: '/pages/my/shippingAddress'
+		})
+	}
+
 	onMounted(() => {
 		user.value = uni.getStorageSync("user")
 		console.log(user.value);
@@ -294,23 +300,23 @@
 			}
 
 		}
-		
+
-		.menu-list{
+		.menu-list {
 			background: #F5F8FF;
 			margin-top: 20rpx;
 			padding: 20rpx 0 0 0;
 			border-radius: 24rpx;
 			display: flex;
 			flex-wrap: wrap;
-			
+
-			.menu-item{
+			.menu-item {
 				display: flex;
 				flex-direction: column;
 				align-items: center;
 				width: 25%;
 				margin-bottom: 20rpx;
-				
+
-				.menu-text{
+				.menu-text {
 					font-family: Work Sans;
 					font-weight: 400;
 					font-style: Regular;

pages/my/shippingAddress.vue

@@ -0,0 +1,71 @@
+<template>
+	<view class="shipping-container">
+		<u-navbar id="uNavbarId" back-text="收货地址" :back-text-style="navBarTitle" :background="{background: 'transparent' }" :border-bottom="false"
+			back-icon-color="#000" title-color="#000">
+			<template v-slot:right>
+				<view class="right-menu">
+					<view class="">
+						管理
+					</view>
+					<view class="u-m-l-10 add-text">
+						新增地址
+					</view>
+				</view>
+			</template>
+		</u-navbar>
+		<scroll-view scroll-y="true" :style="'height:'+scrollHeight+'px'">
+			<view> </view>
+		</scroll-view>
+	</view>
+</template>
+
+<script setup lang="ts">
+	import { getCurrentInstance, onMounted, ref } from 'vue'
+	
+	const navBarTitle = {
+		fontWeight: '510',
+		fontStyle: 'Medium',
+		fontSize: '40rpx',
+		lineHeight: '52px'
+	}
+
+	const scrollHeight = ref(0)
+	const instance = getCurrentInstance();
+	const loadHeight = () => {
+		uni.getSystemInfo({
+			success(res) {
+				let screenHeight = res.screenHeight
+				uni.createSelectorQuery().in(instance.proxy).select("#uNavbarId").boundingClientRect((data : any) => {
+					scrollHeight.value = screenHeight - data.height
+				}).exec()
+			}
+		})
+	}
+
+	onMounted(() => {
+		loadHeight()
+	})
+</script>
+
+<style scoped lang="scss">
+	.shipping-container {
+		width: 100%;
+		height: 100vh;
+		background: #B9D5FF;
+
+		.right-menu {
+			display: flex;
+			margin-right: 24rpx;
+			font-family: Work Sans;
+			font-weight: 500;
+			font-style: Medium;
+			font-size: 32rpx;
+			leading-trim: NONE;
+			line-height: 100%;
+			letter-spacing: -2%;
+			.add-text{
+				color: #305DEF;
+			}
+		}
+	}
+</style>