├── src
    ├── assets
    │   ├── printer.gif
    │   └── qrcode.jpg
    ├── segement
    │   ├── test.html
    │   └── circle_progress.html
    ├── main.js
    ├── views
    │   └── Home.vue
    ├── components
    │   ├── payment.vue
    │   ├── printerStatus.vue
    │   ├── progressBar.vue
    │   ├── breadScrum.vue
    │   ├── uploadFile.vue
    │   └── submit.vue
    ├── store
    │   └── index.js
    ├── router
    │   └── index.js
    └── App.vue
├── babel.config.js
├── .gitignore
├── README.md
├── public
    └── index.html
└── package.json


/src/assets/printer.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rebnerd/print_shop/HEAD/src/assets/printer.gif


--------------------------------------------------------------------------------
/src/assets/qrcode.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rebnerd/print_shop/HEAD/src/assets/qrcode.jpg


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/segement/test.html:
--------------------------------------------------------------------------------
1 | <ol class="no">
2 |     <li>1</li>
3 |     <li>2</li>
4 |     <li>3</li>
5 | </ol>
6 | <script>
7 |     document.querySelector('li:nth-child(2)').innerHTML="fuckyou"
8 | </script>


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | import router from './router'
4 | import store from './store'
5 | 
6 | createApp(App).use(store).use(router).mount('#app')
7 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <HelloWorld/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import HelloWorld from '../components/HelloWorld.vue';
 9 | 
10 | export default {
11 |   name: 'Home',
12 |   
13 |   components: {
14 |     HelloWorld,
15 |   },
16 | };
17 | </script>
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # print_shop
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/src/components/payment.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div>
 3 |   <section class="money">一共需要支付{{this.$store.state.money.toFixed(1)}}元<br>(请仔细核对文件页数和份数)</section>
 4 |   <img :src="require('../assets/qrcode.jpg')" alt="">
 5 |   <router-link to="/upload"><button class="btn btn-primary">我已完成支付</button></router-link>
 6 | </div>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   name: "payment"
12 | }
13 | </script>
14 | 
15 | <style scoped>
16 | .money{
17 |   color:red;
18 |   margin-bottom: 20px;
19 | }
20 | </style>


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import {createStore} from 'vuex'
 2 | 
 3 | export default createStore({
 4 |     state: {
 5 |         // printer: 'http://v49o743002.qicp.vip',
 6 |         // printer: 'http://localhost:8080',
 7 |         // For cors reason
 8 |         printer: 'http://192.168.66.196:4500',
 9 |         jobId: '',
10 |         money: '0'
11 |     },
12 |     mutations: {
13 |         // call the handler commit to store it
14 |         setJobId(state, jobId) {
15 |             state.jobId = jobId
16 |         },
17 |         setMoney(state, money) {
18 |             state.money = money
19 |         }
20 |     },
21 |     actions: {},
22 |     modules: {},
23 | })
24 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import {createRouter, createWebHashHistory} from 'vue-router'
 2 | import printerStatus from "../components/printerStatus";
 3 | import submit from "../components/submit";
 4 | import payment from "../components/payment";
 5 | import uploadFile from "../components/uploadFile";
 6 | 
 7 | const routes = [
 8 |   {
 9 |     path: '/',
10 |     component:printerStatus
11 |   },
12 |   {
13 |     path:'/create-job',
14 |     component: submit
15 |   },
16 |   {
17 |     path:'/pay',
18 |     component: payment,
19 |   },
20 |   {
21 |     path:'/upload',
22 |     component: uploadFile
23 |   }
24 | ]
25 | 
26 | const router = createRouter({
27 |   history: createWebHashHistory(process.env.BASE_URL),
28 |   routes
29 | })
30 | 
31 | export default router
32 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
 9 |           integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
10 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
11 |             integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
12 |             crossorigin="anonymous"></script>
13 |     <title><%= htmlWebpackPlugin.options.title %></title>
14 | </head>
15 | <body>
16 | <noscript>
17 |     <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
18 |         Please enable it to continue.</strong>
19 | </noscript>
20 | 
21 | <div id="app"></div>
22 | <!-- built files will be auto injected -->
23 | 
24 | </body>
25 | 
26 | </html>
27 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "print_shop",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^0.24.0",
12 |     "core-js": "^3.6.5",
13 |     "vue": "^3.0.0",
14 |     "vue-router": "^4.0.12",
15 |     "vue-status-indicator": "^1.2.1",
16 |     "vuex": "^4.0.0-0"
17 |   },
18 |   "devDependencies": {
19 |     "@vue/cli-plugin-babel": "~4.5.0",
20 |     "@vue/cli-plugin-eslint": "~4.5.0",
21 |     "@vue/cli-plugin-router": "~4.5.0",
22 |     "@vue/cli-plugin-vuex": "~4.5.0",
23 |     "@vue/cli-service": "~4.5.0",
24 |     "@vue/compiler-sfc": "^3.0.0",
25 |     "babel-eslint": "^10.1.0",
26 |     "eslint": "^6.7.2",
27 |     "eslint-plugin-vue": "^7.0.0"
28 |   },
29 |   "eslintConfig": {
30 |     "root": true,
31 |     "env": {
32 |       "node": true
33 |     },
34 |     "extends": [
35 |       "plugin:vue/vue3-essential",
36 |       "eslint:recommended"
37 |     ],
38 |     "parserOptions": {
39 |       "parser": "babel-eslint"
40 |     },
41 |     "rules": {}
42 |   },
43 |   "browserslist": [
44 |     "> 1%",
45 |     "last 2 versions",
46 |     "not dead"
47 |   ]
48 | }
49 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <!--  pass the current location to breadscrum-->
 3 |   <bread-scrum class="bread" :at="getPath"/>
 4 |   <div class="view container-md d-flex">
 5 |   <router-view/>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | import breadScrum from "./components/breadScrum";
11 | export default {
12 |   components: { breadScrum },
13 |   data(){
14 |     return {
15 |       order: ['/', '/create-job', '/pay', '/upload','/']
16 |     }
17 |   },
18 |   methods:{
19 |     // this is deprecated !! no use
20 |     getNextLoc(){
21 |       return this.order[this.order.indexOf(this.getPath)+1]
22 |     }
23 |   },
24 |   computed:{
25 |     getPath(){
26 |       return this.$route.path
27 |     }
28 |   }
29 | };
30 | </script>
31 | <style>
32 | #app {
33 |   font-family: Avenir, Helvetica, Arial, sans-serif;
34 |   -webkit-font-smoothing: antialiased;
35 |   -moz-osx-font-smoothing: grayscale;
36 |   text-align: center;
37 |   color: #2c3e50;
38 | }
39 | .bread{
40 |   position:absolute;
41 |   left: 50%;
42 |   transform: translateX(-50%);
43 |   z-index:100;
44 |   min-width:500px;
45 | }
46 | .view{
47 |   position: absolute;
48 |   top:60%;
49 |   left: 50%;
50 |   font-size: x-large;
51 |   transform: translate(-50%,-50%);
52 |   justify-content: center;
53 | }
54 | 
55 | 
56 | </style>
57 | 


--------------------------------------------------------------------------------
/src/components/printerStatus.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <section class="title">13-412自助打印店</section>
 4 |     <img :src="require('../assets/printer.gif')" style="margin:0px;background-clip:border-box, content-box, border-box, border-box;">
 5 | <!--    <button class="btn btn-primary" :disabled="!this.status" @click="redirect">下一步</button>-->
 6 |     <button class="btn btn-primary"  @click="redirect">下一步</button>
 7 | 
 8 |     <ol class="description"> 使用须知：
 9 |       <li>打印标准:本打印机仅支持单面打印(如需双面打印请联系群管理)</li>
10 |       <li>兼容打印格式：pdf，office全家桶，jpeg(灰黑)</li>
11 |       <li>收费标准:0.4元/张</li>
12 | 
13 | 
14 | <!--      打印机状态若显示正常，请点击下一步-->
15 |     </ol>
16 |     <section class="status">
17 |       打印机当前状态:{{this.status ? '空闲':'繁忙,请稍后再试'}}<br/>
18 |       正在排队人数:{{this.wait}}
19 |     </section>
20 |   </div>
21 | </template>
22 | 
23 | <script>
24 | import axios from 'axios'
25 | 
26 | export default {
27 |   name: "printerStatus",
28 |   data() {
29 |     return {
30 |       status: '',
31 |       wait: 0,
32 |       err:''
33 |     }
34 |   },
35 |   mounted() {
36 |     axios.post(this.$store.state.printer+'/query', {})
37 |         .then((response) => {
38 |           // console.log(response)
39 |           this.status = response.data["status"]
40 |           console.log(this.status)
41 |           this.wait = response.data["wait"]
42 |         })
43 |         .catch((err)=>{
44 |           alert('网络请求错误，请加载重试',err)
45 |         })
46 |   },
47 |   methods:{
48 |     redirect(){
49 |       this.$router.push('/create-job')
50 |     }
51 |   }
52 | }
53 | </script>
54 | 
55 | <style scoped>
56 | .description{
57 |   margin: 20px;
58 |   font-family: "Corsiva Hebrew";
59 | }
60 | .status{
61 |   color:red;
62 |   margin:20px
63 | }
64 | .title{
65 |   font-size:xx-large;
66 |   margin: 0px;
67 |   z-index:1000;
68 | }
69 | </style>


--------------------------------------------------------------------------------
/src/segement/circle_progress.html:
--------------------------------------------------------------------------------
 1 | <div class="canvas-wrap">
 2 |     <canvas id="canvas" width="300" height="300"></canvas>
 3 |     <span id="procent"></span>
 4 | </div>
 5 | <style>
 6 |     :root {
 7 |         background: #fff;
 8 |     }
 9 | 
10 |     span#procent {
11 |         display: block;
12 |         position: absolute;
13 |         left: 50%;
14 |         top: 50%;
15 |         font-size: 50px;
16 |         transform: translate(-50%, -50%);
17 |         color: #3949AB;
18 |     }
19 | 
20 |     span#procent::after {
21 |         content: '%';
22 |     }
23 | 
24 |     .canvas-wrap {
25 |         position: relative;
26 |         width: 300px;
27 |         height: 300px;
28 |     }
29 | </style>
30 | <script>
31 | 
32 |         const onUploading=function() {
33 |         var can = document.getElementById('canvas'),
34 |             spanProcent = document.getElementById('procent'),
35 |             c = can.getContext('2d');
36 | 
37 |         var posX = can.width / 2,
38 |             posY = can.height / 2,
39 |             fps = 1000 / 200,
40 |             procent = 0,
41 |             oneProcent = 360 / 100,
42 |             result = oneProcent * 64;
43 | 
44 |         c.lineCap = 'round';
45 |         arcMove();
46 | 
47 |         function arcMove(){
48 |             var deegres = 0;
49 |             var acrInterval = setInterval (function() {
50 |                 deegres += 1;
51 |                 c.clearRect( 0, 0, can.width, can.height );
52 |                 procent = deegres / oneProcent;
53 | 
54 |                 spanProcent.innerHTML = procent.toFixed();
55 | 
56 |                 c.beginPath();
57 |                 c.arc( posX, posY, 70, (Math.PI/180) * 270, (Math.PI/180) * (270 + 360) );
58 |                 c.strokeStyle = '#b1b1b1';
59 |                 c.lineWidth = '10';
60 |                 c.stroke();
61 | 
62 |                 c.beginPath();
63 |                 c.strokeStyle = '#3949AB';
64 |                 c.lineWidth = '10';
65 |                 c.arc( posX, posY, 70, (Math.PI/180) * 270, (Math.PI/180) * (270 + deegres) );
66 |                 c.stroke();
67 |                 if( deegres >= result ) clearInterval(acrInterval);
68 |             }, fps);
69 | 
70 |         }
71 | 
72 | 
73 |     }
74 | </script>


--------------------------------------------------------------------------------
/src/components/progressBar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="canvas-wrap">
 3 |     <canvas id="canvas" width="300" height="300"></canvas>
 4 |     <span id="procent"></span>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   name: "progressBar",
11 |   data() {
12 |     return {}
13 |   },
14 |   props: ['progress'],
15 |   // watch:{
16 |   //   jobId(newId,oldId){
17 |   //     if (newId!==oldId){
18 |   //       console.log(this.jobId)
19 |   //       this.reDraw()
20 |   //     }
21 |   //   }
22 |   // },
23 |   mounted() {
24 |     // here we have no data control yet!!
25 |     this.reDraw()
26 |   },
27 |   methods: {
28 |     reDraw(){
29 |       var can = document.getElementById('canvas'),
30 |           spanProcent = document.getElementById('procent'),
31 |           c = can.getContext('2d');
32 | 
33 |       var posX = can.width / 2,
34 |           posY = can.height / 2,
35 |           fps = 1000 / 200,
36 |           procent = 0,
37 |           oneProcent = 360 / 100,
38 |           result = oneProcent * this.progress;
39 | 
40 |       c.lineCap = 'round';
41 |       arcMove();
42 | 
43 |       function arcMove() {
44 |         var deegres = 0;
45 |         var acrInterval = setInterval(function () {
46 |           deegres += 1;
47 |           c.clearRect(0, 0, can.width, can.height);
48 |           procent = deegres / oneProcent;
49 | 
50 |           spanProcent.innerHTML = procent.toFixed();
51 | 
52 |           c.beginPath();
53 |           c.arc(posX, posY, 70, (Math.PI / 180) * 270, (Math.PI / 180) * (270 + 360));
54 |           c.strokeStyle = '#b1b1b1';
55 |           c.lineWidth = '10';
56 |           c.stroke();
57 | 
58 |           c.beginPath();
59 |           c.strokeStyle = '#3949AB';
60 |           c.lineWidth = '10';
61 |           c.arc(posX, posY, 70, (Math.PI / 180) * 270, (Math.PI / 180) * (270 + deegres));
62 |           c.stroke();
63 |           if (deegres >= result || deegres >= 360) clearInterval(acrInterval);
64 |         }, fps);
65 | 
66 |       }
67 |     }
68 |   }
69 | }
70 | 
71 | 
72 | </script>
73 | 
74 | <style scoped>
75 | :root {
76 |   background: #fff;
77 | }
78 | 
79 | span#procent {
80 |   position: absolute;
81 |   left: 50%;
82 |   top: 50%;
83 |   font-size: 50px;
84 |   transform: translate(-50%, -50%);
85 |   color: #3949AB;
86 | }
87 | 
88 | span#procent::after {
89 |   content: '%';
90 | }
91 | 
92 | /*.canvas-wrap {*/
93 | /*  position: absolute;*/
94 | /*  top:%;*/
95 | /*  left:10%;*/
96 | /*}*/
97 | 
98 | </style>


--------------------------------------------------------------------------------
/src/components/breadScrum.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <nav aria-label="breadcrumb">
  3 |     <ol class="breadcrumb my-2">
  4 |       <li class="breadcrumb-item active"><a href="/">确认打印机情况</a></li>
  5 |       <li class="breadcrumb-item"><a>创建打印任务</a></li>
  6 |       <li class="breadcrumb-item"><a>付款</a></li>
  7 |       <li class="breadcrumb-item"><a>上传打印文件</a></li>
  8 |     </ol>
  9 |   </nav>
 10 | </template>
 11 | 
 12 | <script>
 13 | export default {
 14 |   name: "breadScrum",
 15 |   data() {
 16 |     return {
 17 |       order: ['/', '/create-job', '/pay', '/upload']
 18 |     }
 19 |   },
 20 |   props: ['at'],
 21 | 
 22 |   watch: {
 23 |     at(newAt) {
 24 |       // console.log(newAt)
 25 |       let index = this.order.indexOf(newAt)+1
 26 |       // console.log(index)
 27 |       for(let i =1;i<=index;i++){
 28 |         let el = document.querySelector(`li:nth-child(${i})`)
 29 |         el.classList.add('active')
 30 |       }
 31 |       for(let i =index+1;i<=this.order.length;i++){
 32 |         let el = document.querySelector(`li:nth-child(${i})`)
 33 |         el.classList.remove('active')
 34 |       }
 35 |     }
 36 |   }
 37 | }
 38 | </script>
 39 | 
 40 | <style scoped>
 41 | nav .breadcrumb {
 42 |   padding: 0;
 43 |   background: transparent;
 44 | }
 45 | 
 46 | .breadcrumb .breadcrumb-item a {
 47 |   position: absolute;
 48 |   left: 0;
 49 |   right: 0;
 50 |   top: 18px;
 51 |   font-size: 13px;
 52 |   color: #999 !important;
 53 |   z-index: 1;
 54 |   text-decoration: none;
 55 |   box-sizing: border-box;
 56 |   margin: 2px;
 57 | }
 58 | 
 59 | .breadcrumb .breadcrumb-item {
 60 |   position: relative;
 61 |   margin: 0 15px 0 0;
 62 |   background: #575763;
 63 |   min-width: 100px;
 64 |   height: 16px;
 65 | }
 66 | 
 67 | .breadcrumb-item:before {
 68 |   content: "" !important;
 69 |   position: absolute;
 70 |   width: 0;
 71 |   border-top: 16px solid #575763;
 72 |   border-left: 10px solid transparent;
 73 |   left: -10px;
 74 |   top: 0;
 75 |   height: 16px;
 76 | }
 77 | 
 78 | .breadcrumb-item:after {
 79 |   content: "" !important;
 80 |   position: absolute;
 81 |   width: 0;
 82 |   border-top: 16px solid transparent;
 83 |   border-left: 10px solid #575763;
 84 |   right: -10px;
 85 |   top: 0;
 86 |   height: 16px;
 87 | }
 88 | 
 89 | .breadcrumb .breadcrumb-item:first-child {
 90 |   border-top-left-radius: 30px;
 91 |   border-bottom-left-radius: 30px;
 92 | }
 93 | 
 94 | .breadcrumb .breadcrumb-item:last-child {
 95 |   border-top-right-radius: 30px;
 96 |   border-bottom-right-radius: 30px;
 97 | }
 98 | 
 99 | .breadcrumb .breadcrumb-item:last-child:after {
100 |   border-left: 15px solid transparent;
101 | }
102 | 
103 | .breadcrumb .breadcrumb-item.active:first-child:before {
104 |   border-top: 16px solid transparent;
105 | }
106 | 
107 | .breadcrumb .breadcrumb-item.active {
108 |   background: #61c988;
109 | }
110 | 
111 | .breadcrumb-item.active:before {
112 |   border-top: 16px solid #61c988;
113 | }
114 | 
115 | .breadcrumb-item.active:after {
116 |   border-left: 10px solid #61c988;
117 | }
118 | </style>


--------------------------------------------------------------------------------
/src/components/uploadFile.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="file-upload">
 3 |     <label for="prompt" class="form-label">上传需要打印的文件</label>
 4 |     <input id="prompt" class="form-control form-control-lg" type="file" @change="onFileChange">
 5 |     <button @click="onUploadFile" class="btn btn-primary"
 6 |             :disabled="!this.selectedFile || this.done">上传文件
 7 |     </button>
 8 |     <progress-bar class="My-progress" v-if="progress" :progress="progress"/>
 9 | 
10 | <!--    <button class="btn btn-primary" @click="redirect">完成本次订单</button>-->
11 |     <div class="alert  alert-dismissible fade " role="alert">
12 |     </div>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 | import axios from "axios";
18 | import ProgressBar from "./progressBar";
19 | 
20 | export default {
21 |   name: "uploadFile",
22 |   components: {ProgressBar},
23 |   data() {
24 |     return {
25 |       selectedFile: "",
26 |       progress: 0,
27 |       done:false
28 |     };
29 |   },
30 |   watch:{
31 |     progress(progressNow){
32 |       if(progressNow==='100%'){
33 |         this.done=true
34 |       }
35 |     }
36 |   },
37 |   methods: {
38 |     onFileChange(e) {
39 |       const selectedFile = e.target.files[0]; // accessing file
40 |       this.selectedFile = selectedFile;
41 |     },
42 |     onUploadFile() {
43 |       alert('确定打印')
44 |       this.jobId++
45 |       // the req.file object
46 |       const formData = new FormData();
47 |       // key-values pairs, the name is file
48 |       formData.append("file", this.selectedFile);  // appending file
49 |       console.log(this.$store.state.jobId)
50 |       formData.append("job-id", this.$store.state.jobId)
51 |       // sending file to the backend
52 |       axios
53 |           .post(this.$store.state.printer+'/upload', formData, {
54 |             onUploadProgress: ProgressEvent => {
55 |               let progress =
56 |                   Math.round((ProgressEvent.loaded / ProgressEvent.total) * 100)
57 |                   + "%";
58 |               this.progress = progress;
59 |             }
60 |           })
61 |           .then(res => {
62 |             console.log(res)
63 |             var content = document.querySelector('.alert')
64 |             if(res.data.msg!=undefined) {
65 |               content.classList.add('show', 'alert-danger')
66 |               content.innerHTML = `<strong>服务端解析错误</strong> ${res.data.msg}`
67 |               // for user to retry!
68 |               this.done=false
69 |             }
70 |             else if(res.data.statusCode==="client-error-not-found"){
71 |               content.classList.add('show', 'alert-danger')
72 |               content.innerHTML = `<strong>任务已过期或未创建,请重复前面操作!!</strong>`
73 |               this.done=true
74 |             }
75 |             else{
76 |               // for the retry
77 |               content.classList.remove('alert-danger')
78 |               content.classList.add('show','alert-success')
79 |               content.innerHTML = `<strong>成功上传任务</strong>请自行取件,感谢您的使用`
80 |             }
81 |           })
82 |     },
83 |     // redirect() {
84 |     //   this.$router.push('/')
85 |     // }
86 |   }
87 | };
88 | </script>
89 | <style>
90 | button {
91 |   margin: 20px;
92 | }
93 | .My-progress{
94 |   position: absolute;
95 |   top:-100%;
96 | }
97 | 
98 | </style>


--------------------------------------------------------------------------------
/src/components/submit.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <form @submit.prevent="submit" class="row g-3 needs-validation" novalidate>
  4 |       <div class="col-md-4">
  5 |         <label for="page-number" class="form-label">所需打印页数</label>
  6 |         <input  v-model="form.number" type="text" class="form-control" id="page-number"  required>
  7 |         <div class="valid-feedback">
  8 |           Looks good!
  9 |         </div>
 10 |       </div>
 11 |       <div class="col-md-4">
 12 |         <label for="copies" class="form-label">所需打印份数</label>
 13 |         <input  v-model="form.copies" type="text" class="form-control" id="copies"  required>
 14 |         <div class="valid-feedback">
 15 |           Looks good!
 16 |         </div>
 17 |       </div>
 18 |       <div class="col-md-4">
 19 |         <label for="dorm" class="form-label">你所在宿舍号</label>
 20 |         <div class="input-group has-validation">
 21 |           <span class="input-group-text" id="inputGroupPrepend">@</span>
 22 |           <input v-model="form.dorm" type="text" class="form-control" id="dorm" aria-describedby="inputGroupPrepend"
 23 |                  required>
 24 |           <div class="invalid-feedback">
 25 |             invalid dorm number!
 26 |           </div>
 27 |         </div>
 28 |       </div>
 29 |       <div class="col-12">
 30 |         <div class="form-check">
 31 |           <input class="form-check-input" type="checkbox" value='box' id="invalidCheck" required>
 32 |           <label class="form-check-label" for="invalidCheck">
 33 |             comfirm the info above
 34 |           </label>
 35 |           <div class="invalid-feedback">
 36 |             You must comfirm before submitting.
 37 |           </div>
 38 |         </div>
 39 |       </div>
 40 |       <div class="col-12">
 41 |         <button class="btn btn-primary" type="submit">提交表单</button>
 42 |       </div>
 43 |     </form>
 44 |   </div>
 45 | </template>
 46 | 
 47 | <script>
 48 | import axios from 'axios'
 49 | export default {
 50 |   name: "submit",
 51 |   mounted(){
 52 |     (function () {
 53 | 
 54 |       // Fetch all the forms we want to apply custom Bootstrap validation styles to
 55 |       var inputs = document.querySelectorAll('form input')
 56 |       //we need a monkey-patch here
 57 |       HTMLInputElement.prototype.checkValidity=function(){
 58 |         const regex = new RegExp('^\\+?([1-9]\\d*)$')
 59 |         // console.log(this.nodeValue)
 60 |         return regex.test(this.value) || this.type==='checkbox' &&this.checked === true
 61 |       }
 62 |       // Loop over them and prevent submission
 63 | 
 64 |       Array.prototype.slice.call(inputs)
 65 |           .forEach(function (input) {
 66 |             input.addEventListener('focusout', function () {
 67 |               if (!input.checkValidity()) {
 68 |                 // form.classList.remove('was-validated')
 69 |                 // input.classList.remove('is-valid')
 70 |                 input.classList.add('is-invalid')
 71 |               }else{
 72 |                 input.classList.remove('is-invalid')
 73 |                 input.classList.add('is-valid')
 74 |               }
 75 |             }, false)
 76 |           })
 77 |     })()
 78 |   },
 79 |   data(){
 80 |     return {
 81 |       form:{
 82 |         number:'',
 83 |         copies:'',
 84 |         dorm:'',
 85 |       },
 86 |     }
 87 |   },
 88 |   watch:{
 89 |     form:{
 90 |       handler(newVal){
 91 |       console.log(newVal)
 92 |       },
 93 |       deep:true
 94 |     }
 95 |   },
 96 |   methods:{
 97 |     submit(){
 98 |       // console.log(this.form)
 99 |       var inputs = document.querySelectorAll('form input')
100 |       for(let i =0;i<inputs.length;i++){
101 |         if(inputs[i].classList.contains('is-invalid') || inputs[i].type==='checkbox' && inputs[i].checked === false){
102 |           return
103 |         }
104 |       }
105 |       // check if is null
106 |       for (const attr in this.form) {
107 |         if(this.form[attr]==='') return
108 |       }
109 |       axios.post(this.$store.state.printer+'/create-job',this.form)
110 |       .then((res)=>{
111 |         this.$store.commit('setJobId',res.data['job-id'])
112 |         this.$store.commit('setMoney',this.form.number*this.form.copies*0.4)
113 |         // console.log(this.$store.state.money)
114 |         this.$router.push('/pay')
115 |       })
116 |     },
117 |   },
118 | }
119 | 
120 | </script>
121 | 
122 | <style scoped>
123 |   button{
124 |     margin: 20px;
125 |   }
126 | 
127 | </style>


--------------------------------------------------------------------------------