jiuyiUniapp/jiuyi2/pages/mine/delivery-address/index.vue

<template>
	<view class="app">
		<!-- 头部 -->
		<!-- <JyCommonHead title="收获地址" :isRight="false"></JyCommonHead> -->

		<view class="page-wrapper oh">
			<view v-for="addressItem in addressData" :key="addressItem.id" class="address-item mb20 ptb20 plr20 bfff"
				@click="emit('choose', addressItem)" :class="{'active': addressItem.isDefault}">
				<view class="top-area">
					<text class="name">{{ addressItem.name }}</text>
					<text class="phone">{{ addressItem.phone }}</text>
				</view>
				<view class="address-text">{{ addressItem.address }}</view>
				<view class="bottom-area mt20">
					<label>
						<checkbox @click.stop="emit('setDefault', addressItem)" color="#f60" disabled
							style="transform:scale(0.8)" :class="[addressItem.isDefault && 'isDefault']"
							:checked="addressItem.isDefault" />
						<text @click.stop="emit('setDefault', addressItem)" class="set-def-text">设为默认</text>
					</label>
					<view class="operation-btns">
						<uni-tag class="mlr10" @click.stop="emit('edit', addressItem)" :inverted="true" text="复制"
							type="warning" size="small"></uni-tag>
						<uni-tag class="mlr1" @click.stop="copyText(addressItem)" :inverted="true" text="修改"
							type="warning" size="small"></uni-tag>
					</view>
				</view>

				<uni-icons class="delete" type="closeempty" color="#999" @click.stop="emit('delete', addressItem)" />
			</view>
		</view>

		<view class="footer plr30 shadow bfff">
			<view class="btn lg primary" @click="openPopup">添加地址</view>
		</view>
	</view>
	<JyPopup ref="addressPopup" title="添加收货地址" type="center">
		<view class="p25">
			<uni-forms :modelValue="formData">
				<uni-forms-item label="收货人" name="recipientName">
					<input type="text" v-model="formData.recipientName" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item label="手机号" name="phoneNumber">
					<input type="text" v-model="formData.phoneNumber" placeholder="请输入手机号" />
				</uni-forms-item>
				<uni-forms-item label="邮编" name="postalCode">
					<input type="text" v-model="formData.postalCode" placeholder="请输入邮编" />
				</uni-forms-item>
				<uni-forms-item label="地区" name="areas">
					<input @click="onhideShow" type="text" v-model="formData.areas" placeholder="请输入地区" />
				</uni-forms-item>
				<uni-forms-item label="详细地址" name="addressDetail">
					<uni-easyinput type="textarea" autoHeight v-model="formData.addressDetail"
						placeholder="如街道，门牌号，小区，乡镇，村等"></uni-easyinput>
				</uni-forms-item>
			</uni-forms>
			<pickRegions :province="add.province" :city="add.city" :area="add.area" :show="show"
				@changeClick="changeClick" @sureSelectArea="onsetCity" @hideShow="onhideShow"></pickRegions>
			<button class="add-address-btn" @click="saveApi">保存</button>
		</view>
	</JyPopup>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance,
		reactive
	} from 'vue'
	import {
		onLoad,
	} from '@dcloudio/uni-app';
	import JyPopup from '@/components/public/jy-popup'
	import JyCommonHead from '@/components/public/jy-common-head'
	import pickRegions from './components/jy-pick-regions'
	import JyBottomBtn from '@/components/public/jy-bottom-button'

	const {
		proxy
	} = getCurrentInstance()
	const show = ref(false)
	// 打开弹窗
	const onhideShow = () => {
		show.value = true
	}
	const changeClick = (value, value2, value3, value4) => {
		console.log('地址选择器 = ' + value + value2 + value3 + value4);
	}
	//选中省市区
	const onsetCity = (e) => {
		console.log('====================================');
		console.log(e);
		console.log('====================================');
		show.value = false
	}
	const formData = reactive({
		recipientName: undefined,
		phoneNumber: undefined,
		district: undefined,
		postalCode: undefined,
		city: undefined,
		province: undefined,
		addressDetail: undefined,
	})
	const setDefault = () => {
		console.log('setDefault')
	}

	const add = () => {
		uni.navigateTo({
			url: '/pages/mine/address-add'
		})
	}

	const validateForm = () => {
		if (!formData.recipientName) {
			uni.showToast({
				title: '请输入收货人',
				icon: 'none'
			});
			return false;
		}
		if (!formData.phoneNumber || !/^1[3-9]\d{9}$/.test(formData.phoneNumber)) {
			uni.showToast({
				title: '请输入正确的手机号',
				icon: 'none'
			});
			return false;
		}
		// 其他字段验证...
		return true;
	}

	// 保存方法
	function saveApi() {
		if (validateForm()) {
			// 实现保存逻辑
			console.log('保存地址:', formData);
		}
	}

	const addressData = ref([{
			name: '上官婉儿',
			phone: '13800138000',
			address: '北京市海淀区中关村软件园',
			isDefault: false,
			isCompany: true,
			id: Math.random().toString(36).substring(2, 9),
		},
		{
			name: '司空震',
			phone: '13800138000',
			address: '江西省吉安市吉水县东山中央首府11栋',
			isDefault: true,
			isHome: true,
			id: Math.random().toString(36).substring(2, 9),
		},
		{
			name: '苏烈',
			phone: '13800138000',
			address: '广东省深圳市南山区粤海街道109号6楼601',
			isDefault: false,
			id: Math.random().toString(36).substring(2, 9),
		},
	])

	function copyText(item) {
		uni.setClipboardData({
			data: item.address,
			success: () => {
				uni.showToast({
					title: '复制成功',
					icon: 'success'
				});
			},
			fail: () => {
				uni.showToast({
					title: '复制失败',
					icon: 'none'
				});
			}
		});
	}

	function openPopup() {
		this.$refs.addressPopup.open()
	}

	function init() {
		this.getData({
			api: 'address',
			fn: 'list'
		}, {});
		console.log('====================================');
		console.log(this.listProperty);
		console.log('====================================');
	}

	function onReachBottomHandler() {
		this.listProperty.params.pageNum++;
		this.init();
	}

	function onPullDownRefreshHandler() {
		this.listProperty.params.pageNum = 1
		this.getData({
			api: 'address',
			fn: 'list'
		}, {}, true);
	}
</script>

<style lang="scss" scoped>
	$text-color1: #333333;
	$text-color2: #666;

	::v-deep .uni-checkbox-input-disabled {
		border-radius: 50% !important;
		background-color: #ffffff !important;

	}

	::v-deep .isDefault {
		.uni-checkbox-input {
			background-color: #F8BA4D !important;
			border-color: #F8BA4D !important;
		}

		path {
			fill: #fff;
		}
	}

	.page-wrapper {
		// padding: 20rpx;
		overflow-y: scroll;
		height: calc(100vh - 200rpx - 110rpx);

		.address-item {
			position: relative;

			.delete {
				position: absolute;
				top: 15rpx;
				right: 15rpx;
				width: 26rpx;
				height: 26rpx;
			}

			.top-area {
				font-size: 28rpx;
				margin: 10rpx 0;

				.name {
					margin-right: 20rpx;
				}

				text {
					color: #333333;
					font-size: 28rpx;
				}

			}

			.address-text {
				padding: 0 0 15rpx 0;
				width: 90vw;
				color: $text-color1;
				white-space: nowrap;
				/* 禁止换行 */
				overflow: hidden;
				/* 隐藏溢出部分 */
				text-overflow: ellipsis;
				/* 使用省略号替代溢出部分 */
			}

			.bottom-area {
				display: flex;
				padding-right: 0rpx;
				justify-content: space-between;
				justify-items: center;

				.set-def-text {
					font-size: 14px;
					color: $text-color2;
				}
			}
		}

		.add-address-btn {
			position: fixed;
			z-index: 99;
			bottom: 120rpx;
			width: calc(100% - 30rpx);
			margin: auto;
			height: 80rpx;
			border-radius: 15rpx;
			background-color: #f60;
			color: #fff;
			font-size: 22px;
			text-align: center;
			line-height: 80rpx;
			letter-spacing: 4rpx;
		}
	}

	.jy-pay-popup {
		width: 100%;
		height: 800rpx;
		border-radius: 30rpx;

		.title {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20rpx 0;
			// 底部边框显示
			color: #3D3D3D;
			font-size: 32rpx;
			border-bottom: 1px solid #E5E5E5;
		}

		.close-btn {
			position: absolute;
			top: 0;
			right: 0;
			height: 52rpx;
			line-height: 52rpx;
			width: 52rpx;
			background: #D8D8D8;
			font-size: 30rpx;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			transform: translate(50%, -50%);
		}
	}

	.add-address-btn {
		background: linear-gradient(270deg, #FF9B27 20%, #FDC123 103%);
		font-size: 32rpx;
		color: #FFFFFF;
		width: 100%;
	}
</style>