bjhedasx/webcode/uni-app/pages/user/address/edit.vue

<template>
	<view class="user_address_edit_page bg-ff">
		<view class="page_content">
			<view class="padding-lr-30">

				<view class="item flex align-center border-bottom-e6">
					<text class="text text-28">收货人</text>
					<input class="margin-left-30 flex-one text-28" v-model="data.linkman" type="text"
						placeholder="请填写收货人姓名" placeholder-class="text-28 text-b3">
				</view>

				<view class="item flex align-center border-bottom-e6">
					<text class="text text-28">联系方式</text>
					<input class="margin-left-30 flex-one text-28" v-model="data.mobile_phone" type="number"
						placeholder="请填写收货手机号码" placeholder-class="text-28 text-b3">
				</view>

				<view class="item flex align-center border-bottom-e6">
					<text class="text text-28">所在地区</text>
					<view class="margin-left-30 flex-one">
						<ty-bar-area :value="value" @confirm="districtConfirm"></ty-bar-area>
					</view>
				</view>

				<view class="item flex align-center border-bottom-e6">
					<text class="text text-28">详细地址</text>
					<input class="margin-left-30 flex-one text-28" v-model="data.address" type="text"
						placeholder="详细地址需填写楼栋层或房间号" placeholder-class="text-28 text-b3">
					<text class="margin-left-30 tyIcon-dingwei2 text-40 text-main" @click="location"></text>
				</view>

				<view class="item flex align-center justify-between border-bottom-e6">
					<text class="text text-28">设为默认</text>
					<text class="margin-left-30"
						:class="data.is_default == 0 ? 'tyIcon-quan text-34 text-cc' : 'tyIcon-xuanzhong1 text-40 text-main'"
						@click="defaultChange"></text>
				</view>

				<view class="btns width-100p padding-lr-30">
					<view class="line-height-80 radius-40 bg-main text-center text-30 text-ff" @click="submit">
						{{data.id ? '确认' : '保存'}}
					</view>
					<view class="margin-top-20 line-height-80 radius-40 border-ed text-center text-28 text-66"
						@click="del" v-if="data.id">删除地址</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				value: [],
				data: {
					id: '',
					linkman: '',
					mobile_phone: '',
					province_id: 1,
					city_id: 101,
					area_id: 1001,
					address: '',
					lat: '',
					lng: '',
					is_default: 0, //0--不默认勾选默认地址 1--默认勾选默认地址
				}
			}
		},
		onLoad(options) {
			this.data.id = options.id || 0;
			if (!this.data.id) {
				this.cn.setTitle('新增收货地址')
			}
		},
		onReady() {
			if (this.data.id) {
				this.rq.getData('base/user/api/Address/getAddressData', {
					address_id: this.data.id
				}).then(res => {
					// 编辑渲染
					this.data = res.data.data

					this.value = [res.data.data.province_id, res.data.data.city_id, res.data.data.area_id]
				})
			} else {
				this.rq.getData('base/user/api/Address/hasAddress', {
					address_id: this.data.id
				}).then(res => {
					if (res.data.is_frist == 1) {
						this.data.is_default = 1
					}
				})
			}
		},
		methods: {
			//切换默认
			defaultChange() {
				this.data.is_default = this.data.is_default == 0 ? 1 : 0
			},

			//省市区确认
			districtConfirm(e) {
				this.data.province_id = e.province_id;
				this.data.city_id = e.city_id;
				this.data.area_id = e.area_id;
				// this.data.province = e.province;
				// this.data.city = e.city;
				// this.data.area = e.area;
			},

			// 定位
			location() {
				uni.chooseLocation({
					success: (res) => {
						console.log(res)
						this.data.lat = res.latitude
						this.data.lng = res.longitude
						this.data.address = res.name
					},
					fail: (res) => {
						console.log(res)
					}
				})

				// uni.getLocation({
				// 	type: 'wgs84',
				// 	success: (res) => {
				// 		this.data.lat = res.latitude;
				// 		this.data.lng = res.longitude;

				// 	}
				// })
			},

			//提交
			submit() {
				if (!this.data.linkman) {
					this.cn.toast('请填写联系人')
					return false
				}
				if (!this.data.mobile_phone) {
					this.cn.toast('请填写联系方式')
					return false
				}
				if (!this.data.address) {
					this.cn.toast('请填写详细地址')
					return false
				}
				this.rq.getData('base/user/api/Address/addressUpdate', this.data).then(res => {
					if (res.code == 0) {
						this.cn.toast('保存成功')
						setTimeout(res => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					}
				})
			},

			//删除
			del() {
				this.cn.confirm('确定删除该地址').then(res => {
					if (res.confirm) {
						this.rq.getData('base/user/api/Address/delAddress', {
							address_id: this.data.id
						}).then(res => {
							if (res.code == 0) {
								this.cn.toast(res.msg);
								uni.navigateBack({
									delta: 1
								})
							}
						})
					}
				})
			},
		}
	}
</script>
<style scoped>
	.item {
		height: 100rpx;
		line-height: 100rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #ededed;
	}

	.text {
		width: 115rpx;
	}

	.btns {
		position: fixed;
		left: 0;
		bottom: calc(30rpx + env(safe-area-inset-bottom));
	}
</style>