huihouqin-new-ph/pages/address/add.vue

<template>
	<view>
		<view class="address-box">
			<view class="address-box-list">
				<view class="address-box-label">
					姓名
				</view>
				<view class="address-box-input">
					<input v-model="name" placeholder="请输入" type="text">
				</view>
			</view>
			<view class="address-box-list">
				<view class="address-box-label">
					手机号
				</view>
				<view class="address-box-input">
					<input v-model="phone" placeholder="请输入" type="tel">
				</view>
			</view>	
			<!-- <view class="address-box-list">
				<view class="address-box-label">
					地址
				</view>
				<view class="address-box-input">
					<picker mode="multiSelector" @change="bindChange" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
						<view class="uni-input" v-if="selectAddr.length > 0">{{addrStr}}</view>
						<view class="uni-input" v-if="selectAddr.length == 0" style="color:grey;">{{addrStr}}</view>
					</picker>
				</view>
			</view> -->
			<view class="address-box-list">
				<view class="address-box-label">
					详细地址
				</view>
				<view class="address-box-input">
					<input v-model="content" placeholder="请输入" type="text">
				</view>
			</view>
			
		</view>
		
		<view class="address-btn" @click="saveBtn">
			保 存
		</view>
		<view v-if="id > 0" class="address-btn-del" @click="delAddr">
			删 除
		</view>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				id: 0,
				name: '',
				phone: '',
				content: '',
				// addressId1: 0,
				// addressId2: 0,
				multiArray: [],
				multiArray2: [],
				multiIndex: [0, 0],
				addrStr: '请选择',
				selectAddr: [],
				addrs: [],
				// addrs: [
				// 	{
				// 		id: 1,
				// 		name: '亚洲',
				// 		pid: 0
				// 	},
				// 	{
				// 		id: 2,
				// 		name: '欧洲',
				// 		pid: 0
				// 	},
				// 	{
				// 		id: 3,
				// 		name: '中国',
				// 		pid: 1
				// 	},
				// 	{
				// 		id: 4,
				// 		name: '日本',
				// 		pid: 1
				// 	},
				// 	{
				// 		id: 5,
				// 		name: '英国',
				// 		pid: 2
				// 	},
				// 	{
				// 		id: 6,
				// 		name: '法国',
				// 		pid: 2
				// 	}
				// ]
			}
		},
		onLoad(option) {
			this.id = option.id?option.id:0;
			if(this.id > 0){
				uni.setNavigationBarTitle({
				    title: '编辑收货地址'
				});
				this.getAddrDetail();
			}
			// this.getAddr();
		},
		onShow() {
			var that = this;
			app.ajaxReadyCallback = res => {  //各个接口统一回调方法
				var apiname = res.data.apiname;
				console.log(res);
				if(apiname == 'addr'){
					this.addrs = res.data.data;
					that.initAddr();
				} else if (apiname == 'addrDetail'){
					this.name = res.data.data.name;
					this.phone = res.data.data.phone;
					this.content = res.data.data.content;
					// this.addressId1 = res.data.data.addressId1;
					// this.addressId2 = res.data.data.addressId2;
					// this.selectAddr = [this.addressId1,this.addressId2];
					this.formatSelect();
				} else if (apiname == 'saveAddr') {
					uni.showToast({
						title: '保存成功',
						icon: 'none',
						duration: 2000
					})
					setTimeout(function(){
						uni.navigateBack({
						    delta: 1
						});
					},1000);
				} else if (apiname == 'delAddr'){
					uni.showToast({
						title: '删除成功',
						icon: 'none',
						duration: 2000
					})
					setTimeout(function(){
						uni.navigateBack({
						    delta: 1
						});
					},1000);
				}
			}
		},
		methods: {
			/* formatSelect(){
				const address = [];
				this.selectAddr.forEach((item) => {
					this.addrs.forEach((item2) => {
						if(item == item2.id){
							address.push(item2.name);
						}
					});
				});
				
				if(address.length > 0){
					this.addrStr = address.join(',');
				}else{
					this.addrStr = '请选择';
				}
				this.addressId1 = this.selectAddr[0];
				this.addressId2 = this.selectAddr[1];
				console.log(address,this.addrStr,this.selectAddr);
			},
			initAddr(){
				const arra1 = [];
				const arra2 = [];
				const arrb1 = [];
				const arrb2 = [];
				this.addrs.forEach((item) => {
					if(item.pid == 0){
						arra1.push(item.name);
						arrb1.push(item.id);
					}
				});
				this.addrs.forEach((item) => {
					if(item.pid == arrb1[0]){
						arra2.push(item.name);
						arrb2.push(item.id);
					}
				});
				this.multiArray.push(arra1);
				this.multiArray.push(arra2);
				this.multiArray2.push(arrb1);
				this.multiArray2.push(arrb2);
				
				this.formatSelect();
			},
			changeAddr(id){
				const arra1 = this.multiArray[0];
				const arra2 = [];
				const arrb1 = this.multiArray2[0];
				const arrb2 = [];
				this.addrs.forEach((item) => {
					if(item.pid == id){
						arra2.push(item.name);
						arrb2.push(item.id);
					}
				});
				this.multiArray = [];
				this.multiArray2 = [];
				this.multiArray.push(arra1);
				this.multiArray.push(arra2);
				this.multiArray2.push(arrb1);
				this.multiArray2.push(arrb2);
			},
			bindMultiPickerColumnChange: function(e) {
				console.log(e);
				console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value);
				this.multiIndex[e.detail.column] = e.detail.value;
				switch (e.detail.column) {
					case 0: //拖动第1列
						this.changeAddr(this.multiArray2[0][this.multiIndex[0]]);
						this.multiIndex.splice(1, 1, 0) //将multiIndex数据中的第2列初始化
						this.selectAddr[0] = this.multiArray2[0][this.multiIndex[0]];
						this.selectAddr[1] = this.multiArray2[1][this.multiIndex[1]];
						break
					case 1: //拖动第2列
						this.selectAddr[1] = this.multiArray2[1][this.multiIndex[1]];
						break
				}
				console.log(this.selectAddr,this.multiIndex);
				this.formatSelect();
				this.$forceUpdate();
			},
			bindChange: function(e){
				this.multiIndex = e.detail.value;
				this.selectAddr[0] = this.multiArray2[0][this.multiIndex[0]];
				this.selectAddr[1] = this.multiArray2[1][this.multiIndex[1]];
				this.formatSelect();
			}, */
			// getAddr(){
			// 	app.ajax({
			// 		url: app.globalData.serverUrl + 'shopAddress/getAddress',
			// 		type: 'POST',
			// 		apiname: 'addr'
			// 	});
			// },
			getAddrDetail(){
				app.ajax({
					url: app.globalData.serverUrl + 'shopAddress/detail',
					type: 'POST',
					apiname: 'addrDetail',
					data: {
						id: this.id
					}
				});
			},
			delAddr(){
				var that = this;
				uni.showModal({
				    title: '提示',
				    content: '确定要删除此地址吗？',
				    success: function (res) {
				        if (res.confirm) {
				            app.ajax({
				            	url: app.globalData.serverUrl + 'shopAddress/del',
				            	type: 'POST',
				            	apiname: 'delAddr',
				            	data: {
				            		id: that.id
				            	}
				            });
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			saveBtn(){
				if(!this.name){
					uni.showToast({
						title: '请填写姓名',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if(!this.phone){
					uni.showToast({
						title: '请填写手机号',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				// if(!this.addressId1||!this.addressId2){
				// 	uni.showToast({
				// 		title: '请选择地址',
				// 		icon: 'none',
				// 		duration: 2000
				// 	})
				// 	return;
				// }
				if(!this.content){
					uni.showToast({
						title: '请填写详细地址',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				
				let param = {
					id: this.id,
					name: this.name,
					phone: this.phone,
					// address_id1: this.addressId1,
					// address_id2: this.addressId2,
					content: this.content
				}
				let url = app.globalData.serverUrl + 'shopAddress/add';
				if(this.id > 0){
					url = app.globalData.serverUrl + 'shopAddress/update';
				}
				app.ajax({
					url: url,
					type: 'POST',
					apiname: 'saveAddr',
					data: param
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.address-box{
		background-color: #FFFFFF;
		padding: 0 20rpx;
		margin-top: 20rpx;
	}
	.address-box-list{
		height: 90rpx;
		line-height: 90rpx;
		border-bottom: 1rpx solid #f2f2f2;
	}
	.address-box-list:last-child{
		border: 0;
	}
	.address-box-label{
		display: inline-block;
		width: 150rpx;
		height: 100%;
		float: left;
	}
	.address-box-input{
		display: inline-block;
		width: 550rpx;
		height: 100%;
		float: right;
	}
	.address-box-input input{
		height: 70rpx;
		margin-top: 10rpx;
	}
	
	.address-btn{
		width: 700rpx;
		height: 70rpx;
		line-height: 70rpx;
		color: #FFFFFF;
		background-color: $theme-color;
		border-radius: 10rpx;
		margin: 50rpx auto 20rpx auto;
		text-align: center;
	}
	
	.address-btn-del{
		width: 700rpx;
		height: 70rpx;
		line-height: 70rpx;
		color: $theme-color;
		background-color: #FFFFFF;
		border: 1rpx solid $theme-color;
		border-radius: 10rpx;
		margin: 10rpx auto;
		text-align: center;
	}
</style>