vpUni/.svn/pristine/21/218d8fb706aa95c0f938da6a457d3a0a4f8dc3d4.svn-base

<template>
	<view class="">
		<view class="" style="padding: 0rpx 30rpx; ">
			<up-form labelPosition="top" :model="userData" labelWidth='200rpx' ref="form1">
				<up-form-item label="姓名" prop="userInfo.name" ref="item1">
					<up-input v-model="userData.name" prefixIcon="account" placeholder="请输入姓名"
						:customStyle="{padding: '20rpx','background-color':'#F8F9FA','margin-top':'15rpx','border-radius':'16rpx'}"
						:prefixIconStyle="{fontSize:'50rpx'  }" border="none"></up-input>
				</up-form-item>
				<up-form-item label="手机号" prop="userInfo.name" ref="item1">
					<up-input v-model="userData.phone"
						:customStyle="{padding: '20rpx','background-color':'#F8F9FA','margin-top':'15rpx','border-radius':'16rpx'}"
						prefix-icon="phone" type='number' placeholder="请输入手机号" :prefixIconStyle="{fontSize:'45rpx'}"
						border="none"></up-input>
				</up-form-item>
				<up-form-item label="所在地区" prop="userInfo.name" ref="item1">
					<view class="" @click="location()"
						style=" width: 100%; display: flex; align-items: center; justify-content: space-between; border-radius: 16rpx; margin-top: 15rpx;   background-color: #F8F9FA;padding: 20rpx;">
						<view class="" style="display: flex;align-items: center;">
							<up-icon name="map" color="#606266" size="22"></up-icon>
							<view v-if="!userData.province" class="" style="color: #c0c4cc; margin-left: 10rpx; ">
								请选择地址
							</view>
							<view v-else class="" style=" margin-left: 10rpx; ">
								{{ userData.primaryAddress }}
							</view>
						</view>
						<view class="">
							<up-icon name="arrow-right" color="#606266" size="20"></up-icon>
						</view>
					</view>
				</up-form-item>
				<up-form-item label="详细地址" prop="userInfo.name" ref="item1">
					<up-textarea v-model="userData.address" style=" margin-top: 15rpx; background-color: #F8F9FA;"
						placeholder="请输入内容"></up-textarea>
				</up-form-item>
			</up-form>
			<view class=""
				style=" margin-top: 15rpx; display: flex; align-items: center; justify-content: space-between;">
				<view class="">
					设为默认地址
				</view>
				<view class="">
					<up-switch v-model="userData.isDefault" size='18' activeColor='var(--nav-mian)'
						@change="switchChange"></up-switch>
				</view>
			</view>
		</view>


		<!-- 新增地址按钮 -->
		<view class=""
			style="position: fixed;  bottom: 0; width: 100%; padding: 20rpx; border-top: 1rpx solid #e2e2e2;    background-color: #fff; ">
			<up-button @click="save()" color='var(--nav-mian)' shape='circle' style="width: 90%; margin: 15rpx auto 0; "
				:text="userData.addressId?' 修改地址':'保存地址'"></up-button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import { vpAddressService, Service } from '@/Service/vp/vpAddressService'
	import { onLoad } from '@dcloudio/uni-app';
	let userData = ref({
		addressId: '',
		phone: '',
		name: '',
		address: '',
		isDefault: false,
		province: '',
		city: '',
		region: '',
		primaryAddress: ''
	})


	onLoad((data : any) => {
		if (data.addressId) {
			userData.value.addressId = data.addressId
			uni.setNavigationBarTitle({
				title: '修改地址'
			})
			getData()
		}
	})


	const getData = () => {
		vpAddressService.GetUserAddressInfo(userData.value.addressId).then(res => {
			if (res.code == 0) {
				userData.value = res.data.addressInfo
				userData.value.isDefault = res.data.addressInfo.isDefault == 1 ? true : false
				userData.value.primaryAddress = res.data.addressInfo.province + res.data.addressInfo.city + res.data.addressInfo.region
			} else {
				Service.Msg(res.msg)
			}
		})
	}

	const location = () => {
		uni.getLocation({
			type: 'wgs84',
			success: function (res) {
				uni.chooseLocation({
					latitude: res.latitude,
					longitude: res.longitude,
					success: function (res) {
						console.log(res);
						userData.value.province = res.address.split('省')[0] + '省'
						userData.value.city = res.address.split('省')[1].split('市')[0] + '市'
						userData.value.region = res.address.split('省')[1].split('市')[1].split('区')[0] + '区'
						userData.value.primaryAddress = userData.value.province + userData.value.city + userData.value.region
						userData.value.address = res.name
					}
				});
			}
		});


	}

	const switchChange = () => {

	}


	const save = () => {
		if (userData.value.name == '') {
			Service.Msg('请输入姓名')
			return
		}
		if (userData.value.phone == '') {
			Service.Msg('请输入电话号')
			return
		}
		if (userData.value.province == '') {
			Service.Msg('请选择地址')
			return
		}
		if (userData.value.address == '') {
			Service.Msg('请输入详细地址')
			return
		}

		let obj = {
			addressId: userData.value.addressId,
			name: userData.value.name,
			phone: userData.value.phone,
			province: userData.value.province,
			city: userData.value.city,
			region: userData.value.region,
			address: userData.value.address,
			isDefault: userData.value.isDefault ? 1 : 0
		}
		vpAddressService.UpdateAddress(obj).then(res => {
			if (res.code == 0) {
				Service.Msg( userData.value.addressId?'修改成功!': '添加成功!')
				setTimeout(() => {
					Service.GoPageBack()
				}, 1000)
			} else {
				Service.Msg(res.msg)
			}
		})

	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
</style>