yanzong_qianduan/pages/news/park/addressEdit.vue

<template>
	<view class="addressList">
		<view class="addressList-hd">
			<view class="section" style="padding-top: 26upx;">
				<u-input class="realAddr" type="textarea" placeholder="请粘贴或输入文本，点击“识别”自动识别姓名、电话和地址" v-model="content">
				</u-input>
				<view class="btnContent">
					<view class="btn" @click="onIntelligence" :style="{'opacity': content?1:0.6 }">
						识别
					</view>
				</view>
			</view>
			<view class="item">
				<view class="a">收货人</view>
				<view class="b">
					<input v-model="form.name" type="text" placeholder="请输入收货人姓名" />
				</view>
			</view>
			<view class="item">
				<view class="a">手机号</view>
				<view class="b">
					<input v-model="form.phone" @blur="onPhone" maxlength="13" type="number" placeholder="请输入收货人手机号" />
				</view>
			</view>
			<view class="item">
				<view class="a">所属城市</view>
				<view class="b">
					<picker mode="multiSelector" @change="multiChange" @columnchange="columnChange"
						value="{{multiIndex}}" :range="multiArray" range-key="name">
						<view class="pbox" :style="{'color': cityInfo.province?'#303030':'gray' }">
							{{cityInfo.province?cityInfo.province+cityInfo.city+cityInfo.area:'请选择省市区'}}
							<u-icon name="arrow-right"></u-icon>
						</view>
					</picker>
				</view>
			</view>
			<view class="items">
				<view class="a">详细地址</view>
				<view class="b">
					<input v-model="form.detail" type="text" placeholder="请输入详细地址" />
				</view>
			</view>
		</view>
		<view class="addressList-bd" v-if="type=='edit'">
			<view class="a">设为默认收货地址</view>
			<view class="b">
				<u-switch v-model="checked" active-color="#55BD6A" inactive-color="#eee" @change="setDefault">
				</u-switch>
			</view>
		</view>
		<view class="addressList-fd">
			<view class="btn" @click="saveAddress" v-if="type=='add'">保存收货地址</view>
			<view class="btn" @click="editAddress" v-if="type=='edit'">保存收货地址</view>
		</view>
	</view>
</template>

<script>
	import * as AddressApi from '@/api/address'
	import * as newFunApi from '@/api/newFun'
	export default {
		data() {
			return {
				type: 'add',
				checked: false,
				value: "",
				cityInfo: {
					province: '请选择省市区',
					city: '',
					area: ''
				},
				form: {
					name: '',
					phone: '',
					region: [],
					detail: ''
				},
				content: '',
				addressDetail: null,
				addressId: '',
				multiIndex: [0, 0, 0],
				multiArray: [],
				multiData: []
			};
		},
		onLoad(optios) {
			if (optios.addressDetail) {
				this.type = 'edit'
				this.addressDetail = JSON.parse(optios.addressDetail);
				this.addressId = this.addressDetail.address_id
				this.cityInfo.province = this.addressDetail.region.province;
				this.cityInfo.city = this.addressDetail.region.city;
				this.cityInfo.area = this.addressDetail.region.region;
				this.form.name = this.addressDetail.name;
				this.form.phone = this.addressDetail.phone;
				this.form.region = [{
					value: this.addressDetail.province_id,
					label: this.addressDetail.region.province
				}, {
					value: this.addressDetail.city_id,
					label: this.addressDetail.region.city
				}, {
					value: this.addressDetail.region_id,
					label: this.addressDetail.region.region
				}];
				this.form.detail = this.addressDetail.detail;
			} else {
				this.cityInfo.province = ''
			}
			this.getProvinceAll()
		},
		methods: {
			async getProvinceAll() {
				let {
					status,
					message,
					data
				} = await AddressApi.province();
				if (status == 200) {
					this.multiData = data.list;
					var multiIndex = this.multiIndex;
					this.multiArray = [
						this.multiData,
						this.multiData[0].children,
						this.multiData[0].children[0].children
					]
				}
			},
			onPhone(e) {
				if (this.validatePhoneNumber(Number(e.detail.value))) {
					this.form.phone = Number(e.detail.value)
				} else {
					this.form.phone = ''
					return this.$toast('手机号格式不正确')
				}
			},
			validatePhoneNumber(phone) {
				// 定义手机号的正则表达式规则
				var regExp = /^1[3456789]\d{9}$/;
				if (regExp.test(phone)) {
					return true; // 符合手机号格式要求
				} else {
					return false; // 不符合手机号格式要求
				}
			},
			// 智能识别
			onIntelligence() {
				if (!this.content) {
					return this.$toast('请输入识别内容')
				}
				newFunApi.analysis({
						content: this.content
					})
					.then(res => {
						if (res.status) {
							let data = res.data.detail
							this.cityInfo.province = data.region.province;
							this.cityInfo.city = data.region.city;
							this.cityInfo.area = data.region.region;
							this.form.detail = data.detail
							this.form.name = data.name;
							this.form.phone = data.phone;
							this.form.region = [{
								value: data.province_id,
								label: data.region.province
							}, {
								value: data.city_id,
								label: data.region.city
							}, {
								value: data.region_id,
								label: data.region.region
							}];
							uni.showToast({
								title: '识别成功',
								icon: 'none',
								duration: 2000
							})
						} else {
							uni.showToast({
								title: '识别失败',
								icon: 'none',
								duration: 2000
							})
						}
					})
					.finally()
			},
			// 获取多列的索引
			multiChange: function(e) {
				this.multiIndex = e.detail.value;
				let a_name = this.multiArray[0][e.detail.value[0]].name;
				let a_id = this.multiArray[0][e.detail.value[0]].id;
				let b_name = this.multiArray[1][e.detail.value[1]].name;
				let b_id = this.multiArray[1][e.detail.value[1]].id;
				let c_name = this.multiArray[2][e.detail.value[2]].name;
				let c_id = this.multiArray[2][e.detail.value[2]].id;
				this.cityInfo.province = a_name;
				this.cityInfo.city = b_name;
				this.cityInfo.area = c_name;
				this.form.region = [{
					value: a_id,
					label: a_name
				}, {
					value: b_id,
					label: b_name
				}, {
					value: c_id,
					label: c_name
				}];
			},

			// 选择列
			columnChange: function(e) {
				var _this = this;
				var columnIndex = e.detail.column;
				var columnValue = e.detail.value;
				_this.multiIndex[columnIndex] = columnValue;
				this.multiArray = [
					_this.multiData,
					_this.multiData[_this.multiIndex[0]].children,
					_this.multiData[_this.multiIndex[0]].children[_this.multiIndex[1]].children
				]
			},
			saveAddress() {
				// 保存收货地址
				const that = this
				if (that.form.name == '') {
					return that.$toast('请填写收货人姓名')
				}
				if (that.form.phone == '') {
					return that.$toast('请填写收货人手机号')
				}
				if (that.form.region == []) {
					return that.$toast('请选择所属地市')
				}
				if (!that.form.detail) {
					return that.$toast('请输入详细地址')
				}
				let parame = {

				}
				AddressApi.add(that.form)
					.then(result => {
						that.$toast(result.message)
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)

					})
					.finally(() => {

					})
			},
			editAddress() {
				// 编辑收货地址
				const that = this
				if (that.form.name == '') {
					return that.$toast('请填写收货人姓名')
				}
				if (that.form.phone == '') {
					return that.$toast('请填写收货人手机号')
				}
				if (that.form.region == []) {
					return that.$toast('请选择所属地市')
				}
				if (!that.form.detail) {
					return that.$toast('请输入详细地址')
				}
				AddressApi.edit(that.addressId, that.form)
					.then(result => {
						that.$toast(result.message)
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)

					})
					.finally(() => {

					})
			},
			setDefault(val) {
				// 设置默认地址
				const that = this
				if (val) {
					AddressApi.setDefault(that.addressId)
						.then(result => {
							that.$toast(result.message);
							setTimeout(() => {
								uni.navigateBack()
							}, 500)

						})
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	.section {
		background-color: #fff;
		padding: 0 18upx;

		.realAddr {
			padding: 10upx 0 !important;

			::v-deep .uni-input-wrapper {
				text-align: left !important;
			}

			::v-deep .uni-input-placeholder {
				white-space: pre-wrap;
			}
		}

		.btnContent {
			display: flex;
			justify-content: flex-end;
			padding-bottom: 30upx;
		}

		.btn {
			width: 120upx;
			height: 50upx;
			background: #FE483B;
			border-radius: 19px 19px 19px 19px;
			opacity: 1;
			line-height: 50upx;
			text-align: center;

			font-size: 24upx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;

		}

		.addrDetail {
			padding: 0 10upx;

			.addrTitle {

				font-size: 28upx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #303030;
				margin-top: 32upx;
			}
		}
	}

	.addressList {
		padding: 0 0 20rpx;
		overflow: hidden;

		&-hd {
			background-color: #fff;
			padding: 0 25rpx 25rpx;
			overflow: hidden;

			.item {
				padding: 25rpx 10rpx;
				line-height: 50rpx;
				font-size: 28rpx;
				color: #212121;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #F7F7F7;

				.b {
					font-size: 28rpx;
					color: #9D9D9D;
					flex: 1;
					text-align: right;

					input {
						width: 100%;
						line-height: 50rpx;
						font-size: 28rpx;
						color: #212121;
					}

					.select {
						color: #C7C7C7;

						&-on {
							color: #212121;
						}
					}
				}
			}

			.items {
				padding: 20rpx 0;
				line-height: 50rpx;
				font-size: 28rpx;
				color: #212121;

				.b {
					font-size: 28rpx;
					flex: 1;
					text-align: left;

					input {
						width: 100%;
						line-height: 50rpx;
						font-size: 28rpx;
						color: #212121;
						margin-top: 20rpx;
					}
				}
			}

		}

		&-bd {
			background-color: #fff;
			padding: 25rpx;
			overflow: hidden;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		&-fd {
			width: 100%;
			position: fixed;
			left: 0;
			bottom: 0;
			padding: 30rpx;
			background-color: #fafafa;
			box-sizing: border-box;

			.btn {
				width: 100%;
				line-height: 96rpx;
				background: #F34A40;
				border-radius: 8rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}

	.list {
		// border-bottom: 1rpx solid #eee;
		padding: 0 0 0 18rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		position: relative;

		.picker {
			height: 92rpx;
			width: 33%;

			.pbox {
				width: 100%;
				height: 92rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				color: #808080;

				view {
					width: 100%;
					text-align: right;
				}

				.icon-you {
					font-size: 28rpx;
				}
			}

			.pbox_hover {
				color: #383838;
			}

		}

		.name {
			width: 168rpx;
			font-size: 32rpx;
			color: #383838;
		}

		.icon-you {
			font-size: 28rpx;
			color: #999999;
		}

		.input {
			flex: 1;
			height: 100%;
			line-height: 92rpx;
			color: #9080A1;
		}

		.textarea {
			flex: 1;
			height: 100%;
			color: #A9A9A9;
		}
	}
</style>