Showing
9 changed files
with
662 additions
and
88 deletions
@@ -15,82 +15,81 @@ | @@ -15,82 +15,81 @@ | ||
15 | <div class="order-content"> | 15 | <div class="order-content"> |
16 | <div class="order-selection address-list"> | 16 | <div class="order-selection address-list"> |
17 | <h2>收货地址:<span>[不保存并关闭]</span></h2> | 17 | <h2>收货地址:<span>[不保存并关闭]</span></h2> |
18 | + <div class="address-list-inner"> | ||
18 | <ul> | 19 | <ul> |
19 | {{#each hasAddress}} | 20 | {{#each hasAddress}} |
20 | <li> | 21 | <li> |
21 | - <input class="radio" type="radio" name="address" id="{{id}}" {{#if checked}}checked{{/if}}/> | 22 | + <input class="radio" type="radio" id="{{id}}" {{#if checked}}checked{{/if}}/> |
22 | <label for="{{id}}"> | 23 | <label for="{{id}}"> |
23 | <strong>{{user}}</strong> | 24 | <strong>{{user}}</strong> |
24 | <span>{{address}}</span> | 25 | <span>{{address}}</span> |
25 | <a href="javascript:void(0);">设为默认地址</a> | 26 | <a href="javascript:void(0);">设为默认地址</a> |
26 | <div class="order-modify-btn"> | 27 | <div class="order-modify-btn"> |
27 | - <span>[修改]</span> | ||
28 | - <span>[删除]</span> | 28 | + <span class="address-modify">[修改]</span> |
29 | + <span class="address-del">[删除]</span> | ||
29 | </div> | 30 | </div> |
30 | </label> | 31 | </label> |
31 | </li> | 32 | </li> |
32 | {{/each}} | 33 | {{/each}} |
33 | 34 | ||
34 | - <li> | ||
35 | - <input class="radio" type="radio" name="" id="addAddress"/> | ||
36 | - <label for="addAddress">使用新地址</label> | ||
37 | - </li> | ||
38 | - </ul> | ||
39 | - </div> | ||
40 | - <div class="order-selection address-manage hide"> | ||
41 | - <ul> | ||
42 | - <li> | ||
43 | - <span class="address-legend"><i>*</i>收货人姓名:</span> | ||
44 | - <input type="text" name="name" class="name text-input"/> | ||
45 | - <span>请填写您的真实姓名,最多5个汉字</span> | ||
46 | - </li> | ||
47 | - <li> | ||
48 | - <span class="address-legend"><i>*</i>省市:</span> | ||
49 | - <select name="" id="" class="text-input"> | ||
50 | - {{# province}} | ||
51 | - <option value="{{value}}">{{name}}</option> | ||
52 | - {{/ province}} | ||
53 | - <option value="0">请选择省份</option> | ||
54 | - </select> | ||
55 | - <select name="" id="" class="text-input"> | ||
56 | - {{# city}} | ||
57 | - <option value="{{value}}">{{name}}</option> | ||
58 | - {{/ city}} | ||
59 | - <option value="0">请选择城市</option> | ||
60 | - </select> | ||
61 | - <select name="" id="" class="text-input"> | ||
62 | - {{# county}} | ||
63 | - <option value="{{value}}">{{name}}</option> | ||
64 | - <option value="0">请选择区县</option> | ||
65 | - {{/ county}} | ||
66 | - </select> | ||
67 | - <input type="text" class="text-input"/> | ||
68 | - <span>标'*'的为支持加急送的地区,请输入收货的详细地址</span> | ||
69 | - </li> | ||
70 | - <li> | ||
71 | - <span class="address-legend"><i>*</i>手机号码:</span> | ||
72 | - <input type="text" class="text-input"/> | ||
73 | - <span>填写正确手机号便于接收发货和收货通知</span> | ||
74 | - </li> | ||
75 | - <li> | ||
76 | - <span class="address-legend">固定电话:</span> | ||
77 | - <input type="text" class="text-input"/>— | ||
78 | - <input type="text" class="text-input"/> | ||
79 | - <span>如:010-12345678,固话和手机号至少填一项</span> | ||
80 | - </li> | ||
81 | - <li> | ||
82 | - <span class="address-legend">电子邮件:</span> | ||
83 | - <input type="text" class="text-input"/> | ||
84 | - <span>用来接收订单提醒邮件,便于您及时了解订单状态</span> | ||
85 | - </li> | ||
86 | - <li> | ||
87 | - <span class="address-legend">邮编:</span> | ||
88 | - <input type="text" class="text-input"/> | ||
89 | - <span>请填写准确的邮编,以确保商品尽快送达</span> | 35 | + <li class="use-new-address"> |
36 | + <input class="radio add-address" type="radio" name="address" id=""/> | ||
37 | + <label for="">使用新地址</label> | ||
90 | </li> | 38 | </li> |
91 | </ul> | 39 | </ul> |
40 | + | ||
41 | + <div class="address-manage"> | ||
42 | + <ul> | ||
43 | + <li> | ||
44 | + <span class="address-legend"><i>*</i>收货人姓名:</span> | ||
45 | + <input type="text" name="name" class="name text-input"/> | ||
46 | + <span>请填写您的真实姓名,最多5个汉字</span> | ||
47 | + </li> | ||
48 | + <li> | ||
49 | + <span class="address-legend"><i>*</i>省市:</span> | ||
50 | + <select name="province" id="" class="text-input"> | ||
51 | + <option>请选择省份</option> | ||
52 | + </select> | ||
53 | + <select name="city" id="" class="text-input"> | ||
54 | + <option>请选择城市</option> | ||
55 | + </select> | ||
56 | + <select name="county" id="" class="text-input"> | ||
57 | + <option>请选择区县</option> | ||
58 | + </select> | ||
59 | + <input type="text" name="address" class="text-input"/> | ||
60 | + <span>标'*'的为支持加急送的地区,请输入收货的详细地址</span> | ||
61 | + </li> | ||
62 | + <li> | ||
63 | + <span class="address-legend"><i>*</i>手机号码:</span> | ||
64 | + <input type="text" name="phone" class="text-input"/> | ||
65 | + <span>填写正确手机号便于接收发货和收货通知</span> | ||
66 | + </li> | ||
67 | + <li> | ||
68 | + <span class="address-legend">固定电话:</span> | ||
69 | + <div class="address-tel-input"> | ||
70 | + <input type="text" name="tel-code" class="tel-lengend text-input"/> | ||
71 | + <input type="text" name="tel" class="text-input"/> | ||
72 | + — | ||
73 | + </div> | ||
74 | + <span>如:010-12345678,固话和手机号至少填一项</span> | ||
75 | + </li> | ||
76 | + <li> | ||
77 | + <span class="address-legend">电子邮件:</span> | ||
78 | + <input type="text" name="mail" class="text-input"/> | ||
79 | + <span>用来接收订单提醒邮件,便于您及时了解订单状态</span> | ||
80 | + </li> | ||
81 | + <li> | ||
82 | + <span class="address-legend">邮编:</span> | ||
83 | + <input type="text" name="code" class="text-input"/> | ||
84 | + <span>请填写准确的邮编,以确保商品尽快送达</span> | ||
85 | + </li> | ||
86 | + </ul> | ||
87 | + </div> | ||
88 | + <span class="save-btn">保存并送到这个地址</span> | ||
89 | + </div> | ||
92 | </div> | 90 | </div> |
93 | - <span class="save-btn">保存并送到这个地址</span> | 91 | + |
92 | + | ||
94 | 93 | ||
95 | <div class="order-selection pay-time"> | 94 | <div class="order-selection pay-time"> |
96 | <h2>支付及送货时间:<span>[修改]</span></h2> | 95 | <h2>支付及送货时间:<span>[修改]</span></h2> |
@@ -99,6 +98,68 @@ | @@ -99,6 +98,68 @@ | ||
99 | <li>送货时间:只工作日送货(双休日、节假日不用送)</li> | 98 | <li>送货时间:只工作日送货(双休日、节假日不用送)</li> |
100 | <li>送货前联系我:否</li> | 99 | <li>送货前联系我:否</li> |
101 | </ul> | 100 | </ul> |
101 | + | ||
102 | + <div class="pay-time-modify"> | ||
103 | + <h3>支付方式</h3> | ||
104 | + | ||
105 | + <ul> | ||
106 | + <li class="pay-dashed-hr"> | ||
107 | + <div class="pay-type-legend"> | ||
108 | + <input checked class="radio" name="pay-type" type="radio" id=""/> | ||
109 | + <label for="">在线支付(推荐)</label> | ||
110 | + </div> | ||
111 | + <span class="pay-type-legend">查看支持在线支付的银行和平台</span> | ||
112 | + <div class="support-type"> | ||
113 | + <h4>支持以下支付平台在线支付:</h4> | ||
114 | + {{#each supportLine}} | ||
115 | + | ||
116 | + <img src="{{src}}" alt=""/> | ||
117 | + {{/each}} | ||
118 | + | ||
119 | + <h4>支持以下银行在线支付:</h4> | ||
120 | + {{#each supportBank}} | ||
121 | + <img src="{{src}}" alt=""/> | ||
122 | + {{/each}} | ||
123 | + </div> | ||
124 | + </li> | ||
125 | + | ||
126 | + <li> | ||
127 | + <input class="radio" name="pay-type" type="radio" id=""/> | ||
128 | + <label for="">付款方式:货到付款</label> | ||
129 | + <span>注:订单中有限量商品、预售商品、化妆品或者订单金额超过10000元不可以选择货到付款。</span> | ||
130 | + </li> | ||
131 | + </ul> | ||
132 | + | ||
133 | + <h3>送货时间</h3> | ||
134 | + <ul> | ||
135 | + <li> | ||
136 | + <input checked class="radio" name="pay-time-radio" type="radio" id=""/> | ||
137 | + <label for="">只工作日送货(双休日、节假日不送)</label> | ||
138 | + </li> | ||
139 | + | ||
140 | + <li> | ||
141 | + <input class="radio" name="pay-time-radio" type="radio" id=""/> | ||
142 | + <label for="">工作日、双休日和节假日均送货</label> | ||
143 | + </li> | ||
144 | + | ||
145 | + <li class="pay-dashed-hr"> | ||
146 | + <input class="radio" name="pay-time-radio" type="radio" id=""/> | ||
147 | + <label for="">只双休日、节假日送货(工作时间不送货)</label> | ||
148 | + </li> | ||
149 | + | ||
150 | + <li class="pay-dashed-hr pay-type-tips">声明:我们会努力按照您指定的时间配送,但因为天气、交通等各类因素影响,您的订单有可能会有延误现象,敬请谅解!</li> | ||
151 | + | ||
152 | + <li> | ||
153 | + <span>送货前是否联系:</span> | ||
154 | + <input class="radio" name="call-me" type="radio" id=""/> | ||
155 | + <label for="">是</label> | ||
156 | + <input checked class="radio" name="call-me" type="radio" id=""/> | ||
157 | + <label for="">否</label> | ||
158 | + </li> | ||
159 | + </ul> | ||
160 | + | ||
161 | + <span class="pay-btn">确定</span> | ||
162 | + </div> | ||
102 | </div> | 163 | </div> |
103 | 164 | ||
104 | <div class="order-selection select-express"> | 165 | <div class="order-selection select-express"> |
web-static/img/order/roundgreybtn.gif
0 → 100644

1.21 KB
web-static/img/order/save/pay-btn.png
0 → 100644

5.23 KB
web-static/js/order/address.js
0 → 100644
1 | +/** | ||
2 | + * @description: 地址管理 | ||
3 | + * @author: chenglong.wang@yoho.cn | ||
4 | + */ | ||
5 | + | ||
6 | +var $ = require('yoho.jquery'); | ||
7 | + | ||
8 | +var isProvinceChecked = false; | ||
9 | + | ||
10 | +var $addressManage = $('.address-manage'), | ||
11 | + $province = $addressManage.find('.text-input[name="province"]'), | ||
12 | + $city = $addressManage.find('.text-input[name="city"]'), | ||
13 | + $county = $addressManage.find('.text-input[name="county"]'), | ||
14 | + $selectList = $addressManage.find('.text-input[name="province"], .text-input[name="city"]'), | ||
15 | + $btn = $('.order-modify-btn'), | ||
16 | + $name = $addressManage.find('.text-input[name="name"]'), | ||
17 | + $phone = $addressManage.find('.text-input[name="phone"]'), | ||
18 | + $telCode = $addressManage.find('.text-input[name="code-tel"]'), | ||
19 | + $tel = $addressManage.find('.text-input[name="tel"]'), | ||
20 | + $mail = $addressManage.find('.text-input[name="mail"]'), | ||
21 | + $address = $addressManage.find('.text-input[name="address"]'), | ||
22 | + $code = $addressManage.find('.text-input[name="code"]'), | ||
23 | + $saveBtn = $('.save-btn'); | ||
24 | + | ||
25 | +function structureOption($obj, data) { | ||
26 | + | ||
27 | + var key, | ||
28 | + optionHtml, | ||
29 | + defaultOption; | ||
30 | + | ||
31 | + for (key in data) { | ||
32 | + | ||
33 | + if (data[key].checked) { | ||
34 | + optionHtml += '<option selected value="' + data[key].value + '">' + data[key].name + '</option>'; | ||
35 | + } else { | ||
36 | + optionHtml += '<option value="' + data[key].value + '">' + data[key].name + '</option>'; | ||
37 | + } | ||
38 | + | ||
39 | + | ||
40 | + } | ||
41 | + | ||
42 | + $obj.html(optionHtml); | ||
43 | + | ||
44 | + if ($obj.attr('name') === 'province') { | ||
45 | + defaultOption = '<option value="0">请选择省份</option>'; | ||
46 | + } else if ($obj.attr('name') === 'city') { | ||
47 | + defaultOption = '<option value="0">请选择城市</option>'; | ||
48 | + } else if ($obj.attr('name') === 'county') { | ||
49 | + defaultOption = '<option value="0">请选择区县</option>'; | ||
50 | + } | ||
51 | + $obj.prepend($(defaultOption)); | ||
52 | + | ||
53 | +} | ||
54 | +/** | ||
55 | + * @description: 改函数会返回地址信息 | ||
56 | + * d {Object} type: 'getProvince'获取省 type: 'getCity'获取城市 type: 'getCounty'获取县 | ||
57 | + * id: 0 && type: 'getProvince' 获取所有省,默认没有选中项 | ||
58 | + * id !== 0 && type: 'getProvince' 获取所有省,默认选中用户所在的省 | ||
59 | + */ | ||
60 | +function getAddress(d, callback) { | ||
61 | + | ||
62 | + var $obj, | ||
63 | + url; | ||
64 | + | ||
65 | + if (d.type === 'getProvince') { | ||
66 | + url = 'getProvince'; | ||
67 | + | ||
68 | + $obj = $province; | ||
69 | + } else if (d.type === 'getCity') { | ||
70 | + url = 'getCity'; | ||
71 | + | ||
72 | + $obj = $city; | ||
73 | + } else if (d.type === 'getCounty') { | ||
74 | + url = 'getCounty'; | ||
75 | + | ||
76 | + $obj = $county; | ||
77 | + } | ||
78 | + $.ajax({ | ||
79 | + type: 'post', | ||
80 | + url: '/order/save/' + url, | ||
81 | + dataType: 'json', | ||
82 | + data: { | ||
83 | + id: d.id | ||
84 | + } | ||
85 | + }).then(function(data) { | ||
86 | + | ||
87 | + structureOption($obj, data); | ||
88 | + | ||
89 | + if (typeof callback === 'function') { | ||
90 | + callback(); | ||
91 | + } | ||
92 | + | ||
93 | + }).fail(function() { | ||
94 | + | ||
95 | + //todo | ||
96 | + }); | ||
97 | +} | ||
98 | + | ||
99 | +function getUserInfo(id) { | ||
100 | + $.ajax({ | ||
101 | + type: 'post', | ||
102 | + url: 'getUserInfo', | ||
103 | + data: { | ||
104 | + id: id | ||
105 | + } | ||
106 | + }).then(function(data) { | ||
107 | + var key; | ||
108 | + | ||
109 | + for (key in data) { | ||
110 | + | ||
111 | + if (data.hasOwnProperty[key]) { | ||
112 | + if (!!data[key]) { | ||
113 | + eval('$' + key).val(data[key]); | ||
114 | + } | ||
115 | + } | ||
116 | + } | ||
117 | + | ||
118 | + }).fail(function() { | ||
119 | + | ||
120 | + }); | ||
121 | +} | ||
122 | + | ||
123 | +//添加地址 | ||
124 | +exports.newAddress = function(id) { | ||
125 | + | ||
126 | + var pId = id !== 'undefined' ? id : 0; | ||
127 | + | ||
128 | + if (!!pId) { | ||
129 | + getUserInfo(); | ||
130 | + } | ||
131 | + | ||
132 | + //获取省 | ||
133 | + getAddress({ | ||
134 | + id: pId, | ||
135 | + type: 'getProvince' | ||
136 | + }, function() { | ||
137 | + | ||
138 | + var provinceId = $province.val(); | ||
139 | + | ||
140 | + if (provinceId !== '0') { | ||
141 | + | ||
142 | + //如果获取的省有默认选中项则获取市 | ||
143 | + getAddress({ | ||
144 | + id: provinceId, | ||
145 | + type: 'getCity' | ||
146 | + }, function() { | ||
147 | + | ||
148 | + var cityId = $city.val(); | ||
149 | + | ||
150 | + //如果获取的市有默认选中项则获取县 | ||
151 | + if (cityId !== '0') { | ||
152 | + getAddress({ | ||
153 | + id: cityId, | ||
154 | + type: 'getCounty' | ||
155 | + }); | ||
156 | + } | ||
157 | + }); | ||
158 | + } | ||
159 | + }); | ||
160 | + | ||
161 | + $selectList.change(function() { | ||
162 | + var $this = $(this); | ||
163 | + | ||
164 | + if ($this.attr('name') === 'province') { | ||
165 | + getAddress({ | ||
166 | + id: $this.val(), | ||
167 | + type: 'getCity' | ||
168 | + }, function() { | ||
169 | + isProvinceChecked = true; | ||
170 | + }); | ||
171 | + } | ||
172 | + | ||
173 | + if ($this.attr('name') === 'city' && isProvinceChecked) { | ||
174 | + getAddress({ | ||
175 | + id: $this.val(), | ||
176 | + type: 'getCounty' | ||
177 | + }); | ||
178 | + } | ||
179 | + }); | ||
180 | +}; | ||
181 | + | ||
182 | +//修改地址 | ||
183 | +exports.modifyAddress = function() { | ||
184 | + | ||
185 | + $btn.click(function(event) { | ||
186 | + | ||
187 | + var $this = $(event.target), | ||
188 | + id = $this.closest('li').find('.radio').attr('id'); | ||
189 | + | ||
190 | + if ($this.hasClass('address-modify')) { | ||
191 | + | ||
192 | + exports.newAddress(id); | ||
193 | + | ||
194 | + } else if ($this.hasClass('address-del')) { | ||
195 | + | ||
196 | + $.ajax({ | ||
197 | + type: 'post', | ||
198 | + url: '/order/save/addressDel', | ||
199 | + data: { | ||
200 | + id: id | ||
201 | + } | ||
202 | + }).then(function(data) { | ||
203 | + | ||
204 | + if (!!data.status) { | ||
205 | + $this.closest('li').remove(); | ||
206 | + } | ||
207 | + }).fail(function() { | ||
208 | + | ||
209 | + //todo | ||
210 | + }); | ||
211 | + } | ||
212 | + }); | ||
213 | +}; | ||
214 | + | ||
215 | +exports.saveAddress = function() { | ||
216 | + $saveBtn.click(function() { | ||
217 | + | ||
218 | + var name = $name.val(), | ||
219 | + province = $province.val(), | ||
220 | + city = $city.val(), | ||
221 | + county = $county.val(), | ||
222 | + address = $address.val(), | ||
223 | + phone = $phone.val(), | ||
224 | + telCode = $telCode.val(), | ||
225 | + tel = $tel.val(), | ||
226 | + mail = $mail.val(), | ||
227 | + code = $code.val(), | ||
228 | + id = new Date(); | ||
229 | + | ||
230 | + $.ajax({ | ||
231 | + type: 'post', | ||
232 | + url: '/order/save/addressSave', | ||
233 | + data: { | ||
234 | + name: name, | ||
235 | + province: province, | ||
236 | + city: city, | ||
237 | + county: county, | ||
238 | + address: address, | ||
239 | + phone: phone, | ||
240 | + tel: tel, | ||
241 | + telCode: telCode, | ||
242 | + mail: mail, | ||
243 | + code: code, | ||
244 | + id: id * 1 | ||
245 | + } | ||
246 | + }).then(function(data) { | ||
247 | + | ||
248 | + var addressStr; | ||
249 | + | ||
250 | + if (!!data.status) { | ||
251 | + addressStr = '<li>' + | ||
252 | + '<input class="radio" type="radio" name="address" id="' + id * 1 + '" />' + | ||
253 | + '<label for="' + id * 1 + '">' + | ||
254 | + '<strong>' + name + '</strong>' + | ||
255 | + '<span>' + address + '</span>' + | ||
256 | + '<a href="javascript:void(0);">设为默认地址</a>' + | ||
257 | + '<div class="order-modify-btn">' + | ||
258 | + '<span class="address-modify">[修改]</span>' + | ||
259 | + '<span class="address-del">[删除]</span>' + | ||
260 | + '</div>' + | ||
261 | + '</label>' + | ||
262 | + '</li>'; | ||
263 | + | ||
264 | + $('.use-new-address').before($(addressStr)); | ||
265 | + } | ||
266 | + }).fail(function() { | ||
267 | + | ||
268 | + //todo | ||
269 | + }); | ||
270 | + }); | ||
271 | +}; |
@@ -2,8 +2,10 @@ | @@ -2,8 +2,10 @@ | ||
2 | * @description: 订单保存 | 2 | * @description: 订单保存 |
3 | * @time: 2015/12/21 | 3 | * @time: 2015/12/21 |
4 | */ | 4 | */ |
5 | - var $ = require('yoho.jquery'); | ||
6 | 5 | ||
6 | +var $ = require('yoho.jquery'); | ||
7 | + | ||
8 | +var address = require('./address'); | ||
7 | 9 | ||
8 | var Order = { | 10 | var Order = { |
9 | /*业务数据(人民币)*/ | 11 | /*业务数据(人民币)*/ |
@@ -24,7 +26,12 @@ var Order = { | @@ -24,7 +26,12 @@ var Order = { | ||
24 | $tobi: $('p em', '.play-bi-pan .play-pan'), | 26 | $tobi: $('p em', '.play-bi-pan .play-pan'), |
25 | $cancel: $('.cancel', '.btn-group'), | 27 | $cancel: $('.cancel', '.btn-group'), |
26 | $total: $('em', '.to-play'), | 28 | $total: $('em', '.to-play'), |
27 | - $tbody: $('table tbody', '.pay-wapper') | 29 | + $tbody: $('table tbody', '.pay-wapper'), |
30 | + | ||
31 | + //请填写并核对一下信息 | ||
32 | + $orderSelectionSave: $('.address-list h2 span'), | ||
33 | + $addAddress: $('.add-address'), | ||
34 | + $addressManage: $('.address-manage') | ||
28 | }, | 35 | }, |
29 | init: function() { | 36 | init: function() { |
30 | var e = this.e, | 37 | var e = this.e, |
@@ -95,6 +102,34 @@ var Order = { | @@ -95,6 +102,34 @@ var Order = { | ||
95 | 102 | ||
96 | c.winShow(pan); | 103 | c.winShow(pan); |
97 | }); | 104 | }); |
105 | + | ||
106 | + | ||
107 | + //请填写并核对一下信息 | ||
108 | + e.$orderSelectionSave.click(function() { | ||
109 | + | ||
110 | + if (!$(this).data('expand')) { | ||
111 | + $('.address-list-inner').addClass('hide'); | ||
112 | + | ||
113 | + $(this).data('expand', 'expand').text('[修改]'); | ||
114 | + | ||
115 | + } else { | ||
116 | + $('.address-list-inner').removeClass('hide'); | ||
117 | + | ||
118 | + $(this).removeData('expand').text('[不保存并关闭]'); | ||
119 | + } | ||
120 | + | ||
121 | + }); | ||
122 | + | ||
123 | + e.$addAddress.click(function() { | ||
124 | + | ||
125 | + if (e.$addressManage.hasClass('hide')) { | ||
126 | + | ||
127 | + e.$addressManage.removeClass('hide'); | ||
128 | + } else { | ||
129 | + return; | ||
130 | + } | ||
131 | + | ||
132 | + }); | ||
98 | }, | 133 | }, |
99 | 134 | ||
100 | //渲染价格明细 | 135 | //渲染价格明细 |
@@ -219,4 +254,9 @@ Order.Data.activity = 0; | @@ -219,4 +254,9 @@ Order.Data.activity = 0; | ||
219 | Order.Data.carriage = 0; | 254 | Order.Data.carriage = 0; |
220 | 255 | ||
221 | Order.UI.init(); | 256 | Order.UI.init(); |
222 | -Order.Submit.init(); | ||
257 | +Order.Submit.init(); | ||
258 | + | ||
259 | + | ||
260 | +address.newAddress(); | ||
261 | +address.modifyAddress(); | ||
262 | +address.saveAddress(); |
@@ -70,7 +70,7 @@ | @@ -70,7 +70,7 @@ | ||
70 | } | 70 | } |
71 | 71 | ||
72 | .order-content { | 72 | .order-content { |
73 | - padding: 20px 30px; | 73 | + padding: 5px 30px; |
74 | font-size: 12px; | 74 | font-size: 12px; |
75 | color: #333; | 75 | color: #333; |
76 | 76 | ||
@@ -78,13 +78,8 @@ | @@ -78,13 +78,8 @@ | ||
78 | //public | 78 | //public |
79 | .order-selection { | 79 | .order-selection { |
80 | 80 | ||
81 | - border-top: 1px dashed #ccc; | ||
82 | - padding-top: 30px; | ||
83 | - | ||
84 | - &.address-list { | ||
85 | - border-top: none; | ||
86 | - padding-top: 0; | ||
87 | - } | 81 | + border-bottom: 1px dashed #ccc; |
82 | + padding: 15px 0; | ||
88 | 83 | ||
89 | h2 { | 84 | h2 { |
90 | font-size: 14px; | 85 | font-size: 14px; |
@@ -105,7 +100,7 @@ | @@ -105,7 +100,7 @@ | ||
105 | padding: 15px 0; | 100 | padding: 15px 0; |
106 | 101 | ||
107 | li { | 102 | li { |
108 | - margin: 10px 0; | 103 | + padding: 10px 0; |
109 | 104 | ||
110 | strong { | 105 | strong { |
111 | font-weight: bold; | 106 | font-weight: bold; |
@@ -133,17 +128,18 @@ | @@ -133,17 +128,18 @@ | ||
133 | } | 128 | } |
134 | 129 | ||
135 | .address-manage { | 130 | .address-manage { |
131 | + border-top: 1px dashed #ccc; | ||
136 | 132 | ||
137 | li { | 133 | li { |
138 | 134 | ||
139 | - margin-bottom: 15px; | 135 | + height: 25px; |
136 | + line-height: 25px; | ||
140 | 137 | ||
141 | .address-legend { | 138 | .address-legend { |
142 | width: 80px; | 139 | width: 80px; |
143 | text-align: right; | 140 | text-align: right; |
144 | display: inline-block; | 141 | display: inline-block; |
145 | - height: 30px; | ||
146 | - line-height: 30px; | 142 | + |
147 | color: #333; | 143 | color: #333; |
148 | 144 | ||
149 | i { | 145 | i { |
@@ -154,22 +150,51 @@ | @@ -154,22 +150,51 @@ | ||
154 | .text-input { | 150 | .text-input { |
155 | height: 25px; | 151 | height: 25px; |
156 | line-height: 25px; | 152 | line-height: 25px; |
153 | + width: 180px; | ||
154 | + padding: 0; | ||
155 | + border: 1px solid #ccc; | ||
156 | + @include box-sizing(); | ||
157 | + } | ||
158 | + select.text-input { | ||
159 | + width: 100px; | ||
160 | + } | ||
161 | + | ||
162 | + .address-tel-input { | ||
163 | + width: 180px; | ||
164 | + text-align: center; | ||
165 | + display: inline-block; | ||
166 | + height: 25px; | ||
167 | + line-height: 25px; | ||
168 | + | ||
169 | + input { | ||
170 | + text-align: left; | ||
171 | + float: right; | ||
172 | + width: 120px; | ||
173 | + | ||
174 | + &.tel-lengend { | ||
175 | + float: left; | ||
176 | + width: 40px; | ||
177 | + } | ||
178 | + } | ||
157 | } | 179 | } |
158 | } | 180 | } |
159 | } | 181 | } |
160 | 182 | ||
161 | - .save-btn { | ||
162 | - background: sprite($order, btn_sb) no-repeat; | ||
163 | - width: image-width(sprite-file($order, btn_sb)); | ||
164 | - height: image-height(sprite-file($order, btn_sb)); | ||
165 | - line-height: image-height(sprite-file($order, btn_sb)); | ||
166 | - display: block; | ||
167 | - font-size: 14px; | ||
168 | - color: #fff; | ||
169 | - font-weight: bold; | ||
170 | - text-indent: 25px; | ||
171 | - cursor: pointer; | ||
172 | - margin-bottom: 30px; | 183 | + @each $class in save-btn, pay-btn { |
184 | + .#{$class} { | ||
185 | + background: sprite($order, $class) no-repeat; | ||
186 | + width: image-width(sprite-file($order, $class)); | ||
187 | + height: image-height(sprite-file($order, $class)); | ||
188 | + line-height: image-height(sprite-file($order, $class)); | ||
189 | + display: block; | ||
190 | + font-size: 14px; | ||
191 | + color: #fff; | ||
192 | + font-weight: bold; | ||
193 | + text-indent: 25px; | ||
194 | + cursor: pointer; | ||
195 | + | ||
196 | + | ||
197 | + } | ||
173 | } | 198 | } |
174 | 199 | ||
175 | .pay-time { | 200 | .pay-time { |
@@ -179,6 +204,64 @@ | @@ -179,6 +204,64 @@ | ||
179 | 204 | ||
180 | li { | 205 | li { |
181 | margin: 10px 0; | 206 | margin: 10px 0; |
207 | + | ||
208 | + input.radio { | ||
209 | + margin: 0; | ||
210 | + vertical-align: middle; | ||
211 | + } | ||
212 | + } | ||
213 | + } | ||
214 | + | ||
215 | + .pay-time-modify { | ||
216 | + | ||
217 | + h3 { | ||
218 | + height: 25px; | ||
219 | + line-height: 25px; | ||
220 | + border: 1px solid #e6e6e6; | ||
221 | + background: #efefef; | ||
222 | + text-indent: 25px; | ||
223 | + position: relative; | ||
224 | + | ||
225 | + &:after { | ||
226 | + content: ''; | ||
227 | + display: block; | ||
228 | + width: 11px; | ||
229 | + height: 11px; | ||
230 | + background: image_url('order/roundgreybtn.gif'); | ||
231 | + position: absolute; | ||
232 | + top: 7px; | ||
233 | + left: 8px; | ||
234 | + } | ||
235 | + } | ||
236 | + | ||
237 | + .pay-dashed-hr { | ||
238 | + border-bottom: 1px dashed #ccc; | ||
239 | + padding-bottom: 10px; | ||
240 | + } | ||
241 | + | ||
242 | + .pay-type-tips { | ||
243 | + color: #999; | ||
244 | + } | ||
245 | + | ||
246 | + div.pay-type-legend { | ||
247 | + width: 130px; | ||
248 | + display: inline-block; | ||
249 | + } | ||
250 | + span.pay-type-legend { | ||
251 | + margin: 0; | ||
252 | + color: #468fa2; | ||
253 | + } | ||
254 | + | ||
255 | + .support-type { | ||
256 | + display: none; | ||
257 | + margin-left: 130px; | ||
258 | + border-left: 1px dashed #ccc; | ||
259 | + padding: 15px; | ||
260 | + font-size: 12px; | ||
261 | + | ||
262 | + h4 { | ||
263 | + margin-bottom: 15px; | ||
264 | + } | ||
182 | } | 265 | } |
183 | } | 266 | } |
184 | } | 267 | } |
@@ -17,7 +17,24 @@ class SaveController extends AbstractAction | @@ -17,7 +17,24 @@ class SaveController extends AbstractAction | ||
17 | array( | 17 | array( |
18 | 'user' => '王成龙', | 18 | 'user' => '王成龙', |
19 | 'address' => '江苏省南京市建邺区嘉陵江东街18号,国家广告产业园5栋17楼,YOHO 18605269243', | 19 | 'address' => '江苏省南京市建邺区嘉陵江东街18号,国家广告产业园5栋17楼,YOHO 18605269243', |
20 | - 'checked' => true | 20 | + 'checked' => true, |
21 | + 'id' => 100 | ||
22 | + ) | ||
23 | + ), | ||
24 | + 'supportLine' => array( | ||
25 | + array( | ||
26 | + 'src' => 'http://static.yohobuy.com/images/pay/icon/zhifubao.png' | ||
27 | + ), | ||
28 | + array( | ||
29 | + 'src' => 'http://static.yohobuy.com/images/pay/icon/zhifubao.png' | ||
30 | + ) | ||
31 | + ), | ||
32 | + 'supportBank' => array( | ||
33 | + array( | ||
34 | + 'src' => 'http://static.yohobuy.com/images/bankico/BOC.gif' | ||
35 | + ), | ||
36 | + array( | ||
37 | + 'src' => 'http://static.yohobuy.com/images/bankico/BOC.gif' | ||
21 | ) | 38 | ) |
22 | ), | 39 | ), |
23 | 'orderProducts'=>array( | 40 | 'orderProducts'=>array( |
@@ -55,4 +72,106 @@ class SaveController extends AbstractAction | @@ -55,4 +72,106 @@ class SaveController extends AbstractAction | ||
55 | $this->echoJson($result); | 72 | $this->echoJson($result); |
56 | } | 73 | } |
57 | 74 | ||
75 | + //获取省级联动ajax | ||
76 | + //省 | ||
77 | + public function getProvinceAction() | ||
78 | + { | ||
79 | + $data = array( | ||
80 | + array( | ||
81 | + 'name' => '111省', | ||
82 | + 'value' => 11, | ||
83 | + 'checked' => false | ||
84 | + ), | ||
85 | + array( | ||
86 | + 'name' => '222省', | ||
87 | + 'value' => 22 | ||
88 | + ), | ||
89 | + array( | ||
90 | + 'name' => '333省', | ||
91 | + 'value' => 33 | ||
92 | + ) | ||
93 | + ); | ||
94 | + | ||
95 | + $this->echoJson($data); | ||
96 | + } | ||
97 | + | ||
98 | + //市 | ||
99 | + public function getCityAction() | ||
100 | + { | ||
101 | + $data = array( | ||
102 | + array( | ||
103 | + 'name' => '111市', | ||
104 | + 'value' => 11 | ||
105 | + ), | ||
106 | + array( | ||
107 | + 'name' => '222市', | ||
108 | + 'value' => 22, | ||
109 | + 'checked' => false | ||
110 | + ), | ||
111 | + array( | ||
112 | + 'name' => '333市', | ||
113 | + 'value' => 33 | ||
114 | + ) | ||
115 | + ); | ||
116 | + | ||
117 | + $this->echoJson($data); | ||
118 | + } | ||
119 | + | ||
120 | + //县 | ||
121 | + public function getCountyAction() | ||
122 | + { | ||
123 | + $data = array( | ||
124 | + array( | ||
125 | + 'name' => '111县', | ||
126 | + 'value' => 11 | ||
127 | + ), | ||
128 | + array( | ||
129 | + 'name' => '222县', | ||
130 | + 'value' => 22 | ||
131 | + ), | ||
132 | + array( | ||
133 | + 'name' => '333县', | ||
134 | + 'value' => 33, | ||
135 | + 'checked' => false | ||
136 | + ) | ||
137 | + ); | ||
138 | + | ||
139 | + $this->echoJson($data); | ||
140 | + } | ||
141 | + | ||
142 | + //修改地址 | ||
143 | + public function getUserInfoAction() | ||
144 | + { | ||
145 | + $data = array( | ||
146 | + 'name' => '王成龙', | ||
147 | + 'phone' => '18605269243', | ||
148 | + 'address' => '江陵江东街', | ||
149 | + 'tel' => false, | ||
150 | + 'telCode' => false, | ||
151 | + 'mail' => false, | ||
152 | + 'code' => '210000' | ||
153 | + ); | ||
154 | + | ||
155 | + $this->echoJson($data); | ||
156 | + } | ||
157 | + | ||
158 | + //删除地址 | ||
159 | + public function addressDelAction() | ||
160 | + { | ||
161 | + $data = array( | ||
162 | + 'status' => true | ||
163 | + ); | ||
164 | + | ||
165 | + $this->echoJson($data); | ||
166 | + } | ||
167 | + | ||
168 | + //保存地址 | ||
169 | + public function addressSaveAction() | ||
170 | + { | ||
171 | + $data = array( | ||
172 | + 'status' => true | ||
173 | + ); | ||
174 | + | ||
175 | + $this->echoJson($data); | ||
176 | + } | ||
58 | } | 177 | } |
-
Please register or login to post a comment