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查询订单状态进行展示




相关内容

热门资讯

东方航空×泡泡玛特:DIMOO... 文旅观察近日,中国东方航空与泡泡玛特携手推出的DIMOO中泰建交50周年限定主题彩绘专机正式首航,执...
多个“第一”!重大突破! 今天(7月9日)上午国新办举行首场“高质量完成‘十四五’规划”系列主题新闻发布会一起看 ↓国家发展改...
中广核新能源:6月发电量140... 格隆汇7月9日|中广核新能源(1811.HK)公告,6月本集团按合并报表口径完成发电量1,403.5...
1.52亿千瓦!江苏电网最高用... 转自:上观新闻7月7日,江苏电网最高用电负荷,年内第三次刷新历史新高,达1.52亿千瓦。截至目前,南...
ST华铭因信披违规被罚,收购聚... 近日,ST华铭(维权)(300462)发布公告,近日收到中国证券监督管理委员会上海监管局下发的《行政...
山西泽辰医药乌帕替尼缓释片启动... 药物临床试验登记与信息公示平台数据显示,山西泽辰医药科技有限公司的乌帕替尼缓释片在健康受试者中随机、...
西海都市报公布地址、订阅及零售... 本报地址:西宁市长江路5号 广告经营许可证: 广告部电话:6125601 排版:西海都市报社编辑部 ...
台风丹娜丝“绘就”陆家嘴诗意画... 转自:上观新闻连日来,受台风“丹娜丝”外围环流持续影响,上海晴雨相间,同时带来降温、大风,云雾光影间...
国家发改委:中国做的这件事,全... 转自:北京日报客户端在国新办今天(9日)举行的首场“高质量完成‘十四五’规划”系列主题新闻发布会上,...
或受欧盟法规影响,苹果将在欧盟...   炒股就看金麒麟分析师研报,权威,专业,及时,全面,助您挖掘潜力主题机会! IT之家 7 月 9...