Skip to content

M
marketing
Commit 99ec97a4 by 陈玉桐
Options

项目初始化

parent 43512eb5
Showing with 702 additions and 170 deletions
.browserslistrc deleted 100644 → 0
> 1%
last 2 versions
.eslintrc.js deleted 100644 → 0
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'eslint:recommended'
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
},
parserOptions: {
parser: 'babel-eslint'
}
}
README.md
# marketing
## Project setup
```
npm install
```
# 营销工具
## Project setup 安装
## （先使用npm 安装依赖等）
## （如果没有npm环境的话......请先安装npm环境）
```
npm install
```
### Compiles and hot-reloads for development
### 运行dev环境
```
npm run serve
npm run dev
```
### Compiles and minifies for production
```
### 打包
```
npm run build
```
### Run your tests
```
npm run test
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
```
\ No newline at end of file
package-lock.json
......@@ -2005,6 +2005,43 @@
"integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==",
"dev": true
},
"axios": {
"version": "0.19.0",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz",
"integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==",
"requires": {
"follow-redirects": "1.5.10",
"is-buffer": "2.0.4"
},
"dependencies": {
"debug": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
"requires": {
"ms": "2.0.0"
}
},
"follow-redirects": {
"version": "1.5.10",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
"integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
"requires": {
"debug": "3.1.0"
}
},
"is-buffer": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz",
"integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A=="
},
"ms": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
}
}
},
"babel-eslint": {
"version": "10.0.3",
"resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.0.3.tgz",
......@@ -2114,6 +2151,11 @@
}
}
},
"base64-arraybuffer": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz",
"integrity": "sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ=="
},
"base64-js": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.1.tgz",
......@@ -3305,6 +3347,14 @@
"timsort": "0.3.0"
}
},
"css-line-break": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-1.1.1.tgz",
"integrity": "sha512-1feNVaM4Fyzdj4mKPIQNL2n70MmuYzAXZ1aytlROFX1JsOo070OsugwGjj7nl6jnDJWHDM8zRZswkmeYVWZJQA==",
"requires": {
"base64-arraybuffer": "0.2.0"
}
},
"css-loader": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.2.0.tgz",
......@@ -5839,6 +5889,14 @@
}
}
},
"html2canvas": {
"version": "1.0.0-rc.5",
"resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.0.0-rc.5.tgz",
"integrity": "sha512-DtNqPxJNXPoTajs+lVQzGS1SULRI4GQaROeU5R41xH8acffHukxRh/NBVcTBsfCkJSkLq91rih5TpbEwUP9yWA==",
"requires": {
"css-line-break": "1.1.1"
}
},
"htmlparser2": {
"version": "3.10.1",
"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
......
package.json
......@@ -4,11 +4,13 @@
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
"dev": "npm run serve",
"build": "vue-cli-service build"
},
"dependencies": {
"axios": "^0.19.0",
"core-js": "^3.3.2",
"html2canvas": "^1.0.0-rc.5",
"vue": "^2.6.10",
"vue-router": "^3.1.3",
"vuex": "^3.0.1"
......@@ -23,5 +25,29 @@
"sass": "^1.19.0",
"sass-loader": "^8.0.0",
"vue-template-compiler": "^2.6.10"
}
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"ie > 8"
]
}
postcss.config.js deleted 100644 → 0
module.exports = {
plugins: {
autoprefixer: {}
}
}
public/index.html
......@@ -3,9 +3,9 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>marketing</title>
<title>营销工具</title>
</head>
<body>
<noscript>
......
src/App.vue
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
<router-view></router-view>
</div>
</template>
<style lang="scss">
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
<script>
export default {
name: 'app',
mounted() {},
};
</script>
\ No newline at end of file
src/components/HelloWorld.vue deleted 100644 → 0
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
src/components/navigaton/navigation.vue 0 → 100644
<template>
<div id="footer-navigation" :class="{'iphoneX':isX}">
<ul>
<li v-show="!applyStatus" v-on:click="redirectIndex"><img src="./assets/touzi.png"><span>活动报名</span></li>
<li v-show="applyStatus"><img src="./assets/touzi_hong.png"><span class="active">活动报名</span></li>
<li v-show="!toolStatus" v-on:click="redirectTool"><img src="./assets/zhanghu.png"><span>活动工具</span></li>
<li v-show="toolStatus"><img src="./assets/zhanghu_hong.png"><span class="active" >活动工具</span></li>
<li v-show="!mineStatus" v-on:click="redirectMine"><img src="./assets/liwu.png"><span>个人中心</span></li>
<li v-show="mineStatus" ><img src="./assets/liwu_hong.png"><span class="active">个人中心</span></li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
}
},
props: {
applyStatus: {
type: Boolean,
required: true,
default: false
},
mineStatus: {
type: Boolean,
required: true,
default: true
},
toolStatus: {
type: Boolean,
required: true,
default: true
},
isX: false
},
mounted () {
},
methods: {
redirectIndex () {
this.$router.push({name: 'index'})
},
redirectTool () {
this.$router.push({name: 'tool'})
},
redirectMine () {
this.$router.push({name: 'mine'})
}
}
}
</script>
<style lang="scss">
.iphoneX{
padding-bottom: 20px;
}
#footer-navigation{
width: 100%;
position: fixed;
left: 0;
bottom: 0;
background: #FFFFFF;
z-index: 9999;
border-top: 1px solid #ccc;
ul{
display: flex;
justify-content: space-around;
width: 100%;
margin: 0;
padding: 5px 0;
li{
padding-top: 4px;
list-style: none;
display: flex;
flex-direction:column;
align-items:center;
justify-content: center;
height: 100%;
position: relative;
img{
width: 20px;
}
span{
font-size: 10px;
color: #333333;
display:block;
}
.active{
color: #FF4657;
}
}
}
}
</style>
\ No newline at end of file
src/main.js
......@@ -3,6 +3,8 @@ import App from './App.vue'
import router from './router'
import store from './store'
import './styles/index.scss'; // global css
Vue.config.productionTip = false
new Vue({
......
src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: Home
name: 'index',
component: () => import(/* webpackChunkName: "index" */ '../views/index.vue')
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
path: '/tool',
name: 'tool',
component: () => import(/* webpackChunkName: "tool" */ '../views/tool.vue')
},
{
path: '/mine',
name: 'mine',
component: () => import(/* webpackChunkName: "mine" */ '../views/mine.vue')
},
]
const router = new VueRouter({
......
src/styles/index.scss 0 → 100644
body {
height: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
margin: 0;
}
label {
font-weight: 700;
}
html {
height: 100%;
box-sizing: border-box;
}
#app{
height: 100%;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.no-padding {
padding: 0px !important;
}
.padding-content {
padding: 4px 0;
}
a:focus,
a:active {
outline: none;
}
a,
a:focus,
a:hover {
cursor: pointer;
color: inherit;
text-decoration: none;
}
div:focus{
outline: none;
}
.fr {
float: right;
}
.fl {
float: left;
}
.pr-5 {
padding-right: 5px;
}
.pl-5 {
padding-left: 5px;
}
.block {
display: block;
}
.pointer {
cursor: pointer;
}
.inlineBlock {
display: block;
}
.clearfix {
&:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
}
h1,h2,h3,h4,h5,h6,i,em,strong,b{
font-style: normal; font-weight: normal;
}
ol,ul,li{
list-style-type: none;
margin: 0;
padding: 0;
}
div,span{
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
/* 加载层 */
.loading{
width: 100%;
min-height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
display: none;
}
.loading>.loadingCon{
background: rgba( 230, 230, 230,0.5);
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: 50px;
margin-top: 50px;
border-radius: 8px;
display: flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
align-items: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
}
.loading>.loadingCon>img{
width: 75px;
height: 75px;
}
src/utils/request.js 0 → 100644
import axios from 'axios'
import store from '@/store'
// create an axios instance 创建实例
const service = axios.create({
// baseURL: '', // url = base url + request url
baseURL: '', // url = base url + request url
timeout: 600000 // request timeout
})
// request interceptor 拦截
service.interceptors.request.use(
config => {
// do something before request is sent
if (store.getters.token) {
// let each request carry token
// ['X-Token'] is a custom headers key
// please modify it according to the actual situation
// config.headers['X-Token'] = getToken()
}
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
// response interceptor
service.interceptors.response.use(
/**
* If you want to get http information such as headers or status
* Please return response => response
*/
response => {
const res = response.data
// if the custom errno is not 200, it is judged as an error.
if (res.errno !== 200) {
alert(res.msg)
return Promise.reject(new Error(res.message || 'Error'))
} else {
// success
return res
}
},
error => {
// console.log('err' + error) // for debug
// console.log(error.response.status)
if(error.response.status == 400 || error.response.status == 409){
alert(error.response.data.msg)
}else{
alert(error.message)
}
return Promise.reject(error)
}
)
export default service
\ No newline at end of file
src/views/About.vue deleted 100644 → 0
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
src/views/Home.vue deleted 100644 → 0
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'home',
components: {
HelloWorld
}
}
</script>
src/views/index.vue 0 → 100644
<template>
<div id="home">
<div>
列表列表
</div>
<div class="loading">
<div class="loadingCon">
<img src="../assets/loading.gif">
</div>
</div>
<navigation :is-x="isX" :apply-status="applyStatus" :tool-status="toolStatus" :mine-status="mineStatus"></navigation>
</div>
</template>
<script>
import navigation from '../components/navigaton/navigation.vue'
import request from '../utils/request'
export default {
data() {
return{
isX: false,
applyStatus: true,
toolStatus: false,
mineStatus: false,
}
},
components: {
navigation
},
mounted() {
var u = navigator.userAgent, app = navigator.appVersion;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isiOS) {
var w=window.screen.width * window.devicePixelRatio;
var h=window.screen.height * window.devicePixelRatio;
if(w==1125&&h==2436){
this.isX = true;
}
}
// request({
// url: '/api/index',
// method: 'get',
// }).then(response => {
// })
},
methods: {
}
}
</script>
<style lang="scss">
#home{
height: 100%;
}
</style>
\ No newline at end of file
src/views/mine.vue 0 → 100644
<template>
<div id="home">
<div>
个人中心
</div>
<div class="loading">
<div class="loadingCon">
<img src="../assets/loading.gif">
</div>
</div>
<navigation :is-x="isX" :apply-status="applyStatus" :tool-status="toolStatus" :mine-status="mineStatus"></navigation>
</div>
</template>
<script>
import navigation from '../components/navigaton/navigation.vue'
import request from '../utils/request'
export default {
data() {
return{
isX: false,
applyStatus: false,
toolStatus: false,
mineStatus: true,
}
},
components: {
navigation
},
mounted() {
var u = navigator.userAgent, app = navigator.appVersion;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isiOS) {
var w=window.screen.width * window.devicePixelRatio;
var h=window.screen.height * window.devicePixelRatio;
if(w==1125&&h==2436){
this.isX = true;
}
}
// request({
// url: '/api/index',
// method: 'get',
// }).then(response => {
// })
},
methods: {
}
}
</script>
<style lang="scss">
#home{
height: 100%;
}
</style>
\ No newline at end of file
src/views/tool.vue 0 → 100644
<template>
<div id="tool">
<div id="posterBox">
<img id="qrcode" src="../assets/qrcode.png">
</div>
<div id="createButton">
<span @click="create">生成海报</span>
</div>
<div id="poster" v-show="showPoster">
<img :src="posterUrl">
<span @click="close">×</span>
</div>
<div class="loading">
<div class="loadingCon">
<img src="../assets/loading.gif">
</div>
</div>
<navigation :is-x="isX" :apply-status="applyStatus" :tool-status="toolStatus" :mine-status="mineStatus"></navigation>
</div>
</template>
<script>
import navigation from '../components/navigaton/navigation.vue'
import html2canvas from 'html2canvas'
import request from '../utils/request'
export default {
data() {
return{
posterUrl: '',
showPoster: false,
isX: false,
applyStatus: false,
toolStatus: true,
mineStatus: false,
}
},
components: {
navigation
},
mounted() {
var u = navigator.userAgent, app = navigator.appVersion;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isiOS) {
var w=window.screen.width * window.devicePixelRatio;
var h=window.screen.height * window.devicePixelRatio;
if(w==1125&&h==2436){
this.isX = true;
}
}
// request({
// url: '/api/index',
// method: 'get',
// }).then(response => {
// })
},
methods: {
create() {
html2canvas(document.getElementById('posterBox'), {
useCORS: true,
backgroundColor:null,
}).then(canvas => {
// console.log(canvas.toDataURL('image/png'));
// img.src =canvas.toDataURL("image/png").replace("image/png","image/octet-stream")
// img.src = canvas.toDataURL().replace("image/png", "image/octet-stream");
this.posterUrl = canvas.toDataURL('image/png')
this.showPoster = true
})
},
close() {
this.showPoster = false
}
}
}
</script>
<style lang="scss">
#tool{
height: 100%;
padding-bottom: 55px;
}
#posterBox{
position: relative;
height: 90%;
background: url('../assets/posterBg.png') no-repeat;
background-size: 100% 100%;
}
#qrcode{
width: 200px;
position: absolute;
right: 30px;
bottom: 100px;
}
#createButton{
height: 10%;
text-align: center;
}
#createButton span{
display: inline-block;
padding: 10px;
border-radius: 5px;
font-size: 30px;
background: #ccc;
}
#poster{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99999;
}
#poster img{
width: 100%;
height: 100%;
}
#poster span{
font-size: 50px;
position: absolute;
top: 10px;
right: 10px;
}
</style>
\ No newline at end of file
vue.config.js 0 → 100644
module.exports = {
// lintOnSave: true, // 是否在保存的时候检查
productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
// publicPath: process.env.VUE_APP_PUBLICPATH,
css: {
// extract: true, // 是否使用css分离插件 ExtractTextPlugin
sourceMap: false, // 开启 CSS source maps
loaderOptions: {}, // css预设器配置项
// modules: false // 启用 CSS modules for all css / pre-processor files.
},
//反向代理
devServer: {
// 环境配置
// open: true, //配置自动启动浏览器
// proxy: {
// '/api': {
// target: 'https://ooadmin.inner.iouou.cn',
// pathRewrite: {
// '^/api': '/api'
// }
// }
// }
},
configureWebpack: config => {
},
pluginOptions: {
// 第三方插件配置
// ...
},
chainWebpack: config => {
// 修复HMR
config.resolve.symlinks(true);
// 关闭预加载
config.plugins.delete('prefetch')
},
lintOnSave: false // 关闭eslint代码检查
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment