user_mobile_front/src/pages/editaddress.vue

<template>
	<div class="content">

		<div class="form">
			<van-cell-group inset>
				<van-field v-model="message" rows="1" label="识别" type="textarea"
					placeholder="请粘贴,点击识别(姓名、手机号、省、市、区、详细地址间请输入空格)" />
			</van-cell-group>
			<div style="background-color: white;width: 100%;height: .8rem;padding-top: .2rem;">
				<!-- <van-uploader :after-read="afterRead" style="width: 18%;height: .6rem;float: left;">
					<van-button color="#00c4b8" block type="info" size="small">图片识别</van-button>
				</van-uploader> -->
				<van-button @click="shibie()" style="width: 15%;height: .6rem;float: right; margin-right: .2rem;"
					color="#00c4b8" block type="info" size="small">识别</van-button>
			</div>
		</div>
		<div class="form">
			<van-form @submit="onSubmit">
				<van-field v-model="name" name="姓名" label="姓名" placeholder="请输入姓名" :rules="[{ required: false }]" />
				<van-field v-model="phone" maxlength="11" type="number" name="手机" label="手机" placeholder="请输入手机"
					:rules="[{ required: false }]" />

				<!-- <van-field readonly clickable name="area" :value="city" label="省市区" placeholder="请选择省市区"
					@click="areashow = true" :rules="[{ required: false }]" /> -->
				<van-field readonly clickable name="area" :value="province" label="省" placeholder="自动识别"
					@click="areashow = true" :rules="[{ required: false }]" />
				<van-field readonly clickable name="area" :value="city" label="市" placeholder="自动识别"
					@click="areashow = true" :rules="[{ required: false }]" />
				<van-field readonly clickable name="area" :value="district" label="区" placeholder="自动识别"
					@click="areashow = true" :rules="[{ required: false }]" />
				<van-field readonly clickable name="area" :value="town" label="镇" placeholder="自动识别"
					@click="areashow = true" :rules="[{ required: false }]" />
				<van-field v-model="address" name="详细地址" maxlength="50" label="详细地址" placeholder="请输入详细地址"
					:rules="[{ required: false }]" />
				<div style="margin-top: 16px;">
					<van-button color="#00c4b8" block type="info" native-type="submit"
						:disabled="disabled">确定</van-button>
				</div>
			</van-form>
		</div>
	</div>
</template>

<script>
import areaList from "@/script/areas.js"
import { Toast } from 'vant'
import { findUserAddressInfoById, editUserAddressInfoById, spiltAddress } from '../api/addressBoook'
export default {
	data() {
		return {
			titlename: "编辑地址",
			name: "",
			phone: "",
			telPhone: "",
			province: "",//省
			city: "",//市
			district: '',//区
			town: '',//镇
			address: "",//详细地址
			areashow: false,
			id: '',
			disabled: false,
			message: '',
		}
	},
	created: function () {
		this.isLogin();
		this.id = this.$route.query.id
		this.getData()
	},
	methods: {
		// 获取信息
		async getData() {
			Toast.loading({
				message: '加载中...',
				forbidClick: true,
				duration: 0
			});
			const res = await findUserAddressInfoById({ id: this.id })
			if (res.msg == 'success') {
				this.name = res.userAddressInfoById.addresseeName
				this.phone = res.userAddressInfoById.addresseePhone
				this.province = res.userAddressInfoById.addresseeProvince
				this.city = res.userAddressInfoById.addresseeCity
				this.district = res.userAddressInfoById.addresseeCounty
				this.town = res.userAddressInfoById.addresseeTown
				this.address = res.userAddressInfoById.addresseeAddrInfo
			} else {
				Toast("网络错误!")
			}
			Toast.clear()
		},
		// 图片识别
		afterRead(file) {
			// console.log(encodeURIComponent(file.content))
			// return;
			this.$http.post(this.$store.state.host + "/solic/getAddressFromText", {
				type: 3,
				textStr: encodeURIComponent(file.content)
			}, {
				emulateJSON: true
			})
				.then(res => {
					//发送成功
					res.body.words_result.forEach((v, i) => {
						this.message += v.words + " "
					})
				}, res => {
					//发送失败
					Toast('识别错误')
				})
			//console.log(file)
		},
		// 识别
		async shibie() {
			if (this.message == '') {
				Toast('请粘贴地址')
				return
			}
			const res = await spiltAddress({ address: this.message })
			if (res.prov) {
				this.province = res.prov
				this.city = res.city
				this.district = res.district
				this.town = res.town
				this.address = res.addr_info
			} else {
				Toast('请求失败')
			}
			console.log(res, 'res')
		},
		// 提交
		async onSubmit() {

			if (this.name == '' || this.name == undefined) {
				Toast('请输入姓名')
				return
			}

			if (this.phone == '' || this.phone == undefined) {
				Toast('请填写手机号')
				return
			}

			if (this.phone != '' && this.phone != undefined) {
				let regPhone = new RegExp(this.$store.state.regPhone)
				if (!regPhone.test(this.phone)) {
					Toast('手机号格式不正确')
					return
				}
			}

			if (this.address == '' || this.address == undefined) {
				Toast('请输入详细地址')
				return
			}

			this.disabled = true;
			let parmas = {
				addresseeName: this.name,
				addresseePhone: this.phone,
				id: this.id,
				addresseeProvince: this.province,
				addresseeCity: this.city,
				addresseeCounty: this.district,
				addresseeTown: this.town,
				addresseeAddrInfo: this.address,
				addresseeAddress: this.message,
			}
			const res = await editUserAddressInfoById({ ...parmas })
			if (res.msg == 'success') {
				Toast("保存成功");
				this.$router.push('/Myaddressbook')
			} else {
				Toast('保存失败')
			}
			this.disabled = false;
		},
		onConfirm3(e) {//确定
			this.city = e[0].name + ' ' + e[1].name + ' ' + e[2].name
			this.areashow = false
			console.log(e)
		},
	},
	computed: {
		areaList() {
			return areaList
		}
	}
}
</script>

<style scoped lang="less">
.content {

	.form {
		padding: .3rem;

		/deep/.van-field__value {
			input {
				text-align: right;
			}

		}
	}
}
</style>