续接上条博客，接着记录：
【uniapp】小程序往缓存里添加对象并读取数据_小付学代码的博客-CSDN博客
增加删除地址与修改地址的功能：(点击删除即可删除此条地址信息，从缓存中也将清除掉。修改地址时会跳转到input填入信息的页面，但是会把缓存中的信息直接填入输入框，以便用户更快的修改)
删除部分逻辑：
right_hook(index) {
Dialog.confirm({
title: '删除地址',
message: '是否删除该地址，点击编辑按钮进行修改~',
})
.then(() => {
// 1.从缓存中拿参数(缓存中已经拿到了，这行应该不用写)
let adrs = getStorage('adrs') || []
// 2.删除此条数据
this.myadrlist.splice(index, 1)
// 3.并把新的数组放到缓存中
setStorage('adrs', this.myadrlist)
console.log("删除成功", index);
})
.catch(() => {
console.log("Erro", index);
});
}修改部分逻辑：
right_revise(index) {
// console.log("修改", index);
//从缓存中拿参数
//带参跳转到添加地址
uni.navigateTo({
url: '/pagesA/addAddress/addAddress?userName=' + this.myadrlist[index].userName +
'&phoneNum=' + this.myadrlist[index].phoneNum +
'&det_address=' + this.myadrlist[index].det_address +
'&city=' + this.myadrlist[index].city+'&del_index='+ index,
});
},
//跳转至下个页面中 在下个页面的onload里接收参数 传到input绑定的value中
onLoad(options) {
//加载时将areaList.js包里的地址读取一下
this.areaList = areaList;
//修改逻辑-拿到上个页面带参传过来的值，添加到input里
this.myindex = options.del_index
this.userName = options.userName
this.phoneNum = options.phoneNum
this.det_address = options.det_address
this.city = options.city
//判断一下 如果传进来的值为空则[保存收获地址]
//如果不为空则是 [修改收获地址]
if(options.userName == undefined ){
this.revise = true
}else{
this.revise = false
}
},
部分代码如下：addAddress（无返回组件）
<template>
<!-- 左上角返回按钮 -->
<view class="big_out">
<view class="back" :style="'margin-top:'+ (titletop+4)+'px'" @click="back_page">
<view class="back_img">
</view>
<view class="back_text">
添加收货地址
</view>
</view>
</view>
<!-- 开始写内容 -->
<view class="page">
<!-- 上方收货人与input框 -->
<view class="page_top">
<view class="top_one">
<text>收货人</text> <input type="text" :value="userName" @input="userNameInput" placeholder="名字"
placeholder-class="placeholder_text" />
</view>
<view class="top_two">
<text>手机号码</text><input type="number" :value="phoneNum" @input="phoneNumInput" placeholder="手机号"
placeholder-class="placeholder_text" />
</view>
<view class="top_three">
<text>所在地区</text>
<!-- 这里写地区三级联动的部分 -->
<view class="top_three_right">
<view class="address">
<!-- 省-市-区-三级联动联动 -->
<van-action-sheet :show="isCityshow" @close="onClose" title="请选择所在地区">
<view>
<van-area :area-list="areaList" @confirm="onConfirm" />
</view>
</van-action-sheet>
<view class="IsCityMsg" @click="isCityshow=true">
<text class="placeholder_text">{{city ? city : '省、市、区、街道'}}</text>
</view>
</view>
<!-- 右边的一个地址icon -->
<view class="top_three_icon">
<van-icon name="location" color="#1669E4" />
</view>
</view>
</view>
<view class="top_four">
<text>详细地址</text><input type="text" :value="det_address" @input="det_addressInput" placeholder="小区楼栋/乡村名字"
placeholder-class="placeholder_text" />
</view>
</view>
<view class="center_text">
<text>设为默认收货地址</text>
<!-- 引入vant组件 -->
<van-switch :checked="checked" @change="changeSwithch" size="24px" />
</view>
<!-- 保存部分 不变 -->
<view v-if="revise == true">
<van-dialog id="van-dialog" />
<view class="bottom_center" @click="submit_address">
<van-button round type="primary" size="large" color="#1669E4;">保存收货地址</van-button>
</view>
</view>
<!-- 修改部分，先删除原来的，再添加这条新地址 -->
<view v-else>
<view class="bottom_center" @click="revise_address">
<van-button round type="primary" size="large" color="#1669E4;">修改收货地址</van-button>
</view>
</view>
</view>
</template>
<script>
import areaList from '../../utils/areaList.js'
import Dialog from '../../wxcomponents/vant/dialog/dialog.js'
import {
setStorage,
getStorage,
removeStorage
} from '../../utils/localStorage.js'
export default {
data() {
return {
titleheight: 0,
titletop: 0,
//开关按钮
checked: false,
//控制动作面板的显示
isCityshow: false,
//承接地址列表 areaList
areaList: [],
//选择的地址
city: '',
//输入的详细地址
det_address: '',
//输入的用户名
userName: '',
//输入的电话号码
phoneNum: '',
//是修改地址
revise:true,
//传过来要修改的索引值
myindex:0,
//从myaddress复制过来的
myadrlist:[],
}
},
onLoad(options) {
//加载时调用 getHeight
this.getHeight();
//加载时将areaList.js包里的地址读取一下
this.areaList = areaList;
//修改逻辑-拿到上个页面带参传过来的值，添加到input里
this.myindex = options.del_index
this.userName = options.userName
this.phoneNum = options.phoneNum
this.det_address = options.det_address
this.city = options.city
//判断一下 如果传进来的值为空则[保存收获地址]
//如果不为空则是 [修改收获地址]
if(options.userName == undefined ){
this.revise = true
}else{
this.revise = false
}
},
methods: {
//利用胶囊按钮定位宽高
getHeight() {
let res = uni.getMenuButtonBoundingClientRect();
this.titletop = res.top;
this.titleheight = res.height
},
// Dialog.confirm({
// title: '默认设置',
// message: '是否设为默认地址？',
// }).then(() => {
// this.checked = true;
// console.log(checked);
// console.log(checked.detail);
// this.checked = false
// console.log(mychecked.detail);
// });
//switch按钮点击
changeSwithch() {
// console.log("testchange");
if (this.checked == false) {
this.checked = true
} else {
this.checked = false
}
},
//直接返回上一级
back_page() {
uni.switchTab({
url: '/pages/my/my'
})
},
//保存地址--拿到input框中的汇总 -（暂存到缓存中，后期有接口再改）
submit_address() {
//判断一下如果任意一项为空 则弹出警告信息
if (this.userName == '' || this.phoneNum == '' || this.det_address == '' || this.city == '') {
//弹出提示信息
Dialog.alert({
message: '填写信息未完善',
}).then(() => {
// on close
});
} else {
//信息全部都有进行跳转 -（暂存到缓存中，后期有接口再改）
//在这里读缓存信息
let adrs = getStorage('adrs') || []
const myadrs = [{
userName: this.userName,
phoneNum: this.phoneNum,
det_address: this.det_address,
city: this.city
}]
//把新增的东西合并到adrData中 然后
let adrData = adrs.concat(myadrs)
// 放入缓存中 adrs
setStorage('adrs', adrData)
uni.navigateTo({
url: '/pagesA/myAddress/myAddress?userName=' + this.userName +
'&phoneNum=' + this.phoneNum + '&det_address=' + this.det_address + '&city=' + this
.city,
});
}
},
revise_address() {
//判断一下如果任意一项为空 则弹出警告信息
if (this.userName == '' || this.phoneNum == '' || this.det_address == '' || this.city == '') {
//弹出提示信息
Dialog.alert({
message: '修改信息未完善',
}).then(() => {
// on close
});
} else {
//信息全部都有进行跳转 -（暂存到缓存中，后期有接口再改）
//在这里读缓存信息 --添加逻辑，没改直接复制的添加按钮的逻辑
let adrs = getStorage('adrs') || []
// console.log("这个地方的adrs",adrs);
//如果点击了修改按钮，这边就删除点击的这条信息
adrs.splice(this.myindex,1)
const myadrs = [{
userName: this.userName,
phoneNum: this.phoneNum,
det_address: this.det_address,
city: this.city
}]
//把新增的东西合并到adrData中 然后
let adrData = adrs.concat(myadrs)
// 放入缓存中 adrs
setStorage('adrs', adrData)
uni.navigateTo({
url: '/pagesA/myAddress/myAddress',
});
}
},
//获取用户名输入内容
userNameInput(e) {
let timer;
let keyWord = e.detail.value ? e.detail.value : null
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
if (keyWord == null) {
//这里表示 如果搜索框中没有数据的话，做的一些处理
this.userName = null
} else {
//这里是搜索框中有值的情况，可以直接请求接口即可
//一秒后将输入框中的内容传给 this.userName
this.userName = keyWord,
//销毁定时器
timer = null
}
}, 50)
},
//获取电话号码输入内容
phoneNumInput(e) {
let timer;
let keyWord = e.detail.value ? e.detail.value : null
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
if (keyWord == null) {
//这里表示 如果搜索框中没有数据的话，做的一些处理
this.phoneNum = null
} else {
this.phoneNum = keyWord,
timer = null
}
}, 50)
},
//获取详细地址输入内容
det_addressInput(e) {
let timer;
let keyWord = e.detail.value ? e.detail.value : null
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
if (keyWord == null) {
//这里表示 如果搜索框中没有数据的话，做的一些处理
this.det_address = null
} else {
this.det_address = keyWord,
timer = null
}
}, 50)
},
//地址三级联动-关闭时触发
onClose() {
this.isCityshow = false;
},
//bind:confirm 点击右上方完成按钮 一个数组参数，具体格式看下方数据格式章节
onConfirm(e) {
const _this = this;
this.isCityshow = false;
//地址选择放入this.city 中
this.city = e.detail.values[0].name + '/' + e.detail.values[1].name + '/' + e.detail.values[2].name;
this.MerchantList = []
this.MerchantListSon = []
},
}
}
</script>
<style>
.placeholder_text {
font-family: 'Source Han Sans CN';
font-weight: 350;
font-size: 24rpx;
color: #747474;
}
</style>
<style scoped>
.big_out {
position: relative;
/* background-color: red; */
}
.back {
position: absolute;
height: 50rpx;
width: 250rpx;
}
.back_img {
/* 用border值来控制箭头粗细 */
border: 3px solid black;
/* 上、右、下、左 四个边框的宽度 */
border-width: 0px 2px 2px 0px;
display: inline-block;
/* padding值控制箭头大小 */
padding: 5px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
margin-left: 30rpx;
}
.back_text {
float: right;
}
.page {
position: absolute;
top: 220rpx;
}
.page_top {
position: relative;
width: 680rpx;
height: 650rpx;
margin-left: 35rpx;
/* background-color: aqua; */
}
.top_one {
/* 收货人 */
position: relative;
font-family: 'Source Han Sans CN';
font-style: normal;
font-weight: 400;
font-size: 30rpx;
line-height: 45rpx;
display: flex;
align-items: center;
color: #000000;
}
.top_one>input {
width: 474rpx;
height: 81rpx;
padding-left: 50rpx;
margin-left: 50rpx;
background: #F6F6F6;
border-radius: 12rpx;
}
.placeholder-style {
font-family: 'Source Han Sans CN';
font-weight: 350;
font-size: 24rpx;
color: #747474;
}
.top_two {
position: relative;
font-family: 'Source Han Sans CN';
font-style: normal;
font-weight: 400;
margin-top: 23rpx;
font-size: 30rpx;
line-height: 45rpx;
display: flex;
align-items: center;
color: #000000;
}
.top_two>input {
width: 474rpx;
height: 81rpx;
padding-left: 50rpx;
background: #F6F6F6;
margin-left: 20rpx;
border-radius: 12rpx;
}
.top_three {
position: relative;
font-family: 'Source Han Sans CN';
font-style: normal;
font-weight: 400;
margin-top: 23rpx;
font-size: 30rpx;
line-height: 45rpx;
display: flex;
align-items: center;
color: #000000;
}
.top_three_icon {
position: absolute;
right: 50rpx;
top: 18rpx;
}
.top_three_right {
width: 524rpx;
height: 81rpx;
background: #F6F6F6;
margin-left: 20rpx;
border-radius: 12rpx;
}
.address {
line-height: 81rpx;
/* text-align: center; */
padding-left: 50rpx;
}
.IsCityMsg {
cursor: pointer;
}
.placeholder_text {
font-family: 'Source Han Sans CN';
font-weight: 350;
font-size: 24rpx;
color: #747474;
}
.top_three>input {
width: 524rpx;
height: 81rpx;
background: #F6F6F6;
margin-left: 20rpx;
border-radius: 12rpx;
}
.top_four {
position: relative;
font-family: 'Source Han Sans CN';
font-style: normal;
font-weight: 400;
font-size: 30rpx;
line-height: 45rpx;
display: flex;
align-items: center;
color: #000000;
}
.top_four>input {
width: 474rpx;
height: 148rpx;
background: #F6F6F6;
margin-left: 20rpx;
padding-top: -20rpx;
padding-left: 50rpx;
margin-top: 53rpx;
border-radius: 12rpx;
}
.center_text {
/* 设为默认收货地址 */
position: absolute;
display: flex;
width: 319rpx;
height: 31rpx;
left: 43rpx;
top: 607rpx;
width: 680rpx;
}
.center_text>text {
font-family: 'Source Han Sans CN';
font-style: normal;
font-weight: 400;
font-size: 30rpx;
margin-right: 300rpx;
line-height: 45rpx;
display: flex;
align-items: center;
color: #000000;
}
.bottom_center {
margin-top: 80rpx;
margin-left: 35rpx;
width: 680rpx;
height: 100rpx;
}
</style>
myAddress
<template>
<view>
<backPages backtext='返回'></backPages>
</view>
<!-- 下方内容为 -->
<view class="page">
<!-- 判断地址为空还是有地址 -->
<view v-if="userName == undefined">
<view class="no_address">
<image src="/pagesA/static/no_address.png" mode="aspectFit"></image>
<text>这里空空如也~</text>
</view>
</view>
<!-- 有地址走这个分支 -->
<view v-else>
<!-- 循环地址盒子 -- （暂且从缓存中拿这些东西 ） -->
<scroll-view scroll-y="true" class="con1" :enhanced="true" :bounces="false" :show-scrollbar="false">
<view class="page_box" v-for="(item,index) in myadrlist" :key="index">
<!-- 上半部分 -->
<view class="box_top">
<!-- 左右图标 -->
<view class="left_img">
<image src="../../static/image/myAddress_icon2.png" mode="aspectFit"></image>
</view>
<view class="right_img" @click="right_revise(index)">
<image src="../../static/image/myAddress_icon1.png" mode="aspectFit"></image>
</view>
<!-- 个人信息栏 -->
<view class="box_top_top">
<text>{{myadrlist[index].userName}}{{myadrlist[index].phoneNum}}</text>
</view>
<!-- 地址信息栏 -->
<view class="box_top_bottom">
<text>{{myadrlist[index].city}}{{myadrlist[index].det_address}}</text>
</view>
</view>
<!-- 下半部分 -->
<view class="box_bottom">
<!-- 一根分割线 -->
<view class="line"> </view>
<!-- 左边对钩 -->
<view class="hook" @click="left_hook(index)">
<view class="icon">
<view v-if="navIndex == index">
<van-icon name="checked" size="28rpx" color="#2B85ED;" />
</view>
<view v-else>
<van-icon name="circle" size="28rpx" color="#747474" />
</view>
</view>
<text>默认地址</text>
</view>
</view>
<!-- 右边删除按钮 -->
<van-dialog id="van-dialog" />
<view class="box_bottom_right" @click="right_hook(index)">
<text>删除</text>
</view>
</view>
<!-- 结尾处给一个300高的盒子 补空白 -->
<view class="last_box"></view>
</scroll-view>
</view>
<!-- 下方添加地址按钮 -->
<view class="bottom_center" @click="address">
<van-button round type="primary" size="large" color="#1669E4;">添加收货地址</van-button>
</view>
</view>
</template>
<script>
import backPages from '@/components/backPages.vue'
import Dialog from '../../wxcomponents/vant/dialog/dialog.js'
import {
setStorage,
getStorage,
removeStorage
} from '../../utils/localStorage.js'
export default {
components: {
backPages,
},
data() {
return {
userName: '',
phoneNum: '',
det_address: '',
city: '',
myadrlist: [],
//左边按钮点击的索引
navIndex: 0,
//通过这个判断是否删除点击的地址
confirm_revise: false
}
},
onLoad(options) {
//拿到的参数 ---
this.confirm_revise = options.del_ok
// console.log("option这拿到的 ",options.del_ok);
// console.log("option这拿到的类型 ",typeof options.del_ok);
// console.log("zhege",this.confirm_revise === 'true');
//从缓存中拿参数
let adrs = getStorage('adrs') || []
// console.log(adrs);
this.myadrlist = adrs
},
methods: {
address() {
uni.navigateTo({
url: '/pagesA/addAddress/addAddress',
})
},
left_hook(index) {
// console.log(index);
this.navIndex = index
},
right_revise(index) {
// console.log("修改", index);
//从缓存中拿参数
//带参跳转到添加地址
uni.navigateTo({
url: '/pagesA/addAddress/addAddress?userName=' + this.myadrlist[index].userName +
'&phoneNum=' + this.myadrlist[index].phoneNum +
'&det_address=' + this.myadrlist[index].det_address +
'&city=' + this.myadrlist[index].city+'&del_index='+ index,
});
},
right_hook(index) {
Dialog.confirm({
title: '删除地址',
message: '是否删除该地址，点击编辑按钮进行修改~',
})
.then(() => {
// 1.从缓存中拿参数(缓存中已经拿到了，这行应该不用写)
let adrs = getStorage('adrs') || []
// 2.删除此条数据
this.myadrlist.splice(index, 1)
// 3.并把新的数组放到缓存中
setStorage('adrs', this.myadrlist)
console.log("删除成功", index);
})
.catch(() => {
console.log("Erro", index);
});
}
}
}
</script>
<style>
page {
background: #F6F6F6;
position: fixed;
}
</style>
<style scoped>
.page {
position: absolute;
top: 190rpx;
}
.no_address {
width: 222rpx;
height: 222rpx;
position: absolute;
top: 370rpx;
left: 264rpx;
margin: auto;
}
.no_address>image {
width: 222rpx;
height: 222rpx;
}
.no_address>text {
font-family: 'Source Han Sans CN';
font-weight: 400;
font-size: 30rpx;
line-height: 45rpx;
margin-left: 25rpx;
margin-top: 30rpx;
color: #000000;
}
.page_box {
position: ;
width: 712rpx;
height: 206rpx;
margin-left: 18rpx;
margin-top: 30rpx;
background: #FFFFFF;
border-radius: 12rpx;
}
.box_top {
position: absolute;
width: 712rpx;
height: 133rpx;
/* background-color: aquamarine; */
}
.line {
position: relative;
width: 600rpx;
height: 1rpx;
margin-left: 56rpx;
background: #C9C9C9;
}
.left_img {
width: 43rpx;
height: 43rpx;
margin-top: 43rpx;
margin-left: 25rpx;
}
.left_img>image {
width: 43rpx;
height: 43rpx;
}
.con1 {
width: 750rpx;
height: 100vh;
/* background-color: #F5F5F5; */
/* background-color: aquamarine; */
}
.last_box {
margin-top: 10rpx;
width: 750rpx;
height: 340rpx;
z-index: 5;
/* background-color: #1669E4; */
background-color: #F6F6F6;
}
.right_img {
width: 43rpx;
height: 43rpx;
margin-top: -43rpx;
margin-left: 605rpx;
}
.right_img>image {
width: 43rpx;
height: 43rpx;
}
.box_bottom {
position: relative;
top: 130rpx;
width: 712rpx;
height: 74rpx;
}
.box_top_top {
width: 496rpx;
height: 48rpx;
margin-left: 82rpx;
margin-top: -67rpx;
overflow: hidden;
/* background-color: blueviolet; */
}
.box_top_top>text {
font-family: 'Source Han Sans CN';
font-style: normal;
font-weight: 500;
font-size: 32rpx;
line-height: 48rpx;
display: flex;
align-items: center;
color: #181818;
}
.box_top_bottom {
position: relative;
width: 486rpx;
height: 40rpx;
margin-left: 82rpx;
margin-top: 15rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/* background-color: coral; */
}
.box_top_bottom>text {
font-family: 'Source Han Sans CN';
font-style: normal;
font-weight: 400;
font-size: 28rpx;
line-height: 40rpx;
display: flex;
align-items: center;
color: #181818;
}
.hook {
position: absolute;
display: flex;
margin-top: 25rpx;
margin-left: 28rpx;
width: 180rpx;
height: 28rpx;
/* background-color: aqua; */
}
.hook>text {
font-family: 'Source Han Sans CN';
font-style: normal;
font-weight: 350;
font-size: 24rpx;
line-height: 36rpx;
margin-left: 10rpx;
display: flex;
align-items: center;
color: #747474;
}
.icon {
margin-top: -8.5rpx;
}
.box_bottom_right {
position: relative;
margin-left: 605rpx;
margin-top: 80rpx;
width: 50rpx;
height: 26rpx;
}
.box_bottom_right>text {
font-family: 'Source Han Sans CN';
font-style: normal;
font-weight: 350;
font-size: 24rpx;
line-height: 36rpx;
display: flex;
align-items: center;
color: #747474;
}
.bottom_center {
width: 660rpx;
height: 78rpx;
left: 45rpx;
position: fixed;
bottom: 50rpx;
}
</style>
2940
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
