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