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

技术：采用vue2+js+vant实现前端支付宝沙箱跳转的一种方案

总体思路：在用户点击支付时，先判断余额是否大于所需付款，如果小则跳转到对应的页面（比如跳转到服务页/余额页让用户去充值同时提示余额不足），如果大则跳转到支付宝沙箱页面输入账号密码进行支付。

例子：

主要关注pay的函数

<!-- 药品订单 --> <div class="menu absolute" v-else> <div class="menu-content"> <van-form label-width="130px" readonly> <van-field v-model="drugMenuInfo.orderDrugNo" name="id" label="订单号" /> <van-field v-model="drugMenuInfo.orderDrugTime" name="orderDate" label="下单日期" /> <van-field name="condition" v-model="drugMenuInfo.deliveryFee" label="配送金额(元)" /> <van-field v-model="drugMenuInfo.accountName" name="price" style="color: #eda6b7;" label="用户名称" /> <van-field name="serveType" v-model="drugMenuInfo.orderDrugPrice" label="订单总金额(元)" /> <van-field name="doctorName" v-model="drugMenuInfo.orderDrugPrice" label="实付金额(元)" /> <van-field name="patientName" v-model="drugMenuInfo.addressName" label="配送地址" /> </van-form> <!-- 是否支付 --> <div class="pay-container absolute"> <div class="content flex-column flex-al-center" style="gap: 10px;"> <!-- 支付按钮 --> <div style="width: 200px;"> <van-button round type="info" block @click="pay()">立即支付</van-button> </div> <!-- <span v-if="" style="color: #a6a6a6; font-size: 12px; text-decoration: underline;" @click="cancelPay()">取消支付</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') } } }) },