当前位置：网站首页>Uni app wechat official account (5) - add and modify addresses
Uni app wechat official account (5) - add and modify addresses
2022-07-19 01:33:00 【Xu xiaoshuo】
Continue the above article , For children's shoes that haven't seen the previous article, please click here uni-app WeChat official account （4）—— Address management page _ Xu xiaoshuo — What the heart wants , I've been in the past -CSDN Blog Of course, in a official account similar to a mall , Naturally, there is also the addition of user addresses , Now let's write a receiving address page , On the page , It can easily and automatically identify address information , Set the default address , Set address labels and other functions , Let's take a look at the screenshot of the effect first .（1） Address management page （1.1） Page code Actually HTML The page code is a simple loop traversal , First save the address in vuex in , Then cache to localStorage in , And get localStorage Cache in ,v-for The loop shows . What needs to be noted is ,:class="{red:res.i...https://blog.csdn.net/qq_40601005/article/details/121080638 Next , We introduce the new 、 The function of modifying the address is realized . Here is the screenshot style
（1） newly added 、 Change address
（1.1） Page code
On the page
① First use uView Component's <u-form> Form components , To fill in the address information
② Then use a textarea Components , Used to automatically identify receipt information , Fill in to <u-form> in , This function is just a simple recognition , It can't be as powerful as a treasure
③ Then there is the address tag , Three displayed labels , You can also add custom labels , This function is fairly perfect
④ Finally, set the default address , There is only one default address in all addresses , This function has been realized
The code is as follows ：
<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=" Consignee " prop="name">
<u-input v-model="recipientInfo.name" :trim="true" type="text" placeholder=" Please fill in the name of the consignee " />
</u-form-item>
<u-form-item :label-width="labelWidth" label=" Phone number " prop="phone">
<u-input v-model="recipientInfo.phone" type="number" placeholder=" Please fill in the consignee's mobile phone number " />
</u-form-item>
<u-form-item :label-width="labelWidth" label=" The region " prop="area">
<u-input v-model="recipientInfo.area" :select-open="pickerShow" @click="pickerShow = true"
type="select" placeholder=" Provinces, cities, counties " />
</u-form-item>
<u-form-item :label-width="labelWidth" label=" Detailed address " prop="address">
<u-input class="address" v-model="recipientInfo.address" type="textarea"
placeholder=" county 、 Township 、 The street 、 Building plate, etc " />
</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=" Paste consignee name 、 cell-phone number 、 Address , It can automatically identify your receiving information . Such as ( Zhang xx 151*****1234 Chaoyang District of Beijing City ** Number )" />
<!-- <textarea placeholder-class="line" v-model="pasteTextarea" value=""
placeholder=" Paste consignee name 、 cell-phone number 、 Address , It can automatically identify your receiving information ">
</textarea> -->
<view class="btn">
<u-button class="clear" shape="circle" size="mini" @click="clearPaste"> Empty </u-button>
<u-button class="sumbit" shape="circle" size="mini" type="success" @click="sumbitPaste"> Submit
</u-button>
</view>
</view>
<view class="clipboard" @click="showPasteText">
Address pasteboard
<u-icon :name="iconName" class="icon" :size="20"></u-icon>
</view>
</view>
</view>
<view class="bottom">
<view class="tag">
<view class="left"> label </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"> Set the default address </view>
<view class="tips"> remind ： This address will be recommended by default for each order </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"> preservation </u-button>
<u-button v-if="!isUpdate" class="kmbtn" type="warning" plain size="medium" :ripple="true"
ripple-bg-color="#ffaa00" @click="resetInfo"> Reset </u-button>
<u-button v-if="isUpdate" class="kmbtn" type="error" plain size="medium" :ripple="true"
ripple-bg-color="#ffaa00" @click="deleteShow=true"> Delete </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=" Please fill in the label ( most 4 A word )" />
</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 Code
① Select the tag related code
// Label selection
tagSelect(value, checked, index) {
checked == false ? this.recipientInfo.tag = value : this.recipientInfo.tag = '';
// Only one label can be selected
this.tagList.forEach((tag, i) => {
if (i == index) {
this.tagList[i].checked = !this.tagList[i].checked
} else {
this.tagList[i].checked = false
}
})
},// label HTML Code
<view class="left"> label </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>
② Add a new tag code
The new label does not judge whether it exists , This little BUG Everyone can modify it according to their own needs .
// Open add tag
addTag() {
this.addTagChecked = true;
this.addTagValue = ''
},
// Confirm to add labels
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: ' Can't be empty ',
position: 'top',
type: 'error',
})
this.addTagChecked = true;
}},
③ Automatically identify the address code ※
Automatically recognized address style , Such as ： Zhang San 18811112222 Xingfu community, Xingfu Garden Street, Gulou District, Nanjing City, Jiangsu Province , Or as ： full name ： Zhang San calls ：18811112222 Address ： Xingfu community, Xingfu Garden Street, Gulou District, Nanjing City, Jiangsu Province
It can automatically recognize the above two types of address information , Not too powerful recognition function .
// Submit the pasted recipient information
sumbitPaste() {
var text = this.pasteTextarea;
text = text.replace(/\s*/g, ""); // Clear all spaces in the text
// text = text.replace(/(^\s*)|(\s*$)/g, "") // Clear the space before and after the text
console.log(text);
if (text == '') {
this.recipientInfo = {
name: '',
phone: '',
area: '',
address: '',
}
return;
}
// Phone number regular expression
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);
}// full name , Telephone , Address
var name = text.indexOf(" full name :")
var u_area = ''
if (name >= 0) {
var phone = text.indexOf(" Telephone :"),
address = text.indexOf(" Address :"),
cityOne = text.indexOf(" province "),
cityTwo = text.indexOf(" City "),
cityThree = text.indexOf(' District ') >= 0 ? text.indexOf(' District ') : text.indexOf(" county ");
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(" province "),
cityTwo = text.indexOf(' City '),
cityThree = text.indexOf(' District ') >= 0 ? text.indexOf(' District ') : text.indexOf(" county ");
// cityThree2 = text.indexOf(" county ");
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);
},
④ Modify the address information code to be updated
// Get the data to be updated
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);// Does the label exist
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 code
<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） Address management vuex Code
That's all , Page code and logic code , The most important thing is vuex The code adds, deletes, modifies and checks the address information .
import Vue from 'vue';
// Initialization data
const state = {
address_list: jsAddressList.map((list, i) => {
return list;
}),
addressList: []
};
// getter Data thrown out
const getters = {
};
// action Asynchronous operations
const actions = {
// add to , update operation
addAddress({
commit
}, product) {
commit('addToAddress', {
product: product
});
},
// Delete operation
deleteAddress({
commit
}, product) {
commit('deleteToAddress', {
id: product.id
});
},
};
//mutation
const mutations = {
addToAddress(state, {
product
}) { // analysis 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));
},
// Delete the receiving address information
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));
},
// Access to the cache
getLocalAddressList(state) {
if (localStorage.getItem('addressList')) {
state.addressList = JSON.parse(localStorage.getItem('addressList')).map(item => Object.assign({},
item));
}
},
};
export default {
state,
mutations,
actions,
getters
};
These two articles , It introduces most application scenarios of address management in detail , It's just for your reference , If the article is incorrect , Still hope more ~
If the article helps you a little , I hope one button and three links , thank you ~
边栏推荐
- Win10 vscode 代码格式化设置与远程断点调试
- elemtnui 表格如何修改某行文字颜色（elemtnui table 修改某行文字颜色）
- TCP与UDP，TCP服务器与客户端，UDP服务器与客户端
- uni-app微信小程序——商城（4）——商家
- JS高阶函数 filter/map/reduce
- MoveIt2——2.MoveIt在RViz中的快速入门
- 【ElenmentUI el-date-picker日期选择器，结束时间不得早于开始时间，且只能选择距开始时间指定天数的日期】
- everything搜索不到startup_lpc11x.s文件
- 小程序嵌入网页向小程序跳转并传参，微信小程序中实现公众号授权获取openId
- CTF CRYPTO RSA入门刷题
猜你喜欢
Uni app wechat applet - Mall (6) - my home page
![Stack injection [strong net cup 2019] random note](/img/94/9069ed79e994e3c2e96c3cd1f816ee.png)
Stack injection [strong net cup 2019] random note
NodeJS 跨域 CORS
Uni app wechat official account (1) - Web page authorization login
Self encapsulated stylized switch card assembly
Page layout - three column layout solution
Use bat to automatically execute CMD commands (multiple commands or a single command)
uni-app微信小程序——商城（3）——商城主页
![[SWPU 2019] network TTL encryption and some related knowledge](/img/c7/8a4b6e7808be9189e76563848b359d.png)
[SWPU 2019] network TTL encryption and some related knowledge
Initial flask
随机推荐
[GFCTF 2021]Baby_ Cve-2021-41773 on the web
TCP与UDP，TCP服务器与客户端，UDP服务器与客户端
[SWPU 2019] network TTL encryption and some related knowledge
Text indent in uniapp doesn't work, and the indentation in the first line of uniapp doesn't work. How to solve it?
缤纷彩色文字广告代码，文字广告代码美化版，给网站添加文字广告教程
uniapp开发App中上传图片直传oss
Win10 vscode 代码格式化设置与远程断点调试
Uni app wechat official account (4) - address management page
数组操作——判断、去重、合并、展开
Colorful text advertising code, text advertising code beautification version, add text advertising tutorials to the website
E-commerce background management login
Understand PHP from [Fifth space 2021] easycleanup_ session
Summary of Applied Cryptography
Express项目创建以及其路由介绍
markdown编辑器语法——文字颜色、大小、字体与背景色的设置(转载)
Use leaflet to copy the original shentiwa Mega map to make a diary
服务器如何安装宝塔面板？（宝塔面板安装教程）
everything搜索不到startup_lpc11x.s文件
Vue project deployment, cleaning cache
智能指针（shared_ptr、unique_ptr、weak_ptr）