项目场景:
订单列表进入订单详情页面之后在订单详情页面操作取消订单,回退到订单列表页面实现无感刷新
问题描述:
订单列表进入订单详情页面之后在订单详情页面操作取消订单,回退到订单列表页面,这里直接刷新页面的话,第一页的数据还好,但是如果操作的这笔订单在第2或者第20页,刷新页面的话重新获取数据的话就会回到第一页,而且手机端订单一般都是没有搜索功能的,操作之后就再去找这笔订单就很麻烦
订单列表页面
订单详情页面
解决方案:
订单列表页面
//订单列表中data定义一个变量
data() {
return {
// 订单详情返回列表实现无感刷新相关参数
operation: '',
clickItemIndex: null, //点击跳转到订单详情的列表下标
orderList:[] // 订单列表数据源
}
},
onShow() {
//在onShow中就可以直接获取到在订单详情中改到的this.operation的值了
console.log(this.operation, 'this.operation')
// 再点点击每一个订单跳转到订单详情的时候记录下点击的订单下标this.clickItemIndex,
// 订单详情中操作取消订单回退到本页面时候,
// 通过this.$set()直接修改改订单的状态即可 90为已取消 ,
// 这里只针对全部订单需要修改状态,如果在待支付的tab下取消订单则要this.orderList.splice(this.clickItemIndex, 1)删除该条订单
this.$set(this.orderList[this.clickItemIndex], 'orderStatus', 90)
}
订单详情页面
var pages = getCurrentPages()
var currPage = pages[pages.length - 2]
可以通过上面两行代码取到订单列表data中定义的数据
<!--
* 功能:订单详情页面
* 作者: fyq
* 日期: 2021-08-28
-->
<template>
<view class="btn" @click="closeOrder">取消订单</view>
</template>
<script>
export default {
data() {
return {}
},
onLoad(options) {},
onShow() {},
methods: {
// 点击确认收货按钮
closeOrder() {
var pages = getCurrentPages()
var currPage = pages[pages.length - 2]
// 修改订单列表中operation的值
currPage.$vm.operation = 'confirm'
},
},
}
</script>
<style lang="scss">
</style>