个人设置--头像上传

姜敏
Commit d9d6d4f91bb2049d8e5a16e0b9b67ca5ccbeb544 1 parent 1115bcfa
Showing 9 changed files with 164 additions and 49 deletions
apps/me/controllers/setting.js
apps/me/index.js
apps/me/models/setting.js
apps/me/router.js
apps/me/views/partial/setting/content.hbs
package.json
public/img/me/head.swf
public/js/me/setting.page.js
public/js/me/setting/modifyHead.js
--- a/apps/me/controllers/setting.js
View file @d9d6d4f
+++ b/apps/me/controllers/setting.js
View file @d9d6d4f
@@ -12,12 +12,12 @@ const accountModel = require('../models/account');
 const passportHelper = require('../../passport/models/passport-helper');
 const Promise = require('bluebird');
 const co = Promise.coroutine;
-
-
+var fs = require('fs');
+var path = require('path');
+const uuid = require('uuid');
+const os = require('os');
 const captchaUrl = helpers.urlFormat('/passport/images', {t: Date.now()});
-// const captchaUrl = 'http://localhost:6003/passport/images?t=' + new Date().getTime();
-
 // 根据type获取标题
 const _getTitle = (type)=> {
     let typeName;
@@ -73,7 +73,7 @@ const _getTitle = (type)=> {
  * 个人设置页面加载
  */
 const index = (req, res, next) => {
-    let uid = req.user.uid;
+    let uid = req.user.uid || '8041246';
     settingModel.getUserInfo(uid).then(result=> {
         result.info.gender ? result.genders[result.info.gender - 1].checked = true :
@@ -82,6 +82,7 @@ const index = (req, res, next) => {
         result.info.mobile = result.info.mobile ?
         result.info.mobile.substring(0, 3) + '****' + result.info.mobile.substring(7, 11) : '';
         result.stepUrl = '/me/setting/step1';
+
         res.display('index', {
             module: 'me',
             page: 'setting',
@@ -343,6 +344,40 @@ const validate2 = (req, res)=> {
     })();
 };
+
+/**
+ * 文件处理中间件
+ * @param req
+ * @param res
+ * @param next
+ */
+function getfilePath(req, res, next) {
+    const fid = uuid.v4();
+    const filePath = path.join(os.tmpdir(), fid);
+    const uploadStream = fs.createWriteStream(filePath);
+
+    req.filePath = filePath;
+    req.pipe(uploadStream);
+    uploadStream.on('finish', function() {
+        next();
+    });
+}
+
+/**
+ * 修改头像
+ * @param req
+ * @param res
+ */
+const modifyHead = (req, res)=> {
+    let uid = req.user.uid || '8041246';
+    let bucket = 'yhb-head';
+    let filePath = req.filePath;
+
+    settingModel.modifyHead(uid, bucket, filePath).then(result=> {
+        res.send(result);
+    });
+};
+
 module.exports = {
     index,
     editUserInfo,
@@ -352,5 +387,7 @@ module.exports = {
     edit,
     success,
     validate1,
-    validate2
+    validate2,
+    getfilePath,
+    modifyHead
 };
--- a/apps/me/index.js
View file @d9d6d4f
+++ b/apps/me/index.js
View file @d9d6d4f
@@ -9,6 +9,7 @@ var express = require('express'),
     path = require('path'),
     hbs = require('express-handlebars');
+
 var app = express();
 // set view engin
@@ -28,6 +29,7 @@ app.engine('.hbs', hbs({
     helpers: global.yoho.helpers
 }));
+
 // router
 app.use(require('./router'));
--- a/apps/me/models/setting.js
View file @d9d6d4f
+++ b/apps/me/models/setting.js
View file @d9d6d4f
@@ -8,6 +8,7 @@
 const api = global.yoho.API;
 const crypto = require('crypto');
+const fs = require('fs');
 /**
  * 查询个人详细信息
@@ -76,11 +77,11 @@ const getUserInfo = (uid) => {
 };
 /* const getVerifyInfo = (uid)=> {
-    return api.get('', {
-        method: 'web.passport.getUserVerifyInfo',
-        uid: uid
-    }).then(result => result);
-};*/
+ return api.get('', {
+ method: 'web.passport.getUserVerifyInfo',
+ uid: uid
+ }).then(result => result);
+ };*/
 /**
  * 编辑个人详细信息
@@ -179,9 +180,27 @@ const decipheriv = (data) => {
     return decipherChunks.join('');
 };
+/**
+ * 上传头像
+ * @param uid
+ * @param bucket
+ * @param fileData
+ */
+const modifyHead = (uid, bucket, fileData)=> {
+    return api.postFile('', {
+        method: 'app.passport.modifyHead',
+        uid: uid,
+        bucket: bucket
+    }, {
+        file_data: fs.createReadStream(fileData)
+    });
+};
+
+
 module.exports = {
     getUserInfo: getUserInfo,
     editUserInfo: editUserInfo,
     cipheriv: cipheriv,
-    decipheriv: decipheriv
+    decipheriv: decipheriv,
+    modifyHead: modifyHead
 };
--- a/apps/me/router.js
View file @d9d6d4f
+++ b/apps/me/router.js
View file @d9d6d4f
@@ -10,7 +10,6 @@ const router = require('express').Router(); // eslint-disable-line
 const cRoot = './controllers';
 const auth = require(`${global.middleware}/auth`);
-// const auth = require(`${global.middleware}/auth`);
 // 订单
 const order = require(`${cRoot}/order`);
@@ -77,6 +76,8 @@ router.post('/setting/step2/:type', auth, setting.validate2);
 // 第三步
 router.get('/setting/step3/:type', auth, setting.success);
+router.post('/setting/modifyHead', auth, setting.getfilePath, setting.modifyHead);
+
 router.post('/account/changePwd', auth, account.changePwd);
 router.post('/account/sendMobileMsg', auth, account.sendMobileMsg);
 router.post('/account/checkVerifyMsg', auth, account.checkVerifyMsg);
@@ -84,7 +85,6 @@ router.post('/account/sendVerifyEmail', auth, account.sendVerifyEmail);
 router.post('/account/checkVerifyMobile', auth, account.checkVerifyMobile);
-
 // 我的收藏
 router.get('/collection', auth, favorite.goods);
 router.get('/collection/brand', auth, favorite.brand);
--- a/apps/me/views/partial/setting/content.hbs
View file @d9d6d4f
+++ b/apps/me/views/partial/setting/content.hbs
View file @d9d6d4f
@@ -40,18 +40,16 @@
                     <a class="blue  operation" href="{{stepUrl}}/bindMobile">绑定</a>
                 {{/if}}
             </div>
-           <!-- <div class="form-group">
+           <div class="form-group">
                 <label class="label-name">邮箱:</label>
                 {{#if info.verify_email}}
                     <input class="input no-edit" value="{{info.mobile}}">
-                    &lt;!&ndash;<a class="blue  operation" href="{{stepUrl}}/modifyEmail">修改</a>&ndash;&gt;
-                    <a class="blue  operation">修改</a>
+                    <!--<a class="blue  operation" href="{{stepUrl}}/modifyEmail">修改</a>-->
                 {{else}}
                     <input class="input" type="text" placeholder="请绑定邮箱" disabled>
-                    &lt;!&ndash;<a class="blue  operation" href="{{stepUrl}}/bindEmail">绑定</a>&ndash;&gt;
-                    <a class="blue  operation">绑定</a>
+                   <!--<a class="blue  operation" href="{{stepUrl}}/bindEmail">绑定</a>-->
                 {{/if}}
-            </div>-->
+            </div>
             <div class="form-group">
                 <label class="label-name">出生日期:</label>
                 <input id="birthday" class="input" type="text" value="{{info.birthday}}">
@@ -73,7 +71,8 @@
         </div>
         <div class="user-icon inline-block">
             {{#if info.head_ico}}
-                <img src="{{info.head_ico}}">
+                <div class="show-ico"><img src="{{info.head_ico}}"></div>
+                <div class="edit-ico hide"></div>
             {{else}}
                 <div class="show-ico"></div>
                 <div class="edit-ico hide"></div>
--- a/package.json
View file @d9d6d4f
+++ b/package.json
View file @d9d6d4f
@@ -61,7 +61,7 @@
     "uuid": "^2.0.2",
     "winston": "^2.2.0",
     "winston-daily-rotate-file": "^1.1.4",
-    "yoho-node-lib": "0.0.23"
+    "yoho-node-lib": "0.0.28"
   },
   "devDependencies": {
     "autoprefixer": "^6.3.6",
--- a/public/img/me/head.swf 0 → 100644
View file @d9d6d4f
+++ b/public/img/me/head.swf 0 → 100644
View file @d9d6d4f
--- a/public/js/me/setting.page.js
View file @d9d6d4f
+++ b/public/js/me/setting.page.js
View file @d9d6d4f
@@ -7,23 +7,20 @@ var cascadingAddress = require('../plugins/cascading-address');
 var dialog = require('../plugins/dialog');
 var _dialog = dialog.Dialog;
 var _alert = dialog.Alert;
+var modifyHead = require('./setting/modifyHead');
+var tip;
+
+var headHtml = modifyHead.swfobject('head', '600px', '400px', '../../img/me/head.swf?code=' + Math.random() +
+    '&upload_url=' + encodeURIComponent(location.protocol + '//' +
+        location.hostname + ':' + location.port + '/me/setting/modifyHead'));
 var Bll = {
     setIcon: function() {
         var html = [];
-        html.push('<form id="upload_form"  method="post" action="" onsubmit="return checkForm()">');
-        html.push('<div  class="post-picture inline-block">');
-        html.push('<div class="choose-avatar"></div>');
-        html.push('<div class="post-file"><input id="avatar" name="avatar" type="file" value="点击上传"></div>');
-        html.push('<p class="post-limit">支持JPG、GIF、PNG、JPEG、BMP格式，文件小于3M</p>');
-        html.push('</div>');
-        html.push(' <div class="show-picture inline-block" ><img id="post-picture">');
-        html.push(' </div>');
-        html.push('<div class="preview-picture inline-block">');
-        html.push('<div class="small-preview"></div>');
+        html.push('<div style="width: 600px;height: 400px">');
+        html.push(headHtml);
         html.push('</div>');
-        html.push('</form>');
         return html.join('');
     },
@@ -63,9 +60,8 @@ $('.user-icon').hover(function() {
 // 编辑头像打开弹框
 $(document).on('click', '.edit-ico', function() {
-    var tip = new _dialog({
+    tip = new _dialog({
         className: 'settled-success',
-        title: '自定义头像',
         content: Bll.setIcon(),
         btns: [
             {
@@ -73,7 +69,7 @@ $(document).on('click', '.edit-ico', function() {
                 btnClass: ['apply'],
                 name: '保存',
                 cb: function() {
-                    tip.close();
+                    modifyHead.uploadImage();
                 }
             },
             {
@@ -88,19 +84,21 @@ $(document).on('click', '.edit-ico', function() {
     }).show();
 });
-
-$(document).on('change', '#avatar', function() {
-    /* var oFile = $("#avatar")[0].files[0];
-     var oImage = document.getElementById('post-picture');
-     var oReader = new FileReader();
-     oReader.onload = function (e) {
-     oImage.src = e.target.result;
-     $(".post-picture").hide();
-     $("#post-picture").show();
-     };
-     oReader.readAsDataURL(oFile);*/
-});
-
+/**
+ * 头像上传处理
+ * @param obj
+ */
+window.receive_image_bytes = function(obj) {
+    var result = JSON.parse(obj);
+
+    if (result.code === 200) {
+        tip.close();
+        $('.show-ico img').attr('src', result.data.image_url.split('?')[0]);
+    } else {
+        tip.close();
+        new _alert('头像修改失败！').show();
+    }
+};
 $(function() {
     var address = cascadingAddress({el: '#address'});
--- a/public/js/me/setting/modifyHead.js 0 → 100644
View file @d9d6d4f
+++ b/public/js/me/setting/modifyHead.js 0 → 100644
View file @d9d6d4f
+/**
+ * [个人中心]个人设置-编辑头像中flash相关操作
+ * @author: jiangmin
+ * @date: 2016/07/14
+ */
+
+/**
+ * 设置flash样式，并返回html
+ * @param id
+ * @param width
+ * @param height
+ * @param url
+ * @returns {string}
+ */
+function swfobject(id, width, height, url) {
+    var _html = '<object id="' + id + '" width="' + width + '" height="' + height + '" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">' +
+        '<param value="' + url + '" name="movie"> ' +
+        '<param value="high" name="quality"> ' +
+        '<param value="#E0E0E0" name="bgcolor"> ' +
+        '<param name="allowFullScreen" value="true"> ' +
+        '<param value="always" name="allowScriptAccess"> ' +
+        '<param value="transparent" name="wmode"> ' +
+        '<embed width="' + width + '" height="' + height + '" name="' + id + '" align="middle" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" loop="false" play="true" bgcolor="#E0E0E0" quality="high" wmode="transparent" name="vMessage" src="' + url + '"> ' +
+        '</object>';
+
+    return _html;
+
+}
+
+function getFlashMovieObject(movieName) {
+    if (window.document[movieName]) {
+        return window.document[movieName];
+    }
+    if (navigator.appName.indexOf('Microsoft Internet') === -1) {
+        if (document.embeds && document.embeds[movieName]) {
+            return document.embeds[movieName];
+        }
+    } else { // if (navigator.appName.indexOf("Microsoft Internet")!=-1)
+        return document.getElementById(movieName);
+    }
+}
+
+/**
+ * 上传图片，点击确定时调用
+ */
+function uploadImage() {
+    var viFlash = getFlashMovieObject('head');
+
+    viFlash.upload_image();
+}
+
+
+module.exports = {
+    swfobject,
+    uploadImage
+};
+
+
+
+