@@ -0,0 +1,2 @@ | |||||
> 1% | |||||
last 2 versions |
@@ -0,0 +1,17 @@ | |||||
module.exports = { | |||||
root: true, | |||||
env: { | |||||
node: true | |||||
}, | |||||
'extends': [ | |||||
'plugin:vue/essential', | |||||
'eslint:recommended' | |||||
], | |||||
rules: { | |||||
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', | |||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' | |||||
}, | |||||
parserOptions: { | |||||
parser: 'babel-eslint' | |||||
} | |||||
} |
@@ -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 @@ | |||||
# client | |||||
## 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,5 @@ | |||||
module.exports = { | |||||
presets: [ | |||||
'@vue/app' | |||||
] | |||||
} |
@@ -0,0 +1,32 @@ | |||||
{ | |||||
"name": "client", | |||||
"version": "0.1.0", | |||||
"private": true, | |||||
"scripts": { | |||||
"dev": "vue-cli-service serve", | |||||
"build": "vue-cli-service build", | |||||
"lint": "vue-cli-service lint" | |||||
}, | |||||
"dependencies": { | |||||
"axios": "^0.19.0", | |||||
"core-js": "^2.6.5", | |||||
"fastclick": "^1.0.6", | |||||
"register-service-worker": "^1.6.2", | |||||
"vue": "^2.6.10", | |||||
"vue-router": "^3.0.3", | |||||
"vuex": "^3.1.1" | |||||
}, | |||||
"devDependencies": { | |||||
"@vue/cli-plugin-babel": "^3.10.0", | |||||
"@vue/cli-plugin-eslint": "^3.10.0", | |||||
"@vue/cli-plugin-pwa": "^3.10.0", | |||||
"@vue/cli-service": "^3.10.0", | |||||
"babel-eslint": "^10.0.1", | |||||
"eslint": "^5.16.0", | |||||
"eslint-plugin-vue": "^5.0.0", | |||||
"less": "^3.0.4", | |||||
"less-loader": "^4.1.0", | |||||
"mockjs": "^1.0.1-beta3", | |||||
"vue-template-compiler": "^2.6.10" | |||||
} | |||||
} |
@@ -0,0 +1,5 @@ | |||||
module.exports = { | |||||
plugins: { | |||||
autoprefixer: {} | |||||
} | |||||
} |
@@ -0,0 +1,18 @@ | |||||
<!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, minimum-scale=1, maximum-scale=1.0, user-scalable=no"> | |||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> | |||||
<title>client</title> | |||||
</head> | |||||
<body> | |||||
<noscript> | |||||
<strong>We're sorry but client 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> | |||||
</html> |
@@ -0,0 +1,20 @@ | |||||
{ | |||||
"name": "client", | |||||
"short_name": "client", | |||||
"icons": [ | |||||
{ | |||||
"src": "./img/icons/android-chrome-192x192.png", | |||||
"sizes": "192x192", | |||||
"type": "image/png" | |||||
}, | |||||
{ | |||||
"src": "./img/icons/android-chrome-512x512.png", | |||||
"sizes": "512x512", | |||||
"type": "image/png" | |||||
} | |||||
], | |||||
"start_url": "./index.html", | |||||
"display": "standalone", | |||||
"background_color": "#000000", | |||||
"theme_color": "#4DBA87" | |||||
} |
@@ -0,0 +1,2 @@ | |||||
User-agent: * | |||||
Disallow: |
@@ -0,0 +1,37 @@ | |||||
<template> | |||||
<div id="app"> | |||||
<router-view/> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
created(){ | |||||
} | |||||
} | |||||
</script> | |||||
<style lang="less"> | |||||
#app { | |||||
font-family: 'Avenir', Helvetica, Arial, sans-serif; | |||||
-webkit-font-smoothing: antialiased; | |||||
-moz-osx-font-smoothing: grayscale; | |||||
text-align: center; | |||||
color: #2c3e50; | |||||
width: 100vw; | |||||
height: 100vh; | |||||
&>*{ | |||||
width: 100%; | |||||
height: 100%; | |||||
} | |||||
} | |||||
#nav { | |||||
padding: 30px; | |||||
a { | |||||
font-weight: bold; | |||||
color: #2c3e50; | |||||
&.router-link-exact-active { | |||||
color: #42b983; | |||||
} | |||||
} | |||||
} | |||||
</style> |
@@ -0,0 +1,12 @@ | |||||
import ajax from '@/utils/ajax' | |||||
//系统用户登陆 | |||||
export function login(params) { | |||||
return ajax.post('/user/login',params) | |||||
} | |||||
//用户注册 | |||||
export function reg(params) { | |||||
return ajax.post('/user/reg',params) | |||||
} |
@@ -0,0 +1,8 @@ | |||||
body { | |||||
font-size: 48px; | |||||
} | |||||
input { | |||||
border-radius: 10px; | |||||
padding: 8px 24px; | |||||
} |
@@ -0,0 +1,261 @@ | |||||
html { | |||||
font-size: 28px; | |||||
//font-size:2.1878vw; | |||||
line-height: 100%; | |||||
padding: 0; | |||||
user-select: none; | |||||
} | |||||
body { | |||||
margin: 0; | |||||
padding: 0; | |||||
} | |||||
* { | |||||
box-sizing: border-box; | |||||
touch-action:none; | |||||
} | |||||
@media screen and (orientation: landscape) { | |||||
/*横屏 css*/ | |||||
} | |||||
.money { | |||||
font-size: 1.6em; | |||||
letter-spacing: 2px; | |||||
&::before { | |||||
content: "¥"; | |||||
font-size: .6em; | |||||
font-weight: 600; | |||||
} | |||||
&.small { | |||||
font-size: 1em !important; | |||||
} | |||||
&.blue { | |||||
color: #49c0f8; | |||||
&::before { | |||||
//color: #fff; | |||||
} | |||||
} | |||||
} | |||||
button, | |||||
input[type=text], | |||||
input[type=password] { | |||||
border-radius: .3rem; | |||||
line-height: 1.2rem; | |||||
padding: 0.5rem 1rem; | |||||
width: 7rem; | |||||
font-size: 100%; | |||||
margin: .5rem; | |||||
} | |||||
.input-big { | |||||
border: 2px solid #49c0f8; | |||||
font-size: 150%; | |||||
line-height: 180%; | |||||
border-radius: 0 !important; | |||||
} | |||||
button { | |||||
-webkit-appearance: none; | |||||
border: 0px; | |||||
} | |||||
input[type=checkbox] { | |||||
width: 1rem; | |||||
height: 1rem; | |||||
border: 1px solid #fff; | |||||
outline: 0px; | |||||
background: transparent; | |||||
vertical-align: sub; | |||||
-webkit-appearance: none; | |||||
position: relative; | |||||
margin-right: .4rem; | |||||
&:checked::before { | |||||
position: absolute; | |||||
display: block; | |||||
font-size: 1rem; | |||||
top: -.2rem; | |||||
left: .1rem; | |||||
content: "\2714"; | |||||
color: white; | |||||
} | |||||
} | |||||
//标准页 | |||||
.layoutPage { | |||||
display: flex; | |||||
flex-direction: column; | |||||
.mainBody { | |||||
display: flex; | |||||
flex-grow: 0; | |||||
flex: 1; | |||||
flex-shrink: 0; | |||||
overflow: hidden; | |||||
.centerBox{ | |||||
//margin-top:-4rem !important; | |||||
flex: 100%; | |||||
transform: translateY(-3rem); | |||||
} | |||||
&-main { | |||||
display: flex; | |||||
flex-direction: column; | |||||
flex: 100; | |||||
padding: 1rem; | |||||
line-height: 2rem; | |||||
font-size: 1rem; | |||||
text-align: left; | |||||
height: 100%; | |||||
overflow: hidden; | |||||
position: relative; | |||||
.title { | |||||
margin: .5rem; | |||||
margin-top: 0; | |||||
font-weight: 600; | |||||
} | |||||
} | |||||
&-ext { | |||||
flex: 35%; | |||||
} | |||||
} | |||||
} | |||||
//圆角按钮 | |||||
.cyBtn { | |||||
border-radius: 1rem; | |||||
padding: .5rem 1rem; | |||||
margin: 0 .5rem; | |||||
background: #4daf13; | |||||
color: #fff; | |||||
letter-spacing: .1rem; | |||||
} | |||||
//内容上下左右绝对居中 | |||||
.centerBox { | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: center; | |||||
height: 100%; | |||||
width: 100%; | |||||
} | |||||
//头部 | |||||
.headerBody { | |||||
display: flex; | |||||
flex-shrink: 0; | |||||
//height: 2.5rem; | |||||
line-height: 2.5rem; | |||||
//padding: 1rem 0rem; | |||||
color: #fefefe; | |||||
background: #343434; | |||||
align-content:center; | |||||
position: relative; | |||||
.timer { | |||||
//line-height: 2.5rem; | |||||
//flex: 3rem; | |||||
flex-grow: 0; | |||||
text-align: center; | |||||
font-weight: 100; | |||||
color: #49c0f8; | |||||
vertical-align: middle; | |||||
position: relative; | |||||
padding-left: .5rem; | |||||
margin: 0 .5rem; | |||||
&::before { | |||||
position: absolute; | |||||
vertical-align: middle; | |||||
content: ""; | |||||
display: inline-block; | |||||
width: 1px; | |||||
height: 80%; | |||||
margin-top: 6%; | |||||
left: 0; | |||||
background: #5a5a5a; | |||||
} | |||||
} | |||||
.back { | |||||
//flex: 280px; | |||||
flex-grow: 0; | |||||
text-align: left; | |||||
//font-size: 120%; | |||||
display: flex; | |||||
align-items: center; | |||||
padding-left: .5rem; | |||||
} | |||||
.avatar { | |||||
flex: 20; | |||||
flex-grow: 0; | |||||
font-weight: 200; | |||||
font-size: 80%; | |||||
} | |||||
.menus { | |||||
flex: 100; | |||||
height: 100%; | |||||
text-align: center; | |||||
display: flex; | |||||
justify-content:center; | |||||
.menu { | |||||
padding:0rem 1rem ; | |||||
&.active { | |||||
color: #49c0f8; | |||||
background: #1c1c1c; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
//底部 | |||||
.bottomBody { | |||||
position: relative; | |||||
padding: .5rem 1.2rem; | |||||
flex-grow: 0; | |||||
flex-shrink: 0; | |||||
display: flex; | |||||
color: #a9aba6; | |||||
width: 100%; | |||||
background: #00121c; | |||||
align-items: center; | |||||
&.bottom-fixed { | |||||
position: fixed; | |||||
bottom: 0; | |||||
} | |||||
.cash-info{ | |||||
color:#fff; | |||||
} | |||||
.left { | |||||
flex: 1; | |||||
text-align: left; | |||||
} | |||||
.right { | |||||
flex: 1; | |||||
text-align: right; | |||||
font-size: 1rem; | |||||
} | |||||
.timer { | |||||
display: flex; | |||||
align-items: center; | |||||
.time { | |||||
color: #49c0f8; | |||||
font-size: 2.4rem; | |||||
font-weight: 200; | |||||
line-height: 2.0rem; | |||||
vertical-align: middle; | |||||
margin-right: .6rem; | |||||
} | |||||
} | |||||
} |
@@ -0,0 +1,178 @@ | |||||
@media screen and (orientation: portrait) { | |||||
/*竖屏 css*/ | |||||
html{ | |||||
font-size:5vw; | |||||
} | |||||
.mainBody{ | |||||
flex-direction: column; | |||||
.bigMoney-input{ | |||||
width: 100%; | |||||
font-size: 2.4rem; | |||||
} | |||||
.mainBody-main{ | |||||
.payInfo{ | |||||
line-height: 2rem; | |||||
} | |||||
} | |||||
.mainBody-ext{ | |||||
width: 0; | |||||
height: 0; | |||||
flex: 0; | |||||
} | |||||
} | |||||
//键盘 | |||||
#keyboard { | |||||
position: fixed; | |||||
width: 100%; | |||||
height: 45vh !important; | |||||
bottom: -45vh; | |||||
z-index: 100; | |||||
transition: bottom; | |||||
&.upShow{ | |||||
bottom: 0vh; | |||||
} | |||||
.btn-table { | |||||
width: 100% !important; | |||||
height: 100% !important; | |||||
} | |||||
} | |||||
//dialog | |||||
.dialog{ | |||||
width: 100%; | |||||
height: 100%; | |||||
&-footer{ | |||||
&>div{ | |||||
display: flex; | |||||
&>button{ | |||||
flex: 1; | |||||
border-radius: 0; | |||||
margin: 0; | |||||
&:nth-child(n+2){ | |||||
border-left: 1px solid #fff; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} | |||||
//顶部 | |||||
.headerBody{ | |||||
// line-height: 2.2rem; | |||||
.back{ | |||||
label{ | |||||
display: none; | |||||
} | |||||
} | |||||
.menus{ | |||||
font-size: 90%; | |||||
.active{ | |||||
background: white !important; | |||||
} | |||||
} | |||||
.avatar{ | |||||
position: absolute; | |||||
right: 4rem; | |||||
top:0; | |||||
display: none; | |||||
} | |||||
.timer{ | |||||
position: absolute; | |||||
right: 0; | |||||
top:0; | |||||
} | |||||
} | |||||
//底部重定义 | |||||
.bottomBody{ | |||||
padding: 0; | |||||
flex-direction: column; | |||||
background: transparent; | |||||
// flex: 1001; | |||||
flex-shrink: 0; | |||||
.cash-info{ | |||||
margin-left:1rem; | |||||
color: #2c3e50; | |||||
font-weight: bold; | |||||
line-height: 2rem; | |||||
font-size: 120%; | |||||
} | |||||
.left{ | |||||
width: 100%; | |||||
padding-bottom: 0rem; | |||||
} | |||||
.copyright{ | |||||
font-size: .7rem; | |||||
} | |||||
.right{ | |||||
width: 100%; | |||||
&>div{ | |||||
display: flex; | |||||
width: 100%; | |||||
&>*{ | |||||
flex: 1; | |||||
} | |||||
} | |||||
.cyBtn{ | |||||
border-radius: 0; | |||||
font-size: 1.2rem; | |||||
padding: 1.2rem 1rem; | |||||
margin: 0; | |||||
&:nth-child(n+2){ | |||||
border-left:1px solid #fff; | |||||
} | |||||
} | |||||
} | |||||
.timer{ | |||||
.date{ | |||||
display: flex; | |||||
flex-wrap: nowrap; | |||||
font-size: 90%; | |||||
.day{ | |||||
margin-left: .4rem; | |||||
} | |||||
} | |||||
.time{ | |||||
} | |||||
} | |||||
} | |||||
//首页重定义 | |||||
.home{ | |||||
.content-box{ | |||||
flex-direction: row; | |||||
overflow: hidden; | |||||
width: 80%; | |||||
height:60%; | |||||
} | |||||
.box-item{ | |||||
margin: 5px; | |||||
width: calc(50% - 10px); | |||||
height: calc(33% - 10px) !important; | |||||
cursor: pointer; | |||||
&:nth-child(1){ | |||||
background-color:#77bb58 | |||||
} | |||||
&:nth-child(2){ | |||||
background-color:#d9b044 | |||||
} | |||||
&:nth-child(3){ | |||||
background-color:#3aace0 | |||||
} | |||||
&:nth-child(4){ | |||||
background-color:#909dd1 | |||||
} | |||||
&:nth-child(5){ | |||||
background-color:#3ac87c | |||||
} | |||||
} | |||||
} | |||||
} | |||||
@media screen and (-webkit-min-device-pixel-ratio: 2) { | |||||
/*devicePixelRatio 2 */ | |||||
} |
@@ -0,0 +1,48 @@ | |||||
<template> | |||||
<div class="bottomBody" :class="{'bottom-fixed':fixed}"> | |||||
<template v-if="$slots.default"> | |||||
<slot/> | |||||
</template> | |||||
<template v-else-if="$slots.left || $slots.right"> | |||||
<div class="left"> | |||||
<slot name="left"/> | |||||
</div> | |||||
<div class="right"> | |||||
<slot name="right"/> | |||||
</div> | |||||
</template> | |||||
<template v-else=""> | |||||
<div class="left timer"> | |||||
<div class="time">12:23</div> | |||||
<div class="date"> | |||||
<div class="week" >{{week[nowDate.getDay()]}}</div> | |||||
<div class="day">{{nowDate | dateFormat}}</div> | |||||
</div> | |||||
</div> | |||||
<div class="right copyright">Powered by 富茂智能云POS</div> | |||||
</template> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
data(){ | |||||
return{ | |||||
nowDate:new Date(), | |||||
week:{ | |||||
0:'星期日', | |||||
1:'星期一', | |||||
2:'星期二', | |||||
3:'星期三', | |||||
4:'星期四', | |||||
5:'星期七', | |||||
6:'星期六' | |||||
} | |||||
} | |||||
}, | |||||
created(){ | |||||
}, | |||||
props:['fixed'] | |||||
} | |||||
</script> |
@@ -0,0 +1,59 @@ | |||||
<template> | |||||
<div class="hello"> | |||||
<h1>{{ msg }}</h1> | |||||
<p> | |||||
For a guide and recipes on how to configure / customize this project,<br> | |||||
check out the | |||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>. | |||||
</p> | |||||
<h3>Installed CLI Plugins</h3> | |||||
<ul> | |||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li> | |||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa" target="_blank" rel="noopener">pwa</a></li> | |||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li> | |||||
</ul> | |||||
<h3>Essential Links</h3> | |||||
<ul> | |||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li> | |||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li> | |||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li> | |||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li> | |||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li> | |||||
</ul> | |||||
<h3>Ecosystem</h3> | |||||
<ul> | |||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li> | |||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li> | |||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li> | |||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li> | |||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li> | |||||
</ul> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
name: 'HelloWorld', | |||||
props: { | |||||
msg: String | |||||
} | |||||
} | |||||
</script> | |||||
<!-- Add "scoped" attribute to limit CSS to this component only --> | |||||
<style scoped lang="less"> | |||||
h3 { | |||||
margin: 40px 0 0; | |||||
} | |||||
ul { | |||||
list-style-type: none; | |||||
padding: 0; | |||||
} | |||||
li { | |||||
display: inline-block; | |||||
margin: 0 10px; | |||||
} | |||||
a { | |||||
color: #42b983; | |||||
} | |||||
</style> |
@@ -0,0 +1,232 @@ | |||||
<template> | |||||
<div id="keyboard" :class="{upShow:show2}"> | |||||
<div class="btn-list"> | |||||
<table class="btn-table"> | |||||
<tr> | |||||
<td> | |||||
<div @touchstart="inputValue('1')" class="btn-70 btn-radius clear-marginleft">1</div> | |||||
</td> | |||||
<td > | |||||
<div @touchstart="inputValue('2')" class="btn-70 btn-radius">2</div> | |||||
</td> | |||||
<td > | |||||
<div @touchstart="inputValue('3')" class="btn-70 btn-radius">3</div> | |||||
</td> | |||||
<td > | |||||
<div @touchstart="inputValue(-1)" class="btn-70 btn-radius">←</div> | |||||
</td> | |||||
</tr> | |||||
<tr> | |||||
<td> | |||||
<div @touchstart="inputValue('4')" class="btn-70 btn-radius clear-marginleft">4</div> | |||||
</td> | |||||
<td> | |||||
<div @touchstart="inputValue('5')" class="btn-70 btn-radius">5</div> | |||||
</td> | |||||
<td> | |||||
<div @touchstart="inputValue('6')" class="btn-70 btn-radius">6</div> | |||||
</td> | |||||
<td rowspan="3"> | |||||
<div @touchstart="(e)=>{e.stopPropagation();e.preventDefault();$isV?show2=false:$emit('ok', value2)}" class="btn-72 btn-radius color-white font-14"> | |||||
<span class="confirm">确 认</span> | |||||
</div> | |||||
</td> | |||||
</tr> | |||||
<tr> | |||||
<td> | |||||
<div @touchstart="inputValue('7')" class="btn-70 btn-radius clear-marginleft">7</div> | |||||
</td> | |||||
<td> | |||||
<div @touchstart="inputValue('8')" class="btn-70 btn-radius">8</div> | |||||
</td> | |||||
<td> | |||||
<div @touchstart="inputValue('9')" class="btn-70 btn-radius">9</div> | |||||
</td> | |||||
</tr> | |||||
<tr> | |||||
<template v-if="$store.getters.isVertical"> | |||||
<td > | |||||
<div @touchstart="inputValue('0')" class="btn-71 btn-radius clear-marginleft">0</div> | |||||
</td> | |||||
<td > | |||||
<div @click="(e)=>{ e.stopPropagation();e.preventDefault();show2=false;return false}" class="btn-71 btn-radius clear-marginleft">↓</div> | |||||
</td> | |||||
</template> | |||||
<template v-else> | |||||
<td colspan="2"> | |||||
<div @touchstart="inputValue('0')" class="btn-71 btn-radius clear-marginleft">0</div> | |||||
</td> | |||||
</template> | |||||
<td> | |||||
<div @touchstart="inputValue('.')" class="btn-70 btn-radius">.</div> | |||||
</td> | |||||
</tr> | |||||
</table> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
data() { | |||||
return { | |||||
value2: '', | |||||
show2:false, | |||||
maxLength:0, | |||||
}; | |||||
}, | |||||
watch: { | |||||
// show:{ | |||||
// immediate:true, | |||||
// handler(v){ | |||||
// this.show2=v||false; | |||||
// } | |||||
// } | |||||
}, | |||||
props: ["show"], | |||||
methods: { | |||||
inputValue(v) { | |||||
let valueStr = this.value2.toString(); | |||||
if (v === -1) { | |||||
if (valueStr.length > 0) { | |||||
valueStr = valueStr.substr(0, valueStr.length - 1); | |||||
} | |||||
} else if (v === ".") { | |||||
if (valueStr.length == 0) { | |||||
valueStr = "0."; | |||||
} else { | |||||
if (valueStr.indexOf(".") == -1) { | |||||
valueStr += v; | |||||
} | |||||
} | |||||
} else { | |||||
if(this.maxLength && valueStr.length>=this.maxLength){ | |||||
return; | |||||
} | |||||
var value2split = valueStr.split("."); | |||||
if (value2split.length > 1) { | |||||
if (value2split[1].length < 2) { | |||||
valueStr += v; | |||||
} | |||||
} else { | |||||
valueStr += v; | |||||
} | |||||
} | |||||
//this.value2=parseFloat(valueStr,2); | |||||
if(valueStr.length>1 && valueStr[0]==="0"){ | |||||
valueStr = valueStr.substring(1); | |||||
} | |||||
this.value2=valueStr; | |||||
console.log(this.value2); | |||||
this.$emit("change",this.value2); | |||||
} | |||||
} | |||||
}; | |||||
</script> | |||||
<style lang="less" scoped> | |||||
/* keyboard */ | |||||
#keyboard { | |||||
width: 100%; | |||||
height: 100%; | |||||
padding: 10px; | |||||
border: 1px solid #e5e5e5; | |||||
background: #f3f0f0; | |||||
border-radius: 3px; | |||||
box-shadow: 0px 0px 10px #f2f2f2; | |||||
margin: 0 0; | |||||
.btn-table { | |||||
width: 100%; | |||||
height: 70%; | |||||
td { | |||||
width: 25%; | |||||
padding: 0.1rem; | |||||
} | |||||
} | |||||
.btn-list { | |||||
width: 100%; | |||||
height: 100%; | |||||
overflow: hidden; | |||||
display: flex; | |||||
align-items: center; | |||||
.btn-radius { | |||||
border-radius: 6px; | |||||
border: 3px solid #494a4c; | |||||
line-height: 150%; | |||||
text-align: center; | |||||
text-shadow: 0px 1px 1px #fff; | |||||
font-family: Verdana, Geneva, sans-serif; | |||||
color: #3e3e3e; | |||||
font-size: 2rem; | |||||
cursor: pointer; | |||||
} | |||||
.btn-radius:active { | |||||
//background: #ffffff; | |||||
} | |||||
.clear-marginleft { | |||||
margin-left: 0; | |||||
} | |||||
.font-14 { | |||||
font-size: 0.8rem; | |||||
} | |||||
.font-12 { | |||||
font-size: 1.5rem; | |||||
} | |||||
.color-white { | |||||
color: #ffffff; | |||||
} | |||||
.btn-70, | |||||
.btn-71, | |||||
.btn-72 { | |||||
width: 100%; | |||||
height: 100%; | |||||
background: #c5c6c7; | |||||
position: relative; | |||||
transform: scale(1); | |||||
overflow: hidden; | |||||
// #ecf0f1; | |||||
//box-shadow:inset 0px -15px 8px -15px #2e3233; | |||||
&::before { | |||||
position: absolute; | |||||
content: ""; | |||||
display: block; | |||||
width: 100%; | |||||
height: 100%; | |||||
left: 0px; | |||||
top: -10px; | |||||
background: rgba(255, 255, 255, 0.7); | |||||
border-radius: 6px; | |||||
z-index: -1; | |||||
} | |||||
} | |||||
// .btn-71 { | |||||
// width: 100%; | |||||
// height: 100%; | |||||
// } | |||||
.btn-72 { | |||||
display: flex; | |||||
background: #3598db; | |||||
align-items: center; | |||||
justify-content: center; | |||||
&::before { | |||||
background: rgba(255, 255, 255, 0.2) !important; | |||||
} | |||||
} | |||||
.confirm { | |||||
line-height: 100%; | |||||
font-size: 1.4em; | |||||
writing-mode: vertical-rl; | |||||
} | |||||
} | |||||
} | |||||
</style> |
@@ -0,0 +1,134 @@ | |||||
<template> | |||||
<div class="mInput" :class="{'input-money':type==='money'}" > | |||||
<!-- <span>¥</span> --> | |||||
<input type="text" readonly :value="value2" @mousedown="bindKBEvent" :placeholder="placeholder"/> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
data() { | |||||
return { | |||||
value2:'', | |||||
}; | |||||
}, | |||||
props: { | |||||
placeholder:{ | |||||
type:String, | |||||
default:'', | |||||
}, | |||||
maxLength:{ | |||||
default(){ | |||||
return 9; | |||||
} | |||||
}, | |||||
value: { | |||||
handler(v) { | |||||
debugger; | |||||
this.value2 = v; | |||||
}, | |||||
//type: String, | |||||
default:'' | |||||
}, | |||||
type:{ | |||||
type:String, | |||||
default:'text' | |||||
}, | |||||
bindKB: { | |||||
// immediate: true, | |||||
type:Function, | |||||
default:undefined, | |||||
} | |||||
}, | |||||
watch: { | |||||
value:{ | |||||
immediate: true, | |||||
handler(v){ | |||||
this.value2 = v; | |||||
} | |||||
} | |||||
}, | |||||
computed:{ | |||||
// value2: { | |||||
// set(v) { | |||||
// this.$emit("input", v); | |||||
// }, | |||||
// get() { | |||||
// if (this.value === undefined) { | |||||
// return this.value; | |||||
// } else if (this.bindKB) { | |||||
// return this.bindKB.value2; | |||||
// } else { | |||||
// return ""; | |||||
// } | |||||
// } | |||||
// } | |||||
}, | |||||
mounted(){ | |||||
// if(!this.value2 && this.type=="money"){ | |||||
// this.value2=''; | |||||
// } | |||||
}, | |||||
methods: { | |||||
bindKBEvent() { | |||||
if (this.bindKB) { | |||||
console.log('bindKBEvent') | |||||
this.removeKBEvent(); | |||||
let kb = this.bindKB(); | |||||
kb.show2=true; | |||||
kb.maxLength=this.maxLength; | |||||
kb.value2=this.value2; | |||||
kb.$on("change", v => { | |||||
if(this.type==="money" && v.length==0){ | |||||
v = '0'; | |||||
} | |||||
this.value2 = v; | |||||
this.$emit('input',v) | |||||
}); | |||||
} | |||||
}, | |||||
removeKBEvent() { | |||||
if (this.bindKB) { | |||||
this.bindKB().show2=false; | |||||
this.bindKB().$off("change"); | |||||
} | |||||
} | |||||
} | |||||
}; | |||||
</script> | |||||
<style lang="less" scoped> | |||||
.mInput { | |||||
border-bottom: 1px solid #bebebe; | |||||
display: inline-block; | |||||
border-radius: 0; | |||||
padding-left: 0.1em; | |||||
font-size: 2.4rem; | |||||
font-weight: 600; | |||||
width: 90%; | |||||
input { | |||||
width: 100%; | |||||
border: 0px !important; | |||||
outline: 0px; | |||||
padding: initial !important; | |||||
font-weight: 600; | |||||
color: #2c3e50; | |||||
&::-webkit-input-placeholder{ | |||||
font-size: 1.5rem; | |||||
color:#999; | |||||
} | |||||
} | |||||
&.input-money { | |||||
input{ | |||||
width: calc(100% - 1.5em); | |||||
} | |||||
&::before { | |||||
content: "¥"; | |||||
font-size: 100%; | |||||
} | |||||
} | |||||
} | |||||
</style> |
@@ -0,0 +1,38 @@ | |||||
<template> | |||||
<div class="headerBody"> | |||||
<div class="back" @click="$router.back()"> | |||||
<span>←</span> | |||||
<label >返回</label> | |||||
</div> | |||||
<div class="menus"> | |||||
<div | |||||
class="menu" | |||||
v-for="item in menus" | |||||
:key="item.name" | |||||
:class="{active:item.active}" | |||||
>{{item.name}}</div> | |||||
</div> | |||||
<div class="avatar">{{userinfo.operatorName}}</div> | |||||
<div class="timer">10:23</div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
props: { | |||||
menus: { | |||||
type: Array, | |||||
default() { | |||||
return [ | |||||
{ name: "收银", active: 1, url: "/cash" }, | |||||
{ name: "交易", active: 0, url: "/cash-out" } | |||||
]; | |||||
} | |||||
} | |||||
}, | |||||
data() { | |||||
return { | |||||
userinfo:JSON.parse(localStorage.getItem("userInfo")) | |||||
}; | |||||
}, | |||||
}; | |||||
</script> |
@@ -0,0 +1,43 @@ | |||||
<template> | |||||
<div ref="body" class="body">{{text}}</div> | |||||
</template> | |||||
<script> | |||||
import { setTimeout } from 'timers'; | |||||
export default { | |||||
created(){}, | |||||
props:['text'], | |||||
mounted(){ | |||||
setTimeout(()=>{ | |||||
this.show(); | |||||
},200) | |||||
}, | |||||
methods:{ | |||||
show(){ | |||||
this.$refs.body.classList.add('show'); | |||||
}, | |||||
hide(){ | |||||
this.$refs.body.classList.add('hide'); | |||||
} | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped> | |||||
.body{ | |||||
position: absolute; | |||||
top:10vh; | |||||
right:10vh; | |||||
display: inline-block; | |||||
background: rgb(224, 207, 207); | |||||
padding: 2rem; | |||||
opacity: 0; | |||||
transition: all .5s; | |||||
} | |||||
.show{ | |||||
top:8vh; | |||||
opacity: 1; | |||||
} | |||||
.hide{ | |||||
opacity: 0; | |||||
} | |||||
</style> |
@@ -0,0 +1,28 @@ | |||||
import Vue from 'vue'; | |||||
import Msg from './Message.vue'; | |||||
let MsgConstructor = Vue.extend(Msg); | |||||
export default function(options){ | |||||
let txt = ''; | |||||
if(typeof(options) =='string'){ | |||||
txt=options; | |||||
}else if (options instanceof Object){ | |||||
txt = options.text; | |||||
}else{ | |||||
return; | |||||
} | |||||
let instance = new MsgConstructor(); | |||||
instance.text=txt; | |||||
instance.$mount(); | |||||
document.body.appendChild(instance.$el) | |||||
setTimeout(()=>{ | |||||
instance.hide(); | |||||
setTimeout(() => { | |||||
let dom = instance.$el; | |||||
instance.$destroy(true); | |||||
dom.remove() | |||||
}, 1000); | |||||
},5000) | |||||
} |
@@ -0,0 +1,19 @@ | |||||
import Message from '@/components/base/Message' | |||||
import kb from '@/components/KB' | |||||
import top from '@/components/Top' | |||||
import bottom from '@/components/Bottom1' | |||||
import Minput from '@/components/Minput' | |||||
import Dialog from '@/components/base/Dialog/Index' | |||||
export default { | |||||
install: function(Vue){ | |||||
Vue.prototype.$msg = Message; | |||||
Vue.component('kb',kb) | |||||
Vue.component('top',top) | |||||
Vue.component('bottom',bottom) | |||||
Vue.component('minput',Minput) | |||||
Vue.component('dal',Dialog) | |||||
} | |||||
} |
@@ -0,0 +1,63 @@ | |||||
import Vue from 'vue' | |||||
import App from './App.vue' | |||||
import router from './router' | |||||
import store from './store/' | |||||
import './registerServiceWorker' | |||||
import('@/assets/main.less') | |||||
import('@/assets/vertical.less') | |||||
import fastClick from 'fastclick' | |||||
fastClick.attach(document.body) | |||||
import register from '@/components/register' | |||||
Vue.use(register); | |||||
Vue.filter('dateFormat', require('@/utils/dateFormat').default); | |||||
Vue.prototype.$isV=store.getters.isVertical; //是竖屏 | |||||
//require("./mock/index.js") | |||||
process.env.NODE_ENV=='development' && require("./../dev.js") | |||||
document.body.oncontextmenu=function(e) { | |||||
e.preventDefault(); | |||||
} | |||||
// import vueTap from '@/utils/vueTap.js'; | |||||
// Vue.use(vueTap); | |||||
Vue.directive('tap',{ | |||||
bind:function(el,binding){ | |||||
var startTx, startTy, endTx, endTy, startTime, endTime; | |||||
el.addEventListener("touchstart",function(e){ | |||||
var touch=e.touches[0]; | |||||
startTx = touch.clientX; | |||||
startTy = touch.clientY; | |||||
startTime = +new Date() | |||||
e.stopPropagation(); | |||||
},false ); | |||||
el.addEventListener("touchend",function(e){ | |||||
endTime = +new Date() | |||||
if (endTime - startTime > 300) { | |||||
// 若点击事件过长,不执行回调 | |||||
return | |||||
} | |||||
var touch = e.changedTouches[0]; | |||||
endTx = touch.clientX; | |||||
endTy = touch.clientY; | |||||
if( Math.abs(startTx - endTx) < 6 && Math.abs(startTy - endTy) < 6){ | |||||
// 若点击期间手机移动距离过长,不执行回调 | |||||
var method = binding.value; | |||||
method(); | |||||
} | |||||
e.stopPropagation(); | |||||
e.preventDefault() | |||||
},false); | |||||
} | |||||
}) | |||||
Vue.config.productionTip = false | |||||
new Vue({ | |||||
router, | |||||
store, | |||||
render: h => h(App) | |||||
}).$mount('#app') |
@@ -0,0 +1,32 @@ | |||||
/* eslint-disable no-console */ | |||||
import { register } from 'register-service-worker' | |||||
if (process.env.NODE_ENV === 'production') { | |||||
register(`${process.env.BASE_URL}service-worker.js`, { | |||||
ready () { | |||||
console.log( | |||||
'App is being served from cache by a service worker.\n' + | |||||
'For more details, visit https://goo.gl/AFskqB' | |||||
) | |||||
}, | |||||
registered () { | |||||
console.log('Service worker has been registered.') | |||||
}, | |||||
cached () { | |||||
console.log('Content has been cached for offline use.') | |||||
}, | |||||
updatefound () { | |||||
console.log('New content is downloading.') | |||||
}, | |||||
updated () { | |||||
console.log('New content is available; please refresh.') | |||||
}, | |||||
offline () { | |||||
console.log('No internet connection found. App is running in offline mode.') | |||||
}, | |||||
error (error) { | |||||
console.error('Error during service worker registration:', error) | |||||
} | |||||
}) | |||||
} |
@@ -0,0 +1,68 @@ | |||||
import Vue from 'vue' | |||||
import Router from 'vue-router' | |||||
import Home from './views/Home.vue' | |||||
Vue.use(Router) | |||||
const routes = [ | |||||
{ | |||||
path: '/', | |||||
name: 'home', | |||||
component: Home | |||||
}, | |||||
{ | |||||
path: '/login', | |||||
name: 'login', | |||||
component: () => import('./views/Login.vue') | |||||
}, | |||||
{ | |||||
path: '/about', | |||||
name: 'about', | |||||
// route level code-splitting | |||||
// this generates a separate chunk (about.[hash].js) for this route | |||||
// which is lazy-loaded when the route is visited. | |||||
component: () => import(/* webpackChunkName: "about" */ './views/About.vue') | |||||
}, | |||||
{ | |||||
path: '/cash', | |||||
name: 'cash', | |||||
// route level code-splitting | |||||
// this generates a separate chunk (about.[hash].js) for this route | |||||
// which is lazy-loaded when the route is visited. | |||||
component: () => import(/* webpackChunkName: "about" */ './views/Cash.vue') | |||||
}, | |||||
{ | |||||
path: '/cash_home', | |||||
name: 'cash_home', | |||||
component: () => import(/* webpackChunkName: "about" */ './views/Cash_home.vue') | |||||
}, | |||||
{ | |||||
path: '/user_login', | |||||
name: 'user_login', | |||||
component: () => import(/* webpackChunkName: "about" */ './views/User_login.vue') | |||||
}, | |||||
{ | |||||
path: '/verification', | |||||
name: 'verification', | |||||
component: () => import(/* webpackChunkName: "about" */ './views/Verification.vue') | |||||
} | |||||
]; | |||||
const router = new Router({ routes }) | |||||
router.beforeEach((to, from, next) => { | |||||
var userInfo = localStorage.getItem("userInfo") | |||||
if (userInfo) { | |||||
if (to.path === '/login') { | |||||
next({ path: '/' }) | |||||
} else{ | |||||
next() | |||||
} | |||||
}else{ | |||||
if (to.path === '/login') { | |||||
next() | |||||
}else{ | |||||
next("/login") | |||||
} | |||||
} | |||||
}) | |||||
export default router |
@@ -0,0 +1,8 @@ | |||||
const getters = { | |||||
device: state => state.device, | |||||
user: state => state.user, | |||||
isVertical:state => state.isVertical | |||||
} | |||||
export default getters | |||||
@@ -0,0 +1,13 @@ | |||||
import Vue from 'vue' | |||||
import Vuex from 'vuex' | |||||
import getters from './getters' | |||||
import store from './store' | |||||
Vue.use(Vuex) | |||||
const v = new Vuex.Store({ | |||||
...store, | |||||
getters | |||||
}) | |||||
export default v |
@@ -0,0 +1,12 @@ | |||||
const state = { | |||||
device: '', | |||||
user: 'xxx', | |||||
isVertical:screen.height>screen.width, | |||||
} | |||||
const mutations = {} | |||||
const actions = {} | |||||
export default { | |||||
state, | |||||
mutations, | |||||
actions | |||||
} |
@@ -0,0 +1,76 @@ | |||||
import axios from 'axios' | |||||
import Message from '@/components/base/Message' | |||||
// 创建axios实例 | |||||
const service = axios.create({ | |||||
baseURL: process.env.VUE_APP_BASE_API,//process.env.BASE_API, // api 的 base_url | |||||
timeout: 15000, // 请求超时时间 | |||||
// transformRequest: [function (data) { | |||||
// data.NeuInfo={ | |||||
// "SN": "POS SN",//todo get Pos SN。。。 | |||||
// "Token": "Token" | |||||
// }; | |||||
// return JSON.stringify(data); | |||||
// }], | |||||
//withCredentials: true | |||||
}) | |||||
// request拦截器 | |||||
service.interceptors.request.use( | |||||
config => { | |||||
// config.headers['token'] = getAccountToken() || ''// 让每个请求携带自定义token 请根据实际情况自行修改 | |||||
return config | |||||
}, | |||||
error => { | |||||
console.log(error) // for debug | |||||
Promise.reject(error) | |||||
} | |||||
) | |||||
// response 拦截器 | |||||
service.interceptors.response.use( | |||||
response => { | |||||
if (response.status != 200) { | |||||
//todo alert httpERR | |||||
Message('服务器出错') | |||||
return Promise.reject('error') | |||||
}else{ | |||||
var res = response.data | |||||
if(res.code == 200){ | |||||
return res.result | |||||
}else{ | |||||
//todo alert res.resultMessage | |||||
Message(JSON.stringify(res)) | |||||
return Promise.reject('error') | |||||
} | |||||
} | |||||
}, | |||||
error => { | |||||
console.log('err' + error) // for debug | |||||
return Promise.reject(error) | |||||
} | |||||
) | |||||
let axios_catch = (err) => { | |||||
Message('网络错误') | |||||
console.log(err.message); | |||||
throw err; | |||||
}; | |||||
let ajax = { | |||||
setHeader(name, value) { | |||||
service.defaults.headers[name] = value; | |||||
}, | |||||
get(url, data) { | |||||
return service.get(url, { params: data }).catch(axios_catch); | |||||
}, | |||||
post(url, data) { | |||||
return service.post(url, data).catch(axios_catch); | |||||
}, | |||||
update(url, data) { | |||||
return service.patch(url, data).catch(axios_catch); | |||||
}, | |||||
del(url, data) { | |||||
return service.delete(url, { params: data }).catch(axios_catch); | |||||
}, | |||||
} | |||||
window.ajax = ajax; | |||||
export default ajax |
@@ -0,0 +1,31 @@ | |||||
export default function formatDate(date, fmt="yyyy-MM-dd") { | |||||
if(!date){return ""} | |||||
if(typeof(date) == "number"){ | |||||
date = new Date(date); | |||||
} | |||||
if(typeof(date)=="string"){ | |||||
date = new Date(date); | |||||
} | |||||
if (/(y+)/.test(fmt)) { | |||||
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); | |||||
} | |||||
let o = { | |||||
'M+': date.getMonth() + 1, | |||||
'd+': date.getDate(), | |||||
'h+': date.getHours(), | |||||
'm+': date.getMinutes(), | |||||
's+': date.getSeconds() | |||||
}; | |||||
for (let k in o) { | |||||
if (new RegExp(`(${k})`).test(fmt)) { | |||||
let str = o[k] + ''; | |||||
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str)); | |||||
} | |||||
} | |||||
return fmt; | |||||
} | |||||
function padLeftZero(str) { | |||||
return ('00' + str).substr(str.length); | |||||
} | |||||
@@ -0,0 +1,25 @@ | |||||
let nativeInovk=(act,param="",debugShow=false)=>{ | |||||
if(window.deviceIF){ | |||||
return window.deviceIF.callFunc(act,param); | |||||
}else{ | |||||
if(debugShow){ | |||||
alert(param) | |||||
} | |||||
console.log('not find deviceIF'); | |||||
return ''; | |||||
} | |||||
} | |||||
export default { | |||||
//支付 | |||||
pay(amount,type){ | |||||
let obj={}; | |||||
obj.amount =amount; //金额,double | |||||
obj.payTypeId = type; //支付方式ID | |||||
return nativeInovk("doPay",JSON.stringify(obj),true); | |||||
}, | |||||
//设备码 | |||||
deviceSN:nativeInovk('getDeviceSN') | |||||
} |
@@ -0,0 +1,5 @@ | |||||
<template> | |||||
<div class="about"> | |||||
<h1>This is an about page</h1> | |||||
</div> | |||||
</template> |
@@ -0,0 +1,103 @@ | |||||
<template> | |||||
<div class="layoutPage"> | |||||
<top/> | |||||
<div class="mainBody"> | |||||
<div class="mainBody-main"> | |||||
<div class="title">支付金额</div> | |||||
<div class="payInfo" style="height:7rem;"> | |||||
<div v-if="payParam.payType==4"> | |||||
<div>消费卡金额: <span class="money">2000</span></div> | |||||
<div>消费卡首款金额: </div> | |||||
</div> | |||||
</div> | |||||
<div style="margin-bottom:1rem"> | |||||
<minput ref="minput" type="money" v-model="payParam.amount" :bindKB="()=>$refs.kb" ></minput> | |||||
</div> | |||||
<div> | |||||
收款方式: | |||||
</div> | |||||
<div class="payTypes"> | |||||
<div :class="{select:payParam.payType==1}" @click="payParam.payType=1">微信</div> | |||||
<div :class="{select:payParam.payType==2}" @click="payParam.payType=2">支付宝</div> | |||||
<div :class="{select:payParam.payType==3}" @click="payParam.payType=3">银行卡</div> | |||||
<div :class="{select:payParam.payType==4}" @click="payParam.payType=4">消费卡</div> | |||||
<div :class="{select:payParam.payType==5}" @click="payParam.payType=5">现金</div> | |||||
</div> | |||||
</div> | |||||
<div class="mainBody-ext"> | |||||
<kb ref="kb" @ok="ok" ></kb> | |||||
</div> | |||||
</div> | |||||
<bottom> | |||||
<div slot="left"> | |||||
<div class="cash-info"> | |||||
<div > | |||||
实收金额:<span class="money blue">{{payParam.amount}}</span> | |||||
</div> | |||||
<div> | |||||
优惠金额:<span class="money small">7.5</span> | |||||
优惠券:2 | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<div slot="right"> | |||||
<button class="cyBtn" @click="pay">收款</button> | |||||
</div> | |||||
</bottom> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import native from "@/utils/native"; | |||||
export default { | |||||
name:'cash', | |||||
components:{ | |||||
top:()=>import('@/components/Top'), | |||||
bottom:()=>import('@/components/Bottom1'), | |||||
kb:()=>import('@/components/KB') | |||||
}, | |||||
data(){ | |||||
return { | |||||
step:1, | |||||
payParam:{ | |||||
payType:0, | |||||
amount:"", | |||||
} | |||||
} | |||||
}, | |||||
created(){ | |||||
if(this.$route.params.payParam){ | |||||
Object.assign(this.payParam, {...this.$route.params.payParam}); | |||||
} | |||||
console.log(this.payParam) | |||||
}, | |||||
methods:{ | |||||
ok(){ | |||||
}, | |||||
pay(){ | |||||
native.pay(this.payParam.amount,this.payParam.payType); | |||||
} | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang="less"> | |||||
.payInfo{ | |||||
font-size: 120%; | |||||
line-height: 3rem; | |||||
} | |||||
.payTypes{ | |||||
line-height: 2rem; | |||||
div{ | |||||
display: inline-block; | |||||
height: 2.6rem; | |||||
width: 4.7rem; | |||||
margin: .5rem .5rem 0 .2rem; | |||||
background: gray; | |||||
border: 2px solid transparent; | |||||
} | |||||
.select{ | |||||
border: 2px solid red; | |||||
} | |||||
} | |||||
</style> |
@@ -0,0 +1,59 @@ | |||||
<template> | |||||
<div class="mainBody"> | |||||
<top/> | |||||
<div class="main"> | |||||
<div class="main-left"> | |||||
<div style="line-height:3.5rem;margin-top:5rem;margin-left:4rem"> | |||||
消费卡收款金额: | |||||
<div> | |||||
<div class="money-input"> | |||||
<input type="text" style="width:300px"/> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<div class="main-right"> | |||||
<kb/> | |||||
</div> | |||||
</div> | |||||
<bottom> | |||||
<div slot="left"> | |||||
<div style="color:#fff"> | |||||
实收金额:<span class="money blue">56.4</span> | |||||
</div> | |||||
<div> | |||||
优惠金额:<span class="money small">7.5</span> | |||||
优惠券:2 | |||||
</div> | |||||
</div> | |||||
<div slot="right"> | |||||
<button class="cyBtn">收款</button> | |||||
</div> | |||||
</bottom> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
components:{ | |||||
top:()=>import('@/components/Top'), | |||||
bottom:()=>import('@/components/Bottom1'), | |||||
kb:()=>import('@/components/KB') | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang="less"> | |||||
.payTypes{ | |||||
line-height: 2rem; | |||||
div{ | |||||
display: inline-block; | |||||
height: 3rem; | |||||
width: 5.5rem; | |||||
margin: .5rem .5rem 0 .5rem; | |||||
background: gray; | |||||
} | |||||
} | |||||
</style> |
@@ -0,0 +1,91 @@ | |||||
<template> | |||||
<div class="layoutPage"> | |||||
<top /> | |||||
<div class="mainBody"> | |||||
<div class="mainBody-main"> | |||||
<div class="title">支付金额</div> | |||||
<div class="centerBox"> | |||||
<minput placeholder="请输入收款现金" ref="minput" type="money" v-model="amount" :bindKB="()=>$refs.kb" ></minput> | |||||
</div> | |||||
</div> | |||||
<div class="mainBody-ext"> | |||||
<kb ref="kb" @ok="ok" ></kb> | |||||
</div> | |||||
</div> | |||||
<bottom> | |||||
<div slot="left" class="cash-info"> | |||||
<div > | |||||
实收金额: | |||||
<span class="money blue">{{amount}}</span> | |||||
</div> | |||||
<div> | |||||
优惠金额: | |||||
<span class="money small">7.5</span> | |||||
优惠券:2 | |||||
</div> | |||||
</div> | |||||
<div slot="right"> | |||||
<!-- <button class="cyBtn" @click="userRegShow=true">会员注册</button> --> | |||||
<button class="cyBtn" @click="$router.push('/user_login')">会员登录 | |||||
</button> | |||||
<button class="cyBtn" @click="$router.push({name:'cash',params:{payParam:{amount}}})">收款</button> | |||||
<dal title="注册会员" :visible.sync="userRegShow"> | |||||
<div>xxx | |||||
<br/> | |||||
</div> | |||||
<div slot="footer"> | |||||
<button class="cyBtn" @click="$router.push('/user_login')">会员登录 | |||||
</button> | |||||
<button class="cyBtn" @click="$router.push('/cash')">收款</button> | |||||
</div> | |||||
</dal> | |||||
</div> | |||||
</bottom> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
components: { | |||||
}, | |||||
data() { | |||||
return { | |||||
amount: '', | |||||
user_login: false, | |||||
userRegShow:false, | |||||
payParam: { | |||||
payType: 1 | |||||
} | |||||
}; | |||||
}, | |||||
mounted(){ | |||||
if(!this.$isV){ | |||||
this.$refs.minput.bindKBEvent(); | |||||
} | |||||
}, | |||||
methods:{ | |||||
ok(ee){ | |||||
alert(ee) | |||||
} | |||||
} | |||||
}; | |||||
</script> | |||||
<style scoped lang="less"> | |||||
.payInfo { | |||||
font-size: 120%; | |||||
line-height: 3rem; | |||||
} | |||||
.payTypes { | |||||
line-height: 2rem; | |||||
div { | |||||
display: inline-block; | |||||
height: 2.6rem; | |||||
width: 4.7rem; | |||||
margin: 0.5rem 0.5rem 0 0.2rem; | |||||
background: gray; | |||||
border: 2px solid transparent; | |||||
} | |||||
.select { | |||||
border: 2px solid red; | |||||
} | |||||
} | |||||
</style> |
@@ -0,0 +1,148 @@ | |||||
<template> | |||||
<div class="home" style="background-image: url('img/login_bg.jpg');"> | |||||
<div class="home-header"> | |||||
<div style="flex:1;text-align:left"> | |||||
富茂智能云POS | |||||
</div> | |||||
<div style="flex:1;text-align:right;" class="logout" @click="logout"> | |||||
<i class="">-></i> | |||||
退出 | |||||
</div> | |||||
</div> | |||||
<div class="content-box"> | |||||
<div @click="$router.push('/cash_home')" class="box-item" > | |||||
<label>收银</label> | |||||
</div> | |||||
<div class="box-item"> | |||||
<label>交易管理</label> | |||||
</div> | |||||
<div class="box-item"> | |||||
<label>会员</label> | |||||
</div> | |||||
<div class="box-item" @click="$router.push('/verification')"> | |||||
<label>核销管理</label> | |||||
</div> | |||||
<div class="box-item"> | |||||
<label>设置</label> | |||||
</div> | |||||
</div> | |||||
<bottom ></bottom> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
// @ is an alias to /src | |||||
import bottom from '@/components/Bottom1' | |||||
export default { | |||||
name: 'home', | |||||
components: { | |||||
bottom, | |||||
}, | |||||
created(){ | |||||
}, | |||||
methods:{ | |||||
logout:function(){ | |||||
localStorage.removeItem("userInfo") | |||||
this.$router.replace('/login') | |||||
} | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang="less"> | |||||
.home{ | |||||
background: url('/img/login_bg.jpg'); | |||||
background-repeat: no-repeat; | |||||
background-size: cover; | |||||
background-position: top center; | |||||
display: flex; | |||||
flex-direction: column; | |||||
} | |||||
.home-header{ | |||||
display:flex; | |||||
padding:1rem 1rem; | |||||
color: #fefefe; | |||||
} | |||||
.logout{ | |||||
font-weight: bold; | |||||
color: #ff5b5a; | |||||
&:active{ | |||||
color:#ff8d0b | |||||
} | |||||
} | |||||
.content-box{ | |||||
display: flex; | |||||
flex-flow: wrap; | |||||
flex-direction: column; | |||||
width: 60%; | |||||
height:50%; | |||||
margin: auto; | |||||
margin-top: 5%; | |||||
.box-item{ | |||||
font-size: 1rem; | |||||
margin: 5px; | |||||
background-color: rgba(0,0,0,.5); | |||||
height: calc(50% - 10px); | |||||
display: flex; | |||||
align-items: top; | |||||
justify-content:left; | |||||
position: relative; | |||||
cursor: pointer; | |||||
&:nth-child(1){ | |||||
flex:55%; background-color:#77bb58 | |||||
} | |||||
&:nth-child(2){ | |||||
background-color:#d9b044 | |||||
} | |||||
&:nth-child(3){ | |||||
background-color:#3aace0 | |||||
} | |||||
&:nth-child(4){ | |||||
background-color:#909dd1 | |||||
} | |||||
&:nth-child(5){ | |||||
background-color:#3ac87c | |||||
} | |||||
// flex:23%; | |||||
&::before{ | |||||
content: ""; | |||||
position: absolute; | |||||
display: block; | |||||
width: 100%; | |||||
height: 100%; | |||||
z-index: 1; | |||||
background:linear-gradient(rgba(255, 255, 255, .1) 0%,transparent 50% ); | |||||
background-origin: 0 0; | |||||
background-position-y: 100%; | |||||
background-size: 100% 200%; | |||||
transition: all .3s; | |||||
} | |||||
&:hover::before{ | |||||
background-position-y: 200%; | |||||
} | |||||
&:hover label{ | |||||
opacity: 1; | |||||
transform: scale(1.1); | |||||
} | |||||
label{ | |||||
color: #fff; | |||||
padding: 1rem; | |||||
transform: scale(.95); | |||||
pointer-events: none; | |||||
z-index: 2; | |||||
text-shadow: 1px 1px 1px rgba(0,0,0,.2); | |||||
text-align: center; | |||||
transition: all .3s; | |||||
i{ | |||||
display: block; | |||||
font-size: 40px; | |||||
margin: 10px; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
</style> |
@@ -0,0 +1,93 @@ | |||||
<template> | |||||
<div class="body" style="background-image: url('img/login_bg.jpg');"> | |||||
<div class="box"> | |||||
<div class="title">富茂智能云POS登录</div> | |||||
<input type="text" v-model="name" placeholder="账号"/> | |||||
<input type="password" v-model="password" placeholder="密码" @keypress="kbInput"/> | |||||
<div> | |||||
<label><input type="checkbox" name="" id="">自动登录</label> | |||||
</div> | |||||
<button class="loginBtn" @click="login">登录账号</button> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import {login} from '@/api/user' | |||||
// import { setTimeout } from 'timers'; | |||||
export default { | |||||
data(){ | |||||
return { | |||||
name:"", | |||||
password:"", | |||||
data:[] | |||||
} | |||||
}, | |||||
created(){ | |||||
this.$msg('xxxaaaxxxx'); | |||||
// let a=1; | |||||
// let aa= ()=>{ | |||||
// a++; | |||||
// this.data[0]={a,screen:{innerHeight:window.innerHeight,innerWidth:window.innerWidth,height:screen.height,width:screen.width,devicePixelRatio:window.devicePixelRatio,availHeight:screen.availHeight}}; | |||||
// this.data.splice(0,1,this.data[0]) | |||||
// setTimeout(aa,2200) | |||||
// } | |||||
// aa(); | |||||
}, | |||||
methods:{ | |||||
login:function(){ | |||||
var user = { | |||||
name:this.name, | |||||
password:this.password | |||||
} | |||||
login(user).then(response => { | |||||
debugger; | |||||
localStorage.setItem("userInfo",JSON.stringify(response.parameterforNextStep)) | |||||
this.$router.push('/'); | |||||
}) | |||||
//this.$router.push('/'); | |||||
}, | |||||
kbInput(e){ | |||||
if(e.keyCode==13){ | |||||
this.login(); | |||||
} | |||||
} | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang="less"> | |||||
.body{ | |||||
background: #000; | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content:center; | |||||
background-repeat: no-repeat; | |||||
background-size: cover; | |||||
background-position: top center; | |||||
.title{ | |||||
font-size: 1.12rem; | |||||
} | |||||
.loginBtn{ | |||||
background: #269e9f; | |||||
color: #fff; | |||||
} | |||||
.box{ | |||||
padding: 10px; | |||||
margin-top:-5rem; | |||||
text-align: left; | |||||
color: #fff; | |||||
&>*{ | |||||
display: block; | |||||
margin-bottom: 1rem; | |||||
} | |||||
&>input,&>button{ | |||||
width: 10rem; | |||||
} | |||||
} | |||||
} | |||||
</style> |
@@ -0,0 +1,69 @@ | |||||
<template> | |||||
<div class="layoutPage"> | |||||
<top /> | |||||
<div class="mainBody"> | |||||
<div class="mainBody-main"> | |||||
<div class="centerBox"> | |||||
<div> | |||||
<div>请扫描会员码或输入手机号码查询</div> | |||||
<minput ref="minput" class="bigMoney-input" v-model="phone" :bindKB="()=>$refs.kb" ></minput> | |||||
<div> | |||||
<button @click="ok">确认</button> | |||||
<button @click="regShow=true">注册新会员</button> | |||||
<dal :visible.sync="regShow"> | |||||
<div> | |||||
<div style="background:gray;width:8rem;height:8rem;margin:2rem"></div> | |||||
</div> | |||||
<div slot="footer"> | |||||
<button @click="regShow=false">会员登录</button> | |||||
<button @click="regShow=false">直接付款</button> | |||||
</div> | |||||
</dal> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<div class="mainBody-ext"> | |||||
<kb ref="kb" @ok="ok" ></kb> | |||||
</div> | |||||
</div> | |||||
<bottom> | |||||
<div slot="left"> | |||||
<div style="color:#fff"> | |||||
实收金额: | |||||
<span class="money blue">56.4</span> | |||||
</div> | |||||
<div> | |||||
优惠金额: | |||||
<span class="money small">7.5</span> | |||||
优惠券:2 | |||||
</div> | |||||
</div> | |||||
<div slot="right"> | |||||
<button class="cyBtn" @click="ok">收款</button> | |||||
</div> | |||||
</bottom> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
components: { | |||||
top: () => import("@/components/Top"), | |||||
bottom: () => import("@/components/Bottom1"), | |||||
kb: () => import("@/components/KB") | |||||
}, | |||||
data() { | |||||
return { | |||||
phone: "", | |||||
regShow:false, | |||||
}; | |||||
}, | |||||
methods: { | |||||
ok: function() { | |||||
this.$router.push("/cash"); | |||||
} | |||||
} | |||||
}; | |||||
</script> | |||||
<style scoped lang="less"> | |||||
</style> |
@@ -0,0 +1,65 @@ | |||||
<template> | |||||
<div class="mainBody"> | |||||
<top/> | |||||
<div class="main"> | |||||
<div class="main-left"> | |||||
<div> | |||||
<div class="menu"> | |||||
XXX | |||||
</div> | |||||
<div class="menu"> | |||||
YYY | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<bottom> | |||||
</bottom> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
components:{ | |||||
top:()=>import('@/components/Top'), | |||||
bottom:()=>import('@/components/Bottom1'), | |||||
}, | |||||
data(){ | |||||
return { | |||||
} | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang="less"> | |||||
.payInfo{ | |||||
font-size: 120%; | |||||
line-height: 3rem; | |||||
} | |||||
.payTypes{ | |||||
line-height: 2rem; | |||||
div{ | |||||
display: inline-block; | |||||
height: 2.6rem; | |||||
width: 4.7rem; | |||||
margin: .5rem .5rem 0 .2rem; | |||||
background: gray; | |||||
border: 2px solid transparent; | |||||
} | |||||
.select{ | |||||
border: 2px solid red; | |||||
} | |||||
} | |||||
.main-left{ | |||||
text-align: center !important; | |||||
} | |||||
.menu{ | |||||
display: inline-block; | |||||
background: gray; | |||||
width: 15rem; | |||||
height: 12rem; | |||||
margin:2.6rem; | |||||
} | |||||
</style> |
@@ -0,0 +1,4 @@ | |||||
module.exports = { | |||||
publicPath: '', | |||||
outputDir: 'D:\\study\\cordova\\test\\platforms\\android\\app\\src\\main\\assets\\www' | |||||
} |