Client-Teapay/src/pages/xghc-addrress/userAddress.vue

<template>
	<uni-popup ref="popup" type="bottom">
		<view class="container">
			<div class="tit">
				<text class="close">关闭</text>
			</div>
			<form @submit="formSubmit" v-if="isadd">
				<view class='addAddress'>
					<view class="pad30">
						<view class='default acea-row row-middle borderRadius15'>
							<uni-easyinput type="textarea" v-model="addressValue" placeholder="粘贴地址信息，自动拆分姓名、电话和地址" @blur="identify()" />
						</view>
					</view>
					<view class="pad30 mt-22">
						<view class='list borderRadius15'>
							<view class='item acea-row row-between-wrapper'>
								<view class='name'>姓名</view>
								<input type='text' placeholder='请输入姓名' name='real_name' v-model="userAddress.real_name"
									placeholder-class='placeholder' />
							</view>
							<view class='item acea-row row-between-wrapper'>
								<view class='name'>联系电话</view>
								<input type='number' placeholder='请输入联系电话' name="phone" v-model='userAddress.phone'
									placeholder-class='placeholder' pattern="\d*" />
							</view>
							<view class='item acea-row row-between-wrapper'>
								<view class='name'>所在地区</view>
								<view class="address acea-row row-between">
									<input type='text' placeholder='请填写具体地址' name='region' placeholder-class='placeholder'
										v-model='userAddress.region' class="detail" />
								</view>
							</view>
							<view class='item acea-row row-between-wrapper'>
								<view class='name'>详细地址</view>
								<view class="address">
									<input type='text' placeholder='请填写具体地址' name='detail' placeholder-class='placeholder'
										v-model='userAddress.detail' class="detail" />
								</view>
							</view>
							<view class='item acea-row row-between-wrapper'>
								<view class='name'>详细地址</view>
								<view class="address">
									<uni-data-checkbox v-model="is_default" :localdata="range"></uni-data-checkbox>
								</view>
							</view>
						</view>
					</view>
					<button class='keepBnt bg-color' form-type="submit">立即保存</button>
				</view>
			</form>

			<div class="editaddress" v-else>
				<view class="addbar" @click="isadd = true">
					<text class="iconfont sp">&#xe760;</text>
					<text class="sp">添加地址</text>
				</view>
				<uni-swipe-action class="swipeAction">
					<uni-swipe-action-item class="swipeAction_item" v-for="(i,s) in addressList" :key="s">
						<view class="addressLi clearfix" @click="onSelect(i,s)">
							<view class="addressLi_l">
								<text v-if="i.status != 1" class="iconfont">&#xe623;</text>
								<text v-else class="iconfont pitchOn">&#xe624;</text>
							</view>
							<view class="addressLi_r">
								<view class="user">
									<text class="name">{{i.name}}</text>
									<text>{{i.mobile}}</text>
								</view>
								<view class="address">{{i.address}}</view>
							</view>
						</view>
						<template v-slot:right>
							<view class="btns clearfix">
								<view class="btn edit"><text class="iconfont">&#xe600;</text></view>
								<view class="btn del"><text class="iconfont">&#xe601;</text></view>
							</view>
						</template>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</div>

		</view>
	</uni-popup>
</template>
<script>
import { get, post, u_post } from "@/request/api.js";
	import AddressParse from './zh-address-parse.min.js'
let app = getApp();
var appEv = app.$vm.$options;
	export default {
		data() {
			return {
				userAddress: {
					real_name:"",
					phone:"",
					region:"",
					detail:"",
				}, //地址详情
				addressValue:"",
				is_default: 0, //是否设为默认地址
				range: [{"value": 0,"text": "否"	},{"value": 1,"text": "是"}],
				
				isadd: false,
				addressList: [],
			}
		},
		components:{},
		created () {
			this.loadAddress();
		},
		methods: {
			identify(){
				const options = {
				  type: 0, // 哪种方式解析，0：正则，1：树查找
				  textFilter: [], // 预清洗的字段
				  nameMaxLength: 4, // 查找最大的中文名字长度
				}
				// type参数0表示使用正则解析，1表示采用树查找, textFilter地址预清洗过滤字段。
				if(!!this.addressValue){
					const parseResult = AddressParse(this.addressValue, options)
					// console.log(parseResult);
					this.userAddress.real_name = parseResult.name;
					this.userAddress.phone = parseResult.phone;
					this.userAddress.detail = parseResult.detail;
					this.userAddress.region = parseResult.province + '/' + parseResult.city + '/' + parseResult.area;
				}
			},
			formSubmit(){
				post("user/addAddress",{
					address: this.userAddress.region + this.userAddress.detail,
					mobile: this.userAddress.phone,
					name: this.userAddress.real_name,
					is_default: this.is_default
				}).then(res => {
                	if (res.code === 0) {
						appEv.errTips(res.msg);
						setTimeout(() => {
						// 	uni.navigateBack();
							this.$emit('addressConfirm');
							this.close();
						}, 1500);
					}
				})
			},
			// 获取用户地址
			loadAddress(){
				post("user/addressList").then(res => {
                    if(res.code === 0){
						this.addressList = res.data.data;
					}
                })
			},
			onSelect(i,s){
				this.addressList.forEach(e => {
					e.status = "0";
				});
				this.addressList[s].status = "1";
				this.editAddress();
			},
			editAddress(){
				this.addressList.forEach((e,s) => {
					post("user/editAddress",{
						...e, is_default: e.status
					}).then(res=>{
						if(this.addressList.length == s+1){
							this.$emit('addressConfirm');
							this.close();
						}
					})
				});
			},

			open(type) {
				this.$refs.popup.open('bottom')
				if(type == "add") this.isadd = true
			},
			close() {
				this.$refs.popup.close()
			}
		},
	}
</script>
<style lang="scss" scoped>
	.container{
		background-color: #f5f5f5;
		height: 70vh;
		// padding:30rpx 0;
		border-radius: 30rpx 30rpx 0 0;
	}
	
	.pad30 {
		padding: 0 30rpx
	}
	
	.p_center {
		text-align: center;
	}
	
	.acea-row {
		display: flex;
	}
	.row-middle {
		align-items: center
	}
	.row-between-wrapper {
		align-items: center;
		justify-content: space-between
	}
	.borderRadius15 {
		border-radius: 15rpx !important;
	}
	.fontcolor{
		color: var(--view-theme);
	}
	.addAddress .list {
		background-color: #fff;
	}
	
	.addAddress .list .item {
		padding: 30rpx;
		border-top: 1rpx solid #eee;
		position: relative;
	}
	
	.addAddress .list .item .detail{
		width: 368rpx;
	}
	
	.addAddress .list .item .location{
		position: absolute;
		right: 46rpx;
		top: 50%;
		margin-top: -40rpx!important;
		font-size: 24rpx;
		text-align: center;
	}
	
	.addAddress .list .item .icon-dizhi{
		 font-size: 36rpx!important;
	}
	
	.addAddress .list .item .name {
		width: 195rpx;
		font-size: 30rpx;
		color: #333;
	}
	
	.addAddress .list .item .address {
		flex: 1;
	}
	
	.addAddress .list .item .address .addressCon{
		width: 360rpx;
	}
	
	.addAddress .list .item .address .addressCon .tip{
		font-size: 21rpx;
		margin-top: 4rpx;
	}
	
	.addAddress .list .item input {
		/* // width: 475rpx; */
		flex: 1;
		font-size: 30rpx;
	}
	
	.placeholder {
		color: #ccc;
	}
	
	.addAddress .list .item .picker {
		width: 430rpx;
		font-size: 30rpx;
	}
	
	.addAddress .list .item .iconfont {
		font-size: 30rpx;
		margin-top: 4rpx;
	}
	
	.addAddress .default {
		padding: 30rpx;
		/* height: 90rpx; */
		background-color: #fff;
	}
	
	.addAddress .default checkbox {
		margin-right: 15rpx;
	}
	
	.addAddress .keepBnt {
		width: 690rpx;
		height: 86rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 86rpx;
		margin: 50rpx auto;
		font-size: 32rpx;
		color: #fff;
	}
	
	
	.mt-22{
		margin-top: 22rpx;
	}
	.bg-color {
		background-color: #2DB389;
	}

	.addbar{
		background: #fff;
		text-align: center;
		margin-bottom: 50rpx;
		padding: 36rpx 0;
		.iconfont{
			font-size: 46rpx;
			margin-right: 20rpx;
		}
		.sp{
			vertical-align: middle;
		}
	}

	.swipeAction{
		// padding: 20rpx 30rpx;
		font-size: 28rpx;

		.addressLi{
			.addressLi_l{
				width: 80rpx;
				height: 80rpx;
				display: flex;
				// justify-content: center;
				align-items: center;
				.iconfont{
					color: #666;
					font-size: 38rpx;
				}
				.pitchOn{
					color: #1989fa;
				}
			}
			.addressLi_r{
				width: calc(100% - 80rpx);
			}
			.addressLi_l,.addressLi_r{
				float: left;
			}
			.user{
				margin-bottom: 10rpx;
			}
			.name{
				// font-weight: bold;
				font-size: 32rpx;
				margin-right: 10rpx;
			}
			.address{
				font-size: 24rpx;
				color: #999;
			}
		}

		.swipeAction_item{
			background: #fff;
			margin-bottom: 20rpx;
		}

		.btns{
			.btn{
				float: left;
				display:flex;
				justify-content : center;
				align-items : center; 
				height: 100%;
				padding: 0 30rpx;
				color: #fff;
				font-size: 36rpx;
				
			}
			.edit{
				background: rgba(25,137,250,0.5);
			}
			.del{
				background: rgba(238,10,36,0.5);
			}
		}
	}

	::v-deep .uni-swipe_box{
		padding: 20rpx 30rpx;
	}

	.tit{
		padding: 10rpx 0;
		.close{
			float: right;
		}
	}
</style>