虚拟地址；

src/pages/address/virtual.vue

@@ -0,0 +1,225 @@
+<template>
+	<view class="page-container">
+		<view class="location-bar">
+			<view class="location-content">
+				<u-icon name="map" color="#666" size="20"></u-icon>
+				<text class="location-text">信达国际金融中心</text>
+			</view>
+			<u-icon name="arrow-right" color="#999" size="14"></u-icon>
+		</view>
+
+		<view class="main-card">
+			<view class="card-header">
+				<text class="header-title">虚拟地址</text>
+				<view class="add-btn" @click="addAddress">
+					<u-icon name="plus" color="#19be6b" size="14"></u-icon>
+				</view>
+			</view>
+
+			<u-line color="#f0f0f0"></u-line>
+
+			<view class="address-list">
+				<u-radio-group v-model="selectedValue" placement="column" iconPlacement="left">
+					<view class="list-item" v-for="(item, index) in addressList" :key="item.id">
+						<view class="item-left" @click="selectItem(item.id)">
+							<u-radio :name="item.id" activeColor="#2b9b86" />
+							<text class="item-text">{{ item.name }}</text>
+						</view>
+
+						<view class="item-right" @click.stop="deleteItem(index)">
+							<u-icon name="trash" color="#dd524d" size="22"></u-icon>
+						</view>
+					</view>
+				</u-radio-group>
+
+				<view v-if="addressList.length === 0" class="empty-tip">
+					暂无地址，请添加
+				</view>
+			</view>
+
+			<view class="btn-group">
+				<button class="custom-btn btn-back" @click="goBack">返回</button>
+				<button class="custom-btn btn-save" @click="saveData">保存</button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			// 选中的值
+			selectedValue: 1,
+			// 模拟数据列表
+			addressList: [
+				{ id: 1, name: '太原市小店区xxx' },
+				{ id: 2, name: '晋中市榆次区xxx' }
+			]
+		};
+	},
+	methods: {
+		// 点击文字也能选中
+		selectItem(id) {
+			this.selectedValue = id;
+		},
+		// 添加地址
+		addAddress() {
+			uni.showToast({ title: '点击了添加', icon: 'none' });
+			// 逻辑：跳转添加页面或弹窗
+		},
+		// 删除条目
+		deleteItem(index) {
+			uni.showModal({
+				title: '提示',
+				content: '确定要删除该地址吗？',
+				success: (res) => {
+					if (res.confirm) {
+						this.addressList.splice(index, 1);
+					}
+				}
+			});
+		},
+		// 返回
+		goBack() {
+			uni.navigateBack();
+		},
+		// 保存
+		saveData() {
+			console.log('当前选中ID:', this.selectedValue);
+			uni.showToast({ title: '保存成功', icon: 'success' });
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+$theme-color: #2b9b86;
+$bg-color: #e6fafa;
+
+.page-container {
+	min-height: 100vh;
+	padding: 24rpx;
+	background-color: $bg-color;
+}
+
+.location-bar {
+	padding: 20rpx 24rpx;
+	margin-bottom: 20rpx;
+	border-radius: 12rpx;
+	background-color: #fff;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+
+	.location-content {
+		display: flex;
+		align-items: center;
+
+		.location-text {
+			margin-left: 10rpx;
+			font-size: 28rpx;
+			color: #333;
+		}
+	}
+}
+
+.main-card {
+	min-height: 500rpx;
+	border-radius: 12rpx;
+	padding: 20rpx 24rpx;
+	background-color: #fff;
+	display: flex;
+	flex-direction: column;
+	position: relative;
+	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+}
+
+.card-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 20rpx;
+
+	.header-title {
+		font-size: 32rpx;
+		font-weight: bold;
+		color: #333;
+	}
+
+	.add-btn {
+		width: 44rpx;
+		height: 44rpx;
+		border: 2rpx solid $theme-color;
+		border-radius: 8rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+}
+
+.address-list {
+	flex: 1;
+	margin-top: 10rpx;
+}
+
+.list-item {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 24rpx 0;
+	border-bottom: 1rpx solid #f5f5f5;
+
+	.item-left {
+		display: flex;
+		align-items: center;
+		flex: 1;
+	}
+
+	.item-text {
+		font-size: 30rpx;
+		color: #333;
+	}
+
+	.item-right {
+		padding-left: 20rpx;
+	}
+}
+
+.empty-tip {
+	text-align: center;
+	color: #999;
+	padding-top: 50rpx;
+}
+
+.btn-group {
+	display: flex;
+	justify-content: space-between;
+	margin-top: 40rpx;
+	padding-bottom: 10rpx;
+}
+
+.custom-btn {
+	width: 45%;
+	height: 80rpx;
+	line-height: 80rpx;
+	font-size: 30rpx;
+	border-radius: 10rpx;
+	border: none;
+
+	&::after {
+		border: none;
+	}
+}
+
+.btn-back {
+	background-color: #fff;
+	color: $theme-color;
+	border: 2rpx solid $theme-color;
+}
+
+.btn-save {
+	background-color: $theme-color;
+	color: #fff;
+}
+</style>