[年会抽奖]移动端逻辑

zouyang0921
1 parent 4f45506f
Showing 5 changed files with 302 additions and 194 deletions
img/mobile/dialog_btn_cancel.png
img/mobile/dialog_btn_confirm.png
js/template.js
mobile.html
mobile.js
+/*!art-template - Template Engine | http://aui.github.com/artTemplate/*/
+!function(){function a(a){return a.replace(t,"").replace(u,",").replace(v,"").replace(w,"").replace(x,"").split(y)}function b(a){return"'"+a.replace(/('|\\)/g,"\\$1").replace(/\r/g,"\\r").replace(/\n/g,"\\n")+"'"}function c(c,d){function e(a){return m+=a.split(/\n/).length-1,k&&(a=a.replace(/\s+/g," ").replace(/<!--[\w\W]*?-->/g,"")),a&&(a=s[1]+b(a)+s[2]+"\n"),a}function f(b){var c=m;if(j?b=j(b,d):g&&(b=b.replace(/\n/g,function(){return m++,"$line="+m+";"})),0===b.indexOf("=")){var e=l&&!/^=[=#]/.test(b);if(b=b.replace(/^=[=#]?|[\s;]*$/g,""),e){var f=b.replace(/\s*\([^\)]+\)/,"");n[f]||/^(include|print)$/.test(f)||(b="$escape("+b+")")}else b="$string("+b+")";b=s[1]+b+s[2]}return g&&(b="$line="+c+";"+b),r(a(b),function(a){if(a&&!p[a]){var b;b="print"===a?u:"include"===a?v:n[a]?"$utils."+a:o[a]?"$helpers."+a:"$data."+a,w+=a+"="+b+",",p[a]=!0}}),b+"\n"}var g=d.debug,h=d.openTag,i=d.closeTag,j=d.parser,k=d.compress,l=d.escape,m=1,p={$data:1,$filename:1,$utils:1,$helpers:1,$out:1,$line:1},q="".trim,s=q?["$out='';","$out+=",";","$out"]:["$out=[];","$out.push(",");","$out.join('')"],t=q?"$out+=text;return $out;":"$out.push(text);",u="function(){var text=''.concat.apply('',arguments);"+t+"}",v="function(filename,data){data=data||$data;var text=$utils.$include(filename,data,$filename);"+t+"}",w="'use strict';var $utils=this,$helpers=$utils.$helpers,"+(g?"$line=0,":""),x=s[0],y="return new String("+s[3]+");";r(c.split(h),function(a){a=a.split(i);var b=a[0],c=a[1];1===a.length?x+=e(b):(x+=f(b),c&&(x+=e(c)))});var z=w+x+y;g&&(z="try{"+z+"}catch(e){throw {filename:$filename,name:'Render Error',message:e.message,line:$line,source:"+b(c)+".split(/\\n/)[$line-1].replace(/^\\s+/,'')};}");try{var A=new Function("$data","$filename",z);return A.prototype=n,A}catch(B){throw B.temp="function anonymous($data,$filename) {"+z+"}",B}}var d=function(a,b){return"string"==typeof b?q(b,{filename:a}):g(a,b)};d.version="3.0.0",d.config=function(a,b){e[a]=b};var e=d.defaults={openTag:"<%",closeTag:"%>",escape:!0,cache:!0,compress:!1,parser:null},f=d.cache={};d.render=function(a,b){return q(a,b)};var g=d.renderFile=function(a,b){var c=d.get(a)||p({filename:a,name:"Render Error",message:"Template not found"});return b?c(b):c};d.get=function(a){var b;if(f[a])b=f[a];else if("object"==typeof document){var c=document.getElementById(a);if(c){var d=(c.value||c.innerHTML).replace(/^\s*|\s*$/g,"");b=q(d,{filename:a})}}return b};var h=function(a,b){return"string"!=typeof a&&(b=typeof a,"number"===b?a+="":a="function"===b?h(a.call(a)):""),a},i={"<":"&#60;",">":"&#62;",'"':"&#34;","'":"&#39;","&":"&#38;"},j=function(a){return i[a]},k=function(a){return h(a).replace(/&(?![\w#]+;)|[<>"']/g,j)},l=Array.isArray||function(a){return"[object Array]"==={}.toString.call(a)},m=function(a,b){var c,d;if(l(a))for(c=0,d=a.length;d>c;c++)b.call(a,a[c],c,a);else for(c in a)b.call(a,a[c],c)},n=d.utils={$helpers:{},$include:g,$string:h,$escape:k,$each:m};d.helper=function(a,b){o[a]=b};var o=d.helpers=n.$helpers;d.onerror=function(a){var b="Template Error\n\n";for(var c in a)b+="<"+c+">\n"+a[c]+"\n\n";"object"==typeof console&&console.error(b)};var p=function(a){return d.onerror(a),function(){return"{Template Error}"}},q=d.compile=function(a,b){function d(c){try{return new i(c,h)+""}catch(d){return b.debug?p(d)():(b.debug=!0,q(a,b)(c))}}b=b||{};for(var g in e)void 0===b[g]&&(b[g]=e[g]);var h=b.filename;try{var i=c(a,b)}catch(j){return j.filename=h||"anonymous",j.name="Syntax Error",p(j)}return d.prototype=i.prototype,d.toString=function(){return i.toString()},h&&b.cache&&(f[h]=d),d},r=n.$each,s="break,case,catch,continue,debugger,default,delete,do,else,false,finally,for,function,if,in,instanceof,new,null,return,switch,this,throw,true,try,typeof,var,void,while,with,abstract,boolean,byte,char,class,const,double,enum,export,extends,final,float,goto,implements,import,int,interface,long,native,package,private,protected,public,short,static,super,synchronized,throws,transient,volatile,arguments,let,yield,undefined",t=/\/\*[\w\W]*?\*\/|\/\/[^\n]*\n|\/\/[^\n]*$|"(?:[^"\\]|\\[\w\W])*"|'(?:[^'\\]|\\[\w\W])*'|\s*\.\s*[$\w\.]+/g,u=/[^\w$]+/g,v=new RegExp(["\\b"+s.replace(/,/g,"\\b|\\b")+"\\b"].join("|"),"g"),w=/^\d[^,]*|,\d[^,]*/g,x=/^,+|,+$/g,y=/^$|,+/;e.openTag="{{",e.closeTag="}}";var z=function(a,b){var c=b.split(":"),d=c.shift(),e=c.join(":")||"";return e&&(e=", "+e),"$helpers."+d+"("+a+e+")"};e.parser=function(a){a=a.replace(/^\s/,"");var b=a.split(" "),c=b.shift(),e=b.join(" ");switch(c){case"if":a="if("+e+"){";break;case"else":b="if"===b.shift()?" if("+b.join(" ")+")":"",a="}else"+b+"{";break;case"/if":a="}";break;case"each":var f=b[0]||"$data",g=b[1]||"as",h=b[2]||"$value",i=b[3]||"$index",j=h+","+i;"as"!==g&&(f="[]"),a="$each("+f+",function("+j+"){";break;case"/each":a="});";break;case"echo":a="print("+e+");";break;case"print":case"include":a=c+"("+b.join(",")+");";break;default:if(/^\s*\|\s*[\w\$]/.test(e)){var k=!0;0===a.indexOf("#")&&(a=a.substr(1),k=!1);for(var l=0,m=a.split("|"),n=m.length,o=m[l++];n>l;l++)o=z(o,m[l]);a=(k?"=":"=#")+o}else a=d.helpers[c]?"=#"+c+"("+b.join(",")+");":"="+a}return a},"function"==typeof define?define(function(){return d}):"undefined"!=typeof exports?module.exports=d:this.template=d}();
 \ No newline at end of file
@@ -93,14 +93,14 @@
         .seat {min-height: 100vh;background: #F8F8F9;padding-top: .4rem;}
         .stage {width: 6.3rem;height: 2.14rem;margin: 0 auto; background: #FFF8DD; box-sizing: border-box;border: 1px dashed rgba(255, 205, 0, .5);border-top: .16rem solid #FBCE07;font-size: .32rem;font-weight: 500;color: #FBCE07;display: flex;align-items: center;justify-content: center;}
         .entrance {width: .4rem;height: .6rem;margin-top: .5rem;padding: .1rem;background: #E6F7EF;border: 1px dashed #64DCA1;border-left: none;font-size: .28rem;font-weight: 500;color: #64DCA1;display: flex;align-items: center;justify-content: center;}
-        .seat-list {padding: 0 .94rem;margin-top: .14rem;}
-        .seat-list .list-item {float: left;width: 1rem;height: 1rem;margin-right: .5rem;margin-bottom: .5rem;border-radius: 50%;background: #EDEDED;line-height: 1rem;text-align: center;font-size: .4rem;color: #ccc;font-family: DINAlternate-Bold,DINAlternate;font-weight: bold;}
-        .seat-list .list-item.active {position: relative;padding: .12rem;margin-left: -.12rem;margin-top: -.12rem;margin-right: .38rem;margin-bottom: .38rem;background: url('./img/mobile/seat_active.png') no-repeat;background-size: contain;color: #fff;}
-        .seat-list .list-item:nth-child(4n) {margin-right: 0;}
+        .seat-list {padding: 0 .6rem;margin-top: .14rem;}
+        .seat-list .list-item {float: left;width: 1rem;height: 1rem;margin-right: .32rem;margin-bottom: .4rem;border-radius: 50%;background: #EDEDED;line-height: 1rem;text-align: center;font-size: .4rem;color: #ccc;font-family: DINAlternate-Bold,DINAlternate;font-weight: bold;}
+        .seat-list .list-item.active {position: relative;padding: .12rem;margin: -.12rem .2rem .2rem -.12rem;background: url('./img/mobile/seat_active.png') no-repeat;background-size: contain;color: #fff;}
+        .seat-list .list-item:nth-child(5n) {margin-right: 0;}
         .seat-icon {position: absolute;right: -.38rem;top: -.52rem;width: .76rem;height: .76rem;background: url('./img/mobile/icon_seat.png') no-repeat;background-size: contain;}
         .bottom-btn {position: fixed;bottom: 0;left: 0;z-index: 1;width: 100%;height: 1.08rem;background: url('./img/mobile/btn_bg_red.png') no-repeat;background-size: cover;line-height: 1.08rem;text-align: center;font-size: .32rem;color: #fff;}
-        .vote {min-height: 100vh;}
+        .vote {min-height: 100vh;padding-bottom: 1.2rem;}
         .vote .tip {width: 100%;height: .84rem;background: #FFE7E4;line-height: .84rem;text-align: center;font-size: .28rem;font-weight: 600;color: #D02E1D;}
         .program-title {margin-top: .3rem;padding-left: .4rem;font-size: .28rem;color: #A6A6A6;}
         .program-list {padding-left: .4rem;}
@@ -119,10 +119,15 @@
         .title-text {font-size: .32rem;font-weight: 600;color: #C93120;}
         .dialog-content {width: 5rem;margin: .4rem auto 0;padding: .2rem;line-height: .46rem;font-size: .28rem;color: #C93120;}
         .content-row {text-align: center;}
-        .dialog-btn {width: 4.3rem;height: .94rem;margin: 1rem auto 0;background: url('./img/mobile/dialog_btn_bg.png') no-repeat;background-size: 100% 100%;line-height: .94rem;text-align: center; font-size: .32rem;color: #FBDB97;}
+        .dialog-btn-single {width: 4.3rem;height: .94rem;margin: 1rem auto 0;background: url('./img/mobile/dialog_btn_bg.png') no-repeat;background-size: cover;line-height: .94rem;text-align: center; font-size: .32rem;color: #FBDB97;}
+        .dialog-btn-wrap {width: 4.62rem;margin: 1rem auto;display: flex;justify-content: space-between;}
+        .dialog-btn-item {width: 2.12rem;height: .94rem;line-height: .94rem;text-align: center; font-size: .32rem;}
+        .dialog-theme-btn {background: url('./img/mobile/dialog_btn_confirm.png') no-repeat;background-size: cover;color: #FBDB97;}
+        .dialog-reverse-btn {background: url('./img/mobile/dialog_btn_cancel.png') no-repeat;background-size: cover;color: #CF3727;}
         .dialog-close {position: absolute;top: -.6rem;right: .26rem;width: .76rem;height: .76rem;background: url('./img/mobile/dialog_close.png') no-repeat;background-size: contain;}
-        .clearfix:after {content: " ";display: block;height: 0;visibility: hidden;clear: both}
+        .toast-tip {display: none;position: fixed;bottom: 50%;left: 50%;transform: translateX(-50%);z-index: 11;opacity: 0;padding: 0 .5rem;height: .84rem;background: rgba(0, 0, 0, .8);border-radius: .06rem;transition: opacity 1s ease-out;line-height: .84rem;text-align: center;font-size: .28rem;color: #fff;}
+        .clearfix:after {content: " ";display: block;height: 0;visibility: hidden;clear: both;}
         .hide {display: none;}
     </style>
 </head>
@@ -146,6 +151,7 @@
             <input type="hidden" class="data-img" />
         </div>
         <div class="pic-btn-wrap">
+            <!-- 自拍出境 -->
             <div class="common-btn" onclick="action.goHome()">
                 <img class="common-btn-bg" src="./img/mobile/pic_btn1.png">
             </div>
@@ -155,10 +161,12 @@
             </div>
         </div>
         <div class="pic-btn-wrap hide">
-            <div class="common-btn">
+            <!-- 完美提交 -->
+            <div class="common-btn" onclick="action.uploadImage()">
                 <img class="common-btn-bg" src="./img/mobile/pic_btn2.png">
             </div>
-            <div class="common-btn">
+            <!-- 再拍一次 -->
+            <div class="common-btn" onclick="action.openCamera()">
                 <img class="common-btn-bg" src="./img/mobile/pic_btn3.png">
             </div>
             <div class="pic-btn-album">
@@ -175,19 +183,19 @@
             <div class="info-lantern"></div>
             <div class="info-center">
                 <div class="user-avatar">
-                    <img class="avatar-img" src="./img/mobile/default_avatar.png">
+                    <img class="avatar-img" id="home_user_avatar" src="./img/mobile/default_avatar.png">
                     <div class="avatar-border"></div>
                 </div>
-                <div class="user-name">姓名</div>
+                <div class="user-name" id="home_user_name">姓名</div>
             </div>
             <div class="info-main">
                 <div class="info-main-item">
-                    <div class="item-content">001</div>
+                    <div class="item-content" id="home_prize_no">001</div>
                     <div class="item-label">奖号</div>
                 </div>
                 <i class="info-main-space"></i>
                 <div class="info-main-item">
-                    <div class="item-content">16桌</div>
+                    <div class="item-content"><span id="home_table_no">0</span>桌</div>
                     <div class="item-label">入座区域</div>
                     <div class="enter-btn" onclick="action.goSeat()"></div>
                 </div>
@@ -195,7 +203,7 @@
         </div>
         <img class="home-title" src="./img/mobile/home_title.png">
         <img class="home-list" src="./img/mobile/home_program.png">
-        <div class="home-vote-btn" onclick="action.goVote()">
+        <div class="home-vote-btn" onclick="action.getVoteState()">
             <img class="btn-bg" src="./img/mobile/home_vote_btn.png">
         </div>
         <div class="home-barrage-wrap">
@@ -212,60 +220,22 @@
     <div class="seat wrap hide">
         <div class="stage">舞台</div>
         <div class="entrance">入口</div>
-        <div class="seat-list clearfix">
-            <div class="list-item">1</div>
-            <div class="list-item">2</div>
-            <div class="list-item">3</div>
-            <div class="list-item">4</div>
-            <div class="list-item">5</div>
-            <div class="list-item active">6 <i class="seat-icon"></i></div>
-            <div class="list-item">7</div>
-            <div class="list-item">8</div>
-            <div class="list-item">9</div>
-            <div class="list-item">10</div>
-            <div class="list-item">11</div>
-            <div class="list-item">12</div>
-            <div class="list-item">13</div>
-            <div class="list-item">14</div>
-            <div class="list-item">15</div>
-            <div class="list-item">16</div>
-        </div>
+        <div class="seat-list clearfix"></div>
         <div class="bottom-btn" onclick="action.goHome()">返回</div>
     </div>
     <!-- 投票 -->
     <div class="vote wrap hide">
-        <div class="tip">最多可以票选5个优秀节目！</div>
+        <div class="tip hide">最多可以票选5个优秀节目！</div>
         <div class="program-title">选项（多选）</div>
-        <ul class="program-list">
-            <li class="program-item">
-                <i class="program-item-icon"></i>
-                <span class="program-item-label">舞蹈：《名字太长容易被记住的一段尬舞》</span>
-            </li>
-            <li class="program-item active">
-                <i class="program-item-icon"></i>
-                <span class="program-item-label">舞蹈：《名字太长容易被记住的一段尬舞》</span>
-            </li>
-            <li class="program-item active">
-                <i class="program-item-icon"></i>
-                <span class="program-item-label">舞蹈：《名字太长容易被记住的一段尬舞》</span>
-            </li>
-            <li class="program-item">
-                <i class="program-item-icon"></i>
-                <span class="program-item-label">舞蹈：《名字太长容易被记住的一段尬舞》</span>
-            </li>
-            <li class="program-item">
-                <i class="program-item-icon"></i>
-                <span class="program-item-label">舞蹈：《名字太长容易被记住的一段尬舞》</span>
-            </li>
-        </ul>
-        <div class="bottom-btn" onclick="action.submitVote()">确认投票</div>
+        <ul class="program-list"></ul>
+        <div class="bottom-btn" onclick="action.vote()">确认投票</div>
     </div>
-    <!-- 弹框 -->
-    <div class="dialog-wrap hide">
+    <!-- 姓名不存在 弹框 -->
+    <div class="dialog-wrap hide" id="sign_in_dialog">
         <div class="dialog-main">
-            <div class="dialog-close" onclick="action.switchDialog(false)"></div>
+            <div class="dialog-close" onclick="action.switchDialog('#sign_in_dialog', false)"></div>
             <div class="dialog-title">
                 <i class="title-icon-left"></i>
                 <div class="title-text">温馨提示</div>
@@ -275,7 +245,41 @@
                 <p class="content-row">纳尼？您的姓名竟然不存在！</p>
                 <p class="content-row">快老实交代，你是卧底还是走丢了！</p>
             </div>
-            <div class="dialog-btn" onclick="action.switchDialog(false)">速速联系组委会</div>
+            <div class="dialog-btn-single" onclick="action.switchDialog('#sign_in_dialog', false)">速速联系组委会</div>
+        </div>
+    </div>
+
+    <!-- 未开启投票 弹框 -->
+    <div class="dialog-wrap hide" id="home_dialog">
+        <div class="dialog-main">
+            <div class="dialog-title">
+                <i class="title-icon-left"></i>
+                <div class="title-text">温馨提示</div>
+                <i class="title-icon-right"></i>
+            </div>
+            <div class="dialog-content">
+                <p class="content-row">投票还没开始，还是专心看节目吧～</p>
+            </div>
+            <div class="dialog-btn-single" onclick="action.switchDialog('#home_dialog', false)">我知道了</div>
+        </div>
+    </div>
+
+    <!-- 投票确认 弹框 -->
+    <div class="dialog-wrap hide" id="vote_dialog">
+        <div class="dialog-main">
+            <div class="dialog-title">
+                <i class="title-icon-left"></i>
+                <div class="title-text">温馨提示</div>
+                <i class="title-icon-right"></i>
+            </div>
+            <div class="dialog-content">
+                <p class="content-row">投票完成就不能反悔了，</p>
+                <p class="content-row">确认投票吗？</p>
+            </div>
+            <div class="dialog-btn-wrap">
+                <div class="dialog-btn-item dialog-reverse-btn" onclick="action.switchDialog('#vote_dialog', false)">取消</div>
+                <div class="dialog-btn-item dialog-theme-btn" onclick="action.submitVote()">确认</div>
+            </div>
         </div>
     </div>
@@ -283,11 +287,33 @@
     <script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
     <script src="https://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
     <script src="//cdn.bootcss.com/socket.io/2.0.3/socket.io.js"></script>
-    <script src="mobile.js?t=2"></script>
     <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
+    <script src="./js/qs.js"></script>
+    <script src="./js/template.js"></script>
+    <script src="mobile.js?t=2"></script>
     <script>
         var vConsole = new VConsole();
         action.init();
     </script>
+
+    <script type="text/html" id="seatListTmpl">
+        {{each list as item}}
+            <div class="list-item {{if item.number == userSeat}}active{{/if}}">
+                <span>{{item.number}}</span>
+                {{if item.number == userSeat}}
+                <i class="seat-icon"></i>
+                {{/if}}
+            </div>
+        {{/each}}
+    </script>
+
+    <script type="text/html" id="programListTmpl">
+        {{each list as item index}}
+            <li class="program-item {{if item.checked}}active{{/if}}" onclick="action.selectProgram({{index}})">
+                <i class="program-item-icon"></i>
+                <span class="program-item-label">{{item.item_name}}</span>
+            </li>
+        {{/each}}
+    </script>
 </body>
 </html>
 \ No newline at end of file
 // var baseURL = 'http://dsc-b.vchangyi.com/party/phpapi';
 // var baseURL = 'https://yq.vchangyi.com/party/phpapi';
 var baseURL = 'http://party.vchangyi.com/phpapi';
+var toastTimer = null;
+var displayTimer = null;
 // 页面数据绑定操作
 var action = {
-    // 是否开始签到
-    isRun : 0,
+    isRun : 0, // 是否开始签到
+    userInfo: null, // 用户信息
+    userAvatar: '', // 用户头像
+    programList: [], // 节目列表
     init : function() {
-        this.initBarrage();
-        // var WECHAT_JS_SIGN_URL = '/api.WechatJsSign.php';
-        // var USER_DETAIL_URL = '/api.UserDetail.php';
-        // // 获取微信jsapi签名
-        // baseRquest.get(WECHAT_JS_SIGN_URL, {'url' : location.href}, action.sign);
-        // // 用户信息
-        // baseRquest.get(USER_DETAIL_URL, {}, action.userDetail);
+        // 本地获取用户信息，判断跳转页面
+        var userInfo = localStorage.getItem('userInfo');
+        if (userInfo) {
+            this.userInfo = JSON.parse(userInfo);
+            var userAvatar = localStorage.getItem('userAvatar');
+            if (userAvatar) {
+                this.userAvatar = userAvatar;
+                this.goHome();
+            } else {
+                this.goPic();
+            }
+        }
+
+        // this.initBarrage();
+        
     },
     // 签到
     signIn: function() {
@@ -23,72 +35,51 @@ var action = {
         }
         var url = baseURL + '/apicp.SignIn.php';
         var data = { realname: realname };
-        var callback = function() {
+        var callback = function(data) {
+            action.userInfo = data.data;
+            localStorage.setItem('userInfo', JSON.stringify(action.userInfo));
             $('.sign-input').val('');
-            this.goPic();
+            action.goPic();
         };
-        // baseRquest.post(url, data, callback);
-        this.goPic();
-    },
-    // 配置微信jsapi config，回调触发
-    sign: function(data) {
-        wx.config({
-            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
-            appId: data.appId, // 必填，公众号的唯一标识
-            timestamp: data.timestamp, // 必填，生成签名的时间戳
-            nonceStr: data.nonceStr, // 必填，生成签名的随机串
-            signature: data.signature,// 必填，签名
-            jsApiList: ['chooseImage','uploadImage','getLocalImgData','downloadImage','getLocation'] // 必填，需要使用的JS接口列表
-        });
+        baseRquest.post(url, data, callback);
     },
-    // 回调触发，获取用户信息
-    userDetail : function(data) {
-        // openid不存在
-        if (!data) {
-            alert('数据异常，不要搞事情');
-            return;
-        }
-        // 如果数据中有isLogin，有登录流程
-        if (data.isLogin !== undefined) {
-            location.href = baseURL + '/api.WechatAuth.php';
-        }
-        action.isRun = 1;
-        // 未提交过资料，展示开场
-        if (data.realname === undefined || data.realname == '') {
-            $('#show').show();
-            $('#index').hide();
-            $('#detail').hide();
-        } else {
-            // 提交过资料，展示个人信息
-            $('.detail-realname').html(data.realname);
-            $('.detail-lottery-num').html('NO.' + data.id);
-            $('.detail-head-img').attr('src', data.headimg);
-            $('#show').hide();
-            $('#index').hide();
-            $('#detail').show();
-        }
+    // 获取微信jsapi签名
+    wechatJsSign: function() {
+        var WECHAT_JS_SIGN_URL = baseURL + '/apicp.WechatJsSign.php';
+        var sign = function(data) {
+            wx.config({
+                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
+                appId: data.appId, // 必填，公众号的唯一标识
+                timestamp: data.timestamp, // 必填，生成签名的时间戳
+                nonceStr: data.nonceStr, // 必填，生成签名的随机串
+                signature: data.signature,// 必填，签名
+                jsApiList: ['chooseImage','uploadImage','getLocalImgData','downloadImage'] // 必填，需要使用的JS接口列表
+            });
+        };
+        baseRquest.get(WECHAT_JS_SIGN_URL, {'url' : location.href}, sign);
     },
     // 进入拍照页
     goPic: function() {
         $('.sign-in').hide();
         $('.pic').show();
+        // 微信 SDK config
+        this.wechatJsSign();
     },
     goHome: function() {
         $('.home').show();
         $('.pic').hide();
         $('.seat').hide();
+        if (action.userInfo) {
+            $('#home_user_avatar').attr('src', action.userAvatar);
+            $('#home_user_name').html(action.userInfo.realname);
+            $('#home_prize_no').html(action.userInfo.prize_no);
+            $('#home_table_no').html(action.userInfo.table_no);
+        }
     },
     goSeat: function() {
         $('.seat').show();
         $('.home').hide();
-    },
-    goVote: function() {
-        $('.vote').show();
-        $('.home').hide();
-    },
-    submitVote: function() {
-        $('.home').show();
-        $('.vote').hide();
+        this.getSeatList();
     },
     // 打开摄像头
     openCamera: function() {
@@ -106,17 +97,14 @@ var action = {
                     localId: localIds.toString(), // 需要上传的图片的ID，由chooseImage接口获得
                     isShowProgressTips: 1, // 进度提示
                     success: function (res) {
-                        var serverId = res.serverId; // 返回图片的服务器端ID，即mediaId
-                        $(".data-img").val(serverId);
+                        var serverId = res.serverId; // 返回图片的服务器端ID，即 mediaId
+                        $('.pic-avatar').val(serverId);
                         console.log(serverId);
                         wx.downloadImage({
                             serverId: serverId, // 需要下载的图片的服务器端ID，由uploadImage接口获得
                             isShowProgressTips: 1, // 默认为1，显示进度提示
                             success: function (res) {
                                 var localId = res.localId; // 返回图片下载后的本地ID
-                                $('#show').hide();
-                                $('#index').show();
-                                $('#detail').hide();
                                 action.wxgetLocalImgData(localId, 1);
                             }
                         });
@@ -129,69 +117,130 @@ var action = {
         });
     },
     // 展示选中的图片
-    wxgetLocalImgData : function(e,num){
-        var headimg = $(".head-img-show");   
-        if(window.__wxjs_is_wkwebview){
+    wxgetLocalImgData: function(localId, num){  
+        if (window.__wxjs_is_wkwebview) {
             wx.getLocalImgData({
-                localId: e, // 图片的localID
-                success: function (res) {
+                localId: localId,
+                success: function(res) {
                     var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
                     localData = localData.replace('jgp', 'jpeg'); //iOS 系统里面得到的数据，类型为 image/jgp,因此需要替换一下                                            
-                    $(headimg).attr("src", localData);
+                    $('.pic-avatar').attr("src", localData);
                 },
-                fail:function(res){
+                fail: function(res) {
                     alert("显示失败");
                 }
             });
-        }else{
-            $(headimg).attr("src", e);
+        } else {
+            $('.pic-avatar').attr("src", localId);
         }
     },
-
-    // 提交签到申请
-    submit : function(){
-        var mediaId = $(".data-img").val();
-        var realname = $(".data-realname").val().replace( /^\s*/, '');
-        if (realname == '' || mediaId == '' || realname == '姓名：陈独秀') {
-            alert('提交的资料数据不完整');
+    // 上传头像
+    uploadImage: function() {
+        var mediaId = $('.pic-avatar').val();
+        if (!mediaId) {
             return;
         }
-        wx.getLocation({
-            type: 'gcj02',
-            success: (res) => {
-                console.log(res);
-                let latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
-                let longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
-                let data = {
-                    mediaId : mediaId,
-                    realname : realname,
-                    latitude : latitude,
-                    longitude : longitude
-                }
-                // 提交签到
-                let ADD_USER_URL = '/api.AddUser.php';
-                baseRquest.post(ADD_USER_URL, data, this.addUserResult);
+        var data = {
+            id: action.userInfo.id,
+            mediaId : mediaId
+        };
+        var url = baseURL + '/apicp.UploadHeadImg.php';
+        var callback = function(data) {
+            // TODO 存储用户头像
+            action.userAvatar = data.headimg;
+            action.goHome();
+        };
+        baseRquest.post(url, data, callback);
+    },
+    // 获取座位列表
+    getSeatList: function() {
+        var url = baseURL + '/apicp.TablePositionList.php';
+        var callback = function(data) {
+            var html = template('seatListTmpl', {
+                list: data.data,
+                userSeat: action.userInfo.table_no
+            });
+            $('.seat-list').html(html);
+        };
+        baseRquest.post(url, '', callback);
+    },
+    // 判断是否开启投票通道
+    getVoteState: function() {
+        var url = baseURL + '/apicp.GetSetting.php';
+        var callback = function(data) {
+            if (data.data.isStartVote == 1) {
+                action.getProgramList();
+            } else {
+                action.switchDialog('#home_dialog', true);
             }
-        });
+        };
+        baseRquest.get(url, '', callback);
     },
-    // 增加成功，重新加载页面，进入用户详情页
-    addUserResult : function(data) {
-        console.log(data);
-        let url = window.location.href; //获取当前url
-        let key = '?t=';
-        if (url.indexOf("?") > 0) {
-            key = '&t=';
+    // 获取节目列表
+    getProgramList: function() {
+        var url = baseURL + '/apicp.ItemList.php';
+        var callback = function(data) {
+            var user_vote = data.data.user_vote;
+            var items = data.data.item;
+            if (user_vote && user_vote.length > 0) {
+                action.showToast('你已经投过票了哦');
+            } else {
+                $('.vote').show();
+                $('.home').hide();
+                items.map(function(item) {
+                    item.checked = false;
+                });
+                var html = template('programListTmpl', { list: items });
+                $('.program-list').html(html);
+            }
+            action.programList = items;
+            
+        };
+        baseRquest.post(url, {user_id: action.userInfo.id}, callback);
+    },
+    // 选择节目
+    selectProgram: function(index) {
+        if (this.programList[index].checked) {
+            $('.program-item').eq(index).removeClass('active');
+            $('.vote .tip').hide();
+        } else {
+            var selectedList = this.programList.filter(item => item.checked);
+            if (selectedList.length >= 5) {
+                $('.vote .tip').show();
+                return;
+            }
+            $('.program-item').eq(index).addClass('active');
         }
-       
-        location.href = url + key + (new Date()).valueOf();
+        this.programList[index].checked = !this.programList[index].checked;
     },
-    // 投票
-    vote : function(){
-        let VOTE_URL = '/api.Vote.php';
-        baseRquest.get(VOTE_URL, {a:'a'}, (data)=>{
-            console.log(data);
-            location.href = data.url;
-        });
+    // 点击确认投票
+    vote: function() {
+        var selectedList = this.programList.filter(item => item.checked);
+        console.log('selected: ', selectedList);
+        if (selectedList.length === 0) {
+            action.showToast('请先选择节目');
+            return;
+        }
+        this.switchDialog('#vote_dialog', true);
+    },
+    // 投票请求
+    submitVote: function() {
+        let VOTE_URL = '/apicp.ItemVote.php';
+        var itemIds = this.programList.filter(item => item.checked).map(item => item.id).join(',');
+        console.log('itemIds: ', itemIds);
+        var data = {
+            user_id: action.userInfo.id,
+            item_ids: itemIds
+        };
+        var callback = function() {
+            action.showToast('投票成功！');
+            action.switchDialog('#vote_dialog', false)
+            setTimeout(function() {
+                $('.home').show();
+                $('.vote').hide();
+            }, 1000);
+        };
+        baseRquest.post(VOTE_URL, data, callback);
     },
     // 发送弹幕
     initBarrage: function() {
@@ -224,13 +273,41 @@ var action = {
             $('.send-btn').removeClass('active');
         }
     },
-    switchDialog: function(isShow) {
+    switchDialog: function(dom, isShow) {
         if (isShow) {
-            $('.dialog-wrap').show()
+            $(dom).show();
+            $('body').css({
+                height: '100vh',
+                overflow: 'hidden'
+            });
         } else {
-            $('.dialog-wrap').hide()
+            $(dom).hide();
+            $('body').css({
+                'min-height': '100%',
+                overflow: 'auto'
+            });
         }
-    }
+    },
+    // toast提示
+    showToast: function(content, time = 1000) {
+        if (toastTimer != null) {
+            clearTimeout(toastTimer);
+            clearTimeout(displayTimer);
+        }
+        if ($('#toast').get().length == 0) {
+            $('body').append('<div id="toast" class="toast-tip"></div>');
+        }
+        $('#toast').show();
+        $('#toast').css('opacity', 1);
+        $('#toast').html(content);
+        toastTimer = setTimeout(function() {
+            $('#toast').css('opacity', 0);
+            displayTimer = setTimeout(
+                function() {
+                    $('#toast').hide();
+                }, 1000);
+        }, time);
+    },
 }
 // api接口数据请求，数据交互引用的axios
@@ -240,9 +317,8 @@ let baseRquest = {
         axios.defaults.baseURL = baseURL;
         axios.get(url, {
             params : params
-        }).then(function (response) {
-            if (response.status == 200)
-            {
+        }).then(function(response) {
+            if (response.status == 200) {
                 data = response.data;
                 if (!!data) {
                     // 过滤错误信息，统一抛出
@@ -252,39 +328,43 @@ let baseRquest = {
                         callback(data.result);
                     }
                 }
-            }else {
+            } else {
                 alert('get无法访问接口');
             }
-        })
-        .catch(function (error) {
+        }).catch(function(error) {
+            console.log(error)
         });
     },
-
-     // post请求
-     post: function(url, params, callback) {
+    // post请求
+    post: function(url, params, callback) {
         axios.defaults.baseURL = baseURL;
         let data = new URLSearchParams();
         Object.keys(params).forEach(function(key){
             data.append(key, params[key]);
         });
-        axios.post(url, data,{headers: { 'Content-Type': 'application/x-www-form-urlencoded','Authorization':'123'}})
-            .then(function (response) {
-            if (response.status == 200)
-            {
+        axios.post(url, data, {
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded'
+            }
+        }).then(function(response) {
+            if (response.status == 200) {
                 data = response.data;
                 if (!!data) {
                     // 过滤错误信息，统一抛出
                     if (data.errcode != 0 && data.errcode != 200) {
-                        alert(data.errmsg);
+                        if (url.search('SignIn') !== -1) {
+                            action.switchDialog('#sign_in_dialog', true);
+                        } else {
+                            alert(data.errmsg);
+                        }
                     } else {
                         callback(data.result);
-                    }   
+                    }
                 }
-            }else {
+            } else {
                 alert('post无法访问接口');
             }
-        })
-        .catch(function (error) {
+        }).catch(function(error) {
             console.log(error);
         });
     }