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

<template>
	<div>
		<Myheader></Myheader>
		<div class="rc-top"></div>
		<div class="usercontend">
			<div class="rc-max-width--xl">
				<h2>新增收货地址</h2>
				<div class="rc-max-width--xl rc-people rc-full-width">
					<span>收货人:</span>
					<input type="text" placeholder="请输入收货人姓名" v-model="userpeople" />
				</div>
				<div class="rc-max-width--xl rc-people rc-phone rc-full-width">
					<span>手机号码:</span>
					<input type="text" placeholder="请输入11位手机号码" v-model="tel" :error-message="usertel" />
				</div>
				<div class="rc-max-width--xl rc-people rc-address rc-full-width">
					<span>所在地区:</span>
					<!-- <input type="text" placeholder="请选择所在地区"> -->
					<addressInput @getmenu="onGetMenu" @closeDialog="handleClose1" :dialogInfo1="dialogInfo1"></addressInput>
				</div>
				<div class="rc-max-width--xl rc-people rc-useaddress">
					<span>详细地址:</span>
					<input type="text" placeholder="小区、门牌号等" class="userinput" v-model="alladdress" />
					<textarea rows="10" cols="30" placeholder="请输入详细地址" v-model="alladdress"></textarea>
				</div>
			</div>
		</div>
		<div class="rc-button">
			<span @click="openclose()">取消</span>
			<em @click="register()">确认</em>
		</div>
		<!-- <div class="rc-button">
      <div class="rc-footbutton" @click="onAdd()">
        <span>新增收货地址</span>
      </div>
    </div> -->

		<MyFooter></MyFooter>
	</div>
</template>

<script>
import Myheader from '~/components/header.vue';
import addressInput from '~/components/addressInput.vue';
import MyFooter from '~/components/rc-footer.vue';
import { editaddress } from '../../ajax/getData';
import { mapState } from 'vuex';
export default {
	data() {
		return {
			chosenAddressId: '1',
			usermessage: null,
			checked: true,
			tel: '',
			alladdress: '',
			// userid: null,
			usermessage: null,
			dialogInfo1: false,
			userpeople: '',
			provinceId: '',
			cityId: '',
			districtId: '',
			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) {
			console.log(values, +'111111');
			let user = values[2].id;
			user = user.split('-');
			this.provinceId = user[0];
			this.cityId = user[1];
			this.districtId = user[2];
		},
		handleClose1() {
			this.dialogInfo1 = false;
		},
		register() {
			if (this.alladdress === '') {
				this.$message({
					type: 'warning',
					message: '请输入详细地址 '
				});
				return;
			}
			if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.tel) || this.tel === '') {
				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.cityId === '') {
				this.$message({
					type: 'warning',
					message: '请选择市区'
				});
				return;
			} else if (this.districtId === '') {
				this.$message({
					type: 'warning',
					message: '请选择详细的区域'
				});
				return;
			} else {
				this.editaddress();
			}
		},
		openclose() {
			this.$router.push({
				path: '/useraddress/openaddress'
				// query: {
				//   id: userid,
				// },
			});
		},

		//添加
		async editaddress(item) {
			// this.userid
			let useradd = {
				memberId: this.userid,
				detailAddress: this.alladdress,
				recipient: this.userpeople,
				recipientPhone: this.tel,
				provinceId: this.provinceId,
				cityId: this.cityId,
				districtId: this.districtId
			};
			let data = await editaddress(useradd);
			if (data) {
				console.log(data);
				if (data) {
					this.$message({
						type: 'warning',
						message: '地址添加成功'
					});
					this.$router.push({
						path: '/useraddress/openaddress'
						// query: {
						//   id: userid,
						// },
					});
				}
			}
		}

		//查询人的所有地址
		// 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
	},
	computed: {
		usertel() {
			if (this.tel === '') {
				return '';
			} else if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.tel)) {
				return '手机号格式错误';
			} else {
				return '';
			}
		},
		...mapState({
			userid : state => state.user.userInfo.id,
		})
	},

	mounted() {
		this.usermessage = JSON.parse(localStorage.getItem('userInfo'));
		//  this.editaddress(this.usermessage);
		// this.userid = this.usermessage.data.id;
		//地址的查询
		// this.usermessage = JSON.parse(localStorage.getItem("userInfo"));
		//    this.editaddress(this.usermessage);
		// this.userid = this.usermessage.data.id;
	}
};
</script>

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