昆明建设局网站,重庆企业网站建设价格,站长统计幸福宝下载,网站建设的总结100字支付
渲染基础数据 支付页有俩个关键数据#xff0c;一个是要支付的钱数#xff0c;一个是倒计时数据#xff08;超时不支付商品释放#xff09;
准备接口
import request from /utils/httpexport const getOrderAPI (id) {return request({url: /member/order/$…支付
渲染基础数据 支付页有俩个关键数据一个是要支付的钱数一个是倒计时数据超时不支付商品释放
准备接口
import request from /utils/httpexport const getOrderAPI (id) {return request({url: /member/order/${id}})
}获取数据渲染内容
script setup
import { getOrderAPI } from /apis/pay
import { onMounted, ref } from vue
import { useRoute } from vue-router
// 获取订单数据
const route useRoute()
const payInfo ref({})
const getPayInfo async () {const res await getOrderAPI(route.query.id)payInfo.value res.result
}
onMounted(() getPayInfo())/scripttemplatediv classxtx-pay-pagediv classcontainer!-- 付款信息 --div classpay-infospan classicon iconfont icon-queren2/spandiv classtipp订单提交成功请尽快完成支付。/pp支付还剩 span{{ formatTime }}/span, 超时后将取消订单/p/divdiv classamountspan应付总额/spanspan¥{{ payInfo.payMoney?.toFixed(2) }}/span/div/div!-- 付款方式 --div classpay-typep classhead选择以下支付方式付款/pdiv classitemp支付平台/pa classbtn wx hrefjavascript:;/aa classbtn alipay :hrefpayUrl/a/divdiv classitemp支付方式/pa classbtn hrefjavascript:;招商银行/aa classbtn hrefjavascript:;工商银行/aa classbtn hrefjavascript:;建设银行/aa classbtn hrefjavascript:;农业银行/aa classbtn hrefjavascript:;交通银行/a/div/div/div/div
/template实现支付功能
支付业务流程
支付携带参数
// 支付地址
const baseURL http://pcapi-xiaotuxian-front-devtest.itheima.net/
const backURL http://127.0.0.1:5173/paycallback
const redirectUrl encodeURIComponent(backURL)
const payUrl ${baseURL}pay/aliPay?orderId${route.query.id}redirect${redirectUrl}支付宝沙箱账号信息
支付结果展示
业务需求理解
准备模版
script setup/scripttemplatediv classxtx-pay-pagediv classcontainer!-- 支付结果 --div classpay-resultspan classiconfont icon-queren2 green/spanspan classiconfont icon-shanchu red/spanp classtit支付成功/pp classtip我们将尽快为您发货收货期间请保持手机畅通/pp支付方式span支付宝/span/pp支付金额span¥200.00/span/pdiv classbtnel-button typeprimary stylemargin-right:20px查看订单/el-buttonel-button进入首页/el-button/divp classalertspan classiconfont icon-tip/span温馨提示小兔鲜儿不会以订单异常、系统升级为由要求您点击任何网址链接进行退款操作保护资产、谨慎操作。/p/div/div/div
/templatestyle scoped langscss
.pay-result {padding: 100px 0;background: #fff;text-align: center;margin-top: 20px;.iconfont {font-size: 100px;}.green {color: #1dc779;}.red {color: $priceColor;}.tit {font-size: 24px;}.tip {color: #999;}p {line-height: 40px;font-size: 16px;}.btn {margin-top: 50px;}.alert {font-size: 12px;color: #999;margin-top: 50px;}
}
/style绑定路由
{path: paycallback, // 注意路径必须是paycallbackcomponent: PayBack
},渲染数据
script setup
import { getOrderAPI } from /apis/pay
import { onMounted, ref } from vue
import { useRoute } from vue-router
const route useRoute()
const orderInfo ref({})const getOrderInfo async () {const res await getOrderAPI(route.query.orderId)orderInfo.value res.result
}onMounted(() getOrderInfo())/scripttemplatediv classxtx-pay-pagediv classcontainer!-- 支付结果 --div classpay-result!-- 路由参数获取到的是字符串而不是布尔值 --span classiconfont icon-queren2 green v-if$route.query.payResult true/spanspan classiconfont icon-shanchu red v-else/spanp classtit支付{{ $route.query.payResult true ? 成功 : 失败 }}/pp classtip我们将尽快为您发货收货期间请保持手机畅通/pp支付方式span支付宝/span/pp支付金额span¥{{ orderInfo.payMoney?.toFixed(2) }}/span/pdiv classbtnel-button typeprimary stylemargin-right:20px查看订单/el-buttonel-button进入首页/el-button/divp classalertspan classiconfont icon-tip/span温馨提示小兔鲜儿不会以订单异常、系统升级为由要求您点击任何网址链接进行退款操作保护资产、谨慎操作。/p/div/div/div
/template封装倒计时函数
理解需求 编写一个函数useCountDown可以把秒数格式化为倒计时的显示状态,函数使用样例如下:
formatTime为显示的倒计时时间start是倒计时启动函数,调用时可以设置初始值并且开始倒计时 实现思路分析
// 封装倒计时逻辑函数
import { computed, onUnmounted, ref } from vue
import dayjs from dayjs
export const useCountDown () {// 1. 响应式的数据let timer nullconst time ref(0)// 格式化时间 为 xx分xx秒const formatTime computed(() dayjs.unix(time.value).format(mm分ss秒))// 2. 开启倒计时的函数const start (currentTime) {// 开始倒计时的逻辑// 核心逻辑的编写每隔1s就减一time.value currentTimetimer setInterval(() {time.value--}, 1000)}// 组件销毁时清除定时器onUnmounted(() {timer clearInterval(timer)})return {formatTime,start}
}
