小程序 表单当用户修改字段,点击返回检测用户是否有修改

.wxml

bash 复制代码
<page-container show="{{show}}" overlay="{{false}}" show="{{show}}" overlay-style="height:2px" custom-style="height:2px"
  position="{{top}}" bind:beforeleave="beforeleave"></page-container>

.js

bash 复制代码
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    workflowData: Object
  },

  /**
   * 组件的初始数据
   */
  data: {
    isModified:false,
    show:true
  },
  lifetimes: {
    attached() {
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    beforeleave(){
      if (this.data.entrySource == "tableList") {
       this.showComfin()
      }
    },
    async showComfin(){
      if ( this.data.allowEdit && this.data.actionType == "edit") {
        await this.checkFormModify();
        if (this.data.isModified) {
          wx.showModal({
            title: '有修改的内容未保存',
            content: '确定退出编辑?',
            success: (res) => {
              if (res.confirm) {
                this.setData({
                  isModified : false,
                  show:true
                 })
                wx.navigateBack({
                  delta: 1
                });
              } else if (res.cancel) {
                this.setData({
                  isModified : false,
                  show:true
                 })
              }
            },
          })
        }else{
          wx.navigateBack({
            delta: 1
          });
        }
      }else{
        wx.navigateBack({
          delta: 1
        });
      }
    },
      checkFormModify() {
     this.selectComponent("#form").validate((valid, errors, document) => {
        let documents  = document
         let originalDocument = this.data.document
         if (originalDocument) {
           console.log(originalDocument, "原有数据");
           console.log(documents, "修改后的数据");
           let isEq = _eq(originalDocument, documents);
           if (!isEq) {
             this.setData({
              isModified : true
             })
           }
         }
      })

    },
    
  }
})
相关推荐
蓝色心灵-海12 分钟前
小律书 技术架构详解:前后端分离的自律管理系统设计
java·http·小程序·架构·uni-app
00后程序员张2 小时前
iPhone 无需越狱文件管理 使用Keymob查看导出文件
android·ios·小程序·https·uni-app·iphone·webview
毕设源码-朱学姐2 小时前
【开题答辩全过程】以 基于微信小程序的运动减肥管理系统设计与实现为例,包含答辩的问题和答案
微信小程序·小程序
2501_916008892 小时前
Unity3D iOS 应用防篡改实战 资源校验、 IPA 二进制保护
android·ios·小程序·https·uni-app·iphone·webview
2501_915909063 小时前
MachObfuscator全面解析:Apple平台Mach-O应用程序混淆技术指南
macos·ios·小程序·uni-app·objective-c·cocoa·iphone
2501_9159184116 小时前
苹果App Store上架审核卡住原因分析与解决方案指南
android·ios·小程序·https·uni-app·iphone·webview
焦糖玛奇朵婷1 天前
盲盒小程序开发|解锁开箱新体验[特殊字符]
大数据·开发语言·程序人生·小程序·软件需求
左师佑图1 天前
微信小程序组件事件冒泡问题排查与解决方案
微信小程序·小程序
树下水月1 天前
微信小程序接口,必须使用https的443端口吗?
微信小程序·小程序·https
毕设源码-邱学长1 天前
【开题答辩全过程】以 灵山水牛奶配送小程序的设计与实现为例,包含答辩的问题和答案
小程序