smartisan-practice/settlement.html at master · qsc19971022/smartisan-practice · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结算界面</title>
    <link rel="stylesheet" href="settlement.css">
</head>
<body>
    <header></header>
    <div id="goods-top">
        <h3>收货信息</h3>
    </div>
    <div id="goods-main">
        <div class="new-place">
            <p class="new-place-name" >你的名字</p>
            <p class="new-place-num" >12345678911</p>
            <p class="new-place-place">阿森松岛为</p>
        </div>
        <div class="add-place">
            <h5>+</h5><br>
            <span>使用新地址</span>
        </div>
        <div class="clear"></div>
    </div>
    <div id="listing-top">
        <h3>购物清单</h3>
    </div>
    <div id="listing1">
        <div id="shop-info">
            <h5>商品信息</h5>
            <h5>单价</h5>
            <h5>数量</h5>
            <h5>小计</h5>
        </div>
        <div id="listing-main">
            <div id="spec">
                <span class="choose"></span>
                <span class="shop-img"></span>
                <span class="shop-name">
                    <h3>这是一个不正经的商品名</h3>
                    <p>黑色</p>
                </span>
                <p>￥&nbsp;<span class="price">149.00</span></p>
                <p>
                    <span class="num">1</span>
                </p>
                <p>￥&nbsp;<span class="sub">182.00</span></p>
            </div>
        </div>
    </div>
    <div id="invoice-top">
        <h3>发票信息</h3>
    </div>
    <div id="invoice-main">
        <p>发票类型：电子发票</p>
        <p>发票内容：购买商品明细</p>
        <p>邮箱地址：<input type="text"></p>
        <hr>
        <p>*由于商城票据调整，电子发票将于 7 月前开具</p>
        <p>*请您填写邮箱地址，电子发票将于系统恢复后，第一时间发送至您的邮箱。</p>
        <p>*电子发票是税务局认可的有效付款凭证，可作为售后服务凭据，电子发票打印后可以用于企业报销。</p>
    </div>
    <div class="fix-bar">
        <div>
            <div class="fix-bar-left">
                <p class="fix-bar-tittle">
                    <span>你已选择了</span>
                    <span><span class="num1">1</span>件商品</span>
                </p>
            </div>
            <div class="fix-bar-right">
                <span class="sum">应付总额：￥&nbsp;<span>149.00</span></span>
                <a href="submit.html" class="join" target="_self">提交订单</a>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <footer></footer>
    <div class="pop">
        <div>
            <h2 class="pop-tittle">管理收货地址</h2>
            <input type="text" placeholder="收货人姓名">
            <input type="text" placeholder="手机号">
            <input type="text" placeholder="区号(选填)">
            <input type="text" placeholder="固定电话(选填)">
            <input type="text" id="city" placeholder="请输入详细地址"/>
            <p>
                <button class="cancel">取消</button>
                <button class="deter">确定</button>
            </p>
        </div>
    </div>

</body>
</html>
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script >
    $(function(){
       $("header").load("public1.html",function () {

       });
       $("footer").load("public2.html",function () {

       });
    event();
        let ls=localStorage;
        let myJson=JSON.parse(ls.getItem('data'));
        let $tittle=myJson[0].tittle;
        let $url=myJson[1].src;
        let $size=myJson[2].size;
        let $num=myJson[3].num;
        let $sub=myJson[4].sub;
        $(".num").html($num);
        $(".shop-name>h3").html($tittle);
        $(".shop-img").css("backgroundImage", $url);
        $(".shop-name>p").html($size);
        $(".sub").html($sub);
        $(".fix-bar-right>span>span").html($sub);
        $(".num1").html($num);
    });
    function event(){
        $(".add-place").click(function(){
            $(".pop").show();
        });
        $(".cancel").click(function(){
            $(".pop").hide();
        });
        $(".deter").click(function(){
            let $name=$(".pop>div>input:nth-child(2)").val();
            let $num=$(".pop>div>input:nth-child(3)").val();
            let $place=$("#city").val();
            $(".new-place-name").html($name);
            $(".new-place-num").html($num);
            $(".new-place-place").html($place);
            $(".pop").hide();
            $(".new-place").show();
        });
        $(window).scroll(function(){
            let sTop=$(window).scrollTop();
            if (sTop<4930){
                $(".fix-bar").css({
                    position:"fixed",
                    bottom:0,
                    zIndex:5
                });
            }else{
                $(".fix-bar").css({
                    position: "sticky"
                });
            }
        });
    }
</script>