收藏
回答

使用@cloudbase/js-sdk写前端页面,使用watch监听订单状态变化时,监听会自动关闭?

在vue开发中使用@cloudbase/js-sdk写web页面。在支付页面监听订单状态的改变,下单成功获取支付链接跳转到微信进行支付,支付成功返回到支付页面时,发现数据的监听已经关闭了

代码如下

页面加载是获取订单信息

mounted() {
    const query = this.$route.query
    dbWatch = null
    if (query) {
      this.order_no = query.order_no
      this.getPageData()
    }
  }


获取订单信息,数据获取成功后监听当前订单支付状态

// 请求数据案例
    getPageData() {
      this.$request
        .getDataFromCloud('get_order_msg_to_pay', {
          order_no: this.order_no
        })
        .then(res => {
          this.loading = false
          if (res.code === 200) {
            this.info = res.data
            if (res.data.order_msg.is_pay) {
              this.$notify({ type: 'success', message: '用户成功付款' })
              this.$router.replace({
                name: 'paySu',
                query: {
                  order_no: res.data.order_msg.order_no
                }
              })
            } else {
              if (!dbWatch) {
                this.initWatch(this.info.order_msg._id)
              }
            }
          } else {
            this.description = '暂无数据'
            this.show_empty = true
          }
        })
        .catch(() => {
          this.loading = false
          this.description = '服务器异常'
          this.show_empty = true
        })
    },


初始化订单数据监听,订单状态变为已支付时,跳转到支付成功页

 initWatch(order_id) {
      dbWatch = this.$request.cloudbase
        .database()
        .collection('orders')
        .doc(order_id)
        .watch({
          onChange: snapshot => {
            if (
              snapshot.msgType === 'NEXT_EVENT' &&
              snapshot.docChanges &&
              snapshot.docChanges.length > 0 &&
              snapshot.docChanges[0].dataType === 'update'
            ) {
              const orderMsg = snapshot.docChanges[0].doc
              if (orderMsg.is_pay) {
                this.$notify({ type: 'success', message: '用户成功付款' })
                this.$router.replace({
                  name: 'paySu',
                  query: {
                    order_no: orderMsg.order_no
                  }
                })
              }
            }
          },
          onError: error => {
            console.log('收到error**********', error)
          }
        })
    }


点击页面支付按钮进行支付:

  toPay() {
      this.addLoading = true
      this.$toast.loading({
        duration: 0,
        message: '正在支付...',
        forbidClick: true
      })
      // 获取操作系统信息
      const browserName = platform.name.toLowerCase()
      const osFamily = platform.os.family.toLowerCase()
      let deviceType = 'Android'
      if (osFamily === 'ios' || browserName.includes('iphone') || browserName.includes('ipad')) {
        deviceType = 'iOS'
      }
      this.$request
        .getDataFromCloud(this.$utils.isMobile() ? 'pay_h5' : 'pay_native', {
          order_no: this.info.order_msg.order_no,
          device_type: deviceType
        })
        .then(res => {
          console.log('res ===', JSON.stringify(res))
          if (res.result.code === 200) {
            if (this.$utils.isMobile()) {
              location.href = res.result.data.pay_url
            } else {
              this.showPayCode = true
              this.$nextTick(() => {
                // 此时可以确认已经有ref对象了
                QrCode.toCanvas(this.$refs.erCanvas, res.result.data.pay_url, { scale: 8 }) //将文字转成二维码
                // 如果转化的二维码后面信息 是一个地址的话 就会跳转到该地址 如果不是地址就会显示内容
              })
            }
          } else {
            this.$notify({ type: 'danger', message: res.result.msg })
          }
          console.log('pay_h5 res==', JSON.stringify(res))
          this.$toast.clear()
          this.addLoading = false
        })
        .catch(() => {
          this.$notify({ type: 'danger', message: '服务器异常' })
          this.$toast.clear()
          this.addLoading = false
        })
    }


获取支付链接后 执行  location.href = res.result.data.pay_url 跳转到微信进行支付,现在的问题是跳转到微信进行支付,在苹果手机上数据库监听会自己关闭

打印日志如下:

数据库监听方法中收到一条错误信息:

 数据监听 error打印了 收到error********** {"errCode": "SDK_DATABASE_REALTIME_LISTENER_WEBSOCKET_CONNECTION_ERROR", "errMsg": {"isTrusted": true}}


回答关注问题邀请回答
收藏
登录 后发表内容