当前位置:网站首页>uni app 微信小程序 点餐系统【再来一单】页面跳转
uni app 微信小程序 点餐系统【再来一单】页面跳转
2022-07-17 00:14:00 【荼蘼_】
1 类似饿了么 点击【再来一单】的效果
2 点击再来一单的时候,获取该订单的订单id,跳转页面,通过订单id 获取订单中的商品id,查询商品id,商品必须是上架状态/库存不能为0等。
3 商品成功添加之后,再次点击【再来一单】,没有继续添加商品到购物车里,但是会跳转。
4 添加其他商品可以 添加到购物车里
--------------------------------------------------------------------------------------------------
遇到的问题:
点击【再来一单】跳转页面的时候,商品成功加入购物车。每次从其他页面进入购物车的时候,购物车累计添加同样的商品。
代码:
template中:
<button type="primary" plain hover-class="none" @tap="onceMore(order.orderId)">再来一单</button>
methods中:
onceMore(orderId) {
if(orderId != '') {
uni.setStorageSync('orderId', orderId);
uni.switchTab({
// 再来一单
url:"/pages/index/index"
})
}
}/pages/index/index.vue:
script中:
onShow() {
this.orderId = '';
this.type = '';
this.orderId = uni.getStorageSync('orderId');
console.log("this.orderId="+this.orderId);
if(this.orderId != '' && this.orderId != undefined && this.type != '' && this.type != undefined) {
if(!this.cartFlag) {
this.getAddCartGoods(this.orderId, this.type);
}
}
},
分析:
① 认为是onShow问题。
于是将onShow和onLoad换了好多遍,于是有了以下理解。
-----onShow和onLoad的区别-----
onShow:每次切换页面再切换回来都会重新加载
onLoad:只加载一次页面,切换页面也不会加载
不是这个问题。
② 猜测了一下是不是缓存问题。
于是查了switchTab的传值setStorageSync和接收参数getStorageSync。
在uni-app官网中找到了相关介绍(https://uniapp.dcloud.io/api/storage/storage?id=setstoragesync)
setStorageSync是存放在本地缓存中的,getStorageSync是从本地缓存中取值。那么我页面切换的时候传值一直都是存在的,所以每次页面切换,再切换回加入购物车的页面时都会累计加商品到购物车里。哪怕没有点击再来一单也会累计。
恰巧在官网看到了removeStorage。
于是在index.vue中添加了代码:
script中:
onShow() {
this.orderId = '';
this.type = '';
this.orderId = uni.getStorageSync('orderId');
console.log("this.orderId="+this.orderId);
// 清除缓存中的orderId,但是页面已经获取到orderId,直接用全局变量即可
uni.removeStorage({
key: 'orderId',
success: function (res) {
console.log('success');
}
});
if(this.orderId != '' && this.orderId != undefined) {
if(!this.cartFlag) {
this.getAddCartGoods(this.orderId);
}
}
},
这样就解决问题了。
边栏推荐
猜你喜欢

CTFHub----RCE

Software testing technology interim testing summary | software testing foundation & Executive testing & test design and development

Gdb+vscode for debugging 4 - GDB executes relevant commands

ctfhub--ssrf

Signal and system experiment

成信大ENVI_IDL第二周课后作业:提取n个点的气溶胶厚度+详细解析

池式组件之线程池篇

30分钟搞懂 HTTP 缓存

ENVI_ Idl: batch Reproject MODIS swath products and specify the range output as GeoTIFF format + parsing

去中心化边缘渲染元宇宙协议Caduceus受邀出席CBAIA 2022峰会,以技术赋能更多Web3应用场景
随机推荐
元宇宙公链Caduceus项目详解(一):Caduceus Metaverse Protocol的项目理念及技术框架
Swagger——世界上最流行的Api框架
ENVI_IDL:批量对Modis Swath产品进行均值运算+解析
字符串转换为整数
树和堆知识点总结
STL--queue容器
Visual Studio 2019-QT调试
元宇宙开发者的乐园 解析元宇宙协议Caduceus生态价值
软件测试技术期中测试小结|软件测试基础&执行测试&测试设计和开发
信号与系统实验
STL--map容器
Installing MySQL and JDBC on Windows
ENVI_IDL:批量处理Modis Swath数据的重投影并输出为Geotiff格式+详细解析
UE4 笔记
Jmeter接口测试之响应断言
Leetcode 70:Climbing Stairs
Jmeter响应时间测试组件&多接口并发
第1章-多智能体系统
[unity Editor Extension] scriptableobject for internal asset configuration of unity
简述特征工程及其sklearn的实现