Skip to content

H
h5
Commit 5c550dfa by wangyalan-git
Options

生成二维码，扫描二维码，登录

parent 67f83abd
Showing with 387 additions and 47 deletions
babel.config.js
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
'@vue/cli-plugin-babel/preset',
'es2015'
],
plugins: [
[
......
package.json
......@@ -8,7 +8,9 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.19.2",
"core-js": "^3.6.5",
"qrcodejs2": "0.0.2",
"vant": "^2.8.6",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
......@@ -23,6 +25,7 @@
"@vue/eslint-config-standard": "^5.1.2",
"babel-eslint": "^10.1.0",
"babel-plugin-import": "^1.13.0",
"babel-preset-es2015": "^6.24.1",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
......
public/index.html
<!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.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>办公用品管理平台</title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>办公用品管理平台</title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="./qing.js"></script>
<script>
// 在 qing.config 执行前，所有其它的 ydk api 都不会真正被调用
// 这里是一个简单的配置，其它 API list 请参考详细文档
window.qing.config({
debug: true,
// 声明需要调用的API
jsApiList: ['scanQRCode']
// 声明需要监听的事件，声明后可通过 document.addEventListener 绑定监听函数
// jsEventList: ['appear', 'disappear']
})
window.qing.call('scanQRCode', {
success: function (res) {
}
})
// 监听appear事件
qing.on('appear', function (res) {
})
</script>
</body>
</html>
public/qing.js 0 → 100644
This diff is collapsed. Click to expand it.
src/api/code.js 0 → 100644
import request from '@/utils/request'
// /万科h5_生成二维码唯一标识符
export function generateQrcode (params) {
return request({
url: 'staff/generateQrcodeParam',
method: 'get',
params
})
}
// 万科h5_校验二维码唯一标识符
export function checkQcode (params) {
return request({
url: 'staff/checkOnlyId',
method: 'get',
params
})
}
src/api/login.js 0 → 100644
import request from '@/utils/request'
// 万科h5_通过ticket登录 返回token
export function getTicketLogin (params) {
return request({
url: 'sso/getVankeUserInfo',
method: 'get',
params
})
}
// 万科h5_测试使用测试通过jobNo登录 返回token
export function login (params) {
return request({
url: 'sso/testToken',
method: 'get',
params
})
}
// 获取当前登录用户信息
export function getUserInfo (data) {
return request({
url: 'sso/info',
method: 'get',
data
})
}
src/main.js
......@@ -4,12 +4,13 @@ import router from './router'
import store from './store'
import '@/assets/less/common.less'
import MyNavBar from '@/components/NavBar'
import { Col, Row, Button, PullRefresh, DropdownMenu, DropdownItem, Tabbar, TabbarItem, Cell, CellGroup, Popup, Search, Swipe, SwipeItem, Grid, GridItem, Image, Tab, Tabs, NavBar, Icon, List, Card, Checkbox, CheckboxGroup, Stepper, Sticky, Divider, RadioGroup, Radio, Field } from 'vant'
import { Toast, Col, Row, Button, PullRefresh, DropdownMenu, DropdownItem, Tabbar, TabbarItem, Cell, CellGroup, Popup, Search, Swipe, SwipeItem, Grid, GridItem, Image, Tab, Tabs, NavBar, Icon, List, Card, Checkbox, CheckboxGroup, Stepper, Sticky, Divider, RadioGroup, Radio, Field } from 'vant'
Vue.component('navbar', MyNavBar)
Vue.config.productionTip = false
Vue.use(PullRefresh)
Vue.use(Col)
Vue.use(Row)
Vue.use(Toast)
Vue.use(Cell).use(CellGroup)
Vue.use(Button)
Vue.use(Tabbar).use(TabbarItem)
......
src/store/getters.js 0 → 100644
const getters = {
token: state => state.user.token,
type: state => state.user.type,
avatar: state => state.user.avatar,
memberId: state => state.user.memberId,
name: state => state.user.name
}
export default getters
src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import getters from './getters'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
const store = new Vuex.Store({
modules: {
}
user
},
getters
})
export default store
src/store/modules/user.js 0 → 100644
import { login, getUserInfo, getTicketLogin } from '@/api/login'
const user = {
state: {
token: localStorage.getItem('token'),
type: localStorage.getItem('type'),
memberId: localStorage.getItem('memberId'),
name: localStorage.getItem('name'),
avatar: localStorage.getItem('avatar'),
buyParams: null
},
mutations: {
SET_TOKEN: (state, token) => {
state.token = token
localStorage.setItem('token', token)
},
SET_TYPE: (state, type) => {
state.type = type
localStorage.setItem('type', type)
},
SET_MEMBERID: (state, memberId) => {
state.memberId = memberId
localStorage.setItem('memberId', memberId)
},
SET_NAME: (state, name) => {
state.name = name
localStorage.setItem('name', name)
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
localStorage.setItem('avatar', avatar)
},
SET_BUY_PARAMS (state, buyParams) { // 传给确认订单页面的参数
state.buyParams = buyParams
}
},
actions: {
// 登录
Login ({ commit }, userInfo) {
return new Promise((resolve, reject) => {
console.log('userInfo', userInfo)
login(userInfo).then(response => {
const data = response.data
const tokenStr = data.tokenHead + data.token
commit('SET_TOKEN', tokenStr)
resolve()
}).catch(error => {
console.log('res')
reject(error)
})
})
},
// 获取用户信息
GetUserInfo ({ commit, state }) {
return new Promise((resolve, reject) => {
getUserInfo().then(response => {
const data = response.data
commit('SET_NAME', data.username)
commit('SET_AVATAR', data.icon)
commit('SET_MEMBERID', data.id)
commit('SET_TYPE', data.accouuntType)
resolve(response)
}).catch(error => {
reject(error)
})
})
},
// 正式的方法
getTicketLogin ({ commit }, userInfo) {
return new Promise((resolve, reject) => {
console.log('userInfo', userInfo)
getTicketLogin(userInfo).then(response => {
const data = response.data
const tokenStr = data.tokenHead + data.token
commit('SET_TOKEN', tokenStr)
resolve()
}).catch(error => {
console.log('res')
reject(error)
})
})
},
// 前端 登出
LogOut ({ commit }) {
console.log('退出')
return new Promise(resolve => {
commit('SET_TOKEN', '')
commit('SET_NAME', '')
commit('SET_AVATAR', '')
commit('SET_USERID', '')
localStorage.removeItem('token')
resolve()
})
}
}
}
export default user
src/utils/request.js 0 → 100644
import axios from 'axios'
import store from '../store'
import router from '../router'
import { Toast } from 'vant'
// 创建axios实例
const service = axios.create({
// baseURL: 'http://192.168.31.138:8201/mall-portal',
baseURL: 'http://192.168.31.127:8201/mall-portal/',
// baseURL: 'http://hhg.api.jsonpro.cn:8201/mall-portal',
timeout: 60000 // 请求超时时间
})
// request拦截器
service.interceptors.request.use(config => {
/* eslint-disable */
if (store.getters.token) {
config.headers['Authorization'] = store.getters.token
}
return config
}, error => {
// Do something with request error
console.log(error)
Promise.reject(error)
})
// respone拦截器
service.interceptors.response.use(
response => {
/**
* code为非200是抛错 可结合自己业务进行修改
*/
const res = response.data
// debugger
if (res.code !== 200) {
// 401:未登录;
if (res.code === 401) {
store.dispatch('LogOut').then(() => {
})
router.replace({
name: 'login',
query: { redirect: router.currentRoute.fullPath } // 登录后再跳回此页面时要做的配置
})
} else {
Toast(res.message)
}
return Promise.reject(res)
} else {
return response.data
}
},
error => {
console.log('err' + error)
// Toast.text(error.message || '服务器忙，请稍后再试！')
Toast('服务器忙，请稍后再试！')
return Promise.reject(error)
}
)
export default service
src/views/Admin/scan.vue
<template>
<div class="page">
<navbar title="扫码出库" rightText="完成" @rightClick="submit"></navbar>
<navbar title="扫码出库" rightText="完成" @rightClick="submit"></navbar>
<div class="container">
<div class="info">
<p>申领人： <span>王志军</span></p>
......@@ -14,25 +14,30 @@
<th>物品类别</th>
<th>数量</th>
</tr>
<tr v-for="(item,index) in 6" :key="index">
<tr v-for="(item, index) in 6" :key="index">
<td>圆珠笔</td>
<td>nhg</td>
<td>办公五品</td>
<td style="width: 30%;">
<stepper :maxNum="item.num" :inputNum="item.count" @changeNum="changeNum"></stepper>
<stepper
:maxNum="item.num"
:inputNum="item.count"
@changeNum="changeNum"
></stepper>
</td>
</tr>
</table>
</div>
<div class="bottom-fixed">
<van-button plain type="primary">扫描物品条形码</van-button>
<van-button type="primary">扫描员工二维码</van-button>
<van-button plain type="primary" @click="scanCode">扫描物品条形码</van-button>
<van-button type="primary" @click="scanCode">扫描员工二维码</van-button>
</div>
</div>
</template>
<script>
import Stepper from '@/components/Stepper.vue'
import { checkQcode } from '@/api/code'
export default {
name: 'scan',
......@@ -43,8 +48,39 @@ export default {
return {}
},
mounted () {
this.scanCode()
// this.scanQRCode()
},
methods: {
scanCode () {
console.log('扫描', window.qing)
window.qing.config({
debug: true,
// 声明需要调用的API
jsApiList: ['scanQRCode']
// 声明需要监听的事件，声明后可通过 document.addEventListener 绑定监听函数
// jsEventList: ['appear', 'disappear']
})
window.qing.call('scanQRCode', {
needResult: 1,
success: function (result) {
result.data = '{"onlyId":"f7c3af254e5a40caaf7dab1b06fd7a1c","memberId":53}'
const data = JSON.parse(result.data)
checkQcode(data).then(res => {
console.log('校验结果', res)
})
console.log('成功', result)
}
})
// const result = '{"onlyId":"62cd399e83184651bb6d15fe403fdac4","memberId":53}'
// const data = JSON.parse(result)
// checkQcode(data).then(res => {
// console.log('校验结果', res)
// })
// console.log('成功', result)
},
changeNum () {
},
submit () {
console.log('提交')
}
......@@ -52,7 +88,7 @@ export default {
}
</script>
<style lang='scss' scoped>
<style lang="scss" scoped>
.info {
background: #ffffff;
width: 100%;
......@@ -107,10 +143,12 @@ export default {
left: 0;
right: 0;
}
.bottom-fixed button {
width: 50%;
border-radius: 5px;
}
.bottom-fixed button:first-child {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
......@@ -120,5 +158,4 @@ export default {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
</style>
src/views/Employee/index.vue
......@@ -7,25 +7,51 @@
<div class="wrap">
<p>我的动态二维码</p>
</div>
<img class="qr"
src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2162188945,3066929966&fm=111&gp=0.jpg"
alt="">
<p class="notice">领用办公用品时请出示该二维码</p>
<div id="qrcode" class="qr"></div>
<p class="notice" v-if="onlyId">领用办公用品时请出示该二维码</p>
</div>
</div>
</div>
</template>
<script>
import { generateQrcode } from '@/api/code'
import QRCode from 'qrcodejs2'
export default {
name: 'index',
components: {},
data () {
return {}
return {
onlyId: null
}
},
mounted () {
this.generateQrcode()
},
methods: {
generateQrcode () {
generateQrcode().then(res => {
this.onlyId = res.data.onlyId
this.qrcode(this.onlyId)
})
},
qrcode (onlyId) {
const params = {
onlyId: onlyId,
memberId: this.$store.getters.memberId
}
console.log('memberId', this.$store.getters.memberId, JSON.stringify(params), typeof (JSON.stringify(params)))
const qrcode = new QRCode('qrcode', {
width: 100,
height: 100, // 高度
text: JSON.stringify(params) // 二维码内容
// render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
// background: '#f0f'
// foreground: '#ff0'
})
console.log(qrcode)
},
goRecords () {
this.$router.push({
path: '/receiveRecords'
......@@ -59,7 +85,7 @@ export default {
.code .qr {
width: 70%;
text-align: center;
margin: 0 auto 50px;
margin: 10px auto 50px;
}
.code .notice {
......
src/views/Home/index.vue
<template>
<div class="page">
<div class="page" v-if="JSON.stringify(userInfo)!= '{}'">
<navbar title="管理平台" :leftArrow="false"></navbar>
<div class="container">
<router-link :to="{path: 'receive'}" class="collect">
......@@ -7,7 +7,7 @@
<p class="title">办公用品领用</p>
<p>Office supplies collection</p>
</router-link>
<router-link :to="{path: 'admin'}" class="collect">
<router-link :to="{path: 'admin'}" class="collect" v-if="!userInfo.accouuntType">
<img class="bg" src="@/assets/images/Administration@2x.png" alt="">
<p class="title">办公用品管理</p>
<p> Office supplies management</p>
......@@ -17,30 +17,63 @@
</template>
<script>
export default {
name: 'index',
components: {},
data () {
return {}
return {
jobNo: null,
ticket: null,
userInfo: {}
}
},
mounted () {
this.jobNo = this.$route.query.jobNo
this.ticket = this.$route.query.ticket
this.getToken()
// this.getTicketLogin()
},
methods: {}
methods: {
getToken () {
this.$store.dispatch('Login', { jobNo: this.$route.query.jobNo }).then(() => {
this.$store.dispatch('GetUserInfo').then(res => {
res.data.accouuntType = 0
this.userInfo = res.data
console.log('userInof', this.userInfo)
}).catch(() => {
})
}).catch(() => {
})
},
getTicketLogin () {
this.$store.dispatch('getTicketLogin', { ticket: this.$route.query.ticket }).then(() => {
this.$store.dispatch('GetUserInfo').then(res => {
this.userInfo = res.data
console.log('userInof', res.data, this.userInfo)
}).catch(() => {
})
}).catch(() => {
})
}
}
}
</script>
<style lang='less' scoped>
.page{
.page {
background: #ffffff;
}
.collect{
.collect {
margin: 20px auto 0;
width: 90%;
padding: 8% 0 8%;
position: relative;
z-index: 2;
}
.collect .bg{
.collect .bg {
width: 100%;
height: 100%;
position: absolute;
......@@ -48,15 +81,17 @@ export default {
right: 0;
top: 0;
bottom: 0;
z-index:-1;
z-index: -1;
}
.collect p{
.collect p {
padding-left: 7%;
font-size: 13px;
color: #ffffff;
text-align: left;
}
.collect .title{
.collect .title {
font-size: 22px;
margin-bottom: 5px;
}
......
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