上传文件至 'pages/mine/address'

pages/mine/address/form.vue

@@ -0,0 +1,446 @@
+<template>
+	<view class="app-container">
+		<view class="row">
+			<view class="title">收货人</view>
+			<view class="right input"><input type="text" placeholder="请输入收货人" v-model="formData.name"></view>
+		</view>
+		<view class="row">
+			<view class="title">手机号码</view>
+			<view class="right input"><input type="number" placeholder="请输入手机号码" v-model="formData.phone"></view>
+		</view>
+		<view class="row">
+			<view class="title">所在地区</view>
+			<view class="right">
+				<picker @change="onRegionChange" v-model="regionValue" mode="region">
+					<view class="picker">
+						<view v-if="regionValue.length">{{regionValue[0] + '/' +regionValue[1] + '/' +regionValue[2]}}
+						</view>
+						<view v-else style="color: #666666;">请选择省/市/区</view>
+						<image src="@/static/icon/right.png"></image>
+					</view>
+				</picker>
+			</view>
+		</view>
+		<view class="row">
+			<view class="title">所在街道</view>
+			<view class="right">
+				<picker @change="onStreetChange" :value="streetValue" :range="streetList" range-key="name"
+					:disabled="!regionValue[2]">
+					<view class="picker">
+						<view v-if="streetValue !== ''">{{streetList[streetValue].name}}</view>
+						<view v-else style="color: #666666;">请选择街道</view>
+						<image src="@/static/icon/right.png"></image>
+					</view>
+				</picker>
+			</view>
+		</view>
+
+		<view class="row">
+			<view class="title">收货地址</view>
+			<view class="right textarea">
+				<textarea placeholder="请输入收货地址" auto-height v-model="formData.address"></textarea>
+				<view class="r" @tap="getLocation">
+					<image src="@/static/icon/address2.png"></image>定位
+				</view>
+			</view>
+		</view>
+		<view class="row">
+			<view class="title">门牌号</view>
+			<view class="right input"><input type="text" placeholder="请输入门牌号" maxlength="15" v-model="formData.houseNo">
+			</view>
+		</view>
+		<view class="row">
+			<view class="title">设为默认地址</view>
+			<view class="right default">
+				<switch @change="switchChange" color="#FF3F42" v-model="formData.defaultAddr"
+					:checked="formData.defaultAddr" style="transform:scale(0.7)" />
+			</view>
+		</view>
+		<view class="button red" @tap="submitForm">保存</view>
+		<view class="button white" v-if="editId" @tap="isDialog = true">删除</view>
+
+		<modal-dialog showText="确定要删除该地址吗？" :isShowDialog="isDialog" @cancel="isDialog = false"
+			@confirm="confirmDelete"></modal-dialog>
+	</view>
+</template>
+
+<script>
+	import {
+		mapState
+	} from 'vuex';
+	import {
+		getArea
+	} from '@/utils/utils.js';
+	import modalDialog from '@/components/modalDialog.vue';
+
+	export default {
+		components: {
+			modalDialog
+		},
+		data() {
+			return {
+				editId: null, // 编辑的id
+				isDialog: false, // 是否显示删除弹窗
+				regionValue: [], // 省市区值
+				streetList: [],
+				streetValue: '',
+				formData: { // 表单数据
+					name: '',
+					phone: '',
+					province: '',
+					city: '',
+					area: '',
+					street: '',
+					address: '',
+					houseNo: '',
+					defaultAddr: false,
+				},
+				canClickSave: true, // 能否点击提交
+			}
+		},
+		computed: {
+			...mapState(['userInfo', 'isLogin', 'userId'])
+		},
+		onLoad({
+			id,
+			addressData
+		}) {
+			this.editId = id;
+			if (id) {
+				uni.setNavigationBarTitle({
+					title: '编辑收货地址'
+				})
+				this.getAddressData();
+			}
+			if (addressData) {
+				addressData = JSON.parse(addressData);
+				this.formData = {
+					name: addressData.name,
+					phone: addressData.phone,
+					province: addressData.province,
+					city: addressData.city,
+					area: addressData.area,
+					address: addressData.address,
+					houseNo: addressData.houseNo,
+					defaultAddr: addressData.defaultAddr,
+				}
+				this.regionValue = [addressData.province, addressData.city, addressData.area];
+				this.getStreetList();
+			}
+		},
+		methods: {
+			// 获取地址信息
+			getAddressData() {
+				this.$axios({
+					url: '/user/address/detail',
+					method: 'get',
+					params: {
+						userAddressId: this.editId
+					}
+				}).then(res => {
+					this.formData = {
+						name: res.data.name,
+						phone: res.data.phone,
+						province: res.data.province,
+						city: res.data.city,
+						area: res.data.area,
+						address: res.data.address,
+						houseNo: res.data.houseNo,
+						defaultAddr: res.data.defaultAddr,
+					}
+					this.regionValue = [res.data.province, res.data.city, res.data.area];
+					this.getStreetList(res.data.street);
+				})
+			},
+
+
+			// 地图选点
+			getLocation() {
+
+				let that = this;
+				uni.chooseLocation({
+					success: function(res) {
+						let SSQ_value = getArea(res.address);
+						if (!SSQ_value.Province) {
+							SSQ_value.Province = SSQ_value.City;
+						}
+						that.formData.province = SSQ_value.Province;
+						that.formData.city = SSQ_value.City;
+						that.formData.area = SSQ_value.Country;
+						let regionValue = [];
+						regionValue.push(SSQ_value.Province);
+						regionValue.push(SSQ_value.City);
+						regionValue.push(SSQ_value.Country);
+						that.regionValue = regionValue;
+						that.formData.address = res.address.slice(res.address.indexOf(SSQ_value.Country) +
+							SSQ_value.Country.length) + res.name;
+						that.getStreetList();
+						that.streetValue = '';
+						that.formData.street = '';
+					},
+					fail: function(res) {
+						uni.getSetting({
+							success: function(res) {
+								if (!res.authSetting['scope.userLocation']) {
+									uni.showModal({
+										title: '是否授权当前位置',
+										content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
+										success(tip) {
+											if (tip.confirm) {
+												uni.openSetting({
+													success: function(data) {
+														if (data.authSetting[
+																"scope.userLocation"
+																] === true) {
+															that.$successToast(
+																'授权成功');
+															setTimeout(() => {
+																that
+															.getLocation();
+															}, 1000)
+														}
+													}
+												})
+											}
+										}
+									})
+								}
+							}
+						})
+					}
+				});
+			},
+
+			// 切换省市区
+			onRegionChange(e) {
+				console.log(e.detail);
+				this.regionValue = e.detail.value;
+				this.formData.province = this.regionValue[0];
+				this.formData.city = this.regionValue[1];
+				this.formData.area = this.regionValue[2];
+				this.getStreetList();
+				this.streetValue = '';
+			},
+
+			// 获取街道列表
+			getStreetList(street) {
+				this.$axios({
+					url: '/common/street',
+					method: 'get',
+					params: {
+						province: this.regionValue[0],
+						city: this.regionValue[1],
+						area: this.regionValue[2],
+					}
+				}).then(res => {
+					this.streetList = res.data;
+					if (street) {
+						let index = this.findElem(this.streetList, 'name', street);
+						this.streetValue = index;
+						this.formData.street = street;
+					}
+				})
+			},
+
+			// 切换街道
+			onStreetChange(e) {
+				console.log(e.detail.value);
+				this.streetValue = e.detail.value;
+				this.formData.street = this.streetList[this.streetValue].name;
+			},
+
+			findElem(array, attr, val) {
+				for (var i = 0; i < array.length; i++) {
+					if (array[i][attr] == val) {
+						return i; //返回当前索引值
+					}
+				}
+				return -1;
+			},
+
+			switchChange(e) {
+				console.log(e.detail.value);
+				this.formData.defaultAddr = e.detail.value;
+			},
+
+			// 验证数据
+			vailateData() {
+				if (!this.formData.name) {
+					this.$toast('请填写姓名');
+					return false;
+				}
+				if (!this.formData.phone) {
+					this.$toast('请填写手机号码');
+					return false;
+				}
+				if (!(/^1[3456789]\d{9}$/.test(this.formData.phone))) {
+					this.$toast('请填写正确的手机号码');
+					return false;
+				}
+				if (!this.formData.province) {
+					this.$toast('请选择所在地区');
+					return false;
+				}
+				if (!this.formData.street) {
+					this.$toast('请选择所在街道');
+					return false;
+				}
+				if (!this.formData.address) {
+					this.$toast('请填写收货地址');
+					return false;
+				}
+				return true;
+			},
+
+			// 提交表单
+			submitForm() {
+				if (!this.canClickSave) return false;
+				this.canClickSave = false;
+				setTimeout(() => {
+					this.canClickSave = true
+				}, 3000)
+				if (!this.vailateData()) return;
+
+				let params = this.formData;
+				params.userId = this.userId;
+				let url = '';
+				if (this.editId) {
+					params.userAddressId = this.editId;
+					url = '/user/address/update';
+				} else {
+					url = '/user/address/save';
+				}
+				this.$axios({
+					url: url,
+					type: 'application/json',
+					params,
+					isLoading: 1,
+				}).then(res => {
+					this.$successToast(this.editId ? '编辑成功' : '添加成功');
+					setTimeout(() => {
+						uni.navigateBack({
+							delta: 1
+						})
+					}, 1000)
+				})
+			},
+
+			// 删除
+			confirmDelete() {
+				this.$axios({
+					url: '/user/address/del',
+					params: {
+						userAddressId: this.editId
+					},
+					isLoading: 1,
+				}).then(res => {
+					this.isDialog = false;
+					this.$successToast('删除成功');
+					setTimeout(() => {
+						uni.navigateBack({
+							delta: 1
+						})
+					}, 1000)
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.app-container {
+		background: #F4F2F2;
+		padding: 0 30rpx;
+		padding-top: 20rpx;
+		box-sizing: border-box;
+
+		.row {
+			background: #FFFFFF;
+			margin-bottom: 20rpx;
+			min-height: 88rpx;
+			border-radius: 20rpx;
+			padding: 0 20rpx;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+
+			.title {
+				font-size: 28rpx;
+				color: #333333;
+			}
+
+			.right {
+				width: 480rpx;
+
+				input {
+					font-size: 28rpx;
+				}
+
+				.picker {
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+
+					image {
+						width: 16rpx;
+						height: 28rpx;
+					}
+				}
+			}
+
+			.textarea {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+
+				textarea {
+					padding: 10rpx 0;
+				}
+
+				.r {
+					display: flex;
+					align-items: center;
+					flex-shrink: 0;
+					font-size: 24rpx;
+					color: #666666;
+					margin-left: 15rpx;
+
+					image {
+						width: 28rpx;
+						height: 36rpx;
+						margin-right: 16rpx;
+					}
+				}
+			}
+
+			.default {
+				display: flex;
+				justify-content: flex-end;
+
+				switch {
+					margin-right: -20rpx;
+				}
+			}
+		}
+
+		.button {
+			width: 100%;
+			height: 72rpx;
+			border-radius: 72rpx;
+			text-align: center;
+			line-height: 72rpx;
+
+			&.red {
+				background: #FF3F42;
+				color: #FFFFFF;
+				margin-top: 120rpx;
+			}
+
+			&.white {
+				background: #FFFFFF;
+				color: #333333;
+				margin-top: 20rpx;
+			}
+		}
+	}
+</style>

pages/mine/address/list.vue

@@ -0,0 +1,219 @@
+<template>
+	<view class="app-container">
+		<view class="list-container">
+			<block v-for="(item, index) in addressList" :key="index">
+				<view class="item" @tap="chooseAddress(index)">
+					<view class="top">
+						<view class="left">
+							<view class="name">{{ item.name }}</view>
+							<view class="phone">{{ item.phone }}</view>
+							<view class="default" v-if="item.defaultAddr">默认</view>
+						</view>
+						<image class="right" src="@/static/icon/edit.png" @tap.stop="toEditAddress(item.userAddressId)">
+						</image>
+					</view>
+					<view class="bottom">{{ item.province }}{{ item.city }}{{ item.area }}{{ item.street
+            }}{{ item.address }}{{ item.houseNo }}</view>
+				</view>
+			</block>
+		</view>
+		<no-data v-if="!addressList.length" :showText="'暂无收货地址'"></no-data>
+
+		<view class="bottom-container">
+			<view class="button red" @tap="toAddAddress">新增收货地址</view>
+			<view class="button white" @tap="getWxAddress">获取收货地址</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		mapState
+	} from 'vuex';
+	import EventBus from '@/utils/eventbus.js';
+
+	export default {
+		data() {
+			return {
+				addressList: [], // 收货地址列表
+				isChoose: false, // 是否进来选择地址
+			};
+		},
+		computed: {
+			...mapState(['userInfo', 'isLogin', 'userId']),
+		},
+		onShow() {
+			this.getAddressList();
+		},
+		onLoad({
+			isChoose
+		}) {
+			this.isChoose = isChoose;
+		},
+		methods: {
+			// 获取收货地址列表
+			getAddressList() {
+				this.$axios({
+					url: '/user/address/list',
+					method: 'get',
+					params: {
+						pageNum: 1,
+						pageSize: 100,
+						userId: this.userId,
+					},
+				}).then((res) => {
+					this.addressList = res.data.records;
+				});
+			},
+
+			// 选择地址
+			chooseAddress(index) {
+				if (!this.isChoose) {
+					return false;
+				}
+				EventBus.$emit('chooseAddress', this.addressList[index]);
+				uni.navigateBack({
+					delta: 1,
+				});
+			},
+
+			// 获取微信收货地址
+			getWxAddress() {
+				let that = this;
+				uni.chooseAddress({
+					success(res) {
+						let params = {
+							userId: that.userId,
+							name: res.userName,
+							phone: res.telNumber,
+							province: res.provinceName,
+							city: res.cityName,
+							area: res.countyName,
+							address: res.detailInfo,
+							houseNo: '',
+						};
+						uni.navigateTo({
+							url: '/pages/mine/address/form?addressData=' + JSON.stringify(params),
+						});
+
+						// that.$axios({
+						// 	url: '/user/address/save',
+						// 	type: 'application/json',
+						// 	params,
+						// 	isLoading: 1,
+						// }).then(res => {
+						// 	that.getAddressList();
+						// 	that.$successToast('添加成功');
+						// })
+					},
+				});
+			},
+
+			// 去新增收货地址
+			toAddAddress() {
+				uni.navigateTo({
+					url: '/pages/mine/address/form',
+				});
+			},
+
+			// 去编辑收货地址
+			toEditAddress(id) {
+				uni.navigateTo({
+					url: '/pages/mine/address/form?id=' + id,
+				});
+			},
+		},
+	};
+</script>
+
+<style lang="scss">
+	.app-container {
+		background: #f4f2f2;
+		padding: 20rpx;
+		padding-bottom: 250rpx;
+		box-sizing: border-box;
+	}
+
+	.list-container {
+		.item {
+			background: #ffffff;
+			border-radius: 20rpx;
+			margin-bottom: 20rpx;
+			padding: 20rpx;
+
+			.top {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+
+				.left {
+					display: flex;
+					align-items: flex-end;
+
+					.name {
+						font-size: 32rpx;
+						color: #333333;
+						line-height: 32rpx;
+					}
+
+					.phone {
+						font-size: 28rpx;
+						color: #666666;
+						margin-left: 20rpx;
+						line-height: 28rpx;
+					}
+
+					.default {
+						font-size: 22rpx;
+						color: #ffffff;
+						background: #fe781f;
+						padding: 6rpx 8rpx;
+						line-height: 20rpx;
+						margin-left: 20rpx;
+					}
+				}
+
+				.right {
+					width: 32rpx;
+					height: 32rpx;
+				}
+			}
+
+			.bottom {
+				font-size: 28rpx;
+				color: #333333;
+				line-height: 38rpx;
+				margin-top: 20rpx;
+			}
+		}
+	}
+
+	.bottom-container {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		box-sizing: border-box;
+		padding: 20rpx 20rpx 60rpx;
+		background: #f4f2f2;
+
+		.button {
+			width: 100%;
+			height: 72rpx;
+			border-radius: 72rpx;
+			text-align: center;
+			line-height: 72rpx;
+
+			&.red {
+				background: #ff3f42;
+				color: #ffffff;
+				margin-bottom: 20rpx;
+			}
+
+			&.white {
+				background: #ffffff;
+				color: #333333;
+			}
+		}
+	}
+</style>