• v3 + ts 商城项目的支付模块

    目录

    支付页面 - 基础布局

    分析

    创建页面

    配置路由

    订单跳转页

    支付页面 - 数据渲染

    分析

    支付页面 - 倒计时渲染

    （1）开始倒计时​​​​​​​

    （2）安装dayjs

    （3）提供方法（注意：vue3没有过滤器）

     （4）渲染

    （5）倒计时为0，重新跳到购物车页面

    支付 - 支付流程

    分析

    步骤 

    支付 - 等待支付

    支付结果展示

    支付模块的一个大致过程主要分为

    支付页面的一个基础布局、数据的渲染、支付流程、等待支付还有一个支付结果的展示

    支付页面 - 基础布局

    分析

    基础布局的话 就是配置路由和支付页面基础布局

    创建页面

    新建文件 src/views/Member/Pay.vue

    1. <script name="XtxPayPage" setup lang="ts"></script>
    2. <template>
    3.   <div class="xtx-pay-page">
    4.     <div class="container">
    5.       <XtxBread>
    6.         <XtxBreadItem to="/">首页</XtxBreadItem>
    7.         <XtxBreadItem to="/cart">购物车</XtxBreadItem>
    8.         <XtxBreadItem>支付订单</XtxBreadItem>
    9.       </XtxBread>
    10.       <!-- 付款信息 -->
    11.       <div class="pay-info">
    12.         <span class="icon iconfont icon-queren2"></span>
    13.         <div class="tip">
    14.           <p>订单提交成功！请尽快完成支付。</p>
    15.           <p>支付还剩 <span>24分59秒</span>, 超时后将取消订单</p>
    16.         </div>
    17.         <div class="amount">
    18.           <span>应付总额：</span>
    19.           <span>¥5673.00</span>
    20.         </div>
    21.       </div>
    22.       <!-- 付款方式 -->
    23.       <div class="pay-type">
    24.         <p class="head">选择以下支付方式付款</p>
    25.         <div class="item">
    26.           <p>支付平台</p>
    27.           <a class="btn wx" href="javascript:;"></a>
    28.           <a class="btn alipay" href="javascript:;"></a>
    29.         </div>
    30.         <div class="item">
    31.           <p>支付方式</p>
    32.           <a class="btn" href="javascript:;">招商银行</a>
    33.           <a class="btn" href="javascript:;">工商银行</a>
    34.           <a class="btn" href="javascript:;">建设银行</a>
    35.           <a class="btn" href="javascript:;">农业银行</a>
    36.           <a class="btn" href="javascript:;">交通银行</a>
    37.         </div>
    38.       </div>
    39.     </div>
    40.   </div>
    41. </template>
    42.  
    43. <style scoped lang="less">
    44. .pay-info {
    45.   background: #fff;
    46.   display: flex;
    47.   align-items: center;
    48.   height: 240px;
    49.   padding: 0 80px;
    50.   .icon {
    51.     font-size: 80px;
    52.     color: #1dc779;
    53.   }
    54.   .tip {
    55.     padding-left: 10px;
    56.     flex: 1;
    57.     p {
    58.       &:first-child {
    59.         font-size: 20px;
    60.         margin-bottom: 5px;
    61.       }
    62.       &:last-child {
    63.         color: #999;
    64.         font-size: 16px;
    65.       }
    66.     }
    67.   }
    68.   .amount {
    69.     span {
    70.       &:first-child {
    71.         font-size: 16px;
    72.         color: #999;
    73.       }
    74.       &:last-child {
    75.         color: @priceColor;
    76.         font-size: 20px;
    77.       }
    78.     }
    79.   }
    80. }
    81. .pay-type {
    82.   margin-top: 20px;
    83.   background-color: #fff;
    84.   padding-bottom: 70px;
    85.   p {
    86.     line-height: 70px;
    87.     height: 70px;
    88.     padding-left: 30px;
    89.     font-size: 16px;
    90.     &.head {
    91.       border-bottom: 1px solid #f5f5f5;
    92.     }
    93.   }
    94.   .btn {
    95.     width: 150px;
    96.     height: 50px;
    97.     border: 1px solid #e4e4e4;
    98.     text-align: center;
    99.     line-height: 48px;
    100.     margin-left: 30px;
    101.     color: #666666;
    102.     display: inline-block;
    103.     &.active,
    104.     &:hover {
    105.       border-color: @xtxColor;
    106.     }
    107.     &.alipay {
    108.       background: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b6b02396368c9314528c0bbd85a2e06.png)
    109.         no-repeat center / contain;
    110.     }
    111.     &.wx {
    112.       background: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c66f98cff8649bd5ba722c2e8067c6ca.jpg)
    113.         no-repeat center / contain;
    114.     }
    115.   }
    116. }
    117. </style>

    配置路由

    src/router/index.ts     配置二级路由,不需要加 / 

    {
      path: 'member/pay',
      component: () => import('@/views/Member/Pay.vue')
    }

    订单跳转页

    订单跳转时要传递订单id参数

    页面跳转需要思考的问题

    • router.push() 和 router.replace() 的区别是什么？         
      •     push 追加，后退能回到前页面
      •     replace 替换，后退不能回到前页面
    • 提交订单后跳转到 支付详情页，是通过 push 合适，还是用 replace 更合适呢，为什么？       replace 更合适，下单后商品信息已经没有了，后退回去无意义。
    • 跳转时传递订单 id
    1. const submitCheckout = async () => {
    2.   // 如果地址为空，不能提交订单
    3.   if (!checkout.showAddress) {
    4.     return Message.warning('请选择收货地址')
    5.   }
    6.   const res = await request.post('/member/order', {
    7.     goods: checkout.checkoutInfo.goods.map((item) => {
    8.       return {
    9.         skuId: item.skuId,
    10.         count: item.count,
    11.       }
    12.     }),
    13.     addressId: checkout.showAddress.id,
    14.   })
    15.   // 成功提醒用户
    16.   Message({ type: 'success', text: '下单成功~' })
    17.   // 🔔重新获取购物车列表
    18. +  cart.getCartList()
    19.   // 跳转到支付页面
    20.  
    21. +  router.replace('/member/pay?id=' + res.data.result.id)
    22. }

    支付页面 - 数据渲染

    分析

    就是渲染真实支付数据

    （1）先提供数据类型

    1. export interface OrderPayInfo {
    2.   id: string
    3.   createTime: string
    4.   payType: number
    5.   orderState: number
    6.   payLatestTime: string
    7.   countdown: number
    8.   postFee: number
    9.   payMoney: number
    10.   payChannel: number
    11.   totalMoney: number
    12.   totalNum: number
    13.   deliveryTimeType: number
    14.   receiverContact: string
    15.   receiverMobile: string
    16.   provinceCode: string
    17.   cityCode: string
    18.   countyCode: string
    19.   receiverAddress: string
    20.   payTime?: any
    21.   consignTime?: any
    22.   endTime?: any
    23.   closeTime?: any
    24.   evaluationTime?: any
    25.   skus: {
    26.     id: string
    27.     spuId: string
    28.     name: string
    29.     quantity: number
    30.     image: string
    31.     realPay: number
    32.     curPrice: number
    33.     totalMoney?: any
    34.     properties: {
    35.       propertyMainName: string
    36.       propertyValueName: string
    37.     }[]
    38.     attrsText: string
    39.   }[]
    40.   arrivalEstimatedTime?: any
    41. }

    （2）发送请求获取支付数据

    （3）渲染支付信息

    2. <div class="pay-info">
    3.   <span class="icon iconfont icon-queren2">span>
    4.   <div class="tip">
    5.     <p>订单提交成功！请尽快完成支付。p>
    6.     <p>
    7.       支付还剩 <span>{{ order?.countdown }}
    8.       >, 超时后将取消订单
    9.     p>
    10.   div>
    11.   <div class="amount">
    12.     <span>应付总额：span>
    13.     <span>¥{{ order?.totalMoney }}span>
    14.   div>
    15. div>

    支付页面 -倒计时​​​​​​​渲染

    （1）开始倒计时

    1. const showTime = ref(0)
    2.  
    3. onMounted(async () => {
    4.   const res = await request.get<ApiRes<OrderPayInfo>>(`/member/order/${id}`)
    5.   console.log('GET', `/member/order/${id}`, res.data.result)
    6.   order.value = res.data.result
    7.   const { time, start } = useCountDown(order.value.countdown)
    8.   start()
    9.   watch(time, (value) => {
    10.       showTime.value = value
    11.   })
    12. })

    （2）安装dayjs

     yarn add dayjs

    （3）提供方法（注意：vue3没有过滤器）

     const formatTime = (time: number) => {
      return dayjs.unix(time).format('mm分ss秒')
    }

     （4）渲染


      支付还剩 {{ formatTime(showTime) }} , 超时后将取消订单

    （5）倒计时为0，重新跳到购物车页面

    1.   // 将初始值, 同步给showTime
    2.   showTime.value = order.value.countdown
    3.  
    4.   watch(time, (value) => {
    5.     showTime.value = value
    6.  
    7.     if (value <= 0) {
    8.       // 跳转页面, 并提醒用户, 订单已超时
    9.       router.replace('/cart')
    10.       Message.warning('订单已超时, 请重新下单')
    11.     }
    12.   })

    支付 - 支付流程

    分析

    步骤 

    ●PC前台点击支付按钮，新开标签页打开后台提供的支付链接带上订单ID还有回跳地址
    ●后台服务发起支付，等待支付结果，修改订单状态，回跳PC前台结果页
    ●PC前台在结果页获取回跳URL参数订单ID查询支付状态，展示支付结果

    # 支付地址回调地址（可变）
    http://www.corho.com:8080/#/pay/callback
    买家账号jfjbwb4477@sandbox.com
    登录密码111111
    支付密码111111

    支付 - 等待支付

    目的：支付打开新页，当前页打开提示框

    1. 在utils/request.ts中导出基础路径

      export const baseURL = 'https://apipc-xiaotuxian-front.itheima.net/'
    const request = axios.create({
      baseURL,
      // baseURL: 'http://pcapi-xiaotuxian-front.itheima.net/',
      timeout: 5000
    })

            2.拼接支付链接

    const redirectUrl = encodeURIComponent('http://www.corho.com:8080/#/pay/callback')
    const payUrl = `${baseURL}pay/aliPay?orderId=${route.query.id}&redirect=${redirectUrl}`

            3.增加跳转链接

    支付结果展示

    实现步骤

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

    具体代码

    （1）准备结果页面 src/views/Member/Pay/Callback.vue

    2.  
    3. <template>
    4.   <div class="xtx-pay-page">
    5.     <div class="container">
    6.       <XtxBread>
    7.         <XtxBreadItem to="/">首页XtxBreadItem>
    8.         <XtxBreadItem to="/cart">购物车XtxBreadItem>
    9.         <XtxBreadItem>支付结果XtxBreadItem>
    10.       XtxBread>
    11.       
    12.       <div class="pay-result">
    13.         <span class="iconfont icon-queren2 green">span>
    14.         
    15.         <p class="tit">订单支付成功p>
    16.         <p class="tip">我们将尽快为您发货，收货期间请保持手机畅通p>
    17.         <p>支付方式：<span>微信支付span>p>
    18.         <p>支付金额：<span>¥1899.00span>p>
    19.         <div class="btn">
    20.           <XtxButton type="primary" style="margin-right:20px">查看订单XtxButton>
    21.           <XtxButton type="gray">进入首页XtxButton>
    22.         div>
    23.         <p class="alert">
    24.           <span class="iconfont icon-tip">span>
    25.           温馨提示：小兔鲜儿不会以订单异常、系统升级为由要求您点击任何网址链接进行退款操作，保护资产、谨慎操作。
    26.         p>
    27.       div>
    28.     div>
    29.   div>
    30. template>
    31.  
    32. <style scoped lang="less">
    33. .pay-result {
    34.   padding: 100px 0;
    35.   background: #fff;
    36.   text-align: center;
    37.   > .iconfont {
    38.     font-size: 100px;
    39.   }
    40.   .green {
    41.     color: #1dc779;
    42.   }
    43.   .red {
    44.     color: @priceColor;
    45.   }
    46.   .tit {
    47.     font-size: 24px;
    48.   }
    49.   .tip {
    50.     color: #999;
    51.   }
    52.   p {
    53.     line-height: 40px;
    54.     font-size: 16px;
    55.   }
    56.   .btn {
    57.     margin-top: 50px;
    58.   }
    59.   .alert {
    60.     font-size: 12px;
    61.     color: #999;
    62.     margin-top: 50px;
    63.   }
    64. }
    65. style>

    （2）配置路由

    1. {
    2.   path: '/',
    3.   component: Layout,
    4.   children: [
    5.     ...,
    6.     {
    7.       path: '/pay/callback',
    8.       component: () => import('@/views/member/pay/callback.vue')
    9.     }
    10.   ]
    11. },

    （3）根据地址订单id查询订单状态进行展示

    2.  
    3. <template>
    4.   <div class="xtx-pay-page">
    5.     <div class="container">
    6.       <XtxBread>
    7.         <XtxBreadItem to="/">首页XtxBreadItem>
    8.         <XtxBreadItem to="/cart">购物车XtxBreadItem>
    9.         <XtxBreadItem>支付结果XtxBreadItem>
    10.       XtxBread>
    11.       
    12.       <div class="pay-result">
    13.         <span v-if="payResult" class="iconfont icon-queren2 green">span>
    14.         <span v-else class="iconfont icon-shanchu red">span>
    15.         <p class="tit">{{ payResult ? '订单支付成功' : '订单支付失败' }}p>
    16.         <p class="tip">我们将尽快为您发货，收货期间请保持手机畅通p>
    17.         <p>支付方式：<span>支付宝支付span>p>
    18.         <p>
    19.           支付金额：<span>{{ order.payMoney }}span>
    20.         p>
    21.         <div class="btn">
    22.           <XtxButton type="primary" style="margin-right: 20px">
    23.             查看订单
    24.           XtxButton>
    25.           <XtxButton type="gray">进入首页XtxButton>
    26.         div>
    27.         <p class="alert">
    28.           <span class="iconfont icon-tip">span>
    29.           温馨提示：小兔鲜儿不会以订单异常、系统升级为由要求您点击任何网址链接进行退款操作，保护资产、谨慎操作。
    30.         p>
    31.       div>
    32.     div>
    33.   div>
    34. template>
  • 相关阅读:
    基于FPGA的图像缩小算法实现,包括tb测试文件和MATLAB辅助验证
    【入门】初识深度学习
    每日一题：托普利茨矩阵
    horizontal image flip(Neon优化)
    集合~Map
    ArchLinux 把deb包转换成pkg.tar.zst包
    MySQL 面试题——MySQL 基础
    电子商务盛行，怎么提高商店转换率？
    微服务和Spring Cloud Alibaba介绍
    计算机毕业设计 SSM学校图书借阅管理系统 图书馆借阅管理系统 图书借阅系统Java
  • 原文地址：https://blog.csdn.net/LJM51200/article/details/126550352