SpaceOfCheng
/
admin
Watch 3
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 2 Activity
Browse Source

xcx

许成详 6 years ago
parent
dcb94e3c4d
commit
11270cfe9a
9 changed files with 531 additions and 1 deletions
Split View Show Diff Stats
  1. 1
    1
      index.html
  2. 31
    0
      src/pages/system/page.js
  3. 19
    0
      src/pages/system/verificationManager/index.vue
  4. 57
    0
      src/pages/system/verificationManager/phoneVerification/index.vue
  5. 23
    0
      src/pages/system/verificationManager/phoneVerification/page.scss
  6. 148
    0
      src/pages/system/verificationManager/phoneVerification/verificationList/index.vue
  7. 75
    0
      src/pages/system/verificationManager/qrcodeVerification/index.vue
  8. 51
    0
      src/pages/system/verificationManager/qrcodeVerification/page.scss
  9. 126
    0
      src/pages/system/verificationManager/qrcodeVerification/verificationList/index.vue

+ 1
- 1
index.html View File 

@@ -3,7 +3,7 @@
3 3 
   <head>
4 4 
     <meta charset="utf-8">
5 5 
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
6 
-    <link rel="stylesheet" href="//at.alicdn.com/t/font_775069_c8w80pqou5c.css">
6 
+    <link rel="stylesheet" href="//at.alicdn.com/t/font_775069_25hulf12ph6.css">
7 7 
     <title>城的空间后台管理系统</title>
8 8 
   </head>
9 9 
   <body>

+ 31
- 0
src/pages/system/page.js View File 

@@ -67,6 +67,12 @@ import courseTag from './courseManager/courseTag/index' // 课程标签
67 67 
 import scheduleManager from './courseManager/scheduleManager/index' // 排课管理
68 68 
 import editSchedule from './courseManager/scheduleManager/edit' // 新增、编辑排课
69 69
70 
+import verificationManager from './verificationManager/index' // 核销管理
71 
+import qrcodeVerification from './verificationManager/qrcodeVerification/index' // 二维码核销
72 
+import qrcodeVerificationList from './verificationManager/qrcodeVerification/verificationList/index' // 二维码核销列表
73 
+import phoneVerification from './verificationManager/phoneVerification/index' // 手机核销
74 
+import phoneVerificationList from './verificationManager/phoneVerification/verificationList/index' // 手机核销列表
75 
+
70 76 
 import dataStatistics from './dataStatistics/index' // 数据统计
71 77 
 import frontEndUserList from './dataStatistics/frontEndUserList/index' // 课程管理
72 78 
 

@@ -376,6 +382,31 @@ export default {
376 382 
           component: courseTag,
377 383 
           children: []
378 384 
         }],
385 
+      }, { // 核销管理
386 
+        path: 'verificationManager',
387 
+        name: 'verificationManager',
388 
+        component: verificationManager,
389 
+        children: [{ // 二维码核销
390 
+          path: 'qrcodeVerification',
391 
+          name: 'qrcodeVerification',
392 
+          component: qrcodeVerification,
393 
+          children: [{ // 二维码核销列表
394 
+            path: 'qrcodeVerificationList',
395 
+            name: 'qrcodeVerificationList',
396 
+            component: qrcodeVerificationList,
397 
+            children: []
398 
+          }]
399 
+        }, { // 手机核销
400 
+          path: 'phoneVerification',
401 
+          name: 'phoneVerification',
402 
+          component: phoneVerification,
403 
+          children: [{ // 手机核销列表
404 
+            path: 'phoneVerificationList',
405 
+            name: 'phoneVerificationList',
406 
+            component: phoneVerificationList,
407 
+            children: []
408 
+          }]
409 
+        }]
379 410 
       }, { // 数据统计
380 411 
         path: 'dataStatistics',
381 412 
         name: 'dataStatistics',

+ 19
- 0
src/pages/system/verificationManager/index.vue View File 

@@ -0,0 +1,19 @@
1 
+<template>
2 
+  <div class="mainPage">
3 
+    <router-view></router-view>
4 
+  </div>
5 
+</template>
6 
+
7 
+<script>
8 
+export default {
9 
+  name: '',
10 
+  data () {
11 
+    return {}
12 
+  },
13 
+  components: {}
14 
+}
15 
+</script>
16 
+
17 
+<!-- Add "scoped" attribute to limit CSS to this component only -->
18 
+<style lang="scss" scoped>
19 
+</style>

+ 57
- 0
src/pages/system/verificationManager/phoneVerification/index.vue View File 

@@ -0,0 +1,57 @@
1 
+<template>
2 
+  <div class="subPage">
3 
+    <div>
4 
+      <div class="flex-h">
5 
+        <div class="flex-item">
6 
+          <div>
7 
+          <el-input
8 
+            placeholder="请输入手机号"
9 
+            v-model="phone"
10 
+            clearable>
11 
+          </el-input>
12 
+          </div>
13 
+        </div>
14 
+        <el-button type="danger" @click="toVerificationList">立即核销</el-button>
15 
+      </div>
16 
+    </div>
17 
+  </div>
18 
+</template>
19 
+
20 
+<script>
21 
+
22 
+export default {
23 
+  name: '',
24 
+  data () {
25 
+    return {
26 
+      phone: '',
27 
+    }
28 
+  },
29 
+  mounted () {
30 
+    this.$nextTick(function () { })
31 
+  },
32 
+  methods: {
33 
+    toVerificationList () { // 前往核销列表
34 
+      this.$router.push({name: 'phoneVerificationList', query: {code: this.phone}})
35 
+    },
36 
+  }
37 
+}
38 
+</script>
39 
+
40 
+<!-- Add "scoped" attribute to limit CSS to this component only -->
41 
+<style lang="scss" scoped>
42 
+.subPage {
43 
+  > div {
44 
+    width: 100%;
45 
+    margin: 40px auto 0;
46 
+    > div {
47 
+      width: 400px;
48 
+      margin: 0 auto;
49 
+      white-space: nowrap;
50 
+      font-size: 0;
51 
+      > div {
52 
+        margin-right: 20px;
53 
+      }
54 
+    }
55 
+  }
56 
+}
57 
+</style>

+ 23
- 0
src/pages/system/verificationManager/phoneVerification/page.scss View File 

@@ -0,0 +1,23 @@
1 
+
2 
+
3 
+
4 
+
5 
+
6 
+
7 
+
8 
+
9 
+
10 
+
11 
+
12 
+
13 
+
14 
+
15 
+
16 
+
17 
+
18 
+
19 
+
20 
+
21 
+
22 
+
23 
+

+ 148
- 0
src/pages/system/verificationManager/phoneVerification/verificationList/index.vue View File 

@@ -0,0 +1,148 @@
1 
+<template>
2 
+  <div class="subPage">
3 
+    <div class="list flex-h">
4 
+      <div class="flex-item">
5 
+        <div class="flex-h" style="margin: 20px 0 0;border:none;">
6 
+          <div class="flex-item">
7 
+            <div class="userInfo">
8 
+              <span>用户名：</span>
9 
+              <b>某某某</b>
10 
+              <span>手机号：</span>
11 
+              <b>{{phone}}</b>
12 
+            </div>
13 
+          </div>
14 
+          <el-button
15 
+            size="mini"
16 
+            type="warning"
17 
+            @click="reback">返回</el-button>
18 
+        </div>
19 
+        <div>
20 
+          <el-table
21 
+              :data="coursesList"
22 
+              stripe
23 
+              style="width: 100%">
24 
+              <el-table-column
25 
+                prop="CaseName"
26 
+                label="所在案场">
27 
+              </el-table-column>
28 
+              <el-table-column
29 
+                prop="LocationId"
30 
+                label="课程类别">
31 
+              </el-table-column>
32 
+              <el-table-column
33 
+                prop="CourseName"
34 
+                label="课程名称">
35 
+              </el-table-column>
36 
+              <el-table-column
37 
+                prop="DetailName"
38 
+                label="课时名称">
39 
+              </el-table-column>
40 
+              <el-table-column
41 
+                prop="BeginDate"
42 
+                label="课程开始时间">
43 
+              </el-table-column>
44 
+              <el-table-column
45 
+                prop="EndDate"
46 
+                label="课程结束时间">
47 
+              </el-table-column>
48 
+              <el-table-column
49 
+                label="操作">
50 
+                <template slot-scope="scope">
51 
+                  <el-button
52 
+                    size="mini"
53 
+                    type="success"
54 
+                    @click="check(scope.row)">核销</el-button>
55 
+                </template>
56 
+              </el-table-column>
57 
+            </el-table>
58 
+        </div>
59 
+        <span class="noData">今日暂无可核销的课程</span>
60 
+      </div>
61 
+    </div>
62 
+    <el-dialog
63 
+      title="提示"
64 
+      :visible.sync="centerDialogVisible"
65 
+      width="300px"
66 
+      center>
67 
+      <span style="width:100%;display:block;text-align:center;margin:20px 0;">确认核销此课程？</span>
68 
+      <span slot="footer" class="dialog-footer">
69 
+        <el-button @click="centerDialogVisible = false">取 消</el-button>
70 
+        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
71 
+      </span>
72 
+    </el-dialog>
73 
+  </div>
74 
+</template>
75 
+
76 
+<script>
77 
+
78 
+export default {
79 
+  name: '',
80 
+  data () {
81 
+    return {
82 
+      phone: this.$route.query.code,
83 
+      centerDialogVisible: false,
84 
+      coursesList: [{
85 
+        CaseName: 'xxx',
86 
+        LocationId: 'xxx',
87 
+        CourseName: 'xxx',
88 
+        DetailName: 'xxx',
89 
+        BeginDate: 'xxx',
90 
+        EndDate: 'xxx',
91 
+      }],
92 
+    }
93 
+  },
94 
+  mounted () {
95 
+    this.$nextTick(function () { })
96 
+  },
97 
+  methods: {
98 
+    check (item) { // 核销
99 
+      this.centerDialogVisible = true
100 
+    },
101 
+    reback () { // 返回
102 
+      this.$router.push({name: 'phoneVerification'})
103 
+    },
104 
+  }
105 
+}
106 
+</script>
107 
+
108 
+<!-- Add "scoped" attribute to limit CSS to this component only -->
109 
+<style lang="scss" scoped>
110 
+.subPage {
111 
+  .userInfo{
112 
+    white-space: nowrap;
113 
+    font-size: 0;
114 
+    >*{
115 
+      display: inline-block;
116 
+      margin-right: 10px;
117 
+    }
118 
+    >b{
119 
+      font-weight: bolder;
120 
+      font-size: 15px;
121 
+      margin-right: 30px;
122 
+    }
123 
+  }
124 
+  .list {
125 
+    > div {
126 
+      margin: 0 20px;
127 
+      > div {
128 
+        width: 100%;
129 
+        position: relative;
130 
+        overflow: hidden;
131 
+        box-sizing: border-box;
132 
+        border: 1px solid #eee;
133 
+        border-bottom: none;
134 
+        margin-top: 20px;
135 
+      }
136 
+    }
137 
+  }
138 
+  .noData{
139 
+    width: 100%;
140 
+    display: block;
141 
+    line-height: 40px;
142 
+    font-size: 30px;
143 
+    color: #ccc;
144 
+    text-align: center;
145 
+    margin: 40px auto 0;
146 
+  }
147 
+}
148 
+</style>

+ 75
- 0
src/pages/system/verificationManager/qrcodeVerification/index.vue View File 

@@ -0,0 +1,75 @@
1 
+<template>
2 
+  <div class="subPage">
3 
+    <div class="flex-h top">
4 
+      <div class="flex-item">
5 
+        <div>
6 
+          <i class="iconfont icon-qrcode"></i>
7 
+          <span>1</span>
8 
+          <span>请用户出示核销的二维码</span>
9 
+        </div>
10 
+      </div>
11 
+      <div class="flex-item">
12 
+        <div>
13 
+          <i class="iconfont icon-saoma"></i>
14 
+          <span>2</span>
15 
+          <span>点击“立即核销”按钮<br>使用扫码枪扫描客户二维码</span>
16 
+        </div>
17 
+      </div>
18 
+      <div class="flex-item">
19 
+        <div>
20 
+          <i class="iconfont icon-hexiao"></i>
21 
+          <span>3</span>
22 
+          <span>根据提示进行核销操作</span>
23 
+        </div>
24 
+      </div>
25 
+    </div>
26 
+    <div style="text-align:center;margin-top:40px;">
27 
+      <el-button type="danger" round @click="centerDialogVisible = true">立即核销</el-button>
28 
+    </div>
29 
+    <el-dialog
30 
+      title="核销"
31 
+      :visible.sync="centerDialogVisible"
32 
+      width="500px"
33 
+      center>
34 
+      <div v-if="centerDialogVisible">
35 
+        <el-input
36 
+          autofocus
37 
+          ref="input"
38 
+          placeholder="请输入核销码"
39 
+          v-model="verificationCode"
40 
+          clearable>
41 
+        </el-input>
42 
+      </div>
43 
+      <span slot="footer" class="dialog-footer">
44 
+        <el-button @click="centerDialogVisible = false">取 消</el-button>
45 
+        <el-button type="primary" @click="toVerificationList">确 定</el-button>
46 
+      </span>
47 
+    </el-dialog>
48 
+  </div>
49 
+</template>
50 
+
51 
+<script>
52 
+
53 
+export default {
54 
+  name: '',
55 
+  data () {
56 
+    return {
57 
+      centerDialogVisible: false, // 显隐核销弹窗
58 
+      verificationCode: '', // 核销码
59 
+    }
60 
+  },
61 
+  mounted () {
62 
+    this.$nextTick(function () { })
63 
+  },
64 
+  methods: {
65 
+    toVerificationList () { // 定向到核销列表
66 
+      this.$router.push({name: 'qrcodeVerificationList', query: {code: this.verificationCode}})
67 
+    },
68 
+  }
69 
+}
70 
+</script>
71 
+
72 
+<!-- Add "scoped" attribute to limit CSS to this component only -->
73 
+<style lang="scss" scoped>
74 
+@import "page.scss";
75 
+</style>

+ 51
- 0
src/pages/system/verificationManager/qrcodeVerification/page.scss View File 

@@ -0,0 +1,51 @@
1 
+
2 
+.subPage{
3 
+  .top{
4 
+    width: 100%;
5 
+    position: relative;
6 
+    overflow: hidden;
7 
+    margin-top: 40px;
8 
+    >div{
9 
+      >div{
10 
+        width: 100%;
11 
+        position: relative;
12 
+        overflow: hidden;
13 
+        text-align: center;
14 
+        >span{
15 
+          width: 100%;
16 
+          display: block;
17 
+          text-align: center;
18 
+          line-height: 24px;
19 
+          font-size: 15px;
20 
+          color: #666;
21 
+        }
22 
+        >i{
23 
+          font-size: 30px;
24 
+          color: #409EFF;
25 
+          display: inline-block;
26 
+        }
27 
+      }
28 
+    }
29 
+  }
30 
+}
31 
+
32 
+
33 
+
34 
+
35 
+
36 
+
37 
+
38 
+
39 
+
40 
+
41 
+
42 
+
43 
+
44 
+
45 
+
46 
+
47 
+
48 
+
49 
+
50 
+
51 
+

+ 126
- 0
src/pages/system/verificationManager/qrcodeVerification/verificationList/index.vue View File 

@@ -0,0 +1,126 @@
1 
+<template>
2 
+  <div class="subPage">
3 
+    <div class="list flex-h">
4 
+      <div class="flex-item">
5 
+        <div style="text-align:right;margin: 20px 0 0;border:none;">
6 
+          <el-button
7 
+            size="mini"
8 
+            type="warning"
9 
+            @click="reback">返回</el-button>
10 
+        </div>
11 
+        <div>
12 
+          <el-table
13 
+              :data="coursesList"
14 
+              stripe
15 
+              style="width: 100%">
16 
+              <el-table-column
17 
+                prop="CaseName"
18 
+                label="所在案场">
19 
+              </el-table-column>
20 
+              <el-table-column
21 
+                prop="LocationId"
22 
+                label="课程类别">
23 
+              </el-table-column>
24 
+              <el-table-column
25 
+                prop="CourseName"
26 
+                label="课程名称">
27 
+              </el-table-column>
28 
+              <el-table-column
29 
+                prop="DetailName"
30 
+                label="课时名称">
31 
+              </el-table-column>
32 
+              <el-table-column
33 
+                prop="BeginDate"
34 
+                label="课程开始时间">
35 
+              </el-table-column>
36 
+              <el-table-column
37 
+                prop="EndDate"
38 
+                label="课程结束时间">
39 
+              </el-table-column>
40 
+              <el-table-column
41 
+                label="操作">
42 
+                <template slot-scope="scope">
43 
+                  <el-button
44 
+                    size="mini"
45 
+                    type="success"
46 
+                    @click="check(scope.row)">核销</el-button>
47 
+                </template>
48 
+              </el-table-column>
49 
+            </el-table>
50 
+        </div>
51 
+        <span class="noData">今日暂无可核销的课程</span>
52 
+      </div>
53 
+    </div>
54 
+    <el-dialog
55 
+      title="提示"
56 
+      :visible.sync="centerDialogVisible"
57 
+      width="300px"
58 
+      center>
59 
+      <span style="width:100%;display:block;text-align:center;margin:20px 0;">确认核销此课程？</span>
60 
+      <span slot="footer" class="dialog-footer">
61 
+        <el-button @click="centerDialogVisible = false">取 消</el-button>
62 
+        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
63 
+      </span>
64 
+    </el-dialog>
65 
+  </div>
66 
+</template>
67 
+
68 
+<script>
69 
+
70 
+export default {
71 
+  name: '',
72 
+  data () {
73 
+    return {
74 
+      centerDialogVisible: false,
75 
+      coursesList: [{
76 
+        CaseName: 'xxx',
77 
+        LocationId: 'xxx',
78 
+        CourseName: 'xxx',
79 
+        DetailName: 'xxx',
80 
+        BeginDate: 'xxx',
81 
+        EndDate: 'xxx',
82 
+      }],
83 
+    }
84 
+  },
85 
+  mounted () {
86 
+    this.$nextTick(function () { })
87 
+  },
88 
+  methods: {
89 
+    check (item) { // 核销
90 
+      this.centerDialogVisible = true
91 
+    },
92 
+    reback () { // 返回
93 
+      this.$router.push({name: 'qrcodeVerification'})
94 
+    },
95 
+  }
96 
+}
97 
+</script>
98 
+
99 
+<!-- Add "scoped" attribute to limit CSS to this component only -->
100 
+<style lang="scss" scoped>
101 
+.subPage {
102 
+  .list {
103 
+    > div {
104 
+      margin: 0 20px;
105 
+      > div {
106 
+        width: 100%;
107 
+        position: relative;
108 
+        overflow: hidden;
109 
+        box-sizing: border-box;
110 
+        border: 1px solid #eee;
111 
+        border-bottom: none;
112 
+        margin-top: 20px;
113 
+      }
114 
+    }
115 
+  }
116 
+  .noData{
117 
+    width: 100%;
118 
+    display: block;
119 
+    line-height: 40px;
120 
+    font-size: 30px;
121 
+    color: #ccc;
122 
+    text-align: center;
123 
+    margin: 40px auto 0;
124 
+  }
125 
+}
126 
+</style>