@@ -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' | |||
} |