电商系统——订单页面展示

最新推荐文章于 2024-02-07 13:14:22 发布
最新推荐文章于 2024-02-07 13:14:22 发布
阅读量4k 收藏 34
点赞数 1
文章标签： web app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44843345/article/details/124367748
版权

两张订单表：1. order ：主要存储用户与订单之间的关系 ，2.order_item：存储订单与商品信息，

利用第一张表获取该用户所有订单列表，然后利用第二张表获取该订单所有商品信息。

Html+SpringBoot+Mysql 电商用户订单页展示

一、数据库表

  1. order表

     

  2. order_item表

     

二、SpringBoot代码

  1. xml文件

    • order

        <select id="selectByExample" parameterType="com.cy.stores.model.OrderExample" resultMap="BaseResultMap">
    select
    <if test="distinct">
      distinct
    </if>
    <include refid="Base_Column_List" />
    from t_order
    <if test="_parameter != null">
      <include refid="Example_Where_Clause" />
    </if>
    <if test="orderByClause != null">
      order by ${orderByClause}
    </if>
  </select>
  <select id="selectByPrimaryKey" parameterType="java.lang.Long" resultMap="BaseResultMap">
    select 
    <include refid="Base_Column_List" />
    from t_order
    where oid = #{oid,jdbcType=BIGINT}
  </select>

    • orderItem

       <select id="selectProductByOid" resultMap="BaseResultMap">
    SELECT *
    FROM t_order_item
    WHERE oid=#{oid}
  </select>

  2. DAO接口

    1. OrderDAO

      • package com.cy.stores.dao;
​
import com.cy.stores.model.Order;
import com.cy.stores.model.OrderExample;
import java.util.List;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Repository;
​
@Repository
public interface OrderDAO {
    List<Order> selectByExample(OrderExample example);
​
    Order selectByPrimaryKey(Long oid);
}

    2. OrderItemDAO

      • package com.cy.stores.dao;
​
import com.cy.stores.model.OrderItem;
import com.cy.stores.model.OrderItemExample;
import java.util.List;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Repository;
​
@Repository
public interface OrderItemDAO { 
  List<OrderItem> selectProductByOid(Long oid);
  }

  3. IOrderService接口

    package com.cy.stores.service;
​
import com.cy.stores.model.Order;
import com.cy.stores.vo.OrderItemVo;
import com.cy.stores.vo.OrderVo;
import java.util.List;
​
public interface IOrderService {
​
      /**
     * 查询出当前订单的商品
     * @param oid
     * @return
     */
    List <OrderItemVo> selectProductByOid(Long oid);
​
    /**
     * 查询用户订单
     */
    List<OrderVo> selectOrderByUid(Integer uid);
​
}
​

  4. OrderServiceImpl类

    package com.cy.stores.service.impl;
​
import com.cy.stores.dao.OrderDAO;
import com.cy.stores.dao.OrderItemDAO;
import com.cy.stores.model.*;
import com.cy.stores.service.IAddressService;
import com.cy.stores.service.ICartService;
import com.cy.stores.service.IOrderService;
import com.cy.stores.service.IProductService;
import com.cy.stores.service.ex.*;
import com.cy.stores.util.IdWorker;
import com.cy.stores.vo.CartProductVO;
import com.cy.stores.vo.OrderItemVo;
import com.cy.stores.vo.OrderVo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
​
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
​
/**
 * 订单业务层实现类
 *
 */
//将当前类的对象交给Spring处理
@Service
public class OrderServiceImpl implements IOrderService {
​
    @Autowired
    private OrderDAO orderDAO;
    @Autowired
    private OrderItemDAO orderItemDAD;
    @Autowired
    
    @Override
    public List<OrderItemVo> selectProductByOid(Long oid) {
        //1.查询订单商品数据
        List<OrderItem> orderItems = orderItemDAD.selectProductByOid(oid);
        Order order = orderDAO.selectByPrimaryKey(oid);
        //2.封装成前端需要订单商品信息
        List<OrderItemVo> list=new ArrayList<>();
        for (OrderItem e:orderItems) {
            OrderItemVo orderItemVo = new OrderItemVo();
            orderItemVo.setPid(e.getPid());
            orderItemVo.setTitle(e.getTitle());
            orderItemVo.setPrice(e.getPrice());
            orderItemVo.setStatus(e.getStatus());
            orderItemVo.setItemTotalPrice(e.getPrice()*e.getNum());
            orderItemVo.setNum(e.getNum());
            orderItemVo.setImage(e.getImage());
            list.add(orderItemVo);
        }
        //3.返回数据
        return list;
    }
​
    @Override
    public List<OrderVo> selectOrderByUid(Integer uid) {
        OrderExample orderExample=new OrderExample();
        orderExample.createCriteria().andUidEqualTo(uid);
        List<Order> orders = orderDAO.selectByExample(orderExample);
        List<OrderVo> orderVos=new ArrayList<>();
        for (Order o:orders)
        {
            OrderVo orderVo = new OrderVo();
            //订单ID、收货人、订单时间、总价
            orderVo.setOid(o.getOid().toString());
            orderVo.setTotalPrice(o.getTotalPrice());
            orderVo.setRecvName(o.getRecvName());
            orderVo.setOrderTime(o.getOrderTime());
            orderVos.add(orderVo);
        }
        return orderVos;
    }
}

  5. OrderCtroller类

    package com.cy.stores.controller;
​
import com.cy.stores.model.Order;
import com.cy.stores.model.OrderItem;
import com.cy.stores.service.ICartService;
import com.cy.stores.service.IOrderService;
import com.cy.stores.service.ex.CartException;
import com.cy.stores.service.ex.InsertException;
import com.cy.stores.util.JsonResult;
import com.cy.stores.vo.OrderItemVo;
import com.cy.stores.vo.OrderVo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
​
import javax.servlet.http.HttpSession;
import javax.smartcardio.CardException;
import java.net.HttpCookie;
import java.util.List;
​
//@CrossOrigin解决跨域问题
@CrossOrigin
@RestController
@RequestMapping("orders")
public class OrderController extends BaseController{
​
    @Autowired
    private IOrderService orderService;
​
    @RequestMapping("orderProductInfo")
    public JsonResult<List<OrderItemVo>> findOrderItemInfo(@RequestParam("oid") String oid)
    {
        List<OrderItemVo> orderItemVos = orderService.selectProductByOid(new Long(oid));
        return new JsonResult<>(OK,orderItemVos);
    }
​
    @RequestMapping("order")
    public JsonResult<List<OrderVo>>findOrder(HttpSession session)
    {
        Integer uid = getuidFromSession(session);
        List<OrderVo> orderVos = orderService.selectOrderByUid(uid);
        return new JsonResult<>(OK,orderVos);
    }
​
}
​

三、前端代码

  1. 主要代码

            <script type="text/javascript">
            $(document).ready(function () {
                showOrder();
                showInfo();
            });
            //输出订单全部信息
            function showOrder() {
                $.ajax({
                    url: "/orders/order",
                    dataType: "JSON",
                    type:"POST",
                    success:function (json) {
                        if (json.state==200)
                        {
                            let list = json.data;
                            $("#order-list").empty();
                            for (let i=0;i<list.length;i++)
                            {
                                let trs='<div class="panel-heading">\n' +
                                        '<p class="panel-title">\n' +
                                        '订单号：#{oid}，下单时间：#{orderTime}， 收货人：#{recvName}\n' +
                                        '</p>\n' +
                                        '</div>\n' +
                                        '<div class="panel-body">\n' +
                                        '<table class="orders-table" width="100%">\n' +
                                        '<thead>\n' +
                                        '<tr>\n' +
                                        '<th width="15%"></th>\n' +
                                        '<th width="30%">商品</th>\n' +
                                        '<th width="8%">单价</th>\n' +
                                        '<th width="8%">数量</th>\n' +
                                        '<th width="9%">小计</th>\n' +
                                        '<th width="10%">售后</th>\n' +
                                        '<th width="10%">状态</th>\n' +
                                        '<th width="10%">操作</th>\n' +
                                        '</tr>\n' +
                                        '</thead>\n' +
                                        '<tbody id="order-product-list-#{oid1}" class="orders-body">\n' +
                                        '</tbody>\n' +
                                        '</table>\n' +
                                        '<div>\n' +
                                        '<span class="pull-right">订单总金额：¥#{totalPrice}</span>\n' +
                                        '</div>\n' +
                                        '</div>';
                                trs = trs.replace(/#{totalPrice}/g, list[i].totalPrice);
                                trs = trs.replace(/#{orderTime}/g, crtTimeFtt(list[i].orderTime));
                                trs = trs.replace(/#{recvName}/g, list[i].recvName);
                                trs = trs.replace(/#{oid}/g, list[i].oid);
                                trs = trs.replace(/#{oid1}/g, list[i].oid);
                                $("#order-list").append(trs);
                                showOrderInfo(list[i].oid);
                            }
                        }
                    },
                    error:function (xhr) {
                        alert("信息加载时产生错误！"+xhr.message);
                    }
                })
            }
            
//输出订单商品信息
            function showOrderInfo(oid) {
                $.ajax({
                    url: "/orders/orderProductInfo",
                    data: {
                        oid:oid
                    },
                    dataType: "JSON",
                    type:"POST",
                    success:function (json) {
                        if (json.state==200)
                        {
                            let list = json.data;
                            for (let i=0;i<list.length;i++)
                            {
                                let tr = '<tr>\n' +
                                        '<td><img src="..#{image}collect.png" class="img-responsive" /></td>\n' +
                                        '<td>#{title}</td>\n' +
                                        '<td>¥<span>#{price}</span></td>\n' +
                                        '<td>#{num}件</td>\n' +
                                        '<td>¥<span>#{itemTotalPrice}</span></td>\n' +
                                        '<td><a href="#">申请售后</a></td>\n' +
                                        '<td>\n' +
                                        '<div>#{status}</div>\n' +
                                        '<div><a href="orderInfo.html">订单详情</a></div>\n' +
                                        '</td>\n' +
                                        '<td><a href="#" class="btn btn-default btn-xs">确认收货</a></td>\n' +
                                        '</tr>';
                                tr = tr.replace(/#{pid}/g, list[i].pid);
                                tr = tr.replace(/#{image}/g, list[i].image);
                                tr = tr.replace(/#{title}/g, list[i].title);
                                tr = tr.replace(/#{price}/g, list[i].price);
                                if (list[i].status==0)
                                {
                                    tr = tr.replace(/#{status}/g,"待付款");
                                }
                                if (list[i].status==1)
                                {
                                    tr = tr.replace(/#{status}/g,"待发货");
                                }
                                if (list[i].status==2)
                                {
                                    tr = tr.replace(/#{status}/g,"待签收");
                                }
                                if (list[i].status==3)
                                {
                                    tr = tr.replace(/#{status}/g,"确认收货");
                                }
                                tr = tr.replace(/#{num}/g, list[i].num);
                                tr = tr.replace(/#{oid}/g, list[i].oid);
                                tr = tr.replace(/#{itemTotalPrice}/g, list[i].itemTotalPrice);
                                //获取动态创建的订单商品列表
                                $("#order-product-list-"+oid).append(tr);
                            }}},
                    error:function (xhr) {
                        alert("信息加载时产生错误！"+xhr.message);
                    }
                })
            }
            
</script>

  2. 全部代码

    <!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<!--edge浏览器H5兼容设置-->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!--360浏览器H5兼容设置-->
		<meta name="renderer" content="webkit" />
		<title>电脑商城</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!--导入核心文件-->
		<script src="../bootstrap3/js/holder.js"></script>
		<link href="../bootstrap3/css/bootstrap.css" rel="stylesheet" type="text/css">
		<script src="../bootstrap3/jquery-1.9.1.min.js"></script>
		<script src="../bootstrap3/js/bootstrap.js"></script>
		<!--	cookie使用-->
		<script src="../bootstrap3/js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
		<!-- 字体图标 -->
		<link rel="stylesheet" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="../css/layout.css" />
		<link rel="stylesheet" type="text/css" href="../css/top.css" />
		<link rel="stylesheet" type="text/css" href="../css/footer.css" />
		<link rel="stylesheet" type="text/css" href="../css/order.css" />
	</head>

	<body>
		<!--头部-->
		<header class="header">
			<!--电脑商城logo-->
			<div class="row">
				<div class="col-md-3">
					<a href="index.html">
						<img src="../images/index/stumalllogo.png" />
					</a>
				</div>
				<!--快捷选项-->
				<div class="col-md-9 top-item" style="width:100%">
					<ul class="list-inline pull-right">
						<div id="title-user" style="width:12.666667%" class="col-md-5">
							<small>用户：</small><b>用户</b>
						</div>
						<div style="width:8.666667%" class="col-md-5">
							<img id="title-img-avatar" width="40" height="40" src="../images/index/user.jpg" class="img-responsive" />
						</div>
						<li><a href="favorites.html"><span class="fa fa-heart"></span>&nbsp;收藏</a></li>
						<li class="li-split">|</li>
						<li><a href="orders.html"><span class="fa fa-file-text"></span>&nbsp;订单</a></li>
						<li class="li-split">|</li>
						<li><a href="cart.html"><span class="fa fa-cart-plus"></span>&nbsp;购物车</a></li>
						<li class="li-split">|</li>
						<li>
							<!--下列列表按钮 ：管理-->
							<div class="btn-group">
								<button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown">
									<span id="top-dropdown-btn"><span class="fa fa-gears"></span>&nbsp;管理 <span class="caret"></span></span>
								</button>
								<ul class="dropdown-menu top-dropdown-ul" role="menu">
									<li><a href="password.html">修改密码</a></li>
									<li><a href="userdata.html">个人资料</a></li>
									<li><a href="upload.html">上传头像</a></li>
									<li><a href="address.html">收货管理	</a></li>
								</ul>
							</div>
						</li>
						<li class="li-split">|</li>
						<li><a href="login.html"><span class="fa fa-user"></span>&nbsp;登录</a></li>
					</ul>
				</div>
			</div>
		</header>
		<!--导航 -->
		<!--分割导航和顶部-->
		<div class="row top-nav">
			<div class="col-md-6">
				<ul class="nav nav-pills">

					<li>
						<a href="#"></a>
					</li>
					<li class="active"><a href="index.html"><span class="fa fa-home"></span></a></li>
					<li><a href="#">秒杀</a></li>
					<li><a href="#">优惠券</a></li>
					<li><a href="#">电脑VIP</a></li>
					<li><a href="#">外卖</a></li>
					<li><a href="#">超市</a></li>
				</ul>
			</div>
			<div class="col-md-6">
				<form action="search.html" class="form-inline pull-right" role="form">
					<div class="form-group">
					</div>
					<button type="submit" style="width:120px" class="btn btn-default btn-sm"><span class="fa fa-search"></span></button>
				</form>
			</div>
		</div>
		<!--头部结束-->
		<!--导航结束-->
		<div class="container">
			<div class="col-md-2">
				<!--左侧导航开始-->
				<div class="panel-group" id="accordion">
					<div class="panel panel-default">
						<div class="panel-heading">
							<!--主选项：我的订单-->
							<p class="panel-title">
								<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">我的订单</a>
							</p>
						</div>
						<div id="collapseOne" class="panel-collapse collapse in">
							<div class="panel-body">
								<div><a href="orders.html"><b>全部订单</b></a></div>
								<div><a href="orders.html">待付款</a></div>
								<div><a href="orders.html">待收货</a></div>
								<div><a href="orders.html">待评价</a></div>
								<div><a href="orders.html">退货退款</a></div>
							</div>
						</div>
					</div>
					<div class="panel panel-default">
						<div class="panel-heading">
							<!--主选项：资料修改-->
							<p class="panel-title">
								<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">资料修改</a>
							</p>
						</div>
						<div id="collapseTwo" class="panel-collapse collapse">
							<div class="panel-body">
								<div><a href="password.html"><b>修改密码</b></a></div>
								<div><a href="userdata.html">个人资料</a></div>
								<div><a href="upload.html">上传头像</a></div>
								<div><a href="address.html">收货管理</a></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--左侧导航结束-->
			<div class="col-md-10">
				<div id="order-list" class="panel panel-default">
					<div class="panel-heading">
<!--						<p class="panel-title">-->
<!--							订单号：1101000001，下单时间：2018-12-1 17:50:30 ，收货人：八戒-->
						<div id="order-info" class="panel-title">订单号：<a href="orders.html">1101000301</a>，支付金额¥<c>5298</c>，<b>TUST电脑商城</b></div>
<!--						</p>-->
					</div>
					<div class="panel-body">
						<table class="orders-table" width="100%">
							<thead>
								<tr>
									<th width="15%"></th>
									<th width="30%">商品</th>
									<th width="8%">单价</th>
									<th width="8%">数量</th>
									<th width="9%">小计</th>
									<th width="10%">售后</th>
									<th width="10%">状态</th>
									<th width="10%">操作</th>
								</tr>
							</thead>
							<tbody id="order-product-list" class="orders-body">
								<tr>
									<td><img src="../images/portal/12DELLXPS13-silvery/collect.png" class="img-responsive" /></td>
									<td>联想(Lenovo)小新Air13 Pro 13.3英寸14.8mm超轻薄笔记本电脑</td>
									<td>¥<span>5298</span></td>
									<td>1件</td>
									<td>¥<span>5298</span></td>
									<td><a href="#">申请售后</a></td>
									<td>
										<div>已发货</div>
										<div><a href="orderInfo.html">订单详情</a></div>
									</td>
									<td><a href="#" class="btn btn-default btn-xs">确认收货</a></td>
								</tr>
								<tr>
									<td><img src="../images/portal/16LenovoYOGA900green/collect.png" class="img-responsive" /></td>
									<td>戴尔(DELL)XPS13-9360-R1609 13.3</td>
									<td>¥<span>4696</span></td>
									<td>2件</td>
									<td>¥<span>9392</span></td>
									<td><a href="#">申请售后</a></td>
									<td>
										<div>已发货</div>
										<div><a href="orderInfo.html">订单详情</a></div>
									</td>
									<td><a href="#" class="btn btn-default btn-xs">确认收货</a></td>
								</tr>
								<tr>
									<td><img src="../images/portal/13LenovoIdeaPad310_silvery/collect.png" class="img-responsive" /></td>
									<td>戴尔(DELL)魔方15MF Pro-R2505TSS灵越</td>
									<td>¥<span>5999</span></td>
									<td>1件</td>
									<td>¥<span>5999</span></td>
									<td><a href="#">申请售后</a></td>
									<td>
										<div>已发货</div>
										<div><a href="orderInfo.html">订单详情</a></div>
									</td>
									<td><a href="#" class="btn btn-default btn-xs">确认收货</a></td>
								</tr>
							</tbody>
						</table>
						<div>
							<span class="pull-right">订单总金额：¥20689</span>
						</div>
					</div>
				</div>
<!--				<div class="panel panel-default">-->
<!--					<div class="panel-heading">-->
<!--						<p class="panel-title">-->
<!--							订单号：1101000301，下单时间：2018-12-2 20:32:17 ， 收货人：八戒-->
<!--						</p>-->
<!--					</div>-->
<!--					<div class="panel-body">-->
<!--						<table class="orders-table" width="100%">-->
<!--							<thead>-->
<!--								<tr>-->
<!--									<th width="15%"></th>-->
<!--									<th width="30%">商品</th>-->
<!--									<th width="8%">单价</th>-->
<!--									<th width="8%">数量</th>-->
<!--									<th width="9%">小计</th>-->
<!--									<th width="10%">售后</th>-->
<!--									<th width="10%">状态</th>-->
<!--									<th width="10%">操作</th>-->
<!--								</tr>-->
<!--							</thead>-->
<!--							<tbody class="orders-body">-->
<!--								<tr>-->
<!--									<td><img src="../images/portal/12DELLXPS13-silvery/collect.png" class="img-responsive" /></td>-->
<!--									<td>联想(Lenovo)小新Air13 Pro 13.3英寸14.8mm超轻薄笔记本电脑</td>-->
<!--									<td>¥<span>5298</span></td>-->
<!--									<td>1件</td>-->
<!--									<td>¥<span>5298</span></td>-->
<!--									<td><a href="#">申请售后</a></td>-->
<!--									<td>-->
<!--										<div>已发货</div>-->
<!--										<div><a href="orderInfo.html">订单详情</a></div>-->
<!--									</td>-->
<!--									<td><a href="#" class="btn btn-default btn-xs">确认收货</a></td>-->
<!--								</tr>-->
<!--							</tbody>-->
<!--						</table>-->
<!--						<div>-->
<!--							<span class="pull-right">订单总金额：¥5298</span>-->
<!--						</div>-->
<!--					</div>-->
<!--				</div>-->
			</div>
		</div>
		<!--页脚开始-->
		<div class="clearfix"></div>
		<footer class="footer">
			<!-- 品质保障，私人定制等-->
			<div class="text-center rights container">
				<div class="col-md-offset-2 col-md-2">
					<span class="fa fa-thumbs-o-up"></span>
					<p>品质保障</p>
				</div>
				<div class="col-md-2">
					<span class="fa fa-address-card-o"></span>
					<p>私人订制</p>
				</div>
				<div class="col-md-2">
					<span class="fa fa-graduation-cap"></span>
					<p>学生特供</p>
				</div>
				<div class="col-md-2">
					<span class="fa fa-bitcoin"></span>
					<p>专属特权</p>
				</div>
			</div>
			<!--联系我们、下载客户端等-->
			<div class="container beforeBottom">
				<div class="col-md-offset-1 col-md-3">
					<div><img src="../images/index/stumalllogo.png" alt="" class="footLogo" /></div>
					<div><img src="../images/index/footerFont.png" alt="" /></div>
				</div>
				<div class="col-md-4 callus text-center">
					<div class="col-md-4">
						<ul>
							<li>
								<a href="#">
									<p>买家帮助</p>
								</a>
							</li>
							<li><a href="#">新手指南</a></li>
							<li><a href="#">服务保障</a></li>
							<li><a href="#">常见问题</a></li>
						</ul>
					</div>
					<div class="col-md-4">
						<ul>
							<li>
								<a href="#">
									<p>商家帮助</p>
								</a>
							</li>
							<li><a href="#">商家入驻</a></li>
							<li><a href="#">商家后台</a></li>
						</ul>
					</div>
					<div class="col-md-4">
						<ul>
							<li>
								<a href="#">
									<p>关于我们</p>
								</a>
							</li>
							<li><a href="#">关于圆心</a></li>
							<li><a href="#">联系我们</a></li>
							<li>
								<span class="fa fa-wechat"></span>
								<span class="fa fa-weibo"></span>
							</li>
						</ul>
					</div>
				</div>
				<div class="col-md-4">
					<div class="col-md-5">
						<p>电脑商城客户端</p>
						<img src="../images/index/ios.png" class="lf">
						<img src="../images/index/android.png" alt="" class="lf" />
					</div>
					<div class="col-md-6">
						<img src="../images/index/lzk.png" width="120" height="120">
					</div>
				</div>
			</div>
			<!-- 页面底部-备案号 #footer -->
			<div class="col-md-12 text-center bottom">
				Copyright © 2022 dnsc.cn All Rights Reserved 京ICP备08963888号-45 <a target="_blank" href="https://www.tust.edu.cn//">天津科技大学</a> 版权所有
			</div>
		</footer>
		<!--页脚结束-->
		<script type="text/javascript">
			$(document).ready(function () {
				showOrder();
				showInfo();
			});
			//输出订单全部信息
			function showOrder() {
				$.ajax({
					url: "/orders/order",
					dataType: "JSON",
					type:"POST",
					success:function (json) {
						if (json.state==200)
						{
							let list = json.data;
							$("#order-list").empty();
							for (let i=0;i<list.length;i++)
							{
								let trs='<div class="panel-heading">\n' +
										'<p class="panel-title">\n' +
										'订单号：#{oid}，下单时间：#{orderTime}， 收货人：#{recvName}\n' +
										'</p>\n' +
										'</div>\n' +
										'<div class="panel-body">\n' +
										'<table class="orders-table" width="100%">\n' +
										'<thead>\n' +
										'<tr>\n' +
										'<th width="15%"></th>\n' +
										'<th width="30%">商品</th>\n' +
										'<th width="8%">单价</th>\n' +
										'<th width="8%">数量</th>\n' +
										'<th width="9%">小计</th>\n' +
										'<th width="10%">售后</th>\n' +
										'<th width="10%">状态</th>\n' +
										'<th width="10%">操作</th>\n' +
										'</tr>\n' +
										'</thead>\n' +
										'<tbody id="order-product-list-#{oid1}" class="orders-body">\n' +
										'</tbody>\n' +
										'</table>\n' +
										'<div>\n' +
										'<span class="pull-right">订单总金额：¥#{totalPrice}</span>\n' +
										'</div>\n' +
										'</div>';
								trs = trs.replace(/#{totalPrice}/g, list[i].totalPrice);
								trs = trs.replace(/#{orderTime}/g, crtTimeFtt(list[i].orderTime));
								trs = trs.replace(/#{recvName}/g, list[i].recvName);
								trs = trs.replace(/#{oid}/g, list[i].oid);
								trs = trs.replace(/#{oid1}/g, list[i].oid);
								$("#order-list").append(trs);
								showOrderInfo(list[i].oid);
							}
						}
					},
					error:function (xhr) {
						alert("信息加载时产生错误！"+xhr.message);
					}
				})
			}
			// //创建时间格式化显示
			function dateFtt(fmt,date)
			{ //author: meizz
				var o = {
					"M+" : date.getMonth()+1,                 //月份
					"d+" : date.getDate(),                    //日
					"h+" : date.getHours(),                   //小时
					"m+" : date.getMinutes(),                 //分
					"s+" : date.getSeconds(),                 //秒
					"q+" : Math.floor((date.getMonth()+3)/3), //季度
					"S"  : date.getMilliseconds()             //毫秒
				};
				if(/(y+)/.test(fmt))
					fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
				for(var k in o)
					if(new RegExp("("+ k +")").test(fmt))
						fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
				return fmt;
			}
			//创建时间格式化显示
			function crtTimeFtt(value,row,index)
			{
				var crtTime = new Date(value);
				return top.dateFtt("yyyy-MM-dd hh:mm:ss",crtTime);//直接调用公共JS里面的时间类处理的办法
			}
			//输出订单商品信息
			function showOrderInfo(oid) {
				$.ajax({
					url: "/orders/orderProductInfo",
					data: {
						oid:oid
					},
					dataType: "JSON",
					type:"POST",
					success:function (json) {
						if (json.state==200)
						{
							let list = json.data;
							for (let i=0;i<list.length;i++)
							{
								let tr = '<tr>\n' +
										'<td><img src="..#{image}collect.png" class="img-responsive" /></td>\n' +
										'<td>#{title}</td>\n' +
										'<td>¥<span>#{price}</span></td>\n' +
										'<td>#{num}件</td>\n' +
										'<td>¥<span>#{itemTotalPrice}</span></td>\n' +
										'<td><a href="#">申请售后</a></td>\n' +
										'<td>\n' +
										'<div>#{status}</div>\n' +
										'<div><a href="orderInfo.html">订单详情</a></div>\n' +
										'</td>\n' +
										'<td><a href="#" class="btn btn-default btn-xs">确认收货</a></td>\n' +
										'</tr>';
								tr = tr.replace(/#{pid}/g, list[i].pid);
								tr = tr.replace(/#{image}/g, list[i].image);
								tr = tr.replace(/#{title}/g, list[i].title);
								tr = tr.replace(/#{price}/g, list[i].price);
								if (list[i].status==0)
								{
									tr = tr.replace(/#{status}/g,"待付款");
								}
								if (list[i].status==1)
								{
									tr = tr.replace(/#{status}/g,"待发货");
								}
								if (list[i].status==2)
								{
									tr = tr.replace(/#{status}/g,"待签收");
								}
								if (list[i].status==3)
								{
									tr = tr.replace(/#{status}/g,"确认收货");
								}
								tr = tr.replace(/#{num}/g, list[i].num);
								tr = tr.replace(/#{oid}/g, list[i].oid);
								tr = tr.replace(/#{itemTotalPrice}/g, list[i].itemTotalPrice);
								//获取动态创建的订单商品列表
								$("#order-product-list-"+oid).append(tr);
							}}},
					error:function (xhr) {
						alert("信息加载时产生错误！"+xhr.message);
					}
				})
			}
			//填充用户信息
			function showInfo()
			{
				// let avatar=$.cookie("avatar");
				$("#title-img-avatar").attr("src",$.cookie("avatar"));

				// let username=$.cookie("username");
				$("#title-user>b").text($.cookie("username"));
			}
		</script>
	</body>

</html>

架构设计内容分享(八十二)：电商系统之订单系统
之乎者也·的博客
01-13 1497
订单系统作为电商系统的“纽带”贯穿了整个电商系统的关键流程。其他模块都是围绕订单系统进行构建的。订单系统的演变也是随着电商平台的业务变化而逐渐演变进化着，接下来就和大家一起来解析电商平台的“生命纽带”。上帝视角订单系统订单系统的作用是：管理订单类型、订单状态，收集关于商品、优惠、用户、收货信息、支付信息等一系列的订单实时数据，进行库存更新、订单下发等一系列动作。
分页显示--订单内容
令狐姑娘
03-02 2585
在商城管理中要分页显示订单内容首先需要整理思绪： 分页显示 + 实体内容 分页显示： 从前端传入参数当前页pageNumber，程序内部设置每页条数pageSize，由此可以算出起始页startIndex，根据总记录数可以算出总页数pageTotal。 实体内容显示： PageBean--> List --> Orders --> Order
html购物订单页模板
01-11
html购物订单页模板
订单的页面
pipiaiqiuqiu的博客
07-28 126
<template> <view class="content"> <view class="goods_list" v-for="item in order" :key="item.order_id" @click="navToGoodsInfo(item.order_id)"> <view class="union" >{{item.super_union_name}}</view> ...
淘宝订单页面
12-20
类似于淘宝订单页面，页面使用HTML5+CSS3
订单管理页面
wojuranshigehaoren的博客
06-27 2121
订单管理页面
css+html制作订单页面
qq_64595930的博客
12-30 8396
html+css制作简单订单页面效果图
电商系统之订单设计篇.docx
10-24
订单系统业务的基本模型涉及用户、商品（库存）、订单、付款，订单基本流程是下订单——>减库存，这两步必须同时完成，不能下了订单不减库存（超卖），或者减了库存没有生成订单（少卖）。 订单设计时包含几个大的...
[附源码]Python计算机毕业设计大型零售电商平台——购物车管理子系统
杰记计算机程序源码
11-22 429
项目运行环境配置：Pychram社区版+ python3.7.7 + Mysql5.7 + HBuilderX+list pip+Navicat11+Django+nodejs。项目技术：django + python+ Vue 等等组成，B/S模式 +pychram管理等等。环境需要1.运行环境：最好是python3.7.7，我们在这个版本上开发的。其他版本理论上也可以。2.pycharm环境：pycharm都可以。推荐pycharm社区版;
Python-Django毕业设计大型零售电商平台——购物车管理子系统（程序+Lw)
罗曼计算机毕设程序
03-14 357
该项目含有源码、文档、程序数据库、配套开发软件、软件安装教程项目运行环境配置：Pychram社区版py项目技术：django + python+ Vue 等等组成，B/S模式 +pychram管理等等。环境需要1.运行环境：最好是python3.7.7，我们在这个版本上开发的。其他版本理论上也可以。2.pycharm环境：pycharm都可以。推荐pycharm社区版;3.mysql环境：建议是用5.7版本均可。
javascript 网上订单页面
10-14
青鸟 javascript 04章 课后作业5 制作网上订单页面
红色商城购物车订单页面HTML模板
06-07
红色商城购物车订单页面HTML模板，模仿淘宝商城商品订单详情页面，有收货地址、支付方式、配送方式、送货时间、发票信息、确认订单信息、会员留言等订单项目。
H5页面可下拉刷新的订单列表
08-02
电商H5订单页面,分订单种类,比如已支付,已取货等,只要更改种类数组,会自动适应,订单列表带上啦加载,下拉刷新功能,简单,粗暴
html编写一个手机app的的订单页面
热门推荐
lanseguhui的博客
06-09 1万+
&lt;!DOCTYPE html&gt;&lt;html lang="zh"&gt;&lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt; &lt;me
支付确认订单页面实现
最新发布
m0_68935893的博客
02-07 631
类似购物车页面，但是这里商品显示的是购物车选中的商品，所以cart要加下checked过滤；
小程序一个简单的订单界面
chaosama的博客
07-15 7211
本人审美观送去见孔子，所以将就下 wxml <wxs module="Filter" src="../../utils/filter/filter.wxs"></wxs> <view class="container" wx:if="{{isLogin}}"> <scroll-view scroll-y scroll-top="{{scro...
利用flex布局设计网购订单确认页面
hmcxy123的博客
08-26 690
当我们需要给多个对象设计相同的style时，灵活运用公共样式设计会节省大量代码。把共同的样式单独自定义一个class，然后在需要的对象里引用（比如：class="box orange")。这与导入字体图标的道理一样。...
Vue项目实战：订单列表页面实现
林夏天的博客
04-09 1万+
目录 调整Order父组件结构（解决Bug） 订单列表数据渲染 Loading 和 NoData优化 订单列表分页 - 分页器 订单列表分页 - 加载更多 订单列表分页 - 滚动加载 （1）调整Order父组件结构（解决Bug） 之前在Vue项目实战：订单确认页面实现中关于订单父组件结构封装里写到：在order.vue中引入<order-header></order-hea...
实现订单列表页面
陌默
04-28 1万+
思路：1. 实现如图1视图布局；2. 实现订单列表功能；3. 订单列表各元素绘制，严格按照如图所示效果设计；4. 实现下拉刷新和上拉加载更多，分页功能5. 列表视图用RecyclerView控件展示接口：uid=71订单列表https://www.zhaoapi.cn/product/getOrdersuid =71 &amp; page=1请求参数说明： uid 用户id字段 String类型 ...
移动端电商巨头——京东手机网站源码解析
作为电商类网站，京东手机网站首页还有自己的特定需求，比如产品展示、商品搜索、购物车管理、订单处理等功能，都需要在移动端网页中得到良好的实现。这要求开发者对电商平台的业务流程有深入的理解。 #### 11. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值