fe / yohobuywap-node · Commits

Go to a project

Authored by 李奇
Commit 46ae07ca9c4743cc1b01bdc0e1b67319559c89ab 1 parent 19a572ef

有赚UI优化

Inline Side-by-side
Showing 3 changed files with 23 additions and 44 deletions
@@ -4,33 +4,10 @@ @@ -4,33 +4,10 @@
4 <div class="apply-title">基本信息</div> 4 <div class="apply-title">基本信息</div>
5 <ul class="section-ul"> 5 <ul class="section-ul">
6 <li><span>姓名</span><input type="text" class="name" placeholder="请输入姓名" /></li> 6 <li><span>姓名</span><input type="text" class="name" placeholder="请输入姓名" /></li>
7 - <li class="border-node"><span>手机号码</span><input type="number" class="mobile" placeholder="请输入手机号码" /></li> 7 + <li><span>手机号码</span><input type="number" class="mobile" placeholder="请输入手机号码" /></li>
  8 + <li><span>微信号</span><input type="text" class="wechat" placeholder="请输入微信号（选填）" /></li>
8 </ul> 9 </ul>
9 - </div>  
10 - <div class="section">  
11 - <div class="apply-title">完善信息</div>  
12 - {{#socialMediaList}}  
13 - <div class="party-icon-item">  
14 - <div class="public-info-section">  
15 - <img class="public-icon" src="{{icon}}" />  
16 - <div class="personal">  
17 - <div class="public-name">{{name}}</div>  
18 - <div class="account-name {{#if required}}required{{/if}}" data-type="{{type}}">  
19 - {{#if account}}  
20 - 账号：<em>{{account}}</em>&nbsp;&nbsp;  
21 - 粉丝：<em data-fans="{{fans}}">{{fans}}</em>  
22 - {{/if}}  
23 - </div>  
24 - </div>  
25 - </div>  
26 - {{#if account}}  
27 - <div class="fill-in disable">已填写</div>  
28 - {{else}}  
29 - <div class="fill-in">填写</div>  
30 - {{/if}}  
31 - </div>  
32 - {{/socialMediaList}}  
33 - <p class="other">如果您有其他渠道，可以添加我们的服务号“有货有赚”反馈，也可以了解您的申请状态<em class="added">点击添加</em></p> 10 + <p class="other">提供微信号，方便邀您加入达人微信群，赚钱秘籍、特殊福利享不停！添加关注公众号“有货有赚”，申请状态、高佣活动早知道。<em class="added">点击添加</em></p>
34 </div> 11 </div>
35 <div class="agreement-section"> 12 <div class="agreement-section">
36 <div class="agreement"> 13 <div class="agreement">
@@ -17,6 +17,7 @@ class HaveGainApplyPage extends Page { @@ -17,6 +17,7 @@ class HaveGainApplyPage extends Page {
17 $apply: $('.have-gain-apply'), 17 $apply: $('.have-gain-apply'),
18 $nameInput: $('.section .name'), 18 $nameInput: $('.section .name'),
19 $mobileInput: $('.section .mobile'), 19 $mobileInput: $('.section .mobile'),
  20 + $wxInput: $('.section .wechat'),
20 $fillIn: $('.party-icon-item .fill-in'), 21 $fillIn: $('.party-icon-item .fill-in'),
21 $added: $('.other .added'), 22 $added: $('.other .added'),
22 $agreement: $('.agreement-section .agreement'), 23 $agreement: $('.agreement-section .agreement'),
@@ -127,7 +128,6 @@ class HaveGainApplyPage extends Page { @@ -127,7 +128,6 @@ class HaveGainApplyPage extends Page {
127 let errStatus = 0; 128 let errStatus = 0;
128 let name = $.trim(this.selector.$nameInput.val()); 129 let name = $.trim(this.selector.$nameInput.val());
129 let mobile = $.trim(this.selector.$mobileInput.val()); 130 let mobile = $.trim(this.selector.$mobileInput.val());
130 - let wxInput = $('.account-name.required').find('em').length > 0;  
131 131
132 if (name === '') { 132 if (name === '') {
133 errStatus = 1; 133 errStatus = 1;
@@ -135,8 +135,6 @@ class HaveGainApplyPage extends Page { @@ -135,8 +135,6 @@ class HaveGainApplyPage extends Page {
135 errStatus = 2; 135 errStatus = 2;
136 } else if (!/^1[0-9]{10}$/.test(mobile)) { 136 } else if (!/^1[0-9]{10}$/.test(mobile)) {
137 errStatus = 21; 137 errStatus = 21;
138 - } else if (!wxInput) {  
139 - errStatus = 3;  
140 } 138 }
141 139
142 if (errStatus) { 140 if (errStatus) {
@@ -213,8 +211,6 @@ class HaveGainApplyPage extends Page { @@ -213,8 +211,6 @@ class HaveGainApplyPage extends Page {
213 tip.show('请输入手机号'); 211 tip.show('请输入手机号');
214 } else if (errStatus === 21) { 212 } else if (errStatus === 21) {
215 tip.show('请输入正确的手机号'); 213 tip.show('请输入正确的手机号');
216 - } else if (errStatus === 3) {  
217 - tip.show('请填写微信账号');  
218 } 214 }
219 215
220 if (errStatus) { 216 if (errStatus) {
@@ -226,15 +222,14 @@ class HaveGainApplyPage extends Page { @@ -226,15 +222,14 @@ class HaveGainApplyPage extends Page {
226 return tip.show('请勾选《我已阅读并同意》'); 222 return tip.show('请勾选《我已阅读并同意》');
227 } 223 }
228 224
229 - this.selector.$fillIn.each((index, event) => {  
230 - let $accountName = $(event).closest('.party-icon-item').find('.account-name'); 225 + let wxAccount = $.trim(this.selector.$wxInput.val());
231 226
  227 + if (wxAccount) {
232 socialMediaList.push({ 228 socialMediaList.push({
233 - type: $accountName.data('type'),  
234 - account: $accountName.find('em').eq(0).text() || '',  
235 - fans: parseInt(`0${$accountName.find('em').eq(1).data('fans')}`, 10)  
236 - }); 229 + type: 1,
  230 + account: wxAccount
237 }); 231 });
  232 + }
238 233
239 if (this.selector.isFlag) { 234 if (this.selector.isFlag) {
240 return false; 235 return false;
@@ -246,13 +241,16 @@ class HaveGainApplyPage extends Page { @@ -246,13 +241,16 @@ class HaveGainApplyPage extends Page {
246 union.union_type = this.query.union_type; 241 union.union_type = this.query.union_type;
247 } 242 }
248 243
  244 + if (socialMediaList.length) {
  245 + union.socialMediaList = JSON.stringify(socialMediaList);
  246 + }
  247 +
249 return this.ajax({ 248 return this.ajax({
250 type: 'post', 249 type: 'post',
251 url: `/activity/have-gain/submitApply${window.location.search}`, 250 url: `/activity/have-gain/submitApply${window.location.search}`,
252 data: Object.assign({ 251 data: Object.assign({
253 name: $.trim(this.selector.$nameInput.val()), 252 name: $.trim(this.selector.$nameInput.val()),
254 - mobile: $.trim(this.selector.$mobileInput.val()),  
255 - socialMediaList: JSON.stringify(socialMediaList) 253 + mobile: $.trim(this.selector.$mobileInput.val())
256 }, union) 254 }, union)
257 }).then(res => { 255 }).then(res => {
258 this.selector.isFlag = false; 256 this.selector.isFlag = false;
1 @import "have-gain-dialog"; 1 @import "have-gain-dialog";
2 2
  3 +body {
  4 + background-color: #fff;
  5 +}
  6 +
3 .have-gain-apply { 7 .have-gain-apply {
4 background-color: #f0f0f0; 8 background-color: #f0f0f0;
5 9
@@ -35,10 +39,6 @@ @@ -35,10 +39,6 @@
35 } 39 }
36 } 40 }
37 41
38 - li.border-node {  
39 - border: none;  
40 - }  
41 -  
42 .party-icon-item { 42 .party-icon-item {
43 display: flex; 43 display: flex;
44 flex-direction: row; 44 flex-direction: row;
@@ -114,6 +114,10 @@ @@ -114,6 +114,10 @@
114 } 114 }
115 115
116 .agreement-section { 116 .agreement-section {
  117 + position: fixed;
  118 + bottom: 0;
  119 + left: 0;
  120 + right: 0;
117 margin: 30px 30px 0; 121 margin: 30px 30px 0;
118 padding-bottom: 30px; 122 padding-bottom: 30px;
119 123
@@ -149,7 +153,7 @@ @@ -149,7 +153,7 @@
149 height: 100px; 153 height: 100px;
150 line-height: 100px; 154 line-height: 100px;
151 background-color: #d0021b; 155 background-color: #d0021b;
152 - border-radius: 10px; 156 + border-radius: 4px;
153 color: #fff; 157 color: #fff;
154 text-align: center; 158 text-align: center;
155 } 159 }