uni-app微信公众号（5）——新增、修改地址

徐小硕

4258人浏览 · 2021-11-01 16:56:50

徐小硕 · 2021-11-01 16:56:50 发布

承接上面一篇文章，没有看到上篇文章的童鞋请点这里uni-app微信公众号（4）——地址管理页面_徐小硕—心之所向，素履以往-CSDN博客当然在一个类似商城的公众号中，自然也少不了用户地址的添加，下面我们就写一个收货地址的页面，页面中，可以简单的自动识别地址信息，设置默认地址，设置地址标签等功能，先来看看效果截图。（1）地址管理页面（1.1）页面代码其实HTML页面代码就是一个简单循环遍历，先把填写的地址保存在vuex中，然后缓存到localStorage中，然后获取localStorage中的缓存，v-for循环显示出来。其中需要注意的是，:class="{red:res.i...https://blog.csdn.net/qq_40601005/article/details/121080638接下来，我们介绍新增、修改地址的功能实现。下面是截图样式

（1）新增、修改地址

（1.1）页面代码

页面中

①先使用uView组件的<u-form>表单组件，来填写地址信息

②然后使用一个textarea组件，用来自动识别收货信息，填写到<u-form>中，这个功能还只是简单的识别，不能像某宝做的那么强大

③然后是地址标签，三个已显示标签，还可以添加自定义标签，这个功能还算完善

④最后就是设置默认地址，所有地址中只有一个默认地址，此功能已实现

代码如下：

<template>
	<view class="wrap">
		<view class="top">
			<u-form class="formClass" :rules="addSiteRules" :model="recipientInfo" :errorType="errorType"
				ref="addSiteForm">
				<!-- <view class="item"> -->
				<u-form-item :label-width="labelWidth" label="收货人" prop="name">
					<u-input v-model="recipientInfo.name" :trim="true" type="text" placeholder="请填写收货人姓名" />
				</u-form-item>
				<u-form-item :label-width="labelWidth" label="手机号码" prop="phone">
					<u-input v-model="recipientInfo.phone" type="number" placeholder="请填写收货人手机号" />
				</u-form-item>
				<u-form-item :label-width="labelWidth" label="所在地区" prop="area">
					<u-input v-model="recipientInfo.area" :select-open="pickerShow" @click="pickerShow = true"
						type="select" placeholder="省市区县" />
				</u-form-item>
				<u-form-item :label-width="labelWidth" label="详细地址" prop="address">
					<u-input class="address" v-model="recipientInfo.address" type="textarea"
						placeholder="县、乡镇、街道、楼牌等" />
				</u-form-item>
			</u-form>
			<view class="site-clipboard">
				<view v-show="pasteText">
					<u-input class="address" :clearable="false" v-model="pasteTextarea" type="textarea"
						placeholder="粘贴收货人姓名、手机号、地址，可自动识别您的收货信息。如(张xx 151*****1234 北京市朝阳区**号)" />
					<!-- <textarea placeholder-class="line" v-model="pasteTextarea" value=""
						placeholder="粘贴收货人姓名、手机号、地址,可自动识别您的收货信息">
					</textarea> -->
					<view class="btn">
						<u-button class="clear" shape="circle" size="mini" @click="clearPaste">清空</u-button>
						<u-button class="sumbit" shape="circle" size="mini" type="success" @click="sumbitPaste">提交
						</u-button>
					</view>
				</view>
				<view class="clipboard" @click="showPasteText">
					地址粘贴板
					<u-icon :name="iconName" class="icon" :size="20"></u-icon>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="tag">
				<view class="left">标签</view>
				<view class="right">
					<template v-for="(tag,i) in tagList">
						<text :class="[tag.checked ? 'active': '','tags']" :key="i"
							@click="tagSelect(tag.value,tag.checked,i)">{{tag.value}}</text>
					</template>
					<view class="tags plus" @click="addTag">
						<u-icon size="22" name="plus"></u-icon>
					</view>
				</view>
			</view>
			<view class="default">
				<view class="left">
					<view class="set">设置默认地址</view>
					<view class="tips">提醒：每次下单会默认推荐该地址</view>
				</view>
				<view class="right">
					<u-switch active-color="red" v-model="recipientInfo.isDefault"></u-switch>
				</view>
			</view>
			<view class="sumbitBtn">
				<u-button class="kmbtn" type="primary" plain size="medium" :ripple="true" ripple-bg-color="#4a94de"
					@click="submitInfo">保存</u-button>
				<u-button v-if="!isUpdate" class="kmbtn" type="warning" plain size="medium" :ripple="true"
					ripple-bg-color="#ffaa00" @click="resetInfo">重置</u-button>
				<u-button v-if="isUpdate" class="kmbtn" type="error" plain size="medium" :ripple="true"
					ripple-bg-color="#ffaa00" @click="deleteShow=true">删除</u-button>
			</view>
		</view>
		<u-picker mode="region" ref="uPicker" @confirm="areaSelect" v-model="pickerShow" />
		<u-modal v-model="addTagChecked" @confirm="confirmAddTag" :mask-close-able="true" title="" :zoom="true">
			<view class="slot-content">
				<u-input v-model="addTagValue" :maxlength="4" type="text" placeholder="请填写标签(最多4个字)" />
			</view>
		</u-modal>
		<u-toast ref="uToast" />
		<u-modal v-model="deleteShow" @confirm="deleteInfo(recipientInfo)" :show-cancel-button="true"
			confirm-color="red" :content="deleteContent"></u-modal>
	</view>
</template>

（1.2）vue代码

①选择标签相关代码

       // 标签选择
           tagSelect(value, checked, index) {
               checked == false ? this.recipientInfo.tag = value : this.recipientInfo.tag = '';
               //只能选择一个标签
               this.tagList.forEach((tag, i) => {
                   if (i == index) {
                       this.tagList[i].checked = !this.tagList[i].checked
                   } else {
                       this.tagList[i].checked = false
                   }
               })
           },

//标签HTML代码

<view class="left">标签</view>
               <view class="right">
                   <template v-for="(tag,i) in tagList">
                       <text :class="[tag.checked ? 'active': '','tags']" :key="i"
                           @click="tagSelect(tag.value,tag.checked,i)">{{tag.value}}</text>
                   </template>
                   <view class="tags plus" @click="addTag">
                       <u-icon size="22" name="plus"></u-icon>
                   </view>
</view>

②添加新的标签代码

新的标签没有去判断是否存在，这个小BUG每个人可以根据自己需求去修改。

            // 打开添加标签
           addTag() {
               this.addTagChecked = true;
               this.addTagValue = ''
           },
           //确认添加标签
           confirmAddTag() {
               console.log(this.addTagValue);
               if (this.addTagValue != '') {
                   this.tagList.forEach((tag, i) => {
                       this.tagList[i].checked = false;
                   })
                   this.tagList.push({
                       value: this.addTagValue,
                       checked: true
                   })
                   this.recipientInfo.tag = this.addTagValue
               } else {
                   this.$refs.uToast.show({
                       title: '不能为空',
                       position: 'top',
                       type: 'error',
                   })
                   this.addTagChecked = true;
               }

           },

③自动识别地址代码※

自动识别的地址样式，如：张三18811112222江苏省南京市鼓楼区幸福花园街道幸福小区，或者如：姓名：张三电话：18811112222地址：江苏省南京市鼓楼区幸福花园街道幸福小区

可以自动识别以上两种类型的地址信息，没有做太过强大的识别功能。

        //提交粘贴的收件人信息
           sumbitPaste() {
               var text = this.pasteTextarea;
               text = text.replace(/\s*/g, ""); //清空文本全部空格
               // text = text.replace(/(^\s*)|(\s*$)/g, "") //清除文本前后空格
               console.log(text);
               if (text == '') {
                   this.recipientInfo = {
                       name: '',
                       phone: '',
                       area: '',
                       address: '',
                   }
                   return;
               }
               //电话号码正则表达式
               var regx = /(1[3|4|5|7|8][\d]{9}|0[\d]{2,3}-[\d]{7,8}|400[-]?[\d]{3}[-]?[\d]{4})/g;
               var phone_num = text.match(regx);
               console.log(phone_num);
               if (phone_num != null) {
                   var phone = text.indexOf(phone_num[0]);
                   console.log(phone);
               }

               //姓名，电话，地址
               var name = text.indexOf("姓名:")
               var u_area = ''
               if (name >= 0) {
                   var phone = text.indexOf("电话:"),
                       address = text.indexOf("地址:"),
                       cityOne = text.indexOf("省"),
                       cityTwo = text.indexOf("市"),
                       cityThree = text.indexOf('区') >= 0 ? text.indexOf('区') : text.indexOf("县");
                   console.log(cityOne);
                   console.log(cityTwo);
                   var u_name = text.substring(name + 3, phone),
                       u_phone = text.substring(phone + 3, address),
                       u_address = text.substring(address + 3, text.length);
                   if (cityOne >= 0) {
                       u_area = text.substring(address + 3, cityOne + 1) + '-' +
                           text.substring(cityOne + 1, cityTwo + 1) + '-' +
                           text.substring(cityTwo + 1, cityThree + 1)
                   } else {
                       u_area = text.substring(address + 3, cityTwo + 1) + '-' +
                           text.substring(cityTwo + 1, cityThree + 1)
                   }
                   this.recipientInfo = {
                       name: u_name,
                       phone: u_phone,
                       area: u_area,
                       address: u_address,
                       tag: '',
                       isDefault: false,
                   }
                   console.log(this.recipientInfo);
               } else if (phone >= 0) {
                   var cityOne = text.indexOf("省"),
                       cityTwo = text.indexOf('市'),
                       cityThree = text.indexOf('区') >= 0 ? text.indexOf('区') : text.indexOf("县");
                   // cityThree2 = text.indexOf("县");
                   var u_name = text.substring(0, phone),
                       u_phone = text.substring(phone, phone + 11),
                       u_address = text.substring(phone + 11, text.length);

                   if (cityOne >= 0) {
                       u_area = text.substring(phone + 11, cityOne + 1) + '-' +
                           text.substring(cityOne + 1, cityTwo + 1) + '-' +
                           text.substring(cityTwo + 1, cityThree + 1)
                   } else {
                       u_area = text.substring(phone + 11, cityTwo + 1) + '-' +
                           text.substring(cityTwo + 1, cityThree + 1)
                   }

                   this.recipientInfo = {
                       name: u_name,
                       phone: u_phone,
                       area: u_area,
                       address: u_address,
                       tag: '',
                       isDefault: false,
                   }
                   console.log(this.recipientInfo);
               } else {
                   this.recipientInfo = {
                       name: '',
                       phone: '',
                       area: '',
                       address: '',
                       tag: '',
                       isDefault: false,
                   }
                   return;
               }
               console.log(this.recipientInfo);
           },

④修改待更新地址信息代码

        //获取待更新数据
           updateAddress(info) {
               console.log(info);
               this.isUpdate = JSON.stringify(info) != "{}" ? true : false;
               console.log(this.isUpdate);
               let addressInfo = ''
               if (JSON.stringify(info) != "{}") {
                   addressInfo = JSON.parse(info.addressInfo);
                   this.recipientInfo = addressInfo;
               }
               console.log(this.recipientInfo);

               // 标签是否存在
               let isExist = this.tagList.find((n, i) => n.value == this.recipientInfo.tag)
               console.log(isExist);
               if(this.isUpdate && this.recipientInfo.tag!=''){
                   if (isExist != undefined ) {
                       this.tagList.forEach((tag, i) => {
                           if (tag.value == this.recipientInfo.tag) {
                               this.tagList[i].checked = true
                           }
                       })
                   } else {
                       this.tagList.push({
                           value: this.recipientInfo.tag,
                           checked: true
                       })
                   }
               }
           },

（1.3）css样式代码

<style lang="scss" scoped>
	/deep/ .line {
		color: $u-light-color;
		font-size: 32rpx;
	}

	.wrap {
		background-color: #f2f2f2;

		.top {
			background-color: #ffffff;
			border-top: solid 2rpx $u-border-color;
			padding: 22rpx;

			.formClass {
				.u-form-item {
					font-size: 32rpx !important;
				}

			}

			.item {
				display: flex;
				font-size: 32rpx;
				line-height: 100rpx;
				align-items: center;
				border-bottom: solid 2rpx $u-border-color;

				.left {
					width: 180rpx;
				}

				input {
					text-align: left;
				}
			}

			.address {
				// width: 100%;
				height: 170rpx;
				background-color: #f7f7f7;
				line-height: 60rpx;
				margin: 10rpx auto;
				padding: 10rpx;
			}

			.site-clipboard {
				padding: 0 20rpx;

				.address {
					width: 100%;
					height: 200rpx;
					background-color: #f7f7f7;
					line-height: 60rpx;
					margin: 40rpx auto;
					padding: 20rpx;
				}

				.btn {
					display: flex;
					padding-bottom: 30rpx;
				}

				.clipboard {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;
					color: $u-tips-color;
					height: 80rpx;

					.icon {
						margin-top: 6rpx;
						margin-left: 10rpx;
					}
				}
			}
		}

		.bottom {
			margin-top: 20rpx;
			padding: 22rpx;
			background-color: #ffffff;
			font-size: 28rpx;

			.tag {
				display: flex;

				.left {
					width: 160rpx;
					line-height: 160rpx;
				}

				.right {
					display: flex;
					flex-wrap: wrap;

					.active {
						color: #2979FF !important;
						border: solid 2rpx #2979FF !important;
					}

					.tags {
						width: 140rpx;
						padding: 16rpx 8rpx;
						border: solid 2rpx $u-border-color;
						text-align: center;
						border-radius: 50rpx;
						margin: 0 10rpx 20rpx;
						display: flex;
						font-size: 28rpx;
						align-items: center;
						justify-content: center;
						color: $u-content-color;
						line-height: 1;
					}

					.plus {
						//padding: 10rpx 0;
					}
				}
			}

			.default {
				margin-top: 50rpx;
				display: flex;
				justify-content: space-between;
				border-bottom: solid 2rpx $u-border-color;
				line-height: 64rpx;

				.tips {
					font-size: 24rpx;
				}

				.right {
					padding-right: 30rpx;
				}
			}
		}

		.sumbitBtn {
			text-align: center;
			margin: 60rpx 0rpx 60rpx 0rpx;
		}

		.sumbitBtn .kmbtn {
			margin-right: 10rpx;
		}

		.slot-content {
			font-size: 28rpx;
			color: $u-content-color;
			padding-left: 30rpx;
		}
	}
</style>

（2）地址管理vuex代码

上面讲完，页面代码和逻辑代码，最重要的就是vuex代码对地址信息的增删改查。

import Vue from 'vue';

//初始化数据
const state = {
	address_list: jsAddressList.map((list, i) => {
		return list;
	}),
	addressList: []
};
// getter 抛出去的数据
const getters = {

};
// action 异步的操作
const actions = {
	//添加，更新操作
	addAddress({
		commit
	}, product) {
		commit('addToAddress', {
			product: product
		});
	},
	//删除操作
	deleteAddress({
		commit
	}, product) {
		commit('deleteToAddress', {
			id: product.id
		});
	},
};
//mutation
const mutations = {
	addToAddress(state, {
		product
	}) { //解析id
		console.log(product);
		let length = state.addressList.length;
		let lastId = state.addressList.slice(-1) == '' ? 0 : state.addressList.slice(-1)[0].id;
		// console.log("last_id----" + lastId);
		let isDef = product.isDefault;
		let isUpdate = state.addressList.find((n, i) => n.id == product.id);
		// console.log(isUpdate);
		if (isDef && length != 0) {
			console.log(isDef);
			let address = state.addressList.find((n, i) => n.isDefault == true);
			console.log(address);
			if (address != undefined) {
				address.isDefault = false
			}
		}
		if (!isUpdate) {
			let list = {};
			list.id = lastId + 1
			for (let a in product) {
				list[a] = product[a]
			}
			state.addressList.push({
				...list,
			});
		} else {
			for (let a in isUpdate) {
				isUpdate[a] = product[a]
			}
			console.log(isUpdate);
		}
		console.info(state.addressList);
		localStorage.setItem('addressList', JSON.stringify(state.addressList));
	},
	//删除收货地址信息
	deleteToAddress(state, {
		id
	}) {
		console.log(id);
		state.addressList.forEach((n, i) => {
			if (n.id == id) {
				state.addressList.splice(i, 1);
			}
		});
		localStorage.setItem('addressList', JSON.stringify(state.addressList));
	},
	// 获取缓存
	getLocalAddressList(state) {
		if (localStorage.getItem('addressList')) {
			state.addressList = JSON.parse(localStorage.getItem('addressList')).map(item => Object.assign({},
				item));

		}
	},
};
export default {
	state,
	mutations,
	actions,
	getters
};

这两篇文章，详细的介绍了大多数地址管理的应用场景，也只是仅供大家参考，文章如有不正确的地方，还望斧正~

如果文章对您有些许帮助，还望一键三连，谢谢~

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^