电商微信小程序(教你一个页面一个数据接口搞定所有分类订单页面(未支付 未发货 已发货 全部订单))

注:解析主要都在注释里面

1.mysql建表思路
1.1最重要的是状态码,如果之前没有添加字段state,可以通过以下方式

-- 添加字段（规定只能规定为 未支付、未发货、已发货）
ALTER TABLE orderinfo ADD state VARCHAR(10) CHECK (state in ('未支付', '未发货', '已发货'))

最终建表

CREATE TABLE `orderinfo` (
  `orderId` varchar(100) NOT NULL COMMENT '订单号',
  `userId` int(10) DEFAULT NULL COMMENT '用户id(暂时设置为空)',
  `orderSum` int(20) NOT NULL COMMENT '此订单商品总数',
  `orderPrice` int(20) NOT NULL COMMENT '此订单总价',
  `state` varchar(10) NOT NULL DEFAULT '' COMMENT '状态码（未支付、未发货、已发货）',
  `courierNum` varchar(200) DEFAULT NULL COMMENT '快递单号',
  PRIMARY KEY (`orderId`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8

2.数据接口思路(php版本)

<?php
$state = $_GET['state'];
// 1.连接数据库
require_once("conn.php"); // 这里conn.php参考网址https://www.runoob.com/php/php-mysql-select.html
// 2.判断是否连接成功
if($conn->connect_error){
	die("连接失败".$conn->connect_error);
}
// 判断传入的字符串长度是否为空
// 为空则将查询到的所有订单返回
// 不为空则查询对应状态的订单
if(strlen($state) === 0){
	// 3.编写sql语句
	$sql = "SELECT * FROM orderinfo";
	// 4.执行sql语句
	$result = $conn->query($sql);
	// 5.创建一个空数组
	$arr = [];
	// 6.判断sql语句是否执行成功
	if ($result->num_rows > 0) {
	    // 循环输出数据
	    while($row = $result->fetch_assoc()) {
			// 7.将获取到的数据添加到数组中
			array_push($arr,$row);
	    }
	} else {
	    echo "false";
	}
}else {
	// 3.编写sql语句
	$sql = "SELECT * FROM orderinfo WHERE state = '$state'";
	// 4.执行sql语句
	$result = $conn->query($sql);
	// 5.创建一个空数组
	$arr = [];
	// 6.判断sql语句是否执行成功
	if ($result->num_rows > 0) {
	    // 循环输出数据
	    while($row = $result->fetch_assoc()) {
			// 7.将获取到的数据添加到数组中
			array_push($arr,$row);
	    }
	} else {
	    echo "false";
	}
}
// 8.将数组转化成json格式
echo json_encode($arr);

// 8.关闭连接
$conn->close();
// 接口地址：http://127.0.0.1:8090/inStorkAPI/php/select_orderinfo.php  获取数据库中orderinfo表的数据
?>

3.小程序传参思路
3.1通过bindtap绑定对应跳转事件
3.2通过路径传参,得知我们需要的页面状态参数

    // 跳转到订单页面
    go_order(){
        wx.navigateTo({
          url: '../order/order?state='+'未支付'
        })
    },
    // 跳转到待发货订单页面
    go_wait_courier(){
      wx.navigateTo({
        url: '../order/order?state='+'未发货'
      })
    },
    // 跳转到已发货页面
    go_wait_arrive(){
      wx.navigateTo({
        url: '../order/order?state='+'已发货'
      })
    },
    // 跳转到全部订单页面
    go_allorder(){
      wx.navigateTo({
        url: '../order/order?state='+''
      })
    },

4.接收参数并调用接口

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        // console.log(options.state);
        // 获取订单
        // 获取到的每个订单下都应该有一个商品数组
        this.getOrderInfo(options.state);
    },
    // 获取数据
    getOrderInfo(state) {
        // 显示加载数据
        wx.showLoading({
          title: '加载订单中',
          mask: true,
        })
        wx.request({
            url: 'http://127.0.0.1:8090/inStorkAPI/php/select_orderinfo.php',
            data:{
                state:state
            },
            success: (result1) => {
                // console.log(result1);
                if (typeof result1.data === 'string') {
                    this.setData({
                        orderInfo: [],
                        orderShow: false
                    })
                } else {
                    // 遍历数组，取出订单号，根据订单号查询对应的商品数据
                    result1.data.forEach(ele => {
                        let orderId = ele.orderId;
                        wx.request({
                            url: 'http://127.0.0.1:8090/inStorkAPI/php/select_ordergoodsinfo.php',
                            data: {
                                orderId: orderId
                            },
                            success: (result2) => {
                                //   console.log(result2.data);
                                // 将得到的数据赋值给对应的订单信息
                                ele.goodsInfo = result2.data;
                                this.setData({
                                    orderInfo: result1.data,
                                    orderShow: true
                                })
                            },
                            fail: (res) => { },
                            complete: (res) => { },
                        })
                    });
                }
            },
            complete: (res) => { 
                wx.hideLoading();
            },
        })
    },

思路很重要,加油