dos

Public/static/css/index.css

@@ -347,4 +347,17 @@ input::-webkit-input-placeholder {
 /* suggest-page */
 .suggest-page {
   z-index: 1;
+}
+
+input[name=signature] {
+  font-size: 1.2rem;
+  color: #222222;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  width: 12.9rem;
+}
+
+input[name=signature]::-webkit-input-placeholder {
+  /* placeholder颜色  */
+  color: #878787;
 }
\ No newline at end of file

Public/static/js/common.js

@@ -85,6 +85,7 @@ const flag = [
     '用理财收益，来场说走就走的旅行',
     '多赚钱，去看一看世界和远方',
 ];
+//色值
 const colorList = {
     'red': [
         '#854337',
@@ -135,36 +136,51 @@ const colorList = {
         '#b3a5ce'
     ]
 };
-
+//小装饰图片地址
 let decorateList = [
     picUrl + 'decorate1.png',
     picUrl + 'decorate2.png',
     picUrl + 'decorate3.png'
 ];
 
+//用户选择的flag列表
 let flagStack = [];
+//用户选择的小装饰src
+let checkedDecorate;
+//用户选择的主色调
+let mainColor = 'red';
+//用户选择的flag数量
 let chooseNum = 0;
+//用户选择的色条index
+let colorIndex = 4;
+//切换flag时存储上次的随机结果,以保证不重复
 let oldRandFlag = [];
-let first = true;
-let startX;
+//用于触摸防抖定时器
 let timer;
-let mainColor = 'red';
-let colorIndex = 4;
-let checkedDecorate;
+//记录flag调整顺序窗口的开启状态
 let checkFlagListStatus = false;
+//记录用户是否第一次选择留言，如果是第一次则打开flag调整顺序窗口
 let firstChooseFlag = true;
+//记录初始状态下色条的left值
 let colorbarLeft;
+//记录用户是否进入过小装饰设置，如果没有则跳转到小装饰设置页面，不能进入下一页
 let clickDecorate = false;
+//记录用户是否同意实现flag建议
+let agreeSuggestion = false;
 
+//记录初始状态下fontsize
 const fontSize = parseFloat($('html').css('fontSize'));
 
+//记录flag选择页的flag模版
 let flagTemplate = $('.flag-page .flag-frame').find('.flag-block').clone();
 $('.flag-frame').html('').addClass('clearfix');
-$('input[name=customize-flag]').attr('placeholder', '也能在这里写你的flag哦');
 
-let listTemplate = $('.personal-page .flag-list').find('.flag-item').clone();
-$('.personal-page .flag-list').html('');
+//自定义flag的placeholder
+$('input[name=customize-flag]').attr('placeholder', '也能在这里写你的flag哦');
+//署名的placeholder
+$('input[name=signature]').attr('placeholder', '准备好了，就在此署名吧').attr('id', 'signature');
 
+//初始化小装饰
 initDecorate();
 
 $(document).ready(function () {
@@ -259,8 +275,14 @@ $(document).ready(function () {
     $('.customize-frame .btn-back').on('click', backToFlag);
     //跳转到建议页
     $('.personal-page .btn-next').on('click', showSuggestPage);
+    //署名输入框限制长度事件
+    $('.suggest-page input[name=signature]').on('input propertychange', inputLength);
 });
 
+function inputLength() {
+    checkIt('signature', 6);
+}
+
 function showSuggestPage() {
     if (!clickDecorate) {
         $('.personal-page .btn-tab-decorate').click();
@@ -332,8 +354,8 @@ function changeMainColor(event) {
 }
 
 function chooseColorStart(e) {
-    let touch = e.originalEvent.targetTouches[0];
-    startX = (touch.pageX - colorbarLeft) / fontSize;
+    const touch = e.originalEvent.targetTouches[0];
+    const startX = (touch.pageX - colorbarLeft) / fontSize;
     setBgColor(startX);
     $('.btn-choose-color').removeClass('animate');
 }
@@ -344,8 +366,8 @@ function chooseColorMove(e) {
         clearTimeout(timer);
     }
     timer = setTimeout(() => {
-        let touch = e.originalEvent.targetTouches[0];
-        moveX = (touch.pageX - colorbarLeft) / fontSize;
+        const touch = e.originalEvent.targetTouches[0];
+        const moveX = (touch.pageX - colorbarLeft) / fontSize;
         setBgColor(moveX);
     }, 5);
 }
@@ -578,4 +600,33 @@ function RandomNumBoth(Min, Max) {
 function swapArray(arr, index1, index2) {
     arr[index1] = arr.splice(index2, 1, arr[index1])[0];
     return arr;
+}
+
+function checkIt(bind, maxNum) {
+    var v = document.getElementById(bind).value;
+
+    if (v == "") {
+        return [];
+    }
+
+    var len = 0; //中英字符长度计数
+    //计算
+    for (i = 0; i < v.length; i++) {
+        var c = v.charCodeAt(i);
+        if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) //英文字母状态
+        {
+            len++;
+        } else //中文状态
+        {
+            len += 2;
+        }
+        if (len >= maxNum) {
+            if (i != v.length - 1) {
+                $("#inp_name").val(v.substr(0, count))
+                break;
+            }
+        }
+
+    }
+
 }
\ No newline at end of file