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