前端实现支付宝沙箱的一种方案

技术采用vue2jsvant实现前端支付宝沙箱跳转的一种方案总体思路在用户点击支付时先判断余额是否大于所需付款如果小则跳转到对应的页面比如跳转到服务页/余额页让用户去充值同时提示余额不足如果大则跳转到支付宝沙箱页面输入账号密码进行支付。例子主要关注pay的函数!-- 药品订单 -- div classmenu absolute v-else div classmenu-content van-form label-width130px readonly van-field v-modeldrugMenuInfo.orderDrugNo nameid label订单号 / van-field v-modeldrugMenuInfo.orderDrugTime nameorderDate label下单日期 / van-field namecondition v-modeldrugMenuInfo.deliveryFee label配送金额(元) / van-field v-modeldrugMenuInfo.accountName nameprice stylecolor: #eda6b7; label用户名称 / van-field nameserveType v-modeldrugMenuInfo.orderDrugPrice label订单总金额(元) / van-field namedoctorName v-modeldrugMenuInfo.orderDrugPrice label实付金额(元) / van-field namepatientName v-modeldrugMenuInfo.addressName label配送地址 / /van-form !-- 是否支付 -- div classpay-container absolute div classcontent flex-column flex-al-center stylegap: 10px; !-- 支付按钮 -- div stylewidth: 200px; van-button round typeinfo block clickpay()立即支付/van-button /div !-- span v-if stylecolor: #a6a6a6; font-size: 12px; text-decoration: underline; clickcancelPay()取消支付/span -- /div /div /div /div因为我这边有俩种订单类型共用一个支付页根据传入的参数判断订单的类型然后进行带参跳转然后可以通过window.open()打开后端设置的支付宝地址和后端进行商量进行字符串的拼接前面的地址是因为我配置了环境配置文件所以地址可以统一写然后window.open()第二个参数用_self让浏览器打开另一个新窗口显示支付宝页面这样不会影响订单页,最后就是支付成功后让页面返回到你的项目的支付成功页我当时是把我支付成功页的路由给后端让后端配置环境配置文件如下第一张图比如env.development是开发环境env.production是生产环境,pay() { Dialog.confirm({ title: 提示, message: 确定支付?, }).then(() { let money 0 let numNo undefined if (this.$route.query.orderDrugNo) { money this.drugMenuInfo.orderDrugPrice numNo this.drugMenuInfo.orderDrugNo } else { money this.interViewMenuInfo.orderInquiryPrice numNo this.interViewMenuInfo.orderInquiryNo } if (this.charge money) { this.$dialog.confirm({ title: 提示, message: 余额不足, }) .then(() { this.$router.push({ path: /serve }) }) } else { if (this.interViewMenuInfo.orderInquiryId) { console.log(money); window.open(${process.env.VUE_APP_PROXY_TARGET}/pay/inquiry/pay?money${money}numNo${numNo},_self) } else { console.log(money); window.open(${process.env.VUE_APP_PROXY_TARGET}/pay/drug/pay?money${money}numNo${numNo}, _self) } } }) },