order页面新增功能

src/main.js

@@ -4,10 +4,15 @@ import App from './App.vue'
 import store from './store'
 import router from './router'
 
-import { Button, Popup, Toast, Dialog, Field, CellGroup, Cell, ActionSheet, DatetimePicker, CountDown, Loading, Overlay, Tab, Tabs} from 'vant'
-
-Vue.use(Button).use(Popup).use(Toast).use(Dialog).use(Field).use(CellGroup).use(Cell).use(ActionSheet).use(DatetimePicker).use(CountDown).use(Loading).use(Overlay).use(Tab).use(Tabs)
+import { Button, Popup, Toast, Dialog, Field, CellGroup, Cell, 
+    ActionSheet, DatetimePicker, CountDown, Loading, 
+    Overlay, Tab, Tabs, DropdownMenu, DropdownItem} from 'vant'
 
+Vue.use(Button).use(Popup).use(Toast).use(Dialog).use(Field)
+    .use(CellGroup).use(Cell).use(ActionSheet).use(DatetimePicker)
+    .use(CountDown).use(Loading).use(Overlay).use(Tab).use(Tabs)
+    .use(DropdownMenu).use(DropdownItem)
+    
 Vue.config.productionTip = false
 
 new Vue({

src/views/order.vue

@@ -1,6 +1,10 @@
 <template>
     <div class="order">
-        <header>支付列表</header>
+        <header>支付列表
+            <van-dropdown-menu>
+                <van-dropdown-item @change="onChange" v-model="voicyPart" :options="voicyPartList" />
+            </van-dropdown-menu>
+        </header>
         <h2>{{schoolName}}</h2>
         <van-tabs>
             <van-tab title="缴费信息">
@@ -65,11 +69,9 @@
 </template>
 
 <script>
-import { Toast } from 'vant'
 import qs from 'qs'
 export default {
     name: 'order',
-    components: { Toast },
     data() {
         return {
             classId: this.$route.query.classId,
@@ -77,20 +79,18 @@ export default {
             dataList: {}, // 订单列表
             studentList: {}, // 学生列表
             couresList: [], // 课程列表
+            voicyPart: 0,
+            voicyPartList: [{
+                text: '全部声部',
+                value: 0
+            }],
             adjustStatus: false, //
             changeStudent: null, // 修改的学生对象
         }
     },
     mounted() {
-        // 获取订单信息
-        axios.post('/order/checkOrderList', qs.stringify({
-            classId: this.classId,
-            type: 1
-        })).then(r => {
-            this.dataList = r.data.data
-        })
         // 获取所有课程
-        axios.post('/user/getCourses ', qs.stringify({
+        this.$axios.post('/user/getCourses ', qs.stringify({
             clazzId: this.classId
         })).then(c => {
             let result = c.data.data
@@ -100,22 +100,39 @@ export default {
                     subId: r.subId,
                     id: r.id
                 })
+
+                this.voicyPartList.push({
+                    text: r.subName.split('.').reverse()[0],
+                    value: r.subId
+                })
             })
         })
         
+        // 获取订单信息
+        this.getOrderList()
         // 获取学生列表信息
         this.getStudents()
     },
     methods: {
+        getOrderList(voicyPart) {
+            // 获取订单信息
+            this.$axios.post('/order/checkOrderList', qs.stringify({
+                classId: this.classId,
+                voicyPart: voicyPart ? voicyPart : '',
+                type: 1
+            })).then(r => {
+                this.dataList = r.data.data
+            })
+        },
         getStudents(item) {
             if(!item) {
                 item = {}
             }
-            axios.post('/user/getMusicTeamStu', qs.stringify({
+            this.$axios.post('/user/getMusicTeamStu', qs.stringify({
                 musicTeamId: this.classId, // 乐团Id
                 name: '', // 学生姓名
                 status: '', // 学生状态
-                subId: '', // 声部编号
+                subId: item.subId ? item.subId : '', // 声部编号
                 page: item.page ? item.page : 1, //默认1第一页
                 rows: item.rows ? item.rows : 100 // 默认20条数据
             })).then(r => {
@@ -123,13 +140,13 @@ export default {
             })
         },
         adjustSelect(item) {
-            axios.post('/user/updateUserSub', qs.stringify({
+            this.$axios.post('/user/updateUserSub', qs.stringify({
                 courseId: item.id,
                 subId: item.subId,
                 userId: this.changeStudent.id
             })).then(student => {
                 if(student.data.code == 200) {
-                    Toast(student.data.msg)
+                    this.$toast(student.data.msg)
                     this.changeStudent.subName = item.name
                     this.adjustStatus = false
                 }
@@ -141,6 +158,19 @@ export default {
                 this.adjustStatus = true
                 this.changeStudent = item
             }
+        },
+        onChange(value) {
+            // 切换声部时
+            let subId = value ? value : ''
+            this.getStudents({ subId: subId })
+            this.voicyPartList.forEach(vp => {
+                if(vp.value == value) {
+                    // 如果选择全部则传空
+                    let text = value ? vp.text : ''
+                    this.getOrderList(text)
+                }
+            })
+            
         }
     }
 }
@@ -201,4 +231,10 @@ h2 {
 
     }
 }
+/deep/.van-dropdown-menu {
+    height: 40px;
+    position: absolute;
+    right: 15px;
+    top: 0;
+}
 </style>

vue.config.js

@@ -1,5 +1,5 @@
-// let targetUrl = 'https://pay.dayaedu.com'
-let targetUrl = 'http://192.168.3.38:8088'
+let targetUrl = 'https://pay.dayaedu.com'
+// let targetUrl = 'http://192.168.3.38:8088'
 module.exports = {
     devServer: {
         open: process.platform === 'darwin',