First commit
This commit is contained in:
skywt2003
commit
f21dd94017
|
|
@ -0,0 +1,2 @@
|
|||
> 1%
|
||||
last 2 versions
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
# just a flag
|
||||
ENV = 'development'
|
||||
|
||||
# base api
|
||||
VUE_APP_BASE_API = '/dev-api'
|
||||
VUE_APP_BASE_PORT = 1024
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
# just a flag
|
||||
ENV = 'production'
|
||||
|
||||
# base api
|
||||
VUE_APP_BASE_API = '/'
|
||||
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
dist
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
# vue-general
|
||||
|
||||
## Project setup
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
|
||||
### 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/).
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
module.exports = {
|
||||
presets: [
|
||||
'@vue/app'
|
||||
],
|
||||
plugins: [
|
||||
['import', {
|
||||
libraryName: 'vant',
|
||||
libraryDirectory: 'es',
|
||||
style: true
|
||||
}, 'vant']
|
||||
]
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,31 @@
|
|||
{
|
||||
"name": "vue-general",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nutui/nutui": "^3.1.20",
|
||||
"axios": "0.19.0",
|
||||
"core-js": "^2.6.5",
|
||||
"exif-js": "^2.3.0",
|
||||
"image-conversion": "^1.1.9",
|
||||
"mockjs": "^1.1.0",
|
||||
"normalize.css": "7.0.0",
|
||||
"qrcodejs2": "^0.0.2",
|
||||
"vant": "^2.1.1",
|
||||
"vue": "^2.6.10",
|
||||
"vue-router": "^3.0.3",
|
||||
"weixin-js-sdk": "^1.4.0-test"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^3.11.0",
|
||||
"@vue/cli-service": "^3.11.0",
|
||||
"babel-plugin-import": "^1.11.0",
|
||||
"stylus": "^0.54.5",
|
||||
"stylus-loader": "^3.0.2",
|
||||
"vue-template-compiler": "^2.6.10"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
autoprefixer: {}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= webpackConfig.name %></title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<keep-alive>
|
||||
<router-view/>
|
||||
</keep-alive>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="stylus">
|
||||
#app
|
||||
font-family 'Avenir', Helvetica, Arial, sans-serif
|
||||
-webkit-font-smoothing antialiased
|
||||
-moz-osx-font-smoothing grayscale
|
||||
color #2c3e50
|
||||
min-height 100vh
|
||||
position relative
|
||||
padding 0
|
||||
margin 0
|
||||
a
|
||||
font-weight bold
|
||||
color #2c3e50
|
||||
&.router-link-exact-active
|
||||
color #42b983
|
||||
</style>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import request from 'utils/request'
|
||||
|
||||
|
||||
/**
|
||||
* 通过人脸认证返回的code获取个人二维码字符串
|
||||
* @param {string} code
|
||||
*/
|
||||
export function GetQRCode(code){
|
||||
return request({
|
||||
url:'/api/v1/personverify/qrcode',
|
||||
method:'get',
|
||||
params:{
|
||||
code
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
import request from 'utils/request'
|
||||
|
||||
/**
|
||||
* 传入页面url，获取微信扫一扫调用签名
|
||||
* @param {string} url
|
||||
*/
|
||||
export function GetScanParams(url){
|
||||
return request({
|
||||
url:'/app/v1/wechat/getjsparam',
|
||||
method:'get',
|
||||
params:{
|
||||
url
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 通过二维码字符串获取运动员个人信息
|
||||
* @param {string} code
|
||||
*/
|
||||
export function GetPeopleData(code){
|
||||
return request({
|
||||
url:'/api/v1/checking/get',
|
||||
method:'get',
|
||||
params:{
|
||||
code
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 传入用户个人codemd5和编号进行绑定
|
||||
* @param {string} CodeMd5
|
||||
* @param {number} No
|
||||
*/
|
||||
export function AddNo(CodeMd5,No){
|
||||
return request({
|
||||
url:'/api/v1/checking/addno',
|
||||
method:'post',
|
||||
data:{
|
||||
CodeMd5,
|
||||
No
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import request from 'utils/request'
|
||||
|
||||
/**
|
||||
* 提交人脸及姓名、身份证号码，进行身份认证
|
||||
* @param {object} data
|
||||
*/
|
||||
export function Login(data){
|
||||
return request({
|
||||
url:'/api/v1/wechat/runnerlogin',
|
||||
method:'post',
|
||||
data:{
|
||||
Name: data.Name,
|
||||
Phone:data.Phone
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export function Runnerverify(data){
|
||||
return request({
|
||||
url:'/api/v1/wechat/runnerverify',
|
||||
method:'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import request from 'utils/request'
|
||||
|
||||
|
||||
/**
|
||||
* 管理员登陆接口
|
||||
* @param {number} Name
|
||||
* @param {numebr} Password
|
||||
*/
|
||||
export function Login(loginForm){
|
||||
return request({
|
||||
url:'/api/v1/Users/login',
|
||||
method:'post',
|
||||
data:{
|
||||
username:loginForm.username,
|
||||
password:loginForm.password
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 140 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 364 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 135 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 426 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 442 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
|
|
@ -0,0 +1,9 @@
|
|||
import busVue from 'vue'
|
||||
|
||||
/**
|
||||
* 在原型上挂载一个新的vue实例对象
|
||||
* 用于储存公共值的同时，借用vue的$emit/$on/$off实现数据监听
|
||||
*/
|
||||
export default function (vue){
|
||||
vue.prototype.$bus = new busVue()
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
import LoadingComponent from './loading.vue'
|
||||
const Loading = {};
|
||||
|
||||
// 注册Loading
|
||||
Loading.install = function (Vue) {
|
||||
// 生成一个Vue的子类
|
||||
// 同时这个子类也就是组件
|
||||
const LoadingConstructor = Vue.extend(LoadingComponent);
|
||||
// 生成一个该子类的实例
|
||||
const instance = new LoadingConstructor();
|
||||
// 将这个实例挂载在我创建的div上
|
||||
instance.$mount(document.createElement('div'));
|
||||
// 并将此div加入全局挂载点内部
|
||||
document.body.appendChild(instance.$el);
|
||||
// 通过Vue的原型注册一个方法
|
||||
// 让所有实例共享这个方法
|
||||
|
||||
function handlerloading(text = '', full) {
|
||||
instance.text = text; //文字是以最后一个show的展示
|
||||
instance.full = true; //控制填充满屏，但不开放使用；
|
||||
}
|
||||
const loading_main = {
|
||||
show(text = ''){
|
||||
instance.loadings.push('show') //执行一次添加一个
|
||||
handlerloading(text) //把text填充
|
||||
},
|
||||
hidden(){
|
||||
instance.loadings.pop() //执行一次减少一个，通过数组长度控制显示与否（考虑到同时打开多个loading情况）
|
||||
}
|
||||
}
|
||||
//将方法挂载全局
|
||||
Vue.prototype.$Loading = loading_main;
|
||||
}
|
||||
export default Loading
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
<template>
|
||||
<div id="vue-loading" v-show="loadings.length">
|
||||
<div class="filter" v-show="full"></div>
|
||||
<div class="loader-wrap">
|
||||
<!-- <div class="loader"></div> -->
|
||||
<div class="logo">
|
||||
<img src="@/assets/image/loding-logo.png" alt="">
|
||||
</div>
|
||||
<div class="hint">{{text}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:'Loading',
|
||||
data(){
|
||||
return {
|
||||
loadings:[],
|
||||
text:'',
|
||||
full:false, //是否展示蒙层
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="stylus" scoped>
|
||||
#vue-loading
|
||||
width 100%
|
||||
height 100%
|
||||
position absolute
|
||||
left 0
|
||||
top 0
|
||||
z-index 999
|
||||
.filter
|
||||
width 100%
|
||||
height 100%
|
||||
background rgba(255,255,255,0.3);
|
||||
.loader-wrap
|
||||
position absolute
|
||||
left 50%
|
||||
top 50%
|
||||
transform translate(-50%,-50%)
|
||||
display flex
|
||||
flex-direction column
|
||||
justify-content center
|
||||
.logo
|
||||
// width 100%
|
||||
text-align center
|
||||
img
|
||||
animation scal 0.8s infinite
|
||||
opacity 0.8
|
||||
width 16vw
|
||||
.hint
|
||||
margin-top 10px
|
||||
font-size 14px
|
||||
color #666
|
||||
text-shadow 1px 1px 3px white
|
||||
.loader
|
||||
width 2.5em
|
||||
height 2.5em
|
||||
transform rotate(165deg)
|
||||
position relative
|
||||
&:before
|
||||
animation before 2s infinite
|
||||
&:after
|
||||
animation after 2s infinite
|
||||
&:before,
|
||||
&:after
|
||||
content ''
|
||||
position absolute
|
||||
top 50%
|
||||
left 50%
|
||||
display block
|
||||
width 0.5em
|
||||
height 0.5em
|
||||
border-radius 0.25em
|
||||
transform translate(-50%, -50%)
|
||||
</style>
|
||||
|
||||
<style>
|
||||
@keyframes scal {
|
||||
0%{
|
||||
transform:scale(0.8);
|
||||
}
|
||||
50%{
|
||||
transform:scale(1);
|
||||
}
|
||||
100%{
|
||||
transform:scale(0.8);
|
||||
}
|
||||
}
|
||||
@keyframes before {
|
||||
0% {
|
||||
width: 0.5em;
|
||||
box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
|
||||
}
|
||||
35% {
|
||||
width: 2.5em;
|
||||
box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
|
||||
}
|
||||
70% {
|
||||
width: 0.5em;
|
||||
box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
|
||||
}
|
||||
}
|
||||
@keyframes after {
|
||||
0% {
|
||||
height: 0.5em;
|
||||
box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
|
||||
}
|
||||
35% {
|
||||
height: 2.5em;
|
||||
box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);
|
||||
}
|
||||
70% {
|
||||
height: 0.5em;
|
||||
box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Attempt to center the whole thing!
|
||||
*/
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
.loader {
|
||||
position: absolute;
|
||||
top: calc(50% - 1.25em);
|
||||
left: calc(50% - 1.25em);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
import ToastComponent from './toast.vue'
|
||||
const Toast = {};
|
||||
|
||||
// 注册Toast
|
||||
Toast.install = function (Vue) {
|
||||
// 生成一个Vue的子类
|
||||
// 同时这个子类也就是组件
|
||||
const ToastConstructor = Vue.extend(ToastComponent);
|
||||
// 生成一个该子类的实例
|
||||
const instance = new ToastConstructor();
|
||||
// 将这个实例挂载在我创建的div上
|
||||
instance.$mount(document.createElement('div'));
|
||||
// 并将此div加入全局挂载点内部
|
||||
document.body.appendChild(instance.$el);
|
||||
//定义一个外部的变量，用于控制调用多次提示组件时，清除延时器
|
||||
let timer;
|
||||
// 通过Vue的原型注册一个方法
|
||||
// 让所有实例共享这个方法
|
||||
class message_main {
|
||||
constructor(){}
|
||||
static all_message(msg, type, duration) {
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(() => {
|
||||
instance.successMessage = []
|
||||
instance.errorMessage = [];
|
||||
}, duration);
|
||||
if(type == 'success'){
|
||||
instance.successMessage = [msg];
|
||||
instance.errorMessage = [];
|
||||
}else if (type == 'error'){
|
||||
instance.successMessage = [];
|
||||
instance.errorMessage = [msg];
|
||||
}
|
||||
instance.type = type;
|
||||
}
|
||||
success(msg, duration = 2000) { //默认两秒停留时长
|
||||
message_main.all_message({txt:msg,key:new Date().getTime()}, 'success', duration);
|
||||
}
|
||||
error(msg, duration = 2000) {
|
||||
message_main.all_message({txt:msg,key:new Date().getTime()}, 'error', duration);
|
||||
}
|
||||
}
|
||||
//将方法挂载全局
|
||||
Vue.prototype.$Toast = new message_main();
|
||||
}
|
||||
export default Toast
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- 全局提示框 -->
|
||||
<transition-group name="fade">
|
||||
<div name='fade' v-for="item in successMessage" :key='item.key' class="dialog-tips">
|
||||
<span>{{item.txt}}</span>
|
||||
</div>
|
||||
</transition-group>
|
||||
|
||||
<transition-group name="fade">
|
||||
<div v-for="item in errorMessage" :key='item.key' class="dialog-tips error">
|
||||
<span>{{item.txt}}</span>
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
successMessage: [],
|
||||
errorMessage:[],
|
||||
type:'success',
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="stylus" scoped>
|
||||
$Height = 35px
|
||||
|
||||
.dialog-tips
|
||||
position absolute
|
||||
z-index 999
|
||||
width 100vw
|
||||
height $Height
|
||||
background-color rgba(123,210,57,0.85)
|
||||
color white
|
||||
border-radius 0 0 3px 3px
|
||||
left 50%
|
||||
top 0
|
||||
transform translate(-50%,0)
|
||||
display flex
|
||||
justify-content center
|
||||
transition all 0.2s
|
||||
align-items center
|
||||
&.error
|
||||
background-color rgba(255,70,0,0.85)
|
||||
span
|
||||
font-size 14px
|
||||
line-height $Height
|
||||
color red
|
||||
// 通知动画
|
||||
.fade-enter-active, .fade-leave-active
|
||||
transform translate(-50%,0%)
|
||||
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
|
||||
transform translate(-50%,-100%)
|
||||
</style>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import 'normalize.css/normalize.css' // 重置、初始化css样式的库
|
||||
import '@/permission' // 挂载路由后添加路由拦截器（守卫 ）
|
||||
|
||||
// import NutUI from "@nutui/nutui";
|
||||
// import "@nutui/nutui/dist/style.css";
|
||||
// Vue.use(NutUI)
|
||||
|
||||
import Loading from 'globalComponents/Loading'
|
||||
import Toast from 'globalComponents/Toast'
|
||||
Vue.use(Toast) //启用全局提示组件
|
||||
Vue.use(Loading) //使用全局loading组件
|
||||
|
||||
/**
|
||||
* 如果需要bus总线模式
|
||||
* this.$bus.$data.xxx = xxx
|
||||
* this.$bus.emit('change',data)
|
||||
* this.$bus.$on('change',data => console.log(data))
|
||||
* this.$bus.$off('change')
|
||||
*/
|
||||
// import bus from './bus'
|
||||
// Vue.use(bus) //使用BUS总线模式，实现组件间任意传值
|
||||
|
||||
Vue.config.productionTip = false //生产模式下关闭vue在控制台的提示
|
||||
|
||||
if (process.env.NODE_ENV == 'development'){
|
||||
require('./mock/index.js');
|
||||
}
|
||||
|
||||
const vm = new Vue({
|
||||
router,
|
||||
render: h => h(App),
|
||||
}).$mount('#app')
|
||||
|
||||
export default vm
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
let runnerlogin = {
|
||||
code: 0,
|
||||
data: ['https://blog.skywt.cn/usr/themes/Daydream/assets/img/avatar.png'],
|
||||
msg: '成功'
|
||||
}
|
||||
|
||||
let home = {
|
||||
runnerlogin
|
||||
}
|
||||
|
||||
export default home
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import Mock from 'mockjs'
|
||||
|
||||
import login from './login'
|
||||
import home from './home'
|
||||
|
||||
Mock.mock('/api/v1/Users/login', 'post', () => {
|
||||
return login.login_request
|
||||
})
|
||||
|
||||
Mock.mock('/api/v1/wechat/runnerlogin', 'post', () => {
|
||||
return home.runnerlogin
|
||||
})
|
||||
|
||||
Mock.mock('/dev-api/api/v1/wechat/runnerlogin', 'post', () => {
|
||||
return home.runnerlogin
|
||||
})
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
let login_request = {
|
||||
code: 200
|
||||
}
|
||||
|
||||
let login = {
|
||||
login_request
|
||||
}
|
||||
|
||||
export default login
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
import router from './router'
|
||||
import getPageTitle from 'utils/getPageTitle'
|
||||
import { Checkrunner } from 'api/home'
|
||||
|
||||
|
||||
import Vue from 'vue';
|
||||
import { Toast } from 'vant';
|
||||
Vue.use(Toast);
|
||||
|
||||
|
||||
|
||||
// 路由拦截
|
||||
// router.beforeEach(async(to, from, next) => {
|
||||
// document.title = getPageTitle(to.meta.title) // set page title
|
||||
// if(to.name ==='Admin'){
|
||||
// if(sessionStorage.loginStatus){
|
||||
// next()
|
||||
// }else{
|
||||
// next('/login')
|
||||
// Toast('请登录！')
|
||||
// }
|
||||
// }else if(to.name === 'Home'){
|
||||
// let skipUrl = 'http://5gmalasong.hnabc.cn/app'
|
||||
// let wechatUrl = 'http://5gmalasong.hnabc.cn'
|
||||
// let routerUrl = escape('/#/home')
|
||||
// Checkrunner().then(res =>{
|
||||
// if(res.code === 0){
|
||||
// sessionStorage.Code = res.data.Code
|
||||
// next('/QRCode')
|
||||
// }else if(res.code === 3009){
|
||||
// location.href = wechatUrl + '/wechat/login/runner?returnurl=' + skipUrl + routerUrl
|
||||
// // alert(baseUrl + 'wechat/login/runner?returnurl=' + baseUrl + '#/home')
|
||||
// }else{
|
||||
// next()
|
||||
// }
|
||||
// })
|
||||
// }else{
|
||||
// next()
|
||||
// }
|
||||
// })
|
||||
|
||||
|
||||
|
||||
//跳转完成后
|
||||
router.afterEach(() => {
|
||||
//to do something
|
||||
})
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
import Home from './views/home'
|
||||
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
export default new Router({
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
redirect:'/login'
|
||||
},
|
||||
{
|
||||
path:'/login',
|
||||
name:'Login',
|
||||
component:() => import('./views/login'),
|
||||
meta:{ title:'登陆' }
|
||||
},
|
||||
{
|
||||
path:'/home',
|
||||
name:'Home',
|
||||
component:() => import('./views/home'),
|
||||
meta:{ title:'人脸注册' }
|
||||
},
|
||||
{
|
||||
path:'/photos',
|
||||
name:'Photos',
|
||||
component:() => import('./views/photos'),
|
||||
meta:{ title:'' }
|
||||
},
|
||||
// {
|
||||
// path:'/QRCode',
|
||||
// name:'QRCode',
|
||||
// component:() => import('./views/QRCode'),
|
||||
// meta:{ title:'身份二维码' }
|
||||
// },
|
||||
// {
|
||||
// path:'/admin',
|
||||
// name:'Admin',
|
||||
// component:() => import('./views/admin'),
|
||||
// meta:{ title:'物资发放' }
|
||||
// },
|
||||
]
|
||||
})
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export const title = '2019长沙国际马拉松纪念照' //标签页title
|
||||
export const globalSuccessToast = true //是否在request中开启全局请求成功的成功提示（基于全局Toast）
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
$themeColor = rgb(128,51,134);
|
||||
$fontColor = rgb(77,9,86)
|
||||
|
||||
Button()
|
||||
background linear-gradient(135deg,#fa2c19 0%,#fa6419 100%)
|
||||
color white
|
||||
padding 10px
|
||||
width 85%
|
||||
text-align center
|
||||
border-radius 25px
|
||||
border: 1px solid transparent
|
||||
|
||||
hint()
|
||||
width 100%
|
||||
box-sizing border-box
|
||||
position absolute
|
||||
text-indent 2em
|
||||
z-index 9999
|
||||
padding 10px
|
||||
background rgba(255,255,255,0.8)
|
||||
color rgb(0,133,208)
|
||||
font-size 12px
|
||||
line-height 1.4em
|
||||
|
||||
.home-wrap
|
||||
overflow hidden
|
||||
height: 100vh
|
||||
width: 100%
|
||||
.bottom-img
|
||||
position absolute
|
||||
bottom 0px
|
||||
width 100%
|
||||
left 0
|
||||
.hint
|
||||
width 100%
|
||||
box-sizing border-box
|
||||
position absolute
|
||||
text-indent 2em
|
||||
z-index 9999
|
||||
padding 10px
|
||||
background rgba(255,255,255,0.3)
|
||||
backdrop-filter: blur(30)
|
||||
color white
|
||||
font-size 12px
|
||||
line-height 1.4em
|
||||
bottom 0
|
||||
.background-wrap
|
||||
position: fixed
|
||||
z-index: -1
|
||||
// .background-image
|
||||
.top-brand-wrap
|
||||
color: white
|
||||
text-align: center
|
||||
margin-top: 15vh
|
||||
.info-card
|
||||
position relative
|
||||
// z-index 999
|
||||
width 90%
|
||||
box-shadow: 0 4px 10px #00000012
|
||||
-webkit-box-shadow: 0px 4px 10px 0px rgba(0,0,0,.07)
|
||||
background rgba(255, 255, 255, 0.7)
|
||||
backdrop-filter: blur(20px)
|
||||
-webkit-backdrop-filter: blur(20px)
|
||||
margin 0 auto
|
||||
margin-top 10vh
|
||||
z-index 500
|
||||
padding-bottom 30px
|
||||
padding-top 30px
|
||||
.form
|
||||
width 100%
|
||||
padding 30px
|
||||
box-sizing border-box
|
||||
position relative
|
||||
// z-index 999
|
||||
.van-cell
|
||||
height: 48px
|
||||
background: transparent
|
||||
&::after
|
||||
// border-bottom: 2px solid #f5f6f7
|
||||
border-bottom: 2px solid #323233
|
||||
>>>input
|
||||
height 48px
|
||||
// >>>field__body
|
||||
.button
|
||||
background linear-gradient(135deg,#fa2c19 0%,#fa6419 100%)
|
||||
color white
|
||||
padding 10px
|
||||
width 85%
|
||||
text-align center
|
||||
border-radius 25px
|
||||
border: 1px solid transparent
|
||||
margin-bottom: 20px
|
||||
.register
|
||||
background linear-gradient(135deg,rgb(255,158,13) 0%,rgb(255,167,13) 45%,rgb(255,182,13) 83%,rgb(255,190,13) 100%)
|
||||
.flex-container
|
||||
display flex
|
||||
flex-direction column
|
||||
justify-content center
|
||||
align-items center
|
||||
.main
|
||||
width 100vw
|
||||
position relative
|
||||
z-index 800
|
||||
.hint
|
||||
width 70%
|
||||
border-radius 10px
|
||||
height 100px
|
||||
background rgba(255,255,255,0.9)
|
||||
position absolute
|
||||
left 50%
|
||||
top 50%
|
||||
transform translate(-50%,-50%)
|
||||
display flex
|
||||
justify-content center
|
||||
align-items center
|
||||
color rgba(0,133,208,1)
|
||||
.imgs-wrap
|
||||
overflow hidden
|
||||
width 100%
|
||||
padding 8px
|
||||
padding-top 40px
|
||||
padding-bottom 50px
|
||||
box-sizing border-box
|
||||
.imgs-item
|
||||
font-size 0
|
||||
border 1px solid white
|
||||
width 100%
|
||||
margin-bottom 10px
|
||||
border-radius 10px
|
||||
overflow hidden
|
||||
img
|
||||
width 100%
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
// 微信扫一扫封装，传入callback在扫码执行并接收一个code参数，修改api即可；
|
||||
|
||||
import wx from 'weixin-js-sdk'
|
||||
import { GetScanParams } from 'api/admin'
|
||||
import vm from '@/main.js'
|
||||
|
||||
export default function WeChatScan(callback){
|
||||
GetScanParams(window.location.href.split('#')[0]).then(res => {
|
||||
if(res.code === 0){
|
||||
openScan(res.data,callback)
|
||||
}else{
|
||||
vm.$Toast.error('签名信息获取失败！')
|
||||
}
|
||||
}).catch(err => vm.$Toast.error('签名信息获取失败,请重试！'))
|
||||
}
|
||||
|
||||
function openScan(data,callback){
|
||||
wx.config({
|
||||
debug: false, // 开启调试模式
|
||||
appId: data.appid, // 公众号的唯一标识
|
||||
timestamp: data.Timestamp, // 生成签名的时间戳
|
||||
nonceStr: data.NonceStr, // 生成签名的随机串
|
||||
signature: data.Signature, // 签名
|
||||
jsApiList: [ 'scanQRCode' ] // 需要使用的JS接口列表
|
||||
});
|
||||
|
||||
wx.ready(function () {
|
||||
var isBack = callback
|
||||
wx.checkJsApi({ // 判断当前客户端版本是否支持指定JS接口
|
||||
jsApiList: [ 'scanQRCode' ],
|
||||
success: function (res) { // 以键值对的形式返回，可用true，不可用false。如：{"checkResult":{"scanQRCode":true},"errMsg":"checkJsApi:ok"}
|
||||
if (res.checkResult.scanQRCode === true) {
|
||||
wx.scanQRCode({ // 微信扫一扫接口
|
||||
needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
|
||||
scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
|
||||
success: function (res) {
|
||||
const getCode = res.resultStr // 当needResult 为 1 时，扫码返回的结果
|
||||
isBack(getCode)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
vm.$Toast.error('抱歉，当前客户端版本不支持扫一扫!')
|
||||
}
|
||||
},
|
||||
fail: function (res) { // 检测getNetworkType该功能失败时处理
|
||||
vm.$Toast.error('失败' + res)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
/* 处理失败验证 */
|
||||
wx.error(function (res) {
|
||||
vm.$Toast.error('签名信息错误: ' + res.errMsg)
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { title } from '@/settings'
|
||||
|
||||
export default function getPageTitle(pageTitle) {
|
||||
if (pageTitle) {
|
||||
return `${pageTitle} - ${title}`
|
||||
}
|
||||
return `${title}`
|
||||
}
|
||||
|
|
@ -0,0 +1,167 @@
|
|||
import EXIF from 'exif-js' //获取拍照时的信息的库（角度），用于调正图片展示角度
|
||||
import imageConversion from 'image-conversion' //图片压缩、转换处理库
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 压缩文件函数
|
||||
* 传入图片-压缩后的尺寸（kb）-压缩率
|
||||
* 返回压缩后的文件
|
||||
* @param {file} imageFile
|
||||
* @param {number} compressSize
|
||||
* @param {number} quality
|
||||
*/
|
||||
export function JudgeCompress(imageFile, compressSize, quality = 0.99) { //传入图片文件-规定压缩后的尺寸（kb）-压缩率
|
||||
return new Promise(function (resolve,reject) {
|
||||
if(imageFile.size < 100 * 1024) { //如果图片小于规定尺寸，则直接返回
|
||||
resolve(imageFile)
|
||||
return
|
||||
}
|
||||
imageConversion.compressAccurately(imageFile,{size:compressSize,accuracy:quality,scale:0.5}).then(res =>{ //压缩函数
|
||||
resolve(res)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 图片文件转base64 DataUrl
|
||||
* @param {file} file
|
||||
*/
|
||||
export function FiletoDataURL(file){
|
||||
return new Promise((resolve,reject) => {
|
||||
imageConversion.filetoDataURL(file).then(res => {
|
||||
resolve(res)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 判断文件类型是否为image
|
||||
* @param {file} file
|
||||
*/
|
||||
export function CheckFile(file) {
|
||||
if (!/image\/\w+/.test(file.type)) {
|
||||
return false;
|
||||
}
|
||||
return file;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 旋转图片总体函数
|
||||
* 传入文件，返回旋转后的文件
|
||||
* @param {file} imageFile
|
||||
*/
|
||||
export function RotateImage(imageFile) {
|
||||
return new Promise((resolve,reject)=>{
|
||||
imageConversion.filetoDataURL(imageFile).then(res =>{ //把文件转成图片格式用于旋转
|
||||
var image = new window.Image();
|
||||
image.src = res
|
||||
image.onload = function () {
|
||||
// 旋转图片
|
||||
let newImage = handleRotate(image)
|
||||
imageConversion.dataURLtoFile(newImage.src).then(res => {
|
||||
resolve(res) //返回的是file（文件）
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
// 使用如上filetoDataURL插件方法实现文件转url 而 替代本手写方法 by:luqiang 20191012
|
||||
// var reader = new FileReader();
|
||||
// reader.onload = function(e){
|
||||
// }
|
||||
// reader.readAsDataURL(imageFile); //先挂载onload方法再绑定read事件
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理旋转函数，传入图片，返回旋转正确的图片
|
||||
* @param {img} image
|
||||
*/
|
||||
function handleRotate(image){ //处理旋转的函数
|
||||
var width = image.width;
|
||||
var height = image.height;
|
||||
var canvas = document.createElement("canvas")
|
||||
var ctx = canvas.getContext('2d');
|
||||
var newImage = new Image();
|
||||
//旋转图片操作
|
||||
EXIF.getData(image, function () {
|
||||
var orientation = EXIF.getTag(this, 'Orientation');
|
||||
let imageDate = null
|
||||
switch (orientation) {
|
||||
//正常状态
|
||||
case 1:
|
||||
// alert('旋转0°');
|
||||
newImage.src = image.src;
|
||||
break;
|
||||
//旋转90度
|
||||
case 6:
|
||||
// alert('旋转90°');
|
||||
canvas.height = width;
|
||||
canvas.width = height;
|
||||
ctx.rotate(Math.PI / 2);
|
||||
ctx.translate(0, -height);
|
||||
ctx.drawImage(image,0,0)
|
||||
imageDate = canvas.toDataURL('image/jpeg', 1)
|
||||
newImage.src = imageDate;
|
||||
break;
|
||||
//旋转180°
|
||||
case 3:
|
||||
// alert('旋转180°');
|
||||
canvas.height = height;
|
||||
canvas.width = width;
|
||||
ctx.rotate(Math.PI);
|
||||
ctx.translate(-width, -height);
|
||||
ctx.drawImage(image,0,0)
|
||||
imageDate = canvas.toDataURL('image/jpeg', 1)
|
||||
newImage.src = imageDate;
|
||||
break;
|
||||
//旋转270°
|
||||
case 8:
|
||||
// alert('旋转270°');
|
||||
canvas.height = width;
|
||||
canvas.width = height;
|
||||
ctx.rotate(-Math.PI / 2);
|
||||
ctx.translate(-height, 0);
|
||||
ctx.drawImage(image, -810,0) //????安卓要-810？？？？
|
||||
// ctx.drawImage(image)
|
||||
imageDate = canvas.toDataURL('image/jpeg', 1)
|
||||
newImage.src = imageDate;
|
||||
break;
|
||||
//undefined时不旋转
|
||||
case undefined:
|
||||
// alert('旋转0°');
|
||||
newImage.src = image.src;
|
||||
break;
|
||||
default:
|
||||
newImage.src = image.src;
|
||||
break;
|
||||
}
|
||||
}
|
||||
);
|
||||
return newImage;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 压缩图片函数 --> by:luqiang 20191012 使用imageConversion库代替手写操作以精准控制压缩后的文件尺寸
|
||||
// function Compress(image, quality) {
|
||||
// var canvas = document.createElement('canvas')
|
||||
// var ctx = canvas.getContext('2d');
|
||||
// var width = image.width;
|
||||
// var height = image.height;
|
||||
// canvas.width = width;
|
||||
// canvas.height = height;
|
||||
// ctx.drawImage(image, 0, 0, width, height);
|
||||
// //压缩操作
|
||||
// var imageData = canvas.toDataURL("image/jpeg", quality);
|
||||
// var imageLength = image.src.length;
|
||||
// console.log("压缩前：" + imageLength);
|
||||
// console.log("压缩后：" + imageData.length,imageData);
|
||||
// console.log("压缩率：" + ~~(100 * (imageLength - imageData.length) / imageLength) + "%");
|
||||
// return imageData;
|
||||
// }
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
import axios from 'axios'
|
||||
import router from '@/router'
|
||||
import vm from '@/main.js'
|
||||
import { globalSuccessToast } from '@/settings'
|
||||
|
||||
const service = axios.create({
|
||||
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
|
||||
withCredentials: true, // 设置是否在请求中携带cookie
|
||||
timeout: 30000 // 请求超时时间
|
||||
})
|
||||
|
||||
// request interceptor（请求拦截器）
|
||||
service.interceptors.request.use(
|
||||
config => {
|
||||
vm.$Loading.show()
|
||||
// 给config统一配置属性
|
||||
return config
|
||||
},
|
||||
error => {
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
//response （响应拦截器）
|
||||
service.interceptors.response.use(
|
||||
response => {
|
||||
vm.$Loading.hidden()
|
||||
const res = response.data
|
||||
const code = response.status
|
||||
if (code !== 200) {
|
||||
vm.$Toast.error(res.msg)
|
||||
return Promise.reject(new Error(res.msg || 'Error'))
|
||||
} else {
|
||||
if (globalSuccessToast && res.code == 0) { //全局成功提示
|
||||
// vm.$Toast.success('查询成功！') //暂时不要
|
||||
}
|
||||
return res
|
||||
}
|
||||
},
|
||||
error => {
|
||||
vm.$Loading.hidden()
|
||||
if (error.response.status && error.response.status == 401) { //拦截401，代表登陆失效，触发页面刷新后再触发路由拦截，拦截到重新登录
|
||||
// 401一般是权限问题或者登录失效
|
||||
// router.push('/login') //如果项目存在登录验证，应该在这里返回登录页面重新登录；
|
||||
console.log('response status is 401')
|
||||
}
|
||||
vm.$Toast.error(error)
|
||||
return Promise.reject(error) //请求错误不return出去，直接在这里处理toast
|
||||
}
|
||||
)
|
||||
|
||||
export default service
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
import waterMark from '@/assets/image/waterMark.png'
|
||||
function drawAndShareImage(imgUrl){
|
||||
return new Promise((resolve,reject) => {
|
||||
var canvas = document.createElement("canvas");
|
||||
canvas.width = 1280;
|
||||
canvas.height = 720;
|
||||
var context = canvas.getContext("2d");
|
||||
|
||||
// context.rect(0 , 0 , canvas.width , canvas.height);
|
||||
// context.fillStyle = "#fff";
|
||||
// context.fill();
|
||||
|
||||
var myImage = new Image();
|
||||
myImage.crossOrigin = 'Anonymous'; //允许跨域
|
||||
myImage.src = imgUrl; //背景图片
|
||||
myImage.onload = function(){
|
||||
context.drawImage(myImage , 0 , 0 , 1280 , 720);
|
||||
// context.font = "60px Courier New";
|
||||
// context.fillText("我是文字",350,450);
|
||||
var waterMarkImg = new Image();
|
||||
waterMarkImg.crossOrigin = 'Anonymous';
|
||||
waterMarkImg.src = waterMark; //水印图
|
||||
|
||||
waterMarkImg.onload = function(){ //第二次绘制，绘制logo即可
|
||||
context.drawImage(waterMarkImg , 0 , 0 , 499 , 210);
|
||||
var base64 = canvas.toDataURL("image/jpg"); //"image/png" 这里注意一下
|
||||
resolve(base64)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export default drawAndShareImage
|
||||
|
|
@ -0,0 +1,152 @@
|
|||
<template>
|
||||
<div class='QR-code-wrap'>
|
||||
<div class="info-card">
|
||||
<div class="title">身份二维码</div>
|
||||
<div class="QR-wrap">
|
||||
<div class="temp">
|
||||
<div class="QRImg" ref="qrCodeUrl"></div>
|
||||
</div>
|
||||
<div class="hint">
|
||||
<div>本码用于领取物资！请妥善保管二维码！</div>
|
||||
<div>（刷新倒计时：<span style="color:red">{{times}}s</span>）
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button" @click="Update">刷新</div>
|
||||
</div>
|
||||
<img class="bottom-img" src="@/assets/image/logo.png" alt="">
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import QRCode from 'qrcodejs2'
|
||||
import { GetQRCode } from 'api/QRCode'
|
||||
|
||||
export default {
|
||||
name:'QRCode',
|
||||
data(){
|
||||
return {
|
||||
times: 0,
|
||||
Code: null,
|
||||
timer: null,
|
||||
upDateTime:30
|
||||
}
|
||||
},
|
||||
activated(){
|
||||
this.Code = sessionStorage.Code
|
||||
if(this.Code){
|
||||
this.getQRCode(this.Code)
|
||||
}else{
|
||||
this.$Toast.error('未认证人脸信息！即将返回！')
|
||||
setTimeout(() => {
|
||||
this.$router.push('/home')
|
||||
},800)
|
||||
}
|
||||
},
|
||||
deactivated(){
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
methods:{
|
||||
getQRCode(code,flag){
|
||||
GetQRCode(code).then(res =>{
|
||||
if(res.code === 0){
|
||||
this.QRCode = res.data.Code
|
||||
this.creatQrCode(this.QRCode)
|
||||
if(flag){ //如果是刷新操作则提示一下
|
||||
this.$Toast.success('二维码刷新成功')
|
||||
}
|
||||
}else{
|
||||
this.$Toast.error('查询二维码失败！即将返回！')
|
||||
setTimeout(() => {
|
||||
this.$router.push('/home')
|
||||
},800)
|
||||
}
|
||||
})
|
||||
},
|
||||
Update(){ //刷新二维码
|
||||
this.getQRCode(this.Code,true)
|
||||
},
|
||||
creatQrCode(text) { //创建二维码
|
||||
clearInterval(this.timer)
|
||||
this.times = this.upDateTime
|
||||
this.$refs.qrCodeUrl.innerHTML = '' //每次创建二维码先清空之前的二维码图片
|
||||
var qrcode = new QRCode(this.$refs.qrCodeUrl, {
|
||||
text:text,
|
||||
width:200,
|
||||
height:200,
|
||||
colorDark: '#000000',
|
||||
colorLight: '#ffffff',
|
||||
correctLevel: QRCode.CorrectLevel.H
|
||||
})
|
||||
// 每三十秒刷新一次二维码
|
||||
this.timer = setInterval(() => {
|
||||
if(this.times == 0){
|
||||
this.getQRCode(this.Code,true)
|
||||
}else{
|
||||
this.times --
|
||||
}
|
||||
},1000)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="stylus" scoped>
|
||||
.QR-code-wrap
|
||||
box-sizing border-box
|
||||
width 100%
|
||||
overflow hidden
|
||||
height 100vh
|
||||
position relative
|
||||
.bottom-img
|
||||
position absolute
|
||||
bottom 0px
|
||||
width 100%
|
||||
left 0
|
||||
.info-card
|
||||
position relative
|
||||
z-index 999
|
||||
width 90%
|
||||
border-radius 15px
|
||||
background white
|
||||
margin 0 auto
|
||||
display flex
|
||||
flex-direction column
|
||||
justify-content center
|
||||
align-items center
|
||||
padding-bottom 30px
|
||||
overflow hidden
|
||||
margin-top 70px
|
||||
.title
|
||||
Title()
|
||||
.button
|
||||
Button()
|
||||
.QR-wrap
|
||||
width 100%
|
||||
display flex
|
||||
justify-content center
|
||||
flex-direction column
|
||||
align-items center
|
||||
padding 20px
|
||||
box-sizing border-box
|
||||
.temp
|
||||
width 224px
|
||||
height 224px
|
||||
box-sizing border-box
|
||||
padding 10px
|
||||
border 2px dotted #eee
|
||||
border-radius 5px
|
||||
.QRImg
|
||||
display flex
|
||||
justify-content center
|
||||
font-size 0
|
||||
.hint
|
||||
font-size 12px
|
||||
color #666
|
||||
margin-top 10px
|
||||
text-align center
|
||||
div
|
||||
margin-top 15px
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,296 @@
|
|||
<template>
|
||||
<div class="admin-wrap">
|
||||
<!-- <div class="title">操作中心</div> -->
|
||||
<div class="scan-wrap">
|
||||
<div class="main" @click="onScan">
|
||||
<img src="@/assets/image/scan1.png" alt="" class="outside">
|
||||
<img src="@/assets/image/scan2.png" alt="" class="interior">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<div class="main">
|
||||
<div class="detail">
|
||||
<div class="main">
|
||||
<div class="temp">
|
||||
<div class="userInfo">
|
||||
<span>姓名：</span>
|
||||
<span class="value">{{userData.Name}}</span>
|
||||
</div>
|
||||
<div class="userInfo">
|
||||
<span class='type'>身份证号：</span>
|
||||
<span class="value">{{idCard}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="img-wrap">
|
||||
<!-- <div class="imgs" :style="{backgroundImage:`url(${userData.imgUrl})`}" @click="showPreview = true"></div> -->
|
||||
<van-image
|
||||
class="imgs"
|
||||
fit="contain"
|
||||
:src="userData.FaceImgUrl"
|
||||
@click="showPreview = true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-wrap">
|
||||
<input v-model="code" type="text" placeholder='请输入编号'>
|
||||
<div class="button" @click="onSubmit">确认发放</div>
|
||||
</div>
|
||||
<van-image-preview
|
||||
v-model="showPreview"
|
||||
:images="images"
|
||||
>
|
||||
</van-image-preview>
|
||||
<img class="bottom-img" src="@/assets/image/logo.png" alt="">
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import {Icon, ImagePreview, Image,Dialog } from 'vant'
|
||||
import WeChatScan from 'utils/WeChatScan.js'
|
||||
import Vue from 'vue';
|
||||
Vue.use(ImagePreview);
|
||||
import { GetPeopleData, AddNo } from 'api/admin'
|
||||
|
||||
|
||||
export default {
|
||||
name:"Admin",
|
||||
data(){
|
||||
return {
|
||||
userData:{IdCard:'',Name:''},
|
||||
showPreview:false,
|
||||
code:'',
|
||||
}
|
||||
},
|
||||
components:{
|
||||
[Icon.name] :Icon,
|
||||
[Image.name]:Image,
|
||||
[Dialog.name]:Dialog,
|
||||
},
|
||||
computed:{
|
||||
images(){
|
||||
return [this.userData.FaceImgUrl]
|
||||
},
|
||||
idCard(){
|
||||
if(this.userData.IdCard){
|
||||
let str = this.userData.IdCard
|
||||
let difference = str.length - 5 - 3;
|
||||
return str.slice(0, 5) + '*'.repeat(difference) + str.slice(-3)
|
||||
}else{
|
||||
return ''
|
||||
}
|
||||
|
||||
// let replaceStr = new Array(difference + 1).join('*')
|
||||
// return this.userData.IdCard.replace(/^(.{5})(?:\d+)(.{3})$/,'$1' + replaceStr + '$2');
|
||||
}
|
||||
},
|
||||
activated(){
|
||||
this.$Toast.success('欢迎您！管理员！')
|
||||
},
|
||||
methods:{
|
||||
onScan(){
|
||||
WeChatScan(this.handleScanCode) //调用微信扫一扫一系列流程，传入回调函数
|
||||
},
|
||||
handleScanCode(ScanCode){
|
||||
this.userData = {}
|
||||
GetPeopleData(ScanCode).then(res => {
|
||||
if(res.code === 0){
|
||||
this.$Toast.success('查询成功！')
|
||||
this.userData = res.data
|
||||
if(res.data.No){
|
||||
Dialog.alert({
|
||||
title: '改用户已经绑定，无需再次绑定',
|
||||
message: '绑定编号为：' + this.userData.No
|
||||
});
|
||||
}
|
||||
}else{
|
||||
this.$Toast.error(res.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
onSubmit(){
|
||||
var reg = new RegExp('^[0-9]*$')
|
||||
if(this.code){
|
||||
if(!reg.test(this.code)){
|
||||
this.$Toast.error('请输入数字！')
|
||||
return
|
||||
}
|
||||
AddNo(this.userData.CodeMd5,this.code).then(res=> {
|
||||
if(res.code != 0 && res.code != 2018){
|
||||
this.$Toast.error('绑定失败：' + res.msg)
|
||||
}
|
||||
if(res.code === 0){
|
||||
this.$Toast.success('绑定成功！')
|
||||
}else if(res.code === 2018){
|
||||
Dialog.alert({
|
||||
title: '改用户已经绑定，请勿重复绑定',
|
||||
message: '绑定编号为：' + this.userData.No
|
||||
});
|
||||
}
|
||||
this.userData = {} //操作成功清空
|
||||
this.code = ''
|
||||
})
|
||||
}else{
|
||||
this.$Toast.error('请输入编号')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
@keyframes rotate{
|
||||
0%{
|
||||
transform: rotate(0deg) scale(1);
|
||||
}
|
||||
50%{
|
||||
transform:rotate(180deg) scale(1.2)
|
||||
}
|
||||
100%{
|
||||
transform: rotate(360deg) scale(1);
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.admin-wrap
|
||||
width 100%
|
||||
.bottom-img
|
||||
position absolute
|
||||
bottom 0px
|
||||
width 100%
|
||||
left 0
|
||||
.title
|
||||
padding 10px
|
||||
font-size 14px
|
||||
background rgb(64,158,255)
|
||||
text-align center
|
||||
color white
|
||||
.scan-wrap
|
||||
display flex
|
||||
justify-content center
|
||||
padding 30px 0
|
||||
.main
|
||||
width 25%
|
||||
position relative
|
||||
.outside
|
||||
width 100%
|
||||
animation rotate 5s linear 0s normal infinite
|
||||
.interior
|
||||
position absolute
|
||||
left 50%
|
||||
top 50%
|
||||
transform translate(-50%,-50%)
|
||||
width 50%
|
||||
.info
|
||||
width 90%
|
||||
border-radius 5px
|
||||
margin 0 auto
|
||||
min-height 100px
|
||||
background white
|
||||
overflow hidden
|
||||
.title
|
||||
background #eee
|
||||
color black
|
||||
.main
|
||||
width 100%
|
||||
padding 10px
|
||||
box-sizing border-box
|
||||
display flex
|
||||
justify-content space-between
|
||||
.img-wrap
|
||||
width 26%
|
||||
height 0
|
||||
background rgb(250,250,250)
|
||||
padding-bottom 30%
|
||||
box-sizing border-box
|
||||
position relative
|
||||
.imgs
|
||||
position absolute
|
||||
left 5px
|
||||
top 5px
|
||||
right 5px
|
||||
bottom 5px
|
||||
.detail
|
||||
width 72%
|
||||
box-sizing border-box
|
||||
vertical-align top
|
||||
height 0
|
||||
padding-bottom 30%
|
||||
background rgb(250,250,250)
|
||||
position relative
|
||||
font-size 16px
|
||||
.main
|
||||
position absolute
|
||||
left 0
|
||||
right 0
|
||||
top 0
|
||||
bottom 0
|
||||
display flex
|
||||
justify-content center
|
||||
align-items center
|
||||
.temp
|
||||
width 100%
|
||||
.userInfo
|
||||
color #666
|
||||
margin 10px 0
|
||||
word-wrap break-word
|
||||
white-space:normal
|
||||
font-size 14px
|
||||
.type
|
||||
width 5em
|
||||
display inline-block
|
||||
vertical-align top
|
||||
.value
|
||||
width calc(100% - 5em)
|
||||
display inline-block
|
||||
color #0086ff
|
||||
font-size 15px
|
||||
.input-wrap
|
||||
background white
|
||||
margin 0 auto
|
||||
width 90%
|
||||
border-radius 5px
|
||||
overflow hidden
|
||||
padding 20px 0
|
||||
display flex
|
||||
flex-direction column
|
||||
align-items center
|
||||
margin-top 5px
|
||||
box-sizing border-box
|
||||
position relative
|
||||
z-index 999
|
||||
input
|
||||
border none
|
||||
border-bottom 1px solid rgb(64,158,255)
|
||||
width 110px
|
||||
text-align center
|
||||
padding 10px
|
||||
border-radius 0
|
||||
font-size 25px
|
||||
color rgb(64,158,255)
|
||||
&::-webkit-input-placeholder
|
||||
text-align center
|
||||
font-size 16px
|
||||
color rgba(64,158,255,0.7)
|
||||
.button
|
||||
Button()
|
||||
margin-top 25px
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,185 @@
|
|||
<template>
|
||||
<div class="addPhoto-wrap">
|
||||
<div class="main-wrap">
|
||||
<!-- <div class="img-title">
|
||||
<span>请上传人脸照片</span>
|
||||
</div> -->
|
||||
<div class="main">
|
||||
<div class="img-item" >
|
||||
<div class="template-wrap">
|
||||
<!-- 使用背景图展示 -->
|
||||
<!-- <div class="imgs" :style="{backgroundImage:`url(${photo.url})`}"></div> -->
|
||||
<!-- 用image组件展示 -->
|
||||
<div class="img-wrap">
|
||||
<van-image
|
||||
v-show="photo"
|
||||
class="imgs"
|
||||
fit="contain"
|
||||
:src="photo"
|
||||
/>
|
||||
|
||||
<div class="temp" v-show="!photo" >
|
||||
<!-- <img class="cameraIcon" src="@/assets/image/camera-icon.png" alt=""> -->
|
||||
<svg class="cameraIcon" viewBox="0 0 24 24"><path fill="currentColor" d="M20,4H16.83L15,2H9L7.17,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6A2,2 0 0,0 20,4M20,18H4V6H8.05L9.88,4H14.12L15.95,6H20V18M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15Z" /></svg>
|
||||
<span>头像上传</span>
|
||||
</div>
|
||||
</div>
|
||||
<input :key="isKey" @change="onChange($event)" id="myInput" ref="myInput" type="file" accept="image/*">
|
||||
<!-- <input :key="isKey" @change="onChange($event)" id="myInput" ref="myInput" type="file" accept="image/*"> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用来放添加按钮 -->
|
||||
<!-- <div class="img-item" v-show="!photo.url">
|
||||
<div class="template-wrap">
|
||||
<input :key="isKey" @change="onChange($event)" id="myInput" ref="myInput" type="file" accept="image/*" capture="camera">
|
||||
<div class="img-wrap">
|
||||
<div class="temp">
|
||||
<img class="cameraIcon" src="@/assets/image/camera-icon.png" alt="">
|
||||
<span>头像上传</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { JudgeCompress, RotateImage, CheckFile, FiletoDataURL } from '@/utils/handleImage'
|
||||
import { Image } from 'vant'
|
||||
|
||||
|
||||
export default {
|
||||
name:'AddPhoto',
|
||||
// props:{
|
||||
// photo:Object,
|
||||
// },
|
||||
components:{
|
||||
[Image.name]:Image,
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
isKey:0,
|
||||
compressSize:100,
|
||||
photo:'',
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
onChange(e) {
|
||||
if(!e.target.files[0]){ //用户可能取消选择，此时啥都不用做
|
||||
return
|
||||
}
|
||||
this.$emit('readyHandle') //告诉父级已经开始处理.
|
||||
this.photo = ''
|
||||
let file = e.target.files[0];
|
||||
let _this = this
|
||||
if(file){
|
||||
var imageFile = CheckFile(file);
|
||||
if(!imageFile){
|
||||
this.$Toast.error('文件格式错误！')
|
||||
return
|
||||
}else{
|
||||
RotateImage(imageFile).then(res =>{ //传入文件，旋转后返回文件进行压缩
|
||||
JudgeCompress(res,this.compressSize,0.95).then(res => { //传入文件，压缩返回压缩后的文件
|
||||
FiletoDataURL(res).then(res => { //传入文件，返回base64 DataURL
|
||||
_this.photo = res
|
||||
_this.$emit('changePhoto', res)
|
||||
_this.isKey = (new Date()).getTime() //修改key以防止重新选择同一张图不触发change
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.addPhoto-wrap
|
||||
width 100%
|
||||
position relative
|
||||
z-index 999
|
||||
.main-wrap
|
||||
width 100%
|
||||
padding 0
|
||||
box-sizing border-box
|
||||
.img-title
|
||||
// background rgb(64,158,255)
|
||||
padding 10px
|
||||
text-align center
|
||||
font-size 14px
|
||||
align-items center
|
||||
color black
|
||||
padding-left 5px
|
||||
.main
|
||||
width 100%
|
||||
box-sizing border-box
|
||||
padding 40px 5px
|
||||
display flex
|
||||
justify-content center
|
||||
.img-item
|
||||
width 50%
|
||||
height 0
|
||||
padding-bottom 50%
|
||||
position relative
|
||||
overflow hidden
|
||||
box-sizing border-box
|
||||
display inline-block
|
||||
.template-wrap
|
||||
box-sizing border-box
|
||||
position absolute
|
||||
overflow hidden
|
||||
bottom 5px
|
||||
top 5px
|
||||
left 5px
|
||||
overflow hidden
|
||||
right 5px
|
||||
// background rgba(0,133,208,0.7)
|
||||
padding 5px
|
||||
.img-wrap
|
||||
box-sizing border-box
|
||||
width 100%
|
||||
height 100%
|
||||
border-radius 5px
|
||||
overflow hidden
|
||||
.imgs
|
||||
width 100%
|
||||
height 100%
|
||||
.temp
|
||||
position absolute
|
||||
top 5px
|
||||
bottom 5px
|
||||
left 5px
|
||||
right 5px
|
||||
border-radius 5px
|
||||
overflow hidden
|
||||
position absolute
|
||||
left 50%
|
||||
top 50%
|
||||
transform translate(-50%, -50%)
|
||||
display flex
|
||||
flex-direction column
|
||||
justify-content center
|
||||
align-items center
|
||||
span
|
||||
color black
|
||||
margin-top 10px
|
||||
font-size 14px
|
||||
.cameraIcon
|
||||
width 60px
|
||||
height 60px
|
||||
color black
|
||||
#myInput
|
||||
position absolute
|
||||
left 0
|
||||
top 0
|
||||
z-index 500
|
||||
display inline-block
|
||||
opacity 0
|
||||
width 100%
|
||||
height 100%
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<template>
|
||||
<div class='home-wrap'>
|
||||
<div class="background-wrap">
|
||||
<img class="background-image" src="@/assets/image/track.jpg" />
|
||||
</div>
|
||||
<!-- <div class="top-bgimg-wrap">
|
||||
<img class="top-img" src="@/assets/image/bgimg-top.png"/>
|
||||
<div class="logo-wrap">
|
||||
<img class="yidong-img" src="@/assets/image/yidong.png"/>
|
||||
<img class="fiveG-img" src="@/assets/image/5g.png"/>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="info-card flex-container">
|
||||
<add-photo @changePhoto="changePhoto" @readyHandle='readyHandle'></add-photo>
|
||||
<div class="form">
|
||||
<van-field required v-model="formData.Name" clearable placeholder="请输入姓名" />
|
||||
<van-field required type='number' v-model="formData.Phone" clearable placeholder="请输入手机号" />
|
||||
<!-- <van-field required type='text' v-model="formData.Code" clearable placeholder="请输入参赛编号" /> -->
|
||||
</div>
|
||||
<div class="button" @click="onSubmit">提交</div>
|
||||
</div>
|
||||
<!-- <div class="hint">
|
||||
温馨提示：请使用只包含本人正面头像的清晰照片进行注册
|
||||
</div> -->
|
||||
<!-- <img class="bottom-img" src="@/assets/image/bgimg-bottom.png" alt=""> -->
|
||||
<!-- <van-image-preview v-model="showPreview" :images="images"> </van-image-preview> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import addPhoto from "./components/addPhoto"
|
||||
import { Field, Dialog } from 'vant';
|
||||
import { Runnerverify} from 'api/home'
|
||||
|
||||
export default {
|
||||
name:'Home',
|
||||
components:{
|
||||
addPhoto,
|
||||
[Field.name]:Field,
|
||||
[Dialog.name]:Dialog
|
||||
},
|
||||
activated(){
|
||||
|
||||
},
|
||||
watch:{
|
||||
Code(val){
|
||||
sessionStorage.Code = val
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
photo:'',
|
||||
formData:{
|
||||
Name:'',
|
||||
Phone:'',
|
||||
Code:''
|
||||
},
|
||||
Code:null, //存入本地的code
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
changePhoto(imgBase64){
|
||||
this.photo = imgBase64
|
||||
this.$Loading.hidden()
|
||||
},
|
||||
readyHandle(){
|
||||
this.$Loading.show('正在处理图片...')
|
||||
},
|
||||
onSubmit(){
|
||||
if(this.verifyForm()){
|
||||
let data = {
|
||||
Name: this.formData.Name,
|
||||
facePic: this.photo,
|
||||
Phone:this.formData.Phone
|
||||
}
|
||||
this.$Loading.show('正在注册...')
|
||||
Runnerverify(data).then(res => {
|
||||
if(res.code === 0){
|
||||
this.$Toast.success('注册成功！')
|
||||
this.$router.push('/photos')
|
||||
localStorage.images = JSON.stringify(res.data)
|
||||
}else if(res.code === 2004){ //号码已被使用
|
||||
Dialog.alert({
|
||||
title: '温馨提示',
|
||||
message: '号码已被占用，请使用新的手机号码进行注册！'
|
||||
});
|
||||
}else if(res.code == 2021){ //如果返回没有照片则提示用户
|
||||
localStorage.images = []
|
||||
this.$router.push({
|
||||
path:'/photos',
|
||||
query:{
|
||||
type:'hintPage'
|
||||
}
|
||||
})
|
||||
}else{
|
||||
this.$Toast.error('注册失败：' + res.msg)
|
||||
}
|
||||
this.$Loading.hidden()
|
||||
}).catch(err => {
|
||||
this.$Loading.hidden()
|
||||
})
|
||||
}
|
||||
},
|
||||
verifyForm(){ //表单校验
|
||||
// let idcardReg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X|x)$/;
|
||||
// let IDcardFlag = idcardReg.test(this.formData.IDcard) ? true : false;
|
||||
let NameFlag = this.formData.Name.length && this.formData.Name.length > 0 ? true : false
|
||||
if(!this.photo){
|
||||
this.$Toast.error('请上传人脸照片！')
|
||||
return
|
||||
}else if(!NameFlag){
|
||||
this.$Toast.error('请填写姓名！')
|
||||
return
|
||||
}else if(this.formData.Phone.length !== 11){
|
||||
this.$Toast.error('请填写正确的手机号码！')
|
||||
return
|
||||
}else{
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
<template>
|
||||
<div class='home-wrap'>
|
||||
<div class="background-wrap">
|
||||
<img class="background-image" src="@/assets/image/track.jpg" />
|
||||
</div>
|
||||
<!-- <div class="top-bgimg-wrap">
|
||||
<img class="top-img" src="@/assets/image/bgimg-top.png"/>
|
||||
<div class="logo-wrap">
|
||||
<img class="yidong-img" src="@/assets/image/yidong.png"/>
|
||||
<img class="fiveG-img" src="@/assets/image/5g.png"/>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="top-brand-wrap">
|
||||
<h1 class="title">5G 赛道</h1>
|
||||
</div>
|
||||
<div class="info-card flex-container">
|
||||
<div class="form">
|
||||
<van-field required v-model="formData.Name" clearable placeholder="请输入姓名" />
|
||||
<van-field required type='number' v-model="formData.Phone" clearable placeholder="请输入手机号" />
|
||||
</div>
|
||||
<div class="button register" @click="onRegister">注册</div>
|
||||
<div class="button" @click="onLogin">登陆</div>
|
||||
</div>
|
||||
<!-- <div class="hint">
|
||||
已使用“5G赛道”小程序完成人脸注册的用户，请直接输入注册时的姓名和手机号码，登陆并领取照片。
|
||||
</div> -->
|
||||
<!-- <img class="bottom-img" src="@/assets/image/bgimg-bottom.png" alt=""> -->
|
||||
<!-- <van-image-preview v-model="showPreview" :images="images"> </van-image-preview> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Field, Toast, CellGroup, Dialog } from 'vant';
|
||||
import { Login } from 'api/home'
|
||||
|
||||
import imgs1 from '@/assets/image/imgs-01.jpg'
|
||||
import imgs2 from '@/assets/image/imgs-02.jpg'
|
||||
|
||||
export default {
|
||||
name:'Home',
|
||||
components:{
|
||||
[Field.name]:Field,
|
||||
[CellGroup.name]:CellGroup,
|
||||
},
|
||||
activated(){
|
||||
|
||||
},
|
||||
watch:{
|
||||
Code(val){
|
||||
sessionStorage.Code = val
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
photo:'',
|
||||
formData:{
|
||||
Name:'',
|
||||
Phone:'',
|
||||
},
|
||||
Code:null, //存入本地的code
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
onLogin(){
|
||||
if(!this.formData.Name){
|
||||
this.$Toast.error('请填写姓名！')
|
||||
return
|
||||
}else if(!this.formData.Phone || this.formData.Phone.length != 11){
|
||||
this.$Toast.error('请填写正确的手机号！')
|
||||
return
|
||||
}else{
|
||||
this.$Loading.show('正在登陆...')
|
||||
Login(this.formData).then(res => {
|
||||
if(res.code === 0){
|
||||
this.$Toast.success('登陆成功！')
|
||||
this.$router.push('/photos')
|
||||
localStorage.images = JSON.stringify(res.data)
|
||||
// localStorage.images = JSON.stringify([imgs1,imgs2,imgs1,imgs2])
|
||||
}else{
|
||||
this.$Toast.error('登陆失败：' + res.msg)
|
||||
}
|
||||
this.$Loading.hidden()
|
||||
}).catch(err => {
|
||||
this.$Loading.hidden()
|
||||
})
|
||||
}
|
||||
},
|
||||
onRegister(){
|
||||
this.$router.push('/home')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
<template>
|
||||
<div class='home-wrap'>
|
||||
<div class="background-wrap">
|
||||
<img class="background-image" src="@/assets/image/track.jpg" />
|
||||
</div>
|
||||
<!-- <div class="top-bgimg-wrap">
|
||||
<img class="top-img" src="@/assets/image/bgimg-top.png"/>
|
||||
<div class="logo-wrap">
|
||||
<img class="yidong-img" src="@/assets/image/yidong.png"/>
|
||||
<img class="fiveG-img" src="@/assets/image/5g.png"/>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="flex-container">
|
||||
<template v-if="!hintFlag">
|
||||
<div class="top-brand-wrap">
|
||||
<h1 class="title">您的 5G 纪念册</h1>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="imgs-wrap">
|
||||
<div class="imgs-item" v-for="(item,index) in imgs" :key="index">
|
||||
<img :src="item" alt="" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="hint" v-show='showHint'>
|
||||
<span>您没有任何纪念照哦！</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="button" @click="onRegister">重新注册</div>
|
||||
<template v-if="hintFlag">
|
||||
<div class="title">您的5G纪念册为空</div>
|
||||
<div class="hint-wrap">
|
||||
<div class="main">
|
||||
<div class="info-title">温馨提示</div>
|
||||
<div class="info">
|
||||
<p>1、为保证识别效果，请使用只有自己正面头像的清晰照片注册；</p>
|
||||
<p>2、若之前上传的照片效果不佳，没有匹配到照片，可以使用新的手机号码和头像照片，重新注册。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<!-- <img class="bottom-img" src="@/assets/image/bgimg-bottom.png" alt=""> -->
|
||||
<!-- <van-image-preview v-model="showPreview" :images="imgs"> </van-image-preview> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Field, CellGroup, Dialog } from 'vant';
|
||||
// import { ImagePreview} from 'vant'
|
||||
// import Vue from 'vue';
|
||||
// Vue.use(ImagePreview);
|
||||
import { GetUserAttestation } from 'api/home'
|
||||
import drawAndShareImage from '@/utils/waterMark'
|
||||
|
||||
export default {
|
||||
name:'Home',
|
||||
components:{
|
||||
[Field.name]:Field,
|
||||
[CellGroup.name]:CellGroup,
|
||||
[Dialog.name]:Dialog,
|
||||
},
|
||||
activated(){
|
||||
this.hintFlag = this.$route.query.type
|
||||
if(this.hintFlag) return
|
||||
let imgs = JSON.parse(localStorage.images)
|
||||
if(imgs){
|
||||
console.log(imgs,47)
|
||||
if(imgs.length === 0){
|
||||
this.showHint = true
|
||||
}
|
||||
this.handlerMark(imgs)
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
imgs:[],
|
||||
hintFlag:false, //空白页提示flag
|
||||
// showPreview:false,
|
||||
showHint:false
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
onRegister(){
|
||||
Dialog.alert({
|
||||
title: '温馨提示',
|
||||
message: '请务必使用新的手机号码重新注册！'
|
||||
}).then(() => {
|
||||
this.$router.replace('/home')
|
||||
});
|
||||
},
|
||||
handlerMark(arr){
|
||||
this.imgs = []
|
||||
arr.forEach(ele => {
|
||||
this.$Loading.show('正在处理图片...')
|
||||
drawAndShareImage(ele).then(res =>{
|
||||
this.imgs.push(res)
|
||||
this.$Loading.hidden()
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
'use strict'
|
||||
const path = require('path')
|
||||
|
||||
const resolve = dir => path.join(__dirname, dir)
|
||||
|
||||
const titleName = '5G 赛道' // 页面默认title，在路由中被覆盖（刚进入页面路由之前会展示这一段，之后会被路由中的逻辑覆盖）
|
||||
const port = process.env.VUE_APP_BASE_PORT || process.env.npm_config_port || 8088 // dev port 端口号
|
||||
|
||||
module.exports = {
|
||||
publicPath: process.env.NODE_ENV === "production" ? "./" : "/", //生产环境改成相对路径
|
||||
outputDir: 'dist',
|
||||
assetsDir: 'static', //打包后其他静态资源所在文件夹
|
||||
productionSourceMap: false, //设置成false加快打包速度，同时放弃生产环境的镜像map，也就是不能准确定位报错行数；
|
||||
devServer: {
|
||||
port: port,
|
||||
open: true,
|
||||
proxy: {
|
||||
[process.env.VUE_APP_BASE_API]: {
|
||||
target: `http://5gmalasong.hnabc.cn`,
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
['^' + process.env.VUE_APP_BASE_API]: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
configureWebpack: {
|
||||
name: titleName, //在index.html中可通过webpackConfig.name使用
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': resolve('src'),
|
||||
'components': resolve('src/components'),
|
||||
'globalComponents':resolve('src/globalComponents'),
|
||||
'utils':resolve('src/utils'),
|
||||
'assets':resolve('src/assets'),
|
||||
'api':resolve('src/api'),
|
||||
'styles':resolve('src/styles'),
|
||||
}
|
||||
}
|
||||
},
|
||||
css: {
|
||||
loaderOptions: {
|
||||
// 给 stylus-loader 传递选项,使得指定stylus公共变量可以全局使用
|
||||
stylus: {
|
||||
import: ['~@/styles/variables.styl']
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue