设置口令页

 const api = global.yoho.API;
 const service = global.yoho.ServiceAPI;
+const _ = require('lodash');
 
 module.exports = class extends global.yoho.BaseModel {
     constructor(ctx) {
         super(ctx);
     }
 
+    // 文字说明
     invitionText(uid) {
         return api.get('', {
             method: 'app.invitecode.my',
@@ -23,6 +25,7 @@ module.exports = class extends global.yoho.BaseModel {
         });
     }
 
+    // 资源位图
     resources() {
         return service.get('operations/api/v5/resource/get', {
             content_code: ' 29958987ef0c0f830fad03d7e5'
@@ -30,8 +33,8 @@ module.exports = class extends global.yoho.BaseModel {
             code: 200
         }).then((result) => {
             if (result && result.data) {
-                console.log(result);
-                return result;
+
+                return result.data[0];
             }
         });
     }
@@ -41,6 +44,7 @@ module.exports = class extends global.yoho.BaseModel {
             let finaData = {};
 
             finaData = Object.assign(finaData, result[0]);
+            finaData.imgSrc = _.get(result[1].data[0], 'src', '');
 
             return finaData;
         });

@@ -35,7 +35,9 @@
                     <span class="iconfont">&#xe604;</span>
                 </a>
             </span>
+            {{#unless trendWorld}}
             <b class="tip">新玩法</b>
+            {{/unless}}
         </li>
     </ul>
 </div>

 <div class="tide-command-page yoho-page">
     {{# invitionDta}}
-    <textarea name="" class="command-textarea" id="command-textarea" placeholder="请设置您的潮流口令">{{#if trendWorld}}{{trendWorld}}{{/if}}</textarea>
+    <textarea name="" class="command-textarea" id="command-textarea" placeholder="请设置15位字符以内的潮流口令">{{#if trendWorld}}{{trendWorld}}{{/if}}</textarea>
     
-    <span class="close{{#unless trendWorld}} hide{{/unless}}">×</span>
-   
-    <div class="rules">
-        {{#if trendWordSetReason}}
-            <span class="title">设置潮流口令的好处是？</span>
-            <span>{{{trendWordSetReason}}}</span>
-        {{/if}}
+    <span class="world-number">15</span>
 
-        {{#if invitedFriendWelfare}}
-            <span class="title">被邀请的好友可获得？</span>
-            <span>{{{invitedFriendWelfare}}}</span>
-        {{/if}}
-    </div>
+    <div class="introduce">
+        <div class="rules">
+            {{#if mytrendWordPageDesc}}
+                <span class="title">玩转潮流口令，超值福利等你拿</span>
+                <span>{{{mytrendWordPageDesc}}}</span>
+                <a class="more" href="//m.yohobuy.com/activity/my-promotion">更多玩法>></a>
+            {{/if}}
+        </div>
 
-    <img src="" class="resources">
+        <img src="{{image imgSrc 690 650}}" class="resources">
+    </div>
     {{/ invitionDta}}
 </div>
\ No newline at end of file

@@ -11,11 +11,11 @@ $('.close').click(function() {
     $('.command-textarea').val('');
 });
 
-$('.command-textarea').bind('input', function() {
-    if ($('.command-textarea').val() === '') {
-        $('.close').hide();
-    } else {
-        $('.close').show();
+$('.command-textarea').bind('input propertychange', function() {
+    $('.world-number').html(15 - $('.command-textarea').val().length);
+
+    if ($('.command-textarea').val().length >= 15) {
+        $(this).val($(this).val().substring(0, 14));
     }
 });
 

@@ -2,59 +2,57 @@
     width: 100%;
     height: 100%;
     position: relative;
-    background-color: #f2f2f2;
 
     .command-textarea {
-        height: 94px;
-        width: 100%;
-        font-size: 28px;
-        line-height: 94px;
-        color: #000;
+        height: 130px;
+        width: 690px;
+        font-size: 44px;
         border: none;
         resize: none;
-        background-color: #fff;
-        padding-left: 30px;
+        background-color: #dfdfdf;
+        margin: 20px 30px;
+        border-radius: 10px;
     }
 
-    .close {
-        display: inline-block;
-        width: 30px;
-        height: 30px;
-        border-radius: 30px;
-        background-color: #c0c0c0;
-        color: #fff;
-        text-align: center;
-        line-height: 30px;
+    .world-number {
         position: absolute;
-        right: 30px;
-        top: 32px;
+        font-size: 24px;
+        color: #c0c0c0;
+        top: 112px;
+        right: 54px;
+        line-height: 38px;
+    }
+
+    .introduce {
+        background-color: #f0f0f0;
+        padding-top: 15px;
     }
 
     .rules {
-        padding: 30px;
         color: #a6a6a6;
-        line-height: 40px;
+        line-height: 34px;
         font-size: 24px;
+        background-color: #fff;
+        padding: 0 54px;
 
         .title {
-            line-height: 60px;
+            line-height: 76px;
             font-size: 26px;
             font-weight: 700;
             width: 100%;
             color: #000;
             display: inline-block;
         }
+
+        .more {
+            color: #4a90e2;
+            display: inline-block;
+        }
     }
 
     .resources {
         width: 690px;
-        height: 285px;
+        height: auto;
         margin-left: 30px;
-        position: fixed;
-        bottom: 0;
-    }
-
-    .hide {
-        display: none;
     }
 }