Skip to content

M
marketing
Commit dcede909 by 陈玉桐
Options

add所有

parent 99ec97a4
Showing with 2131 additions and 116 deletions
package-lock.json
...@@ -1872,6 +1872,13 @@ ...@@ -1872,6 +1872,13 @@
"integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=", "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
"dev": true "dev": true
}, },
"asap": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
"integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
"dev": true,
"optional": true
},
"asn1": { "asn1": {
"version": "0.2.4", "version": "0.2.4",
"resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz", "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
...@@ -6045,6 +6052,13 @@ ...@@ -6045,6 +6052,13 @@
"integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==", "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
"dev": true "dev": true
}, },
"image-size": {
"version": "0.5.5",
"resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
"integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=",
"dev": true,
"optional": true
},
"import-cwd": { "import-cwd": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz", "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
...@@ -6693,6 +6707,64 @@ ...@@ -6693,6 +6707,64 @@
"invert-kv": "2.0.0" "invert-kv": "2.0.0"
} }
}, },
"less": {
"version": "3.10.3",
"resolved": "https://registry.npmjs.org/less/-/less-3.10.3.tgz",
"integrity": "sha512-vz32vqfgmoxF1h3K4J+yKCtajH0PWmjkIFgbs5d78E/c/e+UQTnI+lWK+1eQRE95PXM2mC3rJlLSSP9VQHnaow==",
"dev": true,
"requires": {
"clone": "2.1.2",
"errno": "0.1.7",
"graceful-fs": "4.2.3",
"image-size": "0.5.5",
"mime": "1.6.0",
"mkdirp": "0.5.1",
"promise": "7.3.1",
"request": "2.88.0",
"source-map": "0.6.1"
},
"dependencies": {
"clone": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
"integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
"dev": true
},
"mime": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
"integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
"dev": true,
"optional": true
},
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true,
"optional": true
}
}
},
"less-loader": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/less-loader/-/less-loader-5.0.0.tgz",
"integrity": "sha512-bquCU89mO/yWLaUq0Clk7qCsKhsF/TZpJUzETRvJa9KSVEL9SO3ovCvdEHISBhrC81OwC8QSVX7E0bzElZj9cg==",
"dev": true,
"requires": {
"clone": "2.1.2",
"loader-utils": "1.2.3",
"pify": "4.0.1"
},
"dependencies": {
"clone": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
"integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
"dev": true
}
}
},
"levn": { "levn": {
"version": "0.3.0", "version": "0.3.0",
"resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz", "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
...@@ -8583,6 +8655,16 @@ ...@@ -8583,6 +8655,16 @@
"integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==", "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
"dev": true "dev": true
}, },
"promise": {
"version": "7.3.1",
"resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
"integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
"dev": true,
"optional": true,
"requires": {
"asap": "2.0.6"
}
},
"promise-inflight": { "promise-inflight": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz", "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
...@@ -8677,10 +8759,9 @@ ...@@ -8677,10 +8759,9 @@
"dev": true "dev": true
}, },
"qs": { "qs": {
"version": "6.5.2", "version": "6.9.0",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz", "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.0.tgz",
"integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==", "integrity": "sha512-27RP4UotQORTpmNQDX8BHPukOnBP3p1uUJY5UnDhaJB+rMt9iMsok724XL+UHU23bEFOHRMQ2ZhI99qOWUMGFA=="
"dev": true
}, },
"query-string": { "query-string": {
"version": "4.3.4", "version": "4.3.4",
...@@ -8993,6 +9074,14 @@ ...@@ -8993,6 +9074,14 @@
"tough-cookie": "2.4.3", "tough-cookie": "2.4.3",
"tunnel-agent": "0.6.0", "tunnel-agent": "0.6.0",
"uuid": "3.3.3" "uuid": "3.3.3"
},
"dependencies": {
"qs": {
"version": "6.5.2",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
"integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
"dev": true
}
} }
}, },
"request-promise-core": { "request-promise-core": {
......
package.json
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
"axios": "^0.19.0", "axios": "^0.19.0",
"core-js": "^3.3.2", "core-js": "^3.3.2",
"html2canvas": "^1.0.0-rc.5", "html2canvas": "^1.0.0-rc.5",
"qs": "^6.9.0",
"vue": "^2.6.10", "vue": "^2.6.10",
"vue-router": "^3.1.3", "vue-router": "^3.1.3",
"vuex": "^3.0.1" "vuex": "^3.0.1"
...@@ -22,6 +23,8 @@ ...@@ -22,6 +23,8 @@
"babel-eslint": "^10.0.3", "babel-eslint": "^10.0.3",
"eslint": "^5.16.0", "eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0", "eslint-plugin-vue": "^5.0.0",
"less": "^3.10.3",
"less-loader": "^5.0.0",
"sass": "^1.19.0", "sass": "^1.19.0",
"sass-loader": "^8.0.0", "sass-loader": "^8.0.0",
"vue-template-compiler": "^2.6.10" "vue-template-compiler": "^2.6.10"
......
public/index.html
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<title>营销工具</title> <title>营销工具</title>
</head> </head>
<body> <body>
......
src/assets/posterBg.png
src/assets/posterBg.png

833 KB | W: | H:

src/assets/posterBg.png

64.1 KB | W: | H:

src/assets/posterBg.png
src/assets/posterBg.png
src/assets/posterBg.png
src/assets/posterBg.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/qrcode.png
src/assets/qrcode.png

87.4 KB | W: | H:

src/assets/qrcode.png

21.3 KB | W: | H:

src/assets/qrcode.png
src/assets/qrcode.png
src/assets/qrcode.png
src/assets/qrcode.png
  • 2-up
  • Swipe
  • Onion skin
src/components/infiniteScroll/circular.vue 0 → 100644
<template>
<div class="mu-circle-wrapper active">
<div class="mu-circle-spinner active" :class="{'mu-circle-secondary': secondary}">
<div class="mu-circle-clipper left">
<div class="mu-circle"></div>
</div>
<div class="mu-circle-gap-patch">
<div class="mu-circle"></div>
</div>
<div class="mu-circle-clipper right">
<div class="mu-circle"></div>
</div>
</div>
</div>
</template>
<script>
/*eslint-disable*/
export default {
props: {
secondary: {
type: Boolean,
default: false
}
},
computed: {
}
}
</script>
<style lang="less">
@import "./mixins.less";
.mu-circle-wrapper {
display: inline-block;
position: relative;
width: 15px;
height: 15px;
&.active{
-webkit-animation: container-rotate 1568ms linear infinite;
animation: container-rotate 1568ms linear infinite;
}
.mu-circle {
border-radius: 50%;
}
.left {
float: left !important;
}
.right {
float: right !important;
}
}
.mu-circle-spinner {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
border-color: #848484;
opacity: 1;
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.mu-circle-clipper {
display: inline-block;
position: relative;
width: 50%;
height: 100%;
overflow: hidden;
border-color: inherit;
}
.mu-circle-gap-patch {
position: absolute;
top: 0;
left: 45%;
width: 10%;
height: 100%;
overflow: hidden;
border-color: inherit;
}
.mu-circle-gap-patch .mu-circle {
width: 1000%;
left: -450%;
}
.mu-circle-clipper .mu-circle {
width: 200%;
height: 100%;
border-width: 1.5px;
border-style: solid;
border-color: inherit;
border-bottom-color: transparent !important;
border-radius: 50%;
-webkit-animation: none;
animation: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
}
.mu-circle-spinner.active .mu-circle-clipper.left .mu-circle {
-webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.mu-circle-spinner.active .mu-circle-clipper.right .mu-circle {
-webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.mu-circle-clipper.left .mu-circle {
left: 0;
border-right-color: transparent !important;
-webkit-transform: rotate(129deg);
transform: rotate(129deg);
}
.mu-circle-clipper.right .mu-circle {
left: -100%;
border-left-color: transparent !important;
-webkit-transform: rotate(-129deg);
transform: rotate(-129deg);
}
@-webkit-keyframes fill-unfill-rotate {
12.5% {
-webkit-transform: rotate(135deg);
}
25% {
-webkit-transform: rotate(270deg);
}
37.5% {
-webkit-transform: rotate(405deg);
}
50% {
-webkit-transform: rotate(540deg);
}
62.5% {
-webkit-transform: rotate(675deg);
}
75% {
-webkit-transform: rotate(810deg);
}
87.5% {
-webkit-transform: rotate(945deg);
}
to {
-webkit-transform: rotate(1080deg);
}
}
@keyframes fill-unfill-rotate {
12.5% {
transform: rotate(135deg);
}
25% {
transform: rotate(270deg);
}
37.5% {
transform: rotate(405deg);
}
50% {
transform: rotate(540deg);
}
62.5% {
transform: rotate(675deg);
}
75% {
transform: rotate(810deg);
}
87.5% {
transform: rotate(945deg);
}
to {
transform: rotate(1080deg);
}
}
@-webkit-keyframes left-spin {
from {
-webkit-transform: rotate(130deg);
}
50% {
-webkit-transform: rotate(-5deg);
}
to {
-webkit-transform: rotate(130deg);
}
}
@keyframes left-spin {
from {
transform: rotate(130deg);
}
50% {
transform: rotate(-5deg);
}
to {
transform: rotate(130deg);
}
}
@-webkit-keyframes right-spin {
from {
-webkit-transform: rotate(-130deg)
}
50% {
-webkit-transform: rotate(5deg)
}
to {
-webkit-transform: rotate(-130deg)
}
}
@keyframes right-spin {
from {
transform: rotate(-130deg)
}
50% {
transform: rotate(5deg)
}
to {
transform: rotate(-130deg)
}
}
@-webkit-keyframes container-rotate {
to {
-webkit-transform: rotate(360deg);
}
}
@keyframes container-rotate {
to {
transform: rotate(360deg);
}
}
</style>
src/components/infiniteScroll/infiniteScroll.vue 0 → 100644
<template>
<div class="mu-infinite-scroll" v-show="loading">
<circular v-show="loading" :size="30"></circular>
<span v-show="loading" class="mu-infinite-scroll-text">{{loadingText}}</span>
</div>
</template>
<script>
import Scroll from './scroll'
import circular from './circular.vue'
export default {
name: 'mu-infinite-scroll',
mixins: [Scroll],
props: {
loading: {
type: Boolean,
default: false
},
loadingText: {
type: String,
default: '正在加载。。。'
},
isLoaded: {
type: Boolean,
default: false
}
},
methods: {
onScroll () {
if (this.loading || this.isLoaded) return
const scroller = this.scroller
const isWindow = scroller === window
const scrollTop = isWindow ? scroller.scrollY : scroller.scrollTop
const scrollHeight = isWindow ? document.documentElement.scrollHeight || document.body.scrollHeight : scroller.scrollHeight
let h = scrollHeight - scrollTop - 5
let sh = isWindow ? window.innerHeight : scroller.offsetHeight
if (h <= sh) {
this.$emit('load')
}
}
},
components: {
circular
}
}
</script>
<style lang="css">
.mu-infinite-scroll{
display: flex;
justify-content: center;
align-items: center;
padding: 7.5px 0;
line-height: 32px;
width: 100%;
background: #f0f0f0;
}
.mu-infinite-scroll-text{
margin-left: 8px;
font-size: 14px;
color: #848484;
}
</style>
src/components/infiniteScroll/mixins.less 0 → 100644
.transition(@d) {
-webkit-transition-duration: @d;
transition-duration: @d;
}
.delay(@d) {
-webkit-transition-delay: @d;
transition-delay: @d;
}
.transform(@t) {
-webkit-transform: @t;
transform: @t;
}
.transform-origin(@to) {
-webkit-transform-origin: @to;
transform-origin: @to;
}
.translate3d(@x:0, @y:0, @z:0) {
-webkit-transform: translate3d(@x,@y,@z);
transform: translate3d(@x,@y,@z);
}
.animation (@a) {
-webkit-animation: @a;
animation: @a;
}
.scrollable() {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.flex-shrink(@fs) {
-webkit-box-flex: @fs;
-webkit-flex-shrink: @fs;
-ms-flex: 0 @fs auto;
flex-shrink: @fs;
}
.clearfix() {
&:after,
&:before {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
.hairline(@position, @color) when (@position = top) {
&:before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: auto;
right: auto;
height: 1px;
width: 100%;
background-color: @color;
display: block;
z-index: 15;
// .transform-origin(50% 0%);
html.pixel-ratio-2 & {
.transform(scaleY(0.5));
}
html.pixel-ratio-3 & {
.transform(scaleY(0.33));
}
}
}
.hairline(@position, @color) when (@position = left) {
&:before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: auto;
right: auto;
width: 1px;
height: 100%;
background-color: @color;
display: block;
z-index: 15;
// .transform-origin(0% 50%);
html.pixel-ratio-2 & {
.transform(scaleX(0.5));
}
html.pixel-ratio-3 & {
.transform(scaleX(0.33));
}
}
}
.hairline(@position, @color) when (@position = bottom) {
&:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
right: auto;
top: auto;
height: 1px;
width: 100%;
background-color: @color;
display: block;
z-index: 15;
html.pixel-ratio-2 & {
.transform(scaleY(0.5));
}
html.pixel-ratio-3 & {
.transform(scaleY(0.33));
}
}
}
.hairline(@position, @color) when (@position = right) {
&:after {
content: '';
position: absolute;
right: 0;
top: 0;
left: auto;
bottom: auto;
width: 1px;
height: 100%;
background-color: @color;
display: block;
z-index: 15;
// .transform-origin(100% 50%);
html.pixel-ratio-2 & {
.transform(scaleX(0.5));
}
html.pixel-ratio-3 & {
.transform(scaleX(0.33));
}
}
}
// For right and bottom
.hairline-remove(@position) when not (@position = left) and not (@position = top) {
&:after {
display: none;
}
}
// For left and top
.hairline-remove(@position) when not (@position = right) and not (@position = bottom) {
&:before {
display: none;
}
}
// For right and bottom
.hairline-color(@position, @color) when not (@position = left) and not (@position = top) {
&:after {
background-color: @color;
}
}
// For left and top
.hairline-color(@position, @color) when not (@position = right) and not (@position = bottom) {
&:before {
background-color: @color;
}
}
// Encoded SVG Background
.encoded-svg-background(@svg) {
@url: `encodeURIComponent(@{svg})`;
background-image: url("data:image/svg+xml;charset=utf-8,@{url}");
}
// Preserve3D
.preserve3d() {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
// Shadow
.depth(@level:1) {
& when (@level = 1) {
box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px;
}
& when (@level = 2) {
box-shadow: rgba(0, 0, 0, 0.156863) 0px 3px 10px, rgba(0, 0, 0, 0.227451) 0px 3px 10px;
}
& when (@level = 3) {
box-shadow: rgba(0, 0, 0, 0.188235) 0px 10px 30px, rgba(0, 0, 0, 0.227451) 0px 6px 10px;
}
& when (@level = 4) {
box-shadow: rgba(0, 0, 0, 0.247059) 0px 14px 45px, rgba(0, 0, 0, 0.219608) 0px 10px 18px;
}
& when (@level = 5) {
box-shadow: rgba(0, 0, 0, 0.298039) 0px 19px 60px, rgba(0, 0, 0, 0.219608) 0px 15px 20px;
}
}
// Highlighted Links
.active-highlight(@color:rgba(255, 255, 255, 0.15)){
&:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: @color;
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
opacity: 0;
pointer-events: none;
.transition(600ms);
}
&.active-state:before,
html:not(.watch-active-state) &:active:before {
opacity: 1;
.transition(150ms);
}
}
.active-highlight-color(@color) {
&:before {
background-image: -webkit-radial-gradient(center, circle cover, @color 66%, rgba(red(@color),green(@color),blue(@color),0) 66%);
background-image: radial-gradient(circle at center, @color 66%, rgba(red(@color),green(@color),blue(@color),0) 66%);
}
}
// No Scrollbar
.no-scrollbar() {
&::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
opacity: 0 !important;
}
}
.ellipsis() {
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
word-wrap: break-word;
}
src/components/infiniteScroll/scroll.js 0 → 100644
export default {
props: {
scroller: {}
},
mounted () {
this.$bindScroll()
},
methods: {
$bindScroll () {
const scroller = this.scroller || window
this._handleScroll = (e) => {
if (this.onScroll) this.onScroll()
}
scroller.addEventListener('scroll', this._handleScroll)
},
$unbindScroll (scroller) {
scroller = scroller || this.scroller || window
if (this._handleScroll) scroller.removeEventListener('scroll', this._handleScroll)
}
},
beforeDestroy () {
this.$unbindScroll()
},
watch: {
scroller (scroller, oldScroller) {
if (scroller === oldScroller) return
this.$unbindScroll(oldScroller)
this.$bindScroll(scroller)
}
}
}
src/components/loading/loading.vue 0 → 100644
<template>
<div class="loading" v-show="loadingShow">
<div class="loadingCon">
<img src="./assets/loading.gif">
</div>
</div>
</template>
<script>
export default {
data () {
return {
}
},
props: {
loadingShow: {
type: Boolean,
required: true,
default: false
},
},
mounted () {
},
methods: {
}
}
</script>
<style lang="scss">
/* 加载层 */
.loading{
width: 100%;
min-height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99999;
}
.loading>.loadingCon{
background: rgba( 230, 230, 230,0.5);
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;
border-radius: 4px;
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: 38px;
height: 38px;
}
</style>
\ No newline at end of file
src/components/navigaton/navigation.vue
<template> <template>
<div id="footer-navigation" :class="{'iphoneX':isX}"> <div id="footer-navigation" :class="{'iphoneX':isX}">
<ul> <ul>
<li v-show="!applyStatus" v-on:click="redirectIndex"><img src="./assets/touzi.png"><span>活动报名</span></li> <li class="navApply" v-show="!applyStatus" v-on:click="redirectIndex"><img src="./assets/icon_sign_nor.png"><span>活动报名</span></li>
<li v-show="applyStatus"><img src="./assets/touzi_hong.png"><span class="active">活动报名</span></li> <li class="navApply" v-show="applyStatus"><img src="./assets/icon_sign_sel.png"><span class="active">活动报名</span></li>
<li v-show="!toolStatus" v-on:click="redirectTool"><img src="./assets/zhanghu.png"><span>活动工具</span></li> <li class="navLine"></li>
<li v-show="toolStatus"><img src="./assets/zhanghu_hong.png"><span class="active" >活动工具</span></li> <li v-show="!toolStatus" v-on:click="redirectTool"><img src="./assets/icon_tool_nor.png"><span>活动工具</span></li>
<li v-show="!mineStatus" v-on:click="redirectMine"><img src="./assets/liwu.png"><span>个人中心</span></li> <li v-show="toolStatus"><img src="./assets/icon_tool_sel.png"><span class="active" >活动工具</span></li>
<li v-show="mineStatus" ><img src="./assets/liwu_hong.png"><span class="active">个人中心</span></li> <li class="navLine"></li>
<li class="navMine" v-show="!mineStatus" v-on:click="redirectMine"><img src="./assets/icon_mine_nor.png"><span>个人中心</span></li>
<li class="navMine" v-show="mineStatus" ><img src="./assets/icon_mine_sel.png"><span class="active">个人中心</span></li>
</ul> </ul>
</div> </div>
</template> </template>
...@@ -61,13 +63,13 @@ ...@@ -61,13 +63,13 @@
bottom: 0; bottom: 0;
background: #FFFFFF; background: #FFFFFF;
z-index: 9999; z-index: 9999;
border-top: 1px solid #ccc; border-top: 1px solid #979797;
ul{ ul{
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 5px 0; padding: 1px 0 5px 0;
li{ li{
padding-top: 4px; padding-top: 4px;
list-style: none; list-style: none;
...@@ -78,17 +80,29 @@ ...@@ -78,17 +80,29 @@
height: 100%; height: 100%;
position: relative; position: relative;
img{ img{
width: 20px; width: 32px;
} }
span{ span{
font-size: 10px; font-size: 12px;
color: #333333; color: #282B2F;
display:block; display:block;
} }
.active{ .active{
color: #FF4657; color: #44D7B6;
} }
} }
.navLine{
width: 1px;
height: 15px;
background: #979797;
margin-top: 14px;
}
.navApply{
padding-left: 15px;
}
.navMine{
padding-right: 15px;
}
} }
} }
</style> </style>
\ No newline at end of file
src/main.js
...@@ -2,11 +2,32 @@ import Vue from 'vue' ...@@ -2,11 +2,32 @@ import Vue from 'vue'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
import store from './store' import store from './store'
import './styles/index.scss'; // global css import './styles/index.scss'; // global css
import setWechatTitle from './utils/setWechatTitle'
Vue.config.productionTip = false Vue.config.productionTip = false
router.beforeEach((to, from, next) => {
console.log(localStorage.getItem("token"))
if(!localStorage.getItem("token")){
localStorage.setItem("token","oZXSFtw8JcLyFIdtKc6TvkJm4crA")
}
next()
// // 这个redirectUrl用 当前页路径
// let redirectUrl = window.location.href
// redirectUrl = encodeURIComponent(redirectUrl)
// console.log(redirectUrl)
// const appid='wx0201b63e761568b8'
// window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirectUrl}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
})
router.afterEach((transition) => {
setWechatTitle(transition.meta.title)
})
new Vue({ new Vue({
router, router,
store, store,
......
src/router/index.js
...@@ -7,18 +7,51 @@ const routes = [ ...@@ -7,18 +7,51 @@ const routes = [
{ {
path: '/', path: '/',
name: 'index', name: 'index',
meta: { title: '活动' },
component: () => import(/* webpackChunkName: "index" */ '../views/index.vue') component: () => import(/* webpackChunkName: "index" */ '../views/index.vue')
}, },
{ {
path: '/tool', path: '/tool',
name: 'tool', name: 'tool',
meta: { title: '工具' },
component: () => import(/* webpackChunkName: "tool" */ '../views/tool.vue') component: () => import(/* webpackChunkName: "tool" */ '../views/tool.vue')
}, },
{ {
path: '/mine', path: '/mine',
name: 'mine', name: 'mine',
meta: { title: '个人中心' },
component: () => import(/* webpackChunkName: "mine" */ '../views/mine.vue') component: () => import(/* webpackChunkName: "mine" */ '../views/mine.vue')
}, },
{
path: '/activityDetail/:id',
name: 'activityDetail',
meta: { title: '活动详情' },
component: () => import(/* webpackChunkName: "activity" */ '../views/activityDetail.vue')
},
{
path: '/applyInfo/:id',
name: 'applyInfo',
meta: { title: '报名信息' },
component: () => import(/* webpackChunkName: "mine" */ '../views/applyInfo.vue')
},
{
path: '/activityHistory',
name: 'activityHistory',
meta: { title: '活动记录' },
component: () => import(/* webpackChunkName: "mine" */ '../views/activityHistory.vue')
},
{
path: '/posterHistory',
name: 'posterHistory',
meta: { title: '海报记录' },
component: () => import(/* webpackChunkName: "mine" */ '../views/posterHistory.vue')
},
{
path: '/equipment',
name: 'equipment',
meta: { title: '设备管理' },
component: () => import(/* webpackChunkName: "mine" */ '../views/equipment.vue')
},
] ]
const router = new VueRouter({ const router = new VueRouter({
......
src/styles/index.scss
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
}
body { body {
height: 100%; height: 100%;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
...@@ -6,10 +28,7 @@ body { ...@@ -6,10 +28,7 @@ body {
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
margin: 0; margin: 0;
} background-color: #f0f0f0;
label {
font-weight: 700;
} }
html { html {
...@@ -27,6 +46,10 @@ html { ...@@ -27,6 +46,10 @@ html {
box-sizing: inherit; box-sizing: inherit;
} }
input,button,select,textarea{
outline:none;
}
.no-padding { .no-padding {
padding: 0px !important; padding: 0px !important;
} }
...@@ -103,47 +126,48 @@ ol,ul,li{ ...@@ -103,47 +126,48 @@ ol,ul,li{
div,span{ div,span{
-webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-tap-highlight-color:rgba(0,0,0,0);
} }
/* 加载层 */
.loading{
width: 100%; .tipDialog{
min-height: 100%;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
z-index: 9999; z-index: 10000;
display: none; background-color: rgba( 0, 0, 0,0.6);
} .tipDialogCon{
.loading>.loadingCon{ background: #fff;
background: rgba( 230, 230, 230,0.5); width: 240px;
width: 100px;
height: 100px;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
margin-left: 50px; margin-left: -120px;
margin-top: 50px; margin-top: -60px;
border-radius: 8px; border-radius: 5px;
display: flex; text-align: center;
display: -webkit-box; padding: 17px 0;
display: -moz-box; font-size: 14px;
display: -ms-flexbox; color: #282B2F;
display: -webkit-flex; >span{
justify-content: center; display: inline-block;
-webkit-justify-content: center; width: 100px;
-moz-justify-content: center; height: 28px;
-ms-justify-content: center; line-height: 28px;
-o-justify-content: center; background: #F9BE3C;
align-items: center; border-radius: 14px;
-webkit-align-items: center; font-size: 14px;
-moz-align-items: center; color: #FFFFFF;
-ms-align-items: center; margin-top: 18px;
-o-align-items: center; }
} }
.loading>.loadingCon>img{
width: 75px;
height: 75px;
} }
.noDataText{
color: #282B2F;
text-align: center;
font-size: 16px;
position: absolute;
width: 100%;
top: 35%;
}
\ No newline at end of file
src/utils/request.js
import axios from 'axios' import axios from 'axios'
import store from '@/store' import store from '@/store'
import qs from 'qs'
// create an axios instance 创建实例 // create an axios instance 创建实例
const service = axios.create({ const service = axios.create({
...@@ -14,11 +15,14 @@ service.interceptors.request.use( ...@@ -14,11 +15,14 @@ service.interceptors.request.use(
config => { config => {
// do something before request is sent // do something before request is sent
if (store.getters.token) { // if (store.getters.token) {
// let each request carry token // let each request carry token
// ['X-Token'] is a custom headers key // ['X-Token'] is a custom headers key
// please modify it according to the actual situation // please modify it according to the actual situation
// config.headers['X-Token'] = getToken() // config.headers['X-Token'] = getToken()
// }
if(config.method=='post'){
config.data = qs.stringify(config.data)
} }
return config return config
}, },
...@@ -38,14 +42,15 @@ service.interceptors.response.use( ...@@ -38,14 +42,15 @@ service.interceptors.response.use(
response => { response => {
const res = response.data const res = response.data
// if the custom errno is not 200, it is judged as an error. // // if the custom errno is not 200, it is judged as an error.
if (res.errno !== 200) { // if (res.errno !== 200) {
alert(res.msg) // // alert(res.msg)
return Promise.reject(new Error(res.message || 'Error')) // return Promise.reject(new Error(res.msg || 'Error'))
} else { // } else {
// success // // success
// return res
// }
return res return res
}
}, },
error => { error => {
// console.log('err' + error) // for debug // console.log('err' + error) // for debug
......
src/utils/setWechatTitle.js 0 → 100644
module.exports = (title) => {
document.title = title
}
src/views/activityDetail.vue 0 → 100644
<template>
<div id="detailBox">
<div class="detailCon">
<img class="detailConImg" v-if="thumb" :src="thumb">
<div class="detailConTitle"><span>{{title}}</span><img src="../assets/icon_share.png"></div>
<div class="detailContDes">
<div>
<img src="../assets/icon_enrollment.png">
<span>活动时间：{{beginTime}} ~ {{endTime}}</span>
</div>
<div v-if="status==1">活动进行中</div>
<div v-else-if="status==2">活动已结束</div>
<div v-else-if="status==3">报名截止还剩：<span v-if="diffDays<=1">不足</span>{{diffDays}}天</div>
</div>
<div class="detailContDes">
<div>
<img src="../assets/icon_activitytime.png">
<span>报名人数：{{participants}}/{{peoples}}</span>
</div>
</div>
</div>
<div id="introduce">
<img :src="detailImgUrl">
</div>
<div id="applyButtonBox">
<span @click="toApply">立即报名</span>
</div>
<div class="tipDialog" v-show="tipDialogShow">
<div class="tipDialogCon">
<p>{{tipDialogText1}}</p>
<p>{{tipDialogText2}}</p>
<span @click="tipDialogShow=false">{{tipDialogBtn}}</span>
</div>
</div>
<loading :loadingShow="loadingShow"></loading>
</div>
</template>
<script>
import request from '../utils/request'
import loading from '../components/loading/loading.vue'
export default {
data() {
return{
loadingShow: false,//加载
title: '',
thumb: '',
beginTime: '',
endTime: '',
status: '',
diffDays: '',
participants: '',
peoples: '',
detailImgUrl: '',
qualifications: '',
tipDialogShow: false,//弹窗
tipDialogBtn: '',
tipDialogText1: '',
tipDialogText2: '',
}
},
components: {
loading
},
mounted() {
this.loadingShow = true
request({
url: '/api/MarketingToolApi/Activities/detail',
method: 'post',
data: {
activityId: this.$route.params.id
}
}).then(response => {
this.loadingShow = false
this.title = response.data.title
this.thumb = response.data.thumb
this.beginTime = response.data.beginTime
this.endTime = response.data.endTime
this.status = response.data.status
this.diffDays = response.data.diffDays
this.participants = response.data.participants
this.peoples = response.data.peoples
this.detailImgUrl = response.data.detailImgUrl
this.qualifications = response.data.qualifications
})
},
methods: {
toApply(){
if(this.status == 4){//4：活动报名人数已满
this.tipDialogText1='太火爆了'
this.tipDialogText2='报名活动的人数已满'
this.tipDialogBtn='关闭'
this.tipDialogShow = true
}else if(this.status == 1){//1：活动已经开始；
this.tipDialogText1='来晚了'
this.tipDialogText2='报名已结束'
this.tipDialogBtn='关闭'
this.tipDialogShow = true
}else if(this.status == 2){//2：活动已结束；
this.tipDialogText1='抱歉'
this.tipDialogText2='本次活动已结束'
this.tipDialogBtn='关闭'
this.tipDialogShow = true
}else{
if(this.qualifications==1){//允许报名
this.$router.push({name: 'applyInfo',params:{id: this.$route.params.id}})
}else{
// this.tipDialogText1='完成'+this.title+'后'
// this.tipDialogText2='才能报名本活动'
// this.tipDialogBtn='知道了'
// this.tipDialogShow = true
this.tipDialogText1=this.title+'进行中'
this.tipDialogText2='不允许报名'
this.tipDialogBtn='知道了'
this.tipDialogShow = true
}
}
}
}
}
</script>
<style lang="scss">
#detailBox{
height: 100%;
padding-bottom: 70px;
}
.detailCon{
background-color: #fff;
padding: 10px;
margin-bottom: 10px;
}
.detailConImg{
display: block;
width: 100%;
height: 200px;
}
.detailConTitle{
display: flex;
align-items: center;
justify-content: space-between;
font-size: 19px;
color: #282B2F;
padding: 10px 0 5px;
img{
width: 21px;
height: 21px;
}
}
.detailContDes{
font-size: 12px;
color: #70767A;
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 8px;
div{
display: flex;
align-items: center;
>img{
width: 14px;
height: 14px;
margin-right: 5px;
}
}
}
#introduce{
background-color: #fff;
padding: 10px 10px 75px;
img{
width: 100%;
}
}
#applyButtonBox{
background-color: #fff;
padding: 11px 0;
text-align: center;
position: fixed;
bottom: 0;
width: 100%;
span{
display: inline-block;
text-align: center;
font-size: 18px;
color: #FFFFFF;
background-color: #F7B500;
height: 38px;
width: 250px;
line-height: 38px;
border-radius: 19px;
}
}
</style>
\ No newline at end of file
src/views/activityHistory.vue 0 → 100644
<template>
<div id="activityHistory">
<ul>
<li class="activityListItem" v-for="item in list">
<img class="activityListItemImg" :src="item.thumb">
<div class="activityListItemRight">
<p class="activityListItemTitle">
<span>{{item.title}}</span>
<img v-if="item.completeStatus==1" src="../assets/icon_win.png">
<img v-else src="../assets/icon_fail.png">
</p>
<div class="activityListDes">
<div>
<img src="../assets/icon_enrollment.png">
<span>活动时间：{{item.beginTime}} ~ {{item.endTime}}</span>
</div>
<div>
<img src="../assets/icon_activitytime.png">
<span>报名人数：{{item.participants}}/{{item.peoples}}</span>
</div>
<div class="activityStatus">
<span class="activityStatusEnd" v-if="item.status==2">已结束</span>
<span class="activityStatusRun" v-else>进行中</span>
</div>
</div>
</div>
</li>
</ul>
<infinite-scroll :scroller="scroller" :loading="loading" :isLoaded="isLoaded" :loadingText="loadingText" @load="loadMore"/>
<p class="noDataText" v-show="list.length==0">暂无数据</p>
<loading :loadingShow="loadingShow"></loading>
</div>
</template>
<script>
import request from '../utils/request'
import loading from '../components/loading/loading.vue'
import infiniteScroll from '../components/infiniteScroll/infiniteScroll.vue'
export default {
data() {
return{
loadingShow: false,//加载
list: [],
pageNum: 1,
loading: false,
scroller: null,
isLoaded: false,
loadingText: '正在加载中...'
}
},
components: {
loading, infiniteScroll
},
mounted() {
this.scroller = this.$el
this.loadingShow = true
request({
url: '/api/MarketingToolApi/Activities/userActivities',
method: 'post',
data: {
token: localStorage.getItem("token"),
page: 1,
limit: 20
}
}).then(response => {
this.loadingShow = false
this.list = response.data.list
})
},
methods: {
loadMore () {
let me = this;
me.loading = true;
me.loadingText = '正在加载中...'
me.pageNum += 1;
request({
url: '/api/MarketingToolApi/Activities/userActivities',
method: 'post',
data: {
token: localStorage.getItem("token"),
page: me.pageNum,
limit: 20
}
}).then(response => {
if (!response.data.list){
me.loadingText = '没有更多数据了'
setTimeout(function () {
me.isLoaded = true
me.loading = false
},1000)
setTimeout(function () {
me.isLoaded = false
},1500)
} else {
this.list.push(response.data.list)
me.loading = false
}
})
}
}
}
</script>
<style lang="scss">
#activityHistory{
width: 100%;
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.activityListItem{
background-color: #fff;
padding: 10px;
margin-bottom: 10px;
display: flex;
}
.activityListItemRight{
width: 100%;
}
.activityListItemImg{
display: block;
width: 100px;
height: 100px;
margin-right: 10px;
}
.activityListItemTitle{
font-size: 19px;
color: #282B2F;
padding: 8px 0;
display: flex;
align-items: center;
justify-content: space-between;
img{
width: 18px;
height: 18px;
}
}
.activityListDes{
font-size: 12px;
color: #70767A;
justify-content: space-between;
>div{
display: flex;
align-items: center;
margin-bottom: 8px;
>img{
width: 14px;
height: 14px;
margin-right: 5px;
}
}
>.activityStatus{
justify-content: flex-end;
margin-bottom: 0;
span{
font-size: 12px;
color: #FFFFFF;
border-radius: 2px;
padding: 1px 12px;
}
.activityStatusEnd{
background: #6D7278;
}
.activityStatusRun{
background: #F7B500;
}
}
}
</style>
\ No newline at end of file
src/views/applyInfo.vue 0 → 100644
<template>
<div id="applyBox">
<ul id="applyInfoBox">
<li>
<span>微信号</span>
<input v-model="userName" type="text" placeholder="请输入您的微信号" maxlength="10">
</li>
<li>
<span>联系电话</span>
<input type="tel" v-model="phone" placeholder="请填写您的手机号（选填）" maxlength="11">
</li>
<li>
<span>孩子姓名</span>
<input v-model="teenageName" type="text" placeholder="请填写孩子的姓名" maxlength="10">
</li>
<li>
<span>孩子性别</span>
<div id="genderBox">
  <input type="radio" v-model="gender" value="1" id="boy">
  <label id="boyLabel" for="boy">男生</label>
  <input type="radio" v-model="gender" value="2" id="girl">
  <label for="girl">女生</label>
  </div>
</li>
<li>
<span>所在门店</span>
<input v-model="store" type="text" placeholder="请填写门店信息（例如：北京总店）" maxlength="20">
</li>
</ul>
<div id="applyButtonBox">
<span @click="submitApply">提交</span>
</div>
<div class="tipDialog" v-show="tipDialogShow">
<div class="tipDialogCon">
<p>{{tipDialogText}}</p>
<span @click="tipDialogShow=false">知道了</span>
</div>
</div>
<loading :loadingShow="loadingShow"></loading>
</div>
</template>
<script>
import request from '../utils/request'
import loading from '../components/loading/loading.vue'
export default {
data() {
return{
userName: '',
phone: '',
teenageName: '',
gender: '',//孩子性别 1：男； 2：女。
store: '',//所在门店名称
loadingShow: false,//加载
tipDialogShow: false,
tipDialogText: '',
}
},
components: {
loading
},
mounted() {
this.loadingShow = true
request({
url: '/api/MarketingToolApi/Users/info',
method: 'post',
data: {
token: localStorage.getItem("token")
}
}).then(response => {
this.loadingShow = false
this.userName = response.data.userName
this.phone = response.data.phone
this.teenageName = response.data.teenageName
this.gender = response.data.gender
this.store = response.data.store
})
},
methods: {
submitApply() {
if(this.userName==''){
this.tipDialogShow = true
this.tipDialogText = '微信号不能为空'
}else if(this.teenageName=='') {
this.tipDialogShow = true
this.tipDialogText = '孩子姓名不能为空'
}else if(this.store=='') {
this.tipDialogShow = true
this.tipDialogText = '所在门店名称不能为空'
}else{
this.loadingShow = true
request({
url: '/api/MarketingToolApi/Users/enrollActivity',
method: 'post',
data: {
token: localStorage.getItem("token"),
activityId: this.$route.params.id,
userName: this.userName,
phone: this.phone,
teenageName: this.teenageName,
gender: this.gender,
store: this.store
}
}).then(response => {
this.loadingShow = false
this.$router.push({name: 'activityDetail',params:{id: this.$route.params.id}})
})
}
}
}
}
</script>
<style lang="scss">
#applyBox{
height: 100%;
padding-bottom: 70px;
}
#applyInfoBox{
background-color: #fff;
li{
font-size: 14px;
color: #282B2F;
padding: 5px 0;
border-bottom: 1px solid #f0f0f0;
>span{
display: inline-block;
width: 29.33%;
padding-left: 15px;
}
>input{
font-size: 14px;
width: 70%;
height: 38px;
line-height: 38px;
border : none;
}
input::-webkit-input-placeholder {
font-size: 14px;
color: #ADB0B2;
}
input::-moz-input-placeholder {
font-size: 14px;
color: #ADB0B2;
}
input::-ms-input-placeholder {
font-size: 14px;
color: #ADB0B2;
}
}
}
#applyButtonBox{
background-color: #fff;
padding: 11px 0;
text-align: center;
position: fixed;
bottom: 0;
width: 100%;
span{
display: inline-block;
text-align: center;
font-size: 18px;
color: #FFFFFF;
background-color: #F7B500;
height: 38px;
width: 250px;
line-height: 38px;
border-radius: 19px;
}
}
#genderBox{
display: inline-flex;
align-items: center;
width: 70%;
padding: 17px 0;
label{
font-size: 14px;
color: #ADB0B2;
}
#boyLabel{
margin-right: 25px;
}
}
</style>
\ No newline at end of file
src/views/equipment.vue 0 → 100644
<template>
<div>
<img id="equipmentImg" src="../assets/pic_kv.png">
<div id="equipmentCon">
<div>
<div>设备ID：{{seexSn}}</div>
<span v-if="seexSn==''" @click="bindDialog">立即绑定</span>
<span v-else @click="bindDialog">切换设备</span>
</div>
</div>
<div id="equipmentTip">
<p>
<img src="../assets/tips.png">
<span>在哪可以找到我的SN码？</span>
</p>
<p>1. 开启眼保仪 > 我的 > 关于我们，最下方写着SN字母数字组合</p>
<p>2. 眼保仪的外包装盒</p>
</div>
<div id="bindDialog" v-show="bindDialogShow" @click.stop="bindDialogShow=false">
<div id="bindDialogCon" @click.stop>
<p>输入提示</p>
<div>
<span>设备ID：</span>
<input type="text" v-model="equmentId" placeholder="请输入SN码" maxlength="20">
</div>
<p id="bindTip" v-show="noCode">SN码不存在，请检验是否输入正确</p>
<span id="bindSure" @click="bindSure">确认</span>
<img id="bindDialogClose" @click="bindDialogShow=false" src="../assets/icon_close.png">
</div>
</div>
<loading :loadingShow="loadingShow"></loading>
</div>
</template>
<script>
import request from '../utils/request'
import loading from '../components/loading/loading.vue'
export default {
data() {
return{
loadingShow: false,//加载
seexSn: '',
equmentId: '',
bindDialogShow: false,//绑定弹窗
noCode: false, //sn码不存在
}
},
components: {
loading
},
mounted() {
this.loadingShow = true
request({
url: '/api/MarketingToolApi/Users/personalCenter',
method: 'post',
data: {
token: localStorage.getItem("token"),
}
}).then(response => {
this.loadingShow = false
this.seexSn = response.data.seexSn
})
},
watch: {
bindDialogShow() {
if(this.bindDialogShow) {
this.equmentId = this.seexSn
}else{
this.equmentId = ''
this.noCode = false
}
}
},
methods: {
bindDialog() {
this.bindDialogShow = true
},
bindSure() {
this.loadingShow = true
request({
url: '/api/MarketingToolApi/Devices/bind',
method: 'post',
data: {
token: localStorage.getItem("token"),
seexSn: this.equmentId
}
}).then(response => {
if(response.errno==200) {
request({
url: '/api/MarketingToolApi/Users/personalCenter',
method: 'post',
data: {
token: localStorage.getItem("token"),
}
}).then(response => {
this.loadingShow = false
this.bindDialogShow = false
this.seexSn = response.data.seexSn
})
}else{
this.loadingShow = false
this.noCode = true
}
})
}
}
}
</script>
<style lang="scss">
#equipmentImg{
display: block;
width: 100%;
height: 226px;
padding: 10px;
background-color: #fff;
}
#equipmentCon{
background-color: #fff;
padding: 10px;
>div{
background: #F0F0F0;
border-radius: 24px;
height: 48px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px 0 20px;
>div{
font-size: 14px;
color: #282B2F;
}
>span{
font-size: 14px;
color: #FFFFFF;
border-radius: 14px;
padding: 4px 22px;
}
span:nth-child(2){
background: #F9BE3C;
}
span:nth-child(3){
background: #44D7B6;
}
}
}
#equipmentTip{
font-size: 12px;
color: #70767A;
padding: 10px 0 0 15px;
img{
width: 11px;
height: 11px;
margin-right: 6.5px;
}
p:nth-child(1){
font-weight: 500;
margin-bottom: 10px;
}
}
#bindDialog{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10000;
background-color: rgba( 0, 0, 0,0.6);
#bindDialogCon{
background: #fff;
width: 240px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -120px;
margin-top: -128px;
border-radius: 5px;
text-align: center;
padding: 20px 10px;
p:nth-child(1){
font-size: 18px;
color: #3F4041;
font-weight: 500;
margin-bottom: 18px;
}
>div{
display: flex;
align-items: center;
background: #F0F0F0;
border-radius: 24px;
height: 48px;
font-size: 14px;
color: #282B2F;
padding-left: 20px;
input{
width: 68%;
background: none;
border: none;
}
input::-webkit-input-placeholder {
font-size: 12px;
color: #ADB0B2;
}
input::-moz-input-placeholder {
font-size: 12px;
color: #ADB0B2;
}
input::-ms-input-placeholder {
font-size: 12px;
color: #ADB0B2;
}
}
#bindTip{
font-size: 12px;
color: #FA6400;
margin-top: 6px;
}
#bindSure{
display: inline-block;
font-size: 14px;
color: #FFFFFF;
background: #F9BE3C;
border-radius: 14px;
width: 100px;
height: 28px;
line-height: 28px;
margin-top: 10px;
}
#bindDialogClose{
width: 37px;
height: 37px;
position: absolute;
margin: 0;
top: -37px;
right: -37px;
}
}
}
</style>
\ No newline at end of file
src/views/index.vue
<template> <template>
<div id="home"> <div id="applyCon">
<ul>
<li class="applyListItem" @click="toActivity(item)" v-for="item in list">
<img class="applyListItemImg" :src="item.thumb">
<p class="applyListItemTitle">{{item.title}}</p>
<div class="applyListDes">
<div> <div>
列表列表 <img src="../assets/icon_enrollment.png">
<span>活动时间：{{item.beginTime}} ~ {{item.endTime}}</span>
</div> </div>
<div class="loading"> <div v-if="item.status==1">活动进行中</div>
<div class="loadingCon"> <div v-else-if="item.status==2">活动已结束</div>
<img src="../assets/loading.gif"> <div v-else-if="item.status==3">报名截止还剩：<span v-if="item.diffDays<=1">不足</span>{{item.diffDays}}天</div>
</div>
<div class="applyListDes">
<div>
<img src="../assets/icon_activitytime.png">
<span>报名人数：{{item.participants}}/{{item.peoples}}</span>
</div> </div>
</div> </div>
</li>
</ul>
<infinite-scroll :scroller="scroller" :loading="loading" :isLoaded="isLoaded" :loadingText="loadingText" @load="loadMore"/>
<navigation :is-x="isX" :apply-status="applyStatus" :tool-status="toolStatus" :mine-status="mineStatus"></navigation> <navigation :is-x="isX" :apply-status="applyStatus" :tool-status="toolStatus" :mine-status="mineStatus"></navigation>
<loading :loadingShow="loadingShow"></loading>
</div> </div>
</template> </template>
<script> <script>
import navigation from '../components/navigaton/navigation.vue' import navigation from '../components/navigaton/navigation.vue'
import request from '../utils/request' import request from '../utils/request'
import loading from '../components/loading/loading.vue'
import infiniteScroll from '../components/infiniteScroll/infiniteScroll.vue'
export default { export default {
data() { data() {
return{ return{
...@@ -21,33 +38,119 @@ export default { ...@@ -21,33 +38,119 @@ export default {
applyStatus: true, applyStatus: true,
toolStatus: false, toolStatus: false,
mineStatus: false, mineStatus: false,
loadingShow: false,//加载
list: [],
pageNum: 1,
loading: false,
scroller: null,
isLoaded: false,
loadingText: '正在加载中...'
} }
}, },
components: { components: {
navigation navigation, loading, infiniteScroll
}, },
mounted() { mounted() {
var u = navigator.userAgent, app = navigator.appVersion; this.scroller = this.$el
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 // var u = navigator.userAgent, app = navigator.appVersion;
if (isiOS) { // var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
var w=window.screen.width * window.devicePixelRatio; // if (isiOS) {
var h=window.screen.height * window.devicePixelRatio; // var w=window.screen.width * window.devicePixelRatio;
if(w==1125&&h==2436){ // var h=window.screen.height * window.devicePixelRatio;
this.isX = true; // if(w==1125&&h==2436){
} // this.isX = true;
} // }
// request({ // }
// url: '/api/index',
// method: 'get', this.loadingShow = true
// }).then(response => { request({
// }) url: '/api/MarketingToolApi/Activities/list',
method: 'post',
data: {
page: 1,
limit: 20
}
}).then(response => {
this.loadingShow = false
this.list = response.data.list
})
}, },
methods: { methods: {
toActivity(item) {
this.$router.push({name: 'activityDetail',params:{id: item.activityId}})
},
loadMore () {
let me = this;
me.loading = true;
me.loadingText = '正在加载中...'
me.pageNum += 1;
request({
url: '/api/MarketingToolApi/Activities/list',
method: 'post',
data: {
page: me.pageNum,
limit: 20
}
}).then(response => {
console.log(me.pageNum)
if (!response.data.list){
me.loadingText = '没有更多数据了'
setTimeout(function () {
me.isLoaded = true
me.loading = false
},1000)
setTimeout(function () {
me.isLoaded = false
},1500)
} else {
this.list.push(response.data.list)
me.loading = false
}
})
}
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
#home{ #applyCon{
padding-bottom: 60px;
width: 100%;
height: 100%; height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.applyListItem{
background-color: #fff;
padding: 10px;
margin-bottom: 10px;
}
.applyListItemImg{
display: block;
width: 100%;
height: 200px;
}
.applyListItemTitle{
font-size: 19px;
color: #282B2F;
padding: 10px 0 5px;
}
.applyListDes{
font-size: 12px;
color: #70767A;
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 8px;
>div{
display: flex;
align-items: center;
>img{
width: 14px;
height: 14px;
margin-right: 5px;
}
} }
}
</style> </style>
\ No newline at end of file
src/views/mine.vue
<template> <template>
<div id="home">
<div> <div>
个人中心 <div id="mineTop">
<img v-if="avatar" :src="avatar">
<div id="mineTopRight">
<div id="mineTopRightName">
<span>{{userName}}</span>
<img v-if="this.trophy[0]==1" src="../assets/21_complete.png">
<img v-if="this.trophy[1]==1" src="../assets/60_complete.png">
<img v-if="this.trophy[2]==1" src="../assets/150_complete.png">
</div> </div>
<div class="loading"> <div>设备ID：{{seexSn}}</div>
<div class="loadingCon"> </div>
<img src="../assets/loading.gif"> </div>
<ul id="mineBom">
<li @click="toActivityHistory">
<img src="../assets/icon_record1.png">
<p>活动记录</p>
</li>
<li class="mineBomLine"></li>
<li @click="toPosterHistory">
<img src="../assets/icon_record2.png">
<p>海报记录</p>
</li>
<li class="mineBomLine"></li>
<li @click="toEquipment">
<img src="../assets/icon_device.png">
<p>设备管理</p>
</li>
<li class="mineBomLine"></li>
<li @click="service">
<img src="../assets/icon_contact.png">
<p>联系客服</p>
</li>
</ul>
<div id="service" v-show="serviceShow" @click.stop="serviceShow=false">
<div id="serviceCon" @click.stop>
<div>联系客服</div>
<p>微信号：{{wxName}}</p>
<img :src="wxUrl">
<p>长按识别二维码</p>
<img id="serviceClose" @click="serviceShow=false" src="../assets/icon_close.png">
</div> </div>
</div> </div>
<navigation :is-x="isX" :apply-status="applyStatus" :tool-status="toolStatus" :mine-status="mineStatus"></navigation> <navigation :is-x="isX" :apply-status="applyStatus" :tool-status="toolStatus" :mine-status="mineStatus"></navigation>
<loading :loadingShow="loadingShow"></loading>
</div> </div>
</template> </template>
<script> <script>
import navigation from '../components/navigaton/navigation.vue' import navigation from '../components/navigaton/navigation.vue'
import request from '../utils/request' import request from '../utils/request'
import loading from '../components/loading/loading.vue'
export default { export default {
data() { data() {
return{ return{
...@@ -21,33 +57,171 @@ export default { ...@@ -21,33 +57,171 @@ export default {
applyStatus: false, applyStatus: false,
toolStatus: false, toolStatus: false,
mineStatus: true, mineStatus: true,
loadingShow: false,//加载
userName: '',
avatar: '',
seexSn: '',
wxName: '',
wxUrl: '',
serviceShow: false,//客服
trophy: [],
} }
}, },
components: { components: {
navigation navigation, loading
}, },
mounted() { mounted() {
var u = navigator.userAgent, app = navigator.appVersion; // var u = navigator.userAgent, app = navigator.appVersion;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 // var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isiOS) { // if (isiOS) {
var w=window.screen.width * window.devicePixelRatio; // var w=window.screen.width * window.devicePixelRatio;
var h=window.screen.height * window.devicePixelRatio; // var h=window.screen.height * window.devicePixelRatio;
if(w==1125&&h==2436){ // if(w==1125&&h==2436){
this.isX = true; // this.isX = true;
} // }
} // }
// request({ this.loadingShow = true
// url: '/api/index', request({
// method: 'get', url: '/api/MarketingToolApi/Users/personalCenter',
// }).then(response => { method: 'post',
// }) data: {
token: localStorage.getItem("token")
}
}).then(response => {
this.loadingShow = false
this.userName = response.data.userName
this.avatar = response.data.avatar
this.seexSn = response.data.seexSn
this.trophy = response.data.trophy
})
request({
url: '/api/MarketingToolApi/Users/customer',
method: 'post',
data: {
token: localStorage.getItem("token")
}
}).then(response => {
this.loadingShow = false
this.wxName = response.data.name
this.wxUrl = response.data.url
})
}, },
methods: { methods: {
toActivityHistory() {
this.$router.push({name: 'activityHistory'})
},
toPosterHistory() {
this.$router.push({name: 'posterHistory'})
},
toEquipment() {
this.$router.push({name: 'equipment'})
},
service() {
this.serviceShow = true
},
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
#home{ #mineTop{
height: 100%; display: flex;
align-items: center;
background-color: #fff;
padding: 10px 20px;
margin-bottom: 10px;
>img{
display: block;
width: 60px;
height: 60px;
border-radius: 50%;
margin-right: 10px;
}
#mineTopRight{
font-size: 14px;
color: #282B2F;
#mineTopRightName{
display: flex;
align-items: center;
span{
margin-right: 10px;
}
>img{
display: block;
width: 21px;
height: 21px;
margin-right: 2px;
}
}
} }
}
#mineBom{
display: flex;
justify-content: space-around;
background-color: #fff;
padding: 15px 10px;
li{
display: flex;
flex-direction: column;
align-items: center;
font-size: 14px;
color: #282B2F;
img{
display: block;
width: 45px;
height: 45px;
margin-bottom: 6px;
}
}
.mineBomLine{
width: 1px;
height: 47.5px;
background-color: rgba(170,170,170,0.5);
}
}
#service{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10000;
background-color: rgba( 0, 0, 0,0.6);
#serviceCon{
background: #fff;
width: 240px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -120px;
margin-top: -128px;
border-radius: 5px;
color: #3F4041;
font-weight: 500;
text-align: center;
padding: 20px 0;
>div{
font-size: 18px;
margin-bottom: 10px;
}
>p{
font-size: 14px;
margin-top: 5px;
}
>img{
display: block;
width: 140px;
height: 140px;
margin: 3px auto 0;
}
#serviceClose{
width: 37px;
height: 37px;
position: absolute;
margin: 0;
top: -37px;
right: -37px;
}
}
}
</style> </style>
\ No newline at end of file
src/views/posterHistory.vue 0 → 100644
<template>
<div id="posterHistory">
<ul id="posterHistoryList">
<li v-for="(item,index) in list" :class="index.toString().substr(index.toString().length-1,1)==0 || index.toString().substr(index.toString().length-1,1)==1 || index.toString().substr(index.toString().length-1,1)==5 || index.toString().substr(index.toString().length-1,1)==6 ?'single':'double'" :key="index">
<img :src="item.imgUrl">
</li>
</ul>
<p class="noDataText" v-show="list.length==0">暂无数据</p>
<infinite-scroll :scroller="scroller" :loading="loading" :isLoaded="isLoaded" :loadingText="loadingText" @load="loadMore"/>
<loading :loadingShow="loadingShow"></loading>
</div>
</template>
<script>
import request from '../utils/request'
import loading from '../components/loading/loading.vue'
import infiniteScroll from '../components/infiniteScroll/infiniteScroll.vue'
export default {
data() {
return{
loadingShow: false,//加载
pageNum: 1,
list: [],
loading: false,
scroller: null,
isLoaded: false,
loadingText: '正在加载中...'
}
},
components: {
loading,infiniteScroll
},
mounted() {
this.scroller = this.$el
this.loadingShow = true
request({
url: '/api/MarketingToolApi/Posters/userPosters',
method: 'post',
data: {
token: localStorage.getItem("token"),
page: 1,
limit: 20
}
}).then(response => {
this.loadingShow = false
})
},
methods: {
loadMore () {
let me = this;
me.loading = true;
me.loadingText = '正在加载中...'
me.pageNum += 1;
request({
url: '/api/MarketingToolApi/Posters/userPosters',
method: 'post',
data: {
token: localStorage.getItem("token"),
page: me.pageNum,
limit: 20
}
}).then(response => {
console.log(me.pageNum)
if (response.data.list == ''){
me.loadingText = '没有更多数据了'
setTimeout(function () {
me.isLoaded = true
me.loading = false
},1000)
setTimeout(function () {
me.isLoaded = false
},1500)
} else {
this.list.push(response.data.list)
me.loading = false
}
})
}
}
}
</script>
<style lang="scss">
#posterHistory{
width: 100%;
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
#posterHistoryList{
display: flex;
flex-wrap: wrap;
padding: 8px;
li{
flex: 1;
padding: 2px;
img{
width: 100%;
height: 100%;
}
}
.single{
min-width: 50%;
height: 217px;
}
.double{
min-width: 33.33%;
height: 142px;
}
}
</style>
\ No newline at end of file
vue.config.js
...@@ -11,15 +11,15 @@ module.exports = { ...@@ -11,15 +11,15 @@ module.exports = {
//反向代理 //反向代理
devServer: { devServer: {
// 环境配置 // 环境配置
// open: true, //配置自动启动浏览器 open: false, //配置自动启动浏览器
// proxy: { proxy: {
// '/api': { '/api': {
// target: 'https://ooadmin.inner.iouou.cn', target: 'https://seex.inner.iouou.cn',
// pathRewrite: { pathRewrite: {
// '^/api': '/api' '^/api': ''
// } }
// } }
// } }
}, },
configureWebpack: config => { configureWebpack: config => {
}, },
......
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