项目需求:打开新的页面进行支付
解决方案:
首先需要配置路由:
const route = [
{
path: '/hotel/payment',
component: () => import('@/views/payment/HotelPayment.vue'),
name: 'hotelPayment',
meta: { title: '酒店订单支付' }
}
]
给需要跳转的按钮绑定事件:
<el-button @click="handlePayment(item)">点击支付</el-button>
/* 点击支付 */
handlePayment(row) {
//请求后台数据
queryHtOrderDetail({ orderNo: row.OrderNo }).then(res => {
let { code, data } = res.data
if (code == 0) {
let time = new Date(data.AddTime)
time.setSeconds(time.getSeconds() + 300);
let payInfo = {paymentDeadline: time, ...data}
const routeData = this.$router.resolve({
path: '/hotel/payment', // 目标路由的名称
query: payInfo,//携带的参数
});
window.open(routeData.href, '_blank')//跳转并携带参数
}
})
},
支付页面接收参数:
created() {
this.orderData = this.$route.query
}
注意:如果传递的参数包含数组或对象则需要使用JSON进行转换:
//传递传参
let payInfo = {
Deadline: time,
Passenger: JSON.stringify(data.Passenger),
Voyage: JSON.stringify(data.Voyage[0]),
}
const routeData = this.$router.resolve({
path: '/flight/payment', // 目标路由的名称
query: payInfo,
});
window.open(routeData.href, '_blank')
//接收参数
this.orderInfo = {
...this.$route.query,
Passenger: JSON.parse(this.$route.query.Passenger),
Voyage: JSON.parse(this.$route.query.Voyage)
}
学艺不精,但希望有所帮助。