主体功能完成,完成时间条以及提交订单页面信息

This commit is contained in:
iFish 2014-07-02 18:43:28 +08:00
parent 47dbc01d9b
commit da45512da3
16 changed files with 320 additions and 187 deletions

View File

@ -163,6 +163,7 @@
<Content Include="images\logo12306.png" />
<Content Include="images\page-bg.png" />
<Content Include="images\search-box-bg.png" />
<Content Include="images\ticket-submit-info-arrow-w.png" />
<Content Include="images\ticket-submit-info-arrow.png" />
<Content Include="images\ticket-submit-qr.png" />
<Content Include="index.html" />
@ -197,6 +198,7 @@
<Content Include="js\ui\ui-trainlist.js" />
<Content Include="js\ui\widget.js" />
<Content Include="js\ui\widget_cityselector.js" />
<Content Include="js\ui\widget_datebar.js" />
<Content Include="js\ui\widget_datedropdown.js" />
<Content Include="js\ui\widget_message_popup.js" />
<Content Include="js\ui\widget_verifycode.js" />

View File

@ -87,7 +87,7 @@
}
.date-bar-wrap .date-bar .date-bar-list li {
width: 12.5%;
width: 14.28%;
height: 100%;
float: left;
border-top: 1px solid #dfdfdf;
@ -97,6 +97,11 @@
cursor: pointer;
box-sizing: border-box;
}
.date-bar-wrap .date-bar .date-bar-list li.disabled {
background-color: #cccccc;
color: #aaaaaa;
cursor: not-allowed;
}
.date-bar-wrap .date-bar .date-bar-list li h5 {
font-weight: bold;
@ -119,6 +124,13 @@
border-bottom: 1px solid #f78b20;
}
.date-bar-wrap .date-bar .date-bar-list li.disabled:hover {
color: #aaaaaa;
background: #cccccc;
border-left-color: #b8b7b7;
border-top-color: #dfdfdf;
}
.date-bar-wrap .date-bar .date-bar-list li.selected:after,
.date-bar-wrap .date-bar .date-bar-list li.selected:before {
content: '';

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 270 B

View File

@ -88,8 +88,8 @@
</li>
<li>
<div class="identity fl">
<label><input type="radio" name="ticket_type" data-profile-key="studentTicket" value="0" checked="checked" id="ticket_type_common" />普通</label>
<label><input type="radio" name="ticket_type" data-profile-key="studentTicket" value="1" id="ticket_type_stu" />学生</label>
<label><input type="radio" name="ticket_type" value="0" checked="checked" id="ticket_type_common" />普通</label>
<label><input type="radio" name="ticket_type" value="1" id="ticket_type_stu" />学生</label>
</div>
</li>
<li>
@ -217,40 +217,15 @@
<span class="arrow-left"></span>
</div>
<div class="date-bar fl">
<ul class="date-bar-list">
<li>
<h5>03-12</h5>
<span>星期一</span>
<script type="text/x-dot-template" id="datebar-template">
{{~it:d:i}}
<li data-date="{{=d.datecode}}" class="{{=d.selected?'selected':''}}{{=d.disabled?' disabled':''}}">
<h5>{{=d.date}}</h5>
<span>{{=d.name}}</span>
</li>
<li>
<h5>03-13</h5>
<span>星期二</span>
</li>
<li class="selected">
<h5>今天(03-14)</h5>
<span>星期三</span>
</li>
<li>
<h5>03-15</h5>
<span>星期四</span>
</li>
<li>
<h5>03-16</h5>
<span>星期五</span>
</li>
<li>
<h5>03-17</h5>
<span>星期六</span>
</li>
<li>
<h5>03-18</h5>
<span>星期日</span>
</li>
<li>
<h5>03-19</h5>
<span>星期一</span>
</li>
</ul>
{{~}}
</script>
<ul class="date-bar-list"></ul>
</div>
<div class="date-bar-next fl">
<span class="arrow-right"></span>
@ -284,7 +259,7 @@
<p>历时{{=t.elapsedTime.total.replace(':',"小时")}}分</p>
</td>
<td class="train-city">
<p class="{{=t.from.endpoint?"start":""}}">{{=t.from.name}}</p>
<p class="{{=t.from.endpoint?" start":""}}">{{=t.from.name}}</p>
<p class="{{=t.to.endpoint?" end":""}}">{{=t.to.name}}</p>
</td>
<td class="train-seats">
@ -395,33 +370,29 @@
</section>
<section id="ticket-submit-container" class="float-dialog" style="">
<div id="ticket-info">
<div class="time-info">
2014年4月14日 15:42开
<div class="banner">
<div class="time-info">
</div>
<div class="station-info"><span class="from-station"></span><span class="to-station"></span></div>
<div class="train-no">
</div>
</div>
<div class="coach-info">
10车22号下铺
</div>
<div class="from-station">
南 昌
</div>
<div class="to-station">
合 肥
</div>
<div class="train-no">
T191次
</div>
<div class="price-info">
¥227.00 元
</div>
<div class="ticket-note">
请尽快提交订单并支付,<br />
车票不等人。。。
</div>
<div class="train-type">
新空调快车
</div>
<div class="qr-code"></div>
<div class="banner"></div>
<script id="ticket-passenger-template" type="text/x-dot-template">
{{~it:p:i}}
<tr>
<td>{{!p.passenger_name}}</td>
<td>{{=ext.param.passengerTypes[p.passenger_type]}}票</td>
<td>{{=ext.param.toSeatTypeName(p.seat)}}</td>
</tr>
{{~}}
</script>
<table class="ticket-passenger">
<tr>
<th>乘车人</th>
<th>票种</th>
<th>席别</th>
</tr>
</table>
</div>
<div id="ticket-submit-rings">
<span></span>

View File

@ -92,51 +92,56 @@
var notInstallExtension = function () {
seajs.use("ui/noextension");
};
var entryPoint = function () {
if (!window.targetExtensionId) {
notInstallExtension();
} else {
//确保内容脚本启动
var start = $.Deferred();
start.done(function () {
chrome.runtime.sendMessage(window.targetExtensionId, { action: "getStorage" }, function (m) {
window.storage = m.detail;
seajs.use("ui/" + pagename);
});
});
start.fail(function () {
notInstallExtension();
});
if (document.body.dataset["mobileSupportInitialized"]) {
start.resolve();
} else {
var timer = setTimeout(function () {
start.reject();
}, 3000);
document.addEventListener("mobileSupportInitialized", function () {
window.clearTimeout(timer);
start.resolve();
});
}
}
};
var targetExtension = [
"bpbefagpafkfgoihbmcgeileodldkpnf",
"gkbheeokbgmmnbjhhlphckobccejghjn"
];
window.targetExtensionId = null;
var nextTest = function () {
if (targetExtension.length) {
var id = targetExtension.pop();
chrome.runtime.sendMessage(id, { action: "getStorage" }, function (m) {
if (m) {
window.targetExtensionId = id;
window.storage = m.detail;
entryPoint();
} else {
nextTest();
}
});
} else entryPoint();
};
if (typeof (chrome) !== 'undefined') {
for (var id in targetExtension) {
var port = chrome.runtime.connect(targetExtension[id]);
try {
port.postMessage("");
port.disconnect();
window.targetExtensionId = targetExtension[id];
break;
} catch (e) {
}
}
}
if (!window.targetExtensionId) {
notInstallExtension();
} else {
//确保内容脚本启动
var start = $.Deferred();
start.done(function () {
chrome.runtime.sendMessage(window.targetExtensionId, { action: "getStorage" }, function (m) {
window.storage = m.detail;
seajs.use("ui/" + pagename);
});
});
start.fail(function () {
notInstallExtension();
});
if (document.body.dataset["mobileSupportInitialized"]) {
start.resolve();
} else {
var timer = setTimeout(function () {
start.reject();
}, 3000);
document.addEventListener("mobileSupportInitialized", function () {
window.clearTimeout(timer);
start.resolve();
});
}
}
nextTest();
} else entryPoint();
})(window, document);

View File

@ -6,7 +6,7 @@
"1": "成人",
"2": "儿童",
"3": "学生",
"4": "残人、伤残人民警察"
"4": "残军"
};
exports.tagOtnMap = {
"9": "SWZ",

View File

@ -16,7 +16,7 @@
};
exports.prepareOrder = function (train, profile) {
var purposeCode = profile.studentTicket=="1" ? "0X00" : "ADULT";
var purposeCode = profile.studentTicket ? "0X00" : "ADULT";
var data = "secretStr" + "=" + train.secureStr + "&train_date=" + train.date + "&back_train_date" + "=" + (profile.resign ? profile.resignDate : train.date) + "&tour_flag" + "=" + (profile.resign ? "gc" : "dc") + "&" +
"purpose_codes" + "=" + purposeCode + "&" +
"query_from_station_name" + "=" + profile.fromText + "&" +
@ -33,10 +33,6 @@
var token = /var\s*globalRepeatSubmitToken\s*=\s*['"]([^'"]+)["']/i.exec(html) && RegExp.$1;
if (token) {
submitToken = token;
console.log(token, submitData.leftTicketStr, submitData.key_check_isChange, submitData.train_location);
def.resolve({ token: token });
} else {
submitToken = null;
@ -123,7 +119,7 @@
fromStationTelecode: train.from.code,
toStationTelecode: train.to.code,
leftTicket: submitData["leftTicketStr"],
purpose_codes: profile.studentTicket === "1" ? "0X00" : "00",
purpose_codes: profile.studentTicket ? "0X00" : "00",
_json_att: ajax.userAtts,
REPEAT_SUBMIT_TOKEN: submitToken
};
@ -153,7 +149,7 @@
passengerTicketStr: pas1,
oldPassengerStr: pas2,
randCode: randcode,
purpose_codes: profile.studentTicket === "1" ? "0X00" : "00",
purpose_codes: profile.studentTicket ? "0X00" : "00",
key_check_isChange: submitData["key_check_isChange"],
leftTicketStr: submitData["leftTicketStr"],
train_location: submitData["train_location"],

View File

@ -142,7 +142,7 @@
"leftTicketDTO.train_date": date,
"leftTicketDTO.from_station": from,
"leftTicketDTO.to_station": to,
"purpose_codes": student == "1" ? "0X00" : "ADULT"
"purpose_codes": student ? "0X00" : "ADULT"
}, "json", function () {
var data = transferData(this.model);
def.resolveWith(data);

View File

@ -63,16 +63,16 @@
return;
}
if (user.options.showMoreOpt !== undefined) {
var div = $("div.options-param");
if(user.options.showMoreOpt ^ div.is(":visible"))
if (user.options.showMoreOpt ^ div.is(":visible"))
!user.options.showMoreOpt ? (div.hide(), $(".search-more-option").html("显示更多选项")) : (div.show(), $(".search-more-option").html("隐藏更多选项"));
}
var p = user.currentProfile;
$("#from_city").val(p.fromText).attr("data-code", p.fromCode);
$("#to_city").val(p.toText).attr("data-code", p.toCode);
document.querySelector("input[name='ticket_type'][value='" + (p.studentTicket ? "1" : "0") + "']").checked = true;
$("input[data-profile-key],select[data-profile-key]").each(function () {
var type = this.type;
@ -84,7 +84,7 @@
}
if (type === "checkbox")
this.checked = svalue || false;
this.checked = svalue == value;
else if (type === "radio") {
this.checked = svalue == value;
} else {
@ -124,6 +124,10 @@
p.toCode = this.dataset.code;
sessMgr.save();
});
$("input[name='ticket_type']").click(function() {
sessMgr.currentProfile.studentTicket = this.value === "1";
sessMgr.save();
});
$(document).on("change", "input[data-profile-key],select[data-profile-key]", function () {
var u = sessMgr.current;
var p = u.currentProfile;
@ -143,14 +147,14 @@
p[key] = checked;
}
} else if (type === "checkbox") {
p[key] = this.checked;
p[key] = this.checked ? this.value : null;
} else {
p[key] = $(this).val();
}
sessMgr.save();
});
$("#btnQuery").click(function () {
ui_result.load($("#from_city").attr("data-code"), $("#to_city").attr("data-code"), $("#dep_date").val(), sessMgr.currentProfile.studentTicket, true);
ui_result.load();
});
@ -160,7 +164,7 @@
})();
//系统级别错误捕捉
(function() {
(function () {
document.addEventListener("networkOrCertificationError", function () {
//TODO UI
alert("无法访问12306可能是网络错误或证书错误请直接访问12306试试如果正常的话请回来刷新本页");

View File

@ -30,7 +30,7 @@
pTrain = train;
pSeat = seat;
pProfile = profile;
pStu = profile.studentTicket || "0";
pStu = profile.studentTicket;
pPassengers = passengers;
}
if (!pTrain)

View File

@ -41,7 +41,7 @@
list.removeClass("loading");
list.html(listTpl(_.filter(paslist, function (p) {
return stu === "0" || p.passenger_type === '3';
return !stu || p.passenger_type === '3';
}), extTplData));
});
};

View File

@ -5,10 +5,15 @@
var mp = require("./widget_message_popup.js");
var op = require("../otn/orderprocess.js");
var vc = require("./widget_verifycode.js");
var param = require("../data.js");
//提交参数
var pTrain, pStu, pPassengers, pProfile;
var submitDef;
//界面
var ticketPassengerContainer = $("table.ticket-passenger");
var ticketPassengerTpl = $("#ticket-passenger-template").doT();
var SubmitOrderUi = function () {
var that = this;
EventObject.apply(this);
@ -35,6 +40,17 @@
pProfile = profile;
pStu = profile.studentTicket;
pPassengers = passengers;
//显示乘客列表
ticketPassengerContainer.find("tr:gt(0)").remove().end().append(ticketPassengerTpl(pPassengers, {
param: param
}));
//车次信息
var ticketInfo = $("#ticket-info");
ticketInfo.find(".time-info").html(pTrain.date.replace(/(\d{4})-(\d{2})-(\d{2})/, "$1年$2月$3日") + " " + pTrain.from.time + "发车");
ticketInfo.find(".from-station").html(pTrain.from.name);
ticketInfo.find(".to-station").html(pTrain.to.name);
ticketInfo.find(".train-no").html(pTrain.code + "次");
}
if (!pTrain)
return;

View File

@ -7,6 +7,7 @@
var EventObject = require("../platform/EventObject.js");
var mp = require("./widget_message_popup.js");
var tsquery = require("./ui-train-stop.js");
var datebar = require("./widget_datebar.js");
var TrainListObj = function () {
var __ = this;
@ -19,7 +20,17 @@
param: param
}));
};
this.load = function (from, to, date, stu, ui) {
this.load = function (ui, from, to, date, stu) {
ui = ui === undefined ? true : ui;
from = from || $("#from_city").attr("data-code");
to = to || $("#to_city").attr("data-code");
date = date || $("#dep_date").val();
stu = stu || sessMgr.currentProfile.studentTicket;
var extArg = Array.prototype.slice.call(arguments);
__.fireEvent("onload", extArg);
datebar.go(date, date);
var tip = null;
if (ui) {
tip = new mp.MessagePopup("loading", "正在查询中...");
@ -34,14 +45,24 @@
}
queryResult = this;
__.renderResultList();
__.fireEvent("onloadsuccess", extArg);
}).fail(function () {
tip.setState("error", "查票失败...");
tip.delayClose();
__.fireEvent("onloadfailed", extArg);
});
};
this.init = function () {
tsquery.init();
datebar.init();
datebar.on("requireChangeDate", function(e, d) {
//请求切换时间
$("#dep_date").val(d);
__.load();
});
};
//监听订票请求

View File

@ -0,0 +1,101 @@
define(function (require, exports, module) {
var ev = require("../platform/EventObject.js");
var tpl = $("#datebar-template").doT();
var container = $("ul.date-bar-list");
var toDate = function (date) {
return date instanceof Date ? date : new Date(Date.parse(date));
};
var getFirstDayOfWeek = function (date) {
date = toDate(date);
var day = date.getDay();
if (day === 1)
return date;
var offset = 1 - day;
return addDays(date, offset);
};
var addDays = function (date, offset) {
return new Date(date.getFullYear(), date.getMonth(), date.getDate() + offset);
};
var formatDate = function (date) {
var m = date.getMonth() + 1;
var d = date.getDate();
return (m < 10 ? "0" : "") + m + "月" + (d < 10 ? "0" : "") + d + "日";
};
var getDateString = function (date) {
return date.getFullYear() + "-" + (date.getMonth() < 9 ? "0" : "") + (date.getMonth() + 1) + "-" + (date.getDate() < 10 ? "0" : "") + date.getDate();
};
var WidgetDateBarUi = function () {
var that = this;
var today = addDays(new Date(), 0);
var date = null;
var maxdays = addDays(today, 30);
var currentHightDate = today;
ev.apply(this);
this.init = function () {
$("div.date-bar-prev").click(that.goPrev);
$("div.date-bar-next").click(that.goNext);
$(document).on("click", "ul.date-bar-list li:not(.disabled):not(.selected)", function() {
that.fireEvent("requireChangeDate", this.dataset.date);
});
that.go(today);
};
this.go = function (goDate, selectedDate) {
goDate = toDate(goDate);
if (selectedDate)
currentHightDate = toDate(selectedDate);
var d = getFirstDayOfWeek(goDate);
if (!date || d.getTime() !== date.getTime()) {
date = d;
that.render();
}
container.find("li:not(.disabled)").removeClass("selected").filter("[data-date='" + getDateString(currentHightDate) + "']").addClass("selected");
};
this.goNext = function () {
that.go(addDays(date, 7));
};
this.goPrev = function () {
that.go(addDays(date, -7));
};
this.render = function () {
var data = [];
var namestr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
for (var i = 0; i < 7; i++) {
var d = addDays(date, i);
data.push({
_date: d,
name: namestr[d.getDay()],
date: formatDate(d),
disabled: d < today || d > maxdays,
selected: d.getTime() == today.getTime(),
datecode: getDateString(d)
});
}
container.empty().html(tpl(data));
};
Object.defineProperty(this, "current", {
get: function () {
return date;
},
set: function (value) {
that.go(getFirstDayOfWeek(value));
}
});
return this;
};
WidgetDateBarUi.prototype = Object.create(ev);
WidgetDateBarUi.constructor = ev;
return new WidgetDateBarUi();
});

View File

@ -9,7 +9,7 @@
return now;
};
var getDateString = function (date) {
return date.getFullYear() + "-" + (date.getMonth() < 9 ? "0" : "") + (date.getMonth() + 1) + "-" + (date.getDate() < 9 ? "0" : "") + date.getDate();
return date.getFullYear() + "-" + (date.getMonth() < 9 ? "0" : "") + (date.getMonth() + 1) + "-" + (date.getDate() < 10 ? "0" : "") + date.getDate();
};
var renderCalendar = function (container, monthStart, minDate, maxDate) {