python flask实战订餐系统微信小程序-55訂單頁面數據的加載及提交訂單請求

​​B站配套视频教程观看​​ 訂單頁面數據的加載及提交訂單請求

訂單頁面數據的加載

订单页面加载时 接收传递过来的数据：

,
    onLoad: function (e) {
        var that = this;
        that.setData({
            params: JSON.parse(e.data)
        });
    },

order/index.js添加​​getOrderInfo​​,根据数据发起网络请求

,
    getOrderInfo: function () {
        var that = this;
        var data = {
            type: this.data.params.type,
            goods: JSON.stringify(this.data.params.goods)
        };
        wx.request({
            url: app.buildUrl("/order/info"),
            header: app.getRequestHeader(),
            method: 'POST',
            data: data,
            success: function (res) {
                var resp = res.data;
                if (resp.code != 200) {
                    app.alert({"content": resp.msg});
                    return;
                }

                that.setData({
                    goods_list: resp.data.food_list,
                    default_address: resp.data.default_address,
                    yun_price: resp.data.yun_price,
                    pay_price: resp.data.pay_price,
                    total_price: resp.data.total_price,
                });

                if( that.data.default_address ){
                    that.setData({
                         express_address_id: that.data.default_address.id
                    });
                }
            }
        });
    }

頁面顯示的時候添加這個函數的調用：

,
onShow: function () {
    var that = this;
    this.getOrderInfo();
},

创建一个api/Order.py用于处理前端发送过来的请求：

# -*- coding: utf-8 -*-
from web.controllers.api import route_api
from flask import request, jsonify,g
from application import app, db
import json, decimal
from common.models.food.Food import Food
from common.libs.UrlManager import UrlManager
from common.libs.Helper import getCurrentDate
from common.libs.member.CartService import CartService
from common.models.member.OauthMemberBind import OauthMemberBind


@route_api.route("/order/info", methods=[ "POST" ])
def orderInfo():
    resp = {'code': 200, 'msg': '操作成功~', 'data': {}}
    req = request.values
    params_goods = req['goods'] if 'goods' in req else None
    member_info = g.member_info
    params_goods_list = []
    if params_goods:
        params_goods_list = json.loads(params_goods)

    food_dic = {}
    for item in params_goods_list:
        food_dic[item['id']] = item['number']

    food_ids = food_dic.keys()
    food_list = Food.query.filter(Food.id.in_(food_ids)).all()
    data_food_list = []
    yun_price = pay_price = decimal.Decimal(0.00)
    if food_list:
        for item in food_list:
            tmp_data = {
                "id": item.id,
                "name": item.name,
                "price": str(item.price),
                'pic_url': UrlManager.buildImageUrl(item.main_image),
                'number': food_dic[item.id]
            }
            pay_price = pay_price + item.price * int( food_dic[item.id] )
            data_food_list.append(tmp_data)

    # 获取地址
        default_address = {
            "name": "虚幻私塾",
            "mobile": "12345678901",
            "address": "上海市浦东新区XX",
        }

    resp['data']['food_list'] = data_food_list
    resp['data']['pay_price'] = str(pay_price)
    resp['data']['yun_price'] = str(yun_price)
    resp['data']['total_price'] = str(pay_price + yun_price)
    resp['data']['default_address'] = default_address
    return jsonify(resp)

將添加的文件放置到——init——.py中

可以看到成功的拿到數據並展現出來：

然後可以將多餘​​order/index.js​​​的​​數據初始化​​的代碼去除掉：

data: {
    goods_list: [],
    default_address: null,
    yun_price: "0.00",
    pay_price: "0.00",
    total_price: "0.00",
    params: null,
    express_address_id:0
},

提交訂單操作

發送提交訂單請求

,
    createOrder: function (e) {
        wx.showLoading();
        var that = this;
        var data = {
            type: this.data.params.type,
            goods: JSON.stringify(this.data.params.goods),
            express_address_id: that.data.default_address.id
        };
        wx.request({
            url: app.buildUrl("/order/create"),
            header: app.getRequestHeader(),
            method: 'POST',
            data: data,
            success: function (res) {
                wx.hideLoading();
                var resp = res.data;
                if (resp.code != 200) {
                    app.alert({"content": resp.msg});
                    return;
                }
                wx.navigateTo({
                    url: "/pages/my/order_list"
                });
            }
        });

    },

可以看到

當我們點擊提交訂單 請求的數據就會發送過去了

接下來我們就來後端處理這個請求了