fe / YOHO-ACTIVITY-PHP · Commits

Go to a project

Authored by 毕凯
Commit b5cd57f484fc16208674f7cccfb7db755f14d7f9 1 parent e7185240

增加发票选择

Inline Side-by-side
Showing 6 changed files with 120 additions and 63 deletions
@@ -39,4 +39,15 @@ $('.checkbox').on('touchstart', function() { @@ -39,4 +39,15 @@ $('.checkbox').on('touchstart', function() {
39 if ($this.hasClass('icon-checkbox')) { 39 if ($this.hasClass('icon-checkbox')) {
40 $this.removeClass('icon-checkbox').addClass('icon-cb-checked'); 40 $this.removeClass('icon-checkbox').addClass('icon-cb-checked');
41 } 41 }
42 -});  
  42 +});
  43 +
  44 +$('.invoice').on('touchend', '.checkbox', function() {
  45 + var $this = $(this);
  46 +
  47 + if ($this.hasClass('icon-cb-checked')) {
  48 + $('.invoice').addClass('focus');
  49 + }
  50 + if ($this.hasClass('icon-checkbox')) {
  51 + $('.invoice').removeClass('focus');
  52 + }
  53 +});
@@ -31,6 +31,65 @@ $('#search-coupon').on('submit', function() { @@ -31,6 +31,65 @@ $('#search-coupon').on('submit', function() {
31 return false; 31 return false;
32 }); 32 });
33 33
  34 +function getCouponHandle(coupons) {
  35 + var notAvailableCoupons = [];
  36 +
  37 + // 后端需要返回一个 coupons 列表，如下
  38 + // notAvailable 表示不可用的优惠券
  39 + coupons = [{
  40 + money: '99',
  41 + coupon_name: '满XX-减去吴悠右腿有益于有2222',
  42 + couponValidity: '20150129-20150430',
  43 + coupon_id: '22222'
  44 + }, {
  45 + money: '99',
  46 + coupon_name: '满XX-减去吴悠右腿有益于有2222',
  47 + couponValidity: '20150129-20150430',
  48 + coupon_id: '2222233'
  49 + }, {
  50 + money: '99',
  51 + coupon_name: 'NONO满XX-减去吴悠右腿有益于有2222',
  52 + couponValidity: '20150129-20150430',
  53 + coupon_id: '2222233',
  54 + notAvailable: 1
  55 + }];
  56 +
  57 + // coupons 是个列表，如果不是列表，可能是服务器错误，这次翻页加载不算
  58 + if (!$.isArray(coupons)) {
  59 + page--;
  60 + return;
  61 + }
  62 +
  63 + // 每页10张，当不足10张时，说明已经加载完
  64 + if (coupons.length < 10) {
  65 + canGetCoupon = false;
  66 + }
  67 +
  68 + // 第一页张数为 0 ，显示优惠券为空
  69 + if (!coupons.length && page === 2) {
  70 + $('.select-coupon-page').html($('#tmpl-no-coupon').html());
  71 + return;
  72 + }
  73 +
  74 + // 把不可用的优惠券分离出来
  75 + $.each(coupons, function(i, coupon) {
  76 + if (coupon.notAvailable) {
  77 + notAvailableCoupons.push(coupon);
  78 + }
  79 + });
  80 +
  81 + if (notAvailableCoupons.length) {
  82 + $('.not-avaliable-coupon-line').show();
  83 + }
  84 + $('#coupon-list').append(conponTmpl({
  85 + coupons: coupons
  86 + }));
  87 + $('#coupon-list-not').append(conponNotAvaliableTmpl({
  88 + notAvailableCoupons: notAvailableCoupons
  89 + }));
  90 + window.rePosFooter();
  91 +}
  92 +
34 function getCouponDate() { 93 function getCouponDate() {
35 if (!canGetCoupon) { 94 if (!canGetCoupon) {
36 return; 95 return;
@@ -52,64 +111,7 @@ function getCouponDate() { @@ -52,64 +111,7 @@ function getCouponDate() {
52 statuss: status, 111 statuss: status,
53 page: page 112 page: page
54 } 113 }
55 - }).then(function(coupons) {  
56 - var notAvailableCoupons = [];  
57 -  
58 - // 后端需要返回一个 coupons 列表，如下  
59 - // notAvailable 表示不可用的优惠券  
60 - coupons = [{  
61 - money: '99',  
62 - coupon_name: '满XX-减去吴悠右腿有益于有2222',  
63 - couponValidity: '20150129-20150430',  
64 - coupon_id: '22222'  
65 - }, {  
66 - money: '99',  
67 - coupon_name: '满XX-减去吴悠右腿有益于有2222',  
68 - couponValidity: '20150129-20150430',  
69 - coupon_id: '2222233'  
70 - }, {  
71 - money: '99',  
72 - coupon_name: 'NONO满XX-减去吴悠右腿有益于有2222',  
73 - couponValidity: '20150129-20150430',  
74 - coupon_id: '2222233',  
75 - notAvailable: 1  
76 - }];  
77 -  
78 - // coupons 是个列表，如果不是列表，可能是服务器错误，这次翻页加载不算  
79 - if (!$.isArray(coupons)) {  
80 - page--;  
81 - return;  
82 - }  
83 -  
84 - // 每页10张，当不足10张时，说明已经加载完  
85 - if (coupons.length < 10) {  
86 - canGetCoupon = false;  
87 - }  
88 -  
89 - // 第一页张数为 0 ，显示优惠券为空  
90 - if (!coupons.length && page === 2) {  
91 - $('.select-coupon-page').html($('#tmpl-no-coupon').html());  
92 - return;  
93 - }  
94 -  
95 - // 把不可用的优惠券分离出来  
96 - $.each(coupons, function(i, coupon) {  
97 - if (coupon.notAvailable) {  
98 - notAvailableCoupons.push(coupon);  
99 - }  
100 - });  
101 -  
102 - if (notAvailableCoupons.length) {  
103 - $('.not-avaliable-coupon-line').show();  
104 - }  
105 - $('#coupon-list').append(conponTmpl({  
106 - coupons: coupons  
107 - }));  
108 - $('#coupon-list-not').append(conponNotAvaliableTmpl({  
109 - notAvailableCoupons: notAvailableCoupons  
110 - }));  
111 - window.rePosFooter();  
112 - }).fail(function() { 114 + }).then(getCouponHandle).fail(function() {
113 page -= 1; 115 page -= 1;
114 tip.show('加载优惠券失败'); 116 tip.show('加载优惠券失败');
115 }).always(function() { 117 }).always(function() {
@@ -85,6 +85,7 @@ @@ -85,6 +85,7 @@
85 height: 90rem / $pxConvertRem; 85 height: 90rem / $pxConvertRem;
86 line-height: 90rem / $pxConvertRem; 86 line-height: 90rem / $pxConvertRem;
87 border-bottom: 1px solid #f7f7f7; 87 border-bottom: 1px solid #f7f7f7;
  88 + overflow: hidden;
88 89
89 a { 90 a {
90 display: block; 91 display: block;
@@ -120,8 +121,14 @@ @@ -120,8 +121,14 @@
120 color: #ccc; 121 color: #ccc;
121 } 122 }
122 123
123 - .invoice .checkbox {  
124 - float: right; 124 + .invoice {
  125 + .checkbox {
  126 + float: right;
  127 + }
  128 +
  129 + &.focus {
  130 + height: auto;
  131 + }
125 } 132 }
126 133
127 .desc { 134 .desc {
@@ -129,6 +136,33 @@ @@ -129,6 +136,33 @@
129 } 136 }
130 } 137 }
131 138
  139 + #invoice {
  140 + input {
  141 + width: 100%;
  142 + height: pxToRem(90px);
  143 + outline: 0;
  144 + border: 0;
  145 + border-top: 1px solid #f7f7f7;
  146 + border-bottom: 1px solid #f7f7f7;
  147 + }
  148 +
  149 + label {
  150 + position: relative;
  151 + width: 100%;
  152 + height: pxToRem(90px);
  153 + border-bottom: 1px solid #f7f7f7;
  154 + }
  155 +
  156 + select {
  157 + position: relative;
  158 + float: right;
  159 + width: 40%;
  160 + height: pxToRem(50px);
  161 + top: pxToRem(20px);
  162 + border: 1px solid #f7f7f7;
  163 + }
  164 + }
  165 +
132 .total { 166 .total {
133 font-size: 22rem / $pxConvertRem; 167 font-size: 22rem / $pxConvertRem;
134 margin-top: 20rem / $pxConvertRem; 168 margin-top: 20rem / $pxConvertRem;
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 margin-top: pxToRem(30px); 2 margin-top: pxToRem(30px);
3 margin-bottom: pxToRem(30px); 3 margin-bottom: pxToRem(30px);
4 4
5 - #new-coupon { 5 + #search-coupon {
6 margin-bottom: pxToRem(30px); 6 margin-bottom: pxToRem(30px);
7 padding-left: pxToRem(30px); 7 padding-left: pxToRem(30px);
8 padding-right: pxToRem(30px); 8 padding-right: pxToRem(30px);
@@ -82,6 +82,16 @@ @@ -82,6 +82,16 @@
82 <li class="invoice"> 82 <li class="invoice">
83 <span class="title">发票</span> 83 <span class="title">发票</span>
84 <span class="iconfont checkbox icon-checkbox"></span> 84 <span class="iconfont checkbox icon-checkbox"></span>
  85 + <form id="invoice">
  86 + <input type="text" name="invoice-title" value="" placeholder="发票抬头">
  87 + <label>
  88 + 发票类型
  89 + <select class="invoice-type" name="invoice-type">
  90 + <option value ="A">服装</option>
  91 + <option value ="B">图书</option>
  92 + </select>
  93 + </label>
  94 + </form>
85 </li> 95 </li>
86 {{/ invoice}} 96 {{/ invoice}}
87 </ul> 97 </ul>
1 {{> layout/header}} 1 {{> layout/header}}
2 <div class="yoho-page select-coupon-page my-coupon-page"> 2 <div class="yoho-page select-coupon-page my-coupon-page">
3 - <form id="new-coupon" method="POST" action=""> 3 + <form id="search-coupon" method="POST" action="">
4 <input type="text" name="coupon-code" value="" placeholder="输入优惠券码"> 4 <input type="text" name="coupon-code" value="" placeholder="输入优惠券码">
5 <button type="submit" class="submit">确定</button> 5 <button type="submit" class="submit">确定</button>
6 </form> 6 </form>