GraduationDesign/errand/errand_app/pages/address/address.vue

<template>
	<view style="padding: 20rpx;">
		<view class="box" style="margin-bottom: 10rpx;">
			<uni-forms :modelValue="form" :rules="rules" ref="formRef" label-width="160rpx" label-align="right" validateTrigger="blur">
				<uni-forms-item label="地址" name="address" required>
					<uni-easyinput type="text" v-model="form.address" placeholder="请选择地址" @focus="chooseLocation" />
				</uni-forms-item>
				<uni-forms-item label="门牌号" name="doorNo" required>
					<uni-easyinput type="text" v-model="form.doorNo" placeholder="请输入门牌号" @focus="chooseLocation" />
				</uni-forms-item>
				<uni-forms-item label="联系人" name="userName" required>
					<uni-easyinput type="text" v-model="form.userName" placeholder="请输入联系人" />
				</uni-forms-item>
				<uni-forms-item label="联系电话" name="phone" required>
					<uni-easyinput type="text" v-model="form.phone" placeholder="请输入联系电话" @focus="chooseLocation" />
				</uni-forms-item>
				<view>
					<button type="primary" class="my-button-primary" @click="save">保存并使用</button>
				</view>
			</uni-forms>
		</view>
		
		<view class="box" v-if="addressList.length">
			<view v-for="item in addressList" :key="item.id">
				<view style="padding: 10rpx 0; border-bottom: 1px solid #eee;" @click="selectAddress(item)">
					<view style="font-weight: bold; font-size: 32rpx; margin-bottom: 10rpx;">{{ item.address + item.doorNo }}</view>
					<view style="color: #888; margin-bottom: 10rpx;">
						<text style="margin-right: 20rpx;">{{ item.userName }}</text>
						<text>{{ item.phone }}</text>
					</view>
					<view style="text-align: right;">
						<uni-icons type="compose" size="18" color="#888" style="margin-right: 10rpx;" @click.native.stop="handleEdit(item)"></uni-icons>
						<uni-icons type="trash" size="18" color="#888" @click.native.stop="del(item.id)"></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: uni.getStorageSync('xm-user'),
				addressList: [],
				form: {
					address: '',
					doorNo: '',
					userName: '',
					phone: ''
				},
				rules: {
					address: { rules: [{ required: true, errorMessage: '请填写地址' }] },
					doorNo: { rules: [{ required: true, errorMessage: '请填写门牌号' }] },
					userName: { rules: [{ required: true, errorMessage: '请填写联系人' }] },
					phone: { rules: [{ required: true, errorMessage: '请填写联系电话' }] }
				},
				addressType: '',
				choosingLocation: false
			};
		},
		onLoad(option) {
			this.addressType = option.addressType;
			this.loadAddresses(); // 加载地址
		},
		methods: {
			chooseLocation() {
				// 只在地址为空时触发
				if (this.choosingLocation || this.form.address) return;

				this.choosingLocation = true;

				wx.chooseLocation({
				    success: (res) => {
				        console.log(res);
				        // 将地址和名称组合为一个字符串返回
				        this.form.address = res.address + ' ' + res.name;  
				    },
				    fail: (err) => {
				        console.error(err);
				        uni.showToast({ title: '获取位置失败', icon: 'none' });
				    },
				    complete: () => {
				        this.choosingLocation = false;
				    }
				});
			},
			selectAddress(address) {
				let orderStore = uni.getStorageSync('orderStore') || {};
				if (this.addressType === '取货') {
					orderStore.pickAddress = address;
				} else {
					orderStore.recieveAddress = address;
				}
				uni.setStorageSync('orderStore', orderStore);
				uni.redirectTo({
					url: '/pages/preOrder/preOrder'
				});
			},
			del(id) {
				this.$request.del('/address/delete/' + id).then(res => {
					if (res.code === '200') {
						uni.showToast({ icon: 'success', title: '操作成功' });
						this.loadAddresses(); // 加载地址
					} else {
						uni.showToast({ icon: 'none', title: res.msg });
					}
				}); 
			},
			handleEdit(address) {
				this.form = JSON.parse(JSON.stringify(address));
			},
			save() {
				this.$refs.formRef.validate().then(res => {
					this.form.userId = this.user.id;
					this.$request.post('/address/add', this.form).then(res => {
						if (res.code === '200') {
							uni.showToast({ icon: 'success', title: '操作成功' });
							
							if (this.addressType) {
								this.selectAddress(res.data);
							}
							
							this.form = {
								address: '',
								doorNo: '',
								userName: '',
								phone: ''
							}; // 重置表单
							this.loadAddresses(); // 加载地址
						} else {
							uni.showToast({ icon: 'none', title: res.msg });
						}
					});
				}).catch(error => {
					console.error(error);
				});
			},
			loadAddresses() {
				this.$request.get('/address/selectAll', { userId: this.user.id }).then(res => {
					this.addressList = res.data || [];
				});
			}
		}
	};
</script>