├── .babelrc
├── .gitignore
├── README.md
├── app.js
├── app
    ├── controllers
    │   ├── h5.server.controller.js
    │   └── h5.server.rpc.js
    ├── models
    │   └── h5.server.model.js
    └── routes
    │   └── h5.server.routes.js
├── bin
    └── www
├── config
    ├── config.js
    ├── express.js
    └── mongoose.js
├── images
    ├── createNewWork.png
    ├── design.gif
    ├── design.png
    ├── design2.gif
    ├── login.gif
    ├── login.png
    ├── music.png
    ├── newWork.gif
    ├── output.gif
    └── work.png
├── package.json
├── views
    ├── app.js
    ├── components
    │   ├── Alert.vue
    │   ├── DesignWorkPage.vue
    │   ├── LoginImage.vue
    │   ├── LoginInput.vue
    │   ├── Navigation.vue
    │   ├── createWorkDialog.vue
    │   └── shadow.vue
    ├── images
    │   ├── H5.png
    │   ├── add.png
    │   ├── mobilePhone.png
    │   └── music.png
    ├── index.html
    ├── layouts
    │   ├── Home.vue
    │   ├── Login.vue
    │   ├── MobilePhone.vue
    │   ├── PageList.vue
    │   ├── Setup.vue
    │   ├── Work.vue
    │   ├── imageDialog.vue
    │   ├── modifyDesign.vue
    │   └── musicDialog.vue
    ├── pages
    │   ├── 404.vue
    │   ├── Design.vue
    │   ├── Home.vue
    │   ├── Main.vue
    │   └── Register.vue
    ├── routes.js
    ├── show.ejs
    ├── static
    │   ├── animation.css
    │   ├── jquery-3.0.0.js
    │   ├── show.css
    │   ├── show.js
    │   └── toucher.js
    └── store
    │   ├── actions.js
    │   ├── modules
    │       ├── Design.js
    │       ├── User.js
    │       └── Work.js
    │   ├── mutations.js
    │   ├── state.js
    │   └── store.js
└── webpack.config.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |      "presets": [
3 |          "es2015", 
4 |          "stage-1",
5 |          "stage-2",
6 |          "stage-3",
7 |      ],
8 |      "plugins": ["transform-async-to-generator"]
9 |  }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | views/static/
3 | .DS_Store
4 | npm-debug.log
5 | npm-debug.log.*
6 | yarn-debug.log*
7 | yarn-error.log*·


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # H5
  2 | 
  3 | 
  4 | 
  5 | ## 简介
  6 | 
  7 | H5是一款可视化编辑手机H5页面的单页应用WebApp，可以根据用户的设计自动产生精美的H5界面。
  8 | 
  9 | 类似市面上易企秀、简客这样的app。
 10 | 
 11 | 这是我的个人项目，旨在学习Vue.js以及前后端开发流程。
 12 | 
 13 | 
 14 | 
 15 | ## 运行
 16 | 
 17 | ```bash
 18 | cd H5
 19 | 
 20 | # install dependencies
 21 | npm install
 22 | 
 23 | # app running
 24 | npm start
 25 | ```
 26 | 
 27 | 
 28 | 	open localhost:2000
 29 | 
 30 | 
 31 | ## 技术
 32 | 
 33 | 前端：Vue.js + Vuex
 34 | 
 35 | 后端：Node.js
 36 | 
 37 | 构建：webpack
 38 | 
 39 | 数据库: MongoDB
 40 | 
 41 | UI:  Muse-UI (https://museui.github.io/#/index)
 42 | 
 43 | 
 44 | ## 目录结构
 45 | <pre>
 46 | ├─  package.json        # 项目配置
 47 | ├─  README.md           # 项目说明
 48 | ├─  app.js              # 项目入口文件
 49 | ├─  images              # 静态图片
 50 | ├─  userData            # 用户数据
 51 | ├─  node_modules        # npm依赖包
 52 | ├─  webpack.config.js   # webpack配置文件
 53 | ├─  .babelrc            # babel配置
 54 | │
 55 | │
 56 | ├─  app                 # node后端业务
 57 |       │
 58 |       │ controllers     #  控制器
 59 |       │ models          #  数据模型
 60 |       │ routes          #  路由分发
 61 | │
 62 | │
 63 | ├─  bin                 # node启动
 64 | │
 65 | │
 66 | └─  views               # 前端代码
 67 |       │ app.js          # 前端页面入口文件
 68 |       │ components      # 基础组件
 69 |       │ dist            # 编译生成文件
 70 |       │ index.html      # 首页
 71 |       │ layouts         # 布局
 72 |       │ music           # 用户静态音乐
 73 |       │ pages           # 根据路由切换页面
 74 |       │ routes.js       # 路由表
 75 |       │ show.ejs        # ejs模板，用以产生H5页面
 76 |       │ static          # 静态html以及css文件
 77 |       │ store           # vuex store
 78 | │
 79 | │
 80 | └─  config              # node配置
 81 | </pre>
 82 |   
 83 | 
 84 | ## 效果图
 85 | 
 86 | ![img](./images/login.gif)
 87 | 
 88 | ![img](./images/newWork.gif)
 89 | 
 90 | ![img](./images/design.gif)
 91 | 
 92 | ![img](./images/design2.gif)
 93 | 
 94 | ![img](./images/output.gif)
 95 | 
 96 | ![img](./images/login.png)   
 97 | 
 98 | ![img](./images/work.png)   
 99 | 
100 | ![img](./images/createNewWork.png)   
101 | 
102 | ![img](./images/design.png)   
103 | 
104 | ![img](./images/music.png)   
105 | 
106 | 
107 | 
108 | 
109 | 


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 
3 | let express = require('./config/express');
4 | let mongodb = require('./config/mongoose');
5 | 
6 | let db = mongodb();
7 | let app = express();
8 | 
9 | module.exports = app;


--------------------------------------------------------------------------------
/app/controllers/h5.server.controller.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | let mongoose = require('mongoose');
  4 | let rpc = require('./h5.server.rpc');
  5 | let formidable = require('formidable');
  6 | let fs = require('fs');
  7 | let cfg = require('../../config/config');
  8 | let qr = require('qr-image')
  9 | 
 10 | /*mongoose*/
 11 | let Users = mongoose.model('Users');
 12 | let UserMusics = mongoose.model('UserMusics');
 13 | let UserImages = mongoose.model('UserImages');
 14 | let UserDesigns = mongoose.model('UserDesigns');
 15 | 
 16 | /*产生4位随机数带上时间*/
 17 | function RandomKey(){
 18 | 	function getNum(){
 19 | 		return Math.ceil(Math.random() * 10) - 1; /*产生0-9的随机数*/
 20 | 	}
 21 | 
 22 | 	let Key = "";
 23 | 	for(let i=0; i<4; i++){
 24 | 		Key += getNum();
 25 | 	}
 26 | 
 27 | 	return (Key + Date.parse(new Date()));
 28 | }
 29 | 
 30 | module.exports = {
 31 | 
 32 | 	/**
 33 | 	 * 用户登陆
 34 | 	 *
 35 | 	 * 用户登陆接口，返回是否登陆成功。
 36 | 	 *
 37 | 	 * @param    req 
 38 | 	 * @param    res 
 39 | 	 * @param    next 
 40 | 	 * @returns  void
 41 | 	 *
 42 | 	 * @date     2016-12-27
 43 | 	 * @author   Cao Yang
 44 | 	 */
 45 | 	login(req,res,next){
 46 | 		let params = req.body.params || {};
 47 | 
 48 | 		if (!params.userName) {
 49 | 			res.json({result: false, content: '用户名为空'});
 50 | 			return;
 51 | 		}
 52 | 
 53 | 		if (!params.passWord) {
 54 | 			res.json({result: false, content: '密码为空'});
 55 | 			return;
 56 | 		}
 57 | 
 58 | 		Users.find({userName:params.userName}, null,{},function(err,result){
 59 | 			if (err) {
 60 | 				console.log('login find err!');
 61 | 				res.json({result: false, content: '登陆失败'});
 62 | 				return next(err);
 63 | 			}
 64 | 			else{
 65 | 				if (result.length && (result[0].passWord === params.passWord)) {
 66 | 					req.session.user = {'userName': params.userName};
 67 | 					console.log('login req.session.user',req.session.user)
 68 | 					res.json({
 69 | 						result: true,
 70 | 						params: {
 71 | 							userInfo: result[0],
 72 | 						}
 73 | 					});
 74 | 				}
 75 | 				else if(result.length === 0){
 76 | 					res.json({result: false, content: '用户不存在'});
 77 | 				}
 78 | 				else{
 79 | 					res.json({result: false, content: '用户名或密码错误，请重试'});
 80 | 				}
 81 | 			}
 82 | 		})
 83 | 
 84 | 	},
 85 | 
 86 | 	/**
 87 | 	 * 用户注册
 88 | 	 *
 89 | 	 * 用户注册接口，注册新用户。
 90 | 	 *
 91 | 	 * @param    req 
 92 | 	 * @param    res 
 93 | 	 * @param    next 
 94 | 	 * @returns  void
 95 | 	 *
 96 | 	 * @date     2016-12-27
 97 | 	 * @author   Cao Yang
 98 | 	 */
 99 | 	register(req,res,next){
100 | 		if (req.body && req.body.params) {
101 | 			let params = req.body.params || {};
102 | 
103 | 			if (!params.userName) {
104 | 				res.json({result: false, content: '用户名为空'});
105 | 				return;
106 | 			}
107 | 
108 | 			if (!params.passWord) {
109 | 				res.json({result: false, content: '密码为空'});
110 | 				return;
111 | 			}
112 | 			
113 | 			if (!params.eMail) {
114 | 				res.json({result: false, content: '邮箱为空'});
115 | 				return;
116 | 			}
117 | 
118 | 			let user = new Users({
119 | 				userName: params.userName,
120 | 				passWord: params.passWord,
121 | 				eMail: params.eMail,
122 | 				nikeName: params.userName,
123 | 				userImage: "/image/defaultHeadPortrait.png",
124 | 				Gender: 'Man',
125 | 				age: '18',
126 | 				personalizedSignature: '',
127 | 				place: '',
128 | 			});
129 | 
130 | 			user.save(function(err){
131 |             	if (err) {
132 |             		console.log('Register err!' + err);
133 |             		res.json({result: false, content: '注册失败'});
134 |             		return next(err);
135 |             	}
136 |             	else{
137 |             		console.log('Register ' + params.userName + ' successed.');
138 |             		res.json({result: true});
139 |             	}
140 |             })
141 | 			
142 | 		}
143 | 		else{
144 | 			res.json({result: false, content: '数据格式有误'});
145 | 		}
146 | 	},
147 | 
148 | 	/**
149 | 	 * RPC接口
150 | 	 *
151 | 	 * 对RPC接口做同一操作。
152 | 	 *
153 | 	 * @param    req 
154 | 	 * @param    res 
155 | 	 * @param    next 
156 | 	 * @returns  void
157 | 	 *
158 | 	 * @date     2017-1-1
159 | 	 * @author   Cao Yang
160 | 	 */
161 | 	rpcMethon(req,res,next){
162 | 		let params = req.body.params || {};
163 | 		let method = req.body.method;
164 | 		if ((typeof rpc[method]) === 'function') {
165 | 			rpc[method](req,res,next);
166 | 		}
167 | 		else{
168 | 			res.json({result: false, content: '未找到RPC接口'});
169 | 		}
170 | 	},
171 | 
172 | 	/**
173 | 	 * 上传音乐
174 | 	 *
175 | 	 * 上传本地音乐文件接口
176 | 	 *
177 | 	 * @param    req 
178 | 	 * @param    res 
179 | 	 * @param    next 
180 | 	 * @returns  void
181 | 	 *
182 | 	 * @date     2017-1-12
183 | 	 * @author   Cao Yang
184 | 	 */
185 | 	 UploadMusic(req, res, next){
186 | 	 	let form = new formidable.IncomingForm();
187 | 		form.uploadDir = __dirname+'/../../userData/musics';
188 | 		form.keepExtensions = true;
189 | 		form.maxFieldsSize = 2*1024*1024;/*限制图片大小最大为2M*/
190 | 
191 | 		form.parse(req,(err,fields,files) => {
192 | 			if (files.music.type.indexOf('audio') >= 0) {
193 | 				let path = files.music.path;
194 | 				let newPath = path.slice(0, path.lastIndexOf('/'))+'/'+req.session.user.userName+'-'+RandomKey()+ path.slice(path.lastIndexOf('.'),path.length);
195 | 				fs.rename(path, newPath);
196 | 				
197 | 				/*save in mongoDB*/
198 | 				let music = new UserMusics({
199 | 					userName: req.session.user.userName,
200 | 					path: newPath,
201 | 					musicName: files.music.name,
202 | 					type: files.music.type,
203 | 					size: files.music.size,
204 | 				});
205 | 
206 | 				music.save(err => {
207 | 					if (err) {
208 | 						res.json({result: false, content: '上传音乐失败'});
209 | 						return next(err);
210 | 					}
211 | 					else{
212 | 						res.json({result: true});
213 | 					}
214 | 				})
215 | 			}
216 | 			else{
217 | 				res.json({result: false, content: '音频文件格式有误'});
218 | 			}
219 | 		})
220 | 	 },
221 | 
222 | 	 /**
223 | 	 * 播放音乐
224 | 	 *
225 | 	 * 播放音乐接口
226 | 	 *
227 | 	 * @param    req 
228 | 	 * @param    res 
229 | 	 * @param    next 
230 | 	 * @returns  void
231 | 	 *
232 | 	 * @date     2017-1-16
233 | 	 * @author   Cao Yang
234 | 	 */
235 | 	 PlayMusic(req, res, next){
236 | 	 	UserMusics.findById(req.query.id, (err, result) => {
237 | 	 		if (result) {
238 | 	 			res.writeHead(200, {'Content-Type': 'video/mp4'});  
239 | 				let rs = fs.createReadStream(result.path);  
240 | 
241 | 				rs.pipe(res);  
242 | 		 		rs.on('end',function(){  
243 | 					res.end();  
244 | 				});  
245 | 	 		}
246 | 	 	});
247 | 	 },
248 | 
249 | 	 /**
250 | 	 * 上传图片
251 | 	 *
252 | 	 * 上传本地图片文件接口
253 | 	 *
254 | 	 * @param    req 
255 | 	 * @param    res 
256 | 	 * @param    next 
257 | 	 * @returns  void
258 | 	 *
259 | 	 * @date     2017-1-27
260 | 	 * @author   Cao Yang
261 | 	 */
262 | 	 UploadImage(req, res, next){
263 | 	 	let form = new formidable.IncomingForm();
264 | 		form.uploadDir = __dirname+'/../../userData/images';
265 | 		form.encoding = 'utf-8';
266 | 		form.keepExtensions = true;
267 | 		form.maxFieldsSize = 2*1024*1024;/*限制图片大小最大为2M*/
268 | 
269 | 		form.parse(req,(err,fields,files) => {
270 | 			let fileType;
271 | 			switch(files.image.type){
272 | 				case 'image/jpeg':
273 | 					fileType = 'jpeg';
274 | 					break;
275 | 				case 'image/png':
276 | 					fileType = 'png';
277 | 					break;
278 | 				case 'image/jpg':
279 | 					fileType = 'jpg';
280 | 					break;
281 | 			}
282 | 
283 | 			if (fileType === undefined) {/*上传的图片格式没有按照指定要求*/
284 | 				res.send('uploadIcon img type err');
285 | 				return;
286 | 			};
287 | 
288 | 			let path = files.image.path;
289 | 			let newPath = path.slice(0, path.lastIndexOf('/'))+'/'+req.session.user.userName+'-'+RandomKey()+ path.slice(path.lastIndexOf('.'),path.length);
290 | 			fs.rename(path, newPath);
291 | 			
292 | 			/*save in mongoDB*/
293 | 			let image = new UserImages({
294 | 				userName: req.session.user.userName,
295 | 				path: newPath,
296 | 				type: files.image.type,
297 | 				size: files.image.size,
298 | 			});
299 | 
300 | 			image.save(err => {
301 | 				if (err) {
302 | 					res.json({result: false, content: '上传图片失败'});
303 | 					return next(err);
304 | 				}
305 | 				else{
306 | 					res.json({result: true});
307 | 				}
308 | 			})
309 | 		})
310 | 
311 | 	 },
312 | 
313 | 	 /**
314 | 	 * 显示图片
315 | 	 *
316 | 	 * 显示图片接口
317 | 	 *
318 | 	 * @param    req 
319 | 	 * @param    res 
320 | 	 * @param    next 
321 | 	 * @returns  void
322 | 	 *
323 | 	 * @date     2017-1-29
324 | 	 * @author   Cao Yang
325 | 	 */
326 | 	 showImage(req, res, next){
327 | 	 	UserImages.findById(req.query.id, (err, result) => {
328 | 	 		if (result) {
329 | 	 			
330 | 	 			res.writeHead(200, {'Content-Type': result.type});  
331 | 				let rs = fs.createReadStream(result.path);  
332 | 
333 | 				rs.pipe(res);  
334 | 		 		rs.on('end',function(){  
335 | 					res.end();  
336 | 				});  
337 | 	 		}
338 | 	 		else{
339 | 	 			next();
340 | 	 		}
341 | 	 	});
342 | 	 },
343 | 
344 | 	/**
345 | 	 * 显示生成页面
346 | 	 *
347 | 	 * 显示生成页面接口
348 | 	 *
349 | 	 * @param    req 
350 | 	 * @param    res 
351 | 	 * @param    next 
352 | 	 * @returns  void
353 | 	 *
354 | 	 * @date     2017-2-3
355 | 	 * @author   Cao Yang
356 | 	 */
357 | 	 showPage(req, res, next){
358 | 	 	UserDesigns.find({userName: req.query.userName, workName: req.query.workName,}, null,{}, (err, result) => {
359 | 			if (err) {
360 | 				console.log('showPage err!' + err);
361 |         		res.json({result: false, content: '获取页面失败'});
362 |         		return next(err);
363 | 			}
364 | 			else{
365 | 				console.log(result)
366 | 				if (result.length) {
367 | 					
368 | 					res.render("show",{cfg,"designInfos":result[0].designInfos}); 
369 | 				}
370 | 				else{
371 | 					res.send('404 no found.');
372 | 				}
373 | 			}
374 | 		})
375 | 	 },
376 | 
377 | 	 /**
378 | 	 * 二维码接口
379 | 	 *
380 | 	 * 根据URL生成对应的二维码图片
381 | 	 *
382 | 	 * @param    req 
383 | 	 * @param    res 
384 | 	 * @param    next 
385 | 	 * @returns  void
386 | 	 *
387 | 	 * @date     2017-3-19
388 | 	 * @author   Cao Yang
389 | 	 */
390 | 	 QRcode(req, res, next){
391 | 	 		let userName = req.query.userName || '';
392 | 	 		let workName = req.query.workName || '';
393 | 	 		let url = cfg.ip + ':' + cfg.port + '/H5/Show?userName=' + userName + '&workName=' + workName;
394 | 		    try {
395 | 		        var img = qr.image(url,{size :10});
396 | 		        res.writeHead(200, {'Content-Type': 'image/png'});
397 | 		        img.pipe(res);
398 | 		    } catch (e) {
399 | 		        res.writeHead(414, {'Content-Type': 'text/html'});
400 | 		        res.end('<h1>414 Request-URI Too Large</h1>');
401 | 		    }
402 | 	 }
403 | 
404 | }


--------------------------------------------------------------------------------
/app/controllers/h5.server.rpc.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | let mongoose = require('mongoose');
  4 | let fs = require('fs');
  5 | let cfg = require('../../config/config');
  6 | 
  7 | /*mongoose*/
  8 | let Users = mongoose.model('Users');
  9 | let UserMusics = mongoose.model('UserMusics');
 10 | let UserImages = mongoose.model('UserImages');
 11 | let UserDesigns = mongoose.model('UserDesigns');
 12 | 
 13 | module.exports = {
 14 | 	/**
 15 | 	 * 用户登出
 16 | 	 *
 17 | 	 * 用户登出接口，释放资源
 18 | 	 *
 19 | 	 * @param    req 
 20 | 	 * @param    res 
 21 | 	 * @param    next 
 22 | 	 * @returns  void
 23 | 	 *
 24 | 	 * @date     2017-1-14
 25 | 	 * @author   Cao Yang
 26 | 	 */
 27 | 	logout(req,res,next){
 28 | 		delete req.session.user;
 29 | 		res.json({result: true});
 30 | 	},
 31 | 
 32 | 	/**
 33 | 	 * 获取所有音乐
 34 | 	 *
 35 | 	 * 获取用户上传的所有音乐的列表
 36 | 	 *
 37 | 	 * @param    req 
 38 | 	 * @param    res 
 39 | 	 * @param    next 
 40 | 	 * @returns  void
 41 | 	 *
 42 | 	 * @date     2017-1-14
 43 | 	 * @author   Cao Yang
 44 | 	 */
 45 | 	getAllUserMusics(req, res, next){
 46 | 		UserMusics.find({userName: req.session.user.userName}, null,{}, (err, result) => {
 47 | 			if (err) {
 48 | 				console.log('getAllUserMusics err!' + err);
 49 |         		res.json({result: false, content: '查询失败'});
 50 |         		return next(err);
 51 | 			}
 52 | 			else{
 53 | 				let params = [];
 54 | 				result.forEach((item, index) => {
 55 | 					params.push({
 56 | 						id: item._id,
 57 | 						musicName: item.musicName,
 58 | 					})
 59 | 				})
 60 | 				res.json({result: true, params});
 61 | 			}
 62 | 		})
 63 | 	},
 64 | 
 65 | 	/**
 66 | 	 * 删除用户音乐
 67 | 	 *
 68 | 	 * 删除用户音乐接口
 69 | 	 *
 70 | 	 * @param    req 
 71 | 	 * @param    res 
 72 | 	 * @param    next 
 73 | 	 * @returns  void
 74 | 	 *
 75 | 	 * @date     2017-1-14
 76 | 	 * @author   Cao Yang
 77 | 	 */
 78 | 	 delUserMusics(req, res, next){
 79 | 	 	let szId = req.body.params.id || [];
 80 | 	 	(typeof szId === 'string') && (szId = [szId]);
 81 | 
 82 | 	 	szId.forEach(id => {
 83 | 	 		UserMusics.findById(id, (err, result) => {
 84 | 	 			if (result.userName === req.session.user.userName) {/*校验用户是否是自己*/
 85 | 	 				result.remove(err => {
 86 | 						if (err) {
 87 | 							console.log('delUserMusics err!' + err);
 88 | 			        		res.json({result: false, content: '删除失败'});
 89 | 			        		return next(err);
 90 | 						}
 91 | 						else{
 92 | 							fs.unlinkSync(result.path);
 93 | 						}
 94 | 	 				})
 95 | 	 			}
 96 | 	 		});
 97 | 	 	})
 98 | 
 99 | 	 	res.json({result: true});
100 | 	 },
101 | 
102 | 	 /**
103 | 	 * 获取所有图片
104 | 	 *
105 | 	 * 获取用户上传的所有图片的列表
106 | 	 *
107 | 	 * @param    req 
108 | 	 * @param    res 
109 | 	 * @param    next 
110 | 	 * @returns  void
111 | 	 *
112 | 	 * @date     2017-1-14
113 | 	 * @author   Cao Yang
114 | 	 */
115 | 	getAllUserImages(req, res, next){
116 | 		UserImages.find({userName: req.session.user.userName}, null,{}, (err, result) => {
117 | 			if (err) {
118 | 				console.log('getAllUserImages err!' + err);
119 |         		res.json({result: false, content: '查询失败'});
120 |         		return next(err);
121 | 			}
122 | 			else{
123 | 				let params = [];
124 | 				result.forEach((item, index) => {
125 | 					params.push({
126 | 						id: item._id,
127 | 					})
128 | 				})
129 | 				res.json({result: true, params});
130 | 			}
131 | 		})
132 | 	},
133 | 
134 | 	/**
135 | 	 * 删除用户图片
136 | 	 *
137 | 	 * 删除用户图片接口
138 | 	 *
139 | 	 * @param    req 
140 | 	 * @param    res 
141 | 	 * @param    next 
142 | 	 * @returns  void
143 | 	 *
144 | 	 * @date     2017-1-29
145 | 	 * @author   Cao Yang
146 | 	 */
147 | 	 delUserImages(req, res, next){
148 | 	 	let szId = req.body.params.id || [];
149 | 	 	(typeof szId === 'string') && (szId = [szId]);
150 | 
151 | 	 	szId.forEach(id => {
152 | 	 		UserImages.findById(id, (err, result) => {
153 | 	 			if (result.userName === req.session.user.userName) {/*校验用户是否是自己*/
154 | 	 				result.remove(err => {
155 | 						if (err) {
156 | 							console.log('delUserImages err!' + err);
157 | 			        		res.json({result: false, content: '删除失败'});
158 | 			        		return next(err);
159 | 						}
160 | 						else{
161 | 							fs.unlinkSync(result.path);
162 | 						}
163 | 	 				})
164 | 	 			}
165 | 	 		});
166 | 	 	})
167 | 
168 | 	 	res.json({result: true});
169 | 	 },
170 | 
171 | 	 
172 | 	 /**
173 | 	 * 保存用户设计界面
174 | 	 *
175 | 	 * 保存用户设计界面接口
176 | 	 *
177 | 	 * @param    req 
178 | 	 * @param    res 
179 | 	 * @param    next 
180 | 	 * @returns  void
181 | 	 *
182 | 	 * @date     2017-1-29
183 | 	 * @author   Cao Yang
184 | 	 */
185 | 	 saveDesign(req, res, next){
186 | 	 	UserDesigns.find({
187 | 	 						userName: req.session.user.userName,
188 | 	 						workName: req.body.params.name,
189 | 	 					}, null,{}, (err, result) => {
190 | 			if (err) {
191 | 				console.log('saveDesign err!' + err);
192 |         		res.json({result: false, content: '保存失败'});
193 |         		return next(err);
194 | 			}
195 | 			else{
196 | 				if (result.length) {
197 | 					/*修改数据*/
198 | 					result[0].designInfos = req.body.params.designInfos;
199 | 					result[0].save(err => {
200 | 						if (err) {
201 | 		            		console.log('saveDesign modify err!' + err);
202 | 		            		res.json({result: false, content: '保存失败'});
203 | 		            		return next(err);
204 | 		            	}
205 | 		            	else{
206 | 		            		res.json({result: true});
207 | 		            	}
208 | 					})
209 | 				}
210 | 				else{
211 | 					/*第一次保存*/
212 | 					let design = new UserDesigns({
213 | 						userName: req.session.user.userName,
214 | 						workName: req.body.params.name,
215 | 						designInfos: req.body.params.designInfos,
216 | 					});
217 | 
218 | 					design.save(function(err){
219 | 		            	if (err) {
220 | 		            		console.log('saveDesign err!' + err);
221 | 		            		res.json({result: false, content: '保存失败'});
222 | 		            		return next(err);
223 | 		            	}
224 | 		            	else{
225 | 		            		res.json({result: true});
226 | 		            	}
227 | 		            })
228 | 				}
229 | 			}
230 | 		})
231 | 	 },
232 | 
233 | 	 /**
234 | 	 * 获取所有用户设计界面
235 | 	 *
236 | 	 * 获取所有用户设计界面接口，用以再次编辑
237 | 	 *
238 | 	 * @param    req 
239 | 	 * @param    res 
240 | 	 * @param    next 
241 | 	 * @returns  void
242 | 	 *
243 | 	 * @date     2017-2-5
244 | 	 * @author   Cao Yang
245 | 	 */
246 | 	 getAllUserDesigns(req, res, next){
247 | 	 	UserDesigns.find({userName: req.session.user.userName,}, null,{}, (err, result) => {
248 | 	 		if (err) {
249 |         		console.log('getAllUserDesigns err!' + err);
250 |         		res.json({result: false, content: '获取失败'});
251 |         		return next(err);
252 |         	}
253 |         	else{
254 |         		res.json({result: true, params: result});
255 |         	}
256 | 	 	});
257 | 	 },
258 | 
259 | 	 /**
260 | 	 * 删除用户设计界面
261 | 	 *
262 | 	 * 根据作品名称删除相应的用户设计界面
263 | 	 *
264 | 	 * @param    req 
265 | 	 * @param    res 
266 | 	 * @param    next 
267 | 	 * @returns  void
268 | 	 *
269 | 	 * @date     2017-3-3
270 | 	 * @author   Cao Yang
271 | 	 */
272 | 	 delDesign(req, res, next){
273 | 	 	let params = req.body.params;
274 | 	 	let delObj = {
275 | 	 		userName: req.session.user.userName,
276 | 	 		workName: params.workName,
277 | 	 	}
278 | 	 	UserDesigns.remove(delObj, function(err){
279 | 	 		if (err) {
280 | 	 			console.log('err',err);
281 |             	return next(err);
282 | 	 		}
283 | 	 		else{
284 | 	 			console.log('delete ' + JSON.stringify(delObj) + 'successed!');
285 |     			res.status(200);
286 |     			res.send({result:true,params:null});
287 | 	 		}
288 | 	 	})
289 | 	 },
290 | 
291 | 	 /**
292 | 	 * 修改用户信息
293 | 	 *
294 | 	 * 修改用户的相关信息
295 | 	 *
296 | 	 * @param    req 
297 | 	 * @param    res 
298 | 	 * @param    next 
299 | 	 * @returns  void
300 | 	 *
301 | 	 * @date     2017-5-14
302 | 	 * @author   Cao Yang
303 | 	 */
304 | 	 saveUserInfo (req, res, next) {
305 | 	 	let params = req.body.params;
306 | 	 	Users.find({userName: req.session.user.userName,}, null,{}, (err, result) => {
307 | 	 		if (err) {
308 |         		console.log('saveUserInfo err!' + err);
309 |         		res.json({result: false, content: '获取失败'});
310 |         		return next(err);
311 |         	}
312 |         	else{
313 |         		/*只修改部分可修改字段，不直接覆盖*/
314 |         		result[0].Gender = (params.Gender === 'Man') ? 'Man' : 'Woman';
315 |         		result[0].age = params.age;
316 |         		result[0].eMail = params.eMail;
317 |         		result[0].nikeName = params.nikeName;
318 |         		result[0].personalizedSignature = params.personalizedSignature;
319 |         		result[0].place = params.place;
320 | 
321 |         		result[0].save(err => {
322 | 					if (err) {
323 | 	            		console.log('saveUserInfo err!' + err);
324 | 	            		res.json({result: false, content: '保存失败'});
325 | 	            		return next(err);
326 | 	            	}
327 | 	            	else{
328 | 	            		res.json({result: true});
329 | 	            	}
330 | 	            });
331 |         	}
332 | 	 	});
333 | 	 }
334 | }
335 | 
336 | 
337 | 
338 | 
339 | 
340 | 
341 | 


--------------------------------------------------------------------------------
/app/models/h5.server.model.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | let mongoose = require('mongoose');
 4 | 
 5 | /*用户表*/
 6 | let SchemaUsers = new mongoose.Schema({
 7 | 	userName: String,					/*用户名*/
 8 | 	passWord: String,					/*密码*/
 9 | 	eMail: String,						/*邮箱*/
10 | 	nikeName: String,					/*昵称*/
11 | 	userImage: String,					/*头像*/
12 | 	Gender: String,						/*性别*/
13 | 	age: String,						/*年龄*/
14 | 	personalizedSignature:String,		/*个性签名*/
15 | 	place: String						/*所在区域*/
16 | })
17 | 
18 | let Users = mongoose.model('Users', SchemaUsers);
19 | 
20 | /*音乐表*/
21 | let SchemaMusics = new mongoose.Schema({
22 | 	userName: String,					/*用户名*/
23 | 	path: String,						/*路径*/
24 | 	musicName: String,					/*音乐名称*/
25 | 	type: String,						/*音乐类型*/
26 | 	size: Number,						/*音乐大小*/
27 | 	date: {type:Date,default:Date.now}, /*上传时间*/
28 | })
29 | 
30 | let Musics = mongoose.model('UserMusics', SchemaMusics);
31 | 
32 | /*音乐表*/
33 | let SchemaImages = new mongoose.Schema({
34 | 	userName: String,					/*用户名*/
35 | 	path: String,						/*路径*/
36 | 	type: String,						/*图片类型*/
37 | 	size: Number,						/*图片大小*/
38 | 	date: {type:Date,default:Date.now}, /*上传时间*/
39 | })
40 | 
41 | let Images = mongoose.model('UserImages', SchemaImages);
42 | 
43 | /*设计表*/
44 | let SchemaDesign = new mongoose.Schema({
45 | 	userName: String,					/*用户名*/
46 | 	workName: String,					/*设计名称*/
47 | 	designInfos: Object,				/*设计信息*/
48 | 	date: {type:Date,default:Date.now}, /*创建时间*/
49 | })
50 | 
51 | let Designs = mongoose.model('UserDesigns', SchemaDesign);


--------------------------------------------------------------------------------
/app/routes/h5.server.routes.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | let H5Controller = require('../controllers/h5.server.controller');
 4 | 
 5 | module.exports = function(app){
 6 | 	app.route('/')
 7 | 		.get(function(req,res,next){
 8 | 			res.sendFile('index.html');
 9 | 		});
10 | 
11 | 	app.route('/H5/Login')
12 | 		.post(H5Controller.login);
13 | 
14 | 	app.route('/H5/Register')
15 | 		.post(H5Controller.register);
16 | 
17 | 	app.route('/H5/rpc')
18 | 		.post(H5Controller.rpcMethon);
19 | 
20 | 	app.route('/H5/UploadMusic')
21 | 		.post(H5Controller.UploadMusic);
22 | 
23 | 	app.route('/H5/UploadImage')
24 | 		.post(H5Controller.UploadImage);
25 | 
26 | 	app.route('/H5/PlayMusic')
27 | 		.get(H5Controller.PlayMusic);
28 | 
29 | 	app.route('/H5/image')
30 | 		.get(H5Controller.showImage);
31 | 
32 | 	app.route('/H5/Show')
33 | 		.get(H5Controller.showPage);
34 | 
35 | 	app.route('/H5/QRcode')
36 | 		.get(H5Controller.QRcode);
37 | }


--------------------------------------------------------------------------------
/bin/www:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 | 'use strict';
3 | 
4 | let app = require('../app')
5 | let config = require('../config/config');
6 | 
7 | app.listen(config.port, function(){
8 | 	console.log('app started,listen on port:',config.port);
9 | })


--------------------------------------------------------------------------------
/config/config.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 
3 | module.exports = {
4 | 	ip: 'localhost',
5 | 	port: 3000,
6 | 	mongodb: 'mongodb://localhost/H5'
7 | }


--------------------------------------------------------------------------------
/config/express.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | let express = require('express');
 4 | let bodyParser = require('body-parser');
 5 | let config = require('../webpack.config')
 6 | let webpack = require('webpack')
 7 | let webpackDevMiddleware = require('webpack-dev-middleware')
 8 | let webpackHotMiddleware = require('webpack-hot-middleware')
 9 | let session = require('express-session');
10 | let cookieParser = require('cookie-parser');
11 | 
12 | /*产生128位随机数*/
13 | function RandomSecret(){
14 | 	function getNum(){
15 | 		return Math.ceil(Math.random() * 10) - 1; /*产生0-9的随机数*/
16 | 	}
17 | 
18 | 	let secret = "";
19 | 	for(let i=0; i<128; i++){
20 | 		secret += getNum();
21 | 	}
22 | 
23 | 	return secret;
24 | }
25 | 
26 | module.exports = function(){
27 | 	console.log('init express..');
28 | 	let app = express();
29 | 
30 | 	/*webpack*/
31 | 	let compiler = webpack(config)
32 | 	app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }))
33 | 	app.use(webpackHotMiddleware(compiler));
34 | 
35 | 	app.set('view engine','ejs');
36 | 	app.use(express.static(__dirname+'/../views'));
37 | 
38 | 	app.use(bodyParser.json());
39 | 
40 | 	app.use(cookieParser());
41 | 
42 | 	app.use(bodyParser.urlencoded({extended:false}));
43 | 
44 | 	app.use(session({
45 | 		resave: false,
46 | 		rolling: false,
47 | 		saveUninitialized: true,
48 | 		secret: RandomSecret(),
49 | 		name: 'H5Session',
50 | 		cookie: { maxAge: 60 * 1000 * 60}
51 | 	}));
52 | 
53 | 	app.use(function(req,res,next){
54 | 		console.log(req.url)
55 | 		if (!req.session.user) {
56 | 			if (req.url === '/H5/Login' 
57 | 				|| req.url === '/H5/Register' 
58 | 				|| req.url.indexOf('/H5/PlayMusic') >= 0
59 | 				|| req.url.indexOf('/H5/image') >= 0
60 | 				|| req.url.indexOf('/H5/Show') >= 0) {
61 | 				next();/*请求为登陆或者注册则不需要校验session*/
62 | 			}
63 | 			else{
64 | 				res.json({result: false, content: '用户权限异常'});
65 | 			}
66 | 		}
67 | 		else if (req.session.user) {
68 | 			next();
69 | 		};
70 | 	})
71 | 
72 | 	require('../app/routes/h5.server.routes')(app);
73 | 
74 | 	app.use(function(req, res, next){
75 | 		res.status(404);
76 | 		try{
77 | 			return res.json('No Found!');
78 | 		}
79 | 		catch(e){
80 | 			console.error('404 set header after send.');
81 | 		}
82 | 	})
83 | 
84 | 	app.use(function(err, req, res, next){
85 | 		if (!err) {
86 | 			return next();
87 | 		};
88 | 
89 | 		res.status(500);
90 | 		try{
91 | 			return res.json(err.message || "server err");
92 | 		}
93 | 		catch(e){
94 | 			console.error('500 set header after send.')
95 | 		}
96 | 	});
97 | 
98 | 	return app;
99 | };


--------------------------------------------------------------------------------
/config/mongoose.js:
--------------------------------------------------------------------------------
 1 | let mongoose = require('mongoose');
 2 | let config = require('./config')
 3 | 
 4 | module.exports = function(){
 5 | 	mongoose.Promise = require('bluebird');
 6 | 	
 7 | 	let db = mongoose.connect(config.mongodb);
 8 | 
 9 | 	require('../app/models/h5.server.model.js');
10 | 
11 | 	return db;
12 | }


--------------------------------------------------------------------------------
/images/createNewWork.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/answershuto/H5/1089bc283f21d38a53fdbc3e4677d4de0e7687bc/images/createNewWork.png


--------------------------------------------------------------------------------
/images/design.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/answershuto/H5/1089bc283f21d38a53fdbc3e4677d4de0e7687bc/images/design.gif


--------------------------------------------------------------------------------
/images/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/answershuto/H5/1089bc283f21d38a53fdbc3e4677d4de0e7687bc/images/design.png


--------------------------------------------------------------------------------
/images/design2.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/answershuto/H5/1089bc283f21d38a53fdbc3e4677d4de0e7687bc/images/design2.gif


--------------------------------------------------------------------------------
/images/login.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/answershuto/H5/1089bc283f21d38a53fdbc3e4677d4de0e7687bc/images/login.gif


--------------------------------------------------------------------------------
/images/login.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/answershuto/H5/1089bc283f21d38a53fdbc3e4677d4de0e7687bc/images/login.png


--------------------------------------------------------------------------------
/images/music.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/answershuto/H5/1089bc283f21d38a53fdbc3e4677d4de0e7687bc/images/music.png


--------------------------------------------------------------------------------
/images/newWork.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/answershuto/H5/1089bc283f21d38a53fdbc3e4677d4de0e7687bc/images/newWork.gif


--------------------------------------------------------------------------------
/images/output.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/answershuto/H5/1089bc283f21d38a53fdbc3e4677d4de0e7687bc/images/output.gif


--------------------------------------------------------------------------------
/images/work.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/answershuto/H5/1089bc283f21d38a53fdbc3e4677d4de0e7687bc/images/work.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "html5",
 3 |   "version": "1.0.0",
 4 |   "description": "an app which automatically generates HTML5 files.",
 5 |   "main": "www/bin",
 6 |   "scripts": {
 7 |     "start": "babel-node bin/www",
 8 |     "test": "echo \"Error: no test specified\" && exit 1",
 9 |     "build": "webpack --watch"
10 |   },
11 |   "repository": {
12 |     "type": "git",
13 |     "url": "git+https://github.com/answershuto/H5.git"
14 |   },
15 |   "keywords": [
16 |     "Node.js",
17 |     "Vue.js",
18 |     "h5"
19 |   ],
20 |   "author": "Cao Yang",
21 |   "license": "ISC",
22 |   "bugs": {
23 |     "url": "https://github.com/answershuto/H5/issues"
24 |   },
25 |   "homepage": "https://github.com/answershuto/H5#readme",
26 |   "dependencies": {
27 |     "babel-cli": "^6.18.0",
28 |     "babel-core": "^6.21.0",
29 |     "babel-loader": "^6.2.10",
30 |     "babel-plugin-transform-async-to-generator": "^6.16.0",
31 |     "babel-polyfill": "^6.20.0",
32 |     "babel-preset-es2015": "^6.18.0",
33 |     "bluebird": "^3.4.7",
34 |     "body-parser": "^1.15.1",
35 |     "cookie-parser": "^1.4.3",
36 |     "css-loader": "^0.26.1",
37 |     "ejs": "^2.5.5",
38 |     "express": "^4.13.4",
39 |     "express-session": "^1.14.2",
40 |     "fetch": "^1.1.0",
41 |     "file": "^0.2.2",
42 |     "formidable": "^1.1.1",
43 |     "fs": "0.0.1-security",
44 |     "js-cookie": "^2.1.3",
45 |     "less-loader": "^4.0.3",
46 |     "mongoose": "^4.7.5",
47 |     "muse-ui": "^2.0.0-beta.2",
48 |     "path": "^0.12.7",
49 |     "qr-image": "^3.2.0",
50 |     "style-loader": "^0.13.1",
51 |     "vue": "^2.1.6",
52 |     "vue-html-loader": "^1.2.3",
53 |     "vue-loader": "^10.0.2",
54 |     "vue-style-loader": "^1.0.0",
55 |     "vue-template-compiler": "^2.1.6",
56 |     "vuex": "^2.1.1",
57 |     "webpack": "^1.14.0",
58 |     "webpack-dev-middleware": "^1.9.0",
59 |     "webpack-hot-middleware": "^2.13.2"
60 |   },
61 |   "devDependencies": {
62 |     "babel-preset-stage-1": "^6.16.0",
63 |     "babel-preset-stage-2": "^6.18.0",
64 |     "babel-preset-stage-3": "^6.17.0",
65 |     "less": "^2.7.2"
66 |   }
67 | }
68 | 


--------------------------------------------------------------------------------
/views/app.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import Vue from 'vue'
 4 | import routes from './routes'
 5 | import MuseUI from 'muse-ui'
 6 | import 'muse-ui/dist/muse-ui.css'
 7 | import store from './store/store.js'
 8 | 
 9 | Vue.use(MuseUI)
10 | 
11 | 
12 | const app = new Vue({
13 | 	el: '#app',
14 | 	store,
15 | 	data: {
16 | 		
17 | 	},
18 | 	computed: {
19 | 		ViewComponent () {
20 | 			const matchingView = routes[this.$store.state.Main.Route];
21 | 			return matchingView
22 | 				? require('./pages/' + matchingView + '.vue')
23 | 				: require('./pages/404.vue')
24 | 		}
25 | 	},
26 | 	render (h) {
27 | 		return h(this.ViewComponent)
28 | 	}
29 | })


--------------------------------------------------------------------------------
/views/components/Alert.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |  	<div>
 3 | 		 <mu-dialog :open="isAlert" title="H5 Alert">
 4 | 		    {{getMessage}}
 5 | 		    <mu-flat-button label="确定" slot="actions" primary @click="close"/>
 6 | 		  </mu-dialog>
 7 |  	</div>
 8 | </template>
 9 |  
10 | <script>
11 | 	/*use this.$store.commit('Alert', {isAlert: true, message: 'test'});*/
12 | 	export default {
13 | 		data () {
14 | 			return {
15 | 		
16 | 			}
17 | 		},
18 | 		methods: {
19 | 			close () {
20 | 		     	this.$store.commit('Alert', false);
21 | 		    }
22 | 		},
23 | 		computed: {
24 | 			isAlert(){
25 | 				return this.$store.state.Main.isAlert;
26 | 			},
27 | 			getMessage(){
28 | 				return this.$store.state.Main.AlertMessage;
29 | 			}
30 | 		}
31 | 	}
32 | </script>
33 | 
34 | <style scoped>
35 | 	
36 | </style>


--------------------------------------------------------------------------------
/views/components/DesignWorkPage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |  	<div class="container">
 3 |  		<mu-icon v-show="hasCloseFunc" class="icon-clear" value="clear" @click.stop="closeFunc" />
 4 | 		<mu-card-media :title="WorkName" :subTitle="getYear">
 5 | 			<img :src="imageSrc" />
 6 | 			<div class="image"></div>
 7 | 		</mu-card-media>
 8 |  	</div>
 9 | </template>
10 | 
11 | <script>
12 | 	export default {
13 | 		data () {
14 | 			return {
15 | 				
16 | 			}
17 | 		},
18 | 		props: {
19 | 			/*作品名称*/
20 | 			WorkName:{
21 | 				type: String,
22 | 			},
23 | 			/*时间*/
24 | 			date:{
25 | 				type: String,
26 | 				default: "",
27 | 			},
28 | 			closeFunc: {
29 | 				type: Function,
30 | 			},
31 | 			imageSrc: {
32 | 				type: String,
33 | 				default: '/images/H5.png',
34 | 			}
35 | 		},
36 | 		methods: {
37 | 			
38 | 		},
39 | 		computed: {
40 | 			getYear(){
41 | 				return this.date.slice(0, this.date.indexOf("T")); 
42 | 			},
43 | 			hasCloseFunc(){
44 | 				return this.closeFunc;
45 | 			},
46 | 		}
47 | 	}
48 | </script>
49 | 
50 | <style scoped>
51 | 	.container{
52 | 		cursor: pointer;
53 | 		position: relative;
54 | 	}
55 | 
56 | 	.image{
57 | 		width: 100%;
58 | 		height: 90px;
59 | 	}
60 | 
61 | 	.icon-clear{
62 | 		position: absolute;
63 | 		right: 0px;
64 | 		top: 0px;
65 | 		z-index: 10;
66 | 	}
67 | 
68 | </style>


--------------------------------------------------------------------------------
/views/components/LoginImage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |  	<div>
 3 | 		
 4 |  	</div>
 5 | </template>
 6 | 
 7 | <script>
 8 | 
 9 | 	export default {
10 | 		components: {
11 | 		 	
12 | 		}
13 | 	}
14 | </script>
15 | 
16 | <style scoped>
17 | 	.img-paper {
18 | 	  display: inline-block;
19 | 	  height: 100px;
20 | 	  width: 100px;
21 | 	  text-align: center;
22 | 	}
23 | </style>


--------------------------------------------------------------------------------
/views/components/LoginInput.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |  	<div class="container" >
  3 | 		<div class="div-login" >
  4 | 			<mu-paper class="login-background" :zDepth="5" >
  5 | 				<div class="div-h5-icon">
  6 | 					<img src="/images/H5.png" width="128" height="128" />
  7 | 				</div>
  8 | 				<mu-text-field class="login-input" label="用户名" v-model="userName" labelFloat/><br/>
  9 | 				<mu-text-field class="login-input" label="密码" v-model="passWord" hintText="密码" type="password" labelFloat/><br/>
 10 | 				<div class="div-login-register">
 11 | 					<div class="checkbox-login-register">
 12 | 						<mu-checkbox :vuew="isRememberPassword" v-model="isRememberPassword" label="记住密码" /> <br/>
 13 | 					</div>
 14 | 					<div class="button-login-register">
 15 | 						<mu-flat-button @click="login" label="登陆" class="div-login-register-button" primary/>
 16 | 						<mu-flat-button @click="register" label="注册" class="div-login-register-button" secondary/>
 17 | 					</div>
 18 | 				</div>
 19 | 			<mu-paper>
 20 | 			<mu-popup position="top" :overlay="false" popupClass="popup-top" :open="topPopup">
 21 | 				{{message}}
 22 | 			</mu-popup>
 23 | 		</div>
 24 |  	</div>
 25 | </template>
 26 | 
 27 | <script>
 28 | 	let localStorage = window.localStorage || {}; 
 29 | 	export default {
 30 | 		data () {
 31 | 			return {
 32 | 				userName: localStorage['H5-UserName'] || "",
 33 | 				passWord: localStorage['H5-PassWord'] || "",
 34 | 				topPopup: false,
 35 | 				message: "",
 36 | 				isRememberPassword: localStorage['H5-isRememberPassword'] === 'true' ? true:false,
 37 | 			}
 38 | 		},
 39 | 		methods: {
 40 | 			msgAlert(msg){
 41 | 				this.message = msg;
 42 | 				this.topPopup = true;
 43 | 			},
 44 | 		 	login(){
 45 | 		 		fetch('/H5/Login',
 46 | 					{
 47 | 						method:'POST',
 48 | 						headers:{ 
 49 | 				 			'Accept': 'application/json', 
 50 | 				 			'Content-Type': 'application/json'
 51 | 						},
 52 | 						credentials: 'same-origin',
 53 | 						body: JSON.stringify({
 54 | 							method: 'login',
 55 | 							params: {
 56 | 								userName: this.userName,
 57 | 								passWord: this.passWord,
 58 | 							},
 59 | 						})
 60 | 					}
 61 | 				)
 62 | 				.then(response => response.json())
 63 | 				.then(d => {
 64 | 					if (d.result) {
 65 | 						/*登陆成功*/
 66 | 						this.$store.commit('Loading', true);
 67 | 						this.$store.dispatch('updateDesignWorks');
 68 | 						this.$store.commit('updateUserInfo', d.params.userInfo);
 69 | 						setTimeout(() => {
 70 | 							/*登陆加载效果，再次之前可以之后额外获取登陆前需要初始化的数据*/
 71 | 							this.$store.commit('Loading', false);                                                                              
 72 | 							this.$store.commit('setRoute','/Main');
 73 | 						}, 1000)
 74 | 
 75 | 						localStorage['H5-isRememberPassword'] = this.isRememberPassword;
 76 | 						localStorage['H5-UserName'] = this.userName;
 77 | 						if (this.isRememberPassword) {
 78 | 							/*记住密码*/
 79 | 							localStorage['H5-PassWord'] = this.passWord;
 80 | 						}
 81 | 						else{
 82 | 							localStorage['H5-PassWord'] = '';
 83 | 						}
 84 | 					}
 85 | 					else{
 86 | 						this.msgAlert(d.content);
 87 | 					}
 88 | 				})
 89 | 		 	},
 90 | 		 	register(){
 91 | 		 		this.$store.commit('setRoute','/Register');
 92 | 		 	}
 93 | 		},
 94 | 		computed: {
 95 | 
 96 | 		},
 97 | 		watch: {
 98 | 			topPopup(val){
 99 | 				if (val) {
100 | 					setTimeout(() => {
101 | 						this.topPopup = false;
102 | 					}, 2500);
103 | 				}
104 | 			}
105 | 		}
106 | 	}
107 | </script>
108 | 
109 | <style scoped>
110 | 
111 | 	.checkbox-login-register{
112 | 		padding-top: 5px;
113 | 		margin-left: 100px;
114 | 		width: 100px;
115 | 		float: left;
116 | 	}
117 | 
118 | 	.button-login-register{
119 | 		float: left;
120 | 		margin-left: 20px;
121 | 	}
122 | 
123 | 	.login-background {
124 | 	  display: inline-block;
125 | 	  background-color: #d7ccc8;
126 | 	  height: 270px;
127 | 	  width: 500px;
128 | 	  margin: 20px;
129 | 	  text-align: center;
130 | 	}
131 | 
132 | 	.login-input{
133 | 		width: 300px;
134 | 		margin-top: 20px;
135 | 	}
136 | 
137 | 	.div-login{
138 | 		position: absolute; 
139 | 		width: 300px; 
140 | 		top: 50%;
141 | 		margin-top: -150px;
142 | 		margin-left: -150px;
143 | 		height: 300px;
144 | 	}
145 | 
146 | 	.container{
147 | 		width: 300px;
148 | 		margin: 0px auto;
149 | 	}
150 | 
151 | 	.div-h5-icon{
152 | 		float: left;
153 | 		margin-top: 50px;
154 | 		margin-left: 20px;
155 | 	}
156 | 
157 | 	.div-login-register{
158 | 		padding-left: 70px;
159 | 	}
160 | 
161 | 	.div-login-register-button{
162 | 		margin-left: 0px;
163 | 	}
164 | </style>
165 | 
166 | <style lang="css">
167 | 	.popup-top {
168 | 		width: 100%;
169 | 		opacity: .8;
170 | 		height: 48px;
171 | 		line-height: 48px;
172 | 		display: flex;
173 | 		align-items: center;
174 | 		justify-content: center;
175 | 		max-width: 375px;
176 | 	}
177 | </style>


--------------------------------------------------------------------------------
/views/components/Navigation.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="">
 3 | 		<mu-paper>
 4 | 			<mu-bottom-nav :value="bottomNav" @change="handleChange">
 5 | 				<mu-bottom-nav-item value="Home" title="主页" icon="home"/>
 6 | 				<mu-bottom-nav-item value="Work" title="我的作品" icon="grade"/>
 7 | 				<mu-bottom-nav-item value="Setup" title="设置" icon="build"/>
 8 | 				<mu-bottom-nav-item value="Power" title="退出" icon="clear"/>
 9 | 			</mu-bottom-nav>
10 | 		</mu-paper>
11 | 		<mu-popup position="top" :overlay="false" popupClass="popup-top" :open="topPopup">
12 | 			{{message}}
13 | 		</mu-popup>
14 | 	</div>
15 | </template>
16 | 
17 | <script>
18 | 	export default {
19 | 		components: {
20 | 		 	
21 | 		},
22 | 		data(){
23 | 			return {
24 | 				bottomNav: 'home',
25 | 				topPopup: false,
26 | 				message: "",
27 | 		    }
28 | 		},
29 | 		methods: {
30 | 			msgAlert(msg){
31 | 				this.message = msg;
32 | 				this.topPopup = true;
33 | 			},
34 | 			handleChange (val) {
35 | 				this.bottomNav = val
36 | 
37 | 				switch(val){
38 | 					case 'Home':
39 | 						this.$store.commit('setPage','Home');
40 | 						break;
41 | 					case 'Work':
42 | 						this.$store.commit('setPage','Work');
43 | 						break;
44 | 					case 'Setup':
45 | 						this.$store.commit('setPage','Setup');
46 | 						break;
47 | 					case 'Power':
48 | 						/*退出*/
49 | 
50 | 						fetch('/H5/rpc',
51 | 							{
52 | 								method:'POST',
53 | 								headers:{ 
54 | 						 			'Accept': 'application/json', 
55 | 						 			'Content-Type': 'application/json'
56 | 								},
57 | 								credentials: 'same-origin',
58 | 								body: JSON.stringify({
59 | 									method: 'logout',
60 | 									params: null,
61 | 								})
62 | 							}
63 | 						)
64 | 						.then(response => response.json())
65 | 						.then(d => {
66 | 							if (d.result) {
67 | 								this.$store.commit('setRoute','/');
68 | 							}
69 | 							else{
70 | 								d.content && this.$store.commit('Alert', {isAlert: true, message: d.content});
71 | 							}
72 | 						})
73 | 
74 | 						
75 | 						break;
76 | 					default:
77 | 						alert('无此标签')
78 | 				}
79 | 			},
80 | 		},
81 | 		watch: {
82 | 			topPopup(val){
83 | 				if (val) {
84 | 					setTimeout(() => {
85 | 						this.topPopup = false;
86 | 					}, 2500);
87 | 				}
88 | 			}
89 | 		},
90 | 	}
91 | </script>
92 | 
93 | <style scoped>
94 | 	.container{
95 | 		width: 100%;
96 | 		height: 80px;
97 | 		background-color: #eeff41;
98 | 	}
99 | </style>


--------------------------------------------------------------------------------
/views/components/createWorkDialog.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |  	<div>
 3 | 		<mu-dialog :open="dialog" title="创建新作品" scrollable>
 4 | 			<img src="/images/H5.png" width="128" height="128" />
 5 | 			<mu-text-field label="作品名称" v-model="name" class="workNameInput" labelFloat/><br/>
 6 | 			<mu-flat-button primary label="确定" @click="sure" slot="actions"/>
 7 | 			<mu-flat-button primary label="取消" @click="cancel" slot="actions"/>
 8 | 		</mu-dialog>
 9 |  	</div>
10 | </template>
11 | 
12 | <script>
13 | 	/*use this.$store.commit('Alert', {isAlert: true, message: 'test'});*/
14 | 	export default {
15 | 		data () {
16 | 			return {
17 | 				name: "",
18 | 			}
19 | 		},
20 | 		methods: {
21 | 			cancel () {
22 | 		     	this.$store.commit('createWorkDialog', false);
23 | 		    },
24 | 		    sure () {
25 | 		    	if (this.name === "") {
26 | 		    		this.$store.commit('Alert', {isAlert: true, message: "作品名称不能为空"});
27 | 		    		return;
28 | 		    	}
29 | 		    	this.$store.commit('createWorkDialog', false);
30 | 		    	this.$store.commit('setWorkName', this.name);
31 | 		    	this.$store.commit('setRoute','/Design');
32 | 		    },
33 | 		},
34 | 		computed: {
35 | 			dialog(){
36 | 				return this.$store.state.Work.createWorkDialog;
37 | 			}
38 | 		}
39 | 	}
40 | </script>
41 | 
42 | <style scoped>
43 | 	.workNameInput{
44 | 		margin-left: 30px;
45 | 		margin-bottom: 35px;
46 | 	}
47 | </style>


--------------------------------------------------------------------------------
/views/components/shadow.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |  	<div v-show="isLoading">
 3 | 		<div class="mask opacity">
 4 | 			<div class="div-ProgressBar">
 5 | 				<div class="div-ProgressBar-conter">
 6 | 					<mu-circular-progress :size="180" color="#795548" :strokeWidth="10"></mu-circular-progress>
 7 | 					<div class="div-loading">Loading...</div>
 8 | 				</div>
 9 | 			</div>
10 | 		</div>
11 |  	</div>
12 | </template>
13 | 
14 | <script>
15 | 
16 | 	export default {
17 | 		components: {
18 | 
19 | 		},
20 | 		computed: {
21 | 			isLoading(){
22 | 				return this.$store.state.Main.isLoading;
23 | 			}
24 | 		}
25 | 	}
26 | </script>
27 | 
28 | <style scoped>
29 | 	.div-loading{
30 | 		color: #795548;
31 | 		margin-top: -100px;
32 | 		margin-left: 50px;
33 | 		font-size: 130%;
34 | 	}
35 | 
36 | 	.mask{
37 | 		height:100%; 
38 | 		width:100%; 
39 | 		position:fixed; 
40 | 		_position:absolute; 
41 | 		top:0; 
42 | 		z-index:1000; 
43 | 	} 
44 | 
45 | 	.opacity{ 
46 | 		opacity:0.3; 
47 | 		filter: 
48 | 		alpha(opacity=30); 
49 | 		background-color:#000; 
50 | 	} 
51 | 
52 | 	.div-ProgressBar{
53 | 		width: 200px;
54 | 		margin: 0px auto;
55 | 	}
56 | 
57 | 	.div-ProgressBar-conter{
58 | 		position: absolute; 
59 | 		width: 200px; 
60 | 		top: 50%;
61 | 		margin-top: -150px;
62 | 		height: 300px;
63 | 	}
64 | </style>


--------------------------------------------------------------------------------
/views/images/H5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/answershuto/H5/1089bc283f21d38a53fdbc3e4677d4de0e7687bc/views/images/H5.png


--------------------------------------------------------------------------------
/views/images/add.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/answershuto/H5/1089bc283f21d38a53fdbc3e4677d4de0e7687bc/views/images/add.png


--------------------------------------------------------------------------------
/views/images/mobilePhone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/answershuto/H5/1089bc283f21d38a53fdbc3e4677d4de0e7687bc/views/images/mobilePhone.png


--------------------------------------------------------------------------------
/views/images/music.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/answershuto/H5/1089bc283f21d38a53fdbc3e4677d4de0e7687bc/views/images/music.png


--------------------------------------------------------------------------------
/views/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html> 
 2 | <html> 
 3 | <head> 
 4 |  	<title>h5</title> 
 5 |  	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
 6 | 	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 7 | </head>
 8 | 
 9 | <body> 
10 | 
11 | <div id="app"></div>
12 | 
13 | </body>
14 | <script src="dist/build.js"></script>
15 | <script type="text/javascript">
16 | 	
17 | </script>
18 | <style type="text/css">
19 | 	body{
20 | 		background-color: #efebe9;
21 | 	}
22 | </style>
23 | </html>


--------------------------------------------------------------------------------
/views/layouts/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |  	<div class="container">
 3 | 		<div>
 4 | 			<mu-grid-list>
 5 | 				<mu-grid-tile v-for="tile in list" class="model">
 6 | 					<img :src="tile.image"/>
 7 | 					<span slot="title">{{tile.title}}</span>
 8 | 					<mu-icon-button icon="star_border" slot="action"/>
 9 | 				</mu-grid-tile>
10 | 			</mu-grid-list>
11 | 		</div>
12 |  	</div>
13 | </template>
14 | 
15 | <script>
16 | 	export default {
17 | 		data () {
18 | 		return {
19 | 			list: [{
20 | 					image: '../images/H5.png',
21 | 					title: 'H5',
22 | 				}, 
23 | 				{
24 | 					image: '../images/background.png',
25 | 					title: 'H5',
26 | 				}, 
27 | 				{
28 | 					image: '../images/defaultHeadPortrait.png',
29 | 					title: 'H5',
30 | 				}, 
31 | 			]
32 | 			}
33 | 		}
34 | 	}
35 | </script>
36 | 
37 | <style scoped>
38 | 	.container{
39 | 		
40 | 	}
41 | 
42 | 	.model{
43 | 
44 | 	}
45 | </style>


--------------------------------------------------------------------------------
/views/layouts/Login.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |  	<div class="container">
 3 |  		<login-image></login-image>
 4 |  		<login-input></login-input>
 5 |  	</div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import LoginImage from '../components/LoginImage.vue'
10 | import LoginInput from '../components/LoginInput.vue'
11 | 	export default {
12 | 		components: {
13 | 		 	LoginImage,
14 | 		 	LoginInput
15 | 		}
16 | 	}
17 | </script>
18 | 
19 | <style scoped>
20 | 	.container{
21 | 		
22 | 	}
23 | </style>


--------------------------------------------------------------------------------
/views/layouts/MobilePhone.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |  	<div class="container" ref="design">
  3 |  		<div class="div-main">
  4 |  			<div class="div-mobile-phone">
  5 |  				<div id="myDesignRect" class="mobilePhone-design" :style="backgroundColor">
  6 |  					<div v-show="hasMusic" class="music-icon" :class="{'rotate': isPlay}" @click="handleMusicClick"></div>
  7 |  					<div v-for="item in text" :id="item.id" class="design-text" :class="[(currentEle==item.id) ? 'design-select':'']" :style="showAnimation ? Object.assign(item.animationStyle, item.style): item.style" @click.stop="handleClickEle">
  8 |  						{{item.text}}
  9 |  					</div>
 10 |  					<img :src="'/H5/image?id='+item.imageID" v-for="item in image" :id="item.id" class="design-image" :class="[(currentEle==item.id) ? 'design-select':'']" :style="showAnimation ? Object.assign(item.animationStyle, item.style): item.style" @click.stop="handleClickEle">
 11 |  					</img>
 12 |  				</div>
 13 |  				<div class="mobilePhone-background" ></div>
 14 |  				<div class="mobilePhone-home" @click="handleClickHome"></div>
 15 |  			</div>
 16 |  		</div>
 17 | 		<div>
 18 | 			<audio id="myAudio" controls="controls" style="display:none;" >
 19 | 				<source  type="audio/mp3" />
 20 | 			</audio>
 21 | 		</div> 
 22 |  	</div>
 23 | </template>
 24 | 
 25 | <script>
 26 | 	import '../static/animation.css'
 27 | 	export default {
 28 | 		components: {
 29 | 			
 30 | 		},
 31 | 		data(){
 32 | 			return {
 33 | 				/*是否显示动画效果*/
 34 | 				showAnimation: false,
 35 | 				/*是否播放音乐*/
 36 | 				isPlay: true,
 37 | 			}
 38 | 		},
 39 | 		mounted(){
 40 | 			this.$refs.design.onclick = ()=>{
 41 | 				this.$store.dispatch('cancelCurrentEle');
 42 | 			}
 43 | 		},
 44 | 		beforeDestroy(){
 45 | 			this.$refs.design.onclick = null;
 46 | 		},
 47 | 		methods: {
 48 | 			handleClickHome(){
 49 | 				if (this.showAnimation) {
 50 | 					/*动画正在执行中，停止动画并关闭定时器*/
 51 | 					this.showAnimation = false;
 52 | 					clearTimeout(this.animationTimer)
 53 | 					return;
 54 | 				}
 55 | 
 56 | 				/*获取最大动画时间*/
 57 | 				let maxTime = 1;
 58 | 
 59 | 				let text = [];
 60 | 				this.$store.state.Design.DesignInfos.pages.forEach(item => {
 61 | 					if (item.id === this.$store.state.Design.DesignInfos.currentPage) {
 62 | 						text = item.text || [];
 63 | 					}
 64 | 				})
 65 | 				
 66 | 				text.forEach(item => {
 67 | 					let durationTime = parseInt(item.animationStyle['animation-duration']);
 68 | 					maxTime = (durationTime > maxTime) ? durationTime : maxTime;
 69 | 				})
 70 | 
 71 | 				let image = [];
 72 | 				this.$store.state.Design.DesignInfos.pages.forEach(item => {
 73 | 					if (item.id === this.$store.state.Design.DesignInfos.currentPage) {
 74 | 						image = item.image || [];
 75 | 					}
 76 | 				})
 77 | 
 78 | 				image.forEach(item => {
 79 | 					let durationTime = parseInt(item.animationStyle['animation-duration']);
 80 | 					maxTime = (durationTime > maxTime) ? durationTime : maxTime;
 81 | 				})
 82 | 
 83 | 				/*浏览动画并开启定时器，执行完所有动画以后将该标志位改为false*/
 84 | 				this.showAnimation = true;
 85 | 				this.animationTimer = setTimeout(() => {
 86 | 					this.showAnimation = false;
 87 | 				}, maxTime * 1000)
 88 | 			},
 89 | 			handleClickEle(e){
 90 | 				this.$store.commit('modifyCurrentElement', e.target.id);
 91 | 				this.$store.commit('isModifyEle', true);
 92 | 			},
 93 | 			handleMusicClick(){
 94 | 				this.isPlay = !this.isPlay;
 95 | 				let audio = document.getElementById('myAudio');
 96 | 				if (this.isPlay) {
 97 | 					audio.play();
 98 | 				}
 99 | 				else{
100 | 					audio.pause();
101 | 				}
102 | 			},
103 | 		},
104 | 		computed: {
105 | 			text(){
106 | 				let text = [];
107 | 				this.$store.state.Design.DesignInfos.pages.forEach(item => {
108 | 					if (item.id === this.$store.state.Design.DesignInfos.currentPage) {
109 | 						text = item.text || [];
110 | 					}
111 | 				})
112 | 				return text;
113 | 			},
114 | 			image(){
115 | 				let image = [];
116 | 				this.$store.state.Design.DesignInfos.pages.forEach(item => {
117 | 					if (item.id === this.$store.state.Design.DesignInfos.currentPage) {
118 | 						image = item.image || [];
119 | 					}
120 | 				})
121 | 				return image;
122 | 			},
123 | 			currentEle(){
124 | 				return this.$store.state.Design.DesignInfos.currentElement;
125 | 			},
126 | 			hasMusic(){
127 | 				return (this.$store.state.Design.DesignInfos.music !== '')
128 | 			},
129 | 			backgroundColor(){
130 | 				return {'background-color': this.$store.state.Design.DesignInfos.currentBackgroundColor || '#FFFFFF'};
131 | 			},
132 | 		},
133 | 		watch: {
134 | 			
135 | 		}
136 | 	}
137 | </script>
138 | 
139 | <style scoped>
140 | 	.div-mobile-phone{
141 | 		position: absolute; 
142 | 		width: 450px; 
143 | 		top: 50%;
144 | 		margin-top: -400px;
145 | 		height: 810px;
146 | 		background-image: url("/images/mobilePhone.png");
147 | 	}
148 | 
149 | 	.container{
150 | 		width: 450px;
151 | 		margin: 0px auto;
152 | 	}
153 | 
154 | 	.div-main{
155 | 		width: 450px;
156 | 		margin: 0px auto;
157 | 	}
158 | 
159 | 	.mobilePhone-background{
160 | 		width: 340px;
161 | 		height: 571px;
162 | 		margin-top: 122px;
163 | 		margin-left: 49px;
164 | 	}
165 | 
166 | 	.mobilePhone-design{
167 | 		position: absolute;
168 | 		width: 340px;
169 | 		height: 571px;
170 | 		top: 15%;
171 | 		left: 11%;
172 | 	}
173 | 
174 | 	.design-text, .design-image{
175 | 		position: absolute;
176 | 		cursor: pointer;
177 | 	}
178 | 
179 | 	.design-title{
180 | 		text-align: center;
181 | 		height: 50px;
182 | 		background-color: black;
183 | 		color: white;
184 | 		line-height: 50px;
185 | 		font-size: 150%;
186 | 	}
187 | 
188 | 	.mobilePhone-home{
189 | 		margin-left: 194px;
190 | 		margin-top: 11px;
191 | 		width: 50px;
192 | 		height: 50px;
193 | 		cursor: pointer;
194 | 	}
195 | 
196 | 	.design-select{
197 | 		border:1px solid black;
198 | 	}
199 | 
200 | 	.div-mobile-grid{
201 | 		background-image: url("/images/grid.png");
202 | 	}
203 | 
204 | 	.music-icon{
205 | 		position: absolute;
206 | 		top: 5%;
207 | 		right: 5%;
208 | 		background-image: url('/images/music.png');
209 | 		background-repeat: no-repeat;
210 | 		width: 22px;
211 | 		height: 22px;
212 | 		cursor: pointer;
213 | 	}
214 | 
215 | 	.rotate{
216 | 		animation: rotate 5s infinite linear;
217 | 		-moz-animation: rotate 5s infinite linear;	/* Firefox */
218 | 		-webkit-animation: rotate 5s infinite linear;	/* Safari 和 Chrome */
219 | 		-o-animation: rotate 5s infinite linear;	/* Opera */
220 | 	}
221 | 
222 | 	@keyframes rotate
223 | 	{
224 | 		from {transform:rotate(10deg);}
225 | 		to {transform:rotate(360deg);}
226 | 	}
227 | 
228 | 	@-moz-keyframes rotate /* Firefox */
229 | 	{
230 | 		from {transform:rotate(10deg);}
231 | 		to {transform:rotate(360deg);}
232 | 	}
233 | 
234 | 	@-webkit-keyframes rotate /* Safari 和 Chrome */
235 | 	{
236 | 		from {transform:rotate(0deg);}
237 | 		to {transform:rotate(360deg);}
238 | 	}
239 | 
240 | 	@-o-keyframes rotate /* Opera */
241 | 	{
242 | 		from {transform:rotate(10deg);}
243 | 		to {transform:rotate(360deg);}
244 | 	}
245 | </style>


--------------------------------------------------------------------------------
/views/layouts/PageList.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |  	<div ref="design">
  3 | 		<mu-drawer :open="isOpen" class="drawer">
  4 | 			<div class="editColumn">
  5 | 				<mu-icon-button tooltip="文字" tooltipPosition="top-center" touch icon="edit" @click="handleClickEdit('word')" />
  6 | 				<mu-icon-button tooltip="图片" tooltipPosition="top-center" touch icon="image" @click="handleClickEdit('picture')" />
  7 | 				<mu-icon-button tooltip="音乐" tooltipPosition="top-center" touch icon="audiotrack" @click="handleClickEdit('music')" />
  8 | 			</div>
  9 | 			<div class="title-pages">
 10 | 				<div class="pages-font">页面列表</div>
 11 | 				<mu-float-button icon="add" mini backgroundColor="#795548" class="add-btn" @click="handleClickAdd" />
 12 | 			</div>
 13 | 			<mu-list>
 14 | 				<div v-for="(page, index) in pages" class="pages-div">
 15 | 					<mu-chip class="pageicon" :backgroundColor="isCurrentPage(index)" color="#f3e5f5" @delete="handleClose(page.id, index)" @click="handleClick(page.id)" showDelete>
 16 | 						<mu-avatar :size="32" src="/images/H5.png"/>
 17 | 						<div class="pageNum">第&nbsp{{index+1}}页</div>
 18 | 					</mu-chip>
 19 | 				</div>
 20 | 			</mu-list>
 21 | 			<div class="page-set">
 22 | 				<div class="pages-font">页面设置</div>
 23 | 				<div class="page-set-item">
 24 | 					<div>
 25 | 						<div class="modifyPrompt">背景颜色</div>
 26 | 						<input type="color" name="" class="color" v-model="BackgroundColor" >
 27 | 					</div>
 28 | 				</div>
 29 | 				<div class="QRimage">
 30 | 					<div class="QRimage-div">
 31 | 						<img class="QRimage-img" :src="url">
 32 | 					</div>
 33 | 					<div class="QRimage-prompt">扫一扫查看作品</div>
 34 | 					<div class="QRimage-prompt">提示：查看前请先保存</div>
 35 | 				</div>
 36 | 			</div>
 37 | 		</mu-drawer>
 38 | 		<mu-dialog :open="confirm" title="H5">
 39 | 			确认删除第{{delIndex+1}}页吗？？
 40 | 			<mu-flat-button slot="actions" @click="handleConfirmBtn(true)" primary label="确定"/>
 41 | 			<mu-flat-button slot="actions" primary @click="handleConfirmBtn(false)" label="取消"/>
 42 | 		</mu-dialog>
 43 |  	</div>
 44 | </template>
 45 | 
 46 | <script>
 47 | 
 48 | 	export default {
 49 | 		components: {
 50 | 			
 51 | 		},
 52 | 		data () {
 53 | 			return {
 54 | 				isOpen: true,
 55 | 				BackgroundColor: '#FFFFFF',
 56 | 				confirm: false,
 57 | 				delPageId: 0,
 58 | 				delIndex: 0,
 59 | 			}
 60 | 		},
 61 | 		mounted(){
 62 | 			this.$refs.design.onclick = ()=>{
 63 | 				this.$store.dispatch('cancelCurrentEle');
 64 | 			}
 65 | 
 66 | 			this.BackgroundColor = this.$store.state.Design.DesignInfos.currentBackgroundColor || '#FFFFFF';
 67 | 		},
 68 | 		beforeDestroy(){
 69 | 			this.$refs.design.onclick = null;
 70 | 		},
 71 | 		methods: {
 72 | 			handleClose(pageId, index){
 73 | 				this.delPageId = pageId || 0;
 74 | 				this.confirm = true;
 75 | 				this.delIndex = index || 0;
 76 | 			},
 77 | 			handleClick(pageId){
 78 | 				this.$store.commit('changePage', pageId);
 79 | 
 80 | 				/*修改背景色*/
 81 | 				this.BackgroundColor = this.$store.state.Design.DesignInfos.currentBackgroundColor || '#FFFFFF';
 82 | 			},
 83 | 			handleClickAdd(){
 84 | 				this.$store.dispatch('addPageNum');
 85 | 			},
 86 | 			handleClickEdit(type){
 87 | 				switch(type){
 88 | 					case 'word':
 89 | 						this.$store.commit('addDesignText', '请输入文字');
 90 | 						break;
 91 | 					case 'picture':
 92 | 						this.$store.dispatch('imageDialog', true);
 93 | 						break;
 94 | 					case 'music':
 95 | 						this.$store.dispatch('musicDialog', true);
 96 | 						break;
 97 | 				}
 98 | 			},
 99 | 			isCurrentPage(page){
100 | 				return (this.$store.state.Design.DesignInfos.currentPage === ('page_'+page)) ? '#795548' : '#a1887f';
101 | 			},
102 | 			handleConfirmBtn(b){
103 | 				this.confirm = false;
104 | 				if (b) {
105 | 					this.$store.dispatch('delPageNum', this.delPageId);
106 | 				}
107 | 			},
108 | 		},
109 | 		computed: {
110 | 			pages(){
111 | 				return this.$store.state.Design.DesignInfos.pages;
112 | 			},
113 | 			url(){
114 | 				return '/H5/QRcode?userName='+localStorage['H5-UserName']+'&workName='+this.$store.state.Work.workName;
115 | 			},
116 | 		},
117 | 		watch:{
118 | 			BackgroundColor(val){
119 | 				this.$store.state.Design.DesignInfos.pages.forEach((item, index) => {
120 | 					if (item.id === this.$store.state.Design.DesignInfos.currentPage) {
121 | 						this.$store.commit('setPageBackgroundColor', val);
122 | 					}
123 | 				})
124 | 			},
125 | 		},
126 | 	}
127 | </script>
128 | 
129 | 
130 | <style scoped>
131 | 	.QRimage{
132 | 		margin-top: 30px;
133 | 	}
134 | 
135 | 	.QRimage-img{
136 | 		width: 200px;
137 | 		height: 200px;
138 | 	}
139 | 
140 | 	.QRimage-div{
141 | 		width: 200px;
142 | 		margin: 0px auto;
143 | 	}
144 | 
145 | 	.QRimage-prompt{
146 | 		color: #795548;
147 | 		width: 150px;
148 | 		margin: 0px auto;
149 | 		text-align: center;
150 | 	}
151 | 
152 | 	.pageicon{
153 | 		margin-left: 35px;
154 | 	}
155 | 
156 | 	.drawer{
157 | 		background-color: #d7ccc8;
158 | 	}
159 | 
160 | 	.title-pages{
161 | 		width: 100%;
162 | 		height: 70px;
163 | 	}
164 | 
165 | 	.add-btn{
166 | 		float: right;
167 | 		margin-right: 20px;
168 | 		margin-top: 20px;
169 | 	}
170 | 
171 | 	.title-pages div{
172 | 		float: left;
173 | 	}
174 | 
175 | 	.pages-font{
176 | 		font-size: 170%;
177 | 		margin-top: 20px;
178 | 		margin-left: 70px;
179 | 		color: #795548;
180 | 	}
181 | 
182 | 	.pages-div{
183 | 		margin-top: 10px;
184 | 	}
185 | 
186 | 	.pageNum{
187 | 		margin-left: 30px;
188 | 		margin-right: 30px;
189 | 	}
190 | 
191 | 	.editColumn{
192 | 		margin: 55px auto 0px;
193 | 		width: 158px;
194 | 	}
195 | 
196 | 	.modifyPrompt{
197 | 		width: 60px;
198 | 		margin-left: 20px;
199 | 		float: left;
200 | 	}
201 | 
202 | 	.color{
203 | 		width: 50px;
204 | 		margin-left: 30px;
205 | 		width: 120px;
206 | 	}
207 | 
208 | 	.page-set{
209 | 		height: 400px;
210 | 		width: 100%;
211 | 		position: absolute;
212 | 		bottom: 0;
213 | 	}
214 | 
215 | 	.page-set-item > div{
216 | 		margin: 10px auto;
217 | 	}
218 | </style>


--------------------------------------------------------------------------------
/views/layouts/Setup.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |  	<div class="container">
 3 |  		<div class="main">
 4 |             <div class="every-info">
 5 |                 <div class="info-key">用户昵称</div>
 6 |                 <mu-auto-complete v-model="modifyNikeName" class="text" >  
 7 |             </div>  
 8 |             <div class="every-info">
 9 |                 <div class="info-key">性别</div>
10 |                 <mu-select-field v-model="Gender">
11 |                     <mu-menu-item value="Man" title="男"/>
12 |                     <mu-menu-item value="Woman" title="女"/>
13 |                 </mu-select-field>
14 |             </div>   
15 |             <div class="every-info">
16 |                 <div class="info-key">eMail</div>
17 |                 <mu-auto-complete v-model="eMail" class="text" >  
18 |             </div>  
19 |             <div class="every-info">
20 |                 <div class="info-key">年龄</div>
21 |                 <mu-auto-complete v-model="age" class="text" >  
22 |             </div> 
23 |             <div class="every-info">
24 |                 <div class="info-key">个性签名</div>
25 |                 <mu-auto-complete v-model="personalizedSignature" class="text" >  
26 |             </div> 
27 |             <div class="every-info">
28 |                 <div class="info-key">所在区域</div>
29 |                 <mu-auto-complete v-model="place" class="text" >  
30 |             </div> 
31 |             <div class="save-info">
32 |                 <mu-flat-button label="保存设置" @click="handleClickSave" class="" primary/>
33 |             </div>
34 |         </div>
35 |  	</div>
36 | </template>
37 | 
38 | <script>
39 | 	export default {
40 |         mounted () {
41 |             console.log(this.$store.state.User.userInfo)
42 |         },
43 | 		components: {
44 |             
45 | 		},
46 |         data () {
47 |             return {
48 |                 modifyNikeName: this.$store.state.User.userInfo.nikeName,
49 |                 Gender: this.$store.state.User.userInfo.Gender,
50 |                 eMail: this.$store.state.User.userInfo.eMail,
51 |                 age: this.$store.state.User.userInfo.age,
52 |                 personalizedSignature: this.$store.state.User.userInfo.personalizedSignature,
53 |                 place: this.$store.state.User.userInfo.place,
54 |             }
55 |         },
56 |         methods: {
57 |             handleClickSave () {
58 |                 let userInfo = Object.assign({}, this.$store.state.User.userInfo);
59 |                 userInfo.modifyNikeName = this.modifyNikeName;
60 |                 userInfo.Gender = this.Gender;
61 |                 userInfo.eMail = this.eMail;
62 |                 userInfo.age = this.age;
63 |                 userInfo.personalizedSignature = this.personalizedSignature;
64 |                 userInfo.place = this.place;
65 |                 this.$store.dispatch('saveUserInfo', userInfo);
66 |             }
67 |         },
68 |         computed: {
69 |             
70 |         }
71 | 	}
72 | </script>
73 | 
74 | <style lang="less" scoped>
75 | 	.container{
76 | 		display: flex;
77 | 
78 |         .main{
79 |              margin: 0px auto;
80 |         }
81 | 
82 |         .every-info{
83 |             margin-top: 20px;
84 | 
85 |             .info-key{
86 |                 display: inline-block;
87 |                 width: 70px;
88 |             }
89 |         }
90 | 
91 |         .save-info{
92 |             text-align: center;
93 |             margin-top: 20px;
94 |         }
95 | 	}
96 | </style>


--------------------------------------------------------------------------------
/views/layouts/Work.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |  	<div class="container">
  3 |  		<div class="createWork">
  4 |  			<div v-show="!hasWorks" class="prompt">
  5 | 	 			您还没有作品，赶紧创建一个吧.
  6 | 	 			<mu-flat-button label="创建作品" class="create-button" @click="createWork" primary/>
  7 | 	 		</div>
  8 |  		</div>
  9 |  		<div v-show="hasWorks" class="works">
 10 |  			<div v-for="item in DesignWorks">
 11 | 				<DesignWorkPage :imageSrc="'/H5/QRcode?userName='+userName()+'&workName='+item.workName" :WorkName="item.workName" :date="item.date" @click.native="clickDesignWorkPage(item.workName, item.designInfos)" class="DesignWorkPage" :closeFunc="handleClickClose(item.workName)"></DesignWorkPage>
 12 |  			</div>
 13 |  			<div class="DesignWorkPage add">
 14 |  				<mu-icon class="iconAdd" @click.native="createWork" size="200" value="add"/>
 15 |  			</div>
 16 |  		</div>
 17 |  		<createWorkDialog></createWorkDialog>
 18 | 		<mu-dialog :open="confirm" title="H5">
 19 | 			确认删除作品{{delWorkName}}吗？
 20 | 			<mu-flat-button slot="actions" @click="handleConfirmBtn(true)" primary label="确定"/>
 21 | 			<mu-flat-button slot="actions" primary @click="handleConfirmBtn(false)" label="取消"/>
 22 | 		</mu-dialog>
 23 |  	</div>
 24 | </template>
 25 | 
 26 | <script>
 27 | 	import createWorkDialog from '../components/createWorkDialog.vue'
 28 | 	import DesignWorkPage from '../components/DesignWorkPage.vue'
 29 | 
 30 | 	let localStorage = window.localStorage || {}; 
 31 | 
 32 | 	export default {
 33 | 		components: {
 34 | 			createWorkDialog,
 35 | 			DesignWorkPage,
 36 | 		},
 37 | 		data(){
 38 | 			return {
 39 | 				confirm: false,
 40 | 				delWorkName: '',
 41 | 			};
 42 | 		},
 43 | 		methods: {
 44 | 			createWork(){
 45 | 				this.$store.commit('createWorkDialog', true);
 46 | 			},
 47 | 			clickDesignWorkPage(workName, designInfos){
 48 | 				this.$store.commit('setDesign', designInfos);
 49 | 				this.$store.commit('setWorkName', workName);
 50 | 		    	this.$store.commit('setRoute','/Design');
 51 | 			},
 52 | 			handleClickClose(workName){
 53 | 				return () => {
 54 | 					this.delWorkName = workName;
 55 | 					this.confirm = true;
 56 | 				}
 57 | 			},
 58 | 			handleConfirmBtn(l){
 59 | 				if (l) {
 60 | 					this.$store.dispatch('delUserWork', this.delWorkName);
 61 | 				}
 62 | 
 63 | 				this.confirm = false;
 64 | 			},
 65 | 			userName(){
 66 | 				return localStorage['H5-UserName'] || '';
 67 | 			},
 68 | 		},
 69 | 		computed: {
 70 | 			/*是否有作品*/
 71 | 			hasWorks(){
 72 | 				return (0 !== this.$store.state.Work.DesignWorks.length);
 73 | 			},
 74 | 			/*所有作品列表*/
 75 | 			DesignWorks(){
 76 | 				return this.$store.state.Work.DesignWorks;
 77 | 			},
 78 | 		},
 79 | 	}
 80 | </script>
 81 | 
 82 | <style scoped>
 83 | 	.container{
 84 | 		
 85 | 	}
 86 | 
 87 | 	.add{
 88 | 		cursor: pointer;
 89 | 		text-align: center;
 90 | 	}
 91 | 
 92 | 	.iconAdd{
 93 | 		line-height: 350px;
 94 | 	}
 95 | 
 96 | 	.DesignWorkPage{
 97 | 		width: 300px;
 98 | 		margin: 30px 30px;
 99 | 		border: 3px solid #6D6B6A;
100 | 	}
101 | 
102 | 	.createWork{
103 | 		width: 300px;
104 | 		margin: 0px auto;
105 | 	}
106 | 
107 | 	.prompt{
108 | 		position: absolute; 
109 | 		width: 300px; 
110 | 		top: 50%;
111 | 		height: 300px;
112 | 		font-size: 150%;
113 | 		text-align: center;
114 | 	}
115 | 
116 | 	.create-button{
117 | 		margin-top: 30px;
118 | 	}
119 | 
120 | 	.works{
121 | 		display: flex;
122 | 		display: -webkit-flex;
123 | 		flex-flow: row;
124 | 		flex-wrap: wrap;
125 | 		width: 80%;
126 | 		margin: 0px auto;
127 | 	}
128 | </style>


--------------------------------------------------------------------------------
/views/layouts/imageDialog.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<mu-dialog :open="isOpen" title="" >	
  3 | 		<div class="image-left">
  4 | 			<mu-list @change="handleChange">
  5 | 				<mu-list-item title="我的图片" value="myImage" >
  6 | 					<mu-icon slot="left" value="image"/>
  7 | 				</mu-list-item>
  8 | 				<mu-list-item title="上传图片" value="uploadImage" >
  9 | 					<mu-icon slot="left" value="image"/>
 10 | 				</mu-list-item>
 11 | 				<mu-list-item title="管理图片" value="managerImage" >
 12 | 					<mu-icon slot="left" value="image"/>
 13 | 				</mu-list-item>
 14 | 			</mu-list>
 15 | 		</div>
 16 | 		<form name="ImageForm" class="uploadImage" action="/H5/UploadImage" method="post" encType="multipart/form-data" target="imageIframe">
 17 | 			<input type="file" accept="image/*" name="image" id="uploadImage" @change="handleChangeUploadImage()" ></input>
 18 | 			<iframe name="imageIframe"></iframe>
 19 | 		</form>
 20 | 		<div class="image-right">
 21 | 			<div v-show="isMyImage">
 22 | 				<div>
 23 | 					<span class="image-span" v-for="item in userImages">
 24 | 						<img :src="'/H5/image?id='+item.id" @click="handleClickImage(item)" />
 25 | 					</span>
 26 | 				</div>
 27 | 			</div>
 28 | 			<div v-show="isManagerImage">
 29 | 				<div>
 30 | 					<mu-flat-button @click="chooseAllImages" primary label="全选"/>
 31 | 					<mu-flat-button @click="chooseNullImages" primary label="清空"/>
 32 | 					<mu-flat-button @click="deleteImages" primary label="删除"/>
 33 | 				</div>
 34 | 				<span class="image-span" v-for="item in userImages">
 35 | 					<mu-checkbox :nativeValue="item.id" v-model="managerImageList" /> 
 36 | 					<img :src="'/H5/image?id='+item.id" />
 37 | 				</span>
 38 | 			</div>
 39 | 		</div>
 40 | 		<mu-flat-button slot="actions" @click="cancel" primary label="取消"/>
 41 | 	</mu-dialog>
 42 | </template>
 43 | 
 44 | <script>
 45 | 	export default {
 46 | 		components: {
 47 | 
 48 | 		},
 49 | 		data(){
 50 | 			return {
 51 | 				currentType: 'myImage',
 52 | 				managerImageList: [],
 53 | 			};
 54 | 		},
 55 | 		methods:{
 56 | 			handleChange(type){
 57 | 				if (type === 'uploadImage') {
 58 | 					(document.getElementById('uploadImage')).click();
 59 | 				}
 60 | 				else {
 61 | 					this.currentType = type;
 62 | 				}
 63 | 			},
 64 | 			cancel(){
 65 | 				this.$store.commit('imageDialog', false);
 66 | 			},
 67 | 			refreshList(){
 68 | 				fetch('/H5/rpc',
 69 | 					{
 70 | 						method:'POST',
 71 | 						headers:{ 
 72 | 				 			'Accept': 'application/json', 
 73 | 				 			'Content-Type': 'application/json'
 74 | 						},
 75 | 						credentials: 'same-origin',
 76 | 						body: JSON.stringify({
 77 | 							method: 'getAllUserImages',
 78 | 							params: null,
 79 | 						})
 80 | 					}
 81 | 				)
 82 | 				.then(response => response.json())
 83 | 				.then(d => {
 84 | 					if (d.result) {
 85 | 						this.$store.commit('updateUserImages', d.params);
 86 | 					}
 87 | 				})
 88 | 			},
 89 | 			handleChangeUploadImage(){
 90 | 				fetch('/H5/UploadImage',
 91 | 					{
 92 | 						method:'POST',
 93 | 						credentials: 'same-origin',
 94 | 						body: new FormData(document.forms.namedItem("ImageForm" )),
 95 | 					}
 96 | 				)
 97 | 				.then(response => response.json())
 98 | 				.then(d => {
 99 | 					if (d.result) {
100 | 						this.refreshList();
101 | 						this.$store.commit('alertDesignMessage', {isAlert: true, message: '上传成功'});
102 | 					}
103 | 					else{
104 | 						this.$store.commit('alertDesignMessage', {isAlert: true, message: '上传失败'});
105 | 					}
106 | 				})
107 | 			},
108 | 			chooseAllImages(){
109 | 				this.$store.state.Design.userImages.forEach((item, index) => {
110 | 					this.managerImageList.push(item.id);
111 | 				})
112 | 			},
113 | 			chooseNullImages(){
114 | 				this.managerImageList = [];
115 | 			},
116 | 			deleteImages(){
117 | 				fetch('/H5/rpc',
118 | 					{
119 | 						method:'POST',
120 | 						headers:{ 
121 | 				 			'Accept': 'application/json', 
122 | 				 			'Content-Type': 'application/json'
123 | 						},
124 | 						credentials: 'same-origin',
125 | 						body: JSON.stringify({
126 | 							method: 'delUserImages',
127 | 							params: {
128 | 								id: this.managerImageList,
129 | 							},
130 | 						})
131 | 					}
132 | 				)
133 | 				.then(response => response.json())
134 | 				.then(d => {
135 | 					if (d.result) {
136 | 						this.refreshList();
137 | 						this.$store.commit('alertDesignMessage', {isAlert: true, message: '删除成功'});
138 | 					}
139 | 					else{
140 | 						this.$store.commit('alertDesignMessage', {isAlert: true, message: '删除失败'});
141 | 					}
142 | 				})
143 | 			},
144 | 			handleClickImage(info){
145 | 				this.$store.commit('addDesignImage', info.id);
146 | 				this.$store.commit('imageDialog', false);
147 | 			},
148 | 		},
149 | 		computed:{
150 | 			isOpen(){
151 | 				return this.$store.state.Design.imageDialog;
152 | 			},
153 | 			userImages(){
154 | 				return this.$store.state.Design.userImages;
155 | 			},
156 | 			isMyImage(){
157 | 				return (this.currentType === 'myImage');
158 | 			},
159 | 			isManagerImage(){
160 | 				return (this.currentType === 'managerImage');
161 | 			},
162 | 		}
163 | 	}
164 | </script>
165 | 
166 | <style scoped>
167 | 	.uploadImage{
168 | 		display: none;
169 | 	}
170 | 
171 | 	.image-left{
172 | 		float: left;
173 | 		width: 160px;
174 | 	}
175 | 
176 | 	.image-right{
177 | 		float: left;
178 | 		width: 530px;
179 | 	}
180 | 
181 | 	.image-span{
182 | 		margin-left: 20px;
183 | 		cursor: pointer;
184 | 	}
185 | 
186 | 	.image-span > img{
187 | 		width: 50px;
188 | 		height: 50px;
189 | 	}
190 | 
191 | </style>


--------------------------------------------------------------------------------
/views/layouts/modifyDesign.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |  	<div>
  3 | 		<mu-drawer right :open="isOpen" class="drawer" >
  4 | 			<mu-tabs :value="activeTab" @change="handleTabChange" class="tab">
  5 | 				<mu-tab value="style" icon="star" title="样式"/>
  6 | 				<mu-tab value="cartoon" icon="star" title="动画"/>
  7 | 			</mu-tabs>
  8 | 			<div v-show="isStyle" class="showStyle">
  9 | 				<div v-show="isText">
 10 | 					<div class="showTextDiv">
 11 | 						<div class="showText modifyPrompt">文本内容</div>
 12 | 						<mu-auto-complete v-model="modifyText" class="text" >
 13 | 					</div>
 14 | 					<div>
 15 | 						<div class="modifyPrompt">横向位置</div>
 16 | 						<mu-slider v-model="modifyLeft" class="slider"/>
 17 | 					</div>
 18 | 					<div>
 19 | 						<div class="modifyPrompt">纵向位置</div>
 20 | 						<mu-slider v-model="modifyTop" class="slider"/>
 21 | 					</div>
 22 | 					<div>
 23 | 						<div class="modifyPrompt">文字颜色</div>
 24 | 						<input type="color" name="" class="color" v-model="modifyColor" >
 25 | 					</div>
 26 | 					<div>
 27 | 						<div class="modifyPrompt">背景颜色</div>
 28 | 						<input type="color" name="" class="color" v-model="modifyBackgroundColor" >
 29 | 					</div>
 30 | 					<div>
 31 | 						<div class="modifyPrompt">字体大小</div>
 32 | 						<mu-slider v-model="modifyFontSize" class="slider" max='300' />
 33 | 					</div>
 34 | 					<div>
 35 | 						<div class="modifyPrompt">行高</div>
 36 | 						<mu-slider v-model="modifyLineHeight" class="slider" max='500' />
 37 | 					</div>
 38 | 					<div>
 39 | 						<div class="modifyPrompt">内边距</div>
 40 | 						<mu-slider v-model="modifyPadding" class="slider" max='100' />
 41 | 					</div>
 42 | 					<div>
 43 | 						<mu-raised-button label="删除" class="delete-element" @click="handleClickDelEle" secondary/>
 44 | 					</div>
 45 | 				</div>
 46 | 				<div v-show="isImage">
 47 | 					<div>
 48 | 						<div class="modifyPrompt">横向位置</div>
 49 | 						<mu-slider v-model="modifyLeft" class="slider"/>
 50 | 					</div>
 51 | 					<div>
 52 | 						<div class="modifyPrompt">纵向位置</div>
 53 | 						<mu-slider v-model="modifyTop" class="slider"/>
 54 | 					</div>
 55 | 					<div>
 56 | 						<div class="modifyPrompt">图片宽度</div>
 57 | 						<mu-slider v-model="modifyImageWidth" class="slider" max='340'/>
 58 | 					</div>
 59 | 					<div>
 60 | 						<div class="modifyPrompt">图片高度</div>
 61 | 						<mu-slider v-model="modifyImageHeight" class="slider" max='340'/>
 62 | 					</div>
 63 | 					<div>
 64 | 						<mu-raised-button label="删除" class="delete-element" @click="handleClickDelEle" secondary/>
 65 | 					</div>
 66 | 				</div>
 67 | 			</div>
 68 | 			<div v-show="isCartoon" class="showAnimation">
 69 | 				<div>
 70 | 					<div class="modifySelect">动画</div>
 71 | 					<mu-select-field v-model="animationName" label="" labelClass="animation" >
 72 | 						<mu-menu-item v-for="item,index in animationList" :value="item.type" :title="item.name" />
 73 | 					</mu-select-field>
 74 | 				</div>
 75 | 				<div>
 76 | 					<div class="modifySelect">动画时间</div>
 77 | 					<mu-slider v-model="animationDuration" class="sliderAnimation" max='10' />
 78 | 				</div>
 79 | 				<div>
 80 | 					<div class="modifySelect">动画曲线</div>
 81 | 					<mu-select-field v-model="animationTimingFunction" label="" labelClass="animation" >
 82 | 						<mu-menu-item v-for="item,index in animationTimingFunctionList" :value="item.type" :title="item.name" />
 83 | 					</mu-select-field>
 84 | 				</div>
 85 | 				<div class="Annotations">
 86 | 					*点击Home键预览动画效果
 87 | 				</div>
 88 | 			</div>
 89 | 		</mu-drawer>
 90 |  	</div>
 91 | </template>
 92 | 
 93 | <script>
 94 | 
 95 | 	export default {
 96 | 		components: {
 97 | 
 98 | 		},
 99 | 		data(){
100 | 			return {
101 | 				activeTab: 'style',
102 | 				modifyLeft: 0,
103 | 				modifyTop: 0,
104 | 				modifyColor: 'black',
105 | 				modifyFontSize: 0,
106 | 				modifyLineHeight: 100,
107 | 				modifyBackgroundColor: 'transparent',
108 | 				modifyText: '',
109 | 				modifyPadding: 0,
110 | 				modifyImageWidth: 0,
111 | 				modifyImageHeight: 0,
112 | 				animationName: '',
113 | 				animationDuration: 1,
114 | 				animationTimingFunction: 'ease',
115 | 				animationList: [
116 | 					{
117 | 						name: '默认',
118 | 						type: 'default',
119 | 					},
120 | 					{
121 | 						name: '左侧淡入',
122 | 						type: 'fadeInLeft',
123 | 					},
124 | 					{
125 | 						name: '右侧淡入',
126 | 						type: 'fadeInRight',
127 | 					},
128 | 					{
129 | 						name: '上侧淡入',
130 | 						type: 'fadeInUp',
131 | 					},
132 | 					{
133 | 						name: '下侧淡入',
134 | 						type: 'fadeInDown',
135 | 					},
136 | 					{
137 | 						name: '闪烁',
138 | 						type: 'Flashing',
139 | 					},
140 | 					{
141 | 						name: '旋转出现（360度）',
142 | 						type: 'RotationAppears',
143 | 					},
144 | 					{
145 | 						name: '旋转出现（180度）',
146 | 						type: 'RotationAppears2',
147 | 					},
148 | 					{
149 | 						name: '右侧驶入',
150 | 						type: 'rightEntry',
151 | 					},
152 | 					{
153 | 						name: '左侧驶入',
154 | 						type: 'leftEntry',
155 | 					},
156 | 					{
157 | 						name: '上侧驶入',
158 | 						type: 'upEntry',
159 | 					},
160 | 					{
161 | 						name: '下侧驶入',
162 | 						type: 'downEntry',
163 | 					},
164 | 					{
165 | 						name: '左侧驶入（刹车特效）',
166 | 						type: 'leftEntryBrake',
167 | 					},
168 | 					{
169 | 						name: '右侧驶入（刹车特效）',
170 | 						type: 'rightEntryBrake',
171 | 					},
172 | 					{
173 | 						name: '上侧驶入（刹车特效）',
174 | 						type: 'upEntryBrake',
175 | 					},
176 | 					{
177 | 						name: '下侧驶入（刹车特效）',
178 | 						type: 'downEntryBrake',
179 | 					},
180 | 				],
181 | 				animationTimingFunctionList: [
182 | 					{
183 | 						name: '默认',
184 | 						type: 'ease',
185 | 					},
186 | 					{
187 | 						name: '匀速',
188 | 						type: 'linear',
189 | 					},
190 | 					{
191 | 						name: '以低速开始',
192 | 						type: 'ease-in',
193 | 					},
194 | 					{
195 | 						name: '以低速结束',
196 | 						type: 'ease-out',
197 | 					},
198 | 					{
199 | 						name: '以低速开始和结束',
200 | 						type: 'ease-in-out',
201 | 					},
202 | 				],
203 | 			}
204 | 		},
205 | 		beforeUpdate(){
206 | 			this.$store.state.Design.DesignInfos.pages.forEach((item, index) => {
207 | 				if (item.id === this.$store.state.Design.DesignInfos.currentPage) {
208 | 					if (this.$store.state.Design.DesignInfos.currentElementType === 'text') {
209 | 						/*选中元素为文本*/
210 | 						item.text.forEach(t => {
211 | 							if (t.id === this.$store.state.Design.DesignInfos.currentElement) {
212 | 								this.modifyLeft = parseInt(t.style.left);
213 | 								this.modifyTop = parseInt(t.style.top);
214 | 								this.modifyColor = t.style.color;
215 | 								this.modifyFontSize = parseInt(t.style['font-size']);
216 | 								this.modifyBackgroundColor = t.style['background-color'];
217 | 								this.modifyText = t.text;
218 | 								this.modifyLineHeight = parseInt(t.style['line-height']);
219 | 								this.modifyPadding = parseInt(t.style['padding']);
220 | 								this.animationName = t.animationStyle['animation-name'];
221 | 								this.animationDuration = parseInt(t.animationStyle['animation-duration']);
222 | 								this.animationTimingFunction = t.animationStyle['animation-timing-function'];
223 | 							}
224 | 						})
225 | 					}
226 | 					else if (this.$store.state.Design.DesignInfos.currentElementType === 'image') {
227 | 						/*选中元素为图片*/
228 | 						item.image.forEach(t => {
229 | 							if (t.id === this.$store.state.Design.DesignInfos.currentElement) {
230 | 								this.modifyLeft = parseInt(t.style.left);
231 | 								this.modifyTop = parseInt(t.style.top);
232 | 								this.modifyImageWidth = parseInt(t.style.width);
233 | 								this.modifyImageHeight = parseInt(t.style.height);
234 | 								this.animationName = t.animationStyle['animation-name'];
235 | 								this.animationDuration = parseInt(t.animationStyle['animation-duration']);
236 | 								this.animationTimingFunction = t.animationStyle['animation-timing-function'];
237 | 							}
238 | 						})
239 | 					}
240 | 				}
241 | 			})
242 | 		},
243 | 		computed: {
244 | 			isOpen(){
245 | 				return this.$store.state.Design.isModifyEle;
246 | 			},
247 | 			isStyle(){
248 | 				return this.activeTab === 'style';
249 | 			},
250 | 			isText(){
251 | 				return (this.$store.state.Design.DesignInfos.currentElementType === 'text');
252 | 			},
253 | 			isImage(){
254 | 				return (this.$store.state.Design.DesignInfos.currentElementType === 'image');
255 | 			},
256 | 			isCartoon(){
257 | 				return this.activeTab === 'cartoon';
258 | 			},
259 | 		},
260 | 		methods: {
261 | 			handleTabChange (val) {
262 | 				this.activeTab = val
263 | 			},
264 | 			handleClickDelEle(){
265 | 				if (this.$store.state.Design.DesignInfos.currentElementType === 'text') {
266 | 					this.$store.commit('delDesignText', this.$store.state.Design.DesignInfos.currentElement);
267 | 				}
268 | 				else{
269 | 					this.$store.commit('delDesignImage', this.$store.state.Design.DesignInfos.currentElement);
270 | 				}
271 | 			},
272 | 		},
273 | 		watch: {
274 | 			modifyLeft(val){
275 | 				this.$store.state.Design.DesignInfos.pages.forEach((item, index) => {
276 | 					if (item.id === this.$store.state.Design.DesignInfos.currentPage) {
277 | 						let type = (this.$store.state.Design.DesignInfos.currentElementType === 'text')?'text':'image';
278 | 						let commitType = (type === 'text')?'modifyTextStyleById':'modifyImageStyleById';
279 | 						item[type].forEach(t => {
280 | 							if (t.id === this.$store.state.Design.DesignInfos.currentElement) {
281 | 								this.$store.commit(commitType, {
282 | 									left: val + '%',
283 | 									id: t.id
284 | 								});
285 | 							}
286 | 						})
287 | 					}
288 | 				})
289 | 			},
290 | 			modifyTop(val){
291 | 				this.$store.state.Design.DesignInfos.pages.forEach((item, index) => {
292 | 					if (item.id === this.$store.state.Design.DesignInfos.currentPage) {
293 | 						let type = (this.$store.state.Design.DesignInfos.currentElementType === 'text')?'text':'image';
294 | 						let commitType = (type === 'text')?'modifyTextStyleById':'modifyImageStyleById';
295 | 						item[type].forEach(t => {
296 | 							if (t.id === this.$store.state.Design.DesignInfos.currentElement) {
297 | 								this.$store.commit(commitType, {
298 | 									top: val + '%',
299 | 									id: t.id
300 | 								});
301 | 							}
302 | 						})
303 | 					}
304 | 				})
305 | 			},
306 | 			animationName(val){
307 | 				this.$store.state.Design.DesignInfos.pages.forEach((item, index) => {
308 | 					if (item.id === this.$store.state.Design.DesignInfos.currentPage) {
309 | 						let type = (this.$store.state.Design.DesignInfos.currentElementType === 'text')?'text':'image';
310 | 						let commitType = (type === 'text')?'modifyTextAnimationStyleById':'modifyImageAnimationStyleById';
311 | 						item[type].forEach(t => {
312 | 							if (t.id === this.$store.state.Design.DesignInfos.currentElement) {
313 | 								this.$store.commit(commitType, {
314 | 									'animation-name': val,
315 | 									id: t.id
316 | 								});
317 | 							}
318 | 						})
319 | 					}
320 | 				})
321 | 			},
322 | 			animationDuration(val){
323 | 				this.$store.state.Design.DesignInfos.pages.forEach((item, index) => {
324 | 					if (item.id === this.$store.state.Design.DesignInfos.currentPage) {
325 | 						let type = (this.$store.state.Design.DesignInfos.currentElementType === 'text')?'text':'image';
326 | 						let commitType = (type === 'text')?'modifyTextAnimationStyleById':'modifyImageAnimationStyleById';
327 | 						item[type].forEach(t => {
328 | 							if (t.id === this.$store.state.Design.DesignInfos.currentElement) {
329 | 								this.$store.commit(commitType, {
330 | 									'animation-duration': val + 's',
331 | 									id: t.id
332 | 								});
333 | 							}
334 | 						})
335 | 					}
336 | 				})
337 | 			},
338 | 			animationTimingFunction(val){
339 | 				this.$store.state.Design.DesignInfos.pages.forEach((item, index) => {
340 | 					if (item.id === this.$store.state.Design.DesignInfos.currentPage) {
341 | 						let type = (this.$store.state.Design.DesignInfos.currentElementType === 'text')?'text':'image';
342 | 						let commitType = (type === 'text')?'modifyTextAnimationStyleById':'modifyImageAnimationStyleById';
343 | 						item[type].forEach(t => {
344 | 							if (t.id === this.$store.state.Design.DesignInfos.currentElement) {
345 | 								this.$store.commit(commitType, {
346 | 									'animation-timing-function': val,
347 | 									id: t.id
348 | 								});
349 | 							}
350 | 						})
351 | 					}
352 | 				})
353 | 			},
354 | 			modifyColor(val){
355 | 				this.$store.state.Design.DesignInfos.pages.forEach((item, index) => {
356 | 					if (item.id === this.$store.state.Design.DesignInfos.currentPage) {
357 | 						item.text.forEach(t => {
358 | 							if (t.id === this.$store.state.Design.DesignInfos.currentElement) {
359 | 								this.$store.commit('modifyTextStyleById', {
360 | 									color: val,
361 | 									id: t.id
362 | 								});
363 | 							}
364 | 						})
365 | 					}
366 | 				})
367 | 			},
368 | 			modifyFontSize(val){
369 | 				this.$store.state.Design.DesignInfos.pages.forEach((item, index) => {
370 | 					if (item.id === this.$store.state.Design.DesignInfos.currentPage) {
371 | 						item.text.forEach(t => {
372 | 							if (t.id === this.$store.state.Design.DesignInfos.currentElement) {
373 | 								this.$store.commit('modifyTextStyleById', {
374 | 									'font-size': val + '%',
375 | 									id: t.id
376 | 								});
377 | 							}
378 | 						})
379 | 					}
380 | 				})
381 | 			},
382 | 			modifyBackgroundColor(val){
383 | 				this.$store.state.Design.DesignInfos.pages.forEach((item, index) => {
384 | 					if (item.id === this.$store.state.Design.DesignInfos.currentPage) {
385 | 						item.text.forEach(t => {
386 | 							if (t.id === this.$store.state.Design.DesignInfos.currentElement) {
387 | 								this.$store.commit('modifyTextStyleById', {
388 | 									'background-color': val,
389 | 									id: t.id
390 | 								});
391 | 							}
392 | 						})
393 | 					}
394 | 				})
395 | 			},
396 | 			modifyText(val){
397 | 				this.$store.state.Design.DesignInfos.pages.forEach((item, index) => {
398 | 					if (item.id === this.$store.state.Design.DesignInfos.currentPage) {
399 | 						item.text.forEach(t => {
400 | 							if (t.id === this.$store.state.Design.DesignInfos.currentElement) {
401 | 								this.$store.commit('modifyTextContentById', {
402 | 									text: val,
403 | 									id: t.id
404 | 								});
405 | 							}
406 | 						})
407 | 					}
408 | 				})
409 | 			},
410 | 			modifyLineHeight(val){
411 | 				this.$store.state.Design.DesignInfos.pages.forEach((item, index) => {
412 | 					if (item.id === this.$store.state.Design.DesignInfos.currentPage) {
413 | 						item.text.forEach(t => {
414 | 							if (t.id === this.$store.state.Design.DesignInfos.currentElement) {
415 | 								this.$store.commit('modifyTextStyleById', {
416 | 									'line-height': val + '%',
417 | 									id: t.id
418 | 								});
419 | 							}
420 | 						})
421 | 					}
422 | 				})
423 | 			},
424 | 			modifyPadding(val){
425 | 				this.$store.state.Design.DesignInfos.pages.forEach((item, index) => {
426 | 					if (item.id === this.$store.state.Design.DesignInfos.currentPage) {
427 | 						item.text.forEach(t => {
428 | 							if (t.id === this.$store.state.Design.DesignInfos.currentElement) {
429 | 								this.$store.commit('modifyTextStyleById', {
430 | 									'padding': val + 'px',
431 | 									id: t.id
432 | 								});
433 | 							}
434 | 						})
435 | 					}
436 | 				})
437 | 			},
438 | 			modifyImageWidth(val){
439 | 				this.$store.state.Design.DesignInfos.pages.forEach((item, index) => {
440 | 					if (item.id === this.$store.state.Design.DesignInfos.currentPage) {
441 | 						item.image.forEach(t => {
442 | 							if (t.id === this.$store.state.Design.DesignInfos.currentElement) {
443 | 								this.$store.commit('modifyImageStyleById', {
444 | 									'width': val + 'px',
445 | 									id: t.id
446 | 								});
447 | 							}
448 | 						})
449 | 					}
450 | 				})
451 | 			},
452 | 			modifyImageHeight(val){
453 | 				this.$store.state.Design.DesignInfos.pages.forEach((item, index) => {
454 | 					if (item.id === this.$store.state.Design.DesignInfos.currentPage) {
455 | 						item.image.forEach(t => {
456 | 							if (t.id === this.$store.state.Design.DesignInfos.currentElement) {
457 | 								this.$store.commit('modifyImageStyleById', {
458 | 									'height': val + 'px',
459 | 									id: t.id
460 | 								});
461 | 							}
462 | 						})
463 | 					}
464 | 				})
465 | 			},
466 | 		},
467 | 	}
468 | </script>
469 | 
470 | <style scoped>
471 | 	.Annotations{
472 | 		color: red;
473 | 		font-size: 80%;
474 | 	}
475 | 
476 | 	.drawer{
477 | 		background-color: #d7ccc8;
478 | 		width: 400px;
479 | 	}
480 | 
481 | 	.tab{
482 | 		background-color: #795548;
483 | 	}
484 | 
485 | 	.slider{
486 | 		width: 250px;
487 | 		margin-left: 20px;
488 | 	}
489 | 
490 | 	.sliderAnimation{
491 | 		width: 250px;
492 | 		margin-top: 10px;
493 | 	}
494 | 
495 | 	.text{
496 | 		margin-left: 20px;
497 | 	}
498 | 
499 | 	.color{
500 | 		width: 200px;
501 | 		margin-left: 20px;
502 | 	}
503 | 
504 | 	.showStyle > div > div, .showAnimation > div {
505 | 		margin-left: 30px;
506 | 		margin-top: 20px;
507 | 		height: 50px;
508 | 	}
509 | 
510 | 	.showStyle > div > div > div, .showAnimation > div > div{
511 | 		float: left;
512 | 	}
513 | 
514 | 	.showTextDiv{
515 | 		height: 50px;
516 | 	}
517 | 
518 | 	.showText{
519 | 		margin-top: 13px;
520 | 	}
521 | 
522 | 	.animation{
523 | 		background-color: black;
524 | 	}
525 | 
526 | 	.modifyPrompt{
527 | 		width: 70px;
528 | 	}
529 | 
530 | 	.modifySelect{
531 | 		width: 70px;
532 | 		line-height: 50px;
533 | 	}
534 | 
535 | 	.delete-element{
536 | 		width: 350px;
537 | 		margin: 0px auto;
538 | 	}
539 | </style>


--------------------------------------------------------------------------------
/views/layouts/musicDialog.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<mu-dialog :open="isOpen" title="" >	
  3 | 		<div class="music-left">
  4 | 			<mu-list @change="handleChange">
  5 | 				<mu-list-item title="我的音乐" value="myMusic" >
  6 | 					<mu-icon slot="left" value="audiotrack"/>
  7 | 				</mu-list-item>
  8 | 				<mu-list-item title="网络乐库" value="networkMusic" >
  9 | 					<mu-icon slot="left" value="audiotrack"/>
 10 | 				</mu-list-item>
 11 | 				<mu-list-item title="上传音乐" value="uploadMusic" >
 12 | 					<mu-icon slot="left" value="audiotrack"/>
 13 | 				</mu-list-item>
 14 | 				<mu-list-item title="管理音乐" value="manageMusic" >
 15 | 					<mu-icon slot="left" value="audiotrack"/>
 16 | 				</mu-list-item>
 17 | 			</mu-list>
 18 | 			<form name="musicForm" class="uploadMusic" action="/H5/UploadMusic" method="post" encType="multipart/form-data" target="musicIframe">
 19 | 				<input type="file" name="music" id="uploadMusic" @change="handleChangeUploadMusic()" accept="audio/mpeg" >
 20 | 				<iframe name="musicIframe"></iframe>
 21 | 			</form>
 22 | 		</div>
 23 | 		<div class="music-right">
 24 | 			<div v-show="isMyMusic">
 25 | 				<div>
 26 | 					<span v-for="item in userMusics">
 27 | 						<mu-flat-button :label="item.musicName" @click="handleClickMusic('userMusic', item)" class="" icon="audiotrack" primary/>
 28 | 					</span>
 29 | 				</div>
 30 | 			</div>
 31 | 			<div v-show="isNetMusic">
 32 | 				<div>
 33 | 					<span v-for="item in musicItems">
 34 | 						<mu-flat-button :label="item.title" @click="handleClickMusic('netMusic', item)" class="" icon="audiotrack" primary/>
 35 | 					</span>
 36 | 				</div>
 37 | 			</div>
 38 | 			<div v-show="isManageMusic">
 39 | 				<div>
 40 | 					<mu-flat-button @click="chooseAllMusics" primary label="全选"/>
 41 | 					<mu-flat-button @click="chooseNullMusics" primary label="清空"/>
 42 | 					<mu-flat-button @click="deleteMusics" primary label="删除"/>
 43 | 				</div>
 44 | 				<span v-for="item in userMusics">
 45 | 					<mu-checkbox :label="item.musicName" :nativeValue="item.id" v-model="manageMusicList" /> <br/>
 46 | 				</span>
 47 | 			</div>
 48 | 		</div>
 49 | 		<mu-flat-button slot="actions" @click="cancel" primary label="取消"/>
 50 | 	</mu-dialog>
 51 | </template>
 52 | 
 53 | <script>
 54 | 	require("babel-polyfill");
 55 | 	export default {
 56 | 		components: {
 57 | 
 58 | 		},
 59 | 		data(){
 60 | 			return {
 61 | 				currentPage: 'myMusic',
 62 | 				musicSrc: "",
 63 | 				musicItems: [
 64 | 					{
 65 | 						title: 'Above and Beyond',
 66 | 						url: 'Audio Machine - Above and Beyond.mp3',
 67 | 					},
 68 | 					{
 69 | 						title: 'Age of Dragons',
 70 | 						url: 'Audio Machine - Age of Dragons.mp3',
 71 | 					},
 72 | 					{
 73 | 						title: 'Impera',
 74 | 						url: 'Audio Machine - Impera.mp3',
 75 | 					},
 76 | 					{
 77 | 						title: 'Lachrimae',
 78 | 						url: 'Audio Machine - Lachrimae.mp3',
 79 | 					},
 80 | 					{
 81 | 						title: 'Piano Beat',
 82 | 						url: 'BeaTsGOy - Piano Beat.mp3',
 83 | 					},
 84 | 					{
 85 | 						title: 'Legacy',
 86 | 						url: 'Brian Tyler - Legacy',
 87 | 					},
 88 | 					{
 89 | 						title: '你再也读不出我任何欲望',
 90 | 						url: 'Cicada - 你再也读不出我任何欲望.mp3',
 91 | 					},
 92 | 					{
 93 | 						title: '最后 仍在一起',
 94 | 						url: 'Cicada - 最后 仍在一起.mp3',
 95 | 					},
 96 | 					{
 97 | 						title: 'Requiem For A Tower Mvt. III',
 98 | 						url: 'Corner Stone Cues - Requiem For A Tower Mvt. III.mp3',
 99 | 					},
100 | 					{
101 | 						title: 'Our Flame Shall Endure',
102 | 						url: 'Epic Score - Our Flame Shall Endure.mp3',
103 | 					},
104 | 					{
105 | 						title: 'Aphelion V2',
106 | 						url: 'Fired Earth Music - Aphelion V2.mp3',
107 | 					},
108 | 					{
109 | 						title: 'Passion of Victory',
110 | 						url: 'Future World Music - Passion of Victory.mp3',
111 | 					},
112 | 					{
113 | 						title: 'End Credits',
114 | 						url: 'Hans Zimmer - End Credits.mp3',
115 | 					},
116 | 				],
117 | 				manageMusicList: [],
118 | 			}
119 | 		},
120 | 		methods:{
121 | 			handleChange(val){
122 | 				if (val === 'uploadMusic') {
123 | 					(document.getElementById('uploadMusic')).click();
124 | 				}
125 | 				else{
126 | 					this.currentPage = val;
127 | 				}
128 | 			},
129 | 			handleClickMusic(type, info){
130 | 				if (type === 'userMusic') {
131 | 					this.$store.commit('updateMusic', info.id);
132 | 				}
133 | 				else{
134 | 					//info.url
135 | 				}
136 | 
137 | 				this.$store.commit('musicDialog', false);
138 | 
139 | 			},
140 | 			refreshList(){
141 | 				fetch('/H5/rpc',
142 | 					{
143 | 						method:'POST',
144 | 						headers:{ 
145 | 				 			'Accept': 'application/json', 
146 | 				 			'Content-Type': 'application/json'
147 | 						},
148 | 						credentials: 'same-origin',
149 | 						body: JSON.stringify({
150 | 							method: 'getAllUserMusics',
151 | 							params: null,
152 | 						})
153 | 					}
154 | 				)
155 | 				.then(response => response.json())
156 | 				.then(d => {
157 | 					if (d.result) {
158 | 						this.$store.commit('updateUserMusics', d.params);
159 | 					}
160 | 				})
161 | 			},
162 | 			handleChangeUploadMusic(){
163 | 				fetch('/H5/UploadMusic',
164 | 					{
165 | 						method:'POST',
166 | 						credentials: 'same-origin',
167 | 						body: new FormData(document.forms.namedItem("musicForm" )),
168 | 					}
169 | 				)
170 | 				.then(response => response.json())
171 | 				.then(d => {
172 | 					if (d.result) {
173 | 						this.refreshList();
174 | 						this.$store.commit('alertDesignMessage', {isAlert: true, message: '上传成功'});
175 | 					}
176 | 					else{
177 | 						this.$store.commit('alertDesignMessage', {isAlert: true, message: '上传失败'});
178 | 					}
179 | 				})
180 | 			},
181 | 			deleteMusics(){
182 | 				fetch('/H5/rpc',
183 | 					{
184 | 						method:'POST',
185 | 						headers:{ 
186 | 				 			'Accept': 'application/json', 
187 | 				 			'Content-Type': 'application/json'
188 | 						},
189 | 						credentials: 'same-origin',
190 | 						body: JSON.stringify({
191 | 							method: 'delUserMusics',
192 | 							params: {
193 | 								id: this.manageMusicList,
194 | 							},
195 | 						})
196 | 					}
197 | 				)
198 | 				.then(response => response.json())
199 | 				.then(d => {
200 | 					if (d.result) {
201 | 						this.refreshList();
202 | 						this.$store.commit('alertDesignMessage', {isAlert: true, message: '删除成功'});
203 | 					}
204 | 					else{
205 | 						this.$store.commit('alertDesignMessage', {isAlert: true, message: '删除失败'});
206 | 					}
207 | 				})
208 | 			},
209 | 			chooseAllMusics(){
210 | 				this.$store.state.Design.userMusics.forEach((item, index) => {
211 | 					this.manageMusicList.push(item.id);
212 | 				})
213 | 			},
214 | 			chooseNullMusics(){
215 | 				this.manageMusicList = [];
216 | 			},
217 | 			cancel(){
218 | 				this.$store.commit('musicDialog', false);
219 | 			},
220 | 		},
221 | 		computed:{
222 | 			isOpen(){
223 | 				return this.$store.state.Design.musicDialog;
224 | 			},
225 | 			isMyMusic(){
226 | 				return (this.currentPage === 'myMusic')
227 | 			},
228 | 			isNetMusic(){
229 | 				return (this.currentPage === 'networkMusic')
230 | 			},
231 | 			isManageMusic(){
232 | 				return (this.currentPage === 'manageMusic')
233 | 			},
234 | 			userMusics(){
235 | 				return this.$store.state.Design.userMusics;
236 | 			},
237 | 		}
238 | 	}
239 | </script>
240 | 
241 | <style scoped>
242 | 	.music-left{
243 | 		float: left;
244 | 		width: 160px;
245 | 	}
246 | 
247 | 	.music-right{
248 | 		float: left;
249 | 		width: 530px;
250 | 	}
251 | 
252 | 	.uploadMusic{
253 | 		display: none;
254 | 	}
255 | 
256 | </style>


--------------------------------------------------------------------------------
/views/pages/404.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |  	<p>404 No Find!</p>
 3 | </template>
 4 | 
 5 | <script>
 6 | 
 7 | 	export default {
 8 | 		components: {
 9 | 			
10 | 		}
11 | 	}
12 | </script>
13 | 


--------------------------------------------------------------------------------
/views/pages/Design.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |  	<div>
  3 |  		<PageList></PageList>
  4 |  		<MobilePhone></MobilePhone>
  5 |  		<musicDialog></musicDialog>
  6 |  		<imageDialog></imageDialog>
  7 |  		<modifyDesign></modifyDesign>
  8 |  		<mu-popup position="top" :overlay="false" popupClass="popup-top" :open="topPopup">
  9 | 			{{message}}
 10 | 		</mu-popup>
 11 | 		<div class="system-btn">
 12 | 			<mu-raised-button label="预览" @click="handleClickPreview" backgroundColor="#A1887F" />
 13 | 			<mu-raised-button label="保存" @click="handleClickSave" primary/>
 14 | 			<mu-raised-button label="退出" @click="handleClickExit" secondary/>
 15 | 		</div>
 16 |  	</div>
 17 | </template>
 18 | 
 19 | <script>
 20 | 	import PageList from '../layouts/PageList.vue'
 21 | 	import MobilePhone from '../layouts/MobilePhone.vue'
 22 | 	import musicDialog from '../layouts/musicDialog.vue'
 23 | 	import imageDialog from '../layouts/imageDialog.vue'
 24 | 	import modifyDesign from '../layouts/modifyDesign.vue'
 25 | 
 26 | 	let localStorage = window.localStorage || {}; 
 27 | 
 28 | 	export default {
 29 | 		components: {
 30 | 			PageList,
 31 | 			MobilePhone,
 32 | 			musicDialog,
 33 | 			modifyDesign,
 34 | 			imageDialog,
 35 | 		},
 36 | 		data() {
 37 | 			return {
 38 | 				
 39 | 			}
 40 | 		},
 41 | 		methods: {
 42 | 			handleClickSave(){
 43 | 				fetch('/H5/rpc',
 44 | 					{
 45 | 						method:'POST',
 46 | 						headers:{ 
 47 | 				 			'Accept': 'application/json', 
 48 | 				 			'Content-Type': 'application/json'
 49 | 						},
 50 | 						credentials: 'same-origin',
 51 | 						body: JSON.stringify({
 52 | 							method: 'saveDesign',
 53 | 							params: {
 54 | 								name: this.$store.state.Work.workName,
 55 | 								designInfos: this.$store.state.Design.DesignInfos,
 56 | 							},
 57 | 						})
 58 | 					}
 59 | 				)
 60 | 				.then(response => response.json())
 61 | 				.then(d => {
 62 | 					if (d.result) {
 63 | 						this.$store.commit('alertDesignMessage', {isAlert: true, message: '保存成功'});
 64 | 					}
 65 | 					else{
 66 | 						this.$store.commit('alertDesignMessage', {isAlert: true, message: '保存失败'});
 67 | 					}
 68 | 				})
 69 | 			},
 70 | 			handleClickExit(){
 71 | 				this.$store.dispatch('updateDesignWorks');
 72 | 				this.$store.commit('setRoute','/Main');
 73 | 				this.$store.commit('setDesign');
 74 | 			},
 75 | 			handleClickPreview(){
 76 | 				window.open('/H5/Show?userName='+localStorage['H5-UserName']+'&workName='+this.$store.state.Work.workName, '_blank');
 77 | 			},
 78 | 		},
 79 | 		computed: {
 80 | 			workName(){
 81 | 				return this.$store.state.workName;
 82 | 			},
 83 | 			message(){
 84 | 				return this.$store.state.Design.alertMessage;
 85 | 			},
 86 | 			topPopup(){
 87 | 				if (this.$store.state.Design.isAlert) {
 88 | 					setTimeout(() => {
 89 | 						this.$store.commit('alertDesignMessage', {isAlert: false, message: ''});
 90 | 					}, 2500);
 91 | 				}
 92 | 
 93 | 				return this.$store.state.Design.isAlert;
 94 | 			},
 95 | 		},
 96 | 		watch: {
 97 | 			
 98 | 		}
 99 | 	}
100 | </script>
101 | 
102 | <style lang="css">
103 | 	.popup-top {
104 | 		width: 100%;
105 | 		opacity: .8;
106 | 		height: 48px;
107 | 		line-height: 48px;
108 | 		display: flex;
109 | 		align-items: center;
110 | 		justify-content: center;
111 | 		max-width: 375px;
112 | 	}
113 | 
114 | 	.system-btn{
115 | 		float: right;
116 | 	}
117 | 
118 | 	.system-btn > button {
119 | 		width: 105px;
120 | 		margin: 10px 5px 10px;
121 | 	}
122 | </style>


--------------------------------------------------------------------------------
/views/pages/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |  	<div class="container">
 3 |  		<Login></Login>
 4 |  		<Shadow></Shadow>
 5 |  	</div>
 6 | </template>
 7 | 
 8 | <script>
 9 | 	import Login from '../layouts/Login.vue'
10 | 	import Shadow from '../components/shadow.vue'
11 | 	export default {
12 | 		components: {
13 | 		 	Login,
14 | 		 	Shadow,
15 | 		}
16 | 	}
17 | </script>
18 | 
19 | <style scoped>
20 | 	.container{
21 | 		
22 | 	}
23 | </style>


--------------------------------------------------------------------------------
/views/pages/Main.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |  	<div class="container">
 3 |  		<Navigation></Navigation>
 4 |  		<Alert></Alert>
 5 |  		<Home v-show="isHome"></Home>
 6 |  		<Work v-show="isWork"></Work>
 7 |  		<Setup v-show="isSetup"></Setup>
 8 |  	</div>
 9 | </template>
10 | 
11 | <script>
12 | 	import Navigation from '../components/Navigation.vue'
13 | 	import Alert from '../components/Alert.vue'
14 | 	import Home from '../layouts/Home.vue'
15 | 	import Work from '../layouts/Work.vue'
16 | 	import Setup from '../layouts/Setup.vue'
17 | 	export default {
18 | 		components: {
19 | 		 	Navigation,
20 | 		 	Alert,
21 | 		 	Home,
22 | 		 	Work,
23 | 		 	Setup,
24 | 		},
25 | 		computed: {
26 | 			/*用下面三个方法配合v-show显示每个界面*/
27 | 			isHome(){
28 | 				return (this.$store.state.Main.Page === 'Home')
29 | 			},
30 | 			isWork(){
31 | 				return (this.$store.state.Main.Page === 'Work')
32 | 			},
33 | 			isSetup(){
34 | 				return (this.$store.state.Main.Page === 'Setup')
35 | 			},
36 | 		},
37 | 	}
38 | </script>
39 | 
40 | <style scoped>
41 | 	.container{
42 | 		
43 | 	}
44 | </style>


--------------------------------------------------------------------------------
/views/pages/Register.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |  	<div class="container">
  3 |  		<div class="div-register">
  4 | 	 		<mu-text-field class="" label="用户名" v-model="userName" fullWidth labelFloat/><br/>
  5 | 	 		<mu-text-field class="" label="密码" v-model="passWord" type="password" fullWidth labelFloat/><br/>
  6 | 	 		<mu-text-field class="" label="确认密码" v-model="SurePassword" type="password" fullWidth labelFloat/><br/>
  7 | 	 		<mu-text-field class="" label="电子邮箱" v-model="eMail" fullWidth labelFloat/><br/>
  8 | 	 		<div class="div-register-sure">
  9 | 				<mu-flat-button @click="register" label="确认注册" class="div-register-botton" primary/>
 10 | 				<mu-flat-button @click="cancel" label="取消" class="div-register-botton" secondary/>
 11 | 			</div>
 12 | 			<mu-popup position="top" :overlay="false" popupClass="popup-top" :open="topPopup">
 13 | 				{{message}}
 14 | 			</mu-popup>
 15 | 	 	</div>
 16 |  	</div>
 17 | </template>
 18 | 
 19 | <script>
 20 | 	export default {
 21 | 		data(){
 22 | 			return {
 23 | 				userName: "",
 24 | 				passWord: "",
 25 | 				SurePassword: "",
 26 | 				eMail: "",
 27 | 				topPopup: false,
 28 | 				message: "",
 29 | 			}
 30 | 		},
 31 | 		methods:{
 32 | 			msgAlert(msg){
 33 | 				this.message = msg;
 34 | 				this.topPopup = true;
 35 | 			},
 36 | 			register(){
 37 | 				if (this.userName === "") {
 38 | 					this.msgAlert('用户名不能为空');
 39 | 					return;
 40 | 				}
 41 | 
 42 | 				if (this.passWord === "" || this.SurePassword === "") {
 43 | 					this.msgAlert('密码不能为空');
 44 | 					return;
 45 | 				}
 46 | 
 47 | 				if (this.eMail === "") {
 48 | 					this.msgAlert('邮箱不能为空');
 49 | 					return;
 50 | 				}
 51 | 
 52 | 				/*验证邮箱格式*/
 53 | 				let filter  = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
 54 | 				if (!filter.test(this.eMail)) {
 55 | 					this.msgAlert('邮箱格式有误，请确认');
 56 | 					return;
 57 | 				}
 58 | 
 59 | 				if (this.passWord !== this.SurePassword) {
 60 | 					this.msgAlert('密码不一致，请重新输入');
 61 | 					return;
 62 | 				}
 63 | 
 64 | 				fetch('/H5/Register',
 65 | 					{
 66 | 						method:'POST',
 67 | 						headers:{ 
 68 | 				 			'Accept': 'application/json', 
 69 | 				 			'Content-Type': 'application/json'
 70 | 						},
 71 | 						redentials: 'include',
 72 | 						body: JSON.stringify({
 73 | 							method: 'futureWeather',
 74 | 							params: {
 75 | 								userName: this.userName,
 76 | 								passWord: this.passWord,
 77 | 								eMail: this.eMail,
 78 | 							},
 79 | 						})
 80 | 					}
 81 | 				)
 82 | 				.then(response => response.json())
 83 | 				.then(d => {
 84 | 					if (d.result) {
 85 | 						this.msgAlert('注册成功,页面将自动跳转');
 86 | 						setTimeout(() => {
 87 | 							this.$store.commit('setRoute','/');
 88 | 						}, 2000);
 89 | 					}
 90 | 					else{
 91 | 						this.msgAlert(d.content);
 92 | 					}
 93 | 				})
 94 | 			},
 95 | 			cancel(){
 96 | 				this.$store.commit('setRoute','/');
 97 | 			},
 98 | 		},
 99 | 		computed: {
100 | 			
101 | 		},
102 | 		watch: {
103 | 			topPopup(val){
104 | 				if (val) {
105 | 					setTimeout(() => {
106 | 						this.topPopup = false;
107 | 					}, 2500);
108 | 				}
109 | 			}
110 | 		}
111 | 	}
112 | </script>
113 | 
114 | <style scoped>
115 | 	.container{
116 | 		margin: 0px auto;
117 | 		width: 500px;
118 | 	}
119 | 
120 | 	.div-register{
121 | 		position: absolute; 
122 | 		width: 500px; 
123 | 		top: 50%;
124 | 		margin-top: -300px;
125 | 		height: 600px;
126 | 	}
127 | 
128 | 	.div-register-sure{
129 | 		width: 300px;
130 | 		margin: 0px auto;
131 | 	}
132 | 
133 | 	.div-register-botton{
134 | 		margin-left: 30px;
135 | 	}
136 | 
137 | </style>
138 | 
139 | <style lang="css">
140 | 	.popup-top {
141 | 		width: 100%;
142 | 		opacity: .8;
143 | 		height: 48px;
144 | 		line-height: 48px;
145 | 		display: flex;
146 | 		align-items: center;
147 | 		justify-content: center;
148 | 		max-width: 375px;
149 | 	}
150 | </style>


--------------------------------------------------------------------------------
/views/routes.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 
3 | export default {
4 |   '/': 'Home',
5 |   '/Register': 'Register',
6 |   '/Main': 'Main',
7 |   '/Design': 'Design',
8 | }
9 | 


--------------------------------------------------------------------------------
/views/show.ejs:
--------------------------------------------------------------------------------
 1 | 
 2 | <meta charset="utf-8">
 3 | <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" />
 4 | <link rel="stylesheet" href="http://<%=cfg.ip%>:<%=cfg.port%>/static/animation.css">
 5 | <link rel="stylesheet" href="http://<%=cfg.ip%>:<%=cfg.port%>/static/show.css">
 6 | 
 7 | <!--page-->
 8 | <div id="contain" class="container">
 9 | 	<% if(designInfos.music){%>
10 | 		<div id="musicIcon" class="music-icon rotate"></div>
11 | 	<% } %>
12 | 	<div class="arrow">
13 | 		<img src="http://<%=cfg.ip%>:<%=cfg.port%>/static/arrow.png"></img>
14 | 	</div>
15 | 	<% for(var i=0;i<designInfos.pages.length;i++){ %>
16 | 		<div class="pages page-hide" style="z-index: <%=designInfos.pages.length-i%>;background-color: <%=designInfos.pages[i].backgroundColor%>">
17 | 			<!--text begin-->
18 | 			<% for(var j=0;j<designInfos.pages[i].text.length;j++){ %>
19 | 				<div class="block" id="<%=designInfos.pages[i].text[j].id%>" style="
20 | 					<%for(var s in designInfos.pages[i].text[j].style){%>
21 | 						<%=s%>:<%=designInfos.pages[i].text[j].style[s]%>;
22 | 					<% } %>
23 | 					display:none;
24 | 				">
25 | 					<%=designInfos.pages[i].text[j].text %>
26 | 				</div>
27 | 			<% } %>
28 | 			<!--text end-->
29 | 
30 | 			<!--image begin-->
31 | 			<% for(var j=0;j<designInfos.pages[i].image.length;j++){ %>
32 | 				<image class="block" id="<%=designInfos.pages[i].image[j].id%>" style="
33 | 					<%for(var s in designInfos.pages[i].image[j].style){%>
34 | 						<%=s%>:<%=designInfos.pages[i].image[j].style[s]%>;
35 | 					<% } %>
36 | 					display:none;
37 | 				" src="http://<%=cfg.ip%>:<%=cfg.port%>/H5/image?id=<%=designInfos.pages[i].image[j].imageID %>">
38 | 				</image>
39 | 			<% } %>
40 | 			<!--image end-->
41 | 		</div>
42 | 	<% } %>
43 | </div>
44 | 
45 | <% if(designInfos.music){%>
46 | 	<!--music-->
47 | 	<audio id="musicAudio" src="http://<%=cfg.ip%>:<%=cfg.port%>/H5/PlayMusic?id=<%=designInfos.music%>" controls="controls" autoplay="autoplay" style="display:none;" >
48 | <% } %>
49 | 
50 | <script type="text/javascript">
51 | 	window.infoData = {};
52 | 	window.infoData.designInfos = <%- JSON.stringify(designInfos) %>
53 | </script>
54 | <script src="http://<%=cfg.ip%>:<%=cfg.port%>/static/jquery-3.0.0.js"></script>
55 | <script src="http://<%=cfg.ip%>:<%=cfg.port%>/static/toucher.js"></script>
56 | <script src="http://<%=cfg.ip%>:<%=cfg.port%>/static/show.js"></script>


--------------------------------------------------------------------------------
/views/static/animation.css:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | @keyframes fadeInLeft
  4 | {
  5 | 	from {
  6 | 		opacity: 0;
  7 | 		transform: translateX(-20px);
  8 | 	}
  9 | 	to {
 10 | 		opacity: 1;
 11 | 		transform: translateX(0px);
 12 | 	}
 13 | }
 14 | 
 15 | @keyframes fadeInRight
 16 | {
 17 | 	from {
 18 | 		opacity: 0;
 19 | 		transform: translateX(20px);
 20 | 	}
 21 | 	to {
 22 | 		opacity: 1;
 23 | 		transform: translateX(0px);
 24 | 	}
 25 | }
 26 | 
 27 | @keyframes fadeInUp
 28 | {
 29 | 	from {
 30 | 		opacity: 0;
 31 | 		transform: translateY(-20px);
 32 | 	}
 33 | 	to {
 34 | 		opacity: 1;
 35 | 		transform: translateY(0px);
 36 | 	}
 37 | }
 38 | 
 39 | @keyframes fadeInDown
 40 | {
 41 | 	from {
 42 | 		opacity: 0;
 43 | 		transform: translateY(20px);
 44 | 	}
 45 | 	to {
 46 | 		opacity: 1;
 47 | 		transform: translateY(0px);
 48 | 	}
 49 | }
 50 | 
 51 | @keyframes Flashing
 52 | {
 53 | 	0% {
 54 | 		opacity: 1;
 55 | 	}
 56 | 	50% {
 57 | 		opacity: 0;
 58 | 	}
 59 | 	100% {
 60 | 		opacity: 1;
 61 | 	}
 62 | }
 63 | 
 64 | @keyframes RotationAppears
 65 | {
 66 | 	0% {
 67 | 		transform: rotate(-360deg);
 68 | 	}
 69 | 	100% {
 70 | 		transform: rotate(0deg);
 71 | 	}
 72 | }
 73 | 
 74 | @keyframes RotationAppears2
 75 | {
 76 | 	0% {
 77 | 		transform: rotate(-180deg);
 78 | 	}
 79 | 	100% {
 80 | 		transform: rotate(0deg);
 81 | 	}
 82 | }
 83 | 
 84 | @keyframes rightEntry
 85 | {
 86 | 	0%{
 87 | 		transform:translateX(500px);
 88 | 	}
 89 | 	100%{
 90 | 		transform:translateX(0px);
 91 | 	}
 92 | }
 93 | 
 94 | @keyframes leftEntry
 95 | {
 96 | 	0%{
 97 | 		transform:translateX(-500px);
 98 | 	}
 99 | 	100%{
100 | 		transform:translateX(0px);
101 | 	}
102 | }
103 | 
104 | @keyframes upEntry
105 | {
106 | 	0%{
107 | 		transform:translateY(-800px);
108 | 	}
109 | 	100%{
110 | 		transform:translateY(0px);
111 | 	}
112 | }
113 | 
114 | @keyframes downEntry
115 | {
116 | 	0%{
117 | 		transform:translateY(800px);
118 | 	}
119 | 	100%{
120 | 		transform:translateY(0px);
121 | 	}
122 | }
123 | 
124 | @keyframes leftEntryBrake
125 | {
126 | 	0%{
127 | 		transform:translateX(-500px);
128 | 	}
129 | 	60%{
130 | 		transform:translateX(30px);
131 | 	}
132 | 	80%{
133 | 		transform:translateX(-10px);
134 | 	}
135 | 	100%{
136 | 		transform:translateX(0px);
137 | 	}
138 | }
139 | 
140 | @keyframes rightEntryBrake
141 | {
142 | 	0%{
143 | 		transform:translateX(500px);
144 | 	}
145 | 	60%{
146 | 		transform:translateX(-30px);
147 | 	}
148 | 	80%{
149 | 		transform:translateX(10px);
150 | 	}
151 | 	100%{
152 | 		transform:translateX(0px);
153 | 	}
154 | }
155 | 
156 | @keyframes downEntryBrake
157 | {
158 | 	0%{
159 | 		transform:translateY(500px);
160 | 	}
161 | 	60%{
162 | 		transform:translateY(-30px);
163 | 	}
164 | 	80%{
165 | 		transform:translateY(10px);
166 | 	}
167 | 	100%{
168 | 		transform:translateY(0px);
169 | 	}
170 | }
171 | 
172 | @keyframes upEntryBrake
173 | {
174 | 	0%{
175 | 		transform:translateY(-500px);
176 | 	}
177 | 	60%{
178 | 		transform:translateY(30px);
179 | 	}
180 | 	80%{
181 | 		transform:translateY(-10px);
182 | 	}
183 | 	100%{
184 | 		transform:translateY(0px);
185 | 	}
186 | }
187 | 
188 | 
189 | 
190 | 
191 | 
192 | 
193 | 
194 | 


--------------------------------------------------------------------------------
/views/static/show.css:
--------------------------------------------------------------------------------
  1 | .page-show{
  2 | 	height: 100%;
  3 | 	margin: 0;
  4 | 	position: absolute;
  5 | 	width: 100%;
  6 | }
  7 | 
  8 | .page-hide{
  9 | 	position: absolute;
 10 | 	height: 100%;
 11 | 	width: 100%;
 12 | 	bottom: 100%;
 13 | }
 14 | 
 15 | .container{
 16 | 	overflow: hidden;
 17 | 	height: 100%;
 18 | 	margin: -8px;
 19 | 	position: fixed;
 20 | 	width: 100%;
 21 | }
 22 | 
 23 | .block{
 24 | 	position: absolute;
 25 | }
 26 | 
 27 | .music-icon{
 28 | 	position: fixed;
 29 | 	top: 5%;
 30 | 	right: 5%;
 31 | 	background-image: url('/images/music.png');
 32 | 	background-repeat: no-repeat;
 33 | 	width: 22px;
 34 | 	height: 22px;
 35 | 	cursor: pointer;
 36 | 	z-index: 1000;
 37 | }
 38 | 
 39 | .show{
 40 | 	animation: showPage 1s linear;
 41 | 	-moz-animation: showPage 1s linear;	/* Firefox */
 42 | 	-webkit-animation: showPage 1s linear;	/* Safari 和 Chrome */
 43 | 	-o-animation: showPage 1s linear;	/* Opera */
 44 | }
 45 | 
 46 | @keyframes showPage
 47 | {
 48 | 	from {bottom: 100%;}
 49 | 	to {bottom: 0%;}
 50 | }
 51 | 
 52 | @-moz-keyframes showPage /* Firefox */
 53 | {
 54 | 	from {bottom: 100%;}
 55 | 	to {bottom: 0%;}
 56 | }
 57 | 
 58 | @-webkit-keyframes showPage /* Safari 和 Chrome */
 59 | {
 60 | 	from {bottom: 100%;}
 61 | 	to {bottom: 0%;}
 62 | }
 63 | 
 64 | @-o-keyframes showPage /* Opera */
 65 | {
 66 | 	from {bottom: 100%;}
 67 | 	to {bottom: 0%;}
 68 | }
 69 | 
 70 | .hide{
 71 | 	animation: hidePage 1s linear;
 72 | 	-moz-animation: hidePage 1s linear;	/* Firefox */
 73 | 	-webkit-animation: hidePage 1s linear;	/* Safari 和 Chrome */
 74 | 	-o-animation: hidePage 1s linear;	/* Opera */
 75 | }
 76 | 
 77 | @keyframes hidePage
 78 | {
 79 | 	from {bottom: 0%;}
 80 | 	to {bottom: 100%;}
 81 | }
 82 | 
 83 | @-moz-keyframes hidePage /* Firefox */
 84 | {
 85 | 	from {bottom: 0%;}
 86 | 	to {bottom: 100%;}
 87 | }
 88 | 
 89 | @-webkit-keyframes hidePage /* Safari 和 Chrome */
 90 | {
 91 | 	from {bottom: 0%;}
 92 | 	to {bottom: 100%;}
 93 | }
 94 | 
 95 | @-o-keyframes hidePage /* Opera */
 96 | {
 97 | 	from {bottom: 0%;}
 98 | 	to {bottom: 100%;}
 99 | }
100 | 
101 | .rotate{
102 | 	animation: rotate 5s infinite linear;
103 | 	-moz-animation: rotate 5s infinite linear;	/* Firefox */
104 | 	-webkit-animation: rotate 5s infinite linear;	/* Safari 和 Chrome */
105 | 	-o-animation: rotate 5s infinite linear;	/* Opera */
106 | }
107 | 
108 | @keyframes rotate
109 | {
110 | 	from {transform:rotate(0deg);}
111 | 	to {transform:rotate(360deg);}
112 | }
113 | 
114 | @-moz-keyframes rotate /* Firefox */
115 | {
116 | 	from {transform:rotate(0deg);}
117 | 	to {transform:rotate(360deg);}
118 | }
119 | 
120 | @-webkit-keyframes rotate /* Safari 和 Chrome */
121 | {
122 | 	from {transform:rotate(0deg);}
123 | 	to {transform:rotate(360deg);}
124 | }
125 | 
126 | @-o-keyframes rotate /* Opera */
127 | {
128 | 	from {transform:rotate(0deg);}
129 | 	to {transform:rotate(360deg);}
130 | }
131 | 
132 | .arrow{
133 | 	z-index: 1000;
134 | 	position: fixed;
135 | 	left: 50%;
136 | 	width: 30px;
137 | 	margin-left: -15px;
138 | 	animation: arrow 1s infinite linear;
139 | 	-moz-animation: arrow 1s infinite linear;	/* Firefox */
140 | 	-webkit-animation: arrow 1s infinite linear;	/* Safari 和 Chrome */
141 | 	-o-animation: arrow 1s infinite linear;	/* Opera */
142 | }
143 | 
144 | @keyframes arrow
145 | {
146 | 	from {
147 | 		bottom: 5%;
148 | 	}
149 | 	to {
150 | 		bottom: 10%;
151 | 	}
152 | }
153 | 
154 | @-moz-keyframes arrow /* Firefox */
155 | {
156 | 	from {
157 | 		bottom: 5%;
158 | 	}
159 | 	to {
160 | 		bottom: 10%;
161 | 	}
162 | }
163 | 
164 | @-webkit-keyframes arrow /* Safari 和 Chrome */
165 | {
166 | 	from {
167 | 		bottom: 5%;
168 | 	}
169 | 	to {
170 | 		bottom: 10%;
171 | 	}
172 | }
173 | 
174 | @-o-keyframes arrow /* Opera */
175 | {
176 | 	from {
177 | 		bottom: 5%;
178 | 	}
179 | 	to {
180 | 		bottom: 10%;
181 | 	}
182 | }
183 | 
184 | 
185 | 
186 | 
187 | 
188 | 
189 | 
190 | 
191 | 
192 | 
193 | 
194 | 
195 | 
196 | 
197 | 
198 | 
199 | 
200 | 
201 | 
202 | 
203 | 
204 | 
205 | 
206 | 
207 | 


--------------------------------------------------------------------------------
/views/static/show.js:
--------------------------------------------------------------------------------
  1 | (function(){
  2 | 
  3 | 	/*防止微信或者其他移动端浏览器在下拉时触发原生操作，比如chrome里面的下拉刷新以及微信中的把整个显示区块下拉*/
  4 | 	document.querySelector('body').addEventListener('touchstart', function (ev) {
  5 | 	    event.preventDefault();
  6 | 	});
  7 | 
  8 | 	/*消息处理中心*/
  9 | 	function newsCenter(){
 10 | 		this.callbacks = {};
 11 | 		this.news = [];
 12 | 		this.isAnimation = false;/*动画标识位，在动画过程中不能继续出发上拉下滑功能*/
 13 | 		var that = this;
 14 | 
 15 | 		for(var i = 0; i < $('.pages').length; i++){
 16 | 		$('.pages')[i].addEventListener("webkitAnimationEnd", function(e){
 17 | 				/*当是design元素动画冒泡事件直接返回*/
 18 | 				if (e.target.id.indexOf('design_') >= 0) return;
 19 | 
 20 | 				that.isAnimation = false;
 21 | 				that.exec();
 22 | 				that.animation();
 23 | 			})
 24 | 		}
 25 | 	};
 26 | 
 27 | 	/*注册一个消息回调*/
 28 | 	newsCenter.prototype.attach = function(type, func){
 29 | 		(this.callbacks[type] === undefined) && (this.callbacks[type] = []);
 30 | 		this.callbacks[type].push(func);
 31 | 	}
 32 | 
 33 | 	/*注销一个消息回调*/
 34 | 	newsCenter.prototype.detach = function(type, func){
 35 | 		if (!this.callbacks[type]) return;
 36 | 
 37 | 		var index = this.callbacks[type].indexOf(func);
 38 | 		if (index > -1) {
 39 | 			this.callbacks[type].splice(index, 1);
 40 | 		}
 41 | 	}
 42 | 
 43 | 	/*触发事件*/
 44 | 	newsCenter.prototype.fire = function(type, that){
 45 | 		if (this.callbacks[type] && this.news.length < 1 ) {
 46 | 			/*事件中心最多纪录两条信息，再多直接丢弃（这里包括一条已经在执行的，已经推出消息队列）*/
 47 | 			if (((type === 'swipeUp') && (elePage == (window.infoData.designInfos.pages.length-1))) 
 48 | 				|| ((type === 'swipeDown') && (elePage == 0))) return;
 49 | 			this.news.push({'type':type, 'that': that});
 50 | 			this.exec();
 51 | 		}
 52 | 	}
 53 | 
 54 | 	newsCenter.prototype.exec = function(){
 55 | 		if (this.news.length && !this.isAnimation) {
 56 | 			var newObj = this.news.shift();
 57 | 			this.isAnimation = true;
 58 | 			this.callbacks[newObj.type].forEach(function(f){
 59 | 				typeof f === 'function' && f.call(newObj.that);
 60 | 			})
 61 | 		}
 62 | 	}
 63 | 
 64 | 	/*执行动画*/
 65 | 	newsCenter.prototype.animation = function(isDelay){
 66 | 		window.infoData.designInfos.pages[elePage].text.forEach(function(item, index){
 67 | 			$('#' + item.id).css('display', 'block');
 68 | 			for(var s in item.animationStyle){
 69 | 				$('#' + item.id).css(s, item.animationStyle[s]);
 70 | 			}
 71 | 		})
 72 | 
 73 | 		window.infoData.designInfos.pages[elePage].image.forEach(function(item, index){
 74 | 			$('#' + item.id).css('display', 'block');
 75 | 			for(var s in item.animationStyle){
 76 | 				$('#' + item.id).css(s, item.animationStyle[s]);
 77 | 			}		
 78 | 		})
 79 | 	}
 80 | 
 81 | 	var isPlay = true;
 82 | 	var elePage = 0;
 83 | 	var pages = $('.pages');
 84 | 
 85 | 	/*新建事件处理中心并注册回调函数*/
 86 | 	var newsCenterObj = new newsCenter();
 87 | 	newsCenterObj.attach('swipeUp',up);
 88 | 	newsCenterObj.attach('swipeDown',down);
 89 | 	newsCenterObj.animation();
 90 | 
 91 | 	/*动画执行时间*/
 92 | 	function AnimationTime(){
 93 | 		return 1000;
 94 | 	}
 95 | 
 96 | 	function showPage(pageObj, type){
 97 | 		if (type === 'down') {
 98 | 			pageObj.addClass('show');
 99 | 			pageObj.removeClass('hide');
100 | 		}
101 | 		pageObj.removeClass('page-hide');
102 | 		pageObj.addClass('page-show');
103 | 	}
104 | 
105 | 	function hidePage(pageObj, type){
106 | 		if (type === 'up') {
107 | 			pageObj.addClass('hide');
108 | 			pageObj.removeClass('show');
109 | 		}
110 | 
111 | 		var time = (type === 'up') ? 0 : AnimationTime();
112 | 		setTimeout(function(){
113 | 			pageObj.addClass('page-hide');
114 | 			pageObj.removeClass('page-show');
115 | 		}, time)
116 | 		
117 | 		/*清楚隐藏页面的css动画，保证下次出现的时候会添加动画并执行*/
118 | 		var p = (type === 'up') ? (elePage - 1) : (elePage + 1);
119 | 		window.infoData.designInfos.pages[p].text.forEach(function(item, index){
120 | 			$('#' + item.id).css('display', 'none');
121 | 			for(var s in item.animationStyle){
122 | 				$('#' + item.id).css(s, '');
123 | 			}	
124 | 		})	
125 | 
126 | 		window.infoData.designInfos.pages[p].image.forEach(function(item, index){
127 | 			$('#' + item.id).css('display', 'none');
128 | 			for(var s in item.animationStyle){
129 | 				$('#' + item.id).css(s, '');
130 | 			}	
131 | 		})	
132 | 	}
133 | 
134 | 
135 | 	pages.length && showPage($(pages[0]));
136 | 
137 | 	$('#musicIcon').click(function(){
138 | 		isPlay = !isPlay;
139 | 		var audio = document.getElementById('musicAudio');
140 | 		if (isPlay) {
141 | 			audio.play();
142 | 			$('#musicIcon').addClass('rotate');
143 | 		}
144 | 		else{
145 | 			audio.pause();
146 | 			$('#musicIcon').removeClass('rotate');
147 | 		}
148 | 	})
149 | 
150 | 	var myTouch = util.toucher(document.getElementById('contain'));
151 | 	myTouch.on('swipeUp',function(e){
152 | 	    newsCenterObj.fire('swipeUp');
153 | 	})
154 | 
155 | 	myTouch.on('swipeDown',function(e){
156 | 	   newsCenterObj.fire('swipeDown');
157 | 	})
158 | 
159 | 	function up(){
160 | 		if ((elePage < (pages.length - 1))) {
161 | 			elePage++;
162 | 			showPage($(pages[elePage]), 'up');
163 | 			hidePage($(pages[elePage - 1]), 'up');
164 | 		}
165 | 	}
166 | 
167 | 	function down(){
168 | 		 if ((elePage > 0)) {
169 | 		 	elePage--;
170 | 			showPage($(pages[elePage]), 'down');
171 | 			hidePage($(pages[elePage + 1]), 'down');
172 | 		}
173 | 	}
174 | 
175 | })();


--------------------------------------------------------------------------------
/views/static/toucher.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @author 剧中人
  3 |  * @github https://github.com/bh-lay/toucher
  4 |  * @modified 2016-5-25 23:27
  5 |  * 
  6 |  */
  7 | 
  8 |  
  9 | (function(global,doc,factoryFn){
 10 | 	//初始化toucher主方法
 11 | 	var factory = factoryFn(global,doc);
 12 | 	
 13 | 	//提供window.util.toucher()接口
 14 | 	global.util = global.util || {};
 15 | 	global.util.toucher = global.util.toucher || factory;
 16 | 	
 17 | 	//提供CommonJS规范的接口
 18 | 	global.define && define(function(require,exports,module){
 19 | 		return factory;
 20 | 	});
 21 | })(this,document,function(window,document){
 22 | 
 23 | 	/**
 24 | 	* class 操作
 25 | 	*/
 26 | 	var supports_classList = !!document.createElement('div').classList,
 27 | 		// 是否含有某个 class
 28 | 		hasClass = supports_classList ? function( node, classSingle ){
 29 | 			return node && node.classList && node.classList.contains( classSingle );
 30 | 		} : function ( node, classSingle ){
 31 | 			if( !node || typeof( node.className ) !== 'string'  ){
 32 | 				return false;
 33 | 			}
 34 | 			return !! node.className.match(new RegExp('(\\s|^)' + classSingle + '(\\s|$)'));
 35 | 		};
 36 | 
 37 | 	/**
 38 | 	 * @method 事件触发器
 39 | 	 * @description 根据事件最原始被触发的target，逐级向上追溯事件绑定
 40 | 	 * 
 41 | 	 * @param string 事件名
 42 | 	 * @param object 原生事件对象
 43 | 	 */
 44 | 	function EMIT(eventName,e){
 45 | 		this._events = this._events || {};
 46 | 		//事件堆无该事件，结束触发
 47 | 		if(!this._events[eventName]){
 48 | 			return;
 49 | 		}
 50 | 		//记录尚未被执行掉的事件绑定
 51 | 		var rest_events = this._events[eventName];
 52 | 		
 53 | 		//从事件源：target开始向上冒泡
 54 | 		var target = e.target;
 55 | 		while (1) {
 56 | 			//若没有需要执行的事件，结束冒泡
 57 | 			if(rest_events.length ==0){
 58 | 				return;
 59 | 			}
 60 | 			//若已经冒泡至顶，检测顶级绑定，结束冒泡
 61 | 			if(target == this.dom || !target){
 62 | 				//遍历剩余所有事件绑定
 63 | 				for(var i=0,total=rest_events.length;i<total;i++){
 64 | 					var classStr = rest_events[i]['className'];
 65 | 					var callback = rest_events[i]['fn'];
 66 | 					//未指定事件委托，直接执行
 67 | 					if(classStr == null){
 68 | 						event_callback(eventName,callback,target,e);
 69 | 					}
 70 | 				}
 71 | 				return;
 72 | 			}
 73 | 			
 74 | 			//当前需要校验的事件集
 75 | 			var eventsList = rest_events;
 76 | 			//置空尚未执行掉的事件集
 77 | 			rest_events = [];
 78 | 
 79 | 			//遍历事件所有绑定
 80 | 			for(var i=0,total=eventsList.length;i<total;i++){
 81 | 				var classStr = eventsList[i]['className'];
 82 | 				var callback = eventsList[i]['fn'];
 83 | 				//符合事件委托，执行
 84 | 				if(hasClass(target,classStr)){
 85 | 					//返回false停止事件冒泡及后续事件，其余继续执行
 86 | 					if(event_callback(eventName,callback,target,e) == false){
 87 | 						return;
 88 | 					}
 89 | 				}else{
 90 | 					//不符合执行条件，压回到尚未执行掉的列表中
 91 | 					rest_events.push(eventsList[i]);
 92 | 				}
 93 | 			}
 94 | 			//向上冒泡
 95 | 			target = target.parentNode;
 96 | 		}
 97 | 	}
 98 | 	
 99 | 	/**
100 | 	 * 执行绑定的回调函数，并创建一个事件对象
101 | 	 * @param[string]事件名
102 | 	 * @param[function]被执行掉的函数
103 | 	 * @param[object]指向的dom
104 | 	 * @param[object]原生event对象
105 | 	 */
106 | 	function event_callback(name,fn,dom,e){
107 | 		//优先使用自定义的touches（目前是为了解决touchEnd无touches的问题）
108 | 		var touches = e.plugTouches || e.touches,
109 | 			touch = touches.length ? touches[0] : {},
110 | 			newE = {
111 | 				type : name,
112 | 				target : e.target,
113 | 				pageX : touch.pageX,
114 | 				pageY : touch.pageY,
115 | 				clientX : touch.clientX || 0,
116 | 				clientY : touch.clientY || 0
117 | 			};
118 | 		//为swipe事件增加交互初始位置及移动距离
119 | 		if(name.match(/^swipe/) && e.plugStartPosition){
120 | 			newE.startX = e.plugStartPosition.pageX;
121 | 			newE.startY = e.plugStartPosition.pageY;
122 | 			newE.moveX = newE.pageX - newE.startX;
123 | 			newE.moveY = newE.pageY - newE.startY;
124 | 		}
125 | 		//执行绑定事件的回调，并记录返回值
126 | 		var call_result = fn.call(dom,newE);
127 | 		//若返回false，阻止浏览器默认事件
128 | 		if(call_result == false){
129 | 			e.preventDefault();
130 | 			e.stopPropagation();
131 | 		}
132 | 		
133 | 		return call_result;
134 | 	}
135 | 	/**
136 | 	 * 判断swipe方向
137 | 	 */
138 | 	function swipeDirection(x1, x2, y1, y2) {
139 | 		return Math.abs(x1 - x2) >=	Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down');
140 | 	}
141 | 
142 | 	/**
143 | 	 * 监听原生的事件，主动触发模拟事件
144 | 	 * 
145 | 	 */
146 | 	function eventListener(DOM){
147 | 		var this_touch = this;
148 | 
149 | 		//轻击开始时间
150 | 		var touchStartTime = 0;
151 | 		
152 | 		//记录上一次点击时间
153 | 		var lastTouchTime = 0;
154 | 		
155 | 		//记录初始轻击的位置
156 | 		var x1,y1,x2,y2;
157 | 		
158 | 		//轻击事件的延时器
159 | 		var touchDelay;
160 | 		
161 | 		//测试长按事件的延时器
162 | 		var longTap;
163 | 		
164 | 		//记录当前事件是否已为等待结束的状态
165 | 		var isActive = false;
166 | 		//记录有坐标信息的事件
167 | 		var eventMark = null;
168 | 		//单次用户操作结束
169 | 		function actionOver(e){
170 | 			isActive = false;
171 | 			clearTimeout(longTap);
172 | 			clearTimeout(touchDelay);
173 | 		}
174 | 		
175 | 		//断定此次事件为轻击事件
176 | 		function isSingleTap(){
177 | 			actionOver();
178 | 			EMIT.call(this_touch,'singleTap',eventMark);
179 | 		}
180 | 		//触屏开始
181 | 		function touchStart(e){
182 | 			//缓存事件
183 | 			eventMark = e;
184 | 			x1 = e.touches[0].pageX;
185 | 			y1 = e.touches[0].pageY;
186 | 			x2 = 0;
187 | 			y2 = 0;
188 | 			isActive = true;
189 | 			touchStartTime = new Date();
190 | 			EMIT.call(this_touch,'swipeStart',e);
191 | 			//检测是否为长按
192 | 			clearTimeout(longTap);
193 | 			longTap = setTimeout(function(){
194 | 				actionOver(e);
195 | 				//断定此次事件为长按事件
196 | 				EMIT.call(this_touch,'longTap',e);
197 | 			},500);
198 | 		}
199 | 		//触屏结束
200 | 		function touchend(e){
201 | 			//touchend中，拿不到坐标位置信息，故使用全局保存下数据
202 | 			e.plugStartPosition = eventMark.plugStartPosition;
203 | 			e.plugTouches = eventMark.touches;
204 | 			
205 | 			EMIT.call(this_touch,'swipeEnd',e);
206 | 			if(!isActive){
207 | 				return;
208 | 			}
209 | 			var now = new Date();
210 | 			//若未监听doubleTap，直接响应
211 | 			if(!this_touch._events.doubleTap || this_touch._events.doubleTap.length == 0){
212 | 				isSingleTap();
213 | 			}else if(now - lastTouchTime > 200){
214 | 				//延迟响应
215 | 				touchDelay = setTimeout(isSingleTap,190);
216 | 			}else{
217 | 				clearTimeout(touchDelay);
218 | 				actionOver(e);
219 | 				//断定此次事件为连续两次轻击事件
220 | 				EMIT.call(this_touch,'doubleTap',eventMark);
221 | 			}
222 | 			lastTouchTime = now;
223 | 		}
224 | 		
225 | 		//手指移动
226 | 		function touchmove(e){
227 | 			//缓存事件
228 | 			eventMark = e;
229 | 			//在原生事件基础上记录初始位置（为swipe事件增加参数传递）
230 | 			e.plugStartPosition = {
231 | 				pageX : x1,
232 | 				pageY : y1
233 | 			};
234 | 			//断定此次事件为移动事件
235 | 			EMIT.call(this_touch,'swipe',e);
236 | 
237 | 			if(!isActive){
238 | 				return;
239 | 			}
240 | 			x2 = e.touches[0].pageX;
241 | 			y2 = e.touches[0].pageY;
242 | 			if(Math.abs(x1-x2)>2 || Math.abs(y1-y2)>2){
243 | 				//断定此次事件为移动手势
244 | 				var direction = swipeDirection(x1, x2, y1, y2);
245 | 				EMIT.call(this_touch,'swipe' + direction,e);
246 | 			}else{
247 | 				//断定此次事件为轻击事件
248 | 				isSingleTap();
249 | 			}
250 | 			actionOver(e);
251 | 		}
252 | 
253 | 		/**
254 | 		 * 对开始手势的监听
255 | 		 */
256 | 		DOM.addEventListener('touchstart',touchStart);
257 | 		DOM.addEventListener('MSPointerDown',touchStart);
258 | 		DOM.addEventListener('pointerdown',touchStart);
259 | 
260 | 		/**
261 | 		 * 对手势结束的监听（轻击）
262 | 		 */
263 | 		DOM.addEventListener('touchend',touchend);
264 | 		DOM.addEventListener('MSPointerUp',touchend);
265 | 		DOM.addEventListener('pointerup',touchend);
266 | 
267 | 		/**
268 | 		 * 对移动手势的监听
269 | 		 */
270 | 		DOM.addEventListener('touchmove',touchmove);
271 | 		DOM.addEventListener('MSPointerMove',touchmove);
272 | 		DOM.addEventListener('pointermove',touchmove);
273 | 
274 | 		/**
275 | 		 * 对移动结束的监听
276 | 		 */
277 | 		DOM.addEventListener('touchcancel',actionOver);
278 | 		DOM.addEventListener('MSPointerCancel',actionOver);
279 | 		DOM.addEventListener('pointercancel',actionOver);
280 | 	}
281 | 	
282 | 	/**
283 | 	 * touch类
284 | 	 * 
285 | 	 */
286 | 	function Touch(DOM,param){
287 | 		var param = param || {};
288 | 
289 | 		this.dom = DOM;
290 | 		//存储监听事件的回调
291 | 		this._events = {};
292 | 		//监听DOM原生事件
293 | 		eventListener.call(this,this.dom);
294 | 	}
295 | 	/**
296 | 	 * @method 增加事件监听
297 | 	 * @description 支持链式调用
298 | 	 * 
299 | 	 * @param string 事件名
300 | 	 * @param [string] 事件委托至某个class（可选）
301 | 	 * @param function 符合条件的事件被触发时需要执行的回调函数 
302 | 	 * 
303 | 	 **/
304 | 	Touch.prototype.on = function ON(eventStr,a,b){
305 | 		var className,fn;
306 | 		if(typeof(a) == 'string'){
307 | 			className = a.replace(/^\./,'');
308 | 			fn = b;
309 | 		}else{
310 | 			className = null;
311 | 			fn = a;
312 | 		}
313 | 		//检测callback是否合法,事件名参数是否存在·
314 | 		if(typeof(fn) == 'function' && eventStr && eventStr.length){
315 | 			var eventNames = eventStr.split(/\s+/);
316 | 			for(var i=0,total=eventNames.length;i<total;i++){
317 | 			
318 | 				var eventName = eventNames[i];
319 | 				//事件堆无该事件，创建一个事件堆
320 | 				if(!this._events[eventName]){
321 | 					this._events[eventName] = [];
322 | 				}
323 | 				this._events[eventName].push({
324 | 					className : className,
325 | 					fn : fn
326 | 				});
327 | 			}
328 | 		}
329 | 		
330 | 		//提供链式调用的支持
331 | 		return this;
332 | 	};
333 | 	
334 | 	//对外提供接口
335 | 	return function (dom){
336 | 		return new Touch(dom);
337 | 	};
338 | });
339 | 


--------------------------------------------------------------------------------
/views/store/actions.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 
3 | let actions = {};
4 | 
5 | module.exports = actions;


--------------------------------------------------------------------------------
/views/store/modules/Design.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | module.exports = {
  4 | 	state: {
  5 | 		/*是否显示提示框*/
  6 | 		isAlert: false,
  7 | 		/*提示框信息*/
  8 | 		alertMessage: "",
  9 | 		/*是否弹出音乐提示框*/
 10 | 		musicDialog: false,
 11 | 		/*用户上传音乐列表数据*/
 12 | 		userMusics: [],
 13 | 		/*是否弹出图片提示框*/
 14 | 		imageDialog: false,
 15 | 		/*用户上传图片列表数据*/
 16 | 		userImages: [],
 17 | 		/*右侧修改设计的弹出框*/
 18 | 		isModifyEle: false,
 19 | 		/*设计界面各个已添加数据*/
 20 | 		DesignInfos: {
 21 | 			/*id号*/
 22 | 			id: 1,
 23 | 			/*页面id*/
 24 | 			pageId: 1,
 25 | 			/*音乐*/
 26 | 			music: '',
 27 | 			/*当前选中的元素*/
 28 | 			currentElement: '',
 29 | 			/*当前选中的元素类型 image text*/
 30 | 			currentElementType: 'text',
 31 | 			/*当前选中的页面*/
 32 | 			currentPage: 'page_0',
 33 | 			/*当倩选中的背景颜色*/
 34 | 			currentBackgroundColor: '#FFFFFF',
 35 | 			/*页面*/
 36 | 			pages: [
 37 | 				{
 38 | 					id: 'page_0',
 39 | 					/*
 40 | 						文本
 41 | 						例: {
 42 | 							id: design_1,
 43 | 							text: 'test',
 44 | 							style:{
 45 | 								left: '20%',
 46 | 								top: '10%',
 47 | 								color: '#ff00ff',
 48 | 								background-color: 'transparent',
 49 | 								font-size： '100',
 50 | 								line-height: '100%',
 51 | 								padding: '0px',
 52 | 							},
 53 | 							animationStyle:{
 54 | 								'animation-name': 'default',
 55 | 								'animation-duration': '1s',
 56 | 								'animation-timing-function': 'ease',
 57 | 							},
 58 | 						}
 59 | 					*/
 60 | 					text: [],
 61 | 					/*
 62 | 						图片
 63 | 						例：{
 64 | 							id: 'design_1',
 65 | 							imageID: '2313123213',
 66 | 							style: {
 67 | 								width: '50px',
 68 | 								height: '50px',
 69 | 								left: '20%',
 70 | 								top: '10%',
 71 | 							},
 72 | 							animationStyle:{
 73 | 								'animation-name': 'default',
 74 | 								'animation-duration': '1s',
 75 | 								'animation-timing-function': 'ease',
 76 | 							},
 77 | 						}
 78 | 					*/
 79 | 					image: [],
 80 | 					/*页面背景色*/
 81 | 					backgroundColor: '#FFFFFF',
 82 | 				},
 83 | 			],
 84 | 		},
 85 | 	},
 86 | 	mutations: {
 87 | 		/*页面数目加1*/
 88 | 		addPageNum(state){
 89 | 			state.DesignInfos.pages.push({
 90 | 				id: 'page_'+state.DesignInfos.pageId,
 91 | 				text: [],
 92 | 				image: [],
 93 | 				backgroundColor: '#FFFFFF',
 94 | 			})
 95 | 
 96 | 			state.DesignInfos.pageId++;
 97 | 		},
 98 | 		/*页面数目减1*/
 99 | 		delPageNum(state, pageId){
100 | 			state.DesignInfos.pages.forEach((item, index) => {
101 | 				if (item.id === pageId) {
102 | 					state.DesignInfos.pages.splice(index, 1)
103 | 				}
104 | 			})
105 | 		},
106 | 		/*弹出提示*/
107 | 		alertDesignMessage(state, {isAlert, message}){
108 | 			state.isAlert = isAlert ? true : false;
109 | 			state.alertMessage = message || "";
110 | 		},
111 | 		/*弹出音乐提示框*/
112 | 		musicDialog(state, l){
113 | 			state.musicDialog = l ? true : false;
114 | 		},
115 | 		/*弹出音乐提示框*/
116 | 		imageDialog(state, l){
117 | 			state.imageDialog = l ? true : false;
118 | 		},
119 | 		/*刷新用户上传音乐列表*/
120 | 		updateUserMusics(state, szMusics){
121 | 			state.userMusics = szMusics;
122 | 		},
123 | 		/*刷新用户上传图片列表*/
124 | 		updateUserImages(state, szImages){
125 | 			state.userImages = szImages;
126 | 		},
127 | 		/*修改选择的背景音乐*/
128 | 		updateMusic(state, music){
129 | 			let audio = document.getElementById('myAudio');
130 | 			audio.pause();
131 | 			audio.src = '/H5/PlayMusic?id='+music;
132 | 			audio.play();
133 | 			state.DesignInfos.music = music;
134 | 		},
135 | 		/*增加文本*/
136 | 		addDesignText(state, text){
137 | 			state.DesignInfos.pages.forEach((item, index) => {
138 | 				if (item.id === state.DesignInfos.currentPage) {
139 | 					item.text.push({
140 | 						id: 'design_'+state.DesignInfos.id,
141 | 						text: text || "",
142 | 						style:{
143 | 							left: '0%',
144 | 							top: '10%',
145 | 							color: 'black',
146 | 							'font-size': '100%',
147 | 							'background-color': 'transparent',
148 | 							'line-height': '100%',
149 | 							padding: '0px',
150 | 						},
151 | 						animationStyle: {
152 | 							'animation-name': 'default',
153 | 							'animation-duration': '1s',
154 | 							'animation-timing-function': 'ease',
155 | 						},
156 | 					})
157 | 				}
158 | 			})
159 | 
160 | 			state.DesignInfos.id++;
161 | 		},
162 | 		/*删除文本*/
163 | 		delDesignText(state, id){
164 | 			state.DesignInfos.pages.forEach((item, index) => {
165 | 				if (item.id === state.DesignInfos.currentPage) {
166 | 					let isMove = false;
167 | 					item.text.forEach((t, i) => {
168 | 						if (isMove) return;
169 | 						if (t.id === id) {
170 | 							isMove = true;
171 | 							item.text = item.text.slice(0,i).concat(item.text.slice(i+1, item.text.length));
172 | 						}
173 | 					})
174 | 				}
175 | 			})
176 | 		},
177 | 		/*根据id修改style*/
178 | 		modifyTextStyleById(state, info){
179 | 			state.DesignInfos.pages.forEach((item, index) => {
180 | 				if (item.id === state.DesignInfos.currentPage) {
181 | 					item.text.forEach(t => {
182 | 						if (t.id === info.id) {
183 | 							for(let s in info){
184 | 								if (s === 'id') continue;
185 | 								t.style[s] = info[s];
186 | 							}
187 | 						}
188 | 					})
189 | 				}
190 | 			})
191 | 			
192 | 		},
193 | 		/*根据id修改animationStyle*/
194 | 		modifyTextAnimationStyleById(state, info){console.log('modifyTextAnimationStyleById')
195 | 			state.DesignInfos.pages.forEach((item, index) => {
196 | 				if (item.id === state.DesignInfos.currentPage) {
197 | 					item.text.forEach(t => {
198 | 						if (t.id === info.id) {
199 | 							for(let s in info){
200 | 								if (s === 'id') continue;
201 | 								t.animationStyle[s] = info[s];
202 | 							}
203 | 							console.log(t.animationStyle)
204 | 						}
205 | 					})
206 | 				}
207 | 			})
208 | 		},
209 | 		modifyTextContentById(state, info){
210 | 			state.DesignInfos.pages.forEach((item, index) => {
211 | 				if (item.id === state.DesignInfos.currentPage) {
212 | 					item.text.forEach(t => {
213 | 						if (t.id === info.id) {
214 | 							t.text = info.text;
215 | 						}
216 | 					})
217 | 				}
218 | 			})
219 | 		},
220 | 		/*修改当前选中的元素*/
221 | 		modifyCurrentElement(state, ele){
222 | 			state.DesignInfos.pages.forEach((item, index) => {
223 | 				if (item.id === state.DesignInfos.currentPage) {
224 | 					item.image.forEach((item, index) => {
225 | 						if (item.id === ele) {
226 | 							state.DesignInfos.currentElementType = 'image';
227 | 						}
228 | 					})
229 | 
230 | 					item.text.forEach((item, index) => {
231 | 						if (item.id === ele) {
232 | 							state.DesignInfos.currentElementType = 'text';
233 | 						}
234 | 					})
235 | 				}
236 | 			})
237 | 
238 | 			state.DesignInfos.currentElement = ele || '';
239 | 		},
240 | 		/*修改当前被选中的页面*/
241 | 		changePage(state, page){
242 | 			state.DesignInfos.currentPage = page || 'page_0';
243 | 
244 | 			/*切换页面的时候修改当前背景色*/
245 | 			state.DesignInfos.pages.forEach((item, index) => {
246 | 				if (item.id === state.DesignInfos.currentPage) {
247 | 					state.DesignInfos.currentBackgroundColor = item.backgroundColor || '#FFFFFF';
248 | 				}
249 | 			})
250 | 		},
251 | 		/*是否修改界面元素，弹出右侧弹出框*/
252 | 		isModifyEle(state, l){
253 | 			state.isModifyEle = l ? true : false;
254 | 		},
255 | 		/*增加一张图片*/
256 | 		addDesignImage(state, id){
257 | 			state.DesignInfos.pages.forEach((item, index) => {
258 | 				if (item.id === state.DesignInfos.currentPage) {
259 | 					item.image.push({
260 | 						id: 'design_'+state.DesignInfos.id,
261 | 						imageID: id,
262 | 						style: {
263 | 							width: '50px',
264 | 							height: '50px',
265 | 							left: '0%',
266 | 							top: '10%',
267 | 						},
268 | 						animationStyle: {
269 | 							'animation-name': 'default',
270 | 							'animation-duration': '1s',
271 | 							'animation-timing-function': 'ease',
272 | 						},
273 | 					})
274 | 				}
275 | 			})
276 | 
277 | 			state.DesignInfos.id++;
278 | 		},
279 | 		/*删除一张图片*/
280 | 		delDesignImage(state, id){
281 | 			state.DesignInfos.pages.forEach((item, index) => {
282 | 				if (item.id === state.DesignInfos.currentPage) {
283 | 					let isMove = false;
284 | 					item.image.forEach((t, i) => {
285 | 						if (isMove) return;
286 | 						if (t.id === id) {
287 | 							isMove = true;
288 | 							item.image = item.image.slice(0,i).concat(item.image.slice(i+1, item.image.length));
289 | 						}
290 | 					})
291 | 				}
292 | 			})
293 | 		},
294 | 		/*更新当前选中元素的类型*/
295 | 		updateCurrentElementType(state, type){
296 | 			state.currentElementType = (type === 'text') ? 'text':'image';
297 | 		},
298 | 		/*根据id修改图片的style*/
299 | 		modifyImageStyleById(state, info){
300 | 			state.DesignInfos.pages.forEach((item, index) => {
301 | 				if (item.id === state.DesignInfos.currentPage) {
302 | 					item.image.forEach(t => {
303 | 						if (t.id === info.id) {
304 | 							for(let s in info){
305 | 								if (s === 'id') continue;
306 | 								t.style[s] = info[s];
307 | 							}
308 | 						}
309 | 					})
310 | 				}
311 | 			})
312 | 			
313 | 		},
314 | 		/*根据id修改图片的style*/
315 | 		modifyImageAnimationStyleById(state, info){
316 | 			state.DesignInfos.pages.forEach((item, index) => {
317 | 				if (item.id === state.DesignInfos.currentPage) {
318 | 					item.image.forEach(t => {
319 | 						if (t.id === info.id) {
320 | 							for(let s in info){
321 | 								if (s === 'id') continue;
322 | 								t.animationStyle[s] = info[s];
323 | 							}
324 | 						}
325 | 					})
326 | 				}
327 | 			})
328 | 			
329 | 		},
330 | 		/*设置设置界面数据，如果infos为空则清空所有原始数据*/
331 | 		setDesign(state, infos){
332 | 			if (infos) {
333 | 				state.DesignInfos = infos;
334 | 			}
335 | 			else{
336 | 				/*恢复默认*/
337 | 				state.DesignInfos = {
338 | 					id: 1,
339 | 					pageId: 1,
340 | 					music: '',
341 | 					currentElement: '',
342 | 					currentElementType: 'text',
343 | 					currentPage: 'page_0',
344 | 					currentBackgroundColor: '#FFFFFF',
345 | 					pages: [
346 | 						{
347 | 							id: 'page_0',
348 | 							text: [],
349 | 							image: [],
350 | 							backgroundColor: '#FFFFFF',
351 | 						},
352 | 					],
353 | 				}
354 | 			}
355 | 		},
356 | 		setPageBackgroundColor(state, color){
357 | 			state.DesignInfos.pages.forEach((item, index) => {
358 | 				if (item.id === state.DesignInfos.currentPage) {
359 | 					item.backgroundColor = color; 
360 | 				}
361 | 			})
362 | 
363 | 			state.DesignInfos.currentBackgroundColor = color;
364 | 		},
365 | 	},
366 | 	actions: {
367 | 		/*增加一个页面*/
368 | 		addPageNum(context){
369 | 			context.commit('addPageNum');
370 | 		},
371 | 		/*删除一个页面*/
372 | 		delPageNum(context, pageId){
373 | 			context.commit('delPageNum', pageId);
374 | 		},
375 | 		/*弹出音乐提示框*/
376 | 		musicDialog(context, l){
377 | 			fetch('/H5/rpc',
378 | 				{
379 | 					method:'POST',
380 | 					headers:{ 
381 | 			 			'Accept': 'application/json', 
382 | 			 			'Content-Type': 'application/json'
383 | 					},
384 | 					credentials: 'same-origin',
385 | 					body: JSON.stringify({
386 | 						method: 'getAllUserMusics',
387 | 						params: null,
388 | 					})
389 | 				}
390 | 			)
391 | 			.then(response => response.json())
392 | 			.then(d => {
393 | 				if (d.result) {
394 | 					context.commit('updateUserMusics', d.params);
395 | 					context.commit('musicDialog', l ? true : false);
396 | 				}
397 | 				else{
398 | 					this.$store.commit('alertDesignMessage', {isAlert: true, message: '数据获取异常，请重试'});
399 | 				}
400 | 			})
401 | 		},
402 | 		/*弹出图片提示框*/
403 | 		imageDialog(context, l){
404 | 			fetch('/H5/rpc',
405 | 				{
406 | 					method:'POST',
407 | 					headers:{ 
408 | 			 			'Accept': 'application/json', 
409 | 			 			'Content-Type': 'application/json'
410 | 					},
411 | 					credentials: 'same-origin',
412 | 					body: JSON.stringify({
413 | 						method: 'getAllUserImages',
414 | 						params: null,
415 | 					})
416 | 				}
417 | 			)
418 | 			.then(response => response.json())
419 | 			.then(d => {
420 | 				if (d.result) {
421 | 					context.commit('updateUserImages', d.params);
422 | 					context.commit('imageDialog', l ? true : false);
423 | 				}
424 | 				else{
425 | 					context.commit('alertDesignMessage', {isAlert: true, message: '数据获取异常，请重试'});
426 | 				}
427 | 			})
428 | 		},
429 | 		/*取消选中当前元素并让编辑框消失*/
430 | 		cancelCurrentEle(context){
431 | 			context.commit('isModifyEle', false);
432 | 			context.commit('modifyCurrentElement', '');
433 | 		},
434 | 		/*删除用户设计界面*/
435 | 		delUserWork(context, workName){
436 | 			fetch('/H5/rpc',
437 | 				{
438 | 					method:'POST',
439 | 					headers:{ 
440 | 			 			'Accept': 'application/json', 
441 | 			 			'Content-Type': 'application/json'
442 | 					},
443 | 					credentials: 'same-origin',
444 | 					body: JSON.stringify({
445 | 						method: 'delDesign',
446 | 						params: {workName},
447 | 					})
448 | 				}
449 | 			)
450 | 			.then(response => response.json())
451 | 			.then(d => {
452 | 				if (d.result) {
453 | 					context.dispatch('updateDesignWorks');
454 | 				}
455 | 				else{
456 | 					context.commit('alertDesignMessage', {isAlert: true, message: '数据获取异常，请重试'});
457 | 				}
458 | 			})
459 | 		},
460 | 	},
461 | 	getters: {
462 | 
463 | 	}
464 | }
465 | 


--------------------------------------------------------------------------------
/views/store/modules/User.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | module.exports = {
 4 | 	state: {
 5 | 		userInfo: {},
 6 | 	},
 7 | 	mutations: {
 8 | 		updateUserInfo(state, l){
 9 | 			state.userInfo = l;
10 | 		},
11 | 	},
12 | 	actions: {
13 | 		updateUserInfo(context){
14 | 			
15 | 		},
16 | 		saveUserInfo (context, userInfo) {
17 | 			fetch('/H5/rpc',
18 | 				{
19 | 					method:'POST',
20 | 					headers:{ 
21 | 			 			'Accept': 'application/json', 
22 | 			 			'Content-Type': 'application/json'
23 | 					},
24 | 					credentials: 'same-origin',
25 | 					body: JSON.stringify({
26 | 						method: 'saveUserInfo',
27 | 						params: userInfo,
28 | 					})
29 | 				}
30 | 			)
31 | 			.then(response => response.json())
32 | 			.then(d => {
33 | 				if (d.result) {
34 | 					console.log(d)
35 | 				}
36 | 				else{
37 | 					
38 | 				}
39 | 			})
40 | 		}
41 | 	},
42 | 	getters: {
43 | 
44 | 	}
45 | }


--------------------------------------------------------------------------------
/views/store/modules/Work.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | module.exports = {
 4 | 	state: {
 5 | 		createWorkDialog: false,
 6 | 		/*当前作品的名字*/
 7 | 		workName: "",
 8 | 		/*所有历史作品*/
 9 | 		DesignWorks: [],
10 | 	},
11 | 	mutations: {
12 | 		/*创建新作品弹出框*/
13 | 		createWorkDialog(state, l){
14 | 			state.createWorkDialog = l ? true : false;
15 | 		},
16 | 
17 | 		/*作品的名字*/
18 | 		setWorkName(state, name){
19 | 			state.workName = name || "";
20 | 		},
21 | 
22 | 		/*设置所有历史作品*/
23 | 		setDesignWorks(state, works = []){
24 | 			state.DesignWorks = works;
25 | 		},
26 | 	},
27 | 	actions: {
28 | 		/*刷新用户所有作品*/
29 | 		updateDesignWorks(context){
30 | 			fetch('/H5/rpc',
31 | 				{
32 | 					method:'POST',
33 | 					headers:{ 
34 | 			 			'Accept': 'application/json', 
35 | 			 			'Content-Type': 'application/json'
36 | 					},
37 | 					credentials: 'same-origin',
38 | 					body: JSON.stringify({
39 | 						method: 'getAllUserDesigns',
40 | 						params: null,
41 | 					})
42 | 				}
43 | 			)
44 | 			.then(response => response.json())
45 | 			.then(d => {
46 | 				if (d.result) {
47 | 					context.commit('setDesignWorks', d.params);
48 | 				}
49 | 				else{
50 | 					
51 | 				}
52 | 			})
53 | 		},
54 | 	},
55 | 	getters: {
56 | 		
57 | 	}
58 | }
59 | 


--------------------------------------------------------------------------------
/views/store/mutations.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | let mutations = {
 4 | 	/*设置当前页面的路由*/
 5 | 	setRoute(state, route){
 6 | 		state.Route = route;
 7 | 	},
 8 | 
 9 | 	/*是否显示加载中*/
10 | 	Loading(state, l){
11 | 		state.isLoading = l ? true : false;
12 | 	},
13 | 
14 | 	/*是否弹出提示框*/
15 | 	Alert(state, msg){
16 | 		state.AlertMessage = msg.message || "";
17 | 		state.isAlert = msg.isAlert ? true : false;
18 | 
19 | 	},
20 | 
21 | 	/*用以导航栏切换Mian.vue页面*/
22 | 	setPage(state, page){
23 | 		if (['Home', 'Work', 'Setup'].indexOf(page) >= 0) {
24 | 			state.Page = page;
25 | 		}
26 | 		else{
27 | 			state.Page = 'Home';
28 | 		}
29 | 	},
30 | };
31 | 
32 | module.exports = mutations;


--------------------------------------------------------------------------------
/views/store/state.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 
3 | module.exports = {
4 | 	Route:'/',
5 | 	isLoading: false,
6 | 	isAlert: false,
7 | 	AlertMessage: "",
8 | 	Page: "Home",
9 | }


--------------------------------------------------------------------------------
/views/store/store.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import Vue from 'vue'
 4 | import Vuex from 'Vuex'
 5 | 
 6 | Vue.use(Vuex);
 7 | 
 8 | let state = require('./state.js');
 9 | let actions = require('./actions.js');
10 | let mutations = require('./mutations.js');
11 | 
12 | let Main = {
13 | 	state,
14 | 	actions,
15 | 	mutations,
16 | }
17 | 
18 | /*modoles*/
19 | let Work = require('./modules/Work.js');
20 | let Design = require('./modules/Design.js');
21 | let User = require('./modules/User.js');
22 | 
23 | export default new Vuex.Store({
24 | 	strict: true,
25 |     modules: {
26 |     	Main,
27 |     	Work,
28 |     	Design,
29 |     	User,
30 |     }
31 | })
32 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | var path = require('path')
 3 | var webpack = require('webpack') 
 4 | 
 5 | module.exports = {
 6 |   entry: path.resolve(__dirname, './views/app.js'),
 7 |   output: {
 8 |     path: path.resolve(__dirname, './views/dist'),
 9 |     publicPath: 'http://localhost:3000/dist/',
10 |     filename: 'build.js'
11 |   },
12 |   resolveLoader: {
13 |     root: path.join(__dirname, 'node_modules'),
14 |   },
15 |   module: {
16 |     loaders: [
17 |       { test: /\.css$/, loader: "style-loader!css-loader" },
18 |       {
19 |         test: /\.less/,
20 |         loaders: ['style', 'css', 'autoprefixer', 'less'],
21 |       },
22 |       {
23 |         test: /\.vue$/,
24 |         loader: 'vue'
25 |       },
26 |       {
27 |         test: /\.js$/,
28 |         loader: 'babel',
29 |         exclude: /node_modules/
30 |       },
31 |       {
32 |         test: /\.(png|jpg|gif|svg)$/,
33 |         loader: 'file',
34 |         query: {
35 |           name: '[name].[ext]?[hash]'
36 |         }
37 |       }
38 |     ]
39 |   },
40 |   vue:{
41 |     loaders:{
42 |       js:'babel'
43 |     }
44 |   },
45 |   plugins: [
46 |     new webpack.HotModuleReplacementPlugin()
47 |   ],
48 |   devServer: {
49 |     historyApiFallback: true,
50 |     noInfo: true
51 |   }
52 | }
53 | 
54 | 


--------------------------------------------------------------------------------