项目笔记30（尚品汇）

支付界面

静态组件

首先和之前的静态组件一样，首先将之前写好的静态组件导入到项目中。
存好之后配置pay的路由。
由于配置的太多次，在此直接展示代码。

页面成功导入，效果如下所示

由于静态页面已经搭建完成，接下来设置路由跳转。根据尝试可知，当用户在trade界面点击“提交订单”按钮时，页面应该跳转到支付界面。
所以找到trade的“提交订单”按钮，给它绑定路由跳转。

提交订单的数据

书写提交订单的接口

数据存储（不用vuex的写法）

这种方法就是把数据存储到组件中，由于当前API的接口太多，为了书写方便首先找到main.js文件夹进行一个配置。具体如下所示。此时所有接口都可以展示出来，如下所示。

此时使用API就简单很多，如下所示，当点击“提交订单"按钮，就可以直接发现API里的接口，而不需要每一个单独import导入。


效果如图所示

接下来发送数据请求。

展示支付信息

找到支付页面


获取订单支付信息
先写接口

接下来获取数据并进行存储。

接下来动态渲染页面

使用ElementUI

安装element UI

npm install element-ui

安装 babel-plugin-component

npm install babel-plugin-component

修改babel.config文件

配置文件修改，项目需要重启。
部分引入的方法如下所示


随后在支付页面绑定点击事件。


此时当点击支付页面的“立即支付”按钮，页面效果如下所示。

修改弹窗为二维码

安装qrcode

npm install qrcode

组件中引入qrcode

找到需要使用该组件的支付页面，利用import引入qrcode

使用qrcode

首先使用qecode获取到二维码地址，接下来通过模板字符串将地址引入到img中，最后渲染到页面上，具体代码如下所示。

支付逻辑

生成之后需要获取用户是否成功支付。
支付成功，路由跳转，支付失败，提示信息。
为了完成如上的逻辑，首先通过接口可以拿到客户是否成功支付。

接下来的步骤如图所示

未支付的时候如图所示

支付成功时页面进行跳转