地址识别及样式根据ui修改

pages/news/park/addressEdit.vue

@@ -1,6 +1,15 @@
 <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">
@@ -18,7 +27,7 @@
 				<view class="b">
 					<picker mode="multiSelector" @change="multiChange" @columnchange="columnChange"
 						value="{{multiIndex}}" :range="multiArray" range-key="name">
-						<view class="pbox">
+						<view class="pbox" :style="{'color': cityInfo.province?'#303030':'#C7C7C7' }">
 							{{cityInfo?cityInfo.province+cityInfo.city+cityInfo.area:'请选择省市区'}}
 							<u-icon name="arrow-right"></u-icon>
 						</view>
@@ -48,6 +57,7 @@
 
 <script>
 	import * as AddressApi from '@/api/address'
+	import * as newFunApi from '@/api/newFun'
 	export default {
 		data() {
 			return {
@@ -60,12 +70,12 @@
 					area: ''
 				},
 				form: {
-					// content: '',
 					name: '',
 					phone: '',
 					region: [],
 					detail: ''
 				},
+				content:'',
 				addressDetail: null,
 				addressId: '',
 				multiIndex: [0, 0, 0],
@@ -74,7 +84,6 @@
 			};
 		},
 		onLoad(optios) {
-			console.log(JSON.parse(optios.addressDetail))
 			if (optios.addressDetail) {
 				this.type = 'edit'
 				this.addressDetail = JSON.parse(optios.addressDetail);
@@ -115,6 +124,48 @@
 					]
 				}
 			},
+			// 智能识别
+			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;
@@ -223,6 +274,57 @@
 </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;
@@ -233,7 +335,7 @@
 			overflow: hidden;
 
 			.item {
-				padding: 20rpx 0;
+				padding: 25rpx 10rpx;
 				line-height: 50rpx;
 				font-size: 28rpx;
 				color: #212121;

pages/news/park/addressList.vue

@@ -69,12 +69,12 @@
 
 <style lang="scss" scoped>
 	.addressList {
-		padding: 0 0 0 50rpx;
+		padding: 0 45rpx;
 		background-color: #FFFFFF;
 		overflow: hidden;
 
 		.item {
-			padding: 35rpx 0;
+			padding: 30rpx 0;
 			overflow: hidden;
 			border-bottom: 1px solid #EEEEEE;
 
@@ -82,7 +82,7 @@
 				font-size: 32rpx;
 				font-weight: 500;
 				color: #1E1E1E;
-				padding-bottom: 20rpx;
+				padding-bottom: 25rpx;
 				display: flex;
 				align-items: center;
 
@@ -116,7 +116,6 @@
 				image {
 					width: 36rpx;
 					height: 36rpx;
-					margin-right: 50rpx;
 				}
 			}
 		}