Commit 1b8be02a840999ed87b6be5c25e635ea83831138

Authored by atao
1 parent 6fc5291d

修改购买卡时的费用

src/main/webapp/WEB-INF/pages/monthpay.html
1 1 <!DOCTYPE html>
2 2 <html lang="en">
3 3 <head>
4   - <meta charset="UTF-8">
5   - <title>月卡支付</title>
6   - <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
7   - <meta name="format-detection" content="telephone=no"/>
8   - <meta name="format-detection" content="email=no"/>
9   - <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
10   - <meta name="apple-mobile-web-app-capable" content="yes"/>
11   - <meta name="apple-mobile-web-app-title" content="">
12   - <meta name="google" value="notranslate"><!-- 禁止Chrome 浏览器中自动提示翻译 -->
13   - <link rel="apple-touch-icon-precomposed" href="favicon.ico">
14   - <link rel="shortcut icon" href="favicon.ico">
15   - <link rel="Bookmark" href="favicon.ico">
16   - <link rel="stylesheet" href="//cdn.bootcss.com/weui/1.1.1/style/weui.min.css">
17   - <link rel="stylesheet" href="//cdn.bootcss.com/jquery-weui/1.0.1/css/jquery-weui.min.css">
18   - <link rel="stylesheet" href="${staticHost}/css/reset.css">
19   - <link rel="stylesheet" href="${staticHost}/css/monthpay.min.css">
  4 + <meta charset="UTF-8">
  5 + <title>月卡支付</title>
  6 + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  7 + <meta name="format-detection" content="telephone=no"/>
  8 + <meta name="format-detection" content="email=no"/>
  9 + <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
  10 + <meta name="apple-mobile-web-app-capable" content="yes"/>
  11 + <meta name="apple-mobile-web-app-title" content="">
  12 + <meta name="google" value="notranslate"><!-- 禁止Chrome 浏览器中自动提示翻译 -->
  13 + <link rel="apple-touch-icon-precomposed" href="favicon.ico">
  14 + <link rel="shortcut icon" href="favicon.ico">
  15 + <link rel="Bookmark" href="favicon.ico">
  16 + <link rel="stylesheet" href="//cdn.bootcss.com/weui/1.1.1/style/weui.min.css">
  17 + <link rel="stylesheet" href="//cdn.bootcss.com/jquery-weui/1.0.1/css/jquery-weui.min.css">
  18 + <link rel="stylesheet" href="${staticHost}/css/reset.css">
  19 + <link rel="stylesheet" href="${staticHost}/css/monthpay.min.css">
20 20 </head>
21 21 <body ontouchstart>
22 22 <div class="weui-cells weui-cells_form">
23   - <input type="hidden" id="parkLotCardId" value="${parkLotCardId!''}"/>
24   - <div class="weui-cell">
25   - <div class="weui-cell__hd"><label class="weui-label">车牌号</label></div>
26   - <div class="weui-cell__bd">
27   - <input class="weui-input" type="text" value="" maxlength="7" placeholder="请输入车牌号,必填" id="license_number">
  23 + <input type="hidden" id="parkLotCardId" value="${parkLotCardId!''}"/>
  24 + <div class="weui-cell">
  25 + <div class="weui-cell__hd"><label class="weui-label">车牌号</label></div>
  26 + <div class="weui-cell__bd">
  27 + <input class="weui-input" type="text" value="" maxlength="7" placeholder="请输入车牌号,必填" id="license_number">
  28 + </div>
28 29 </div>
29   - </div>
30   - <div class="weui-cell">
31   - <div class="weui-cell__hd"><label class="weui-label">卡类别</label></div>
32   - <div class="weui-cell__bd" id="cardTypeRemark">
33   - <!-- 蓝牌小车包月卡-->
  30 + <div class="weui-cell">
  31 + <div class="weui-cell__hd"><label class="weui-label">卡类别</label></div>
  32 + <div class="weui-cell__bd" id="cardTypeRemark">
  33 + <!-- 蓝牌小车包月卡-->
  34 + </div>
34 35 </div>
35   - </div>
36 36 </div>
37 37  
38 38 <div class="weui-cells weui-cells_form">
39   - <div class="weui-cell">
40   - <div class="weui-cell__hd"><label class="weui-label">停车场</label></div>
41   - <input type="hidden" id="parkLotCode"/>
42   - <div class="weui-cell__bd" id="parkLotName"></div>
43   - </div>
44   - <div class="weui-cell">
45   - <div class="weui-cell__hd"><label class="weui-label">购买数量</label></div>
46   - <div class="weui-cell__bd">
47   - <span id="reduce_btn" class="reduce_btn">-</span><input class="weui-input inpt-num" id="numder" type="text"
48   - readonly="" value="1"><span id="add_btn"
49   - class="add_btn">+</span>
  39 + <div class="weui-cell">
  40 + <div class="weui-cell__hd"><label class="weui-label">停车场</label></div>
  41 + <input type="hidden" id="parkLotCode"/>
  42 + <div class="weui-cell__bd" id="parkLotName"></div>
50 43 </div>
51   - </div>
52   - <div class="weui-cell">
53   - <div class="weui-cell__hd"><label for="date" class="weui-label">开始时间</label></div>
54   - <div class="weui-cell__bd">
55   - <input class="weui-input" id="date" type="text" placeholder="请选择开始时间">
  44 + <div class="weui-cell">
  45 + <div class="weui-cell__hd"><label class="weui-label">购买数量</label></div>
  46 + <div class="weui-cell__bd">
  47 + <span id="reduce_btn" class="reduce_btn">-</span><input class="weui-input inpt-num" id="numder" type="text"
  48 + readonly="" value="1"><span id="add_btn"
  49 + class="add_btn">+</span>
  50 + </div>
56 51 </div>
57   - <div class="weui-cell__ft">
  52 + <div class="weui-cell">
  53 + <div class="weui-cell__hd"><label for="date" class="weui-label">开始时间</label></div>
  54 + <div class="weui-cell__bd">
  55 + <input class="weui-input" id="date" type="text" placeholder="请选择开始时间">
  56 + </div>
  57 + <div class="weui-cell__ft">
  58 + </div>
58 59 </div>
59   - </div>
60   - <div class="weui-cell">
61   - <div class="weui-cell__hd"><label for="date1" class="weui-label">有效期至</label></div>
62   - <div class="weui-cell__bd">
63   - <input class="weui-input" id="date1" type="text" readonly placeholder="请先选择开始时间">
  60 + <div class="weui-cell">
  61 + <div class="weui-cell__hd"><label for="date1" class="weui-label">有效期至</label></div>
  62 + <div class="weui-cell__bd">
  63 + <input class="weui-input" id="date1" type="text" readonly placeholder="请先选择开始时间">
  64 + </div>
64 65 </div>
65   - </div>
66   - <div class="weui-cell">
67   - <div class="weui-cell__hd"><label class="weui-label">合计</label></div>
68   - <input type="hidden" id="cardAmount"/>
69   - <div class="weui-cell__bd pay-total">
70   - ¥<span id="totle_money">90</span>
  66 + <div class="weui-cell">
  67 + <div class="weui-cell__hd"><label class="weui-label">合计</label></div>
  68 + <input type="hidden" id="cardAmount"/>
  69 + <div class="weui-cell__bd pay-total">
  70 + ¥<span id="totle_money">90</span>
  71 + </div>
71 72 </div>
72   - </div>
73 73 </div>
74 74 <div class="pay-content-padded">
75   - <a href="javascript:;" class="weui-btn weui-btn_primary" id="pay_btn">提交订单</a>
  75 + <a href="javascript:;" class="weui-btn weui-btn_primary" id="pay_btn">提交订单</a>
76 76 </div>
77 77 <script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
78 78 <script src="//cdn.bootcss.com/jquery-weui/1.0.1/js/jquery-weui.min.js"></script>
79 79 <script src="${staticHost}/js/jsutil.js"></script>
80 80 <script src="${staticHost}/js/url.js"></script>
81 81 <script type="text/javascript">
82   - var func = {
83   - //1.初始化页面信息.<br/>
84   - initMonthCardInfo: function () {
85   - var parkLotCardId = $('#parkLotCardId').val();
86   - if (parkLotCardId == null || parkLotCardId == "") {
87   - $.alert("系统繁忙,请重新操作!");
88   - return false;
89   - }
90   - var jsonInfo = {};
91   - jsonInfo.parkLotCardId = parkLotCardId;
92   - jsutil.defaultReq(
93   - mUrl.queryParkLotCardForChoose,
94   - jsonInfo,
95   - function (data) {
96   - if ("8888" == data.code) {
97   - var parkLot = data.data;
98   - $('#parkLotName').empty();
99   - $('#cardTypeRemark').empty();
100   - $('#totle_money').empty();
101   - $('#parkLotName').text(parkLot.parkName);
102   - $('#parkLotCode').val(parkLot.parkNo);
103   - $('#cardTypeRemark').text(parkLot.parkCardCouponsList[0].goods_type_remark);
104   - $('#totle_money').text(parkLot.parkCardCouponsList[0].goods_amount);
105   - $('#parkLotCardId').val(parkLot.parkCardCouponsList[0].id);
106   - $('#cardAmount').val(parkLot.parkCardCouponsList[0].goods_amount);
107   - } else {
108   - $.alert("系统繁忙,请重新操作!");
109   - }
110   - });
111   - }
112   - };
113   - $(function () {
114   - func.initMonthCardInfo();
115   - function shownowtime() {
116   - var mydate = new Date();
117   - var month = mydate.getMonth() + 1;
118   - var data = mydate.getDate();
119   - if (data < 10) {
120   - data = '0' + data;
121   - }
122   - ;
123   - if (month < 10) {
124   - month = '0' + month;
125   - }
126   - ;
127   -
128   - var str = "" + mydate.getFullYear() + "-";
129   - str += month + "-";
130   - str += data;
131   - return str;
132   - }
133   -
134   - function showprevtime() {
135   - var mydate = new Date();
136   - var month = mydate.getMonth() + 1;
137   - var data = mydate.getDate() - 1;
138   - if (data < 10) {
139   - data = '0' + data;
140   - }
141   - ;
142   - if (month < 10) {
143   - month = '0' + month;
144   - }
145   - ;
146   -
147   - var str = "" + mydate.getFullYear() + "-";
148   - str += month + "-";
149   - str += data;
150   - return str;
151   - }
152   -
153   - $("#date").calendar({
154   - //最小时间为当前时间
155   - minDate: showprevtime(),
156   - value: [shownowtime()],
157   - onChange: function (p, values, displayValues) {
158   - var num = $('#numder').val();
159   - console.log(values[0])
160   - var endD = addMoth(values[0], Number(num));
161   - $('#date1').val(endD);
162   -
163   - },
164   -
165   - });
166   - //添加数量
167   - $("#add_btn").click(function () {
168   - var cardAmount = $('#cardAmount').val();//月卡单价
169   - var _numb = $("#numder").val();
170   - _numb++;
171   - if (_numb >= 6) {
172   - return false;
173   - }
174   - $("#numder").val(_numb);
175   - $("#totle_money").text(_numb * cardAmount);
176   - var dataVal = $('#date').val();
177   - if (dataVal) {
178   - var endD = addMoth(dataVal, Number(_numb));
179   - $('#date1').val(endD);
180   - }
181   -
182   - });
183   - //减去数量
184   - $("#reduce_btn").click(function () {
185   - var cardAmount = $('#cardAmount').val();//月卡单价
186   - var _numb = $("#numder").val();
187   - if (_numb <= 1) {
188   - return false;
189   - }
190   - _numb--;
191   - $("#numder").val(_numb)
192   - $("#totle_money").text(_numb * cardAmount);
193   - var dataVal = $('#date').val();
194   - if (dataVal) {
195   - var endD = addMoth(dataVal, Number(_numb));
196   - $('#date1').val(endD);
197   - }
198   - });
199   - function addMoth(d, m) {
200   - var ds = d.split('-'), _d = ds[2] - 0;
201   - var nextM = new Date(ds[0], ds[1] - 1 + m + 1, 0);
202   - var max = nextM.getDate();
203   - var dsM = ds[1] - 1 + m;
204   -// if(dsM<10){
205   -// dsM = '0'+dsM;
206   -// }
207   -// if(_d<10){
208   -// _d = '0'+_d;
209   -// }
210   - d = new Date(ds[0], ds[1] - 1 + m, _d > max ? max : _d);
211   - var M = (d.getMonth() + 1);
212   - if (M < 10) {
213   - M = '0' + M
214   - }
215   - ;
216   - var D = d.getDate();
217   - if (D < 10) {
218   - D = '0' + D
219   - }
220   - ;
221   -
222   - return d.getFullYear() + '-' + M + '-' + D;
  82 + var func = {
  83 + //1.初始化页面信息.<br/>
  84 + initMonthCardInfo: function () {
  85 + var parkLotCardId = $('#parkLotCardId').val();
  86 + if (parkLotCardId == null || parkLotCardId == "") {
  87 + $.alert("系统繁忙,请重新操作!");
  88 + return false;
  89 + }
  90 + var jsonInfo = {};
  91 + jsonInfo.parkLotCardId = parkLotCardId;
  92 + jsutil.defaultReq(
  93 + mUrl.queryParkLotCardForChoose,
  94 + jsonInfo,
  95 + function (data) {
  96 + if ("8888" == data.code) {
  97 + var parkLot = data.data;
  98 + $('#parkLotName').empty();
  99 + $('#cardTypeRemark').empty();
  100 + $('#totle_money').empty();
  101 + $('#parkLotName').text(parkLot.parkName);
  102 + $('#parkLotCode').val(parkLot.parkNo);
  103 + $('#cardTypeRemark').text(parkLot.parkCardCouponsList[0].goods_type_remark);
  104 + $('#totle_money').text(parkLot.parkCardCouponsList[0].goods_amount);
  105 + $('#parkLotCardId').val(parkLot.parkCardCouponsList[0].id);
  106 + $('#cardAmount').val(parkLot.parkCardCouponsList[0].goods_amount);
  107 + } else {
  108 + $.alert("系统繁忙,请重新操作!");
  109 + }
  110 + });
  111 + }
223 112 };
224   - //立即支付
225   - $('#pay_btn').on('click', function () {
226   - var carNum = $('#license_number').val();
227   - var parkLotCardId = $('#parkLotCardId').val();
228   - var buyNum = $('#numder').val();
229   - var startDate = $('#date').val();
230   - var endDate = $('#date1').val();
231   - var totleMoney = $('#totle_money').text();
232   - if (carNum == '' || carNum == null || carNum == undefined) {
233   - $.toptip('亲!请输入车牌号', 3000, 'warning'); //设置显示时间
234   - return false
235   - }
236   - //车牌校验
237   - var checkResult = jsutil.isVehicleNumber(jsutil.trim(carNum));
238   - if (!checkResult) {
239   - $.alert("亲!输入车牌号不正确,<br/> 正确格式如:陕K88888");
240   - return false;
241   - }
242   - /**
243   - *校验车牌号是否已经在对应的停车场已经订购? 是:跳转续费页面,否:继续订购
244   - * parkLotCardId
245   - */
246   -
247   - jsutil.defaultReq(
248   - mUrl.checkIsbuyCard,
249   - {"carNum": carNum, "parkCardId": parkLotCardId},
250   - function (data) {
251   - if ("8888" != data.code) {
252   - //$.alert("");
253   - return false;
254   - } else {
255   - if (data.data != null && data.data != '') {
256   - $.confirm("亲!您已经办理该停车场卡,是否继续续费?", function () {
257   - //点击确认后的回调函数
258   - window.location.href = mUrl.renewView + "&custCardId=" + data.data;
259   - }, function () {
260   - window.location.href = mUrl.toParkInfoListView;
261   - });
  113 + $(function () {
  114 + func.initMonthCardInfo();
  115 +
  116 + //当pick的值发生变化的时候
  117 + function pickerOnClose() {
  118 + var inputDateStr = formatDateStr($('#date').val());
  119 + var inputDate = new Date(inputDateStr);
  120 + var inputYear = inputDate.getFullYear();
  121 + var inputMonth = inputDate.getMonth();
  122 + var date = new Date();
  123 + var thisYear = date.getFullYear();
  124 + var thisMonth = date.getMonth();
  125 +
  126 + //当前时间大于选择的时间
  127 + if (thisYear >= inputYear && thisMonth >= inputMonth) {
  128 + $.toptip('开始时间不能小于下月 1号 ', 'warning');
  129 + setPickerDefaultValue();
  130 + }
  131 +
  132 + var num = $("#numder").val();
  133 + var startDateStr = $("#date").val();
  134 + var dateStr= formatDateStr(startDateStr);
  135 + handelEndDateAndPrice(num, new Date(dateStr));
  136 +
  137 + }
  138 +
  139 + //设置当前时间默认值
  140 + function setPickerDefaultValue() {
  141 + var date = new Date();
  142 + var year = date.getFullYear() + '年';
  143 + var month = date.getMonth() + 2 + '月';
  144 + if (month.length < 3) {
  145 + month = '0' + month;
  146 + }
  147 +
  148 + var defaultDate = [year, month, '01日'];
  149 + $("#date").picker("setValue", defaultDate);
  150 +
  151 + }
  152 +
  153 + //初始化时间picker选择器的参数
  154 + function initPickerParam() {
  155 + var onClose = pickerOnClose;
  156 + var years = [];
  157 + var months = ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月'];
  158 +
  159 + var date = new Date();
  160 + var thisYear = date.getFullYear();
  161 + for (var i = 0; i < 10; i++) {
  162 + years[i] = thisYear + i + '年';
  163 + }
  164 + var param = {};
  165 + param.onClose = onClose;
  166 + param.title = '请选择开始时间';
  167 + var cols = [{"textAlign": 'center', values: years}, {
  168 + "textAlign": 'center',
  169 + values: months
  170 + }, {"textAlign": 'center', values: ['01日']}]
  171 + param.cols = cols;
  172 +
  173 + return param;
  174 + }
  175 +
  176 + //选择日期
  177 + $("#date").picker(
  178 + initPickerParam()
  179 + );
  180 +
  181 +
  182 + //根据数量,开始时间计算 结束时间,总价
  183 + function handelEndDateAndPrice(num, startDate) {
  184 + if(typeof num== 'string'){
  185 + num = parseInt(num);
  186 + }
  187 + //设置数量
  188 + $("#numder").val(num);
  189 + startDate.setMonth(startDate.getMonth() + num);
  190 + startDate.setDate(0)//设置为0,意思为取当前月最后一天
  191 + var year = startDate.getFullYear();
  192 + var month = startDate.getMonth() + 1 + '';
  193 + var day = startDate.getDate() + '';
  194 + if (month.length == 1) {
  195 + //只有一位,需要补0
  196 + month = '0' + month;
  197 + }
  198 +
  199 + if (day.length == 1) {
  200 + //只有一位,需要补0
  201 + day = '0' + day;
  202 + }
  203 + var endDateStr = year + '年 ' + month + '月 ' + day + '日';
  204 + //设置失效日期
  205 + $('#date1').val(endDateStr);
  206 + //设置总价
  207 + var price = $("#cardAmount").val();
  208 + $("#totle_money").html(num * price);
  209 + }
262 210  
  211 +
  212 + //将年月日的日期 格式化成 用 - 间隔的
  213 + function formatDateStr(dateStr) {
  214 + return dateStr.replace('年', '-').replace('月', '-').replace('日', '').replace(' ', '').replace(' ', '');
  215 + }
  216 +
  217 +
  218 + //添加数量
  219 + $("#add_btn").click(function () {
  220 +
  221 + var startDateStr = $("#date").val();
  222 + if (null == startDateStr || startDateStr.length < 1) {
  223 + $.toptip('请先选择开始时间', 2000, 'warning');
  224 + return;
  225 + }
  226 + var num = $("#numder").val();
  227 + num++;
  228 + if (num > 1 && num < 6) {
  229 + var startDate = new Date(formatDateStr(startDateStr));
  230 + handelEndDateAndPrice(num, startDate);
  231 + } else {
  232 + $.toptip('最多购买5个月', 2000, 'warning');
  233 + }
  234 +
  235 + });
  236 + //减去数量
  237 + $("#reduce_btn").click(function () {
  238 +
  239 + var startDateStr = $("#date").val();
  240 + if (null == startDateStr || startDateStr.length < 1) {
  241 + $.toptip('请先选择开始时间', 2000, 'warning');
  242 + return;
  243 + }
  244 +
  245 + var num = $("#numder").val();
  246 + num--;
  247 + if (num > 0) {
  248 + var startDate = new Date(formatDateStr($("#date").val()));
  249 + handelEndDateAndPrice(num, startDate);
263 250 } else {
264   - if (startDate == '' || startDate == null || startDate == undefined) {
265   - $.toptip('亲!请选择开始时间', 3000, 'warning'); //设置显示时间
  251 + $.toptip('最少购买一个月', 2000, 'warning');
  252 + }
  253 +
  254 + });
  255 +
  256 +
  257 + //立即支付
  258 + $('#pay_btn').on('click', function () {
  259 + var carNum = $('#license_number').val();
  260 + var parkLotCardId = $('#parkLotCardId').val();
  261 + var buyNum = $('#numder').val();
  262 + var startDate = formatDateStr($('#date').val());
  263 + var endDate = formatDateStr($('#date1').val());
  264 + var totleMoney = $('#totle_money').text();
  265 + if (carNum == '' || carNum == null || carNum == undefined) {
  266 + $.toptip('亲!请输入车牌号', 3000, 'warning'); //设置显示时间
266 267 return false
267   - } else {
268   - var jsonInfo = {};
269   - jsonInfo.carNum = carNum;
270   - jsonInfo.parkLotCardId = parkLotCardId;
271   - jsonInfo.buyNum = buyNum;
272   - jsonInfo.startDate = startDate;
273   - jsonInfo.endDate = endDate;
274   - jsonInfo.totleMoney = totleMoney;
275   - jsonInfo.orderType = 3;//
276   - jsutil.defaultReq(
277   - mUrl.createOrderInfo,
278   - jsonInfo,
279   - function (data) {
  268 + }
  269 + //车牌校验
  270 + var checkResult = jsutil.isVehicleNumber(jsutil.trim(carNum));
  271 + if (!checkResult) {
  272 + $.alert("亲!输入车牌号不正确,<br/> 正确格式如:陕K88888");
  273 + return false;
  274 + }
  275 + /**
  276 + *校验车牌号是否已经在对应的停车场已经订购? 是:跳转续费页面,否:继续订购
  277 + * parkLotCardId
  278 + */
  279 +
  280 + jsutil.defaultReq(
  281 + mUrl.checkIsbuyCard,
  282 + {"carNum": carNum, "parkCardId": parkLotCardId},
  283 + function (data) {
280 284 if ("8888" != data.code) {
281   - $.alert("亲!创建订单失败,请重新尝试!");
282   - return false;
  285 + //$.alert("");
  286 + return false;
283 287 } else {
284   - window.location.href = mUrl.orderPayView + "&parkOrderId=" + data.data;
  288 + if (data.data != null && data.data != '') {
  289 + $.confirm("亲!您已经办理该停车场卡,是否继续续费?", function () {
  290 + //点击确认后的回调函数
  291 + window.location.href = mUrl.renewView + "&custCardId=" + data.data;
  292 + }, function () {
  293 + window.location.href = mUrl.toParkInfoListView;
  294 + });
  295 +
  296 + } else {
  297 + if (startDate == '' || startDate == null || startDate == undefined) {
  298 + $.toptip('亲!请选择开始时间', 3000, 'warning'); //设置显示时间
  299 + return false
  300 + } else {
  301 + var jsonInfo = {};
  302 + jsonInfo.carNum = carNum;
  303 + jsonInfo.parkLotCardId = parkLotCardId;
  304 + jsonInfo.buyNum = buyNum;
  305 + jsonInfo.startDate = startDate;
  306 + jsonInfo.endDate = endDate;
  307 + jsonInfo.totleMoney = totleMoney;
  308 + jsonInfo.orderType = 3;//
  309 + jsutil.defaultReq(
  310 + mUrl.createOrderInfo,
  311 + jsonInfo,
  312 + function (data) {
  313 + if ("8888" != data.code) {
  314 + $.alert("亲!创建订单失败,请重新尝试!");
  315 + return false;
  316 + } else {
  317 + window.location.href = mUrl.orderPayView + "&parkOrderId=" + data.data;
  318 + }
  319 + });
  320 + }
  321 + }//else
285 322 }
286   - });
287   - }
288   - }//else
289   - }
290   - });
  323 + });
291 324  
292 325  
293   - });
  326 + });
294 327  
295 328  
296   - })
  329 + })
297 330 </script>
298 331 </body>
299 332 </html>
... ...
src/main/webapp/WEB-INF/pages/yearpay.html
... ... @@ -110,101 +110,152 @@ var func = {
110 110 };
111 111 $(function () {
112 112 func.initYearCardInfo();
113   - //获取最小S时间
114   - function shownowtime(){
115   - var mydate = new Date();
116   - var month = mydate.getMonth()+1;
117   - var data = mydate.getDate();
118   - if(data<10){
119   - data='0'+data;
120   - };
121   - if(month<10){
122   - month = '0'+month;
123   - };
  113 + //当pick的值发生变化的时候
  114 + function pickerOnClose() {
  115 + var inputDateStr = formatDateStr($('#date').val());
  116 + var inputDate = new Date(inputDateStr);
  117 + var inputYear = inputDate.getFullYear();
  118 + var inputMonth = inputDate.getMonth();
  119 + var date = new Date();
  120 + var thisYear = date.getFullYear();
  121 + var thisMonth = date.getMonth();
  122 +
  123 + //当前时间大于选择的时间
  124 + if (thisYear >= inputYear && thisMonth >= inputMonth) {
  125 + $.toptip('开始时间不能小于下月 1号 ', 'warning');
  126 + setPickerDefaultValue();
  127 + }
  128 +
  129 + var num = $("#numder").val();
  130 + var startDateStr = $("#date").val();
  131 + var dateStr= formatDateStr(startDateStr);
  132 + handelEndDateAndPrice(num, new Date(dateStr));
124 133  
125   - var str = "" + mydate.getFullYear() + "-";
126   - str += month + "-";
127   - str += data ;
128   - return str;
129 134 }
130   - function showprevtime(){
131   - var mydate = new Date();
132   - var month = mydate.getMonth()+1;
133   - var data = mydate.getDate()-1;
134   - if(data<10){
135   - data='0'+data;
136   - };
137   - if(month<10){
138   - month = '0'+month;
139   - };
140 135  
141   - var str = "" + mydate.getFullYear() + "-";
142   - str += month + "-";
143   - str += data ;
144   - return str;
  136 + //设置当前时间默认值
  137 + function setPickerDefaultValue() {
  138 + var date = new Date();
  139 + var year = date.getFullYear() + '年';
  140 + var month = date.getMonth() + 2 + '月';
  141 + if (month.length < 3) {
  142 + month = '0' + month;
  143 + }
  144 +
  145 + var defaultDate = [year, month, '01日'];
  146 + $("#date").picker("setValue", defaultDate);
  147 +
145 148 }
146   - $("#date").calendar({
147   - //最小时间为当前时间
148   - minDate:showprevtime(),
149   - value:[shownowtime()],
150 149  
151   - onChange: function (p, values, displayValues) {
152   - var num = $('#numder').val();
153   - var val1 = values[0].slice(0,4);
154   - var val2 = values[0].slice(4);
155   - console.log(Number(val1) +Number(num));
156   - var endDate = Number(val1) +Number(num);
157   - $('#date1').val(endDate+val2);
  150 + //初始化时间picker选择器的参数
  151 + function initPickerParam() {
  152 + var onClose = pickerOnClose;
  153 + var years = [];
  154 + var months = ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月'];
158 155  
  156 + var date = new Date();
  157 + var thisYear = date.getFullYear();
  158 + for (var i = 0; i < 10; i++) {
  159 + years[i] = thisYear + i + '年';
159 160 }
160   - });
  161 + var param = {};
  162 + param.onClose = onClose;
  163 + param.title = '请选择开始时间';
  164 + var cols = [{"textAlign": 'center', values: years}, {
  165 + "textAlign": 'center',
  166 + values: months
  167 + }, {"textAlign": 'center', values: ['01日']}]
  168 + param.cols = cols;
  169 +
  170 + return param;
  171 + }
  172 +
  173 + //选择日期
  174 + $("#date").picker(
  175 + initPickerParam()
  176 + );
  177 +
  178 +
  179 + //根据数量,开始时间计算 结束时间,总价
  180 + function handelEndDateAndPrice(num, startDate) {
  181 + if(typeof num== 'string'){
  182 + num = parseInt(num);
  183 + }
  184 + //设置数量
  185 + $("#numder").val(num);
  186 + startDate.setDate(0)//设置为0,意思为取当前月最后一天
  187 + var year = startDate.getFullYear()+num;
  188 + var month = startDate.getMonth()+1+'';
  189 + var day = startDate.getDate() + '';
  190 + if (month.length == 1) {
  191 + //只有一位,需要补0
  192 + month = '0' + month;
  193 + }
  194 +
  195 + if (day.length == 1) {
  196 + //只有一位,需要补0
  197 + day = '0' + day;
  198 + }
  199 + var endDateStr = year + '年 ' + month + '月 ' + day + '日';
  200 + //设置失效日期
  201 + $('#date1').val(endDateStr);
  202 + //设置总价
  203 + var price = $("#cardAmount").val();
  204 + $("#totle_money").html(num * price);
  205 + }
  206 +
  207 +
  208 + //将年月日的日期 格式化成 用 - 间隔的
  209 + function formatDateStr(dateStr) {
  210 + return dateStr.replace('年', '-').replace('月', '-').replace('日', '').replace(' ', '').replace(' ', '');
  211 + }
  212 +
161 213  
162 214 //添加数量
163   - $("#add_btn").click(function(){
164   - var cardAmount = $('#cardAmount').val();//年卡单价
165   - var _numb = $("#numder").val();
166   - _numb++;
167   - if(_numb>=6){
168   - return false;
  215 + $("#add_btn").click(function () {
  216 +
  217 + var startDateStr = $("#date").val();
  218 + if (null == startDateStr || startDateStr.length < 1) {
  219 + $.toptip('请先选择开始时间', 2000, 'warning');
  220 + return;
169 221 }
170   - $("#numder").val(_numb);
171   - $("#totle_money").text(_numb*cardAmount);
172   - var dataVal = $('#date').val();
173   - if(dataVal){
174   - var val1 = dataVal.slice(0,4);
175   - var val2 = dataVal.slice(4);
176   - console.log(Number(val1) +Number(_numb));
177   - var endDate = Number(val1) +Number(_numb);
178   - $('#date1').val(endDate+val2);
  222 + var num = $("#numder").val();
  223 + num++;
  224 + if (num > 1 && num < 6) {
  225 + var startDate = new Date(formatDateStr(startDateStr));
  226 + handelEndDateAndPrice(num, startDate);
  227 + } else {
  228 + $.toptip('最多购买5年', 2000, 'warning');
179 229 }
180 230  
181 231 });
182 232 //减去数量
183   - $("#reduce_btn").click(function(){
184   - var cardAmount = $('#cardAmount').val();//年卡单价
185   - var _numb = $("#numder").val();
186   - if(_numb<=1){
187   - return false;
  233 + $("#reduce_btn").click(function () {
  234 +
  235 + var startDateStr = $("#date").val();
  236 + if (null == startDateStr || startDateStr.length < 1) {
  237 + $.toptip('请先选择开始时间', 2000, 'warning');
  238 + return;
188 239 }
189   - _numb--;
190   - $("#numder").val(_numb)
191   - $("#totle_money").text(_numb*cardAmount);
192   - var dataVal = $('#date').val();
193   - if(dataVal){
194   - var val1 = dataVal.slice(0,4);
195   - var val2 = dataVal.slice(4);
196   - console.log(Number(val1) +Number(_numb));
197   - var endDate = Number(val1) +Number(_numb);
198   - $('#date1').val(endDate+val2);
  240 +
  241 + var num = $("#numder").val();
  242 + num--;
  243 + if (num > 0) {
  244 + var startDate = new Date(formatDateStr($("#date").val()));
  245 + handelEndDateAndPrice(num, startDate);
  246 + } else {
  247 + $.toptip('最少购买一年', 2000, 'warning');
199 248 }
  249 +
200 250 });
  251 +
201 252 //立即支付
202 253 $('#pay_btn').on('click',function () {
203 254 var carNum = $('#license_number').val();
204 255 var parkLotCardId = $('#parkLotCardId').val();
205 256 var buyNum = $('#numder').val();
206   - var startDate = $('#date').val();
207   - var endDate = $('#date1').val();
  257 + var startDate = formatDateStr($('#date').val());
  258 + var endDate = formatDateStr($('#date1').val());
208 259 var totleMoney =$('#totle_money').text();
209 260 if(carNum == '' || carNum ==null || carNum == undefined){
210 261 $.toptip('亲!请输入车牌号', 3000, 'warning'); //设置显示时间
... ...