文章目录
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 }
<a class="btn alipay" :href="payUrl" target="_blank"></a>2.
2.等待弹窗
src/views/component/pay/index.vue
<XtxDialog title="正在支付..." v-model:visible="visibleDialog">
<div class="pay-wait">
<img src="@/assets/images/load.gif" alt="">
<div v-if="order">
<p>如果支付成功:</p>
<RouterLink :to="`/member/order/${order.id}`">查看订单详情></RouterLink>
<p>如果支付失败:</p>
<RouterLink to="/">查看相关疑问></RouterLink>
</div>
</div>
</XtxDialog>
// 支付提示
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.准备一个基础页面
<template>
<div class="xtx-pay-page">
<div class="container">
<XtxBread>
<XtxBreadItem to="/">首页</XtxBreadItem>
<XtxBreadItem to="/cart">购物车</XtxBreadItem>
<XtxBreadItem>支付结果</XtxBreadItem>
</XtxBread>
<!-- 支付结果 -->
<div class="pay-result">
<span class="iconfont icon-queren2 green"></span>
<!-- <span class="iconfont icon-shanchu red" ></span> -->
<p class="tit">订单支付成功</p>
<p class="tip">我们将尽快为您发货,收货期间请保持手机畅通</p>
<p>支付方式:<span>微信支付</span></p>
<p>支付金额:<span>¥1899.00</span></p>
<div class="btn">
<XtxButton type="primary" style="margin-right:20px">查看订单</XtxButton>
<XtxButton type="gray">进入首页</XtxButton>
</div>
<p class="alert">
<span class="iconfont icon-tip"></span>
温馨提示:小兔鲜儿不会以订单异常、系统升级为由要求您点击任何网址链接进行退款操作,保护资产、谨慎操作。
</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'XtxPayResultPage'
}
</script>
<style scoped lang="less">
.pay-result {
padding: 100px 0;
background: #fff;
text-align: center;
> .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>
2.根据地址订单ID查询订单状态进行展示
<template>
<div class="xtx-pay-page">
<div class="container">
<XtxBread>
<XtxBreadItem to="/">首页</XtxBreadItem>
<XtxBreadItem to="/cart">购物车</XtxBreadItem>
<XtxBreadItem>支付结果</XtxBreadItem>
</XtxBread>
<!-- 支付结果 -->
<div class="pay-result" v-if="order">
<span v-if="$route.query.payResult" class="iconfont icon-queren2 green"></span>
<span v-else class="iconfont icon-shanchu red" ></span>
<p class="tit">订单支付{{$route.query.payResult?'成功':'失败'}}</p>
<p class="tip">我们将尽快为您发货,收货期间请保持手机畅通</p>
<p>支付方式:<span>支付宝支付</span></p>
<p>支付金额:<span class="red">¥{{order.payMoney}}</span></p>
<div class="btn">
<XtxButton @click="$router.push('/member/order')" type="primary" style="margin-right:20px">查看订单</XtxButton>
<XtxButton @click="$router.push('/')" type="gray">进入首页</XtxButton>
</div>
<p class="alert">
<span class="iconfont icon-tip"></span>
温馨提示:小兔鲜儿不会以订单异常、系统升级为由要求您点击任何网址链接进行退款操作,保护资产、谨慎操作。
</p>
</div>
</div>
</div>
</template>
<script>
import { ref } from 'vue'
import { findOrderDetail } from '@/api/order'
import { useRoute } from 'vue-router'
export default {
name: 'XtxPayResultPage',
setup () {
const order = ref(null)
const route = useRoute()
findOrderDetail(route.query.orderId).then(data => {
order.value = data.result
})
return { order }
}
}
</script>
<style scoped lang="less">
.pay-result {
padding: 100px 0;
background: #fff;
text-align: center;
> .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>