一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第20天，点击查看活动详情
支付界面
静态组件
首先和之前的静态组件一样，首先将之前写好的静态组件导入到项目中。 存好之后配置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中，最后渲染到页面上，具体代码如下所示。
支付逻辑
生成之后需要获取用户是否成功支付。 支付成功，路由跳转，支付失败，提示信息。 为了完成如上的逻辑，首先通过接口可以拿到客户是否成功支付。
接下来的步骤如图所示
未支付的时候如图所示
支付成功时页面进行跳转
