微信原生小程序:跨两级页面的刷新

z

pages/package-purchase/pages/purchase-things/index 为列表页面，展示了商品列表

pages/package-purchase/pages/purchase-things/return-goods/index 为采购退回按钮跳转的页面

pages/package-purchase/pages/purchase-things/return-goods/back/index为下一步按钮跳转的页面

业务流程：

用户点击采购退回按钮，进入中间的页面，选中一个商品（复选框勾），点击下一步，进入最后一个页面，填写相关信息之后，点击提交，回到第一个页面，此时第一个页面需要刷新，用户再次点击采购退回事，可以看到商品信息自动刷新为已退回状态。（不需要重新进入页面就能刷新）

如果不做自动刷新，就会产生问题（用户已经选择退回的商品页面并没有改变还可以退回，然而这肯定是不可行的）

先来看第三个页面的提交事件

 handleConfirm() {
            // wx.showModal({
            //     title: "提示",
            //     content: "提交采购退回信息后，相关商品的采购流程将终止，且不可恢复，是否继续？",
            //     success(res) {
            //         if (res.confirm) {

            //         }
            //     },
            // });
            if (this.data.recycleOrderType === "HS") {
                let { paymentMode, paymentName, paymentAccount } = this.data.params;

                if (!paymentMode) {
                    return toast.error("付款方式不能为空！");
                }
                if (!paymentName) {
                    return toast.error("收款账户名不能为空！");
                }
                if (!paymentAccount) {
                    return toast.error("付款账户名不能为空！");
                }
            }

            const { params, checkedGoods } = this.data;
            const { recycleOrderEntryList, flowData, id, vendorCode, vendorId, vendorType } = this.data.orderInfo;
            let paramsObj = {
                isAllBack: checkedGoods.length === recycleOrderEntryList.length ? "1" : "0",
                procInsId: flowData.procInsId,
                recycleOrderEntryIds: checkedGoods,
                recycleOrderId: id,
                vendorCode,
                vendorId,
                vendorType,
                ...params,
            };
            this.setData({
                loading: true,
            });

            recycleOrderService
                .sendBackRecycleProductBatch(paramsObj)
                .then(() => {
                    this.handleCancle();
                    toast.success("商品退回成功");
                    setTimeout(() => {
                        emitter.emit("backSuccess", {});
                        wx.navigateBack({
                            delta: 2,
                        });
                    }, 1000);
                })
                .finally(() => {
                    this.setData({
                        loading: false,
                    });
                });

            ({ prop, message }) => {
                Toast.error(message);
            };
        },

在上面的代码中我们使用了emitter工具来刷新，并且wx.navigateBack倒退2级，回到列表页面

想知道emitter工具的请往下看

import emitter from "../../../../../../store/eventemitter";

eventemitter.js


const EventEmitter2 = require("eventemitter2");
const emitter = new EventEmitter2({});
export default emitter;

发送方了解了之后，回到第一个页面看一看emitter的用法

   data: {
            
            emitterId: null,
        },
  lifetimes: {
            attached() {
                const emitterIdPaid = emitter.on(
                    "backSuccess",
                    ({ message }) => {
                        toast.success(message);
                        this.handlePartTabs({ detail: { name: "status2Params" } }, true, true);
                        this.apiGetTodoTaskCount();
                        this.apiGetTodoTaskCountAfloat();
                    },
                    { objectify: true }
                );
                this.setData({
                    emitterId: emitterIdPaid,
                });
                this.apiGetParams();
            },
            detached() {
                if (this.data.emitterId) {
                    this.data.emitterId.off();
                }
            },
        },

在上面的代码中  this.handlePartTabs({ detail: { name: "status2Params" } }, true, true);这个就是刷新的方法，在这里调用接口重新加载一遍数据就可以了。