smart-admin/rc-busness/pages/useraddress/editaddress.vue

<template>
	<div>
		<Myheader></Myheader>
		<div class="rc-top"></div>
		<div class="usercontend">
			<div class="rc-max-width--xl">
				<div class="rc-max-width--xl rc-people">
					<span>收货人:</span>
					<input type="text" placeholder="" v-model="recipient" />
				</div>
				<div class="rc-max-width--xl rc-people rc-phone">
					<span>手机号码:</span>
					<input type="text" placeholder="" v-model="recipientPhone" />
				</div>
				<div class="rc-max-width--xl rc-people rc-address">
					<span>所在地区:</span>
					<addressInput @getmenu="onGetMenu" @closeDialog="handleClose1" :dialogInfo1="dialogInfo1" :defaultValues="defaultValues"></addressInput>
				</div>
				<div class="rc-max-width--xl rc-people rc-useaddress">
					<span>详细地址:</span>
					<input type="text" placeholder="" v-model="detailAddress" />
				</div>
			</div>
			<!-- <div class="rc-button">
      <div class="rc-footbutton" @click="onAdd()">
        <span>新增收货地址</span>
      </div>
    </div> -->
		</div>
		<div class="rc-button">
			<span @click="openclose()">取消</span>
			<em @click="register()">确认</em>
		</div>
		<MyFooter></MyFooter>
	</div>
</template>

<script>
import Myheader from '~/components/header.vue';
import MyFooter from '~/components/rc-footer.vue';
import { editupdate } from '../../ajax/getData';
import addressInput from '~/components/addressInput.vue';
import { mapState } from 'vuex';
export default {
	data() {
		return {
			chosenAddressId: '1',
			checked: true,
			// userid: null,
			dialogInfo1: false,
			usermessage: null,
			useradrname: [],
			detailAddress: '',
			recipientPhone: '',
			recipient: '',
			addressid: '',
			provinceId: '',
			cityId: '',
			districtId: '',
			defaultValues: [],
			list: [
				{
					id: 1,
					name: '张三',
					tel: '13000000000',
					address: '浙江省杭州市西湖区文三路 138 号',
					isDefault: true
				},
				{
					id: 2,
					name: '李四',
					tel: '1310000000',
					address: '浙江省杭州市拱墅区莫干山路 50 号'
				},
				{
					id: 3,
					name: '李四',
					tel: '1310000000',
					address: '浙江省杭州市拱墅区莫干山路 50 号'
				}
			]
		};
	},
	methods: {
		onGetMenu(values) {
			let user;
			console.log(values, +'111111');
			console.log(typeof values[2]);
			const objToStr = JSON.stringify(values[2]);
			console.log(objToStr);
			console.log(typeof objToStr);
			if (objToStr.includes('-')) {
				console.log('===包含符号');
				let user = values[2].id;
				user = user.split('-');
				this.provinceId = user[0];
				this.cityId = user[1];
				this.districtId = user[2];
			} else {
				this.provinceId = values[0].id;
				this.cityId = values[1].id;
				this.districtId = values[2].id;
				console.log('---不包含符号');
			}
			//  let user=values[2].id;
			//    user=user.split('-');

			console.log(this.provinceId, this.cityId, this.districtId);
		},
		openclose() {
			this.$router.push({
				path: '/useraddress/openaddress'
			});
		},
		handleClose1() {
			this.dialogInfo1 = false;
		},

		register() {
			console.log(this.tel);
			if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.recipientPhone) || this.recipientPhone === '') {
				this.$message({
					type: 'warning',
					message: '手机号码输入有误'
				});
				return;
			} else if (this.alladdress === '') {
				this.$message({
					type: 'warning',
					message: '请输入详细地址'
				});
				return;
			} else if (this.userpeople === '') {
				this.$message({
					type: 'warning',
					message: '请输入姓名'
				});
				return;
			} else if (this.provinceId === '') {
				this.$message({
					type: 'warning',
					message: '请填写省区'
				});
				return;
			} else if (this.userpeople === '') {
				this.$message({
					type: 'warning',
					message: '请填写市区'
				});
				return;
			} else if (this.userpeople === '') {
				this.$message({
					type: '请填写街道',
					message: '请输入姓名'
				});
				return;
			} else {
				this.edupdate();
			}
		},

		//更改
		async edupdate(item) {
			let useradd = {
				memberId: this.userid,
				id: this.id,
				provinceId: this.provinceId, //省份id,
				cityId: this.cityId, //城市id,
				districtId: this.districtId, //区域id,
				detailAddress: this.detailAddress, //详细地址
				recipient: this.recipient, //收件人姓名
				recipientPhone: this.recipientPhone //收件人电话
			};
			let data = await editupdate(useradd);
			if (data) {
				this.$message({
					type: 'warning',
					message: '地址修改成功'
				});
				this.$router.push({
					path: '/useraddress/openaddress'
				});
			}
		}

		//删除地址
		// async userdelete(item) {
		//   console.log(item.memberId);
		//   let data = await editdelete(this.userid, item.id);
		//  this.editaddress(this.usermessage);
		//   console.log(data);
		// },

		//查询人的所有地址
		// async editaddress(user) {
		//  user.data.id=844350
		//     let data = await selectaddress(user.data.id);
		//     this.list=data.data;
		//     console.log(this.list);
		//   console.log(data);
		// },
	},
	components: {
		Myheader,
		MyFooter,
		addressInput
	},
	created() {
		let provinceName = this.$route.query.provinceName;
		let districtName = this.$route.query.districtName;
		let cityName = this.$route.query.cityName;
		this.provinceId = this.$route.query.provinceId;
		this.districtId = this.$route.query.districtId;
		this.cityId = this.$route.query.cityId;
		this.defaultValues = [
			{
				id: this.provinceId,
				name: provinceName
			},
			{
				id: this.cityId,
				name: cityName
			},
			{
				id: this.districtId,
				name: districtName
			}
		];
	},
	mounted() {
		// this.userid = JSON.parse(localStorage.getItem('userInfo')).data.id;
		this.recipient = this.$route.query.recipient;
		this.recipientPhone = this.$route.query.recipientPhone;
		this.detailAddress = this.$route.query.detailAddress;
		this.id = this.$route.query.id;
	},
	computed:{
		...mapState({
			userid : state => state.user.userInfo.id,
		})
	}
};
</script>

<style lang="less" scoped>
@import url('../../assets/css/addaddress.less');
</style>