textarea实现datalist效果_2020年最新最全腾讯云开发实现小程序支付功能四

第四节，商品订单支付案例讲解

上面我们学会了支付功能，那么我们接下来就用一个简单的案例来教大家试下一个简单的商城小程序，包含以下功能

• 1，商品列表
• 2，订单列表(分已支付和待支付)
• 3，支付功能
• 4，解决一些支付中常见的问题

老规矩，先看下效果图

页面比较简陋，因为我这里主要教大家如何实现支付功能的，所以页面美化的问题，大家课下有时间时，自己做下美化就行了。

一，在app.json里配置tabbar多页面

由于我们这里用到了两个页面，还是在我们前面章节的基础上，直接改造页面。我们配置多页面就要用到tabbar了。所以我们先创建一个order页面，页面如何创建，我这里就不再累述了。小程序基础的课里讲了很多遍。 然后在app.json里配置如下

由于这里的配置不是本节的学习重点，这里把代码给到大家，大家直接粘贴到自己项目里就可以的。

"tabBar": {    "color": "#a9b7b7",    "selectedColor": "#11cd6e",    "borderStyle": "white",    "list": [{        "selectedIconPath": "image/home_yes.png",        "iconPath": "image/home_no.png",        "pagePath": "pages/good/good",        "text": "商品首页"      },      {        "selectedIconPath": "image/order_yes.png",        "iconPath": "image/order_no.png",        "pagePath": "pages/order/order",        "text": "我的订单"      }    ]  },

这里用到的图片资源，我给大家放到了课程配套资源里，如下

大家课下找石头哥索要就行了(限购课用户奥)，把资源下载下来以后，新建一个image文件夹，然后把资源放到image文件下就可以了。

到这里tabbar配置好了，我们接下来就要开始代码部分了。

二，把商品做活，放到数据库里

我们前面学习的时候，用的是本地数据，接下来我就来给大家演示下，如何把商品数据放到数据库，方便后期动态修改。

1，在云开发数据库里新建goods集合(表)

创建好以后，记得把权限改为所有人可读写

创建好goods集合以后，就要往里面添加数据了，把我们之前本地写死的数据，就可以做成活的了。

添加好的数据如下

2，改造商品列表代码

我们之前的商品数据是写死在本地的，这次我们就可以请求云开发数据库里的数据了，后期可以动态增删，修改。

通过上图我们可以看出，已经成功的请求到了数据库里的商品数据，接下来把数据动态的绑定到小程序页面上就可以了。

可以看到，我们的数据已经成功的显示出来了。 到这里我们的商品列表页改造就算完成了。

三，创建订单

我们之前学习是点击购买就直接支付了，没有一个订单来动态的记录。所以我们这一节，先来教大家如何新建订单。

1，新建order表

我们要在云开发数据库里生成订单，其实就是往订单表里增加数据。所以还是要先新建order集合(表)

这里要注意下，我们的订单表的权限设置为“仅创建者可读写”，为什么呢？ 因为我们每个人的订单肯定不想让别人看到吧。所以我们设置完仅创建者可读写，那么这个订单就只有我们自己可以看。上面的goods表之所以设置为所有人可读，是因为我们的商品数据是要每个客户都能看到的。

2，创建订单代码编写

我们上面order表创建好以后，我们用户再点购买的时候，就不能直接去支付了，应该先创建一个订单，然后再去支付。下面我们就分解开。教大家实现订单的创建。

上面代码注释很清楚了，我们创建订单时需要往订单里保存商品名，金额，下单时间，订单状态。然后看下order表里的订单数据如下

这样我们新的订单就创建成功了。 创建订单时，我们有用到一个获取当前时间的方法，这个方法是我们自定义的，由于不是本节学习重点，我就把这个方法的代码贴出来给大家，大家后面直接把代码放到自己项目里用就行了。

// 获取当前时间的工具方法  _getCurrentTime() {    var d = new Date();    var month = d.getMonth() + 1;    var date = d.getDate();    var day = d.getDay();    var hours = d.getHours();    var minutes = d.getMinutes();    var seconds = d.getSeconds();    var ms = d.getMilliseconds();    var curDateTime = d.getFullYear() + '年';    if (month > 9)      curDateTime += month + '月';    else      curDateTime += month + '月';    if (date > 9)      curDateTime = curDateTime + date + "日";    else      curDateTime = curDateTime + date + "日";    if (hours > 9)      curDateTime = curDateTime + hours + "时";    else      curDateTime = curDateTime + hours + "时";    if (minutes > 9)      curDateTime = curDateTime + minutes + "分";    else      curDateTime = curDateTime + minutes + "分";    return curDateTime;  },

四，订单支付

我们上面创建好订单以后，应该在订单创建成功的回调里调起支付。其实支付的代码和我们前面学习基本都一样，唯一变化的就是要把我们新建的订单id传给支付云函数，把订单id作为支付时的单号。

上图是我们创建订单时，返回的信息，可以看到返回信息里有一个_id字段,这个字段在我们order表里也有。

其实我们支付的时候单号要保证唯一性，其实这个_id是微信官方自动为我们创建的，是唯一的，所以可以直接拿来用的，那么我们把之前的goPay支付方法稍微改造下。把这个_id作为订单号传给支付云函数。

可以看出我们在创建订单成功的回调里去调起支付，依然可以支付成功。 我们的pay0611云函数唯一的变化就是把订单号做成了活的。

重点注意: 我们的云函数只要有任何改动，都要记得重新部署云函数。

到这里我们的支付和订单部分就改造完成了，接下来就要去实现订单的未支付和已支付列表了。

五，订单页面的展示(分已支付和未支付)

这一节知识点比较多，也比较复杂，我先把代码贴给大家，会在视频里仔细给大家一步步讲解。

• order.wxml

这里切换未支付和已支付的分类栏代码如下：

{{item}}商品:{{item.goodName}}金额:{{item.totalFee}}元下单时间:{{item.time}}去支付数据为空哦~~

• roder.js 这里是重点代码，直接把完整的代码贴给大家。

var app = getApp()let DB = wx.cloud.database();let orderStatus = 0; //0新下单未支付，1支付成功Page({  data: {    // 顶部菜单切换    navbar: ["未支付", "已支付"],    // 默认选中菜单    currentTab: 0,    list: []  },  //顶部tab切换  navbarTap: function (e) {    let index = e.currentTarget.dataset.idx;    this.setData({      currentTab: index    })    console.log("index", index)    //0新下单未支付，1支付成功    if (index == 1) {      orderStatus = 1;    } else {      orderStatus = 0;    }    this.getMyOrderList();  },  onLoad() {    this.getMyOrderList();  },  //获取订单  getMyOrderList() {    let that = this;    DB.collection("order")      .where({        status: orderStatus      })      .get({        success: function (res) {          console.log("获取成功", res.data)          let datalist = res.data;          console.log(res);          if (datalist && datalist.length > 0) {            that.setData({              list: datalist            })          } else {            that.setData({              list: []            })          }        }      })  },  //支付订单  payOrder(event) {    let good = event.currentTarget.dataset.item    console.log('支付的good', good)    wx.cloud.callFunction({      name: 'pay0611',      data: {        outTradeNo: good._id,        goodName: good.name,        totalFee: good.totalFee      },      success: res => {        console.log("获取支付参数成功", res)        const payment = res.result.payment        //调起支付        wx.requestPayment({          ...payment,          success(res) {            console.log('支付成功', res)          },          fail(res) {            console.error('支付失败', res)          }        })      },      fail: res => {        console.log("获取支付参数失败", res)      },    })  }})

我会在视频里给大家做仔细讲解，手把手的教大家把这部分代码敲出来。