选项配置功能完成。
This commit is contained in:
parent
dcf94d3fb1
commit
6ba9d36d7e
@ -190,6 +190,7 @@
|
||||
<Content Include="js\modules\seajs\sea.js" />
|
||||
<Content Include="js\modules\underscore\underscore.js" />
|
||||
<Content Include="js\ui\noextension.js" />
|
||||
<Content Include="js\ui\ui-autosubmitform.js" />
|
||||
<Content Include="js\ui\ui-login.js" />
|
||||
<Content Include="js\ui\ui-order-submit-process.js" />
|
||||
<Content Include="js\ui\ui-passenger-selection.js" />
|
||||
|
||||
@ -61,6 +61,8 @@
|
||||
background-color: #f9f8f3;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
margin-right: 5px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
#city_selector .recent-city-list dd:hover {
|
||||
@ -68,10 +70,6 @@
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
#city_selector .recent-city-list dd + dd {
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
#city_selector .city-list-container {
|
||||
margin: 0 auto 50px auto;
|
||||
overflow: hidden;
|
||||
|
||||
@ -1,75 +1,139 @@
|
||||
/*其他筛选条件*/
|
||||
.options-param {
|
||||
padding: 0 10px;
|
||||
border: 1px solid #e1e1e1;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.options-param dt {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.options-param dd {
|
||||
width: 825px;
|
||||
}
|
||||
|
||||
.options-param .split {
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
border-bottom: 1px dotted #d6d6d6;
|
||||
}
|
||||
|
||||
.options-param dt {
|
||||
margin-left: 36px;
|
||||
}
|
||||
|
||||
.options-param .options-input {
|
||||
width: 156px;
|
||||
height: 36px;
|
||||
padding: 0 30px 0 10px;
|
||||
-webkit-appearance: none;
|
||||
border: none;
|
||||
background: url(../../images/css-sprite.png) no-repeat transparent;
|
||||
background-position: -24px -32px;
|
||||
}
|
||||
|
||||
.options-param .options-input:focus,
|
||||
.options-param .options-input.focused {
|
||||
background-position: -227px -32px;
|
||||
}
|
||||
|
||||
.options-param .optional-block {
|
||||
background: #fff;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
border: 1px solid #d3d3d3;
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: 0 34px 0 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.options-param .optional-block:hover {
|
||||
background: #f9f9f9;
|
||||
cursor: pointer;
|
||||
}
|
||||
.options-param .optional-block .close {
|
||||
font-size: 13px;
|
||||
font-family: arial;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: 10px;
|
||||
cursor: pointer;
|
||||
padding: 0 4px;
|
||||
}
|
||||
.options-param .optional-block .close:hover {
|
||||
color: #ff6a00;
|
||||
}
|
||||
.options-param .options-seat-type {
|
||||
line-height: 34px;
|
||||
}
|
||||
/*其他筛选条件*/
|
||||
.options-param {
|
||||
padding: 0 10px;
|
||||
border: 1px solid #e1e1e1;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.options-param dt {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.options-param dd {
|
||||
}
|
||||
|
||||
.options-param .split {
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
border-bottom: 1px dotted #d6d6d6;
|
||||
}
|
||||
|
||||
.options-param dt {
|
||||
margin-left: 36px;
|
||||
}
|
||||
|
||||
.options-param .options-input {
|
||||
width: 156px;
|
||||
height: 36px;
|
||||
padding: 0 30px 0 10px;
|
||||
-webkit-appearance: none;
|
||||
border: none;
|
||||
background: url(../../images/css-sprite.png) no-repeat transparent;
|
||||
background-position: -24px -32px;
|
||||
}
|
||||
|
||||
.options-param .options-input:focus,
|
||||
.options-param .options-input.focused {
|
||||
background-position: -227px -32px;
|
||||
}
|
||||
|
||||
.options-param .optional-block {
|
||||
background: #fff;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
border: 1px solid #d3d3d3;
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: 0 34px 0 14px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.options-param .optional-block:hover {
|
||||
background: #f9f9f9;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.options-param .optional-block .close {
|
||||
font-size: 13px;
|
||||
font-family: arial;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: 10px;
|
||||
cursor: pointer;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.options-param .optional-block .close:hover {
|
||||
color: #ff6a00;
|
||||
}
|
||||
|
||||
.options-param .options-seat-type {
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
.options-param .options-seat-type ul {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
background-color: #fff;
|
||||
width: 300px;
|
||||
border-radius: 0 5px 5px 5px;
|
||||
border: 1px solid #ccc;
|
||||
box-shadow: 5px 5px 10px rgba(150,150,150,0.3);
|
||||
left: 107px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.options-param .options-seat-type ul li {
|
||||
float: left;
|
||||
width: 100px;
|
||||
}
|
||||
.options-param .options-seat-type ul li.recommand {
|
||||
font-weight: bold;
|
||||
color: #ff6a00;
|
||||
}
|
||||
|
||||
.options-param .options-train-selectorwarp {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.options-param .options-train-selectorwarp div {
|
||||
border: 1px solid #d1d1d1;
|
||||
position: absolute;
|
||||
left: 65px;
|
||||
top: 35px;
|
||||
z-index: 10;
|
||||
background: #ffffff;
|
||||
border-radius: 0 5px 5px 5px;
|
||||
box-shadow: 5px 5px 10px rgba(150, 150, 150, 0.5);
|
||||
color: #7a7a7a;
|
||||
display: none;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
overflow-x: visible;
|
||||
width: 520px;
|
||||
}
|
||||
|
||||
.options-param .options-train-selectorwarp table {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.options-param .options-train-selectorwarp table th {
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.options-param .options-train-selectorwarp table tr td {
|
||||
line-height: 40px;
|
||||
border-top: 1px solid #d1d1d1;
|
||||
padding: 0 10px 0 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.options-param .options-train-selectorwarp table tr:hover td {
|
||||
background-color: #fff0d9;
|
||||
}
|
||||
|
||||
@ -1,177 +1,183 @@
|
||||
/*联系人搜索*/
|
||||
|
||||
.passenger-selector-wrap {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.passenger-selector-wrap.hover .passenger-selector {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.passenger-selector {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
left: 0;
|
||||
top: 35px;
|
||||
box-shadow: 3px 3px 10px rgba(110, 110, 110, 0.5);
|
||||
border-radius: 0 5px 5px 5px;
|
||||
border: 1px solid #c7c7c7;
|
||||
background-color: #ffffff;
|
||||
padding: 12px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.passenger-selector:hover {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.passenger-selector .passenger-search {
|
||||
/*
|
||||
TODO 这里要搜索何用？
|
||||
*/
|
||||
display: none;
|
||||
}
|
||||
|
||||
.passenger-selector .passenger-selector-add {
|
||||
color: #616161;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
background: linear-gradient(180deg, #f4f4f4, #e9e8e9);
|
||||
border: 1px solid #d1d1d1;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.passenger-selector .passenger-selector-add:hover {
|
||||
background: linear-gradient(180deg, #fefefe, #f3f3f3);
|
||||
border: 1px solid #e1e1e1;
|
||||
}
|
||||
|
||||
.passenger-selector .passenger-selector-add:active {
|
||||
background: linear-gradient(180deg, #e9e8e9, #f4f4f4);
|
||||
border: 1px solid #d1d1d1;
|
||||
}
|
||||
|
||||
.passenger-selector .passenger-selector-add:before {
|
||||
left: 7px;
|
||||
top: 7px;
|
||||
position: relative;
|
||||
color: #616161;
|
||||
}
|
||||
|
||||
.passenger-selector .passenger-search div.fr:before {
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
top: 6px;
|
||||
color: #6c6f83;
|
||||
}
|
||||
|
||||
.passenger-selector .passenger-search-key {
|
||||
line-height: 16px;
|
||||
padding: 4px 24px 4px 6px;
|
||||
border: 1px solid #c7c7c7;
|
||||
margin: 0;
|
||||
width: 180px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.passenger-selector ul {
|
||||
width: 300px;
|
||||
margin-top: 12px;
|
||||
border-left: 1px solid #e1e1e1;
|
||||
border-top: 1px solid #e1e1e1;
|
||||
}
|
||||
|
||||
.passenger-selector ul li {
|
||||
width: 300px;
|
||||
float: left;
|
||||
width: 98px;
|
||||
line-height: 35px;
|
||||
border-right: 1px solid #e1e1e1;
|
||||
border-bottom: 1px solid #e1e1e1;
|
||||
text-align: center;
|
||||
color: #676767;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.passenger-selector ul li.selected {
|
||||
border-right-color: #ebd0b3;
|
||||
border-bottom-color: #ebd0b3;
|
||||
background-color: #fff5e6;
|
||||
color: #f2983a;
|
||||
}
|
||||
|
||||
#passenger-selector ul li.selected:after {
|
||||
border-top: 1px solid #ebd0b3;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 0;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.passenger-selector ul li.selected:before {
|
||||
border-left: 1px solid #ebd0b3;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -1px;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.passenger-selector ul li:hover {
|
||||
border-right-color: #e19b23;
|
||||
border-bottom-color: #e19b23;
|
||||
background: linear-gradient(to top, #f78c21, #fca818);
|
||||
color: #fef3ea;
|
||||
}
|
||||
|
||||
.passenger-selector ul li:hover:after {
|
||||
border-top: 1px solid #e19b23;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 0;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.passenger-selector ul li:hover:before {
|
||||
border-left: 1px solid #e19b23;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -1px;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.passenger-selector .passenger-pager {
|
||||
margin-top: 12px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.passenger-selector .passenger-pager button {
|
||||
line-height: 24px;
|
||||
background: linear-gradient(to top, #e6e6e6, #f9f9f9);
|
||||
color: #7d848d;
|
||||
border: 1px solid #bdbcbc;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.passenger-selector .passenger-pager button:hover {
|
||||
background: linear-gradient(to top, #efefef, #ffffff);
|
||||
}
|
||||
|
||||
.passenger-selector .passenger-pager button:disabled {
|
||||
border: 1px solid transparent;
|
||||
background: none transparent;
|
||||
color: #9da2a8;
|
||||
}
|
||||
/*联系人搜索*/
|
||||
|
||||
.passenger-selector-wrap {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
display: inline-block;
|
||||
}
|
||||
.passenger-selector-wrap section div.loading-indicator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.passenger-selector-wrap section.loading ul,
|
||||
.passenger-selector-wrap section.loading .passenger-pager {
|
||||
display: none;
|
||||
}
|
||||
.passenger-selector-wrap section.loading div.loading-indicator{
|
||||
display: block;
|
||||
}
|
||||
.passenger-selector {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
left: 0;
|
||||
top: 35px;
|
||||
box-shadow: 3px 3px 10px rgba(110, 110, 110, 0.5);
|
||||
border-radius: 0 5px 5px 5px;
|
||||
border: 1px solid #c7c7c7;
|
||||
background-color: #ffffff;
|
||||
padding: 12px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.passenger-selector:hover {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.passenger-selector .passenger-search {
|
||||
/*
|
||||
TODO 这里要搜索何用？
|
||||
*/
|
||||
display: none;
|
||||
}
|
||||
|
||||
.passenger-selector .passenger-selector-add {
|
||||
color: #616161;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
background: linear-gradient(180deg, #f4f4f4, #e9e8e9);
|
||||
border: 1px solid #d1d1d1;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.passenger-selector .passenger-selector-add:hover {
|
||||
background: linear-gradient(180deg, #fefefe, #f3f3f3);
|
||||
border: 1px solid #e1e1e1;
|
||||
}
|
||||
|
||||
.passenger-selector .passenger-selector-add:active {
|
||||
background: linear-gradient(180deg, #e9e8e9, #f4f4f4);
|
||||
border: 1px solid #d1d1d1;
|
||||
}
|
||||
|
||||
.passenger-selector .passenger-selector-add:before {
|
||||
left: 7px;
|
||||
top: 7px;
|
||||
position: relative;
|
||||
color: #616161;
|
||||
}
|
||||
|
||||
.passenger-selector .passenger-search div.fr:before {
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
top: 6px;
|
||||
color: #6c6f83;
|
||||
}
|
||||
|
||||
.passenger-selector .passenger-search-key {
|
||||
line-height: 16px;
|
||||
padding: 4px 24px 4px 6px;
|
||||
border: 1px solid #c7c7c7;
|
||||
margin: 0;
|
||||
width: 180px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.passenger-selector ul {
|
||||
width: 300px;
|
||||
margin-top: 12px;
|
||||
border-left: 1px solid #e1e1e1;
|
||||
border-top: 1px solid #e1e1e1;
|
||||
}
|
||||
|
||||
.passenger-selector ul li {
|
||||
width: 300px;
|
||||
float: left;
|
||||
width: 98px;
|
||||
line-height: 35px;
|
||||
border-right: 1px solid #e1e1e1;
|
||||
border-bottom: 1px solid #e1e1e1;
|
||||
text-align: center;
|
||||
color: #676767;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.passenger-selector ul li.selected {
|
||||
border-right-color: #ebd0b3;
|
||||
border-bottom-color: #ebd0b3;
|
||||
background-color: #fff5e6;
|
||||
color: #f2983a;
|
||||
}
|
||||
|
||||
#passenger-selector ul li.selected:after {
|
||||
border-top: 1px solid #ebd0b3;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 0;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.passenger-selector ul li.selected:before {
|
||||
border-left: 1px solid #ebd0b3;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -1px;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.passenger-selector ul li:hover {
|
||||
border-right-color: #e19b23;
|
||||
border-bottom-color: #e19b23;
|
||||
background: linear-gradient(to top, #f78c21, #fca818);
|
||||
color: #fef3ea;
|
||||
}
|
||||
|
||||
.passenger-selector ul li:hover:after {
|
||||
border-top: 1px solid #e19b23;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 0;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.passenger-selector ul li:hover:before {
|
||||
border-left: 1px solid #e19b23;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -1px;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.passenger-selector .passenger-pager {
|
||||
margin-top: 12px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.passenger-selector .passenger-pager button {
|
||||
line-height: 24px;
|
||||
background: linear-gradient(to top, #e6e6e6, #f9f9f9);
|
||||
color: #7d848d;
|
||||
border: 1px solid #bdbcbc;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.passenger-selector .passenger-pager button:hover {
|
||||
background: linear-gradient(to top, #efefef, #ffffff);
|
||||
}
|
||||
|
||||
.passenger-selector .passenger-pager button:disabled {
|
||||
border: 1px solid transparent;
|
||||
background: none transparent;
|
||||
color: #9da2a8;
|
||||
}
|
||||
|
||||
@ -104,30 +104,79 @@
|
||||
</div>
|
||||
<!-- 其他设置条件 -->
|
||||
<div class="options-param">
|
||||
<dl class="cl">
|
||||
<dl class="cl offset-parent">
|
||||
<dt>指定坐席：</dt>
|
||||
<dd class="options-seat-type">
|
||||
<label><input type="checkbox" /> 全部</label> <label><input type="checkbox" />高软</label><label><input type="checkbox" /> 软卧</label>
|
||||
<script type="text/x-dot-template"><ul>{{~it.order:seat:i}}<li data-code="{{=seat}}" class="{{=it.isRecommand(seat)?' recommand':''}} {{=it.isSelected(seat)?'recommand':''}}"><label><input type="checkbox" value="{{=seat}}" /> {{=it.getName(seat)}}</label></li>{{~}}</ul></script>
|
||||
<script type="text/x-dot-template">
|
||||
{{~it.order:seat:i}}
|
||||
<label><input type="checkbox" value="{{=seat}}" checked="checked"> {{=it.getName(seat)}}</label>{{~}}
|
||||
</script>
|
||||
<label><input type="text" class="options-input" id="travel-seat-select" placeholder="添加想要的席别" readonly="readonly" /></label>
|
||||
</dd>
|
||||
</dl>
|
||||
<dl class="cl">
|
||||
<dt>备选日期：</dt>
|
||||
<dd>
|
||||
<label><input type="text" class="options-input ui-date" placeholder="请选择备选日期" /></label>
|
||||
<!-- 循环列表 -->
|
||||
<span class="optional-block">10月1号<span class="close">x</span></span>
|
||||
<span class="optional-block">10月1号<span class="close">x</span></span>
|
||||
<span class="optional-block">10月1号<span class="close">x</span></span>
|
||||
<dd id="date_loop_editor">
|
||||
<label><input type="text" class="options-input ui-date" readonly="readonly" placeholder="请选择备选日期" /></label>
|
||||
<script type="text/x-dot-template">
|
||||
{{~it:d:i}}
|
||||
<span class="optional-block" data-date="{{=d}}">{{=d}}<span class="close">x</span></span>
|
||||
{{~}}
|
||||
</script>
|
||||
</dd>
|
||||
</dl>
|
||||
<dl class="cl">
|
||||
<dt>添加车次：</dt>
|
||||
<dd>
|
||||
<label><input type="text" class="options-input" placeholder="请添加车次" /></label>
|
||||
<!-- 循环列表 -->
|
||||
<span class="optional-block">T12<span class="close">x</span></span>
|
||||
<span class="optional-block">T2<span class="close">x</span></span>
|
||||
<span class="optional-block">T3<span class="close">x</span></span>
|
||||
<dd class="options-train-selectorwarp">
|
||||
<label><input type="text" class="options-input" placeholder="请选择或直接输入" /></label>
|
||||
<script type="text/x-dot-template">
|
||||
{{~it:t:i}}
|
||||
<tr data-id="{{=t.id}}">
|
||||
<td>{{=t.code}}</td>
|
||||
<td>{{=t.from.name}}</td>
|
||||
<td>{{=t.from.time}}</td>
|
||||
<td>{{=t.to.name}}</td>
|
||||
<td>{{=t.to.time}}</td>
|
||||
<td>{{=t.elapsedTime.total.replace(':',"小时")}}分</td>
|
||||
</tr>
|
||||
{{~}}
|
||||
</script>
|
||||
<script type="text/x-dot-template">
|
||||
{{~it:t:i}}
|
||||
<span class="optional-block" data-code="{{=t}}">{{=t}}<span class="close">x</span></span>
|
||||
{{~}}
|
||||
</script>
|
||||
<div>
|
||||
<table>
|
||||
<tr>
|
||||
<th>车次</th>
|
||||
<th>发站</th>
|
||||
<th>发时</th>
|
||||
<th>到站</th>
|
||||
<th>到时</th>
|
||||
<th>历时</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="6">
|
||||
<i class="fa fa-spin fa-spinner"></i>
|
||||
正在查询中，请稍等...
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="6">
|
||||
<i class="fa fa-times"></i>
|
||||
请先设置站点和日期信息，再重新查询。
|
||||
</td>
|
||||
<tr>
|
||||
<td colspan="6">
|
||||
<i class="fa fa-times"></i>
|
||||
车次查询失败，或没有查到任何车次。
|
||||
</td>
|
||||
</tr>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</dd>
|
||||
</dl>
|
||||
<dl class="cl offset-parent">
|
||||
@ -144,39 +193,35 @@
|
||||
<input type="text" id="passenger-selector-key" value="" placeholder="输入姓名/拼音/证件号搜索..." class="passenger-search-key" />
|
||||
</div>
|
||||
</div>
|
||||
<ul class="cl">
|
||||
<li>张三</li>
|
||||
<li>张三</li>
|
||||
<li>张三</li>
|
||||
<li class="selected">张三</li>
|
||||
<li>张三</li>
|
||||
<li>张三</li>
|
||||
<li>张三</li>
|
||||
<li>张三</li>
|
||||
<li>张三</li>
|
||||
<li>张三</li>
|
||||
<li>张三</li>
|
||||
<li>张三</li>
|
||||
</ul>
|
||||
<div class="loading-indicator">
|
||||
<i class="fa fa-spinner fa-spin"></i>
|
||||
联系人正在加载中...
|
||||
</div>
|
||||
<div class="empty-indicator">
|
||||
<i class="fa fa-question"></i>
|
||||
没有可选择的联系人。是否没有登录？
|
||||
</div>
|
||||
<script type="text/x-dot-template">
|
||||
{{~it:p:i}}
|
||||
<li data-id="{{!p.key}}" class="{{=ext.isSelected(p)?'selected':''}}">
|
||||
{{!p.passenger_name}}
|
||||
{{=p.passenger_type=="2"?"(儿童)":p.passenger_type=="3"?"(学生)":p.passenger_type=="4"?"(残军)":""}}
|
||||
</li>
|
||||
{{~}}
|
||||
|
||||
</script>
|
||||
<ul class="cl"></ul>
|
||||
<div class="passenger-pager">
|
||||
<button class="passenger-pager-prev" disabled="disabled">上一页</button>
|
||||
<button class="passenger-pager-next">下一页</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- 循环列表 -->
|
||||
<span class="optional-block">木鱼<span class="close">x</span></span>
|
||||
<span class="optional-block">木鱼<span class="close">x</span></span>
|
||||
<span class="optional-block">木鱼<span class="close">x</span></span>
|
||||
<span class="optional-block">木鱼<span class="close">x</span></span>
|
||||
<span class="optional-block">木鱼<span class="close">x</span></span>
|
||||
<span class="optional-block">木鱼<span class="close">x</span></span>
|
||||
<span class="optional-block">木鱼<span class="close">x</span></span>
|
||||
<span class="optional-block">木鱼<span class="close">x</span></span>
|
||||
<span class="optional-block">木鱼<span class="close">x</span></span>
|
||||
<span class="optional-block">木鱼<span class="close">x</span></span>
|
||||
<span class="optional-block">木鱼<span class="close">x</span></span>
|
||||
<span class="optional-block">木鱼<span class="close">x</span></span>
|
||||
<script type="text/x-dot-template">
|
||||
{{~it:p:i}}
|
||||
<span class="optional-block" data-id="{{!p.key}}">{{!p.passenger_name}}{{=p.passenger_type=="2"?"(儿童)":p.passenger_type=="3"?"(学生)":p.passenger_type=="4"?"(残军)":""}}<span class="close">×</span></span>
|
||||
{{~}}
|
||||
</script>
|
||||
</dd>
|
||||
</dl>
|
||||
<div class="split"></div>
|
||||
@ -272,18 +317,18 @@
|
||||
</a>
|
||||
{{~}}
|
||||
{{?t.available==0||t.available==-1}}
|
||||
{{?t.selltime}}
|
||||
<span class="train-notontime">{{=ext.parser.formatSellDate(t.selltime)}} 起售</span>
|
||||
{{??}}
|
||||
<span class="train-notsell">本车次票已售完</span>
|
||||
{{?}}
|
||||
{{?t.selltime}}
|
||||
<span class="train-notontime">{{=ext.parser.formatSellDate(t.selltime)}} 起售</span>
|
||||
{{??}}
|
||||
<span class="train-notsell">本车次票已售完</span>
|
||||
{{?}}
|
||||
{{?? t.available==-2}}
|
||||
<span class="train-notselect">本车次不在您的选择列表中</span>
|
||||
<span class="train-notselect">本车次不在您的选择列表中</span>
|
||||
{{?}}
|
||||
</td>
|
||||
</span>
|
||||
{{~}}
|
||||
{{?!it.original}}
|
||||
</span>
|
||||
{{~}}
|
||||
{{?!it.original}}
|
||||
<tr class="train-empty">
|
||||
<td colspan="4">
|
||||
没有查询到车次，请更换条件或时间试试..
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
var citydata = require("./station/station_data.js");
|
||||
|
||||
exports.citydata = citydata;
|
||||
exports.cities = _(_.flatten(_.map(_.values(data.data), function (e) { return _.values(e); }))).mapObject(function (e) { return e.c; });;
|
||||
exports.cities = _(_.flatten(_.map(_.values(citydata.data), function (e) { return _.values(e); }))).mapObject(function (e) { return e.c; });;
|
||||
exports.identityCardTypes = {
|
||||
|
||||
};
|
||||
|
||||
@ -8,15 +8,6 @@
|
||||
var datebar = require("./widget_datebar.js");
|
||||
var parser = require("../platform/parser.js");
|
||||
|
||||
//初始化UI
|
||||
(function () {
|
||||
$("#passenger-selector-id").focus(function () {
|
||||
$(this).parent().parent().addClass("hover");
|
||||
}).blur(function () {
|
||||
$(this).parent().parent().removeClass("hover");
|
||||
});
|
||||
})();
|
||||
|
||||
//会话管理器事件
|
||||
sessMgr.on("notValidPassengerFound", function () {
|
||||
mp.showMessagePopup("warn", "您的账户中有未经验证的联系人，将不可为他们订票。");
|
||||
@ -25,7 +16,8 @@
|
||||
//初始化日期
|
||||
require("./widget_datedropdown.js").init("input.ui-date");
|
||||
//地区选择
|
||||
require("./widget_cityselector.js").init("input.ui-cityselector");
|
||||
var citySelector = require("./widget_cityselector.js");
|
||||
citySelector.init("input.ui-cityselector");
|
||||
//验证码
|
||||
require("./widget_verifycode.js").init();
|
||||
|
||||
@ -40,6 +32,10 @@
|
||||
var uiOrderProcess = require("./ui-order-submit-process.js");
|
||||
uiOrderProcess.init();
|
||||
|
||||
//查询参数
|
||||
var uiAutoSubmitForm = require("./ui-autosubmitform.js");
|
||||
uiAutoSubmitForm.init();
|
||||
|
||||
//模式管理
|
||||
var uiThemeManager = require("./ui-theme-manager.js");
|
||||
uiThemeManager.init();
|
||||
@ -162,6 +158,9 @@
|
||||
sessMgr.save();
|
||||
});
|
||||
$("#btnQuery").click(function () {
|
||||
//记录
|
||||
citySelector.cityui.addCityToRecent(sessMgr.currentProfile.fromCode);
|
||||
citySelector.cityui.addCityToRecent(sessMgr.currentProfile.toCode);
|
||||
ui_result.load();
|
||||
});
|
||||
|
||||
|
||||
435
Web12306/js/ui/ui-autosubmitform.js
Normal file
435
Web12306/js/ui/ui-autosubmitform.js
Normal file
@ -0,0 +1,435 @@
|
||||
define(function (require, exports, module) {
|
||||
var sessmgr = require("../account/sessionMgr.js");
|
||||
var mp = require("./widget_message_popup.js");
|
||||
var query = require("../otn/queryticket.js");
|
||||
var data = require("../data.js");
|
||||
|
||||
var initPassengerEditor = function () {
|
||||
//UI组件
|
||||
var uiEditor = $("div.passenger-selector-wrap");
|
||||
var uiInput = uiEditor.find(":text");
|
||||
var uiDlg = uiEditor.find("section");
|
||||
var uiDlgTpl = uiDlg.find("script").doT();
|
||||
var uiDlgList = uiDlg.find("ul");
|
||||
var uiList = uiEditor.parent();
|
||||
var uiListTpl = uiList.find(">script").doT();
|
||||
|
||||
uiInput.focus(function () {
|
||||
uiDlg.show();
|
||||
|
||||
uiDlg.addClass("loading");
|
||||
uiDlg.find(".empty-indicator").hide();
|
||||
sessmgr.getPassengers(function (data) {
|
||||
uiDlg.removeClass("loading");
|
||||
allpasseengers = data;
|
||||
currentSearchKey = null;
|
||||
if (!data.length) {
|
||||
uiDlg.find(".empty-indicator").show();
|
||||
}
|
||||
performSearch();
|
||||
});
|
||||
uiInput.select();
|
||||
}).blur(function () {
|
||||
uiDlg.hide();
|
||||
});
|
||||
uiDlg.mousedown(function (e) {
|
||||
if (e.target && e.target.tagName === "LI") {
|
||||
//选定
|
||||
var id = e.target.dataset.id;
|
||||
var p = _.findWhere(allpasseengers, { key: id });
|
||||
if (p)
|
||||
uiInput.trigger("selectPassenger", p);
|
||||
}
|
||||
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
var currentSearchKey = null;
|
||||
var currentList = null;
|
||||
var currentPageIndex = 1;
|
||||
var allpasseengers = null;
|
||||
var pagesize = 12;
|
||||
var totalpage = 0;
|
||||
var performSearch = function (key) {
|
||||
key = key || uiInput.val();
|
||||
if (key !== currentSearchKey) {
|
||||
currentSearchKey = key.toUpperCase();
|
||||
currentList = currentSearchKey ? _.filter(allpasseengers, function (p) { return p.key.indexOf(currentSearchKey) != -1 || p.first_letter.indexOf(currentSearchKey) != -1; }) : allpasseengers;
|
||||
currentPageIndex = 1;
|
||||
totalpage = Math.ceil(currentList.length / pagesize);
|
||||
}
|
||||
renderPage();
|
||||
};
|
||||
var renderPage = function () {
|
||||
if (currentPageIndex > totalpage)
|
||||
currentPageIndex = totalpage;
|
||||
else if (currentPageIndex < 1)
|
||||
currentPageIndex = 1;
|
||||
|
||||
var renderList = currentList.slice((currentPageIndex - 1) * pagesize, pagesize);
|
||||
uiDlgList.html(uiDlgTpl(renderList, {
|
||||
isSelected: function (p) {
|
||||
return sessmgr.currentProfile && sessmgr.currentProfile && _.findWhere(sessmgr.currentProfile.passengers, { key: p.key }) || false;
|
||||
}
|
||||
}));
|
||||
|
||||
uiDlg.find("button.passenger-pager-prev").prop("disabled", currentPageIndex < 2);
|
||||
uiDlg.find("button.passenger-pager-next").prop("disabled", totalpage - 1 <= currentPageIndex);
|
||||
};
|
||||
uiDlg.find("button.passenger-pager-prev").click(function () {
|
||||
currentPageIndex--;
|
||||
renderPage();
|
||||
});
|
||||
uiDlg.find("button.passenger-pager-next").click(function () {
|
||||
currentPageIndex++;
|
||||
renderPage();
|
||||
});
|
||||
uiInput.keyup(function () {
|
||||
performSearch();
|
||||
});
|
||||
uiInput.on("selectPassenger", function (e, p) {
|
||||
if (exports.addPassengerToList(p))
|
||||
p.selected = true;
|
||||
});
|
||||
uiList.on("click", ".optional-block .close", function (e) {
|
||||
var span = $(this).closest(".optional-block");
|
||||
var key = span[0].dataset.id;
|
||||
var cpl = sessmgr.currentProfile.passengers;
|
||||
|
||||
for (var i = 0; i < cpl.length; i++) {
|
||||
if (cpl[i].key === key) {
|
||||
cpl.splice(i, 1);
|
||||
sessmgr.save();
|
||||
break;
|
||||
}
|
||||
}
|
||||
span.fadeOut('fast', function () { $(this).remove(); });
|
||||
|
||||
e.stopPropagation();
|
||||
}).on("click", ".optional-block", function (e) {
|
||||
//添加儿童票
|
||||
var span = $(this).closest(".optional-block");
|
||||
var key = span[0].dataset.id;
|
||||
var cpl = sessmgr.currentProfile.passengers;
|
||||
|
||||
var p = _.findWhere(cpl, { key: key });
|
||||
if (!p)
|
||||
return;
|
||||
p = _.clone(p);
|
||||
p.passenger_type = 2;
|
||||
p.key += "$" + (Math.random() + '').substr(3, 4);
|
||||
exports.addPassengerToList(p);
|
||||
});
|
||||
|
||||
var resetList = function () {
|
||||
uiList.find(">span").remove();
|
||||
if (sessmgr.currentProfile.passengers) {
|
||||
uiList.append(uiListTpl(sessmgr.currentProfile.passengers));
|
||||
}
|
||||
};
|
||||
|
||||
if (sessmgr.currentProfile) {
|
||||
resetList();
|
||||
}
|
||||
|
||||
sessmgr.on("sessionChanged", resetList);
|
||||
sessmgr.on("currentProfileChanged", resetList);
|
||||
|
||||
exports.addPassengerToList = function (p) {
|
||||
var cp = sessmgr.currentProfile;
|
||||
if (!cp)
|
||||
return false;
|
||||
|
||||
cp.passengers = cp.passengers || [];
|
||||
|
||||
if (_.findWhere(cp.passengers, { key: p.key }))
|
||||
return false;
|
||||
if (cp.passengers.length >= 5) {
|
||||
mp.showMessagePopup("error", "只能添加五个人喔。");
|
||||
return false;
|
||||
}
|
||||
|
||||
cp.passengers.push(p);
|
||||
uiList.append(uiListTpl([p]));
|
||||
sessmgr.save();
|
||||
|
||||
return true;
|
||||
};
|
||||
};
|
||||
|
||||
var initTrainSelectEditor = function () {
|
||||
var container = $(".options-train-selectorwarp");
|
||||
var listTpl = container.find("script:eq(1)").doT();
|
||||
var queryTpl = container.find("script:first").doT();
|
||||
var inputObj = container.find(":text");
|
||||
var queryTable = container.find(">div");
|
||||
var queryErrorRow = queryTable.find("table tr:eq(3)");
|
||||
var queryLoadingRow = queryTable.find("table tr:eq(1)");
|
||||
var queryTipRow = queryTable.find("table tr:eq(2)");
|
||||
var traindata;
|
||||
|
||||
var currentKey = null;
|
||||
|
||||
var showDropDown = function () {
|
||||
queryErrorRow.hide();
|
||||
queryLoadingRow.hide();
|
||||
queryTipRow.hide();
|
||||
|
||||
var cp = sessmgr.currentProfile;
|
||||
if (!cp)
|
||||
return;
|
||||
|
||||
var checkKey = cp.fromCode + cp.toCode + cp.depDate + cp.studentTicket;
|
||||
if (checkKey != currentKey) {
|
||||
//需要重新查询
|
||||
currentKey = checkKey;
|
||||
|
||||
queryErrorRow.nextAll().remove();
|
||||
if (!cp.fromCode || !cp.toCode || !cp.depDate) {
|
||||
queryTipRow.show();
|
||||
return;
|
||||
}
|
||||
|
||||
queryLoadingRow.show();
|
||||
query.queryTicket(cp.fromCode, cp.toCode, cp.depDate, cp.studentTicket)
|
||||
.done(function () {
|
||||
traindata = this;
|
||||
if (!this.original.length) {
|
||||
queryErrorRow.show();
|
||||
} else {
|
||||
queryErrorRow.after(queryTpl(this.original));
|
||||
}
|
||||
}).fail(function () {
|
||||
queryErrorRow.show();
|
||||
}).always(function () {
|
||||
queryLoadingRow.hide();
|
||||
});
|
||||
|
||||
}
|
||||
queryTable.show();
|
||||
};
|
||||
var initialLoad = function () {
|
||||
var cp = sessmgr.currentProfile;
|
||||
container.find(">span").remove();
|
||||
if (cp && cp.selectedTrain) {
|
||||
container.append(listTpl(cp.selectedTrain));
|
||||
}
|
||||
};
|
||||
initialLoad();
|
||||
sessmgr.on("sessionChanged", initialLoad);
|
||||
sessmgr.on("currentProfileChanged", initialLoad);
|
||||
|
||||
inputObj.focus(function () {
|
||||
showDropDown();
|
||||
}).blur(function () {
|
||||
queryTable.hide();
|
||||
}).keydown(function (e) {
|
||||
if (e.keyCode == 13) {
|
||||
var s = this.value;
|
||||
if (s)
|
||||
exports.addTrainToList(s);
|
||||
this.value = "";
|
||||
}
|
||||
});
|
||||
|
||||
queryTable.mousedown(function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}).on("click", "tr[data-id] td", function () {
|
||||
var tr = $(this).closest("tr");
|
||||
var id = tr[0].dataset.id;
|
||||
var t = _.findWhere(traindata.original, { id: id });
|
||||
if (!t)
|
||||
return;
|
||||
|
||||
exports.addTrainToList(t.code);
|
||||
});
|
||||
container.on("click", ".optional-block", function () {
|
||||
var obj = $(this).closest("span[data-code]");
|
||||
exports.removeTrainFromList(obj[0].dataset.code);
|
||||
obj.fadeOut('fast', function () { $(this).remove(); });
|
||||
});
|
||||
|
||||
exports.addTrainToList = function (t) {
|
||||
var cp = sessmgr.currentProfile;
|
||||
if (!cp)
|
||||
return;
|
||||
|
||||
cp.selectedTrain = cp.selectedTrain || [];
|
||||
if (_.indexOf(cp.selectedTrain, t) != -1)
|
||||
return;
|
||||
|
||||
cp.selectedTrain.push(t);
|
||||
container.append(listTpl([t]));
|
||||
sessmgr.save();
|
||||
};
|
||||
exports.removeTrainFromList = function (t) {
|
||||
var cp = sessmgr.currentProfile;
|
||||
if (!cp || !cp.selectedTrain)
|
||||
return;
|
||||
|
||||
for (var i = 0; i < cp.selectedTrain.length; i++) {
|
||||
if (cp.selectedTrain[i] === t) {
|
||||
cp.selectedTrain.splice(i, 1);
|
||||
sessmgr.save();
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
var initDateLoop = function () {
|
||||
//UI
|
||||
var container = $("#date_loop_editor");
|
||||
var tpl = container.find(">script").doT();
|
||||
var input = container.find("input");
|
||||
|
||||
var cp = sessmgr.currentProfile;
|
||||
sessmgr.on("sessionChanged", function () {
|
||||
cp = sessmgr.currentProfile;
|
||||
initProfile();
|
||||
});
|
||||
sessmgr.on("currentProfileChanged", function () {
|
||||
cp = sessmgr.currentProfile;
|
||||
initProfile();
|
||||
});
|
||||
|
||||
var initProfile = function () {
|
||||
container.find(">span").remove();
|
||||
if (cp && cp.dateloop) {
|
||||
container.append(tpl(cp.dateloop));
|
||||
}
|
||||
};
|
||||
|
||||
exports.addDateToLoopList = function (d) {
|
||||
if (!d) return;
|
||||
cp.dateloop = cp.dateloop || [];
|
||||
|
||||
if (_.indexOf(cp.dateloop, d) !== -1)
|
||||
return;
|
||||
cp.dateloop.push(d);
|
||||
sessmgr.save();
|
||||
//add to list
|
||||
container.append(tpl([d]));
|
||||
};
|
||||
exports.removeDateFromLoopList = function (d) {
|
||||
if (!cp || !cp.dateloop)
|
||||
return;
|
||||
var idx = _.indexOf(cp.dateloop, d);
|
||||
if (idx == -1)
|
||||
return;
|
||||
cp.dateloop.splice(idx, 1);
|
||||
sessmgr.save();
|
||||
container.find(">span[data-date='" + d + "']").remove();
|
||||
};
|
||||
|
||||
input.change(function () {
|
||||
if (this.value)
|
||||
exports.addDateToLoopList(this.value);
|
||||
this.value = "";
|
||||
});
|
||||
container.on("click", ">span[data-date]", function () {
|
||||
exports.removeDateFromLoopList(this.dataset.date);
|
||||
});
|
||||
|
||||
initProfile();
|
||||
};
|
||||
|
||||
var initSeatOrder = function () {
|
||||
var seatDisplayOrder = "O319PM6420".split('');
|
||||
var recommand = ["O", "3", "1"];
|
||||
|
||||
var container = $("dd.options-seat-type");
|
||||
var ddTpl = container.find(">script:eq(0)").doT();
|
||||
var input = container.find(":text");
|
||||
var listTpl = container.find(">script:eq(1)").doT();
|
||||
var dropDown = null;
|
||||
var cp = null;
|
||||
|
||||
var initDropDown = function () {
|
||||
container.append(ddTpl({
|
||||
order: seatDisplayOrder,
|
||||
isSelected: function () { return false; },
|
||||
isRecommand: function (seat) { return _.indexOf(recommand, seat) != -1; },
|
||||
getName: data.toSeatTypeName
|
||||
}));
|
||||
|
||||
dropDown = container.find("ul");
|
||||
dropDown.mousedown(function(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
}).click(function() {
|
||||
input[0].focus();
|
||||
});
|
||||
};
|
||||
var initProfile = function () {
|
||||
cp = sessmgr.currentProfile;
|
||||
|
||||
container.find(">label>:checkbox").parent().remove();
|
||||
if (!cp || cp.selectedSeatType)
|
||||
return;
|
||||
container.append(listTpl({
|
||||
order: cp.selectedSeatType,
|
||||
isSelected: function () { return false; },
|
||||
isRecommand: function () { return false; },
|
||||
getName: data.toSeatTypeName
|
||||
}));
|
||||
};
|
||||
exports.addSeat = function (code) {
|
||||
if (!code || !cp)
|
||||
return;
|
||||
|
||||
cp.selectedSeatType = cp.selectedSeatType || [];
|
||||
var idx = _.indexOf(cp.selectedSeatType, code);
|
||||
if (idx != -1)
|
||||
return;
|
||||
cp.selectedSeatType.push(code);
|
||||
sessmgr.save();
|
||||
container.append(listTpl({
|
||||
order: [code],
|
||||
isSelected: function () { return false; },
|
||||
isRecommand: function () { return false; },
|
||||
getName: data.toSeatTypeName
|
||||
}));
|
||||
dropDown.find(":checkbox[value='" + code + "']").prop("checked", true);
|
||||
};
|
||||
exports.removeSeat = function (code) {
|
||||
if (!code || !cp)
|
||||
return;
|
||||
|
||||
var idx = _.indexOf(cp.selectedSeatType, code);
|
||||
if (idx == -1)
|
||||
return;
|
||||
|
||||
cp.selectedSeatType.splice(idx, 1);
|
||||
sessmgr.save();
|
||||
container.find(">label>input[value='" + code + "']").parent().remove();
|
||||
dropDown.find(":checkbox[value='" + code + "']").prop("checked", false);
|
||||
};
|
||||
container.on("change", ":checkbox", function () {
|
||||
if (this.checked)
|
||||
exports.addSeat(this.value);
|
||||
else exports.removeSeat(this.value);
|
||||
});
|
||||
input.focus(function () {
|
||||
dropDown.show();
|
||||
}).blur(function () {
|
||||
dropDown.hide();
|
||||
});
|
||||
|
||||
|
||||
initDropDown();
|
||||
initProfile();
|
||||
sessmgr.on("sessionChanged", initProfile);
|
||||
sessmgr.on("currentProfileChanged", initProfile);
|
||||
};
|
||||
|
||||
exports.init = function () {
|
||||
initPassengerEditor();
|
||||
initTrainSelectEditor();
|
||||
initDateLoop();
|
||||
initSeatOrder();
|
||||
};
|
||||
|
||||
});
|
||||
@ -14,7 +14,7 @@
|
||||
|
||||
var initList = function () {
|
||||
listContainer.empty();
|
||||
if (sessMgr.current.savedProfile)
|
||||
if (sessMgr.current && sessMgr.current.savedProfile)
|
||||
listContainer.html(tpl(_.values(sessMgr.current.savedProfile)));
|
||||
};
|
||||
|
||||
|
||||
@ -1,9 +1,13 @@
|
||||
define(function (require, exports) {
|
||||
var $html = '<div id="city_selector"><ul class="city-tab-nav"><li class="selected">常用</li><li data-code="A-E">A-E</li><li data-code="F-J">F-J</li><li data-code="K-O">K-O</li><li data-code="P-T">P-T</li><li data-code="U-Z">U-Z</li></ul><div class="recent-city-list"><p>最近查询</p><dl></dl></div><div class="city-pop"><p>常用城市</p><ul class="city-list-container"></ul></div><div class="city-search"><p>站点列表</p><ul class="city-list-container"></ul><div class="city-list-pager"><button class="city-prev" disabled="disabled">上一页</button><button class="city-next">下一页</button></div></div></div>';
|
||||
var $html = '<div id="city_selector"><ul class="city-tab-nav"><li class="selected">常用</li><li data-code="A-E">A-E</li><li data-code="F-J">F-J</li><li data-code="K-O">K-O</li><li data-code="P-T">P-T</li><li data-code="U-Z">U-Z</li></ul><div class="recent-city-list"><p>最近查询</p><dl><dd>TEST</dd></dl></div><div class="city-pop"><p>常用城市</p><ul class="city-list-container"></ul></div><div class="city-search"><p>站点列表</p><ul class="city-list-container"></ul><div class="city-list-pager"><button class="city-prev" disabled="disabled">上一页</button><button class="city-next">下一页</button></div></div></div>';
|
||||
var selector;
|
||||
var data = require("../data.js");
|
||||
|
||||
var cityMap = data.cities;
|
||||
var citydata = data.citydata.data;
|
||||
var popcity = data.citydata.popcity;
|
||||
var maxRecentCity = 8;
|
||||
var sessMgr = require("../account/sessionMgr.js");
|
||||
|
||||
var CitySelector = function (options) {
|
||||
var that = this;
|
||||
@ -15,7 +19,37 @@
|
||||
var target = null;
|
||||
var prevTab = null;
|
||||
var searchKey;
|
||||
var blockClose = false;
|
||||
var tplRecentCity = doT.template("{{~it:c:i}}<dd data-code='{{=c.c}}'>{{!c.n}}</dd>{{~}}");
|
||||
var cp;
|
||||
var container = $("#city_selector");
|
||||
|
||||
var initRecentCity = function () {
|
||||
cp = sessMgr.current;
|
||||
container.find("dd").remove();
|
||||
|
||||
if (!cp || !cp.recentCity)
|
||||
return;
|
||||
var cities = _.filter(cp.recentCity.map(function (e) {
|
||||
return cityMap[e];
|
||||
}), function (e) { return e != null; });
|
||||
container.find("dl").html(tplRecentCity(cities));
|
||||
};
|
||||
initRecentCity();
|
||||
sessMgr.on("sessionChanged", initRecentCity);
|
||||
|
||||
this.addCityToRecent = function (code) {
|
||||
if (!code || !cp)
|
||||
return;
|
||||
cp.recentCity = cp.recentCity || [];
|
||||
var idx = _.indexOf(cp.recentCity, code);
|
||||
if (idx != -1) {
|
||||
return;
|
||||
}
|
||||
container.find("dd[data-code='" + code + "']").remove();
|
||||
cp.recentCity.unshift(code);
|
||||
sessMgr.save();
|
||||
container.find("dl").prepend(tplRecentCity([cityMap[code]]));
|
||||
};
|
||||
|
||||
that.findExtractCity = function (val) {
|
||||
if (!val)
|
||||
@ -116,21 +150,19 @@
|
||||
that.focusOnText();
|
||||
};
|
||||
that.hidePopup = function (force) {
|
||||
if (!blockClose) {
|
||||
dom.removeClass("open");
|
||||
dom.removeClass("open");
|
||||
|
||||
//验证
|
||||
var str = target.val();
|
||||
var city = that.findExtractCity(str);
|
||||
if (!city) {
|
||||
target.val("");
|
||||
target.attr("data-code", "");
|
||||
} else {
|
||||
target.val(city.n);
|
||||
target.attr("data-code", city.c);
|
||||
}
|
||||
target[0].dispatchEvent(new UIEvent("change"));
|
||||
//验证
|
||||
var str = target.val();
|
||||
var city = that.findExtractCity(str);
|
||||
if (!city) {
|
||||
target.val("");
|
||||
target.attr("data-code", "");
|
||||
} else {
|
||||
target.val(city.n);
|
||||
target.attr("data-code", city.c);
|
||||
}
|
||||
target[0].dispatchEvent(new UIEvent("change"));
|
||||
|
||||
|
||||
if (force) {
|
||||
@ -151,7 +183,7 @@
|
||||
currentPage = 0;
|
||||
if (code) {
|
||||
dom.find(".city-search>p").html("站点列表");
|
||||
currentList = _.values(data.data[code]);
|
||||
currentList = _.values(citydata[code]);
|
||||
totalPage = Math.ceil(currentList.length / pageSize);
|
||||
that.renderPage(1);
|
||||
dom.find(".city-search").show();
|
||||
@ -294,10 +326,9 @@
|
||||
target[0].blur();
|
||||
}
|
||||
});
|
||||
$("#city_selector").mousedown(function () {
|
||||
blockClose = true;
|
||||
}).mouseup(function () {
|
||||
blockClose = false;
|
||||
$("#city_selector").mousedown(function (e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
return this;
|
||||
@ -310,14 +341,14 @@
|
||||
(function () {
|
||||
var html = [];
|
||||
|
||||
_.each(data.popcity, function (c) {
|
||||
_.each(popcity, function (c) {
|
||||
var city = cityMap[c];
|
||||
|
||||
html.push("<li data-code='" + city.c + "' data-py='" + city.p + "' data-name='" + city.n + "' data-fl='" + city.h + "'>" + city.n + "</li>");
|
||||
});
|
||||
|
||||
if (data.popcity.length % 4 !== 0) {
|
||||
for (var i = 0; i < 4 - data.popcity.length % 4; i++) {
|
||||
if (popcity.length % 4 !== 0) {
|
||||
for (var i = 0; i < 4 - popcity.length % 4; i++) {
|
||||
html.push("<li></li>");
|
||||
}
|
||||
}
|
||||
@ -327,6 +358,7 @@
|
||||
|
||||
args = $.extend({ rows: 9 }, args);
|
||||
selector = new CitySelector(args);
|
||||
exports.cityui = selector;
|
||||
|
||||
$(document).on("focus", eleSelector, function () {
|
||||
this.select();
|
||||
|
||||
@ -115,8 +115,8 @@
|
||||
|
||||
if (cell.hasClass("date-notavailable") || !container.data("date-target")) return;
|
||||
|
||||
var target = container.data("date-target").val(cell.attr("data-date"));
|
||||
target.trigger("datechanged.widget.ui.datepopup").change();
|
||||
var target = container.data("date-target").val(cell.attr("data-date")).change();
|
||||
target.trigger("datechanged").change();
|
||||
dropdownInstance.hidePopup();
|
||||
container.removeData("date-target");
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user