[年会抽奖]调试上传图片

zouyang0921
1 parent a5402981
Showing 4 changed files with 107 additions and 143 deletions
lottery.html
lottery.js
mobile.html
mobile.js
@@ -103,11 +103,11 @@
             <div class="avatar">
                 <div class="avatar-img">
                     <div class="avatar-list clearfix">
-                        <img class="avatar-item" src="./img/mobile/vote_active.png">
+                        <img class="avatar-item" src="./img/mobile/default_avatar.png">
                     </div>
                 </div>
                 <div class="winner hide">
-                    <img class="avatar-item" src="./img/mobile/vote_active.png">
+                    <img class="avatar-item" src="./img/mobile/default_avatar.png">
                 </div>
                 <div class="avatar-bg"></div>
             </div>
@@ -116,7 +116,7 @@
                 <div class="content">
                     <div class="scroll-wrap">
                         <div class="scroll-list clearfix">
-                            <span class="scroll-item">赵晨昕</span>
+                            <span class="scroll-item"></span>
                         </div>
                     </div>
                     <div class="winner-name"></div>
@@ -127,7 +127,7 @@
                 <div class="content">
                     <div class="scroll-wrap">
                         <div class="scroll-list clearfix">
-                            <span class="scroll-item">001</span>
+                            <span class="scroll-item"></span>
                         </div>
                     </div>
                     <div class="winner-no"></div>
@@ -9,32 +9,7 @@ let prizeList = [&#39;五等奖&#39;, &#39;四等奖&#39;, &#39;三等奖&#39;, &#39;二等奖&#39;, &#39;一等奖&#39;
 // 抽奖页面
 let action = {
     prizeId: '', // 奖项ID
-    userList: [ // 用户列表
-        {
-            "id": "1",
-            "realname": "张三",
-            "headimg": "./img/mobile/logo.png",
-            "prize_no": "001"
-        },
-        {
-            "id": "2",
-            "realname": "李四",
-            "headimg": "./img/mobile/dialog_close.png",
-            "prize_no": "002"
-        },
-        {
-            "id": "3",
-            "realname": "王麻子",
-            "headimg": "./img/mobile/vote_active.png",
-            "prize_no": "003"
-        },
-        {
-            "id": "4",
-            "realname": "路人甲",
-            "headimg": "./img/mobile/icon_seat.png",
-            "prize_no": "004"
-        }
-    ],
+    userList: [], // 用户列表
     currentUser: null, // 当前显示的用户
     // 初始化数据
     init: function() {
@@ -57,17 +32,25 @@ let action = {
         } else {
             $('.select-page').hide();
             $('.result-page').css('display', 'flex');
-
+            action.getUserList();
+            // 初始化头像部分
             $('.avatar-img, .user-info .scroll-wrap').show();
             $('.winner, .winner-name, .winner-no, .result-item').hide();
-            this.initUserList();
-
+            // 初始化按钮
             $('.start-btn').show();
             $('.stop-btn, .continue-btn').hide();
             $('.result-title').html(prizeList[self.prizeId - 1]);
         }
     },
+    // 控制显示弹框
+    switchDialog: function(isShow) {
+        if (isShow) {
+            $('.dialog').show();
+        } else {
+            $('.dialog').hide();
+        }
+    },
     // 进入抽奖页面
     goLottery: function() {
         if (!this.prizeId) {
@@ -76,13 +59,26 @@ let action = {
         }
         this.togglePage(false);
     },
-    // 控制显示弹框
-    switchDialog: function(isShow) {
-        if (isShow) {
-            $('.dialog').show();
-        } else {
-            $('.dialog').hide();
-        }
+    // 获取中奖记录
+    getWinnerList: function() {
+        let url = baseURL + "/apicp.LotteryList.php";
+        let data = {
+            prize_id: action.prizeId
+        };
+        let callback = function(res) {
+            if (res.data.length > 0) {
+
+            }
+        };
+        baseRquest.get(url, data, callback);
+    },
+    getUserList: function() {
+        var url = '/apicp.UserList.php';
+        var callback = function(res) {
+            action.userList = res.data;
+            action.initUserList();
+        };
+        baseRquest.get(url, '', callback);
     },
     initUserList() {
         let imgStr = '';
@@ -117,25 +113,27 @@ let action = {
         imgTimer = this.lotteryAnimation($('.avatar-list'), '.avatar-item', 244);
         nameTimer = this.lotteryAnimation($('.user-name .scroll-list'), '.scroll-item', 146);
         prizeNoTimer = this.lotteryAnimation($('.user-no .scroll-list'), '.scroll-item', 146);
-        
-        // 请求抽奖接口
-        // let award = $('.user-award select').val();
-        // let url = "/apicp.lottery.php";
-        // baseRquest.post(url, {award : award}, data =>{
-        //     console.log(data);
-        //     if (data.length == 0) {
-        //         alert('没有多余的号码可以抽出');
-        //         location.reload();
-        //     }
-        //     // 绑定数据到页面
-        //     this.bindData.winner.realname = data.realname;
-        //     this.bindData.winner.number = data.user_id;
-        //     this.bindData.winner.headimg = data.headimg;
-        // });
-        
+    },
+    // 抽奖动画，speed: 每次移动多少像素
+    lotteryAnimation: function(dom, child, speed) {
+        var i = 0;
+        var interval = 100; // 定时器的速度
+        dom.append(dom.find(child).eq(0).clone());
+        var size = dom.find(child).size();
+        var itemWidth = parseInt($(child).css('width'));
+        dom.css('width', itemWidth * size + 'px');
+        var timer = setInterval(() => {
+            var left = speed * i;
+            if (left >= itemWidth * (size - 1)) {
+                i = 0;
+            }
+            dom.css('left', -left + 'px');
+            i += 1;
+        }, interval);
+        return timer;
     },
     // 停止
-    stop: function(e){
+    stop: function(e) {
         // 按钮效果
         $('.start-btn').hide();
         $('.stop-btn').hide();
@@ -170,24 +168,8 @@ let action = {
         $('.result-item').show();
         // 中奖名单列表重置
     },
-    // 抽奖动画，speed: 每次移动多少像素
-    lotteryAnimation: function(dom, child, speed) {
-        var i = 0;
-        var interval = 100; // 定时器的速度
-        dom.append(dom.find(child).eq(0).clone());
-        var size = dom.find(child).size();
-        var itemWidth = parseInt($(child).css('width'));
-        dom.css('width', itemWidth * size + 'px');
-        var timer = setInterval(() => {
-            var left = speed * i;
-            if (left >= itemWidth * (size - 1)) {
-                i = 0;
-            }
-            dom.css('left', -left + 'px');
-            i += 1;
-        }, interval);
-        return timer;
-    },
+    // 抽奖请求
+
     // 继续抽奖
     reset: function() {
         $('.radio-group .radio-item').removeClass('active');
@@ -204,22 +186,6 @@ let action = {
         baseRquest.post(url, {id : item.id}, data => {
             action.winnerList();
         });
-    },
-    // 中奖名单,传入参数：中奖类型(一等，二等)，type=2是中奖名单
-    winnerList:function(){
-        // 获取中奖者名单，
-        let url = "/apicp.GetUserList.php";
-        let award = $('.user-award select').val();
-        baseRquest.get(url, {award : award, type : 2}, data => {
-            this.bindData.lottery.winnerCount = data.length;
-            this.bindData.lottery.award = $('.user-award select').val();
-            for (let i = 1; i <= data.length; i++) {
-                data[i-1].no = i;
-            }
-            action.winnerListData = data;
-            console.log(data);
-            dataListBind('winner-bind', 'winner', data);
-        });
     }
 }
 // 系统设置动作
@@ -429,17 +395,11 @@ let dataBind = {
 let baseRquest = {
     // get请求
     get: function(url, params, callback) {
-        let token = localStorage["token"];
         axios.defaults.baseURL = baseURL;
         axios.get(url, {
-            params : params,
-            headers: {
-                'Content-Type': 'application/x-www-form-urlencoded',
-                 token: token
-                }
-        }).then(function (response) {
-            if (response.status == 200)
-            {
+            params : params
+        }).then(function(response) {
+            if (response.status == 200) {
                 data = response.data;
                 if (!!data) {
                     // 过滤错误信息，统一抛出
@@ -449,45 +409,44 @@ let baseRquest = {
                         callback(data.result);
                     }
                 }
-            }else {
+            } else {
                 alert('get无法访问接口');
             }
-            })
-            .catch(function (error) {
-            });
+        }).catch(function(error) {
+            console.log(error)
+        });
     },
-
-     // post请求
-     post: function(url, params, callback) {
-        let token = localStorage["token"];
+    // 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',
-                token: token
+        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);
-                } else {
-                    callback(data.result);
-                }   
+        }).then(function(response) {
+            if (response.status == 200) {
+                data = response.data;
+                if (!!data) {
+                    // 过滤错误信息，统一抛出
+                    if (data.errcode != 0 && data.errcode != 200) {
+                        if (url.search('SignIn') !== -1) {
+                            action.switchDialog('#sign_in_dialog', true);
+                        } else {
+                            alert(data.errmsg);
+                        }
+                    } else {
+                        callback(data.result);
+                    }
+                }
+            } else {
+                alert('post无法访问接口');
             }
-        }else {
-            alert('post无法访问接口');
-        }
-        })
-        .catch(function (error) {
+        }).catch(function(error) {
             console.log(error);
         });
     }
-}
 \ No newline at end of file
+}
@@ -62,7 +62,7 @@
         .pic-img-bg {position: absolute;top: 0;left: 0;z-index: 1;width: 100%;height: 100%;background: url('./img/mobile/pic_avatar_bg.png') no-repeat;background-size: 100% 100%;}
         .pic-avatar {width: 2.84rem;height: 2.84rem;border-radius: 50%;}
         .pic-btn-wrap {position: absolute;bottom: 1.2rem;left: 50%;transform: translateX(-50%);width: 6.82rem;}
-        .pic-btn-album {display: flex;align-items: center;justify-content: center;margin-top: .3rem;}
+        .pic-btn-album {width: 3rem;margin: .3rem auto 0; display: flex;align-items: center;justify-content: center;}
         .pic-btn-album .album-text {font-size: .28rem;color: #fff;margin-right: .1rem;}
         .pic-btn-album .pic-arrow {width: .32rem;height: .32rem;background: url('./img/mobile/pic_arrow.png') no-repeat;background-size: contain;}
@@ -152,10 +152,10 @@
         </div>
         <div class="pic-btn-wrap">
             <!-- 自拍出境 -->
-            <div class="common-btn" onclick="action.goHome()">
+            <div class="common-btn" onclick="action.openCamera(1)">
                 <img class="common-btn-bg" src="./img/mobile/pic_btn1.png">
             </div>
-            <div class="pic-btn-album">
+            <div class="pic-btn-album" onclick="action.openCamera(2)">
                 <span class="album-text">还是相册选一张吧</span>
                 <i class="pic-arrow"></i>
             </div>
@@ -166,10 +166,10 @@
                 <img class="common-btn-bg" src="./img/mobile/pic_btn2.png">
             </div>
             <!-- 再拍一次 -->
-            <div class="common-btn" onclick="action.openCamera()">
+            <div class="common-btn" onclick="action.openCamera(1)">
                 <img class="common-btn-bg" src="./img/mobile/pic_btn3.png">
             </div>
-            <div class="pic-btn-album">
+            <div class="pic-btn-album" onclick="action.openCamera(2)">
                 <span class="album-text">再翻翻相册吧</span>
                 <i class="pic-arrow"></i>
             </div>
@@ -81,16 +81,21 @@ var action = {
         $('.home').hide();
         this.getSeatList();
     },
-    // 打开摄像头
-    openCamera: function() {
-        // if (action.isRun == 0) {
-        //     alert('尚未开启，请稍后尝试');
-        //     return;
-        // }
+    // 打开摄像头，type=1: 唤起摄像头，type=2: 打开相册
+    openCamera: function(type = 1) {
+        console.log('type: ', type)
+        var sourceType = [];
+        if (type === 1) {
+            sourceType = ['camera'];
+        } else if (type === 2) {
+            sourceType = ['album'];
+        } else {
+            sourceType = ['camera', 'album'];
+        }
         wx.chooseImage({
             count: 1, // 默认9
             sizeType: ['compressed'], // 'original', 'compressed'指定是原图还是压缩图，默认都有
-            sourceType: ['camera', 'album'], // 'album', 'camera'指定来源是相册还是相机，默认都有
+            sourceType: sourceType, // 'album', 'camera'指定来源是相册还是相机，默认都有
             success: function(res) {
                 var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                 wx.uploadImage({
@@ -146,8 +151,8 @@ var action = {
         };
         var url = baseURL + '/apicp.UploadHeadImg.php';
         var callback = function(data) {
-            // TODO 存储用户头像
             action.userAvatar = data.headimg;
+            localStorage.setItem('userAvatar', action.userAvatar);
             action.goHome();
         };
         baseRquest.post(url, data, callback);
@@ -310,7 +315,7 @@ var action = {
 }
 // api接口数据请求，数据交互引用的axios
-let baseRquest = {
+var baseRquest = {
     // get请求
     get: function(url, params, callback) {
         axios.defaults.baseURL = baseURL;