xingmingyi_applet/pages/user/address/editAddres.vue

<template>
	<view id="editAddres">
		<view class="editBox">
			<view class="inBox dfsb">
				<text>收货人</text>
				<input focus type="text" v-model="newsInfo.name" placeholder="请填写收货人姓名" />
			</view>
			<view class="inBox dfsb">
				<text>手机号码</text>
				<input type="text" v-model="newsInfo.phone" placeholder="请填写收货人手机号码" />
			</view>
			<view @tap="addressShow = true" class="inBox dfsb">
				<text>所在地区</text>
				<input disabled type="text" v-model="newsInfo.address" placeholder="省市区、乡镇" />
				<pickerAddress v-model="addressShow" @confirm="addresspick" />
				<u-icon size="16" name="arrow-right"></u-icon>
			</view>
			<view class="inBox spec dffd">
				<text class="specbot">详细地址</text>
				<input type="text" v-model="newsInfo.detail" placeholder="街道、、小区、楼牌号、单元室等" />
			</view>
		</view>
		<view @tap="newsInfo.is_check = !newsInfo.is_check" class="editBox dfsb specbox">
			<text>设为默认</text>
			<u-switch activeColor="#5FB25A" v-model="value"></u-switch>
			<!-- <image :src="newsInfo.is_check == 1 ? require('@/static/img/common/mraddsel.svg') : require('@/static/img/common/mradd.svg')" mode=""></image> -->
		</view>
		<!-- #ifdef MP -->
		<view v-if="state" @click="delAdd" class="clickbtn delbtn promain ">删除收货地址</view>
		<view @click="saveAdd" class="clickbtn">保存</view>
		<!-- #endif -->
		<!-- #ifndef MP -->
		<view v-if="state" @click="delAdd" class="delbtn promain">删除收货地址</view>
		<view @click="saveAdd" class="clickbtn">保存</view>
		<!-- #endif -->
	</view>
</template>

<script>
import pickerAddress from '@/common/othCom/liudx-pickerAddress/index.vue';
export default {
	data() {
		return {
			newsInfo: {
				name: '',
				phone: '',
				address: '',
				detail: '',
				//选中地址
				is_check: false // true选中 false 未选中
			},
			value: '',
			//添加还是编辑
			state: true, //false 添加  true编辑
			//三级联动
			addressShow: false,
			form: {
				province: '',
				city: '',
				area: ''
			}
		};
	},
	onNavigationBarButtonTap() {
		this.saveAdd();
	},
	onLoad(opt) {
		console.log(opt);
		if (opt.type == 'edit') {
			this.state = true;
			uni.setNavigationBarTitle({
				title: '编辑地址'
			});
			this.id = opt.id;
			this.onload();
		} else {
			this.state = false;
			uni.setNavigationBarTitle({
				title: '添加地址'
			});
		}
	},
	methods: {
		// /、选择地址
		addresspick(obj) {
			let arr = ['province', 'city', 'area'];
			let place = '';
			arr.map(key => {
				this.form[key] = obj[key].id;
				place += obj[key].name;
			});
			this.newsInfo.address = place;
		},
		saveAdd() {
			let url = '';
			if (!this.newsInfo.name) return this.$api.toast('请输入姓名');
			if (!this.newsInfo.phone) return this.$api.toast('请输入手机号');
			if (!this.form) return this.$api.toast('请选择地址');
			if (!this.newsInfo.detail) return this.$api.toast('请输入详细地址');

			this.$api
				.request('user_address/setAddress', {
					name: this.newsInfo.name,
					phone: this.newsInfo.phone,
					province_id: this.form.province,
					city_id: this.form.city,
					area_id: this.form.area,
					detail: this.newsInfo.detail,
					is_default: this.newsInfo.is_check ? 1 : 0, //1 默认 2 不默认
					id: this.id || ''
				})
				.then(data => {
					if (data.code == 200) {
						// this.newsInfo=data.data.address;
						this.$api.toast(data.msg);
						setTimeout(res=>{
							uni.navigateBack({
								delta: 1
							});
						},600)
					} else {
						this.$api.toast(data.msg);
					}
				})
		},
		delAdd() {
			this.$api
				.request('user_address/addressDel', {
					id: this.id
				})
				.then(data => {
					this.$api.toast(data.msg);
					if (data.code == 200) {
						setTimeout(res => {
							uni.navigateBack({
								delta: 1
							});
						}, 800);
					}
				})
		},
		onload() {
			this.$api
				.request('user_address/addressInfo', {
					id: this.id
				})
				.then(data => {
					if (data.code == 200) {
						this.newsInfo.name = data.data.name;
						this.newsInfo.phone = data.data.phone;
						this.form.province = data.data.province_id;
						this.form.city = data.data.city_id;
						this.form.area = data.data.area_id;
						this.newsInfo.address = data.data.mergename;
						this.newsInfo.detail = data.data.detail;
						this.newsInfo.is_check = data.data.is_default == 1 ? true : false;
					} else {
						this.$api.toast(data.msg);
					}
				})
		}
	},
	components: {
		pickerAddress
	}
};
</script>

<style lang="scss" scoped>
#editAddres {
	padding: 30rpx 0rpx;
	.editBox {
		background-color: #fff;
		padding: 0 30rpx;
		.inBox {
			padding: 30rpx 0;
			border-bottom: 1px solid $bordermain;
			text {
				min-width: 140rpx;
				font-size: 30rpx;
			}
			input {
				width: 100%;
				flex: 1;
				font-size: 30rpx;
				text-align: right;
			}
			.specbot {
				margin-bottom: 30rpx;
			}
		}
		.spec {
			input {
				text-align: left;
			}
		}
	}
	.specbox {
		margin: 30rpx 0;
		padding: 30rpx;
		image {
			width: 90rpx;
			height: 40rpx;
		}
	}
	.clickbtn {
		width: 690rpx;
		margin: 30rpx 32rpx;
		border-radius: 11rpx;
	}
	.delbtn {
		background: #fff;
		padding: 30rpx;
	}
}
</style>