订单支付

路由和组件

任务目标：完成支付页路由和组件

1）准备组件

src/views/Pay/index.vue

<script setup lang="ts">
//
</script>

<template>
  <div class="xtx-pay-page">
    <div class="container">
      <XtxBread>
        <XtxBreadItem to="/">首页</XtxBreadItem>
        <XtxBreadItem to="/cart">购物车</XtxBreadItem>
        <XtxBreadItem>支付订单</XtxBreadItem>
      </XtxBread>
      <!-- 付款信息 -->
      <div class="pay-info">
        <span class="icon iconfont icon-queren2"></span>
        <div class="tip">
          <p>订单提交成功！请尽快完成支付。</p>
          <p>支付还剩 <span>24分59秒</span>, 超时后将取消订单</p>
        </div>
        <div class="amount">
          <span>应付总额：</span>
          <span>¥5673.00</span>
        </div>
      </div>
      <!-- 付款方式 -->
      <div class="pay-type">
        <p class="head">选择以下支付方式付款</p>
        <div class="item">
          <p>支付平台</p>
          <a class="btn wx" href="javascript:;"></a>
          <a class="btn alipay" href="javascript:;"></a>
        </div>
        <div class="item">
          <p>支付方式</p>
          <a class="btn" href="javascript:;">招商银行</a>
          <a class="btn" href="javascript:;">工商银行</a>
          <a class="btn" href="javascript:;">建设银行</a>
          <a class="btn" href="javascript:;">农业银行</a>
          <a class="btn" href="javascript:;">交通银行</a>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.pay-info {
  background: #fff;
  display: flex;
  align-items: center;
  height: 240px;
  padding: 0 80px;
  .icon {
    font-size: 80px;
    color: #1dc779;
  }
  .tip {
    padding-left: 10px;
    flex: 1;
    p {
      &:first-child {
        font-size: 20px;
        margin-bottom: 5px;
      }
      &:last-child {
        color: #999;
        font-size: 16px;
      }
    }
  }
  .amount {
    span {
      &:first-child {
        font-size: 16px;
        color: #999;
      }
      &:last-child {
        color: @priceColor;
        font-size: 20px;
      }
    }
  }
}
.pay-type {
  margin-top: 20px;
  background-color: #fff;
  padding-bottom: 70px;
  p {
    line-height: 70px;
    height: 70px;
    padding-left: 30px;
    font-size: 16px;
    &.head {
      border-bottom: 1px solid #f5f5f5;
    }
  }
  .btn {
    width: 150px;
    height: 50px;
    border: 1px solid #e4e4e4;
    text-align: center;
    line-height: 48px;
    margin-left: 30px;
    color: #666666;
    display: inline-block;
    &.active,
    &:hover {
      border-color: @xtxColor;
    }
    &.alipay {
      background: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b6b02396368c9314528c0bbd85a2e06.png)
        no-repeat center / contain;
    }
    &.wx {
      background: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c66f98cff8649bd5ba722c2e8067c6ca.jpg)
        no-repeat center / contain;
    }
  }
}
</style>

2）配置路由

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

订单跳转页

本节目标：订单跳转并传递订单 id 参数。

页面跳转思考

• router.push() 和 router.replace() 的区别是什么？

  • push 追加
  • replace 替换

• 提交订单后跳转到 支付详情页，是通过 push 合适，还是用 replace 更合适呢，为什么？

  • replace 更合适，下单后商品在购物车已经没有了，后退回去无意义，直接后退回购物车。

传递订单 id 号

• 完善TS 类型声明文件：src\types\modules\order.d.ts

// 生成(创建)订单
export interface OrderCreate {
  id: string;
  createTime: string;
  payType: number;
  orderState: number;
  payLatestTime: string;
  postFee: number;
  payMoney: number;
  totalMoney: number;
  totalNum: number;
  payChannel: number;
  // skus?: any;
  // countdown?: any;
}

• 跳转时传递订单 id

  // 提交(创建)订单
  const createOrder = async (data: object) => {
    // 创建订单接口
    const res = await http<OrderCreate>('POST', '/member/order', data);
    console.log('POST', '/member/order', res);
    // 成功提醒用户
    message({ type: 'success', text: '下单成功~' });
    // 主动更新购物车列表
    const cart = useCartStore();
    cart.getCartList();
    // 🎯跳转到支付页，传递订单id
    router.replace(`/member/pay?orderId=${res.data.result.id}`);
  };

支付数据渲染

任务目标：渲染真实支付数据

实现步骤

1. 准备API接口函数获取订单详情
2. 在组件获取数据渲染
3. 完成倒计时效果

接口：获取我的订单详情

Path： /member/order/:id

Method： GET

请求参数

路径参数

参数名称	示例	备注
id	11111	订单id

2）封装请求：src\store\modules\order.ts

// 获取订单详情
const orderDetail = ref<OrderDetail>();
const getOrderDetail = async (orderId: string) => {
  const res = await http<OrderDetail>('GET', `/member/order/${orderId}`);
  orderDetail.value = res.data.result;
};

3）完善类型声明：src\types\modules\order.d.ts

// 订单详情子属性
export interface Property {
  propertyMainName: string;
  propertyValueName: string;
}

export interface Sku {
  id: string;
  spuId: string;
  name: string;
  quantity: number;
  image: string;
  realPay: number;
  curPrice: number;
  properties: Property[];
  attrsText: string;
}

// 订单详情 OrderDetail
export interface OrderDetail {
  id: string;
  createTime: string;
  payType: number;
  orderState: number;
  payLatestTime: string;
  countdown: number;
  postFee: number;
  payMoney: number;
  payChannel: number;
  payState: number;
  totalMoney: number;
  totalNum: number;
  deliveryTimeType: number;
  receiverContact: string;
  receiverMobile: string;
  provinceCode: string;
  cityCode: string;
  countyCode: string;
  receiverAddress: string;
  skus: Sku[];
}

4）在组件获取数据渲染： src\views\Pay\index.vue

<script setup lang="ts">
import { useOrderStore } from '@/store';
import { storeToRefs } from 'pinia';
import { useRoute } from 'vue-router';

const order = useOrderStore();
const route = useRoute();
order.getOrderDetail(route.query.orderId as string);
const { orderDetail } = storeToRefs(order);
</script>


<div class="amount">
    <span>应付总额：</span>
    <span>¥{{ orderDetail?.payMoney }}</span>
</div>

理解支付流程

学习目标：了解支付的前后端业务流程。

1. PC前端点击支付按钮，打开后端提供的支付链接带上 订单ID和回跳地址
2. 后端服务发起支付包，等待用户支付结果，用户支付完成，后端修改订单状态，后端回跳PC前台结果页
3. PC前端在结果页获取回跳URL参数订单ID查询支付状态，展示支付结果

支付宝回跳地址（根据当前业务制定）

http://www.corho.com:8080/#/member/pay/callback

测试支付

买家账号: bbxfwb4932@sandbox.com
登录密码: 111111
支付密码: 111111

其他补充

• 在支付宝网站可以免费开通测试账号。账号申请地址
• 安卓手机可以下载安卓 沙箱支付宝 ，模拟 App 扫码支付。

跳转支付链接

任务目标: 携带关键参数进行支付操作

关键参数

1. 订单id （ orderId ）
2. 回跳地址 （redirect）

src/views/Pay/index.vue

支付宝超链接格式(由后端规定)：

// 后端支付链接格式组成：(后端要求)
// const payUrl = '后台服务基准地址+支付接口地址+订单ID+回跳地址'
const baseURL = "http://pcapi-xiaotuxian-front-devtest.itheima.net/"
// 支付宝的回跳地址不识别特殊符号，需要主动转码处理 encodeURIComponent
const redirect = encodeURIComponent('http://www.corho.com:8080/#/member/pay/callback')
const payUrl = `${baseURL}pay/aliPay?orderId=${route.query.orderId}&redirect=${redirect}`

支付宝按钮添加超链接：

<a class="btn alipay" :href="payUrl"></a>

支付结果展示

任务目标：对支付完的结果进行展示

实现步骤

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

代码落地

1）准备结果页面

src/views/Pay/callback.vue

<script setup lang="ts">
// 
</script>

<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>

<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. 配置路由

// 支付结果页(Layout二级路由)
{
  path: '/member/pay/callback',
  component: () => import('@/views/Pay/callback.vue')
}

4）根据地址订单ID查询订单状态进行展示

<script setup lang="ts">
import { useOrderStore } from '@/store';
import { storeToRefs } from 'pinia';
import { useRoute } from 'vue-router';

const order = useOrderStore();
const route = useRoute();
order.getOrderDetail(route.query.orderId as string);
const { orderDetail } = storeToRefs(order);
</script>

<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">
          {{ $route.query.payResult === 'true' ? '订单支付成功' : '支付失败' }}
        </p>
        <p class="tip">我们将尽快为您发货，收货期间请保持手机畅通</p>
        <p>
          支付方式：<span>
            {{ orderDetail?.payChannel === 1 ? '支付宝' : '微信' }}
          </span>
        </p>
        <p>
          支付金额：<span class="red">¥{{ orderDetail?.payMoney }}</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>

倒计时效果

倒计时函数，完成倒计时效果，指定开始时间

• vueuse.org/shared/useI…
• dayjs.gitee.io/docs/zh-CN/…

useIntervalFn 基本使用

<script setup lang="ts">
import { useIntervalFn } from '@vueuse/core';

/*
  pause    暂停定时器的函数
  resume   恢复定时器的函数

  定时器优化：
    组件卸载时，vueuse 会自动清理定时器
*/
const { pause, resume } = useIntervalFn(() => {
  console.log('🟢vueuse 定时器运行中...');
}, 1000);

// 原生的定时器组件卸载后还在运行
window.setInterval(() => {
  console.log('🚨原生的定时器....');
}, 1000);
</script>

<template>
  <h1>测试页面</h1>
  <button @click="resume()">恢复</button>
  <button @click="pause()">暂停</button>
</template>

<style scoped></style>

通用倒计时功能封装

封装代码：src\hooks\index.ts

/**
 * 通用倒计时功能封装
 * @return count     倒计时秒数
 * @return start(60) 启动倒计时，可传入秒数
 */
export const useCountDown = () => {
  // 倒计时的秒数
  const count = ref(0);

  /*
    pause    暂停定时器的函数
    resume   恢复定时器的函数
  */
  const { pause, resume } = useIntervalFn(
    () => {
      // 定时器内部，时间减少
      count.value--;
      // 如果倒计时减少到 0
      if (count.value === 0) {
        // 暂停定时器
        pause();
      }
    },
    1000, // 时间间隔
    { immediate: false } // 不立刻执行定时器
  );

  // 开启倒计时
  const start = (second: number) => {
    // 如果倒计时未结束直接退出
    if (count.value !== 0) return;
    // 初始化验证码时间
    count.value = second;
    // 恢复定时器
    resume();
  };
  
  // 函数返回值
  return {
    count,
    start,
  };
};

安装依赖

yarn add dayjs
# 或
npm install dayjs

基本使用

import dayjs from 'dayjs'
console.log(dayjs.unix(100).format('mm分ss秒'))

升级 hooks 函数

<script setup lang="ts">
// 获取倒计时的 hooks
const { count, start } = useCountDown();
// 开启倒计时
start(order.orderDetail.countdown);
</script>

<template>
  ...
          <p>订单提交成功！请尽快完成支付。</p>
          <p>
            支付还剩 <span>{{ countTime }}</span>
            , 超时后将取消订单
          </p>
  ...
</template>