shop-2206-h5
/
orderInfo.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>我的购物车-品优购</title>
    <meta name="description"
        content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
    <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" />
    <!-- 引入facicon.ico网页图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <!-- 引入css 初始化的css 文件 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入公共样式的css 文件 -->
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入car css -->
    <link rel="stylesheet" href="css/orderInfo.css">

    <link rel="stylesheet" href="layui/css/layui.css">

    <!-- 先引入jquery  -->

    <script src="layui/layui.js"></script>

    <script src="js/jquery.min.js"></script>

    <script src="js/jquery.cookie.js"></script>

    <script src="js/common.js"></script>

    <script src="js/orderInfo.js"></script>


</head>

<body>
    <!-- 顶部快捷导航start -->
    <div class="shortcut">
        <div class="w">
            <div class="fl">
                <ul>
                    <li>品优购欢迎您！ </li>
                    <li>
                        <a href="#">请登录</a>
                        <a href="#" class="style-red">免费注册</a>
                    </li>
                </ul>
            </div>
            <div class="fr">
                <ul>
                    <li><a href="#">我的订单</a></li>
                    <li class="spacer"></li>
                    <li>
                        <a href="#">我的品优购</a>
                        <i class="icomoon"></i>
                    </li>
                    <li class="spacer"></li>
                    <li><a href="#">品优购会员</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">企业采购</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">关注品优购</a> <i class="icomoon"></i></li>
                    <li class="spacer"></li>
                    <li><a href="#">客户服务</a> <i class="icomoon"></i></li>
                    <li class="spacer"></li>
                    <li><a href="#">网站导航</a> <i class="icomoon"></i></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 顶部快捷导航end  -->
    <div class="car-header">
        <div class="w">
            <div class="car-logo">
                <img src="images/logo.png" alt=""> <b>结算页</b>
            </div>
        </div>
    </div>

    <!-- 结算页信息 -->
    <div class="o-container">
        <div class="w">
            <div class="order-header">
                填写并核对订单信息
            </div>

            <div class="order-content">
                <div class="order-message">
                    <div class="order-message-header">
                        <h3>收货人信息</h3>
                        <a href="javaScript:;" class="blue addSite">新增售后地址</a>
                    </div>

                    <div class="order-message-content">
                        <div class="centent clearfix">
                            <ul class="site_list">
                                <!-- <li>
                                    <div class="consignee-item" style="border: 2px solid red;">
                                        <span>长风 湖北</span>
                                        <b></b>
                                    </div>

                                    <div class=" info-item">
                                        <span class="add-name">长风</span>
                                        <span class="addr-info">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                                        </span>
                                        <span class="addr-tel">13797113405</span>
                                        <span class="addr-default">默认地址</span>
                                        <span class="addr-update"><a>删除</a></span>
                                        <span class="addr-edit"><a>编辑</a></span>
                                    </div>
                                </li> -->
                            </ul>
                        </div>
                        <!-- <p class="right">默认地址</p> -->
                    </div>
                </div>
                <div class="order-pay">
                    <h3>支付方式</h3>
                    <ul>
                        <li>货到付款</li>
                        <li class="active">在线付款</li>
                        <li>更多&gt;&gt;</li>
                    </ul>
                </div>
                <div class="order-list">
                    <div class="order-list-header">
                        <ul>
                            <li>
                                <h3>送货清单</h3>
                            </li>
                            <li class="goBack"><a href="javaScript:;" class="blue">返回修改购物车</a></li>
                            <li class="blue">价格说明</li>
                        </ul>
                    </div>
                    <div class="order-list-content">
                        <div class="left">
                            <h3>配送方式</h3>
                            <ul class="one">
                                <li class="active"><a href="javaScript:;">京东快递</a></li>
                                <li><a href="javaScript:;">上门自提</a></li>
                            </ul>

                            <ul class="two">
                                <li>标准达：</li>
                                <li>预计6月28日[周二] 09:00-15:00送达</li>
                                <li><a href="" class="blue">修改</a></li>
                            </ul>

                            <div class="left-inp">
                                <input type="checkbox" name="" id="">退换无忧<span>￥0.40</span>
                            </div>

                            <p class="left-quit">自签收后7天内退货，15天内换货，可享1次上门取件服务<span class="blue">查看详情</span></p>

                            <p class="left-weight">总重量：<span>0.520kg</span></p>
                        </div>
                        <div class="rigth">
                            <h3>商家：京东页面</h3>
                            <ul class="right-content">
                                <li>
                                    <img src="upload/b3-tm.png" alt="">
                                    <span class="goodsName">Lorem ipsum dolor sit, amet consectetur adipisicing
                                        elit.</span>
                                    <span class="shopPrice">￥9999</span>
                                    <span class="goodsCount">x1</span>
                                    <span>有货</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="order-sum">
                <p>总商品金额：<span class="goods_Sum">￥2699.00</span></p>
                <p>运费：<span class="freight">￥2699.00</span></p>
            </div>

            <div class="order-footer">
                <p>应付总额：<span class="handle_Sum">￥26990.00</span></p>
                <ul>
                    <li>收件人：<span class="overAdd">长风</span></li>
                    <li>寄送到：<span class="overName">湖北省 武汉市 江夏区 金融港B18三层</span></li>
                </ul>
            </div>

            <div class="order-send">
                <button class="send">提交订单</button>
            </div>


        </div>
    </div>

    <!-- footer start -->
    <div class="footer">
        <div class="w">
            <!-- mod_service -->
            <div class="mod_service">
                <ul>
                    <li>
                        <i class="mod-service-icon mod_service_zheng"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <i class="mod-service-icon mod_service_kuai"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <i class="mod-service-icon mod_service_bao"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <i class="mod-service-icon mod_service_bao"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <i class="mod-service-icon mod_service_bao"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- mod_help -->
            <div class="mod_help">
                <dl class="mod_help_item">
                    <dt>购物指南</dt>
                    <dd> <a href="#">购物流程 </a></dd>
                    <dd> <a href="#">会员介绍 </a></dd>
                    <dd> <a href="#">生活旅行/团购 </a></dd>
                    <dd> <a href="#">常见问题 </a></dd>
                    <dd> <a href="#">大家电 </a></dd>
                    <dd> <a href="#">联系客服 </a></dd>
                </dl>
                <dl class="mod_help_item">
                    <dt>购物指南</dt>
                    <dd> <a href="#">购物流程 </a></dd>
                    <dd> <a href="#">会员介绍 </a></dd>
                    <dd> <a href="#">生活旅行/团购 </a></dd>
                    <dd> <a href="#">常见问题 </a></dd>
                    <dd> <a href="#">大家电 </a></dd>
                    <dd> <a href="#">联系客服 </a></dd>
                </dl>
                <dl class="mod_help_item">
                    <dt>购物指南</dt>
                    <dd> <a href="#">购物流程 </a></dd>
                    <dd> <a href="#">会员介绍 </a></dd>
                    <dd> <a href="#">生活旅行/团购 </a></dd>
                    <dd> <a href="#">常见问题 </a></dd>
                    <dd> <a href="#">大家电 </a></dd>
                    <dd> <a href="#">联系客服 </a></dd>
                </dl>
                <dl class="mod_help_item">
                    <dt>购物指南</dt>
                    <dd> <a href="#">购物流程 </a></dd>
                    <dd> <a href="#">会员介绍 </a></dd>
                    <dd> <a href="#">生活旅行/团购 </a></dd>
                    <dd> <a href="#">常见问题 </a></dd>
                    <dd> <a href="#">大家电 </a></dd>
                    <dd> <a href="#">联系客服 </a></dd>
                </dl>
                <dl class="mod_help_item">
                    <dt>购物指南</dt>
                    <dd> <a href="#">购物流程 </a></dd>
                    <dd> <a href="#">会员介绍 </a></dd>
                    <dd> <a href="#">生活旅行/团购 </a></dd>
                    <dd> <a href="#">常见问题 </a></dd>
                    <dd> <a href="#">大家电 </a></dd>
                    <dd> <a href="#">联系客服 </a></dd>
                </dl>
                <dl class="mod_help_item mod_help_app">
                    <dt>帮助中心</dt>
                    <dd>
                        <img src="upload/erweima.png" alt="">
                        <p>品优购客户端</p>
                    </dd>
                </dl>
            </div>

            <!-- mod_copyright  -->
            <div class="mod_copyright">
                <p class="mod_copyright_links">
                    关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U
                </p>
                <p class="mod_copyright_info">
                    地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>
                    京ICP备08001421号京公网安备110108007702
                </p>
            </div>
        </div>
    </div>
    <!-- footer end -->
</body>

</html>

<script>
    $(function () {
        // 售后人信息弹出层
        $(".addSite").on('click', function () {
            let index = layui.layer.open({
                type: 2,
                content: 'site.html',
                area: ['670px', '458px'],
                title: '新增收货人信息',
            })
        })


    })
</script>