月考

README-zh.md

@@ -8,6 +8,15 @@
 
 目前版本为 `v4.0+` 基于 `vue-cli` 进行构建，若你想使用旧版本，可以切换分支到[tag/3.11.0](https://github.com/PanJiaChen/vue-admin-template/tree/tag/3.11.0)，它不依赖 `vue-cli`。
 
+<p align="center">
+  <b>SPONSORED BY</b>
+</p>
+<p align="center">
+   <a href="https://finclip.com?from=vue_element" title="FinClip" target="_blank">
+      <img height="200px" src="https://gitee.com/panjiachen/gitee-cdn/raw/master/vue%E8%B5%9E%E5%8A%A9.png" title="FinClip">
+   </a>
+</p>
+
 ## Extra
 
 如果你想要根据用户角色来动态生成侧边栏和 router，你可以使用该分支[permission-control](https://github.com/PanJiaChen/vue-admin-template/tree/permission-control)

README.md

@@ -9,8 +9,16 @@ English | [简体中文](./README-zh.md)
 
 **The current version is `v4.0+` build on `vue-cli`. If you want to use the old version , you can switch branch to [tag/3.11.0](https://github.com/PanJiaChen/vue-admin-template/tree/tag/3.11.0), it does not rely on `vue-cli`**
 
-## Build Setup
+<p align="center">
+  <b>SPONSORED BY</b>
+</p>
+<p align="center">
+   <a href="https://finclip.com?from=vue_element" title="FinClip" target="_blank">
+      <img height="200px" src="https://gitee.com/panjiachen/gitee-cdn/raw/master/vue%E8%B5%9E%E5%8A%A9.png" title="FinClip">
+   </a>
+</p>
 
+## Build Setup
 
 ```bash
 # clone the project

src/api/card.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function getList(data) {
+  return request({
+    url: '/pur/findList',
+    method: 'post',
+    data
+  })
+}

src/api/food.js

@@ -0,0 +1,25 @@
+import request from '@/utils/request'
+
+export function info(data) {
+  return request({
+    url: '/pur/list',
+    method: 'post',
+    data
+  })
+}
+
+export function getInfo(data) {
+  return request({
+    url: '/pur/ids',
+    method: 'get',
+    data
+  })
+}
+
+export function addFood(data) {
+  return request({
+    url: '/pur/addFood',
+    method: 'get',
+    data
+  })
+}

src/api/goods.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function purAdd(data) {
+  return request({
+    url: '/pur/addPur',
+    method: 'post',
+    data
+  })
+}

src/api/records.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function recordsList(data) {
+  return request({
+    url: '/pur/RecordsList',
+    method: 'post',
+    data
+  })
+}

src/api/user.js

@@ -2,15 +2,22 @@ import request from '@/utils/request'
 
 export function login(data) {
   return request({
-    url: '/vue-admin-template/user/login',
+    url: '/auth/login',
     method: 'post',
     data
   })
 }
 
+export function sendCode(phone) {
+  return request({
+    url: '/auth/sendCode/' + phone,
+    method: 'post'
+  })
+}
+
 export function getInfo(token) {
   return request({
-    url: '/vue-admin-template/user/info',
+    url: '/auth/info',
     method: 'get',
     params: { token }
   })

src/router/index.js

@@ -90,6 +90,58 @@ export const constantRoutes = [
     ]
   },
 
+  {
+    path: '/card',
+    component: Layout,
+    children: [
+      {
+        path: 'index',
+        name: 'card',
+        component: () => import('@/views/card/index'),
+        meta: { title: 'card', icon: 'card' }
+      }
+    ]
+  },
+
+  {
+    path: '/goods',
+    component: Layout,
+    children: [
+      {
+        path: 'index',
+        name: '开卡',
+        component: () => import('@/views/goods/index'),
+        meta: { title: 'goods', icon: '开卡' }
+      }
+    ]
+  },
+
+  {
+    path: '/food',
+    component: Layout,
+    children: [
+      {
+        path: 'index',
+        name: 'food',
+        component: () => import('@/views/food/index'),
+        meta: { title: '点餐窗口', icon: 'food' }
+      }
+    ]
+  },
+
+  {
+    path: '/records',
+    component: Layout,
+    children: [
+      {
+        path: 'index',
+        name: 'records',
+        component: () => import('@/views/records/index'),
+        meta: { title: 'records', icon: 'records' }
+      }
+    ]
+  },
+
   {
     path: '/nested',
     component: Layout,
@@ -143,6 +195,7 @@ export const constantRoutes = [
       {
         path: 'menu2',
         component: () => import('@/views/nested/menu2/index'),
+        name: 'Menu2',
         meta: { title: 'menu2' }
       }
     ]

src/store/modules/user.js

@@ -30,9 +30,9 @@ const mutations = {
 const actions = {
   // user login
   login({ commit }, userInfo) {
-    const { username, password } = userInfo
+    const { phone, code } = userInfo
     return new Promise((resolve, reject) => {
-      login({ username: username.trim(), password: password }).then(response => {
+      login({ phone: phone.trim(), code: code }).then(response => {
         const { data } = response
         commit('SET_TOKEN', data.token)
         setToken(data.token)
@@ -50,7 +50,7 @@ const actions = {
         const { data } = response
 
         if (!data) {
-          reject('Verification failed, please Login again.')
+          return reject('Verification failed, please Login again.')
         }
 
         const { name, avatar } = data

src/utils/request.js

@@ -19,7 +19,7 @@ service.interceptors.request.use(
       // let each request carry token
       // ['X-Token'] is a custom headers key
       // please modify it according to the actual situation
-      config.headers['X-Token'] = getToken()
+      config.headers['token'] = getToken()
     }
     return config
   },
@@ -46,9 +46,9 @@ service.interceptors.response.use(
     const res = response.data
 
     // if the custom code is not 20000, it is judged as an error.
-    if (res.code !== 20000) {
+    if (res.code !== 200) {
       Message({
-        message: res.message || 'Error',
+        message: res.msg || 'Error',
         type: 'error',
         duration: 5 * 1000
       })
@@ -66,7 +66,7 @@ service.interceptors.response.use(
           })
         })
       }
-      return Promise.reject(new Error(res.message || 'Error'))
+      return Promise.reject(new Error(res.msg || 'Error'))
     } else {
       return res
     }
@@ -74,7 +74,7 @@ service.interceptors.response.use(
   error => {
     console.log('err' + error) // for debug
     Message({
-      message: error.message,
+      message: error.msg,
       type: 'error',
       duration: 5 * 1000
     })

src/views/card/index.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="app-container">
+    <el-card class="box-card">
+  <el-table
+    :data="listDate"
+    style="width: 100%">
+    <el-table-column
+      label="编号"
+      width="180">
+      <template slot-scope="scope">
+        <span style="margin-left: 10px">{{ scope.row.id }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      label="姓名"
+      width="180">
+      <template slot-scope="scope">
+        <span style="margin-left: 10px">{{ scope.row.name }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      label="生日"
+      width="180">
+      <template slot-scope="scope">
+        <span style="margin-left: 10px">{{ scope.row.birthdayTime }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      label="身份证"
+      width="180">
+      <template slot-scope="scope">
+        <span style="margin-left: 10px">{{ scope.row.idCard }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      label="性别"
+      width="180">
+      <template slot-scope="scope">
+        <span style="margin-left: 10px">{{ scope.row.sex }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      label="年龄"
+      width="180">
+      <template slot-scope="scope">
+        <span style="margin-left: 10px">{{ scope.row.age }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      label="邮箱"
+      width="180">
+      <template slot-scope="scope">
+        <span style="margin-left: 10px">{{ scope.row.purEmail }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      label="开卡时间"
+      width="180">
+      <template slot-scope="scope">
+        <span style="margin-left: 10px">{{ scope.row.cardTime }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      label="卡内余额"
+      width="180">
+      <template slot-scope="scope">
+        <span style="margin-left: 10px">{{ scope.row.cardPrice }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      label="冻结余额"
+      width="180">
+      <template slot-scope="scope">
+        <span style="margin-left: 10px">{{ scope.row.ldPrice }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column label="操作">
+
+      <el-button
+        size="mini"
+        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+      <!-- Form -->
+      <el-button type="text" @click="dialogFormVisible = true">充值</el-button>
+
+      <el-dialog title="充值" :visible.sync="dialogFormVisible">
+        <el-form :model="purRequest">
+          <el-form-item label="充值" :label-width="formLabelWidth">
+            <el-input v-model="purRequest.ldPrice" autocomplete="off"></el-input>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogFormVisible = false">取 消</el-button>
+          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
+        </div>
+      </el-dialog>
+    </el-table-column>
+  </el-table>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { getList } from '@/api/card'
+
+export default {
+  data() {
+    return {
+      dialogTableVisible: false,
+      dialogFormVisible: false,
+      purRequest: {
+        ldPrice: 500,
+        pageSize: 10,
+        pageNum: 1
+      },
+      listDate: [],
+      formLabelWidth: '120px',
+      total: 0
+    }
+  },
+  created() {
+    this.list()
+  },
+  methods: {
+    list() {
+      getList(this.purRequest).then(res => {
+        this.listDate = res.data.list
+        this.total = res.data.total
+      })
+    },
+    handleEdit(index, row) {
+      console.log(index, row)
+    }
+  }
+}
+</script>

src/views/food/index.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="app-container">
+    <el-form ref="form" :model="purRequest" label-width="80px">
+      <el-form-item label="菜品名称">
+        <el-input v-model="purRequest.name"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">查询</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table
+      :data="listDate"
+      style="width: 100%">
+      <el-table-column
+        label="编号"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.id }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="菜品名称"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.name }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="窗口名称"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.window }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="菜品筹备时间"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.foodTime }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="创建时间"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="状态"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.status }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作">
+        <el-button
+          size="mini"
+          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+        <!-- Table -->
+        <el-button type="text" @click="dialogTableVisible = true">点菜</el-button>
+
+        <el-dialog title="点菜" :visible.sync="dialogTableVisible">
+          <el-table :data="listDate">
+            <el-table-column property="date" label="编号" width="150">
+              <template slot-scope="scope">
+                <span style="margin-left: 10px">{{ scope.row.id }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column property="name" label="菜品名称" width="200">
+                <template slot-scope="scope">
+                  <span style="margin-left: 10px">{{ scope.row.name }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column property="address" label="窗口名称">
+              <template slot-scope="scope">
+                <span style="margin-left: 10px">{{ scope.row.window }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column property="foodPrice" label="菜品价格">
+              <template slot-scope="scope">
+                <span style="margin-left: 10px">{{ scope.row.foodPrice }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column property="foodPrice" label="菜品筹备时间">
+              <template slot-scope="scope">
+                <span style="margin-left: 10px">{{ scope.row.foodTime }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column property="foodPrice" label="创建时间">
+              <template slot-scope="scope">
+                <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-dialog>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { info, getInfo } from '@/api/food'
+
+export default {
+  data() {
+    return {
+      purRequest: {
+        pageSize: 10,
+        pageNum: 1
+      },
+      dialogTableVisible: false,
+      dialogFormVisible: false,
+      listDate: [],
+      formLabelWidth: '120px',
+      total: 0
+    }
+  },
+  created() {
+    this.list()
+  },
+  methods: {
+    onSubmit() {
+      this.list()
+    },
+    list() {
+      info(this.purRequest).then(res => {
+        this.listDate = res.data.list
+        this.total = res.data.total
+      })
+    },
+    handleEdit(index, row) {
+      console.log(index, row)
+      getInfo(this.purRequest).then(res => {
+        this.listDate = res.data.list
+      })
+    }
+  }
+}
+</script>

src/views/goods/index.vue

@@ -0,0 +1,56 @@
+ <template>
+   <div class="app-container">
+     <el-card class="box-card is-center" style="width: 45%">
+  <el-form ref="form" :model="form" label-width="45%">
+  <el-form-item label="姓名">
+    <el-input v-model="form.name"></el-input>
+  </el-form-item>
+  <el-form-item label="生日">
+    <el-input v-model="form.birthdayTime"></el-input>
+  </el-form-item>
+  <el-form-item label="身份证">
+    <el-input v-model="form.idCard"></el-input>
+  </el-form-item>
+  <el-form-item label="性别">
+    <el-input v-model="form.sex"></el-input>
+  </el-form-item>
+  <el-form-item label="年龄">
+    <el-input v-model="form.age"></el-input>
+  </el-form-item>
+  <el-form-item label="邮箱">
+    <el-input v-model="form.purEmail"></el-input>
+  </el-form-item>
+  <el-form-item>
+    <el-button type="primary" @click="onSubmit">确认开卡</el-button>
+    <el-button>取消</el-button>
+  </el-form-item>
+  </el-form>
+     </el-card>
+   </div>
+ </template>
+<script>
+import { purAdd } from '@/api/goods'
+
+export default {
+  data() {
+    return {
+      form: {
+        name: '',
+        birthdayTime: '',
+        idCard: '',
+        sex: '',
+        age: '',
+        purEmail: ''
+      }
+    }
+  },
+  methods: {
+    onSubmit() {
+      purAdd(this.form).then(res => {
+        this.$message.msg = res.form.msg
+        console.log('submit!')
+      })
+    }
+  }
+}
+</script>

src/views/login/index.vue

@@ -6,32 +6,30 @@
         <h3 class="title">Login Form</h3>
       </div>
 
-      <el-form-item prop="username">
+      <el-form-item prop="phone">
         <span class="svg-container">
-          <svg-icon icon-class="user" />
+          <svg-icon icon-class="phone" />
         </span>
         <el-input
-          ref="username"
+          ref="phone"
-          v-model="loginForm.username"
+          v-model="loginForm.phone"
-          placeholder="Username"
+          placeholder="Phone"
-          name="username"
+          name="phone"
           type="text"
           tabindex="1"
           auto-complete="on"
         />
       </el-form-item>
 
-      <el-form-item prop="password">
+      <el-form-item prop="code">
         <span class="svg-container">
-          <svg-icon icon-class="password" />
+          <svg-icon icon-class="code" />
         </span>
         <el-input
-          :key="passwordType"
           ref="password"
-          v-model="loginForm.password"
+          v-model="loginForm.code"
-          :type="passwordType"
+          placeholder="Code"
-          placeholder="Password"
+          name="code"
-          name="password"
           tabindex="2"
           auto-complete="on"
           @keyup.enter.native="handleLogin"
@@ -41,7 +39,8 @@
         </span>
       </el-form-item>
 
-      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>
+      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登录</el-button>
+      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="sendCode">验证码</el-button>
 
       <div class="tips">
         <span style="margin-right:20px;">username: admin</span>
@@ -53,33 +52,20 @@
 </template>
 
 <script>
-import { validUsername } from '@/utils/validate'
+
+import { sendCode } from '@/api/user'
 
 export default {
   name: 'Login',
   data() {
-    const validateUsername = (rule, value, callback) => {
-      if (!validUsername(value)) {
-        callback(new Error('Please enter the correct user name'))
-      } else {
-        callback()
-      }
-    }
-    const validatePassword = (rule, value, callback) => {
-      if (value.length < 6) {
-        callback(new Error('The password can not be less than 6 digits'))
-      } else {
-        callback()
-      }
-    }
     return {
       loginForm: {
-        username: 'admin',
+        phone: '13057628575',
-        password: '111111'
+        code: '1111'
       },
       loginRules: {
-        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
+        phone: [{ required: true, trigger: 'blur' }],
-        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
+        code: [{ required: true, trigger: 'blur' }]
       },
       loading: false,
       passwordType: 'password',
@@ -95,6 +81,11 @@ export default {
     }
   },
   methods: {
+    sendCode() {
+      sendCode(this.loginForm.phone).then(res => {
+        this.$message.msg = res.data.msg
+      })
+    },
     showPwd() {
       if (this.passwordType === 'password') {
         this.passwordType = ''

src/views/records/index.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="app-container">
+    <el-table
+      :data="listDate"
+      style="width: 100%">
+      <el-table-column
+        label="编号"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.id }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="菜品名称"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.name }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="窗口名称"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.windowName }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="菜品价格"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.dishesPrice }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="菜品筹备时间"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.dishesTime }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="创建时间"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作">
+
+        <el-dialog title="输入身份证后六位" :visible.sync="dis">
+          <el-form :model="purRequest">
+            <el-form-item label="输入身份证后六位" :label-width="formLabelWidth">
+              <el-input v-model="purRequest.idCard" autocomplete="off"></el-input>
+            </el-form-item>
+          </el-form>
+          <div slot="footer" class="dialog-footer">
+            <el-button @click="dis = false">取 消</el-button>
+            <el-button type="primary" @click="dis = false">确 定</el-button>
+          </div>
+        </el-dialog>
+        <!-- Form -->
+        <el-button type="text" @click="dialogFormVisible = true">取餐</el-button>
+
+        <el-dialog title="取餐" :visible.sync="dialogFormVisible">
+          <el-form :model="purRequest">
+            <el-form-item label="充值" :label-width="formLabelWidth">
+              <el-input v-model="purRequest.idCard" autocomplete="off"></el-input>
+            </el-form-item>
+          </el-form>
+          <div slot="footer" class="dialog-footer">
+            <el-button @click="dialogFormVisible = false">取 消</el-button>
+            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
+          </div>
+        </el-dialog>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { recordsList } from '@/api/records'
+
+export default {
+  data() {
+    return {
+      purRequest: {
+        pageSize: 10,
+        pageNum: 1
+      },
+      dialogTableVisible: false,
+      dialogFormVisible: false,
+      dis: true,
+      listDate: [],
+      formLabelWidth: '120px',
+      total: 0
+    }
+  },
+  created() {
+    this.list()
+  },
+  methods: {
+    list() {
+      recordsList(this.purRequest).then(res => {
+        this.listDate = res.data.list
+        this.total = res.data.total
+      })
+    },
+    handleEdit(index, row) {
+      console.log(index, row)
+    },
+    handleDelete(index, row) {
+      console.log(index, row)
+    }
+  }
+}
+</script>

vue.config.js

@@ -36,7 +36,15 @@ module.exports = {
       warnings: false,
       errors: true
     },
-    before: require('./mock/mock-server.js')
+    proxy: {
+      [process.env.VUE_APP_BASE_API]: {
+        target: 'http://127.0.0.1:18080',
+        changeOrigin: true,
+        pathRewrite: {
+          ['^' + process.env.VUE_APP_BASE_API]: ''
+        }
+      }
+    }
   },
   configureWebpack: {
     // provide the app's title in webpack's name field, so that