Vue3电商项目实战-结算支付 5【12-支付-跳转支付、13-支付-结果展示】
创始人
2024-06-03 07:52:19
0

文章目录

    • 12-支付-跳转支付
    • 13-支付-结果展示


12-支付-跳转支付

目的:支付打开新页,当前页打开提示框。

1.准备支付跳转链接
src/utils/request.js

export const baseURL = 'http://pcapi-xiaotuxian-front-devtest.itheima.net/'

src/views/member/pay/index.vue

    // 支付地址// const payUrl = '后台服务基准地址+支付页面地址+订单ID+回跳地址'const redirect = encodeURIComponent('http://www.corho.com:8080/#/pay/callback')const payUrl = `${baseURL}pay/aliPay?orderId=${route.query.orderId}&redirect=${redirect}`return { order, countdownText, payUrl }
2.

2.等待弹窗
在这里插入图片描述

src/views/component/pay/index.vue

    

如果支付成功:

查看订单详情>

如果支付失败:

查看相关疑问>
    // 支付提示const visibleDialog = ref(false)return { order, timeText, visibleDialog }
.pay-wait {display: flex;justify-content: space-around;p {margin-top: 30px;font-size: 14px;}a {color: @xtxColor;}
}

13-支付-结果展示

目的:准备一个支付完成的回调页面,展示支付后订单状态。

在这里插入图片描述

大致步骤:

  • 准备一个基础页面
  • 根据地址订单ID查询订单状态进行展示,或者是地址栏支付结果。

落的代码:

1.准备一个基础页面




2.根据地址订单ID查询订单状态进行展示




相关内容

热门资讯

桂林旅游A股股东户数减少940... 7月2日消息,数据显示,截至2025年6月30日,桂林旅游A股股东总户数为3.83万户,较上期(20...
亚厦股份A股股东户数减少381... 7月2日消息,数据显示,截至2025年6月30日,亚厦股份A股股东总户数为3.16万户,较上期(20...
邓姓股民向中程退发起索赔 李鸿...   受损股民可至Hehson股民维权平台登记该公司维权:http://wq.finance.sina...
佩通坦就任泰国文化部长 此前她...   泰国被暂停总理职务的佩通坦·钦那瓦周四宣誓就任内阁部长,这一安排使她在等待法庭审理其涉嫌不当行为...
无本钱创业22种方法,热门创业... 现在创业选择手游代理是很多创业者的首选。手游为想创业但没有资本没有方向的创业者提供了创业的机会。而且...
福建:制定推进“海上福建”建设... 转自:财联社【福建:制定推进“海上福建”建设实施方案 加快出台新一轮远洋渔业高质量发展政策措施】财联...
杭州西湖:“五级进阶”破解辅警... 转自:中国警察网“辅警队伍是公安工作不可或缺的重要辅助力量,优化人才生态,打通职业发展通道,是提升分...
亚翔集成涨2.02%,成交额6... 7月3日,亚翔集成盘中上涨2.02%,截至14:00,报34.27元/股,成交6990.37万元,换...
“践行一带一路新征程 领航民族... 6月30日下午,天狮集团“践行一带一路新征程、领航民族健康全生态”新闻发布会在天狮国际健康产业园隆重...
宠物殡葬的水有多深?   对很多养宠人士来说,宠物是家人般的存在。当宠物离世后,不少养宠人士希望用温暖的方式送宠物最后一程...