试听课兼容手机

src/components/schedul/reserve-form.vue

@@ -11,7 +11,8 @@
       </q-card-section>
       <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
         <div class="row wrap">
-          <q-input filled v-model="objOption.ClassDate" class="col-6 q-pr-lg q-pb-lg"
+          <q-input filled v-model="objOption.ClassDate" class=""
+          :class="[$q.platform.is.desktop?'col-6 q-pr-lg q-pb-lg':'col-12 q-pb-sm']"
             :rules="[val => !!val || '请选择预约日期']" ref="ClassDate" mask="date" label="预约日期">
             <template v-slot:append>
               <q-icon name="event" class="cursor-pointer">
@@ -21,8 +22,9 @@
               </q-icon>
             </template>
           </q-input>
-          <div class="Sysuser_Date col-6 q-pb-lg">
-            <q-field>
+          <div class="Sysuser_Date"
+          :class="[$q.platform.is.desktop?'col-6 q-pb-lg':'col-12 q-pb-sm']">
+            <q-field filled dense>
               <template v-slot:control>
                 <el-time-select v-model="objOption.ClassTime" ref="ClassTime" style="width:50%" :picker-options="{
                     start: '09:00',
@@ -42,15 +44,18 @@
             </q-field>
           </div>
           <q-select filled stack-label option-value="TId" option-label="TeacherName" v-model="objOption.TeacherId"
-            ref="TeacherId" :options="TeacherList" label="选择教师" :dense="false" class="col-6 q-pr-lg q-pb-lg" emit-value
+            ref="TeacherId" :options="TeacherList" label="选择教师" :dense="false" class="col-6 q-pr-lg"
+            :class="[$q.platform.is.desktop?'q-pb-lg':'q-pb-sm']" emit-value
             map-options />
 
           <q-select filled stack-label option-value="RoomId" option-label="RoomName" v-model="objOption.ClassRoomId"
-            ref="ClassRoomId" :options="ClassRoomList" label="关联教室" :dense="false" class="col-6 q-pb-lg" emit-value
+            ref="ClassRoomId" :options="ClassRoomList" label="关联教室" :dense="false" class="col-6"
+            :class="[$q.platform.is.desktop?'q-pb-lg':'q-pb-sm']" emit-value
             map-options />
 
           <q-select filled stack-label option-value="Id" option-label="LessonName" v-model="objOption.TrialLessonId"
-            :options="TrialList" label="试听课程" :dense="false" class="col-6 q-pb-lg q-pr-lg" emit-value map-options />
+            :options="TrialList" label="试听课程" :dense="false" class="col-6 q-pr-lg"
+            :class="[$q.platform.is.desktop?'q-pb-lg':'q-pb-sm']" emit-value map-options />
 
           <q-select filled stack-label option-value="Name" option-label="Name" v-model="objOption.ClassContent"
             ref="ClassContent" :options="ContentList" label="主讲内容" :dense="false" class="col-12 q-pb-lg" emit-value

src/components/schedul/reservestudentlist.vue

 <template>
-  <div class="page-content">
-    <q-table :pagination="pageMsg" :loading="loading" no-data-label="暂无相关数据" flat
+  <div class="page-content"
+  :class="[$q.platform.is.desktop?'':'']">
+    <q-table v-if="$q.platform.is.desktop" :pagination="pageMsg" :loading="loading" no-data-label="暂无相关数据" flat
       class="sticky-column-table sticky-right-column-table" separator="none" :data="data" :columns="columns"
       :visible-columns="visibleColumns" row-key="name">
       <template v-slot:top>
-        <div class="col-2 q-table__title">试听开课管理</div>
+        <div class="q-table__title"
+        :class="[$q.platform.is.desktop?'col-2':'col-12']">试听开课管理</div>
         <q-space />
 
       </template>
@@ -38,6 +40,39 @@
       <template v-slot:bottom>
       </template>
     </q-table>
+    <template v-if="$q.platform.is.mobile">
+      <q-card
+        class="light-shadow q-pa-md bg-grey-1 rounded-borders q-mb-md"
+        flat
+        v-for="(x, index) in data"
+        :key="index"
+      >
+        <div class="row justify-between">
+          <div>学生：<span class="text-blue-5">{{x.StuName}}</span></div>
+          <div>试听日期：<span class="text-blue-5">{{timeFormatSeconds(x.ReservationDate)}}</span></div>
+        </div>
+        <div class="bg-white q-pa-sm q-mt-sm" style="border-radius: 8px;">
+          <div>
+            <span class="text-grey-6">试听需求：</span><span v-html="">{{x.Demand}}</span>
+          </div>
+        </div>
+        <div class=" q-pa-sm border-radius q-mt-sm" v-if="x.ClassDateStr||x.TeacherName||x.LessonName||x.RoomName">
+          <div class="row justify-between" v-if="x.ClassDateStr||x.TeacherName">
+            <span v-if="x.ClassDateStr">预约时间：<span class="text-blue-5">{{x.ClassDateStr}}</span></span>
+            <span v-if="x.TeacherName">主讲老师：<span class="text-blue-5">{{x.TeacherName}}</span></span>
+          </div>
+          <div class="row justify-between" v-if="x.LessonName||x.RoomName">
+            <span v-if="x.LessonName">课程名称：<span class="text-blue-5">{{x.LessonName}}</span></span>
+            <span v-if="x.RoomName">教室：<span class="text-blue-5">{{x.RoomName}}</span></span>
+          </div>
+        </div>
+        <div class="row justify-end">
+          <q-btn  label="修改" color="primary" flat @click="editVisitor(x)"/>
+          <q-btn  label="删除" color="teal-10" flat @click="DeleteVisitorReserve(x.Id)"/>
+        </div>
+      </q-card>
+    </template>
+
     <reserveForm v-if="isShowReserve" :save-obj="reserveObj" @close="closeReserveForm" @success="refreshPage">
     </reserveForm>
   </div>

src/pages/h5page/audition.vue

@@ -5,15 +5,16 @@
 </style>
 
 <template>
-  <div :class="[type?'q-pa-md':'']">
-      <p class="text-center small text-weight-bold" v-if="type==1">试听开课</p>
+  <div :class="[$q.platform.is.mobile?'q-pa-md bg-grey-1':'']">
+      <p class="text-center small text-weight-bold text-h6" v-if="type">试听开课</p>
       <div class="row wrap">
         <div style="width:100%;margin-bottom:15px;">试听时间：<span style="color:red;">{{timeFormatSeconds(setClassMsg.ReservationDate)}}</span></div>
         <div  style="width:100%;margin-bottom:15px;">试听需求：<span style="color:red;">{{setClassMsg.Demand}}</span></div>
       </div>
+      <q-card class="bg-white q-pa-md" flat>
         <div class="row studentDate">
           <q-field filled dense
-      :class="[type?'col-12 q-pb-sm':'col-6 q-pr-lg q-pb-lg']">
+          :class="[$q.platform.is.mobile?'col-12 q-pb-sm':'col-6 q-pr-lg q-pb-lg']">
             <template v-slot:control>
               <el-date-picker v-model="setClassMsg.ClassDate" ref="ClassDate" :rules="[val => !!val || '请选择预约日期']"
                 style="width:100%" size="mini" type="date" placeholder="预约日期" value-format="yyyy-MM-dd">
@@ -21,17 +22,17 @@
             </template>
           </q-field>
           <div class="Student_Date "
-      :class="[type?'col-12 q-pb-sm':'col-6 q-pr-lg q-pb-lg']">
+          :class="[$q.platform.is.mobile?'col-12 q-pb-sm':'col-6 q-pr-lg q-pb-lg']">
             <q-field filled class="" dense>
               <template v-slot:control>
-            <el-time-select v-model="setClassMsg.ClassTime" size="mini" ref="ClassTime" style="width:50%" :picker-options="{
+                <el-time-select v-model="setClassMsg.ClassTime" size="mini" ref="ClassTime" style="width:49%;margin-right: 1%;" :picker-options="{
                     start: '09:00',
                     step: '00:15',
                     end: '21:00',
                     maxTime: setClassMsg.EndTime
                   }" placeholder="预约开始时间">
                 </el-time-select>
-            <el-time-select v-model="setClassMsg.EndTime" size="mini" dense ref="EndTime" style="width:50%"
+                <el-time-select v-model="setClassMsg.EndTime" size="mini" dense ref="EndTime" style="width:49%;margin-left: 1%;"
                   :picker-options="{
                     start: '09:00',
                     step: '00:15',
@@ -46,21 +47,23 @@
         <div class="row wrap">
           <q-select filled stack-label option-value="TId" option-label="TeacherName" v-model="setClassMsg.TeacherId"
             ref="TeacherId" :options="TeacherList" label="选择教师" dense class="col-6"
-        :class="[type?'q-pr-sm q-pb-sm':'q-pr-lg q-pb-lg']"emit-value
+            :class="[$q.platform.is.mobile?'q-pr-sm q-pb-sm':'q-pr-lg q-pb-lg']"emit-value
             map-options />
             <q-select filled stack-label option-value="RoomId" dense option-label="RoomName" v-model="setClassMsg.ClassRoomId"
             ref="ClassRoomId" :options="ClassRoomList" label="关联教室" class="col-6"
-        :class="[type?'q-pl-sm q-pb-sm':'q-pr-lg q-pb-lg']" emit-value
+            :class="[$q.platform.is.mobile?'q-pl-sm q-pb-sm':'q-pr-lg q-pb-lg']" emit-value
             map-options />
           <q-select filled stack-label option-value="Id" dense option-label="LessonName" v-model="setClassMsg.TrialLessonId"
             :options="TrialList" label="试听课程" class="col-6"
-        :class="[type?'q-pr-sm':'q-pr-lg q-pb-lg']" emit-value map-options />
+            :class="[$q.platform.is.mobile?'q-pr-sm':'q-pr-lg q-pb-lg']" emit-value map-options />
         </div>
+      </q-card>
+
     <div slot="footer" class="dialog-footer"
-    :class="[type?'text-center q-pt-lg row':'text-right q-pb-lg']">
-      <el-button v-if="!type" @click="closeShitingKaiKe()">取 消</el-button>
+    :class="[$q.platform.is.mobile?'text-center q-pt-lg row':'text-right q-pb-lg']">
+      <el-button v-if="!$q.platform.is.mobile" @click="closeShitingKaiKe()">取 消</el-button>
       <el-button type="primary" @click="SetVisitorReserveClass()"
-      :class="[type?'col-12':'']">确 定</el-button>
+      :class="[$q.platform.is.mobile?'col-12':'']">确 定</el-button>
     </div>
     <statusPrompt v-if="isSuccess" :isSuccess="isSuccess" :isSuccessTitle="isSuccessTitle"></statusPrompt>
   </div>
@@ -214,6 +217,10 @@
         }
         SetVisitorReserveClass(this.setClassMsg).then(res => {
             if (res.Code == 1) {
+              if(this.type){
+                this.isSuccess = true
+                this.isSuccessTitle = '试听课开课成功！'
+              }else{
                 this.$q.notify({
                 icon: "iconfont icon-chenggong",
                 color: "accent",
@@ -221,9 +228,6 @@
                 message: res.Message,
                 position: "top"
               });
-              if(this.type){
-                this.isSuccess = true
-                this.isSuccessTitle = '试听课开课成功！'
               }
               this.$emit("success");
             } else {

src/pages/sale/reserveClassStudent.vue

@@ -6,10 +6,13 @@
 </style>
 <template>
   <div class="page-body">
-    <div class="page-search row items-center">
-      <div class="col row wrap q-mr-lg q-col-gutter-md">
-        <div class="col-3">
-          <div class="col-4 Sysuser_Date">
+    <div class="page-search"
+    :class="[$q.platform.is.desktop?'row items-center':'']">
+      <div class="col row wrap  q-col-gutter-md"
+      :class="[$q.platform.is.desktop?'q-mr-lg':'']">
+        <div
+        :class="[$q.platform.is.desktop?'col-3':'col-12']">
+          <div class="Sysuser_Date">
             <q-field filled>
               <template v-slot:control>
                 <el-date-picker v-model="msg.StartClassDate" value-format="yyyy-MM-dd" type="date" placeholder="开始时间"
@@ -38,6 +41,21 @@
       </div>
     </div>
     <reservelist :data="dataList" :authObj="authObj" :loading="loading" @success="refreshPage"></reservelist>
+
+    <q-card
+    class="light-shadow q-pa-md bg-white rounded-borders q-mb-md"
+    v-if="msg.pageCount > 0"
+    flat
+  >
+    <q-pagination v-if="$q.platform.is.mobile"
+      class="full-width justify-end"
+      v-model="msg.pageIndex"
+      color="primary"
+      :max="msg.pageCount"
+      :input="true"
+      @update:model-value="changePageHandler"
+    />
+  </q-card>
     <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="PageCount" :input="true"
       @input="changePage" />
   </div>
@@ -106,6 +124,10 @@
       this.getList()
     },
     methods: {
+      changePageHandler(n) {
+        this.msg.pageIndex = n;
+        this.getList();
+      },
       //重新查询
       resetSearch() {
         this.msg.pageIndex = 1;