guzijian / garbage-removal · Files

<template>
	<view class="wrap">
		<view class="wrap-from-container">
			<city-select v-model="cityPikerShowFlag" @city-change="handleCityChange"></city-select>
			<u--form :labelStyle="{ color: '#909399' }" labelPosition="left" labelWidth="140" :model="addressInfo"
				ref="addressFrom">
				<u-form-item :required="true" label="所在地区" prop="addressArea" @click="showRegionPicker" borderBottom>
					<u--input border="none" readonly type="text" v-model="addressInfo.addressArea" placeholder-class="line"
						placeholder="省市区县、乡镇等"></u--input>
				</u-form-item>
				<u-form-item :required="true" label="详细地址" prop="addressDetail" borderBottom>
					<view class="wrap-from-container-address-details" style="display: flex;">
						<u--input border="none" type="text" v-model="addressInfo.addressDetail" placeholder-class="line"
							placeholder="请填写详细地址"></u--input>
						<u-icon name="map" size="40" @click="chooseAddressDetail"></u-icon>
					</view>
				</u-form-item>
				<u-form-item :required="true" label="联系人" prop="contactPerson" borderBottom>
					<u--input border="none" type="text" v-model="addressInfo.contactPerson" placeholder-class="line"
						placeholder="联系人"></u--input>
				</u-form-item>
				<u-form-item :required="true" label="联系电话" prop="contactIphoneNumber" borderBottom>
					<u--input border="none" type="text" v-model="addressInfo.contactIphoneNumber" placeholder-class="line"
						placeholder="联系电话"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="bottom">
			<view class="default">
				<view class="left">
					<view class="set">当前选中地址</view>
				</view>
				<view class="right">
					<u-switch v-model="addressInfo.defaultFlag" size="40" activeColor="#a9e08f"></u-switch>
				</view>
			</view>
		</view>
		<view class="submit-button">
			<view v-if="addFlag" @click="submit" class="add">新增地址</view>
			<view v-else class="update-box">
				<view class="del" @click="handleDeleteClick">删除地址</view>
				<view class="update" @click="handleUpdateClick">保存地址</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { addAddress, deleteAddress, updateAddress } from '@/apis/address.js';
import { onLoad } from '@dcloudio/uni-app';
import { getCurrentInstance, onMounted, reactive, ref } from 'vue';
import citySelect from './citySelect/u-city-select.vue';
const { proxy } = getCurrentInstance();
const cityPikerShowFlag = ref(false)
const addFlag = ref(true)
const addressInfo = reactive({
	addressArea: "",
	addressDetail: "",
	contactPerson: "",
	contactIphoneNumber: "",
	defaultFlag: false
});

const rules = reactive({
	'addressArea': {
		type: 'string',
		required: true,
		message: '请选择区域',
		trigger: ['blur', 'change']
	},
	'addressDetail': {
		type: 'string',
		required: true,
		message: '请输入详细地址',
		trigger: ['blur', 'change']
	},
	'contactPerson': {
		type: 'string',
		required: true,
		message: '请输入联系人',
		trigger: ['blur', 'change']
	},
	'contactIphoneNumber': [{
		type: 'string',
		required: true,
		message: '手机号码不正确',
		trigger: ['blur', 'change']
	}, {
		validator: (rule, value, callback) => {
			return uni.$u.test.mobile(value);
		},
		message: '手机号码不正确',
		// 触发器可以同时用blur和change
		trigger: ['change', 'blur'],
	}]
})

const showRegionPicker = () => {
	cityPikerShowFlag.value = true;
}

const handleCityChange = (e) => {
	addressInfo.addressArea = e.province.label + '-' + e.city.label + '-' + e.area.label;
}

const handleDeleteClick = () => {
	uni.showModal({
		title: '',
		content: '是否确认删除这个地址',
		success: function (res) {
			if (res.confirm) {
				deleteAddress(addressInfo.garAddressId).then(res => {
					if (res.data.success) {
						uni.$u.toast(res.data.msg)
						jumpAddressList()
					}
				})
			} else if (res.cancel) {
			}
		}
	});

}

const handleUpdateClick = () => {
	updateAddress(addressInfo).then(res => {
		console.log(res);
		uni.$u.toast(res.data.msg)
		if (res.data.success) {
			setTimeout(() => {
				jumpAddressList();
			}, 200);
		}
	})
}

const jumpAddressList = () => {
	reset();
	uni.$u.route({
		type: 'navigateBack',
		url: `pages/home/address/index`,
	})
}

const submit = () => {
	proxy.$refs.addressFrom.validate().then(res => {
		addAddress(addressInfo).then(res => {
			uni.$u.toast(res.data.msg)
			if (res.data.success) {
				setTimeout(() => {
					jumpAddressList();
				}, 200);
			}
		})
	}).catch(errors => {
		uni.$u.toast('请填写正确信息！')
	})
}
/**
 * 打开地图选择地址
 */
const chooseAddressDetail = () => {
	uni.chooseLocation({
		success: function (res) {
			addressInfo.addressDetail = res.address + res.name;
		}
	});
}

onMounted(() => {
	proxy.$refs.addressFrom.setRules(rules)
})

onLoad((options) => {
	if (options.addressObj) {
		let addressObj = JSON.parse(options.addressObj);
		addressInfo.addressArea = addressObj.garUserAddress;
		addressInfo.contactPerson = addressObj.garUserContactName;
		addressInfo.contactIphoneNumber = addressObj.garUserContactTel;
		addressInfo.defaultFlag = addressObj.garUserDefault == 1 ? true : false;
		addressInfo.addressDetail = addressObj.garRemark;
		addressInfo.garAddressId = addressObj.garAddressId
		addFlag.value = false;
	}
})
const reset = () => {
	addressInfo.addressArea = ''
	addressInfo.contactPerson = ''
	addressInfo.contactIphoneNumber = ''
	addressInfo.defaultFlag = false
	addressInfo.addressDetail = ''
	addressInfo.garAddressId = ''
	addFlag.value = true
}
</script>

<style lang="scss" scoped>
.wrap {
	box-sizing: border-box;
	padding: 15rpx;
	// background-color: $u-info-light;
	height: 100%;
	width: 100%;
	background: linear-gradient(to bottom, $u-success-dark, $u-info-light, $u-info-light, $u-info-light);

	.wrap-from-container {
		width: 100%;
		box-sizing: border-box;
		padding: 40rpx;
		background-color: #ffffff;
		margin-bottom: 20rpx;
		border-radius: 15rpx;
	}

	.bottom {
		margin-top: 20rpx;
		padding: 40rpx;
		background-color: #ffffff;
		font-size: 28rpx;
		border-radius: 15rpx;

		color: #909399;

		.default {
			margin-top: 50rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: solid 2rpx $u-border-color;
			line-height: 64rpx;

			.tips {
				font-size: 20rpx;
			}

			.right {}
		}
	}


	.submit-button {
		display: flex;
		margin: auto;
		width: 80%;
		line-height: 100rpx;
		position: absolute;
		bottom: 30rpx;
		left: 10%;
		font-size: 30rpx;
		color: #ffffff;

		.add {
			background-color: #a9e08f;
			border-radius: 60rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.update-box {
			width: 100%;
			display: flex;
			justify-content: space-around;

			.del {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 60rpx;
				background-color: $u-error-disabled;
				margin-right: 30rpx;
			}

			.update {
				width: 100%;
				background-color: $u-success-dark;
				border-radius: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}


		}
	}


}
</style>