结算&支付

结算-页面布局

image.png
落的代码：

  1. 定义组件基础解构和配置路由src/views/member/pay/checkout.vue
  1. <template>
  2.   <div class="xtx-pay-checkout-page">
  3.     <div class="container">
  4.       <XtxBread>
  5.         <XtxBreadItem to="/">首页</XtxBreadItem>
  6.         <XtxBreadItem to="/cart">购物车</XtxBreadItem>
  7.         <XtxBreadItem >填写订单</XtxBreadItem>
  8.       </XtxBread>
  9.       <div class="wrapper">
  10.         <!-- 收货地址 -->
  11.         <!-- 商品信息 -->
  12.         <!-- 配送时间 -->
  13.         <!-- 支付方式 -->
  14.         <!-- 金额明细 -->
  15.         <!-- 提交订单 -->
  16.       </div>
  17.     </div>
  18.   </div>
  19. </template>
  20. <script>
  21. export default {
  22.   name: 'XtxPayCheckoutPage'
  23. }
  24. </script>
  25. <style scoped lang="less">
  26. .xtx-pay-checkout-page {
  27.   .wrapper {
  28.     background: #fff;
  29.   }
  30. }
  31. </style>
  • 配置路由src/router/index.js
  1. const PayCheckout = () => import('@/views/member/pay/checkout')
  1.       { path: '/cart', component: Cart },
  2. +     { path: '/member/checkout', component: PayCheckout }
  1. 完成页面布局效果
  1. <template>
  2.   <div class="xtx-pay-checkout-page">
  3.     <div class="container">
  4.       <XtxBread>
  5.         <XtxBreadItem to="/">首页</XtxBreadItem>
  6.         <XtxBreadItem to="/cart">购物车</XtxBreadItem>
  7.         <XtxBreadItem >填写订单</XtxBreadItem>
  8.       </XtxBread>
  9.       <div class="wrapper">
  10.         <!-- 收货地址 -->
  11.         <h3 class="box-title">收货地址</h3>
  12.         <div class="box-body">
  13.           <div class="address">
  14.             <div class="text">
  15.               <!-- <div class="none">您需要先添加收货地址才可提交订单。</div> -->
  16.               <ul>
  17.                 <li><span>收<i/>货<i/>人：</span>朱超</li>
  18.                 <li><span>联系方式：</span>132****2222</li>
  19.                 <li><span>收货地址：</span>海南省三亚市解放路108号物质大厦1003室</li>
  20.               </ul>
  21.               <a href="javascript:;">修改地址</a>
  22.             </div>
  23.             <div class="action">
  24.               <XtxButton class="btn">切换地址</XtxButton>
  25.               <XtxButton class="btn">添加地址</XtxButton>
  26.             </div>
  27.           </div>
  28.         </div>
  29.         <!-- 商品信息 -->
  30.         <h3 class="box-title">商品信息</h3>
  31.         <div class="box-body">
  32.           <table class="goods">
  33.             <thead>
  34.               <tr>
  35.                 <th width="520">商品信息</th>
  36.                 <th width="170">单价</th>
  37.                 <th width="170">数量</th>
  38.                 <th width="170">小计</th>
  39.                 <th width="170">实付</th>
  40.               </tr>
  41.             </thead>
  42.             <tbody>
  43.               <tr v-for="i in 4" :key="i">
  44.                 <td>
  45.                   <a href="javascript:;" class="info">
  46.                     <img src="https://yanxuan-item.nosdn.127.net/cd9b2550cde8bdf98c9d083d807474ce.png" alt="">
  47.                     <div class="right">
  48.                       <p>轻巧多用锅雪平锅 麦饭石不粘小奶锅煮锅</p>
  49.                       <p>颜色：白色 尺寸：10cm 产地：日本</p>
  50.                     </div>
  51.                   </a>
  52.                 </td>
  53.                 <td>&yen;100.00</td>
  54.                 <td>2</td>
  55.                 <td>&yen;200.00</td>
  56.                 <td>&yen;200.00</td>
  57.               </tr>
  58.             </tbody>
  59.           </table>
  60.         </div>
  61.         <!-- 配送时间 -->
  62.         <h3 class="box-title">配送时间</h3>
  63.         <div class="box-body">
  64.           <a class="my-btn active" href="javascript:;">不限送货时间：周一至周日</a>
  65.           <a class="my-btn" href="javascript:;">工作日送货：周一至周五</a>
  66.           <a class="my-btn" href="javascript:;">双休日、假日送货：周六至周日</a>
  67.         </div>
  68.         <!-- 支付方式 -->
  69.          <h3 class="box-title">支付方式</h3>
  70.         <div class="box-body">
  71.           <a class="my-btn active" href="javascript:;">在线支付</a>
  72.           <a class="my-btn" href="javascript:;">货到付款</a>
  73.           <span style="color:#999">货到付款需付5元手续费</span>
  74.         </div>
  75.         <!-- 金额明细 -->
  76.         <h3 class="box-title">金额明细</h3>
  77.         <div class="box-body">
  78.           <div class="total">
  79.             <dl><dt>商品件数：</dt><dd>5件</dd></dl>
  80.             <dl><dt>商品总价：</dt><dd>¥5697.00</dd></dl>
  81.             <dl><dt>运<i></i>费：</dt><dd>¥0.00</dd></dl>
  82.             <dl><dt>应付总额：</dt><dd class="price">¥5697.00</dd></dl>
  83.           </div>
  84.         </div>
  85.         <!-- 提交订单 -->
  86.         <div class="submit">
  87.           <XtxButton type="primary">提交订单</XtxButton>
  88.         </div>
  89.       </div>
  90.     </div>
  91.   </div>
  92. </template>
  93. <script>
  94. export default {
  95.   name: 'XtxPayCheckoutPage'
  96. }
  97. </script>
  98. <style scoped lang="less">
  99. .xtx-pay-checkout-page {
  100.   .wrapper {
  101.     background: #fff;
  102.     padding: 0 20px;
  103.     .box-title {
  104.       font-size: 16px;
  105.       font-weight: normal;
  106.       padding-left: 10px;
  107.       line-height: 70px;
  108.       border-bottom: 1px solid #f5f5f5;
  109.     }
  110.     .box-body {
  111.       padding: 20px 0;
  112.     }
  113.   }
  114. }
  115. .address {
  116.   border: 1px solid #f5f5f5;
  117.   display: flex;
  118.   align-items: center;
  119.   .text {
  120.     flex: 1;
  121.     min-height: 90px;
  122.     display: flex;
  123.     align-items: center;
  124.     .none {
  125.       line-height: 90px;
  126.       color: #999;
  127.       text-align: center;
  128.       width: 100%;  
  129.     }
  130.     > ul {
  131.       flex: 1;
  132.       padding: 20px;
  133.       li {
  134.         line-height: 30px;
  135.         span {
  136.           color: #999;
  137.           margin-right: 5px;
  138.           > i {
  139.             width: 0.5em;
  140.             display: inline-block;
  141.           }
  142.         }
  143.       }
  144.     }
  145.     > a {
  146.       color: @xtxColor;
  147.       width: 160px;
  148.       text-align: center;
  149.       height: 90px;
  150.       line-height: 90px;
  151.       border-right: 1px solid #f5f5f5;
  152.     }
  153.   }
  154.   .action {
  155.     width: 420px;
  156.     text-align: center;
  157.     .btn {
  158.       width: 140px;
  159.       height: 46px;
  160.       line-height: 44px;
  161.       font-size: 14px;
  162.       &:first-child {
  163.         margin-right: 10px;
  164.       }
  165.     }
  166.   }
  167. }
  168. .goods {
  169.   width: 100%;
  170.   border-collapse: collapse;
  171.   border-spacing: 0;
  172.   .info {
  173.     display: flex;
  174.     text-align: left;
  175.     img {
  176.       width: 70px;
  177.       height: 70px;
  178.       margin-right: 20px;
  179.     }
  180.     .right {
  181.       line-height: 24px;
  182.       p {
  183.         &:last-child {
  184.           color: #999;
  185.         }
  186.       }
  187.     }
  188.   }
  189.   tr {
  190.     th {
  191.       background: #f5f5f5;
  192.       font-weight: normal;
  193.     }
  194.     td,th {
  195.       text-align: center;
  196.       padding: 20px;
  197.       border-bottom: 1px solid #f5f5f5;
  198.       &:first-child {
  199.         border-left: 1px solid #f5f5f5;
  200.       }
  201.       &:last-child {
  202.         border-right: 1px solid #f5f5f5;
  203.       }
  204.     }
  205.   }
  206. }
  207. .my-btn {
  208.   width: 228px;
  209.   height: 50px;
  210.   border: 1px solid #e4e4e4;
  211.   text-align: center;
  212.   line-height: 48px;
  213.   margin-right: 25px;
  214.   color: #666666;
  215.   display: inline-block;
  216.   &.active,&:hover {
  217.     border-color: @xtxColor;
  218.   }
  219. }
  220. .total {
  221.   dl {
  222.     display: flex;
  223.     justify-content: flex-end;
  224.     line-height: 50px;
  225.     dt {
  226.       i {
  227.         display: inline-block;
  228.         width: 2em;
  229.       }
  230.     }
  231.     dd {
  232.       width: 240px;
  233.       text-align: right;
  234.       padding-right: 70px;
  235.       &.price {
  236.         font-size: 20px;
  237.         color: @priceColor;
  238.       }
  239.     }
  240.   }
  241. }
  242. .submit {
  243.   text-align: right;
  244.   padding: 60px;
  245.   border-top: 1px solid #f5f5f5;
  246. }
  247. </style>

结算-渲染页面

目的：分离收货地址组件，渲染页面默认内容。

大致步骤：

  • 分离收货地址组件
  • 定义获结算信息API接口
  • 页面组件获取数据，传入地址组件，渲染剩余内容
  • 渲染地址组件

落的代码：
image.png

  1. 分离收货地址组件src/member/pay/components/checkout-address.vue
  1. <template>
  2.   <div class="checkout-address">
  3.     <div class="text">
  4.       <!-- <div class="none">您需要先添加收货地址才可提交订单。</div> -->
  5.       <ul>
  6.         <li><span>收<i/>货<i/>人：</span>朱超</li>
  7.         <li><span>联系方式：</span>132****2222</li>
  8.         <li><span>收货地址：</span>海南省三亚市解放路108号物质大厦1003室</li>
  9.       </ul>
  10.       <a href="javascript:;">修改地址</a>
  11.     </div>
  12.     <div class="action">
  13.       <XtxButton class="btn">切换地址</XtxButton>
  14.       <XtxButton class="btn">添加地址</XtxButton>
  15.     </div>
  16.   </div>
  17. </template>
  18. <script>
  19. export default {
  20.   name: 'CheckoutAddress'
  21. }
  22. </script>
  23. <style scoped lang="less">
  24. .checkout-address {
  25.   border: 1px solid #f5f5f5;
  26.   display: flex;
  27.   align-items: center;
  28.   .text {
  29.     flex: 1;
  30.     min-height: 90px;
  31.     display: flex;
  32.     align-items: center;
  33.     .none {
  34.       line-height: 90px;
  35.       color: #999;
  36.       text-align: center;
  37.       width: 100%;
  38.     }
  39.     > ul {
  40.       flex: 1;
  41.       padding: 20px;
  42.       li {
  43.         line-height: 30px;
  44.         span {
  45.           color: #999;
  46.           margin-right: 5px;
  47.           > i {
  48.             width: 0.5em;
  49.             display: inline-block;
  50.           }
  51.         }
  52.       }
  53.     }
  54.     > a {
  55.       color: @xtxColor;
  56.       width: 160px;
  57.       text-align: center;
  58.       height: 90px;
  59.       line-height: 90px;
  60.       border-right: 1px solid #f5f5f5;
  61.     }
  62.   }
  63.   .action {
  64.     width: 420px;
  65.     text-align: center;
  66.     .btn {
  67.       width: 140px;
  68.       height: 46px;
  69.       line-height: 44px;
  70.       font-size: 14px;
  71.       &:first-child {
  72.         margin-right: 10px;
  73.       }
  74.     }
  75.   }
  76. }
  77. </style>
  • 使用组件src/views/member/pay/checkout.vue
  • image.png
  1. +import CheckoutAddress from './components/checkout-address'
  2. export default {
  3.   name: 'XtxPayCheckoutPage',
  4. +  components: { CheckoutAddress }
  5. }
  1. <!-- 收货地址 -->
  2. <h3 class="box-title">收货地址</h3>
  3. <div class="box-body">
  4. +  <CheckoutAddress />
  5. </div>
  1. 定义获结算信息API接口src/api/order.js 定义接口
  1. import request from '@/utils/request'
  2. /**
  3.  * 获取结算信息
  4.  */
  5. export const findCheckoutInfo = () => {
  6.   return request({
  7.     method: 'get',
  8.     url: '/member/order/pre'
  9.   })
  10. }
  1. 页面组件获取数据，传入地址组件，渲染剩余内容 src/views/member/pay/checkout.vue
  1. +import { findCheckoutInfo } from '@/api/order'
  2. export default {
  3.   name: 'XtxPayCheckoutPage',
  4.   components: { CheckoutAddress },
  5.   setup () {
  6. +    const checkoutInfo = ref(null)
  7. +    findCheckoutInfo().then(data => {
  8. +      checkoutInfo.value = data.result
  9. +    })
  10. +    return { checkoutInfo }
  11.   }
  12. }
  • 传入地址组件，地址列表src/views/member/pay/checkout.vue
  1. + <div class="wrapper" v-if="checkoutInfo">
  2.     <!-- 收货地址 -->
  3.     <h3 class="box-title">收货地址</h3>
  4.     <div class="box-body">
  5. +   <CheckoutAddress :list="checkoutInfo.userAddresses" />
  6. </div>
  • 渲染剩余内容 src/views/member/pay/checkout.vue
  1. <tbody>
  2.   <tr v-for="item in checkoutInfo.goods" :key="item.id">
  3.     <td>
  4.       <a href="javascript:;" class="info">
  5.         <img :src="item.picture" alt="">
  6.         <div class="right">
  7.           <p>{{item.name}}</p>
  8.           <p>{{item.attrsText}}</p>
  9.         </div>
  10.       </a>
  11.     </td>
  12.     <td>&yen;{{item.payPrice}}</td>
  13.     <td>{{item.count}}</td>
  14.     <td>&yen;{{item.totalPrice}}</td>
  15.     <td>&yen;{{item.totalPayPrice}}</td>
  16.   </tr>
  17. </tbody>
  1. <div class="total">
  2.   <dl><dt>商品件数：</dt><dd>{{checkoutInfo.summary.goodsCount}}件</dd></dl>
  3.   <dl><dt>商品总价：</dt><dd>¥{{checkoutInfo.summary.totalPrice}}</dd></dl>
  4.   <dl><dt>运<i></i>费：</dt><dd>¥{{checkoutInfo.summary.postFee}}</dd></dl>
  5.   <dl><dt>应付总额：</dt><dd class="price">¥{{checkoutInfo.summary.totalPayPrice}}</dd></dl>
  6. </div>
  1. 渲染地址组件src/member/pay/components/checkout-address.vue
  • 接收数据
  1. props: {
  2.   list: {
  3.     type: Array,
  4.     default: () => []
  5.   }
  6. },
  • 得到默认显示地址
  1. setup (props) {
  2.   // 显示的地址
  3.   const showAddress = ref(null)
  4.   if (props.list.length) {
  5.     const defaultAddress = props.list.find(item => item.isDefault === 1)
  6.     if (defaultAddress) {
  7.       showAddress.value = defaultAddress
  8.     } else {
  9.       // eslint-disable-next-line vue/no-setup-props-destructure
  10.       showAddress.value = props.list[0]
  11.     }
  12.   }
  13.   return { showAddress }
  14. }
  • 渲染组件
  1. <div class="text">
  2.   <div v-if="!showAddress" class="none">您需要先添加收货地址才可提交订单。</div>
  3.   <ul v-if="showAddress">
  4.     <li><span>收<i/>货<i/>人：</span>{{showAddress.receiver}}</li>
  5.     <li><span>联系方式：</span>{{showAddress.contact}}</li>
  6.     <li><span>收货地址：</span>{{showAddress.fullLocation.replace(/ /g,'')+showAddress.address}}</li>
  7.   </ul>
  8.   <a v-if="showAddress" href="javascript:;">修改地址</a>
  9. </div>

结算-提交订单

目的：汇总提交订单需要的数据，进行提交。

大致步骤：

  • 定义需要提交的数据对象
  • 绑定提交订单点击事件，进行提交即可

落的代码：

  1. 定义需要提交的数据对象src/views/member/pay/checkout.vue
  1.   setup () {
  2.     const checkoutInfo = ref(null)
  3.     // 需要提交的字段
  4.     const requestParams = reactive({
  5.       addressId: null,
  6. +      deliveryTimeType: 1,
  7. +      payType: 1,
  8. +      buyerMessage: '',
  9. +      goods: []
  10.     })
  11.     findCheckoutInfo().then(data => {
  12.       checkoutInfo.value = data.result
  13. +      // 设置提交时候的商品
  14. +      requestParams.goods = checkoutInfo.value.goods.map(item => {
  15. +        return {
  16. +          skuId: item.skuId,
  17. +          count: item.count
  18. +        }
  19. +      })
  20.     })
  1. 绑定提交订单点击事件，进行提交即可src/api/order.js 提交订单API函数
  1. /**
  2.  * 提交订单
  3.  * @param {Object} order - 订单信息对象
  4.  */
  5. export const createOrder = (order) => {
  6.   return request({
  7.     method: 'post',
  8.     url: '/member/order',
  9.     data: order
  10.   })
  11. }
  • 提交订单src/views/member/pay/checkout.vue
  1. <!-- 提交订单 -->
  2. <div class="submit">
  3.   <XtxButton @click="submitOrder" type="primary">提交订单</XtxButton>
  4. </div>
  1. // 提交订单
  2. const router = useRouter()
  3. const submitOrder = () => {
  4.   if (!requestParams.addressId) return Message({ text: '请选择收货地址' })
  5.   createOrder(requestParams).then(data => {
  6.     router.push({ path: '/member/pay', query: { id: data.result.id } })
  7.   })
  8. }
  9. return { checkoutInfo, changeAddress, submitOrder }

支付-支付页面-基础布局

目的：配置路由和支付页面基础布局。

image.png

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

支付-支付页面-信息展示

目的：展示支付的订单相关信息。

大致步骤：

  • 准备API接口函数获取订单详情
  • 在组件获取数据渲染

落的代码：

  1. 准备API接口函数获取订单详情 src/api/order.js
  1. /**
  2.  * 获取订单详情
  3.  * @param {String} id - 订单ID
  4.  */
  5. export const findOrder = (id) => {
  6.   return request({
  7.     method: 'get',
  8.     url: '/member/order/' + id
  9.   })
  10. }
  1. 在组件获取数据渲染 src/views/component/pay/index.vue
  1. import { ref } from 'vue'
  2. import { findOrder } from '@/api/order'
  3. import { useRoute } from 'vue-router'
  4. export default {
  5.   name: 'XtxPayPage',
  6.   setup () {
  7.     // 订单
  8.     const order = ref(null)
  9.     // 路由信息
  10.     const route = useRoute()
  11.     // 查询订单
  12.     findOrder(route.query.id).then(data => {
  13.       // 设置订单
  14.       order.value = data.result
  15.     })
  16.     return { order }
  17.   }
  18. }
  1. +  <div class="pay-info" v-if="order">
  1. <div class="amount">
  2. <span>应付总额：</span>
  3. +   <span>¥{{order.payMoney}}</span>
  4. </div>

支付-支付流程

目的：知道小兔鲜支付流程。

image.png

总结：

  • PC前台点击支付按钮，新开标签页打开后台提供的支付链接带上订单ID还有回跳地址
  • 后台服务发起支付，等待支付结果，修改订单状态，回跳PC前台结果页
  • PC前台在结果页获取回跳URL参数订单ID查询支付状态，展示支付结果
  1. # 支付地址回调地址（可变）
  2. http://www.corho.com:8080/#/pay/callback

测试：如果使用客户端需要下载 沙箱支付宝 开放平台扫码下载。

  1. 买家账号jfjbwb4477@sandbox.com
  2. 登录密码111111
  3. 支付密码111111

支付-跳转支付

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

  1. 准备支付跳转链接src/utils/request.js
  1. export const baseURL = 'http://pcapi-xiaotuxian-front-devtest.itheima.net/'
  • 拼接回跳地址链接src/views/member/pay/index.vue
  1. // 支付地址
  2. // const payUrl = '后台服务基准地址+支付页面地址+订单ID+回跳地址'
  3. const redirect = encodeURIComponent('http://www.corho.com:8080/#/pay/callback')
  4. const payUrl = `${baseURL}pay/aliPay?orderId=${route.query.orderId}&redirect=${redirect}`
  6. return { order, countdownText, payUrl }
  1. <a class="btn alipay" :href="payUrl" target="_blank"></a>2.

支付-结果展示

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

image.png

大致步骤：

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

落的代码：

  1. 准备一个基础页面
  1. <template>
  2.   <div class="xtx-pay-page">
  3.     <div class="container">
  4.       <XtxBread>
  5.         <XtxBreadItem to="/">首页</XtxBreadItem>
  6.         <XtxBreadItem to="/cart">购物车</XtxBreadItem>
  7.         <XtxBreadItem>支付结果</XtxBreadItem>
  8.       </XtxBread>
  9.       <!-- 支付结果 -->
  10.       <div class="pay-result">
  11.         <span class="iconfont icon-queren2 green"></span>
  12.         <!-- <span class="iconfont icon-shanchu red" ></span> -->
  13.         <p class="tit">订单支付成功</p>
  14.         <p class="tip">我们将尽快为您发货，收货期间请保持手机畅通</p>
  15.         <p>支付方式：<span>微信支付</span></p>
  16.         <p>支付金额：<span>¥1899.00</span></p>
  17.         <div class="btn">
  18.           <XtxButton type="primary" style="margin-right:20px">查看订单</XtxButton>
  19.           <XtxButton type="gray">进入首页</XtxButton>
  20.         </div>
  21.         <p class="alert">
  22.           <span class="iconfont icon-tip"></span>
  23.           温馨提示：小兔鲜儿不会以订单异常、系统升级为由要求您点击任何网址链接进行退款操作，保护资产、谨慎操作。
  24.         </p>
  25.       </div>
  26.     </div>
  27.   </div>
  28. </template>
  29. <script>
  30. export default {
  31.   name: 'XtxPayResultPage'
  32. }
  33. </script>
  34. <style scoped lang="less">
  35. .pay-result {
  36.   padding: 100px 0;
  37.   background: #fff;
  38.   text-align: center;
  39.   > .iconfont {
  40.     font-size: 100px;
  41.   }
  42.   .green {
  43.     color: #1dc779;
  44.   }
  45.   .red {
  46.     color: @priceColor;
  47.   }
  48.   .tit {
  49.     font-size: 24px;
  50.   }
  51.   .tip {
  52.     color: #999;
  53.   }
  54.   p {
  55.     line-height: 40px;
  56.     font-size: 16px;
  57.   }
  58.   .btn {
  59.     margin-top: 50px;
  60.   }
  61.   .alert {
  62.     font-size: 12px;
  63.     color: #999;
  64.     margin-top: 50px;
  65.   }
  66. }
  67. </style>
  1. 根据地址订单ID查询订单状态进行展示
  1. <template>
  2.   <div class="xtx-pay-page">
  3.     <div class="container">
  4.       <XtxBread>
  5.         <XtxBreadItem to="/">首页</XtxBreadItem>
  6.         <XtxBreadItem to="/cart">购物车</XtxBreadItem>
  7.         <XtxBreadItem>支付结果</XtxBreadItem>
  8.       </XtxBread>
  9.       <!-- 支付结果 -->
  10.       <div class="pay-result" v-if="order">
  11.         <span v-if="$route.query.payResult" class="iconfont icon-queren2 green"></span>
  12.         <span v-else class="iconfont icon-shanchu red" ></span>
  13.         <p class="tit">订单支付{{$route.query.payResult?'成功':'失败'}}</p>
  14.         <p class="tip">我们将尽快为您发货，收货期间请保持手机畅通</p>
  15.         <p>支付方式：<span>支付宝支付</span></p>
  16.         <p>支付金额：<span class="red">¥{{order.payMoney}}</span></p>
  17.         <div class="btn">
  18.           <XtxButton @click="$router.push('/member/order')" type="primary" style="margin-right:20px">查看订单</XtxButton>
  19.           <XtxButton @click="$router.push('/')" type="gray">进入首页</XtxButton>
  20.         </div>
  21.         <p class="alert">
  22.           <span class="iconfont icon-tip"></span>
  23.           温馨提示：小兔鲜儿不会以订单异常、系统升级为由要求您点击任何网址链接进行退款操作，保护资产、谨慎操作。
  24.         </p>
  25.       </div>
  26.     </div>
  27.   </div>
  28. </template>
  29. <script>
  30. import { ref } from 'vue'
  31. import { findOrderDetail } from '@/api/order'
  32. import { useRoute } from 'vue-router'
  33. export default {
  34.   name: 'XtxPayResultPage',
  35.   setup () {
  36.     const order = ref(null)
  37.     const route = useRoute()
  38.     findOrderDetail(route.query.orderId).then(data => {
  39.       order.value = data.result
  40.     })
  41.     return { order }
  42.   }
  43. }
  44. </script>
  45. <style scoped lang="less">
  46. .pay-result {
  47.   padding: 100px 0;
  48.   background: #fff;
  49.   text-align: center;
  50.   > .iconfont {
  51.     font-size: 100px;
  52.   }
  53.   .green {
  54.     color: #1dc779;
  55.   }
  56.   .red {
  57.     color: @priceColor;
  58.   }
  59.   .tit {
  60.     font-size: 24px;
  61.   }
  62.   .tip {
  63.     color: #999;
  64.   }
  65.   p {
  66.     line-height: 40px;
  67.     font-size: 16px;
  68.   }
  69.   .btn {
  70.     margin-top: 50px;
  71.   }
  72.   .alert {
  73.     font-size: 12px;
  74.     color: #999;
  75.     margin-top: 50px;
  76.   }
  77. }
  78. </style>