feat:初始化项目

This commit is contained in:
dengtongyu committed 2021-08-23 22:05:46 +08:00
commit ca52cf1bc0
486 files changed
+56656

No files matched your search

+5
View File
@@ -0,0 +1,5 @@
build/*.js
src/assets
public
dist
**/*.min.js
+312
View File
@@ -0,0 +1,312 @@
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module'
},
env: {
browser: true,
node: true,
es6: true,
jquery: true
},
extends: 'eslint:recommended',
rules: {
// Possible Errors
// 禁止条件表达式中出现赋值操作符
'no-cond-assign': 2,
// 可以使用console
'no-console': 0,
// 正则可以使用控制字符
'no-control-regex': 0,
// 开发可以使用debugger
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
// 禁止 function 定义中出现重名参数
'no-dupe-args': 2,
// 禁止对象字面量中出现重复的 key
'no-dupe-keys': 2,
// 禁止出现重复的 case 标签
'no-duplicate-case': 2,
// 禁止在正则表达式中使用空字符集
'no-empty-character-class': 2,
// 禁止对 catch 子句的参数重新赋值
'no-ex-assign': 2,
// 禁止不必要的布尔转换
'no-extra-boolean-cast': 2,
// 禁止函数周围不必要的括号
'no-extra-parens': [2, 'functions'],
// 禁止不必要的分号
'no-extra-semi': 2,
// 禁止对 function 声明重新赋值
'no-func-assign': 2,
// 禁止在嵌套的块中出现 function 声明
'no-inner-declarations': [2, 'functions'],
// 禁止 RegExp 构造函数中存在无效的正则表达式字符串
'no-invalid-regexp': 2,
// 禁止在字符串和注释之外不规则的空白
'no-irregular-whitespace': 2,
// 禁止把全局对象作为函数调用
'no-obj-calls': 2,
// 禁止正则表达式字面量中出现多个空格
'no-regex-spaces': 2,
// 禁止使用稀疏数组,也就是逗号之前没有任何元素的数组
'no-sparse-arrays': 2,
// 禁止出现令人困惑的多行表达式
'no-unexpected-multiline': 2,
// 禁止在return、throw、continue 和 break 语句之后出现不可达代码
'no-unreachable': 2,
// 禁止在 finally 语句块中出现控制流语句
'no-unsafe-finally': 2,
// 要求使用 isNaN() 检查 NaN
'use-isnan': 2,
// 强制 typeof 表达式与有效的字符串进行比较
'valid-typeof': 2,
// Best Practices
// 强制 getter 和 setter 在对象中成对出现
'accessor-pairs': 2,
// if、else if、else、for、while 和 do允许在单行中省略大括号,在其他使用中依然会强制使用大括号
'curly': [2, 'multi-line'],
// 点号操作符应该和属性在同一行
'dot-location': [2, 'property'],
// 可不使用 === 和 !==
'eqeqeq': 0,
// 禁用 arguments.caller 或 arguments.callee
'no-caller': 2,
// 禁止使用空解构模式
'no-empty-pattern': 2,
// 禁用 eval()
'no-eval': 2,
// 禁止扩展原生类型
'no-extend-native': 2,
// 禁止不必要的 .bind() 调用
'no-extra-bind': 2,
// 禁止 case 语句落空
'no-fallthrough': 2,
// 禁止数字字面量中使用前导和末尾小数点:.5 2. => 0.5 2.0
'no-floating-decimal': 2,
// 禁用隐式的eval()
'no-implied-eval': 2,
// 禁用 __iterator__ 属性
'no-iterator': 2,
// 禁用标签语句
'no-labels': [2, {
'allowLoop': false,
'allowSwitch': false
}],
// 禁用不必要的嵌套块
'no-lone-blocks': 2,
// 禁止使用多个空格
'no-multi-spaces': 2,
// 禁止使用多行字符串
'no-multi-str': 2,
// 禁止对 String,Number 和 Boolean 使用 new 操作符
'no-new-wrappers': 2,
// 禁用八进制字面量
'no-octal': 2,
// 禁止在字符串中使用八进制转义序列
'no-octal-escape': 2,
// 禁用 __proto__ 属性
'no-proto': 2,
// 禁止多次声明同一变量
'no-redeclare': 2,
// 禁止出现赋值语句,除非使用括号把它们括起来
'no-return-assign': [2, 'except-parens'],
// 禁止自我赋值
'no-self-assign': 2,
// 禁止自身比较
'no-self-compare': 2,
// 禁用逗号操作符
'no-sequences': 2,
// 禁止抛出异常字面量
'no-throw-literal': 2,
// 禁用一成不变的循环条件
'no-unmodified-loop-condition': 2,
// 禁止不必要的 .call() 和 .apply()
'no-useless-call': 2,
// 转义字符
'no-useless-escape': 0,
// 禁用 with 语句
'no-with': 2,
// 要求 IIFE 使用括号括起来
'wrap-iife': [2, 'any'],
// 禁止 “Yoda” 条件
'yoda': [2, 'never'],
// Variables
// 禁止删除变量
'no-delete-var': 2,
// 不允许标签与变量同名
'no-label-var': 2,
// 禁止将标识符定义为受限的名字
'no-shadow-restricted-names': 2,
// 禁用未声明的变量,除非它们在 /*global */ 注释中被提到
'no-undef': 2,
// 禁止将变量初始化为 undefined
'no-undef-init': 2,
// 禁止出现未使用过的变量
'no-unused-vars': [2, { 'vars': 'all', 'args': 'none' }],
// Node.js and Common.js
// node回调函数必须对error处理
'handle-callback-err': [2, '^(err|error)$'],
// 禁止调用 require 时使用 new 操作符
'no-new-require': 2,
// 禁止对 __dirname 和 __filename 进行字符串连接
'no-path-concat': 2,
// Stylistic Issues 风格规范
// 数组:[]前后不带空格
'array-bracket-spacing': [2, 'never'],
// 代码块{}:在一行时前后要有空格
'block-spacing': [2, 'always'],
// 大括号风格要求:与函数名/if/else一行
'brace-style': [2, '1tbs', { allowSingleLine: true }],
// 驼峰:不强制
'camelcase': [0],
// 禁止拖尾逗号:[1,2,]
'comma-dangle': [2, 'never'],
// 逗号前后空格:禁止前,后必须
'comma-spacing': [2, { 'before': false, 'after': true }],
// 逗号必须在末尾
'comma-style': [2, 'last'],
// 缩进:2个空格
'indent': [2, 2, { SwitchCase: 1 }],
// jsx属性使用单引号
'jsx-quotes': [2, 'prefer-single'],
// key: value间空格,禁止前,后必须
'key-spacing': [2, { 'beforeColon': false, 'afterColon': true }],
// 构造函数首字母大写
'new-cap': [2, { 'newIsCap': true, 'capIsNew': false }],
// 无参构造函数调用必须括号
'new-parens': 2,
// Array构造函数只能1个参数
'no-array-constructor': 2,
// 禁止空格和tab混合缩进
'no-mixed-spaces-and-tabs': 2,
// 禁止多行空行
'no-multiple-empty-lines': [2, { 'max': 1 }],
// 禁止new Object()
'no-new-object': 2,
// 禁止行尾空白
'no-trailing-spaces': 2,
// 禁止简单的三元运算符:x ? x : 1 => x || 1
'no-unneeded-ternary': [2, { 'defaultAssignment': false }],
// 禁止属性前有空格
'no-whitespace-before-property': 2,
// 对象中空格
'object-curly-spacing': [2, 'always', { objectsInObjects: false }],
// 变量声明,有初始值的必须分开var
'one-var': [2, { 'initialized': 'never' }],
// 操作符换行
'operator-linebreak': [2, 'after', { 'overrides': { '?': 'before', ':': 'before' }}],
// 禁止代码块开始结尾空行
'padded-blocks': [2, 'never'],
// 字符串用单引号
'quotes': [2, 'single', { 'avoidEscape': true, 'allowTemplateLiterals': true }],
// 末尾分号不限制
'semi': [0],
// 分号禁止空格,后必须
'semi-spacing': [2, { 'before': false, 'after': true }],
// {前必须有空格
'space-before-blocks': [2, 'always'],
// 禁止函数()前有空格
'space-before-function-paren': [2, 'never'],
// 禁止()内空格:( 1 + 2 ) => (1 + 2)
'space-in-parens': [2, 'never'],
// 操作符周围必须有空格
'space-infix-ops': 2,
// word类一元操作符前/后必须有空格(new、delete、typeof...)
'space-unary-ops': [2, { 'words': true, 'nonwords': false }],
// 注释后至少一个空格
'spaced-comment': [2, 'always', {
'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
}],
// ECMAScript 6
// 箭头函数箭头前后必须空格
'arrow-spacing': [2, { before: true, after: true }],
// class构造函数必须中super()
'constructor-super': 2,
// 禁止修改类声明的变量
'no-class-assign': 2,
// 禁止修改const
'no-const-assign': 2,
// class中禁止重复名称
'no-dupe-class-members': 2,
// class中super之前调用this
'no-this-before-super': 2,
// 禁止对象中不必要的计算属性:{ ['1']: 1 } => { 1: 1 }
'no-useless-computed-key': 2,
// 禁止class中不必要的构造函数
'no-useless-constructor': 2,
// 禁止模板字符串中空格:`hello, ${ name }` => `hello, ${name}`
'template-curly-spacing': [2, 'never'],
// Deprecated
// 不允许修改只读全局变量
'no-native-reassign': 2,
'no-negated-in-lhs': 2,
'no-spaced-func': 2,
'no-unused-vars': 0,
'no-redeclare': 0,
'no-redeclare': 0,
'indent': 0,
'no-trailing-spaces': 0,
'quotes': 0,
'padded-blocks': 0,
'space-before-function-paren': 0,
'space-before-blocks': 0,
'curly': 0,
'null': 0,
'no-redeclare': 0,
'comma-dangle': 0,
'object-curly-spacing': 0,
'no-multiple-empty-lines': 0,
'no-dupe-keys': 0,
'comma-spacing': 0,
'no-undef': 0,
'space-infix-ops': 0,
'space-in-parens': 0,
'no-whitespace-before-property': 0,
'template-curly-spacing': 0,
'key-spacing': 0,
'null': 0,
'no-multi-spaces': 0,
'no-inner-declarations': 0,
'block-spacing': 0,
'semi-spacing': 0,
'yoda': 0,
'no-sequences': 0,
'no-return-assign': 0,
'one-var': 0,
'new-cap': 0,
'no-empty': 0,
'new-parens': 0,
'wrap-iife': 0,
'brace-style': 0,
'no-useless-call': 0,
'no-floating-decimal': 0,
'space-unary-ops': 0,
'spaced-comment': 0,
'no-proto': 0,
'no-self-compare': 0,
'no-cond-assign': 0,
'no-unmodified-loop-condition': 0,
'no-fallthrough': 0,
}
}
+8
View File
@@ -0,0 +1,8 @@
.DS_Store
node_modules
npm-debug.log
.idea
.zip
dev
dist
.history
+45
View File
@@ -0,0 +1,45 @@
{
"ftp": {
"host": "xx.xx.xx.xx",
"port": "8021",
"user": "tmt",
"pass": "password",
"remotePath": "remotePath",
"includeHtml": true
//ftp 上传是否包含 html
},
"sftp": {
"host": "xx.xx.xx.xx",
"port": "xx",
"user": "tmt",
"password": "password",
"remotePath": "",
"includeHtml": true
},
"livereload": {
"available": true,
//开启自动刷新
"port": 8080,
"startPath": "html/TmTIndex.html"
},
//路径相对于 tasks/plugins 目录
"plugins": {
"build_devAfter": [
"TmTIndex"
],
"build_distAfter": [],
"ftpAfter": [
"ftp"
]
},
"lazyDir": [
"../slice"
],
//gulp-lazyImageCSS 寻找目录(https://github.com/weixin/gulp-lazyimagecss)
"supportWebp": false,
"supportREM": false,
"supportChanged": false,
"reversion": true,
"SVGGracefulDegradation": true
}
+25
View File
@@ -0,0 +1,25 @@
language: node_js
cache:
yarn: true
directories:
- node_modules
matrix:
include:
- node_js: "10"
- node_js: "9"
os: osx
- node_js: "8"
os: osx
- node_js: "7"
os: linux
- node_js: "6"
os: linux
- node_js: "5"
os: linux
before_script:
- npm install -g gulp
- cd project
script: gulp build_dist
+14
View File
@@ -0,0 +1,14 @@
Tencent is pleased to support the open source community by making tmt-workflow available.
Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
If you have downloaded a copy of the tmt-workflow binary from Tencent, please note that the tmt-workflow binary is licensed under the MIT License.
If you have downloaded a copy of the tmt-workflow source code from Tencent, please note that tmt-workflow source code is licensed under the MIT License. Your integration of tmt-workflow into your own projects may require compliance with the MIT License.
A copy of the MIT License is included in this file.
Terms of the MIT License:
--------------------------------------------------------------------
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+35
View File
@@ -0,0 +1,35 @@
# workflow
基于[tmt-workflow](https://github.com/Tencent/tmt-workflow)定制的工作流
# 创建活动流程
### 1、首次使用需要==>>全局安装脚手架环境
```
npm install -g yo generator-wj-activity gulp-cli
```
### 2、进入活动目录
```
cd act_project
```
### 3、初始化
```
npm install
```
### 4、命令行开始创建
```
yo wj-activity
```
### 5、以上命令复制粘贴即可,执行后回车。建议使用淘宝镜像cnpm安装较快
```
完成创建后,进入创建的活动目录执行以下命令行即可~
```
### 开发运行
```
gulp build_dev
```
### 打包发布
```
gulp build_dist
```
+457
View File
@@ -0,0 +1,457 @@
var fs = require('fs');
var path = require('path');
var del = require('del');
var ejs = require('gulp-ejs');
var less = require('gulp-less');
var util = require('./lib/util');
var gulpif = require('gulp-if');
var ejshelper = require('tmt-ejs-helper');
var bs = require('browser-sync').create(); // 自动刷新浏览器
var lazyImageCSS = require('gulp-lazyimagecss'); // 自动为图片样式添加 宽/高/background-size 属性
var postcss = require('gulp-postcss'); // CSS 预处理
var posthtml = require('gulp-posthtml'); // HTML 预处理
var sass = require('gulp-sass');
var webpack = require('webpack-stream');
var babel = require('gulp-babel');
var eslint = require('gulp-eslint');
var parseSVG = require('./common/parseSVG');
var svgSymbol = require('gulp-svg-sprite');
var rename = require('gulp-rename');
var proxy = require('http-proxy-middleware'); // 转发请求
var webpackConfigPath = path.join(process.cwd(), 'webpack.config.js');
var webpackConfig; // webpack 配置
var jsPath = path.join(process.cwd(), 'src', 'js');
if (util.dirExist(jsPath) && util.fileExist(webpackConfigPath)) {
webpackConfig = require(webpackConfigPath);
webpackConfig.output.publicPath = path.join('..', 'js/');
}
// 周玉杰加的,如果代码怕不起来可以删除 开始
var postcssPxtorem = require('postcss-pxtorem'); // 转换 px 为 rem
var postcssAutoprefixer = require('autoprefixer');
var svgInline = require('gulp-svg-inline');
// 周玉杰加的,如果代码怕不起来可以删除 结束
module.exports = function(gulp, config) {
// var targetDir = '../../activity/' + config.projectName + '/';
var paths = {
src: {
dir: './',
img: './img/**/*.{JPG,jpg,png,gif,svg}',
slice: './slice/**/*.png',
js: './js/**/*.js',
media: './media/**/*',
less: './css/*.less',
lessAll: './css/**/*.less',
sass: './css/*.scss',
sassAll: './css/**/*.scss',
html: ['./**/*.html', '!./_*/**.html', '!./_*/**/**.html', '!./html_tpl/**/*.html'],
svg: './svg/**/*.svg',
htmlAll: './**/*.html',
exclude: '!./dev/**/*'
},
dev: {
dir: './dev',
css: './dev/css',
html: './dev',
js: './dev/js',
symboltemp: './dev/symboltemp/',
symbol: './dev/symbolsvg'
}
// dev: {
// dir: targetDir,
// css: targetDir + 'css',
// html: targetDir,
// js: targetDir + 'js',
// symboltemp: targetDir + 'symboltemp/',
// symbol: targetDir + 'symbolsvg'
// }
};
// 周玉杰加的,如果代码怕不起来可以删除 开始
var postcssOption = [];
if (config.supportREM) { // 这个要在 .tmtworkflowrc 里面设置为true 如果要用px 要改为 Px 或者 PX 大写
postcssOption = [
postcssAutoprefixer(),
postcssPxtorem({
root_value: '75', // 基准值 html{ font-zise: 20px; }
prop_white_list: [], // 对所有 px 值生效
minPixelValue: 0 // 忽略 1px 值
}),
]
} else {
postcssOption = [
postcssAutoprefixer()
]
}
// 周玉杰加的,如果代码怕不起来可以删除 结束
var lazyDir = config.lazyDir || ['../slice', '../svg'];
// 复制操作
var copyHandler = function(type, file) {
file = file || paths['src'][type];
return gulp.src(file, { base: paths.src.dir })
.pipe(gulp.dest(paths.dev.dir))
.on('end', reloadHandler);
};
// 自动刷新
var reloadHandler = function() {
config.livereload && bs.reload();
};
// 清除目标目录
function delDev() {
return del([paths.dev.dir], {
force: true
});
}
// 复制操作 start
function copyImg() {
return copyHandler('img');
}
function copySlice() {
return copyHandler('slice');
}
function copySvg() {
return copyHandler('svg');
}
function copyMedia() {
return copyHandler('media');
}
// 复制操作 end
// 编译 less
function compileLess() {
return gulp.src(paths.src.less)
.pipe(less({ relativeUrls: true }))
.on('error', function(error) {
console.log(error.message);
})
.pipe(lazyImageCSS({ SVGGracefulDegradation: false, imagePath: lazyDir }))
.pipe(gulp.dest(paths.dev.css))
.on('data', function() {
})
.on('end', reloadHandler)
}
// 编译 sass
function compileSass() {
return gulp.src(paths.src.sass)
.pipe(sass())
.on('error', sass.logError)
.pipe(lazyImageCSS({ SVGGracefulDegradation: false, imagePath: lazyDir }))
.pipe(gulp.dest(paths.dev.css))
.on('data', function() {
})
.on('end', reloadHandler)
}
// 周玉杰加的,如果代码怕不起来可以删除 开始
// 自动补全
function compileAutoprefixer() {
return gulp.src(paths.dev.css + '/**/*.css')
.pipe(svgInline({
maxImageSize: 10 * 1024 * 1024,
extensions: [/.svg/ig]
}))
.pipe(postcss(postcssOption))
.pipe(gulp.dest(paths.dev.css));
}
// 周玉杰加的,如果代码怕不起来可以删除 结束
// 编译 html
function compileHtml() {
return gulp.src(paths.src.html)
.pipe(ejs(ejshelper()).on('error', function(error) {
console.log(error.message);
}))
.pipe(parseSVG({ devPath: paths.dev.dir }))
.pipe(gulp.dest(paths.dev.html))
.on('data', function() {
})
.on('end', reloadHandler)
}
// 编译 JS
function compileJs() {
var condition = !!webpackConfig;
return gulp.src(paths.src.js)
.pipe(eslint())
.pipe(eslint.format('../node_modules/eslint-friendly-formatter'))
.pipe(gulpif(
condition,
webpack(webpackConfig),
babel({
presets: ['es2015', 'stage-2']
})
))
.pipe(gulp.dest(paths.dev.js))
.on('end', reloadHandler)
}
// 启动 livereload
function startServer() {
var apiProxy = proxy('/api', {
target: config.livereload.proxyTarget,
changeOrigin: true,
// pathRewrite: {
// '^/api': ''
// }
});
bs.init({
server: {
baseDir: paths.dev.dir,
middleware: [apiProxy],
routes: {
'/common': '../../common'
}
},
port: config['livereload']['port'] || 8080,
startPath: config['livereload']['startPath'] || '/index.html',
reloadDelay: 0,
notify: { // 自定制livereload 提醒条
styles: [
'margin: 0',
'padding: 5px',
'position: fixed',
'font-size: 10px',
'z-index: 9999',
'bottom: 0px',
'right: 0px',
'border-radius: 0',
'border-top-left-radius: 5px',
'background-color: rgba(60,197,31,0.5)',
'color: white',
'text-align: center'
]
}
});
}
var watchHandler = function(type, file) {
var target = file.match(/(.*?)[\/|\\]/);
target = target ? target[1] : 'html';
switch (target) {
case 'img':
if (type === 'removed') {
// var tmp = file.replace(/src/, 'dev');
var tmp = paths.dev.dir + file;
del([tmp], {
force: true
});
} else {
copyHandler('img', file);
compileHtml();
}
break;
case 'svg':
if (type === 'removed') {
// var tmp = file.replace(/src/, 'dev');
var tmp = paths.dev.dir + file;
del([tmp], {
force: true
});
} else {
copyHandler('svg', file);
compileLess();
compileHtml();
setTimeout(function() {
svgSymbols();
setTimeout(function() {
reloadHandler();
}, 300)
}, 300)
}
break;
case 'slice':
if (type === 'removed') {
// var tmp = file.replace('src', 'dev');
var tmp = paths.dev.dir + file;
del([tmp], {
force: true
});
} else {
copyHandler('slice', file);
}
break;
case 'js':
if (type === 'removed') {
// var tmp = file.replace('src', 'dev');
var tmp = paths.dev.dir + file;
del([tmp], {
force: true
});
} else {
compileJs();
}
break;
case 'media':
if (type === 'removed') {
// var tmp = file.replace('src', 'dev');
var tmp = paths.dev.dir + file;
del([tmp], {
force: true
});
} else {
copyHandler('media', file);
}
break;
case 'css':
var ext = path.extname(file);
if (type === 'removed') {
// var tmp = file.replace('src', 'dev').replace(ext, '.css');
var tmp = paths.dev.dir + file;
tmp = tmp.replace(ext, '.css');
del([tmp], {
force: true
});
} else {
if (ext === '.less') {
compileLess();
} else {
compileSass();
}
// 周玉杰加的,如果代码怕不起来可以删除 开始
if (config.supportREM) {
setTimeout(function () {
compileAutoprefixer()
}, 650)
}
// 周玉杰加的,如果代码怕不起来可以删除 结束
}
break;
case 'html_tpl':
case 'html':
if (type === 'removed') {
// var tmp = file.replace('src', 'dev');
var tmp = paths.dev.dir + file;
del([tmp], {
force: true
}).then(function() {
util.loadPlugin('build_dev');
});
} else {
compileHtml();
}
if (type === 'add') {
setTimeout(function() {
util.loadPlugin('build_dev');
}, 500);
}
break;
}
};
function svgSymbols() {
return gulp.src(paths.dev.symboltemp + '**/*.svg')
.pipe(svgSymbol({
mode: {
inline: true,
symbol: true
},
shape: {
id: {
generator: function(id) {
var ids = id.replace(/.svg/ig, '');
return ids;
}
}
}
}))
.pipe(rename(function(path) {
path.dirname = './';
path.basename = 'symbol';
}))
.pipe(gulp.dest(paths.dev.symbol))
}
// 监听文件
function watch(cb) {
var watcher = gulp.watch([
paths.src.img,
paths.src.svg,
paths.src.slice,
paths.src.js,
paths.src.media,
paths.src.lessAll,
paths.src.sassAll,
paths.src.htmlAll,
paths.src.exclude
],
{ ignored: /[\/\\]\./ }
);
watcher
.on('change', function(file) {
util.log(file + ' has been changed');
watchHandler('changed', file);
})
.on('add', function(file) {
util.log(file + ' has been added');
watchHandler('add', file);
})
.on('unlink', function(file) {
util.log(file + ' is deleted');
watchHandler('removed', file);
});
cb();
}
// 加载插件
function loadPlugin(cb) {
util.loadPlugin('build_dev');
cb();
}
// 注册 build_dev 任务
gulp.task('build_dev', gulp.series(
delDev,
gulp.parallel(
copyImg,
copySlice,
compileJs,
copySvg,
// copyJs,
copyMedia,
compileLess,
compileSass
),
// 周玉杰加的,如果代码怕不起来可以删除 开始
...(config.supportREM ? [compileAutoprefixer] : []),
// 周玉杰加的,如果代码怕不起来可以删除 结束
compileHtml,
svgSymbols,
gulp.parallel(
watch,
loadPlugin
),
startServer
));
gulp.task('test', gulp.series(delDev));
};
+469
View File
@@ -0,0 +1,469 @@
var _ = require('lodash');
var fs = require('fs');
var del = require('del');
var path = require('path');
var ejs = require('gulp-ejs');
var gulpif = require('gulp-if');
var less = require('gulp-less');
var util = require('./lib/util');
var uglify = require('gulp-uglify');
var usemin = require('gulp-usemin');
var lazyImageCSS = require('gulp-lazyimagecss'); // 自动为图片样式添加 宽/高/background-size 属性
var minifyCSS = require('gulp-cssnano');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');
var tmtsprite = require('gulp-tmtsprite'); // 雪碧图合并
var ejshelper = require('tmt-ejs-helper');
var postcss = require('gulp-postcss'); // CSS 预处理
var postcssPxtorem = require('postcss-pxtorem'); // 转换 px 为 rem
var postcssAutoprefixer = require('autoprefixer');
var posthtml = require('gulp-posthtml');
var posthtmlPx2rem = require('posthtml-px2rem');;
var RevAll = require('gulp-rev-all'); // reversion
var revDel = require('gulp-rev-delete-original');
var sass = require('gulp-sass');
var changed = require('./common/changed')();
var webpack = require('webpack-stream');
var babel = require('gulp-babel');
var eslint = require('gulp-eslint');
//svg转换用到的组件
var fs = require('fs');
var rename = require('gulp-rename');
var svgmin = require('gulp-svgmin');
var svgInline = require('gulp-svg-inline');
var replace = require('gulp-replace');
var parseSVG = require('./common/parseSVG');
var svgToPng = require('./common/svgToPng');
var svgSymbol = require('gulp-svg-sprite');
var webpackConfigPath = path.join(process.cwd(), 'webpack.config.js');
var webpackConfig; // webpack 配置
var jsPath = path.join(process.cwd(), 'src', 'js');
if (util.dirExist(jsPath) && util.fileExist(webpackConfigPath)) {
webpackConfig = require(webpackConfigPath);
}
module.exports = function (gulp, config) {
process.env.NODE_ENV = 'production';
var targetDir = '../../activity/' + config.projectName + '/';
var paths = {
src: {
dir: './',
img: './img/**/*.{JPG,jpg,png,gif,svg}',
slice: './slice/**/*.png',
js: './js/**/*.js',
media: './media/**/*',
less: './css/**/*.less',
sass: './css/**/*.scss',
html: ['./**/*.html', '!./_*/**.html', '!./html_tpl/**/*.html'],
htmlAll: './**/*.html',
php: './**/*.php',
svg: './svg/**/*.svg'
},
tmp: {
dir: './tmp',
css: './tmp/css',
img: './tmp/img',
html: './tmp',
sprite: './tmp/sprite',
js: './tmp/js',
svg: './tmp/svg',
symboltemp: './tmp/symboltemp/',
symbol: './tmp/symbolsvg'
},
dist: {
dir: targetDir,
css: targetDir + 'css',
img: targetDir + 'img',
svg: targetDir + 'svg',
html: targetDir,
sprite: targetDir + 'sprite'
}
};
var webp = require('./common/webp')(config);
var lazyDir = config.lazyDir || ['../slice', '../svg'];
var postcssOption = [];
if (config.supportREM) {
postcssOption = [
postcssAutoprefixer(),
// 周玉杰加的如果不行可删除 开始
postcssPxtorem({
root_value: '75', // 基准值 html{ font-zise: 20px; }
prop_white_list: [], // 对所有 px 值生效
minPixelValue: 0 // 忽略 1px 值
})
// 周玉杰加的如果不行可删除 结束
// 如果删除了上面的 就要解开注释
// postcssPxtorem({
// root_value: '20', // 基准值 html{ font-zise: 20px; }
// prop_white_list: [], // 对所有 px 值生效
// minPixelValue: 2 // 忽略 1px 值
// })
]
} else {
postcssOption = [
postcssAutoprefixer()
]
}
// 清除 dev 目录
function delDev() {
return del('./dev', {
force: true
});
}
// 清除 dist 目录
function delDist() {
return del([paths.dist.dir], {
force: true
});
}
// 清除 tmp 目录
function delTmp() {
return del([paths.tmp.dir]);
}
function delSVG() {
return del([paths.tmp.symboltemp]);
}
//编译 less
function compileLess() {
return gulp.src(paths.src.less)
.pipe(less({relativeUrls: true}))
.pipe(lazyImageCSS({SVGGracefulDegradation: config.SVGGracefulDegradation, imagePath: lazyDir}))
.pipe(tmtsprite({margin: 4}))
.pipe(gulpif('*.png', gulp.dest(paths.tmp.sprite), gulp.dest(paths.tmp.css)));
}
//编译 less
function compileSass() {
return gulp.src(paths.src.sass)
.pipe(sass())
.on('error', sass.logError)
.pipe(lazyImageCSS({SVGGracefulDegradation: config.SVGGracefulDegradation, imagePath: lazyDir}))
.pipe(tmtsprite({margin: 4}))
.pipe(gulpif('*.png', gulp.dest(paths.tmp.sprite), gulp.dest(paths.tmp.css)));
}
//自动补全
function compileAutoprefixer() {
// return gulp.src('./tmp/css/style-*.css')
return gulp.src(paths.tmp.css + '/**/*.css')
.pipe(svgInline({
maxImageSize: 10 * 1024 * 1024,
extensions: [/.svg/ig],
}))
.pipe(postcss(postcssOption))
.pipe(gulp.dest(paths.tmp.css));
}
//CSS 压缩
function miniCSS() {
// return gulp.src('./tmp/css/style-*.css')
return gulp.src(paths.tmp.css + '/**/*.css')
.pipe(minifyCSS({
safe: true,
reduceTransforms: false,
advanced: false,
compatibility: 'ie7',
keepSpecialComments: 0
}))
.pipe(gulp.dest(paths.tmp.css));
}
//图片压缩
function imageminImg() {
return gulp.src(paths.src.img)
.pipe(imagemin({
use: [pngquant()]
}))
.pipe(gulp.dest(paths.tmp.img));
}
//复制媒体文件
function copyMedia() {
return gulp.src(paths.src.media, {base: paths.src.dir}).pipe(gulp.dest(paths.tmp.dir));
}
//编译 JS
function compileJs() {
var condition = webpackConfig ? true : false;
return gulp.src(paths.src.js)
.pipe(eslint())
.pipe(eslint.format('../node_modules/eslint-friendly-formatter'))
.pipe(eslint.failAfterError())
.pipe(gulpif(
condition,
webpack(webpackConfig),
babel({
presets: ['es2015', 'stage-2']
})
))
.pipe(uglify())
.pipe(gulp.dest(paths.tmp.js));
}
//雪碧图压缩
function imageminSprite() {
// return gulp.src('./tmp/sprite/**/*')
return gulp.src(paths.tmp.sprite + '/**/*')
.pipe(imagemin({
use: [pngquant()]
}))
.pipe(gulp.dest(paths.tmp.sprite));
}
//html 编译
function compileHtml() {
return gulp.src(paths.src.html)
.pipe(ejs(ejshelper()))
.pipe(gulpif(
config.supportREM,
posthtml(
posthtmlPx2rem({
rootValue: 20,
minPixelValue: 2
})
))
)
.pipe(parseSVG({devPath: 'tmp', SVGGracefulDegradation: config.SVGGracefulDegradation}))
.pipe(gulp.dest(paths.tmp.html))
.pipe(usemin())
.pipe(gulp.dest(paths.tmp.html));
}
//webp 编译
function supportWebp() {
if (config['supportWebp']) {
return webp();
} else {
return function noWebp(cb) {
cb();
}
}
}
//新文件名(md5)
function reversion(cb) {
var RevOptions = {
fileNameManifest: 'manifest.json',
dontRenameFile: ['.html', '.php'],
dontUpdateReference: ['.html'],
includeFilesInManifest: ['.css', '.js', '.html', 'htm'],
transformFilename: function (file, hash) {
var ext = path.extname(file.path);
// if(ext === '.html'){
// return path.basename(file.path, ext) + ext;
// }
return path.basename(file.path, ext) + '.' + hash.substr(0, 8) + ext;
}
};
if (config['reversion']) {
// return gulp.src(['./tmp/**/*'])
return gulp.src([paths.tmp.dir + '/**/*'])
.pipe(RevAll.revision(RevOptions))
.pipe(gulp.dest(paths.tmp.dir))
.pipe(revDel({
exclude: /(.html|.htm)$/
}))
// .pipe(RevAll.manifestFile())
.pipe(gulp.dest(paths.tmp.dir));
} else {
cb();
}
}
function miniSVG() {
if (config.SVGGracefulDegradation) {
return gulp.src(paths.src.svg)
.pipe(svgmin({
plugins: [{
convertPathData: true
}, {
removeTitle: true
}, {
mergePaths: false
}, {
removeUnknownsAndDefaults: false
}, {
removeDoctype: true
}, {
removeComments: true
}, {
cleanupNumericValues: {
floatPrecision: 2
}
}, {
convertColors: {
names2hex: true,
rgb2hex: true
}
}]
}))
.pipe(svgToPng())
.pipe(gulp.dest(paths.tmp.svg));
} else {
return gulp.src(paths.src.svg)
.pipe(svgmin({
plugins: [{
convertPathData: true
}, {
removeTitle: true
}, {
mergePaths: false
}, {
removeUnknownsAndDefaults: false
}, {
removeDoctype: true
}, {
removeComments: true
}, {
cleanupNumericValues: {
floatPrecision: 2
}
}, {
convertColors: {
names2hex: true,
rgb2hex: true
}
}]
}))
.pipe(gulp.dest(paths.tmp.svg));
}
}
function svgSymbols() {
return gulp.src(paths.tmp.symboltemp + '**/*.svg')
.pipe(svgSymbol({
mode: {
inline: true,
symbol: true
},
shape: {
id: {
generator: function (id) {
var ids = id.replace(/.svg/ig, '');
return ids;
}
}
}
}))
.pipe(rename(function (path) {
path.dirname = './';
path.basename = 'symbol';
}))
.pipe(gulp.dest(paths.tmp.symbol));
}
function findChanged(cb) {
if (!config['supportChanged']) {
return gulp.src('./tmp/**/*', {base: paths.tmp.dir})
.pipe(gulp.dest(paths.dist.dir))
.on('end', function () {
delTmp();
})
} else {
var diff = changed('./tmp');
var tmpSrc = [];
if (!_.isEmpty(diff)) {
//如果有reversion
if (config['reversion'] && config['reversion']['available']) {
var keys = _.keys(diff);
//先取得 reversion 生成的manifest.json
var reversionManifest = require(path.resolve('./tmp/manifest.json'));
if (reversionManifest) {
reversionManifest = _.invert(reversionManifest);
reversionManifest = _.pick(reversionManifest, keys);
reversionManifest = _.invert(reversionManifest);
_.forEach(reversionManifest, function (item, index) {
tmpSrc.push('./tmp/' + item);
console.log('[changed:] ' + util.colors.blue(index));
});
//将新的 manifest.json 保存
fs.writeFileSync('./tmp/manifest.json', JSON.stringify(reversionManifest));
tmpSrc.push('./tmp/manifest.json');
}
} else {
_.forEach(diff, function (item, index) {
tmpSrc.push('./tmp/' + index);
console.log('[changed:] ' + util.colors.blue(index));
});
}
return gulp.src(tmpSrc, {base: paths.tmp.dir})
.pipe(gulp.dest(paths.dist.dir))
.on('end', function () {
delTmp();
})
} else {
console.log('Nothing changed!');
delTmp();
cb();
}
}
}
//加载插件
function loadPlugin(cb) {
util.loadPlugin('build_dist');
cb();
}
//注册 build_dist 任务
gulp.task('build_dist', gulp.series(
gulp.parallel(
delDist,
delDev
),
gulp.parallel(
compileLess,
compileSass,
imageminImg,
copyMedia,
compileJs,
miniSVG
),
compileAutoprefixer,
imageminSprite,
miniCSS,
compileHtml,
svgSymbols,
reversion,
supportWebp(),
delSVG,
findChanged,
loadPlugin
));
};
+38
View File
@@ -0,0 +1,38 @@
var _ = require('lodash');
var del = require('del');
var path = require('path');
var ftp = require('gulp-ftp');
var util = require('./lib/util');
module.exports = function (gulp, config) {
//清除目标目录
function delDist() {
return del(['./dist']);
}
function remoteFtp() {
var remotePath = config['ftp']['remotePath'] || "",
ftpConfig = _.extend(config['ftp'], {
remotePath: path.join(remotePath, config['projectName'])
}),
distPath = config['ftp']['includeHtml'] ? './dist/**/*' : ['./dist/**/*', '!./dist/html/**/*.html'];
return gulp.src(distPath, {base: '.'})
.pipe(ftp(ftpConfig));
}
//加载插件
function loadPlugin(cb) {
util.loadPlugin('ftp');
cb();
}
//注册 ftp 任务
gulp.task('ftp', gulp.series(
'build_dist',
remoteFtp,
delDist,
loadPlugin
));
};
+38
View File
@@ -0,0 +1,38 @@
var _ = require('lodash');
var path = require('path');
var del = require('del');
var util = require('./lib/util');
var sftp = require('gulp-sftp');
module.exports = function (gulp, config) {
//清除目标目录
function delDist() {
return del(['./dist']);
}
function remoteSftp() {
var remotePath = config['sftp']['remotePath'] || '',
sftpConfig = _.extend(config['sftp'], {
remotePath: path.join(remotePath, config['projectName'])
}),
distPath = config['ftp']['includeHtml'] ? './dist/**/*' : ['./dist/**/*', '!./dist/html/**/*.html'];
return gulp.src(distPath, {base: '.'})
.pipe(sftp(sftpConfig))
}
//加载插件
function loadPlugin(cb) {
util.loadPlugin('Res');
cb();
}
//注册 Res 任务
gulp.task('sftp', gulp.series(
'build_dist',
remoteSftp,
delDist,
loadPlugin
));
};
+24
View File
@@ -0,0 +1,24 @@
var util = require('./lib/util');
var del = require('del');
var zip = require('gulp-zip');
module.exports = function (gulp, config) {
//清除目标目录
function delDist() {
return del(['./dist']);
}
function zipTask(){
return gulp.src('./dist/**/*')
.pipe(zip('dist.zip'))
.pipe(gulp.dest('./'));
}
//注册 zip 任务
gulp.task('zip', gulp.series(
'build_dist',
zipTask,
delDist
));
};
+57
View File
@@ -0,0 +1,57 @@
var md5 = require('crypto-md5');
var path = require('path');
var rd = require('rd');
var fs = require('fs');
var _ = require('lodash');
function changed(dir) {
var manifestPath = path.resolve('./src/manifest.json');
var manifest = {};
var originManifest = {};
//如果存在 manifest.json, 则加载保存
if (fs.existsSync(manifestPath)) {
originManifest = require(manifestPath);
}
//遍历目录, 根据内容 md5 加密
rd.eachFileFilterSync(dir, function (file) {
var index = path.relative(dir, file);
//过滤掉 隐藏文件 和 manifest.json
if (path.extname(file) && index !== 'manifest.json' && fs.existsSync(file)) {
var data = fs.readFileSync(file);
if (data) {
manifest[index] = md5(data, 'hex');
}
}
});
//将新的 manifest.json 保存
fs.writeFile(manifestPath, JSON.stringify(manifest), function (err) {
if (err) throw err;
});
//找出有变动的文件
if(originManifest){
var diff = {};
_.forEach(manifest, function (item, index) {
if (originManifest[index] !== item) {
diff[index] = item;
}
});
}
return diff;
}
module.exports = function(){
return changed;
};
+161
View File
@@ -0,0 +1,161 @@
/**
* Created by doubleluo
*/
var gulp = require('gulp');
var replace = require('gulp-replace');
var through = require('through2');
var fs = require('fs');
var path = require('path');
var File = require('vinyl');
var util = require('../lib/util');
var cheerio = require('cheerio');
module.exports = function (options) {
var mkdirs = function(dirpath, callback) {
fs.exists(dirpath, function(exists) {
if(exists) {
callback(dirpath);
} else {
mkdirs(path.dirname(dirpath), function(){
fs.mkdir(dirpath, callback);
});
}
});
}
var mkdirone = false;
var marchRegInline = /<img.*?src=['"].*?(\w+)\.svg\?i['"].*?>/gi;
var marchRegSybmol = /<img.*?src=['"].*?(\w+)\.svg\?s['"].*?>/gi;
var marchRegBase = /<img.*?src=['"].*?(\w+)\.svg['"].*?>/gi;
var src = [],id,style,className,data,width,height,newcontent,$;
function getBase(){
id = $.attr('id');
style = $.attr('style');
className = $.attr('class');
data = fs.readFileSync(path.join(process.cwd(), options.devPath+'/img', src[0])).toString();
width = data.match(/<svg(.*?)width=["|'](.*?)(px)?["|']/)[2];
height = data.match(/<svg(.*?)height=["|'](.*?)(px)?["|']/)[2];
fileName = src[0].substr(src[0].lastIndexOf('/')+1,src[0].indexOf('.svg')-7);
newcontent = [];
}
function getAttr(){
if(id){
newcontent.push(' id="'+ id +'"');
}
if(style){
newcontent.push(' style="'+ style +'"');
}
if(className){
newcontent.push(' class="'+ className +'"');
}
}
function inline(contents){
getAttr();
data = data.replace('<svg','<svg width="'+ width +'" height="'+ height +'"'+newcontent.join(''));
if(options.SVGGracefulDegradation){
data = data.replace('>','><image width="'+ width +'" height="'+ height +'" src="'+src[0].replace('.svg','.png')+'" />');
}
return data;
}
function sybmol(contents){
var newFile = path.join(process.cwd(), options.devPath + '/symboltemp/', fileName);
fs.writeFile(newFile, data, {encoding: 'utf8'}, err => {
if (err) throw err;
});
newcontent.push('<svg width="'+ width +'" height="'+ height +'" xmlns="http://www.w3.org/2000/svg"');
getAttr();
newcontent.push('>');
if(options.SVGGracefulDegradation){
newcontent.push('<image src="'+src[0].replace('.svg','.png')+'"',' />');
}
newcontent.push('<use xlink:href="'+ ((options && options.symbolBaseUrl)||'../symbolsvg/symbol.svg')+ '#' + fileName.replace('.svg','') +'"/>');
newcontent.push('</svg>');
return newcontent.join('');
}
function base(contents){
newcontent.push('<svg width="'+ width +'" height="'+ height +'" xmlns="http://www.w3.org/2000/svg"');
getAttr();
newcontent.push('>');
if(options.SVGGracefulDegradation){
newcontent.push('<image width="'+ width +'" height="'+ height +'" src="'+src[0].replace('.svg','.png')+'" xlink:href="'+src[0]+'">');
}else{
newcontent.push('<image width="'+ width +'" height="'+ height +'" xlink:href="'+src[0]+'">');
}
newcontent.push('</svg>');
return newcontent.join('');
}
function run(regData,contents,marchReg){
if(regData){
for(var i = 0;i<regData.length;i++){
var replaceData = '';
$ = cheerio(regData[i]);
src = $.attr('src').split('?');
if(src[0].indexOf('.svg')>-1){
getBase();
if(src[1] == 'i'){
replaceData = inline(contents);
}else if(src[1] == 's'){
replaceData = sybmol(contents);
}else{
replaceData = base(contents);
}
}
contents = contents.replace(regData[i], replaceData);
}
}
return contents;
}
return through.obj(function (file, enc, cb) {
var _this = this;
if (file.isNull()) {
cb(null, file);
} else {
if (util.fileExist(file.path)) {
var contents = file.contents.toString();
var regData;
if(options.onlyInline){
regData = contents.match(marchRegInline);
contents = run(regData,contents,marchRegInline);
}else{
if(!mkdirone){
mkdirone = true;
fs.exists(process.cwd() + '/'+ options.devPath +'/symboltemp',function(exists){
if(!exists){
fs.mkdir(process.cwd() + '/'+ options.devPath +'/symboltemp', err => {
if (err) throw err;
});
}
});
}
regData = contents.match(marchRegInline);
contents = run(regData,contents,marchRegInline);
regData = contents.match(marchRegSybmol);
contents = run(regData,contents,marchRegSybmol);
regData = contents.match(marchRegBase);
contents = run(regData,contents,marchRegBase);
}
_this.push(new File({
base: file.base,
path: file.path,
contents: new Buffer(contents)
}));
cb(null);
} else {
cb(null, file);
}
}
});
}
+36
View File
@@ -0,0 +1,36 @@
/**
* Created by doubleluo on 15/5/3.
*/
var gulp = require('gulp');
var replace = require('gulp-replace');
var through = require('through2');
var fs = require('fs');
var path = require('path');
var util = require('../lib/util');
var File = require('vinyl');
var svg_to_png = require('svg-to-png');
module.exports = function (options) {
return through.obj(function (file, enc, cb) {
var _this = this;
if (file.isNull()) {
cb(null, file);
} else {
if (util.fileExist(file.path)) {
svg_to_png.convert(file.path, file.path.substr(0,file.path.lastIndexOf('/')).replace('/src/','/dist/'));
_this.push(new File({
base: file.base,
path: file.path,
contents: file.contents
}));
cb(null);
} else {
cb(null, file);
}
}
});
}
+86
View File
@@ -0,0 +1,86 @@
/**
* Created by littledu on 15/5/2.
*/
var rd = require('rd');
var gulp = require('gulp');
var path = require('path');
var gulpWebp = require('gulp-webp');
var rename = require('gulp-rename');
var replace = require('gulp-replace');
var util = require('./../lib/util');
var fs = require('fs');
module.exports = function (config, done) {
var webpScript = '<script>function webpsupport(a){var c=window.localStorage;if(typeof a!="function"){a=function(){}}if(c!=undefined&&c._tmtwebp!=undefined&&c._tmtwebp==0){a();return false}else{if(c!=undefined&&c._tmtwebp!=undefined&&c._tmtwebp==1){a(1);return true}else{var f=new Image();f.onload=f.onerror=function(){if(f.height!=2){if(c!=undefined){c._tmtwebp=0}a();return false}else{if(c!=undefined){c._tmtwebp=1}a(1);return true}};f.src="data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA"}}};;(function(){function b(t){var f=document.getElementsByTagName("link");for(var e=0,d=f.length;e<d;e++){if(t){f[e].href=f[e].getAttribute("data-href").replace(".css",".webp.css");}else{f[e].href=f[e].getAttribute("data-href")}}}webpsupport(b);})();</script></head>';
var webpMap = {}; //为了筛选webp而构建的对象
var imgArr = []; //筛选出来需要转换成 webp 的图片
var imgMap = {}; //返回给全局作 preload 判断使用{"img_name": 1, "img_name": 0} 1 为可优化成 webp
var reg = null;
function render_webp(src) {
if (!fs.existsSync(src)) return;
rd.eachFileSync(src, function (file, stats) {
var extname = path.extname(file);
var basename = path.basename(file, extname);
if (!(basename in webpMap)) {
webpMap[basename] = {};
webpMap[basename]['size'] = stats.size;
webpMap[basename]['extname'] = extname;
} else {
if ((webpMap[basename]['size'] > stats.size) && (extname === '.webp')) {
imgArr.push(basename + webpMap[basename]['extname']);
imgMap[basename + webpMap[basename]['extname']] = 1;
} else {
imgMap[basename + webpMap[basename]['extname']] = 0;
}
}
});
}
return function () {
return gulp.series(
function compileSprite() {
return gulp.src('./tmp/sprite/**/*')
.pipe(gulpWebp())
.pipe(gulp.dest('./tmp/sprite'));
},
function compileImg () {
return gulp.src('./tmp/img/**/*')
.pipe(gulpWebp())
.pipe(gulp.dest('./tmp/img'));
},
//智能寻找 webp
function find2Webp (cb) {
render_webp('./tmp/sprite');
render_webp('./tmp/img');
if(imgArr.length){
reg = eval('/(' + imgArr.join('|') + ')/ig');
}
cb();
},
function compileCss () {
return gulp.src(['./tmp/css/**/*.css', '!./tmp/css/**/*.webp.css'])
.pipe(rename({suffix: '.webp'}))
.pipe(replace(reg, function (match) {
if(match){
return match.substring(0, match.lastIndexOf('.')) + '.webp';
}
}))
.pipe(gulp.dest('./tmp/css'));
},
function insertWebpJs () {
var preload_script = '<script>window.imgMap = ' + JSON.stringify(imgMap) + '</script>';
return gulp.src('./tmp/html/**/*.html')
.pipe(replace('data-href', 'href'))
.pipe(replace(/(link.*?)href/ig, '$1data-href'))
.pipe(replace('</head>', webpScript))
.pipe(replace('</head>', preload_script))
.pipe(gulp.dest('./tmp/html'));
}
);
}
}
+17
View File
@@ -0,0 +1,17 @@
var fs = require('fs');
var path = require('path');
var config = require('rc')('tmtworkflow', {
projectName: process.cwd().split(path.sep).pop(),
livereload: {
'proxyTarget': 'http://apibeta.kawayisound.xyz'
}
});
module.exports = function(gulp) {
fs.readdirSync(__dirname).filter(function(file) {
return (file.indexOf('.') !== 0) && (file.indexOf('Task') === 0);
}).forEach(function(file) {
var registerTask = require(path.join(__dirname, file));
registerTask(gulp, config);
});
};
+73
View File
@@ -0,0 +1,73 @@
var fs = require('fs');
var path = require('path');
var util = require('gulp-util');
var config = require('rc')('tmtworkflow', {
projectName: process.cwd().split(path.sep).pop()
});
var tmt_util = {
log: function (task_name) {
util.log.apply(util, arguments);
},
task_log: function (task_name) {
this.log(util.colors.magenta(task_name), util.colors.green.bold('√'));
},
loadPlugin: function (name, cb) {
name = name + 'After';
if (config['plugins'] && config['plugins'][name] && config['plugins'][name].length) {
var plugins = config['plugins'][name];
plugins.every(function (plugin) {
if (plugin.indexOf('.js') === -1) {
plugin += '.js';
}
var filepath = path.resolve(__dirname, '../plugins', plugin);
if (fs.existsSync(filepath)) {
require(filepath)(config);
(typeof cb === 'function') && cb();
} else {
console.log('The ' + filepath + ' is not found!');
(typeof cb === 'function') && cb();
}
});
}
},
colors: util.colors,
dirExist: function (dirPath) {
try {
var stat = fs.statSync(dirPath);
if (stat.isDirectory()) {
return true;
} else {
return false;
}
} catch (err) {
if (err.code === 'ENOENT') {
return false;
} else {
throw new Error(err);
}
}
},
fileExist: function (filePath) {
try {
var stat = fs.statSync(filePath);
if (stat.isFile()) {
return true;
} else {
return false;
}
} catch (err) {
if (err.code === 'ENOENT') {
return false;
} else {
throw new Error(err);
}
}
}
};
module.exports = tmt_util;
+109
View File
@@ -0,0 +1,109 @@
/**
* Created by littledu on 15/5/16.
*/
var fs = require('fs'),
path = require('path'),
localIp = require('quick-local-ip');
module.exports = function (config) {
var html = [
'<!DOCTYPE html>',
'<head>',
'<meta charset="utf-8">',
'<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">',
'<title></title>',
'<link rel="stylesheet" href="http://wximg.gtimg.com/tmt/tools/file-list/css/style.css">',
'<style type="text/css">',
'.icon-qrcode{cursor: pointer;}@media only screen and (min-device-width : 310px) and (max-device-width : 800px){#myTable{margin: 0;max-width: 100%;}.td-header-qrcode,.td-header-time,.td-qrcode,.td-time{display:none;}.table-body,.td-header-title{font-size: 14px }}',
'</style>',
'</head>',
'<body>',
' <table id="myTable" class="table">',
' <thead class="table-head">',
' <tr>',
' <th class="td-header-title">文件名</th>',
' <th class="td-header-qrcode" style="width:40px;text-align: center;">二维码</th>',
' </tr>',
' </thead>',
' <tbody class="table-body">'
].join(''),
tmpHtml = '',
length = '/dev/html/'.length,
collector = listdir('./dev/html'),
ip = localIp.getLocalIP4();
showdir(collector, 0);
function listdir(dir) {
var collector = {
'name': dir,
'type': 'dir',
'url': '',
'child': []
};
files = fs.readdirSync(dir);
files.forEach(function (file) {
var absolutePath = dir + '/' + file,
stats = fs.statSync(absolutePath);
var url = absolutePath.substring(absolutePath.indexOf('./dev/html/') + length + 1);
if (stats.isDirectory() && (stats.isDirectory() !== '.' || stats.isDirectory() !== '..')) {
collector['child'].push(listdir(absolutePath));
} else {
collector['child'].push({
'name': path.basename(absolutePath),
'type': 'file',
'url': url
});
}
});
return collector;
}
function showdir(collector, level) {
var file = collector['name'],
basename = path.basename(file);
var indent = 25 * (level - 1);
if (indent <= 0) {
indent = 10;
}
if (collector['type'] == 'dir') {
if (level != 0) {
html += '<tr><td class="td-dir" style="text-align:left; padding-left: ' + indent + 'px">[目录]: ' + basename + '</td><td></td></tr>';
}
collector['child'].forEach(function (item) {
showdir(item, level + 1);
});
}
if (collector['type'] == 'file') {
if (path.extname(file) === '.html' && basename !== 'TmTIndex.html') {
if (level === 1) {
tmpHtml += '<tr class="level1"><td class="td-file sort-file" style="padding-left: ' + indent + 'px"><a href="' + collector['url'] + '" target="_blank">' + basename + '</a></td><td class="td-qrcode"><i class="icon-qrcode"></i></td></tr>';
} else {
html += '<tr><td class="td-file" style="padding-left: ' + indent + 'px"><a href="' + collector['url'] + '" target="_blank">' + basename + '</a></td><td class="td-qrcode"><i class="icon-qrcode"></i></td></tr>';
}
}
}
}
html = html + tmpHtml;
html += '</tbody></table><div id="qrcode"></div><script src="http://wximg.gtimg.com/tmt/tools/file-list/js/jquery-2.1.3.min.js"></script><script src="http://wximg.gtimg.com/tmt/tools/file-list/js/qrcode.min.js"></script><script type="text/javascript">$(document).ready(function(){ var url = location.href.replace("localhost", "' + ip + '");document.title= "' + config.projectName + ' 资源列表"; $(".level1").prependTo(".table-body"); $(".td-qrcode i").bind("mouseenter ",function(){$("#qrcode").show().empty();new QRCode(document.getElementById("qrcode"), encodeURI(url.split("TmTIndex.html")[0]+$(this).parent().parent().find("a").attr("href")));});$("body").bind("click",function(){$("#qrcode").hide();});});</script></body></html>';
var out = fs.createWriteStream('./dev/html/TmTIndex.html', {encoding: "utf8"});
out.write(html, function (err) {
if (err) console.log(err);
});
out.end();
}
+12
View File
@@ -0,0 +1,12 @@
/**
* Created by littledu on 15/4/28.
*/
var util = require('./../lib/util');
var path = require('path');
module.exports = function(config){
var remotePath = config['ftp']['remotePath'] || "";
var url = 'http://' + path.join(remotePath, config['projectName'], 'dist/html/').replace(/\\/g, '/');
util.log(util.colors.magenta('copy to browser:') + url);
}
+38
View File
@@ -0,0 +1,38 @@
# AppVeyor file
# http://www.appveyor.com/docs/lang/nodejs-iojs
# http://www.appveyor.com/docs/appveyor-yml
version: "{build}"
clone_depth: 10
environment:
matrix:
- nodejs_version: 5.0.0
# Install scripts. (runs after repo cloning)
install:
# Get the latest stable version of Node.js or io.js
- ps: Install-Product node $env:nodejs_version
- npm cache clean
- npm install -g gulp
# install modules
- npm install
# Post-install test scripts.
test_script:
# Output useful info for debugging.
- node --version && npm --version
# run tests
- cd project
- gulp build_dist
# Don't actually build.
build: off
matrix:
fast_finish: true
cache:
- C:\Users\appveyor\AppData\Roaming\npm-cache -> package.json # npm cache
- node_modules -> package.json # local npm modules
+45
View File
@@ -0,0 +1,45 @@
{
"ftp": {
"host": "xx.xx.xx.xx",
"port": "8021",
"user": "tmt",
"pass": "password",
"remotePath": "remotePath",
"includeHtml": true
//ftp 上传是否包含 html
},
"sftp": {
"host": "xx.xx.xx.xx",
"port": "xx",
"user": "tmt",
"password": "password",
"remotePath": "",
"includeHtml": true
},
"livereload": {
// /api 代理到的 url
"proxyTarget": "http://apibeta.qxjiaoyou.com",
//开启自动刷新
"available": true,
"port": 8080,
"startPath": "index.html"
},
//路径相对于 tasks/plugins 目录
"plugins": {
"build_devAfter": [],
"build_distAfter": [],
"ftpAfter": [
"ftp"
]
},
"lazyDir": [
"../slice"
],
//gulp-lazyImageCSS 寻找目录(https://github.com/weixin/gulp-lazyimagecss)
"supportWebp": false,
"supportREM": false,
"supportChanged": false,
"reversion": true,
"SVGGracefulDegradation": true
}
+244
View File
@@ -0,0 +1,244 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>唯美古风</title>
<%- include('../html_tpl/style.html') %>
<link rel="stylesheet" href="css/carnival.css">
<%- include('../html_tpl/headScript.html') %>
</head>
<body>
<div class="max">
<div class="topNav topNav1">
<div class="feedback"><img src="./img/carnival/feedback.png" alt=""></div>
<ul>
<li class="tab active">墨城烟柳</li>
<li class="tab">清风煮酒</li>
</ul>
<div class="help"><img src="./img/carnival/rule-btn.png" alt=""></div>
</div>
<div class="topNav topNav2">
<div class="help"><img src="./img/carnival/rule-btn.png" alt=""></div>
<ul>
<li class="tab active">墨城烟柳</li>
<li class="tab">清风煮酒</li>
</ul>
</div>
<div class="scrollMask">
<div class="container"></div>
<script type="text/html" id="scrollTmp">
{{each scrollMaskList}}
{{if scrollMaskList.length === 1}}
<li></li>
{{else}}
<li>
<span>{{$value.nick}}</span>在{{$value.table}}获得<span>{{$value.prizeName}}×{{$value.num}}</span>
</li>
{{/if}}
{{/each}}
</script>
</div>
<div class="rank-btn"><img src="./img/carnival/rank-btn.png" alt=""></div>
<div class="record-btn"><img src="./img/carnival/record-btn.png" alt=""></div>
<div class="canvas">
<div class="canvas-container">
<div class="turntable">
<div class="container1 first"></div>
<canvas id="table" width="428" height="428"></canvas>
<canvas id="table2" width="428" height="428"></canvas>
<div class="pointer">
<img src="./img/carnival/point.png" alt="">
</div>
<button class="btn">
<img src="./img/carnival/draw-btn.png" alt="">
</button>
</div>
</div>
</div>
<div class="info">
<span>我的门票: <small class="ticketNum">0</small>张</span>
<span><a href="./index.html"><img src="./img/carnival/gather-btn.png" alt=""></a></span>
</div>
<div class="turnNum">
<li class="active ball">
<p class="num">1次</p>
<p class="ticket">-</p>
</li>
<li>
<p class="num">10次</p>
<p class="ticket">-</p>
</li>
<li>
<p class="num">100次</p>
<p class="ticket">-</p>
</li>
</div>
<div class="experience">
<div class="giftBox hide">
<img src="" alt="">
<span class="crit">暴击×5</span>
<span class="times"></span>
</div>
<div class="exp-container exp-container1">
<div class="strip exp-1"></div>
</div>
<div class="exp-num">
<span class="num">0</span>
<span>/</span>
<span class="maxNum">0</span>
</div>
<div class="tips">
<span>暴走值</span><span><img src="./img/carnival/rule-btn.png" alt=""></span>
</div>
</div>
<div class="status-mask">
<div class="title"></div>
<div class="tips"></div>
<div class="btn"></div>
</div>
<div class="gather-mask">
<div class="title">本轮获得</div>
<div class="tips">· 可前往个人背包查看 ·</div>
<ul class="gift-list"></ul>
<script type="text/html" id="gatherListTmp">
{{each gatherList}}
<li>
<p><img src="{{$value.prizeImgUrl}}" alt=""></p>
<p>×{{$value.prizeNum}}</p>
</li>
{{/each}}
</script>
<div class="btn">知道了</div>
</div>
<div class="rule-mask">
<div class="nav">
<div class="back"><img src="./img/carnival/back-btn.png" alt=""></div>
<div class="title">活动规则</div>
</div>
<div class="content">
<p><img src="./img/carnival/rule-text.png" alt=""></p>
</div>
</div>
<div class="rank-mask">
<div class="nav">
<div class="back"><img src="./img/carnival/back-btn.png" alt=""></div>
<div class="title">排行榜</div>
</div>
<div class="content">
<div class="tab">
<li class="active">捧场王</li>
<li>万人迷</li>
</div>
<div class="tips"><p>我是你爸爸</p></div>
<ul class="rank-container"></ul>
<script type="text/html" id="rankListTmp">
{{each rankList}}
<li>
{{if $index === 0}}
<p><img src="./img/carnival/rank-1.png" alt=""></p>
{{else if $index === 1}}
<p><img src="./img/carnival/rank-2.png" alt=""></p>
{{else if $index === 2}}
<p><img src="./img/carnival/rank-3.png" alt=""></p>
{{else}}
<p>{{$value.rank}}</p>
{{/if}}
<p class="avatar" data-uid="{{$value.uid}}"><img src="{{$value.avatar}}" alt=""></p>
<p class="info">
<span>{{$value.nick}}</span>
<span>ID:{{$value.erbanNo}}</span>
</p>
<p class="score">
{{if $value.rank === 1 || !$value.rank}}
<span class="align-center">No.1</span>
{{else}}
<span>
<small>{{$value.distance}}</small>
<small>距上名</small>
</span>
{{/if}}
</p>
</li>
{{/each}}
</script>
</div>
<div class="mine">
<p class="rank-num"></p>
<p class="avatar"><img src="" alt=""></p>
<p class="info">
<span class="nick"></span>
<span class="score"></span>
</p>
<p class="rank-info">
<span class="num"></span>
<span class="distance"></span>
</p>
</div>
</div>
<div class="record-mask">
<div class="nav">
<div class="back"><img src="./img/carnival/back-btn.png" alt=""></div>
<div class="title">抽奖记录</div>
</div>
<div class="tab">
<li class="active">
<p>时间</p>
<p></p>
</li>
<li>
<p>价值</p>
<p></p>
</li>
</div>
<div class="content">
<div class="record-container"></div>
<script type="text/html" id="recordTmp">
{{each recordList}}
<li>
<p><img src="{{$value.prizeImgUrl}}" alt=""></p>
<p>{{$value.prizeName}}×{{$value.prizeNum}}</p>
<p>
{{if worth}}
<span class="num">{{$value.platformValue}}金币</span>
{{else}}
<span>
<small>{{$value.hms}}</small>
<small>{{$value.ymd}}</small>
</span>
{{/if}}
</p>
</li>
{{/each}}
</script>
</div>
<div class="loading">加载中...</div>
<div class="tips">展示您最近300次中奖纪录</div>
</div>
<div class="shade"></div>
<div class="exp-toast">暴走状态随机礼物5倍获得概率。1转盘次数=1暴走值,暴走值每小时清零</div>
<div class="toast"></div>
</div>
<!-- <%- include('../html_tpl/downloadMask.html') %> -->
</body>
<%- include('../html_tpl/script.html') %>
<script src="../../common/js/jQueryRotate.js"></script>
<script src="js/carnival.js"></script>
</html>
File diff suppressed because it is too large. Load diff
+541
View File
@@ -0,0 +1,541 @@
@function px2rem($px, $rem:75) {
@return $px / $rem+rem;
}
@import '../../../common/css/flex.scss';
.mask {
z-index: 120;
position: fixed;
width: 100%;
left: 0;
bottom: 0;
display: flex;
height: 60px;
align-items: center;
background: rgba(0, 0, 0, 0.5);
justify-content: space-between;
padding: 0 8px;
box-sizing: border-box;
display: none;
.logo {
width: 40px;
img {
width: 100%;
}
}
.slogan {
color: #fff;
}
}
#download {
border: 1px solid #fff;
color: #fff;
width: 80px;
text-align: center;
border-radius: 15px;
line-height: 30px;
a {
color: #fff;
}
}
*{
-webkit-overflow-scrolling: touch;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
}
body{
font-family:PingFang SC;
background: #081B4F;
z-index:-1;
.max {
width: 100%;
margin: 0 auto;
.title-one {
width: 100%;
img {
width: 100%;
height: 100%;
}
}
.rule-btn {
width: px2rem(100);
height: px2rem(60);
position: absolute;
left: px2rem(30);
top: px2rem(20);
img {
width:100%;
height:100%;
}
}
.cloth-box {
width:100%;
padding-bottom:2.4rem;
margin:-3.5rem auto 0;
li {
width: px2rem(680);
height: px2rem(505);
position:relative;
margin:px2rem(-25) auto 0;
@include flex();
@include flex-justify-center;
background:url('../img/index/li-card.png') no-repeat 0 0 / 100% 100%;
.h-title{
position:absolute;
margin: px2rem(88) auto 0;
letter-spacing:.053333rem;
font-size: px2rem(28);
font-weight: bold;
// color: #FFF;
color: #F9FFCB;
background: linear-gradient(0deg, #FFE691 0%, #FEFAD5 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: px2rem(50);
}
.gift-img{
width:px2rem(160);
height: px2rem(160);
position:absolute;
box-sizing: border-box;
left: px2rem(80);
top: px2rem(170);
@include flex;
@include flex-align-center;
@include flex-justify-center;
img{
box-sizing: border-box;
padding: px2rem(10);
width:100%;
height: 100%;
object-fit: cover;
}
}
.gift-text{
position:absolute;
left: px2rem(270);
top: px2rem(160);
p:first-child{
font-size:px2rem(34);
font-weight:bold;
color: #D4EBFF;
line-height:.56rem;
letter-spacing:.026667rem;
}
p:nth-child(2){
font-size:px2rem(28);
// font-weight:bold;
color:#FFE591;
line-height:.56rem;
}
p:nth-child(3){
font-size:px2rem(26);
font-weight:500;
text-decoration:line-through;
color: rgba(147, 190, 229, 0.85);
line-height:px2rem(47);
opacity:0.8;
}
p:last-child{
font-size:px2rem(26);
font-weight: 500;
color: #93BEE5;
opacity:0.8;
line-height: px2rem(47);
}
}
.buy-btn{
width: px2rem(294);
height: px2rem(75);
position:absolute;
bottom: px2rem(65);
left: 50%;
transform: translate(-50%,0);
@include flex();
@include flex-justify-center;
background: url('../img/index/buy.png') no-repeat 0 0 / 100% 100%;
&.gray {
background: url('../img/index/buy-gray.png') no-repeat 0 0 / 100% 100%;
}
}
}
li:nth-child(3) {
.gift-img {
width: px2rem(145);
height: px2rem(145);
left: px2rem(90);
top: px2rem(185);
}
}
li:nth-child(4) {
.gift-img {
width: px2rem(150);
height: px2rem(150);
left: px2rem(85);
top: px2rem(180);
object-fit: contain;
}
}
}
.buy-mask {
width: px2rem(616);
height: px2rem(596);
// border-radius:.213333rem;
// background-color: #FFFFFF;
position: fixed;
left:50%;
top:50%;
transform:translate(-50%,-50%);
background: url('../img/index/buy-bg.png') no-repeat 0 0 / 100% 100%;
z-index: 1001;
display: none;
.b-box{
padding: 0 .693333rem;
margin-top: px2rem(72);
.b-title{
color:rgba(51,51,51,1);
background: linear-gradient(0deg, #FFE691 0%, #FEFAD5 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height:.6rem;
text-align:center;
font-size:.48rem;
font-weight:bold;
letter-spacing:.013333rem;
.giftName{
font-size:.48rem;
font-weight:bold;
}
}
.b-number{
padding:0 .906667rem;
margin-top:.773333rem;
@include flex();
.input-box{
@include flex();
@include flex-align-center;
height:.64rem;
margin-top:-0.066667rem;
.remove-btn{
width:.64rem;
height:.64rem;
@include flex();
@include flex-justify-center;
@include flex-align-center;
border-radius:.32rem 0 0 .32rem;
background:#D4F4FF;
.remove-icon{
opacity: 0.6;
display:block;
width: px2rem(20);
height: px2rem(4);
background: url('../img/index/remove-icon.png') no-repeat 0 0 / 100% 100%;
background-size:100% 100%;
}
}
.b-input{
width:1.173333rem;
height:.64rem;
background:#D4F4FF;
text-align:center;
font-size:.346667rem;
font-weight:500;
color: #1A93E0;
margin:0 .106667rem;
border:0;
outline:none;
}
.add-btn{
width:.64rem;
height:.64rem;
@include flex();
@include flex-justify-center;
@include flex-align-center;
border-radius:0 .32rem .32rem 0;
background:#D4F4FF;
.add-icon{
display:block;
width: px2rem(20);
height: px2rem(20);
background: url('../img/index/add-icon.png') no-repeat;
background-size:100% 100%;
}
}
}
}
.b-text{
white-space:nowrap;
font-size:.4rem;
font-weight:500;
color:rgba($color: #93BEE5, $alpha: 1.0);
line-height:.48rem;
margin-bottom: px2rem(47);
span:first-child{
margin-right:.4rem;
}
}
.b-day{
padding:0 .906667rem;
span:nth-child(2),span:last-child{
color:#333;
letter-spacing:.013333rem;
background: linear-gradient(0deg, #FFE691 0%, #FEFAD5 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.b-price{
padding:0 .906667rem;
span:nth-child(2),span:last-child{
color: #FFA530;
letter-spacing:.013333rem;
}
}
.b-btns{
@include flex();
@include flex-justify-between;
margin-top: px2rem(55);
.close-btn{
width: px2rem(251);
height: px2rem(87);
background:url('../img/index/btn-cancel.png') no-repeat 0 0 / 100% 100%;
@include flex();
@include flex-justify-center;
@include flex-align-center;
}
.confirm-btn{
width: px2rem(251);
height: px2rem(87);
background: url('../img/index/btn-confirm.png') no-repeat 0 0 / 100% 100%;
@include flex();
@include flex-justify-center;
@include flex-align-center;
}
}
}
}
.rule-mask {
width: px2rem(670);
height: px2rem(650);
position: fixed;
left: 50%;
top: 50%;
transform:translate(-50%,-50%);
z-index: 1001;
// background-color:#FFFFFF;
background: url('../img/index/buy-bg.png') no-repeat 0 0 / 100% 100%;
border-radius:.213333rem;
overflow: hidden;
display: none;
.title {
width: 100%;
text-align: center;
font-size: px2rem(40);
color: #333;
margin-top: px2rem(70);
font-weight: bold;
background: linear-gradient(0deg, #FFE691 0%, #FEFAD5 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.content {
width: px2rem(524);
height: px2rem(425);
margin: 0 auto;
margin-top:.4rem;
overflow: auto;
&::-webkit-scrollbar {
display: none;
}
p {
width: 100%;
height:13.333333rem;
img {
width:100%;
}
}
}
.cancel {
width: px2rem(35);
height:px2rem(35);
position: absolute;
right: px2rem(50);
top: px2rem(50);
img {
width:100%;
height:100%;
}
}
}
.statusMask {
width: px2rem(616);
height:6.8rem;
border-radius:.213333rem;
// background-color:#FFFFFF;
background: url('../img/index/buy-bg.png') no-repeat 0 0 / 100% 100%;
position: fixed;
left: 50%;
top: 50%;
transform:translate(-50%,-50%);
z-index: 1001;
display: none;
.cancel {
width: px2rem(70);
height: px2rem(70);
position: absolute;
left: 50%;
transform: translate(-50%,0);
bottom: px2rem(-80);
img {
width:100%;
height:100%;
}
}
.title {
width: 100%;
text-align: center;
font-size:.48rem;
color: #333333;
font-weight:bold;
margin-top:.786667rem;
background: linear-gradient(0deg, #FFE691 0%, #FEFAD5 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.avatar {
width: px2rem(140);
height: px2rem(140);
margin: 0 auto;
margin-top:.666667rem;
img {
width: 100%;
height:100%;
}
}
.tip {
width: 100%;
text-align: center;
font-size:.373333rem;
color: #93BEE5;
}
.in-btn, .recharge {
@include flex;
@include flex-align-center;
@include flex-justify-between;
display: block;
width: px2rem(300);
height: px2rem(90);
background:url('../img/index/btn.png') no-repeat 0 0 / 100% 100%;
background-size:100% 100%;
color: #87540E;
font-size: px2rem(36);
line-height: px2rem(92);
text-align: center;
margin:.533333rem auto 0;
font-weight: bold;
padding-bottom: px2rem(10);
}
}
.shade {
width: 100%;
position:fixed;
z-index:1000;
left: 0;
top: 0;
height: 100%;
background:rgba(0,0,0,0.7);
display: none;
}
.mine {
@include flex();
@include flex-justify-between;
@include flex-align-center;
width: 100%;
height:1.866667rem;
position: fixed;
left: 0;
bottom: 0;
background: linear-gradient(0deg, #8565AF, #5877C4);
z-index: 100;
li {
margin: 0 .533333rem;
img {
width: 100%;
}
&:first-child {
@include flex();
@include flex-justify-start;
@include flex-align-center;
p {
&:first-child {
width:1.066667rem;
height:1.066667rem;
border-radius:50%;
overflow: hidden;
font-weight:500;
}
&:last-child {
margin-left:.266667rem;
span {
display: block;
&:first-child {
line-height: px2rem(42);
font-size: px2rem(30);
color: #FD666E;
background: linear-gradient(0deg, #FFE691 0%, #FEFAD5 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
}
&:last-child {
font-size: px2rem(24);
font-weight: 500;
color: rgba($color: #93BEE5, $alpha: 0.6);
b {
color: rgba($color: #FFF1B7, $alpha: 1);
}
}
}
}
}
}
&:last-child {
width: px2rem(193);
height: px2rem(82);
}
}
}
}
/*提示信息样式*/
.ajaxtiptext{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
text-align: center;
color:#FFFFFF;
padding:.2rem .4rem;
border-radius:.333333rem;
letter-spacing:.013333rem;
background:rgba(0,0,0,0.8);
animation:ajaxani 0.3s forwards;
z-index:9999;
white-space:nowrap;
}
}
+23
View File
@@ -0,0 +1,23 @@
var gulp = require('gulp');
var fs = require('fs');
var path = require('path');
// 注册
var deep = 3;
run_tasks('_tasks');
function run_tasks(tasks_path) {
if (--deep < 0) {
throw new Error('something wrong in require tasks!');
// eslint-disable-next-line no-unreachable
return;
}
tasks_path = path.join('../', tasks_path);
if (fs.existsSync(tasks_path)) {
require(tasks_path)(gulp);
} else {
run_tasks(tasks_path);
}
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 208 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 851 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 939 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 989 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 785 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 987 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 896 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 604 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 73 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 224 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 250 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 566 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 126 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 211 KiB

+76
View File
@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>唯美古风</title>
<%- include('../html_tpl/style.html') %>
<link rel="stylesheet" href="css/index.css">
<%- include('../html_tpl/headScript.html') %>
</head>
<body>
<div class="max">
<div class="title title-one"><img src="./img/index/title.png" alt=""></div>
<div class="rule-btn"><img src="./img/index/rule-btn.png" alt=""></div>
<ul class="cloth-box"></ul>
<div class="mine">
<li>
<p class="avatar"><img src="" alt=""></p>
<p>
<span class="nick">-</span>
<span>我的门票:<b class="score"></b></span>
</p>
</li>
<li><a href="carnival.html"><img src="./img/index/in-btn.png" alt=""></a></li>
</div>
<!-- 弹窗start -->
<div class="buy-mask">
<div class="b-box">
<h3 class="b-title">购买<b class="giftName"></b></h3>
<div class="b-number">
<p class="b-text"><span>数量:</span></p>
<div class="input-box">
<div class="remove-btn"><span class="remove-icon"></span></div>
<input type="number" value="1" class="b-input">
<div class="add-btn"><span class="add-icon"></span></div>
</div>
</div>
<p class="b-text b-day"><span>天数:</span><span class="day">1</span><span>天</span></p>
<p class="b-text b-price"><span>金额:</span><span class="totalprice"></span><span>金币</span></p>
<div class="b-btns">
<div class="close-btn"></div>
<div class="confirm-btn"></div>
</div>
</div>
</div>
<div class="rule-mask">
<div class="cancel">
<img src="./img/common/cancel1.png" alt="">
</div>
<div class="title">玩法介绍</div>
<div class="content">
<p><img src="./img/index/rule-text.png" alt=""></p>
</div>
</div>
<div class="statusMask">
<div class="cancel">
<img src="./img/common/cancel1.png" alt="">
</div>
<div class="title success">购买成功</div>
<div class="title fail">余额不足</div>
<div class="avatar success"><img src="./img/common/success-icon.png" alt=""></div>
<div class="avatar fail"><img src="./img/common/enough-icon.png" alt=""></div>
<div class="tip"></div>
<a href="./carnival.html" class="in-btn success">进入会场</a>
<div class="recharge android fail">去充值</div>
<div class="recharge ios fail">知道了</div>
</div>
<div class="shade"></div>
<!-- 弹窗end -->
</div>
<!-- <%- include('../html_tpl/downloadMask.html') %> -->
</body>
<%- include('../html_tpl/script.html') %>
<script src="js/index.js"></script>
</html>
+939
View File
@@ -0,0 +1,939 @@
// 指定全局变量
/*global checkVersion locateJudge EnvCheck tools erbanMask wx wxConfig VConsole androidJsObj initNav template preloadImage */
var info = {};
var browser = checkVersion();
var api = locateJudge();
var env = EnvCheck();
var shareUrl = location.origin + '/activity';
var share = {
title: '',
link: shareUrl,
imgUrl: 'https://img.erbanyy.com/new-logo.png',
desc: ''
};
// eslint-disable-next-line
function getMessage (key, value) {
info[key] = value;
}
wx.ready(function () {
wx.onMenuShareTimeline({
title: share.title,
link: share.link,
imgUrl: share.imgUrl,
desc: share.desc
});
wx.onMenuShareAppMessage({
title: share.title,
desc: share.desc,
link: share.link,
imgUrl: share.imgUrl,
type: 'link',
dataUrl: ''
});
wx.onMenuShareQQ({
title: share.title,
desc: share.desc,
link: share.link,
imgUrl: share.imgUrl
});
});
erbanMask('activity-name', 'activity-name');
initNav({
type: 2,
data: {
msg: 'wewawa',
link: share.link,
title: share.title,
showUrl: share.link,
imgUrl: share.imgUrl,
desc: share.desc
}
});
browser.weixin && wxConfig();
var requestScrollTimer
var toastTimer
var openSocketTimer
var imgTimer
var canvasTimer
var rotateTimer
var rotateTimer2
var giftTimer
clearInterval(requestScrollTimer)
requestScrollTimer = setInterval(function () {
getScrollTip()
}, 60000)
var clickTab = 0
var clickTabFlag = false
var clickNumIndex = 0
var turntable = {
0: {
rotateBol: false,
fontColor: [], // 字体颜色
colors: [
'#001D53',
'#1C2D6E'
], // 板块颜色
prizeName: [], // 奖品名称
prizeImg: [
'img/gift/gift1.png',
'img/gift/gift2.png',
'img/gift/gift3.png',
'img/gift/gift4.png',
'img/gift/gift5.png',
'img/gift/gift6.png',
'img/gift/gift7.png',
'img/gift/gift8.png'
], // 奖品图片
prizeImgArr: [], // 用于canvas绘画的图片
prizeIndex: [] // 奖品下标
},
1: {
rotateBol: false,
fontColor: [], // 字体颜色
colors: [
'#001D53',
'#1C2D6E'
], // 板块颜色
prizeName: [], // 奖品名称
prizeImg: [
'img/gift/gift1.png',
'img/gift/gift9.png',
'img/gift/gift10.png',
'img/gift/gift11.png',
'img/gift/gift12.png',
'img/gift/gift13.png',
'img/gift/gift14.png',
'img/gift/gift15.png'
], // 奖品图片
prizeImgArr: [], // 用于canvas绘画的图片
prizeIndex: [] // 奖品下标
}
}
var giftIntro = {}
$(function () {
if (env == 'test') {
new VConsole();
}
var main = {
init: function () {
this.getMsgFromDevice();
setTimeout(() => {
this.getData();
if (info.appVersion >= '1.3.6' && info.appVersion) {
$('.topNav1').show().siblings('.topNav2').hide();
} else {
$('.feedback,.topNav1').hide();
$('.topNav2').show();
}
}, 100);
this.eventRegister();
},
getMsgFromDevice: function () {
if (browser.app) {
if (browser.ios) {
window.webkit.messageHandlers.getDeviceId.postMessage(null);
window.webkit.messageHandlers.getRoomUid.postMessage(null);
} else if (browser.android) {
if (androidJsObj && typeof androidJsObj === 'object') {
info.deviceId = window.androidJsObj.getDeviceId();
info.roomUid = window.androidJsObj.getRoomUid()
}
}
info.uid = tools.nativeUtils.getUid();
info.ticket = tools.nativeUtils.getTicket();
info.appVersion = tools.nativeUtils.getAppVersion();
} else {
info.uid = 906709;
info.roomUid = 906709
info.deviceId = '8d9d6247-63a4-3acc-a164-01a6b1a3c098';
info.ticket = 'eyJhbGciOiJIUzI1NiJ9.eyJ0aWNrZXRfdHlwZSI6bnVsbCwidWlkIjo5MDYyMzgsInRpY2tldF9pZCI6IjdiZWQ2NzcwLWJmMjktNGRiYi04MzZmLTc0NzBmY2RiMDZjYSIsImV4cCI6MzYwMCwiY2xpZW50X2lkIjoiZXJiYW4tY2xpZW50In0.ye2Zv8nyZkqiT_bIWq-50qcS6_SCWmRpBjxxLX7mQvs';
}
},
eventRegister: function () {
$('.topNav .tab').on('click', function () {
if (clickTabFlag) {
return
}
$(this).addClass('active').siblings().removeClass('active')
clickTab = $(this).index()
if (clickTab === 0) {
$('.exp-container').find('.strip').removeClass('exp-2').addClass('exp-1')
$('.exp-container').removeClass('exp-container2').addClass('exp-container1')
$('.canvas').find('.container1').removeClass('second').addClass('first')
$('.canvas .pointer img').attr('src', 'img/carnival/point.png')
$('.canvas .btn img').attr('src', 'img/carnival/draw-btn.png')
preloadImg(clickTab)
} else {
$('.exp-container').find('.strip').removeClass('exp-1').addClass('exp-2')
$('.exp-container').removeClass('exp-container1').addClass('exp-container2')
$('.canvas').find('.container1').removeClass('first').addClass('second')
$('.canvas .pointer img').attr('src', 'img/carnival/point-2.png')
$('.canvas .btn img').attr('src', 'img/carnival/draw-btn-2.png')
preloadImg(clickTab)
}
info.clickStatu = false
getGiftInfo()
getticketChooseShow()
})
$('.turnNum').on('click', 'li', function () {
$(this).addClass('active').siblings().removeClass('active')
clickNumIndex = $(this).index()
})
$('.experience').on('click', '.tips', function () {
$('.exp-toast').fadeIn(300, function () {
clearTimeout(toastTimer)
toastTimer = setTimeout(function () {
$('.exp-toast').hide()
}, 8000)
})
})
$('.canvas').on('click', '.btn', function () {
if (!info.clickStatu) {
$('.toast').html('哎呀太挤了,请稍等').fadeIn(30).fadeOut(2000)
return false
}
if (turntable[clickTab].rotateBol) return
turntable[clickTab].rotateBol = true
clickTabFlag = true
var obj = {
0: 'one',
1: 'ten',
2: 'hundred'
}
$.ajax({
headers: {
pub_ticket: info.ticket
},
type: 'POST',
url: api + '/activities/draw/turnTable',
data: {
uid: info.uid,
ticket: info.ticket,
roomUid: info.roomUid,
sendMessage: true,
ruleType: obj[clickNumIndex],
drawType: (clickTab === 0) ? 'turntable1' : 'turntable2',
deviceId: info.deviceId
},
success: function (res) {
if (res.code === 200) {
var maxValue = 0
var prizeId
var item
for (var i in res.data.prizeItemList) {
if (res.data.prizeItemList[i].platformValue > maxValue) {
maxValue = res.data.prizeItemList[i].platformValue
prizeId = res.data.prizeItemList[i].prizeId
item = turntable[clickTab].prizeIndex.indexOf(prizeId)
if (item == -1) {
item = 0
}
}
console.log(item);
}
// ---------------- 用户抽奖记录接口 -----------
$.ajax({
headers: {
pub_ticket: info.ticket
},
type: 'POST',
url: api + '/activities/draw/saveLog',
data: {
ticket: info.ticket,
uid: info.uid,
prizeids: JSON.stringify(res.data.prizeIdList),
prizeIndex: item,
createdTime: res.data.prizeItemList[0].createTime,
prizeIdList: JSON.stringify(turntable[clickTab].prizeIndex)
},
success: function (res) {
// eslint-disable-next-line no-empty
if (res.code !== 200) console.log(res.message)
},
error: function (err) {
console.log('报错了:', err)
}
})
// ------------------ 用户抽奖记录接口 ------------
$('.info').find('.ticketNum').html(res.data.remainKeyNum)
rotateFunc(item, 8, res.data.prizeItemList, res.data.prizeIdList, clickTab)
clearTimeout(rotateTimer)
rotateTimer = setTimeout(function () {
clickTabFlag = false
clearTimeout(rotateTimer)
}, 3000)
clearTimeout(rotateTimer2)
rotateTimer2 = setTimeout(function () {
turntable[clickTab].rotateBol = false
}, 1000)
} else if (res.code === 10000) {
// 门票不足
$('.status-mask').find('.title').html('游玩失败')
$('.status-mask').find('.tips').html('亲,门票不足了哦~')
$('.status-mask').find('.btn').addClass('toGather').html('去收集')
$('.shade,.status-mask').show()
clickTabFlag = false
turntable[clickTab].rotateBol = false
} else if (res.code === 21111) {
// 游玩限制
$('.status-mask').find('.title').html('本日游玩限制')
$('.status-mask').find('.tips').html('今日游玩次数已达上限哦~')
$('.status-mask').find('.btn').removeClass('toGather').html('知道了')
$('.shade,.status-mask').show()
clickTabFlag = false
} else {
turntable[clickTab].rotateBol = false
clickTabFlag = false
$('.toast').html(res.message).fadeIn(30).fadeOut(3000)
}
}
})
})
$('.status-mask').on('click', '.btn', function () {
if ($(this).hasClass('toGather')) {
$('.status-mask').hide()
$('.shade').hide()
window.location.href = './index.html'
} else {
$('.status-mask').hide()
$('.shade').hide()
}
})
$('.shade').on('click', function () {
$('.status-mask').hide()
$('.gather-mask').hide()
$('.shade').hide()
})
$('.help').on('click', function () {
$('.rule-mask').animate({
top: 0
}, 500)
})
$('.rule-mask').on('click', '.back', function () {
$('.rule-mask').animate({
top: -1000
}, 500)
})
$('.rank-btn').on('click', function () {
renderRank(false)
})
$('.rank-mask .tab').on('click', 'li', function () {
rankTabIndex = $(this).index()
$(this).addClass('active').siblings().removeClass('active')
renderRank(true)
})
$('.rank-mask').on('click', '.back', function () {
$('.rank-mask').animate({
top: -1000
}, 500)
})
$('.status-mask').on('click', '.btn', function () {
$('.shade').hide()
$('.status-mask').hide()
})
$('.record-btn').on('click', function () {
renderRecord(false)
})
$('.record-mask .tab').on('click', 'li', function () {
recordTabIndex = $(this).index()
recordPageNum = 1
scrollFlag = false
$('.record-mask').find('.content').scrollTop(0)
$(this).addClass('active').siblings().removeClass('active')
renderRecord(true)
})
$('.record-mask').on('click', '.back', function () {
$('.record-mask').animate({
top: -1000
}, 500)
})
$('.record-mask .content').scroll(function () {
var scrollH = $(this).scrollTop()
var contentH = $('.record-container').height()
var viewH = $(this).height()
if (Math.ceil(viewH + scrollH) >= contentH) {
if (scrollFlag) {
return
}
scrollFlag = !scrollFlag
recordPageNum++
renderRecord(true)
}
})
$('.feedback').on('click', function () {
tools.nativeUtils.jumpAppointPage('FEEDPACK_PAGE', 'DRAW');
})
},
getData: function () {
getScrollTip()
getticketChooseShow()
openSocket()
getExp()
getTicketNum()
preloadImg(clickTab)
getGiftInfo()
}
};
main.init();
});
var scrollTimer
var tabTimer
var times
// var timeFlag = 0
var timeTimer
// var cacheLine = 0
var rankTabIndex = 0
var recordTabIndex = 0
var recordPageNum = 1
// 获取滚屏数据
function getScrollTip () {
$('.container').hide()
$.ajax({
type: 'GET',
url: api + '/activities/draw/queryPrizeMsg',
success: function (res) {
if (res.code === 200) {
for (var i in res.data) {
if (res.data[i].nick.length > 4) {
res.data[i].nick = res.data[i].nick.substring(0, 4) + '...'
}
if (res.data[i].drawType === 1) {
res.data[i]['table'] = '墨城烟柳'
} else {
res.data[i]['table'] = '清风煮酒'
}
}
res.data.push(res.data[0])
var _data = {
scrollMaskList: res.data
}
$('.container').html(template('scrollTmp', _data))
$('.container').show()
animateScroll()
}
}
})
}
// 获取礼物信息
function getGiftInfo () {
turntable[clickTab].prizeIndex = []
// turntable[0].prizeImg = [];
// turntable[1].prizeImg = [];
giftIntro['giftIdArr'] = []
$.ajax({
type: 'GET',
url: api + '/activities/draw/queryPrizeInfo',
timeout: 15000, // 超时时间:30秒
data: {
drawType: (clickTab === 0) ? 'turntable1' : 'turntable2'
},
success: function (res) {
if (res.code === 200) {
for (var i in res.data) {
turntable[clickTab].prizeIndex.push(res.data[i].prizeId)
giftIntro.giftIdArr.push(res.data[i].prizeId)
// if(clickTab === 0) {
// turntable[0].prizeImg.push(res.data[i].prizeImgUrl)
// }else{
// turntable[1].prizeImg.push(res.data[i].prizeImgUrl)
// }
}
// preloadImg(clickTab)
// 成功后可点击
info.clickStatu = true
} else {
$('.toast').html(res.message).fadeIn(30).fadeOut(2000)
}
},
error: function (res) {
$('.toast').html('哎呀太挤了,请稍等').fadeIn(30).fadeOut(2000)
}
})
}
// 滚屏
function animateScroll () {
var length = $('.scrollMask').find('.container').height()
var _top = 0
clearInterval(scrollTimer)
scrollTimer = setInterval(function () {
if (length + _top > 30) {
_top -= 30
} else {
$('.scrollMask').find('.container').css({
top: 0
})
_top = 0
}
$('.scrollMask').find('.container').stop(true, true).animate({
top: _top
})
}, 2000)
}
// 获取消耗数据
function getticketChooseShow () {
var drawObj = {
0: 'turntable1',
1: 'turntable2'
}
$.ajax({
type: 'GET',
url: api + '/activities/draw/queryTicketRule',
data: {
drawType: drawObj[clickTab]
},
success: function (res) {
if (res.code === 200) {
// $('.turnNum').find('.num').eq(0).html(res.data.one + '次')
$('.turnNum').find('.ticket').eq(0).html('消耗' + res.data.one + '门票')
// $('.turnNum').find('.num').eq(1).html(res.data.ten + '次')
$('.turnNum').find('.ticket').eq(1).html('消耗' + res.data.ten + '门票')
// $('.turnNum').find('.num').eq(2).html(res.data.hundred + '次')
$('.turnNum').find('.ticket').eq(2).html('消耗' + res.data.hundred + '门票')
if (clickTab === 0) {
$('.turnNum').find('li').removeClass('joy').addClass('ball')
} else {
$('.turnNum').find('li').removeClass('ball').addClass('joy')
}
}
}
})
}
// 打开socket链接
function openSocket () {
var socket = null
var cacheType = 0
if (typeof (WebSocket) === 'undefined') {
alert('暂不支持转盘socket')
} else {
var _url = (window.location.href.match('apibeta') || window.location.href.match('local')) ? 'http://apibeta.qxjiaoyou.com:8081' : 'https://api.qxjiaoyou.com:8081'
if (window.location.href.match('preview')) {
_url = 'https://preview.qxjiaoyou.com:8081'
}
var socketUrl = _url + '/websocket/activity/' + info.roomUid
socketUrl = socketUrl.replace('https', 'wss').replace('http', 'ws')
if (socket !== null) {
socket.close()
socket = null
}
socket = new WebSocket(socketUrl)
socket.onopen = function () {
// 监听开启socket后的判断逻辑
clearInterval(tabTimer)
tabTimer = setInterval(function () {
if (cacheType !== clickTab) {
cacheType = clickTab
getExp()
}
}, 10)
}
socket.onmessage = function (res) {
// 监听服务端发送过来的数据
var data = JSON.parse(res.data)
if (data.data) {
renderExp(data.data)
}
}
socket.onclose = function () {
socket = null
clearTimeout(openSocketTimer)
openSocketTimer = setTimeout(function () {
openSocket()
}, 5000)
}
socket.onerror = function () {
console.log('socket错误')
}
}
}
// 渲染经验值
function getExp () {
$.ajax({
type: 'GET',
url: api + '/activities/draw/getRunawayData',
data: {
drawType: (clickTab === 0) ? 'turntable1' : 'turntable2',
roomUid: info.roomUid
},
success: function (res) {
if (res.code === 200) {
renderExp(res.data)
}
}
})
}
var tableFlag
function renderExp (val) {
// console.log(val)
tableFlag = (val.drawType === 'turntable1') ? 0 : 1
if (val.runawaySwitch) {
$('.experience').show()
}
// 进度条计算
if (tableFlag === clickTab) {
var height = $('.exp-container').height()
var percentage = val.curValue / val.runawayConfigValue
var _top
_top = height * percentage
$('.strip').stop(true).animate({
height: _top
}, 200)
$('.experience').find('.maxNum').html(val.runawayConfigValue)
$('.experience').find('.num').html(val.curValue)
}
// 进度条计算
// 礼物显示
if (JSON.stringify(val.poolPrize) !== '{}') {
if (val.poolTime > 0 && tableFlag === clickTab) {
renderTime(val)
}
// if (val.poolTime === val.runawayConfigTime && tableFlag === clickTab) {
// timeFlag = 1
// $('.giftBox').removeClass('hide')
// renderTime(val.poolTime)
// $('.giftBox').find('img').attr('src', val.poolPrize.prizeImgUrl)
// }
} else {
$('.giftBox').addClass('hide')
}
}
// 渲染倒计时
function renderTime (val) {
times = val.poolTime
$('.giftBox').find('img').attr('src', val.poolPrize.prizeImgUrl)
$('.giftBox').removeClass('hide')
$('.experience').find('.times').html(times + '秒')
clearInterval(timeTimer)
timeTimer = setInterval(function () {
times--
if (times === 0) {
// timeFlag = 0
clearInterval(timeTimer)
$('.giftBox').addClass('hide')
}
$('.experience').find('.times').html(times + '秒')
}, 1000)
}
// 获取门票数
function getTicketNum () {
$.ajax({
type: 'GET',
url: api + '/activities/draw/queryTicketNum',
data: {
uid: info.uid
},
success: function (res) {
if (res.code === 200) {
$('.info').find('.ticketNum').html(res.data.num)
}
}
})
}
// 预加载图片
function preloadImg (val) {
var img = {
imageArr: turntable[val].prizeImg,
doneFunc: function () {
clearInterval(imgTimer)
imgTimer = setTimeout(function () {
getCanvas(val)
}, 50)
}
}
preloadImage(img)
}
// 转盘
function getCanvas (val) {
var img
if (val === 0) {
$('#table').show()
$('#table2').hide()
} else {
$('#table').hide()
$('#table2').show()
}
for (let i in turntable[val].prizeImg) {
img = new Image()
img.src = turntable[val].prizeImg[i]
turntable[val].prizeImgArr.push(img)
}
var count = turntable[val].prizeImg.length
img.onload = function () {
var baseAngle = Math.PI * 2 / count
var _circle = (val === 0) ? document.getElementById('table') : document.getElementById('table2')
var circle = _circle.getContext('2d')
clearTimeout(canvasTimer)
canvasTimer = setTimeout(function () {
for (var i = 0; i < turntable[val].prizeImg.length; i++) {
circle.save()
circle.translate(_circle.width / 2, _circle.height / 2)
circle.strokeStyle = 'transparent'
var angle = i * baseAngle
var colorIndex = i % 2
circle.fillStyle = turntable[val].colors[colorIndex]
circle.beginPath()
circle.moveTo(0, 0)
circle.arc(0, 0, 214, angle, angle + baseAngle, false)
circle.stroke()
circle.fill()
circle.rotate(angle + baseAngle / 2 + Math.PI / 2)
circle.imageSmoothEnabled = false
circle.drawImage(turntable[val].prizeImgArr[i], -55, -210, 100, 100)
circle.restore()
}
clearTimeout(canvasTimer)
}, 10)
}
}
// 旋转
function rotateFunc (item, count, data, idList, val) {
// $('.canvas').css({
// transform: 'scale(.5)'
// })
giftIntro['gatherId'] = item
giftIntro['gatherIdList'] = idList
console.log(giftIntro);
var baseAngle = 360 / count
var angle = 360 * 3 / 4 - (item * baseAngle) - baseAngle / 2
giftIntro['angle'] = angle
var $rotate = (val === 0) ? $('#table') : $('#table2')
$rotate.stopRotate()
$rotate.rotate({
angle: 0,
animateTo: angle + 360 * 5,
duration: 3000,
callback: function () {
// 获取弹窗渲染
var $data = {
gatherList: data
}
$('.gift-list').html(template('gatherListTmp', $data))
$('.gather-mask').show()
$('.shade').show()
clearTimeout(giftTimer)
giftTimer = setTimeout(function () {
$('.gather-mask').hide()
$('.shade').hide()
clearTimeout(giftTimer)
}, 1500)
}
})
}
// 渲染排行榜
function renderRank (val) {
var tipsObj = {
0: '抽奖票数越多,排名越高哦~每日零点重置',
1: '获得奖励价值越高,排名越高哦~每日零点重置'
}
var urlObj = {
0: '/activities/rank/ticketList',
1: '/activities/rank/giftList'
}
$.ajax({
type: 'POST',
url: api + urlObj[rankTabIndex],
data: {
uid: info.uid
},
success: function (res) {
if (res.code === 200) {
$('.rank-mask').find('.tips p').html(tipsObj[rankTabIndex])
for (var i in res.data.rankVoList) {
if (res.data.rankVoList[i].nick.length > 5) {
res.data.rankVoList[i].nick = res.data.rankVoList[i].nick.substring(0, 5) + '...'
}
if (i > 0) {
var distance = res.data.rankVoList[i - 1].value - res.data.rankVoList[i].value
if (distance > 10000) {
res.data.rankVoList[i]['distance'] = (distance / 10000).toFixed(1) + '万'
} else {
res.data.rankVoList[i]['distance'] = distance
}
}
}
if (!val) {
$('.rank-mask').animate({
top: 0
}, 500, function () {
var $data = {
rankList: res.data.rankVoList
}
$('.rank-container').html(template('rankListTmp', $data)).fadeIn(500)
})
} else {
var $data = {
rankList: res.data.rankVoList
}
$('.rank-container').fadeOut(500, function () {
$('.rank-container').html(template('rankListTmp', $data))
}).fadeIn(500)
}
if (res.data.myRank.nick.length > 5) {
res.data.myRank.nick = res.data.myRank.nick.substring(0, 5) + '...'
}
if (res.data.myRank.value > 10000) {
res.data.myRank.value = (res.data.myRank.value / 10000).toFixed(1) + '万'
}
$('.mine').find('.rank-num').html(res.data.myRank.rank)
$('.mine').find('.avatar img').attr('src', res.data.myRank.avatar)
$('.mine').find('.nick').html(res.data.myRank.nick)
if (rankTabIndex === 0) {
$('.mine').find('.score').html('我的捧场值:' + res.data.myRank.value)
} else {
$('.mine').find('.score').html('我的迷人值:' + res.data.myRank.value)
}
if (res.data.myRank.rank < 21) {
if (res.data.myRank.rank > 10 && res.data.myRank.rank < 21) {
$('.mine').find('.num').html(res.data.myRank.diffValue)
$('.mine').find('.distance').html('距上榜')
} else if (res.data.myRank.rank < 11 && res.data.myRank.rank > 1) {
$('.mine').find('.num').html(res.data.myRank.diffValue)
$('.mine').find('.distance').html('距上名')
} else {
$('.mine').find('.num').html(res.data.myRank.diffValue)
}
} else {
$('.mine').find('.num').html(res.data.myRank.diffValue)
$('.mine').find('.distance').html('未上榜')
}
// 跳转个人主页
$('.rank-container').on('click', '.avatar', function () {
var uid = $(this).attr('data-uid');
tools.nativeUtils.jumpAppointPage('PERSON_PAGE', uid);
})
}
}
})
}
var recordCache = []
var scrollFlag = false
var recordTimer
// 渲染抽奖记录
function renderRecord (val) {
var typeObj = {
0: 'time',
1: 'worth'
}
$.ajax({
type: 'GET',
url: api + '/activities/draw/drawRecord',
data: {
uid: info.uid,
sortType: typeObj[recordTabIndex],
page: recordPageNum,
pageSize: 10
},
success: function (res) {
if (res.code === 200) {
if (res.data.length === 0) {
return
}
if (recordTabIndex === 0) {
for (var i in res.data) {
var date = new Date(res.data[i].createTime)
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()
var hour = date.getHours()
var minute = date.getMinutes()
var second = date.getSeconds()
res.data[i].ymd = year + '-' + month + '-' + day
res.data[i].hms = hour + ':' + minute + ':' + second
}
}
if (scrollFlag) {
if (res.data.length > 0) {
for (var j in res.data) {
recordCache.push(res.data[j])
}
} else {
$('.loading').html('暂无更多数据')
}
var $data2 = {
recordList: recordCache,
// eslint-disable-next-line no-unneeded-ternary
worth: (recordTabIndex === 1) ? true : false
}
$('.loading').show()
clearTimeout(recordTimer)
recordTimer = setTimeout(function () {
$('.loading').hide()
$('.record-container').html(template('recordTmp', $data2))
scrollFlag = !scrollFlag
}, 2000)
return
}
if (!val) {
recordCache = []
$('.record-mask').animate({
top: 0
}, 500, function () {
recordCache = res.data
var $data = {
recordList: recordCache,
// eslint-disable-next-line no-unneeded-ternary
worth: (recordTabIndex === 1) ? true : false
}
$('.record-container').html(template('recordTmp', $data)).fadeIn(500)
})
} else {
recordCache = []
recordCache = res.data
var $data = {
recordList: recordCache,
// eslint-disable-next-line no-unneeded-ternary
worth: (recordTabIndex === 1) ? true : false
}
$('.record-container').fadeOut(500, function () {
$('.record-container').html(template('recordTmp', $data))
}).fadeIn(500)
}
}
}
})
}
+386
View File
@@ -0,0 +1,386 @@
// 指定全局变量
/*global checkVersion locateJudge EnvCheck tools erbanMask wx wxConfig VConsole androidJsObj initNav */
var info = {};
var browser = checkVersion();
var api = locateJudge();
var env = EnvCheck();
var totalPrice = 0;
var shareUrl = location.origin + '/activity';
var share = {
title: '',
link: shareUrl,
imgUrl: 'https://img.erbanyy.com/new-logo.png',
desc: ''
};
// eslint-disable-next-line
function getMessage(key, value) {
info[key] = value;
}
wx.ready(function() {
wx.onMenuShareTimeline({
title: share.title,
link: share.link,
imgUrl: share.imgUrl,
desc: share.desc
});
wx.onMenuShareAppMessage({
title: share.title,
desc: share.desc,
link: share.link,
imgUrl: share.imgUrl,
type: 'link',
dataUrl: ''
});
wx.onMenuShareQQ({
title: share.title,
desc: share.desc,
link: share.link,
imgUrl: share.imgUrl
});
});
erbanMask('activity-name', 'activity-name');
initNav({
type: 2,
data: {
msg: 'wewawa',
link: share.link,
title: share.title,
showUrl: share.link,
imgUrl: share.imgUrl,
desc: share.desc
}
});
browser.weixin && wxConfig();
$(function() {
if (env == 'test') {
new VConsole();
}
var main = {
init: function() {
this.getMsgFromDevice();
setTimeout(() => {
this.getData();
}, 100);
this.eventRegister();
},
getMsgFromDevice: function() {
if (browser.app) {
if (browser.ios) {
window.webkit.messageHandlers.getDeviceId.postMessage(null);
} else if (browser.android) {
if (androidJsObj && typeof androidJsObj === 'object') {
info.deviceId = window.androidJsObj.getDeviceId();
}
}
info.uid = tools.nativeUtils.getUid();
info.ticket = tools.nativeUtils.getTicket();
} else {
// info.uid = 906238;
info.uid = 906709;
info.deviceId = 'safhksafhksajhfs1kjahsfkjsf0000aaaaaaaacaa';
info.ticket = 'eyJhbGciOiJIUzI1NiJ9.eyJ0aWNrZXRfdHlwZSI6bnVsbCwidWlkIjo5MDYyMzgsInRpY2tldF9pZCI6IjdiZWQ2NzcwLWJmMjktNGRiYi04MzZmLTc0NzBmY2RiMDZjYSIsImV4cCI6MzYwMCwiY2xpZW50X2lkIjoiZXJiYW4tY2xpZW50In0.ye2Zv8nyZkqiT_bIWq-50qcS6_SCWmRpBjxxLX7mQvs';
}
},
eventRegister: function() {
// 打开规则弹窗
$('.rule-btn').on('click', function() {
$('.rule-mask,.shade').fadeIn(300);
})
// 关闭购买弹窗
$('.buy-mask').on('click', '.close-btn', function() {
$('.buy-mask,.shade').fadeOut(300);
})
// 关闭规则弹窗
$('.rule-mask').on('click', '.cancel', function() {
$('.rule-mask,.shade').fadeOut(300);
})
// 关闭购买之后弹窗
$('.statusMask').on('click', '.cancel', function() {
$('.statusMask,.shade').fadeOut(300);
})
// 关闭弹窗
$('.shade').on('click', function() {
$('.rule-mask,.buy-mask,.statusMask,.shade').fadeOut(300);
})
// 监听input输入
$('.b-input').bind('input propertychange', function() {
var _this = $(this);
if (_this.val().length == 1) {
_this.val(_this.val().replace(/[^1-9]/gi, ''));
} else {
_this.val(_this.val().replace(/[\D]/gi, ''));
_this.val(parseInt(_this.val()));
}
if(_this.val() == '') {
totalPrice = 0;
$('.day').text(0);
_this.val(0)
}else{
if(_this.val() >= 100000000) {
_this.val(100000000)
}
totalPrice = parseInt(_this.val()) * parseInt(_this.attr('data-price'));
$('.day').text(_this.val());
}
$('.totalprice').html(totalPrice);
})
// 增加按钮
$('.add-btn').on('click', function() {
var val = parseInt($('.b-input').val());
var price = parseInt($('.b-input').attr('data-price'));
val = val + 1;
totalPrice = val * price;
$('.day').text(val);
$('.b-input').val(val);
$('.totalprice').html(totalPrice);
})
// 减少按钮
$('.remove-btn').on('click', function() {
var val = parseInt($('.b-input').val());
var price = parseInt($('.b-input').attr('data-price'));
if(val > 1) {
val = val - 1;
}else{
val = 1;
}
totalPrice = val * price;
$('.day').text(val);
$('.b-input').val(val);
$('.totalprice').html(totalPrice);
})
// 购买确认
$('.confirm-btn').on('click', function() {
var packNum = $('.b-input').val();
var packId = $(this).attr('data-pid');
if(packNum == 0) {
ajaxTip('最少购买一个哦~');
return;
}else{
$.ajax({
headers: {
pub_ticket: info.ticket
},
type: 'POST',
url: api + '/activity/pack/buy',
data: {
uid: info.uid,
ticket: info.ticket,
packId: packId,
packNum: packNum
},
success: function(res) {
if(res) {
if (res.code == 200) { // 购买成功
$('.buy-mask').hide().siblings('.statusMask').fadeIn(300);
$('.success').show();
$('.fail').hide();
$('.statusMask .tip').html('获赠门票×' + res.data);
renderTicket();
} else if (res.code == 2103) { // 余额不足
$('.buy-mask').hide().siblings('.statusMask').fadeIn(300);
$('.buy-mask,.success').hide();
$('.fail').show();
$('.statusMask .tip').html('亲,余额不足~');
if (browser.ios) {
$('.android').hide();
} else if (browser.android) {
$('.ios').hide();
}
} else {
ajaxTip(res.message);
return;
}
}
}
})
}
})
// 充值跳转
$('.recharge').on('click', function() {
if (browser.ios) {
$('.statusMask,.shade').fadeOut(300);
} else {
tools.nativeUtils.jumpAppointPage('RECHARGE_PAGE');
}
})
},
getData: function() {
renderTicket();
renderGift();
}
};
main.init();
});
// 渲染底部tab
function renderTicket() {
$.ajax({
type: 'GET',
url: api + '/activities/draw/queryTicketNum',
data: {
uid: info.uid
},
success: function(res) {
if(res.code === 200) {
if (res.data.nick.length > 10) {
res.data.nick = res.data.nick.substring(0, 10) + '...'
}
$('.mine').find('.avatar img').attr('src', res.data.avatar)
$('.mine').find('.nick').html(res.data.nick)
$('.mine').find('.score').html(res.data.num)
}else{
ajaxTip(res.message);
return;
}
}
})
}
// 渲染礼包信息
function renderGift() {
$.ajax({
headers: {
pub_ticket: info.ticket
},
type: 'POST',
url: api + '/activities/draw/getPackList',
data: {
uid: info.uid,
ticket: info.ticket
},
success: function(res) {
if (res.code == 200) {
var html = '';
var num = '';
res.data.forEach(function(item, index) {
if(item.sellingPrice == 200) {
num = '7-10'
}else if(item.sellingPrice == 1000) {
num = '30-50'
}else if(item.sellingPrice == 2000) {
num = '70-100'
}else if(item.sellingPrice == 10000) {
num = '300-500'
}
// 新增的档位20000,赠送600-1000门票,添加日期2020-12-08
else if(item.sellingPrice == 20000) {
num = '600-1000'
}
html += '<li data-id="' + item.id + '">' +
'<h3 class="h-title">限定装扮' + NoToChinese(index + 1) + '</h3>' +
'<div class="gift-img"><img src="' + item.imgUrl + '" alt=""></div>' +
'<div class="gift-text">' +
'<p>' + item.name + '</p>' +
'<p><span class="price" data-money="' + item.sellingPrice + '">' + item.sellingPrice + '</span>金币/天</p>' +
'<p>' + item.originalPrice + '金币/天</p>' +
'<p>随机赠送门票' + num + '张</p>' +
'</div>' +
'<div class="buy-btn gray" data-gid="' + item.id + '"></div>' +
'</li>'
})
$('.cloth-box').html(html);
renderBuyStatus();
// 购买弹窗
$('.cloth-box').on('click', '.buy-btn', function() {
var packId = $(this).attr('data-gid');
var name = $(this).siblings('.gift-text').find('p:first').text();
var sellingPrice = $(this).siblings('.gift-text').find('.price').attr('data-money');
$('.buy-mask .day').text(1);
$('.buy-mask .b-input').val(1);
$('.buy-mask .giftName').html(name);
$('.buy-mask .totalprice').html(sellingPrice);
$('.buy-mask .confirm-btn').attr('data-pid', packId);
$('.buy-mask .b-input').attr('data-price', sellingPrice);
$('.shade,.buy-mask').fadeIn(300);
})
}else{
ajaxTip(res.message);
return;
}
}
})
}
// 渲染购买状态
function renderBuyStatus() {
$.ajax({
type: 'GET',
url: api + '/activities/draw/getDate',
data: {},
success: function(res) {
if(res.code == 200) {
var date = new Date().getTime();
var start = (browser.ios) ? res.data.start : res.data.start;
var end = (browser.ios) ? res.data.end : res.data.end;
if (start < date && date < end) {
$('.buy-btn').removeClass('gray').prop('disabled', false);
} else {
$('.buy-btn').removeClass().addClass('buy-btn gray').prop('disabled', true);
}
}else{
ajaxTip(res.message);
return;
}
}
})
}
// 封装提示信息
function ajaxTip(callText) {
var thisBody = document.getElementsByTagName('body')[0];
var Div = document.createElement('div');
var text = "<p class='ajaxtiptext'>" + callText + '</p>'
Div.setAttribute('class', 'ajaxtiplayer');
Div.innerHTML = text;
Div.style.display = 'block';
thisBody.appendChild(Div);
setTimeout(function() {
thisBody.removeChild(Div);
}, 2000);
}
// 将数字转为中文数字
function NoToChinese(num) {
if (!/^\d*(\.\d*)?$/.test(num)) {
alert('Number is wrong!');
return 'Number is wrong!';
}
// eslint-disable-next-line no-array-constructor
var AA = new Array('零', '一', '二', '三', '四', '五', '六', '七', '八', '九');
// eslint-disable-next-line no-array-constructor
var BB = new Array('', '十', '百', '千', '万', '亿', '点', '');
var a = ('' + num).replace(/(^0*)/g, '').split('.');
var k = 0;
var re = '';
for (var i = a[0].length - 1; i >= 0; i--) {
switch (k) {
case 0:
re = BB[7] + re;
break;
case 4:
if (!new RegExp('0{4}\\d{' + (a[0].length - i - 1) + '}$').test(a[0])) { re = BB[4] + re; }
break;
case 8:
re = BB[5] + re;
BB[7] = BB[5];
k = 0;
break;
}
if (k % 4 == 2 && a[0].charAt(i + 2) != 0 && a[0].charAt(i + 1) == 0) re = AA[0] + re;
if (a[0].charAt(i) != 0) re = AA[a[0].charAt(i)] + BB[k % 4] + re;
k++;
}
if (a.length > 1) {
re += BB[6];
// eslint-disable-next-line no-redeclare
for (var i = 0; i < a[1].length; i++) re += AA[a[1].charAt(i)];
}
return re;
}
+45
View File
@@ -0,0 +1,45 @@
{
"ftp": {
"host": "xx.xx.xx.xx",
"port": "8021",
"user": "tmt",
"pass": "password",
"remotePath": "remotePath",
"includeHtml": true
//ftp 上传是否包含 html
},
"sftp": {
"host": "xx.xx.xx.xx",
"port": "xx",
"user": "tmt",
"password": "password",
"remotePath": "",
"includeHtml": true
},
"livereload": {
// /api 代理到的 url
"proxyTarget": "http://im.haloapp.vip",
//开启自动刷新
"available": true,
"port": 8080,
"startPath": "index.html"
},
//路径相对于 tasks/plugins 目录
"plugins": {
"build_devAfter": [],
"build_distAfter": [],
"ftpAfter": [
"ftp"
]
},
"lazyDir": [
"../slice"
],
//gulp-lazyImageCSS 寻找目录(https://github.com/weixin/gulp-lazyimagecss)
"supportWebp": false,
"supportREM": false,
"supportChanged": false,
"reversion": true,
"SVGGracefulDegradation": true
}
+249
View File
@@ -0,0 +1,249 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>春游记</title>
<%- include('../html_tpl/style.html') %>
<link rel="stylesheet" href="css/carnival.css">
<%- include('../html_tpl/headScript.html') %>
</head>
<body>
<div class="max">
<div class="topNav topNav1">
<div class="feedback"><img src="./img/carnival/feedback.png" alt=""></div>
<ul>
<li class="tab active">春暖花开</li>
<li class="tab">满园春色</li>
</ul>
<div class="help"><img src="./img/carnival/rule-btn.png" alt=""></div>
</div>
<div class="topNav topNav2">
<div class="help"><img src="./img/carnival/rule-btn.png" alt=""></div>
<ul>
<li class="tab active">春暖花开</li>
<li class="tab">满园春色</li>
</ul>
</div>
<div class="scrollMask">
<div class="container"></div>
<script type="text/html" id="scrollTmp">
{{each scrollMaskList}}
{{if scrollMaskList.length === 1}}
<li></li>
{{else}}
<li>
<span>{{$value.nick}}</span>在{{$value.table}}获得<span>{{$value.prizeName}}×{{$value.num}}</span>
</li>
{{/if}}
{{/each}}
</script>
</div>
<div class="rank-btn"><img src="./img/carnival/rank-btn.png" alt=""></div>
<div class="record-btn"><img src="./img/carnival/record-btn.png" alt=""></div>
<div class="canvas">
<div class="canvas-container">
<div class="turntable">
<div class="container1 first"></div>
<canvas id="table" width="428" height="428"></canvas>
<canvas id="table2" width="428" height="428"></canvas>
<div class="pointer">
<img src="./img/carnival/point.png" alt="">
</div>
<button class="btn">
<img src="./img/carnival/draw-btn.png" alt="">
</button>
</div>
</div>
</div>
<div class="info">
<span>我的门票: <small class="ticketNum">0</small>张</span>
<span id="toIndexBox"></span>
</div>
<script type="text/html" id="toIndexTpl">
<a href="{{'./index.html?uid='+ uid + '&roomUid=' + roomUid}}"><img src="./img/carnival/gather-btn.png" alt=""></a>
</script>
<div class="turnNum">
<li class="active ball">
<p class="num">1次</p>
<p class="ticket">-</p>
</li>
<li>
<p class="num">10次</p>
<p class="ticket">-</p>
</li>
<li>
<p class="num">100次</p>
<p class="ticket">-</p>
</li>
</div>
<div class="experience">
<div class="giftBox hide">
<img src="" alt="">
<span class="crit">暴击×5</span>
<span class="times"></span>
</div>
<div class="exp-container exp-container1">
<div class="strip exp-1"></div>
</div>
<div class="exp-num">
<span class="num">0</span>
<span>/</span>
<span class="maxNum">0</span>
</div>
<div class="tips">
<span>暴走值</span><span><img src="./img/carnival/rule-btn.png" alt=""></span>
</div>
</div>
<div class="status-mask">
<div class="title"></div>
<div class="tips"></div>
<div class="btn"></div>
</div>
<div class="gather-mask">
<div class="title">本轮获得</div>
<div class="tips">· 可前往个人背包查看 ·</div>
<ul class="gift-list"></ul>
<script type="text/html" id="gatherListTmp">
{{each gatherList}}
<li>
<p><img src="{{$value.prizeImgUrl}}" alt=""></p>
<p>×{{$value.prizeNum}}</p>
</li>
{{/each}}
</script>
<div class="btn">知道了</div>
</div>
<div class="rule-mask">
<div class="nav">
<div class="back"><img src="./img/carnival/back-btn.png" alt=""></div>
<div class="title">活动规则</div>
</div>
<div class="content">
<p><img src="./img/carnival/rule-text.png" alt=""></p>
</div>
</div>
<div class="rank-mask">
<div class="nav">
<div class="back"><img src="./img/carnival/back-btn.png" alt=""></div>
<div class="title">排行榜</div>
</div>
<div class="content">
<div class="tab">
<li class="active">捧场王</li>
<li>万人迷</li>
</div>
<div class="tips"><p>我是你爸爸</p></div>
<ul class="rank-container"></ul>
<script type="text/html" id="rankListTmp">
{{each rankList}}
<li>
{{if $index === 0}}
<p><img src="./img/carnival/rank-1.png" alt=""></p>
{{else if $index === 1}}
<p><img src="./img/carnival/rank-2.png" alt=""></p>
{{else if $index === 2}}
<p><img src="./img/carnival/rank-3.png" alt=""></p>
{{else}}
<p>{{$value.rank}}</p>
{{/if}}
<p class="avatar" data-uid="{{$value.uid}}"><img src="{{$value.avatar}}" alt=""></p>
<p class="info">
<span>{{$value.nick}}</span>
<span>ID:{{$value.erbanNo}}</span>
</p>
<p class="score">
{{if $value.rank === 1 || !$value.rank}}
<span class="align-center">No.1</span>
{{else}}
<span>
<small>{{$value.distance}}</small>
<small>距上名</small>
</span>
{{/if}}
</p>
</li>
{{/each}}
</script>
</div>
<div class="mine">
<p class="rank-num"></p>
<p class="avatar"><img src="" alt=""></p>
<p class="info">
<span class="nick"></span>
<span class="score"></span>
</p>
<p class="rank-info">
<span class="num"></span>
<span class="distance"></span>
</p>
</div>
</div>
<div class="record-mask">
<div class="nav">
<div class="back"><img src="./img/carnival/back-btn.png" alt=""></div>
<div class="title">抽奖记录</div>
</div>
<div class="tab">
<li class="active">
<p>时间</p>
<p></p>
</li>
<li>
<p>价值</p>
<p></p>
</li>
</div>
<div class="content">
<div class="record-container"></div>
<script type="text/html" id="recordTmp">
{{each recordList}}
<li>
<p><img src="{{$value.prizeImgUrl}}" alt=""></p>
<p>{{$value.prizeName}}×{{$value.prizeNum}}</p>
<p>
{{if worth}}
<span class="num">{{$value.platformValue}}金币</span>
{{else}}
<span>
<small>{{$value.hms}}</small>
<small>{{$value.ymd}}</small>
</span>
{{/if}}
</p>
</li>
{{/each}}
</script>
</div>
<div class="loading">加载中...</div>
<div class="tips">展示您最近300次中奖纪录</div>
</div>
<div class="shade"></div>
<div class="exp-toast">暴走状态随机礼物5倍获得概率。1转盘次数=1暴走值,暴走值每小时清零</div>
<div class="toast"></div>
</div>
<!-- <%- include('../html_tpl/downloadMask.html') %> -->
</body>
<%- include('../html_tpl/script.html') %>
<script src="../../common/js/jQueryRotate.js"></script>
<script src="js/carnival.js"></script>
</html>
File diff suppressed because it is too large. Load diff
+510
View File
@@ -0,0 +1,510 @@
@function px2rem($px, $rem:75) {
@return $px / $rem+rem;
}
@import '../../../common/css/flex.scss';
.mask {
z-index: 120;
position: fixed;
width: 100%;
left: 0;
bottom: 0;
display: flex;
height: 60px;
align-items: center;
background: rgba(0, 0, 0, 0.5);
justify-content: space-between;
padding: 0 8px;
box-sizing: border-box;
display: none;
.logo {
width: 40px;
img {
width: 100%;
}
}
.slogan {
color: #fff;
}
}
#download {
border: 1px solid #fff;
color: #fff;
width: 80px;
text-align: center;
border-radius: 15px;
line-height: 30px;
a {
color: #fff;
}
}
*{
-webkit-overflow-scrolling: touch;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
}
body{
font-family:PingFang SC;
background: #2B3137;
z-index:-1;
.max {
width: 100%;
margin: 0 auto;
.title-one {
width: 100%;
img {
width: 100%;
height: 100%;
}
}
.rule-btn {
width: px2rem(100);
height: px2rem(60);
position: absolute;
left: px2rem(30);
top: px2rem(20);
img {
width:100%;
height:100%;
}
}
.cloth-box {
width:100%;
padding-bottom:2.4rem;
margin:-2.2rem auto 0;
li {
width: px2rem(640);
height: px2rem(420);
position:relative;
margin:px2rem(10) auto 0;
@include flex();
@include flex-justify-center;
background:url('../img/index/li-card.png') no-repeat 0 0 / 100% 100%;
.h-title{
position:absolute;
margin: px2rem(30) auto 0;
letter-spacing:.053333rem;
font-size: px2rem(28);
font-weight: bold;
// color: #FFF;
color: #FEA53C;
line-height: px2rem(50);
}
.gift-img{
width:px2rem(146);
height: px2rem(130);
position:absolute;
box-sizing: border-box;
left: px2rem(87);
top: px2rem(124);
@include flex;
@include flex-align-center;
@include flex-justify-center;
img{
box-sizing: border-box;
padding: px2rem(10);
width:100%;
height: 100%;
object-fit: cover;
}
}
.gift-text{
position:absolute;
left: px2rem(302);
top: px2rem(115);
p:first-child{
font-size:px2rem(34);
font-weight:bold;
color: #00CF9E;
line-height:.56rem;
letter-spacing:.026667rem;
}
p:nth-child(2){
font-size:px2rem(28);
font-weight:bold;
color:#FFA530;
line-height:.56rem;
}
p:nth-child(3){
font-size:px2rem(26);
font-weight:500;
text-decoration:line-through;
color: #9C9C9C;
line-height:px2rem(47);
opacity:0.8;
}
p:last-child{
font-size:px2rem(26);
font-weight: 500;
color: #9C9C9C;
opacity:0.8;
line-height: px2rem(47);
}
}
.buy-btn{
width: px2rem(300);
height: px2rem(82);
position:absolute;
bottom: px2rem(28);
@include flex();
@include flex-justify-center;
background: url('../img/index/buy.png') no-repeat 0 0 / 100% 100%;
&.gray {
background: url('../img/index/buy-gray.png') no-repeat 0 0 / 100% 100%;
}
}
}
}
.buy-mask {
width: px2rem(616);
height: px2rem(596);
// border-radius:.213333rem;
// background-color: #FFFFFF;
position: fixed;
left:50%;
top:50%;
transform:translate(-50%,-50%);
background: url('../img/index/buy-bg.png') no-repeat 0 0 / 100% 100%;
z-index: 1001;
display: none;
.b-box{
padding: 0 .693333rem;
margin-top: px2rem(70);
.b-title{
color:#FEA43C;
line-height:.6rem;
text-align:center;
font-size:.48rem;
font-weight:bold;
letter-spacing:.013333rem;
.giftName{
font-size:.48rem;
font-weight:bold;
}
}
.b-number{
padding:0 .906667rem;
margin-top:.773333rem;
@include flex();
.input-box{
@include flex();
@include flex-align-center;
height:.64rem;
margin-top:-0.066667rem;
.remove-btn{
width:.64rem;
height:.64rem;
@include flex();
@include flex-justify-center;
@include flex-align-center;
border-radius:.32rem 0 0 .32rem;
background:rgba($color: #D4F4FF, $alpha: 0.6);
.remove-icon{
opacity: .6;
display:block;
width: px2rem(20);
height: px2rem(4);
background: url('../img/index/remove-icon.png') no-repeat 0 0 / 100% 100%;
background-size:100% 100%;
}
}
.b-input{
width:1.173333rem;
height:.64rem;
background:#D4F4FF;
text-align:center;
font-size:.346667rem;
font-weight:500;
color: #8FA4B8;
margin:0 .106667rem;
border:0;
outline:none;
}
.add-btn{
width:.64rem;
height:.64rem;
@include flex();
@include flex-justify-center;
@include flex-align-center;
border-radius:0 .32rem .32rem 0;
background:rgba($color: #D4F4FF, $alpha: 0.6);
.add-icon{
display:block;
width: px2rem(20);
height: px2rem(20);
background: url('../img/index/add-icon.png') no-repeat;
background-size:100% 100%;
}
}
}
}
.b-text{
white-space:nowrap;
font-size:.4rem;
font-weight:500;
color:rgba($color: #8EA4B7, $alpha: 1.0);
line-height:.48rem;
margin-bottom: px2rem(47);
span:first-child{
margin-right:.4rem;
}
}
.b-day{
padding:0 .906667rem;
span:nth-child(2),span:last-child{
color:#00CF9E;
letter-spacing:.013333rem;
}
}
.b-price{
padding:0 .906667rem;
span:nth-child(2),span:last-child{
color: #FFA530;
letter-spacing:.013333rem;
}
}
.b-btns{
@include flex();
@include flex-justify-between;
margin-top: px2rem(55);
.close-btn{
width: px2rem(251);
height: px2rem(87);
background:url('../img/index/btn-cancel.png') no-repeat 0 0 / 100% 100%;
@include flex();
@include flex-justify-center;
@include flex-align-center;
}
.confirm-btn{
width: px2rem(261);
height: px2rem(107);
background: url('../img/index/btn-confirm.png') no-repeat 0 0 / 100% 100%;
margin-top: px2rem(-2);
@include flex();
@include flex-justify-center;
@include flex-align-center;
}
}
}
}
.rule-mask {
width: px2rem(670);
height: px2rem(650);
position: fixed;
left: 50%;
top: 50%;
transform:translate(-50%,-50%);
z-index: 1001;
// background-color:#FFFFFF;
background: url('../img/index/buy-bg.png') no-repeat 0 0 / 100% 100%;
border-radius:.213333rem;
// overflow: hidden;
display: none;
.title {
width: 100%;
text-align: center;
font-size: px2rem(40);
color: #FEA43C;
margin-top: px2rem(70);
font-weight: bold;
// background: linear-gradient(0deg, #FFE691 0%, #FEFAD5 100%);
// -webkit-background-clip: text;
// -webkit-text-fill-color: transparent;
}
.content {
width: px2rem(524);
height: px2rem(425);
margin: 0 auto;
margin-top:.4rem;
overflow: auto;
&::-webkit-scrollbar {
display: none;
}
p {
width: 100%;
height:13.333333rem;
img {
width:100%;
}
}
}
.cancel {
width: px2rem(70);
height:px2rem(70);
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(-110);
img {
width:100%;
height:100%;
}
}
}
.statusMask {
width: px2rem(616);
height:6.8rem;
border-radius:.213333rem;
// background-color:#FFFFFF;
background: url('../img/index/buy-bg.png') no-repeat 0 0 / 100% 100%;
position: fixed;
left: 50%;
top: 50%;
transform:translate(-50%,-50%);
z-index: 1001;
display: none;
.cancel {
width: px2rem(70);
height: px2rem(70);
position: absolute;
left: 50%;
transform: translate(-50%,0);
bottom: px2rem(-80);
img {
width:100%;
height:100%;
}
}
.title {
width: 100%;
text-align: center;
font-size:.48rem;
color: #FEA43C;
font-weight:bold;
margin-top:.786667rem;
}
.avatar {
width: px2rem(140);
height: px2rem(140);
margin: 0 auto;
margin-top:.666667rem;
img {
width: 100%;
height:100%;
}
}
.tip {
width: 100%;
text-align: center;
font-size:.373333rem;
color: #5F82A3;
}
.in-btn, .recharge {
@include flex;
@include flex-align-center;
@include flex-justify-between;
display: block;
width: px2rem(300);
height: px2rem(90);
background:url('../img/index/btn.png') no-repeat 0 0 / 100% 100%;
background-size:100% 100%;
font-size: px2rem(36);
line-height: px2rem(92);
text-align: center;
margin:.533333rem auto 0;
font-weight: bold;
padding-bottom: px2rem(10);
color: #fff;
}
}
.shade {
width: 100%;
position:fixed;
z-index:1000;
left: 0;
top: 0;
height: 100%;
background:rgba(0,0,0,0.7);
display: none;
}
.mine {
@include flex();
@include flex-justify-between;
@include flex-align-center;
width: 100%;
height:1.866667rem;
position: fixed;
left: 0;
bottom: 0;
background: linear-gradient(0deg, #74A497, #3A5782);
z-index: 100;
li {
margin: 0 .533333rem;
img {
width: 100%;
}
&:first-child {
@include flex();
@include flex-justify-start;
@include flex-align-center;
p {
&:first-child {
width:1.066667rem;
height:1.066667rem;
border-radius:50%;
overflow: hidden;
font-weight:500;
}
&:last-child {
margin-left:.266667rem;
span {
display: block;
&:first-child {
line-height: px2rem(42);
font-size: px2rem(30);
color: #fff;
font-weight: bold;
}
&:last-child {
font-size: px2rem(24);
font-weight: 500;
color: rgba($color: #8BABC9, $alpha: 1);
b {
color: rgba($color: #fff, $alpha: 1);
}
}
}
}
}
}
&:last-child {
width: px2rem(201);
height: px2rem(89);
}
}
}
}
/*提示信息样式*/
.ajaxtiptext{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
text-align: center;
color:#FFFFFF;
padding:.2rem .4rem;
border-radius:.333333rem;
letter-spacing:.013333rem;
background:rgba(0,0,0,0.8);
animation:ajaxani 0.3s forwards;
z-index:9999;
white-space:nowrap;
}
}
+23
View File
@@ -0,0 +1,23 @@
var gulp = require('gulp');
var fs = require('fs');
var path = require('path');
// 注册
var deep = 3;
run_tasks('_tasks');
function run_tasks(tasks_path) {
if (--deep < 0) {
throw new Error('something wrong in require tasks!');
// eslint-disable-next-line no-unreachable
return;
}
tasks_path = path.join('../', tasks_path);
if (fs.existsSync(tasks_path)) {
require(tasks_path)(gulp);
} else {
run_tasks(tasks_path);
}
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 208 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 851 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 939 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 989 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Loaded 100 of 486 files, more files were not shown because too many files have changed in this diff. Show more