在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}}