Merge branch 'LaoMo' into test

src/App.vue

@@ -1,37 +1,40 @@
 <template>
   <div id="app">
     <transition name="fade">
-        <keep-alive>
-            <router-view v-if="$route.meta.keepAlive" />
-        </keep-alive>
+      <keep-alive>
+        <router-view v-if="$route.meta.keepAlive" />
+      </keep-alive>
     </transition>
     <transition name="fade">
-        <router-view v-if="!$route.meta.keepAlive"/>
+      <router-view v-if="!$route.meta.keepAlive" />
     </transition>
   </div>
 </template>
 
 <style lang="less">
-@import url('./assets/commonLess/common');
+@import url("./assets/commonLess/common");
 #app {
-    font-family: 'Avenir', Helvetica, Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    background: #F3F4F8;
-    // overflow-x: hidden;
-    // overflow-y: auto;
-    user-select: none;
-     -webkit-text-size-adjust: none !important;
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: #f3f4f8;
+  // overflow-x: hidden;
+  // overflow-y: auto;
+  user-select: none;
+  -webkit-text-size-adjust: none !important;
 }
 
-
-.fade-enter-active, .fade-leave-active {
-  transition: opacity .5s
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s;
 }
-.fade-enter, .fade-leave-active {
-  opacity: 0
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
 }
 body {
-    -webkit-text-size-adjust: none !important;
+  -webkit-text-size-adjust: none !important;
 }
+
+
 </style>

src/assets/commonLess/common.less

@@ -41,4 +41,34 @@
 }
 .defaultStatus {
     color: #777777 !important;
-}
+}
+
+
+.van-field__control {
+    color: #808080 !important;
+    font-size: .16rem;
+  }
+  
+  input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
+    color: #C0C0C0!important;
+    font-size: .16rem;
+  }
+  
+  input:-moz-placeholder, textarea:-moz-placeholder {
+    color: #C0C0C0!important;
+    font-size: .16rem;
+  }
+  
+  input::-moz-placeholder, textarea::-moz-placeholder {
+    color: #C0C0C0!important;
+    font-size: .16rem;
+  }
+  
+  input:-ms-input-placeholder, textarea:-ms-input-placeholder {
+    color: #C0C0C0!important;
+    font-size: .16rem;
+  }
+  .van-cell__right-icon{
+    color: #C0C0C0!important;
+  }
+

src/assets/commonLess/variable.less

@@ -1,5 +1,5 @@
 // 主色
-@mColor: #14928A;
+@mColor: #01C1B5;
 // 字体主色
 @mFontColor: #444444;
 // 字体次色
@@ -40,3 +40,7 @@
 // @active-color: #f2f3f5;
 // @background-color: #f8f8f8;
 // @background-color-light: #fafafa;
+.van-button--primary {
+    background: @mColor;
+    border: 1px solid @mColor;
+  }

src/common/vueFilters.js

@@ -117,4 +117,12 @@ Vue.filter('formatDate', value => {
     let hour = d.getHours() >= 10 ? d.getHours() : '0' + d.getHours()
     let minute = d.getMinutes() >= 10 ? d.getMinutes() : '0' + d.getMinutes()
     return hour + ':' + minute
-})
+})
+
+Vue.filter('formatTimer', (value) => {
+    if (value) {
+      return value.split(' ')[0]
+    } else {
+      return value
+    }
+  })

src/components/MCalendar.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="calendar">
         <div class="c__hd">
-            <div class="c__date" @click="onToggleType"><span>{{ curDays.month.toString().length >= 2 ? curDays.month : '0' + curDays.month }}月</span>{{ curDays.year }}年</div>
+            <div class="c__date" @click="onToggleType">{{ curDays.year }}年<span>{{ curDays.month.toString().length >= 2 ? curDays.month : '0' + curDays.month }}月</span></div>
             <div class="c__change" v-if="calendarType !== 'small'">
                 <van-icon @click="slidePrev" name="arrow-left" />
                 <van-icon @click="slideNext" name="arrow" />
@@ -349,7 +349,7 @@ export default {
         onTouchDown() { // 向下滑
 
         },
-        touchEnd() {
+        touchEnd() { 
             // let pt = this.points,
             //     X = pt.endX - pt.startX,
             //     Y = pt.endY - pt.startY
@@ -437,13 +437,13 @@ export default {
         justify-content: space-between;
     }
     .c__date {
-        color: @mColor;
-        font-size: .16rem;
-        font-weight: bold;
-        span {
-            padding-right: .08rem;
-            font-size: .26rem;
-        }
+        color: #333;
+        font-size: .24rem;
+        // font-weight: bold;
+        // span {
+        //     padding-right: .08rem;
+        //     font-size: .26rem;
+        // }
     }
     .van-icon {
         margin-left: .1rem;
@@ -459,6 +459,7 @@ export default {
         &:active {
             background: @mColor;
             color: #4eada7;
+            color: #fff;
         }
     }
 

src/components/MHeader.vue

@@ -70,7 +70,7 @@ export default {
 <style lang="less" scoped>
 @import url('../assets/commonLess/variable');
 .mheader {
-    height: .44rem;
+    height: .46rem;
     overflow: hidden;
 }
 .m-nav-header {
@@ -78,12 +78,12 @@ export default {
     left: 0;
     top: 0;
     width: 100%;
-    height: .44rem;
-    line-height: .44rem;
-    background-color: @mColor;
+    height: .46rem;
+    line-height: .46rem;
+    background-color:  @whiteColor;
     text-align: center;
     user-select: none;
-    color: @whiteColor;
+    color: @blackColor;
     &.fixed {
         position: fixed;
         z-index: 99;
@@ -91,7 +91,7 @@ export default {
     .m-nav-bar__title {
         max-width: 60%;
         margin: 0 auto;
-        color: @whiteColor;
+        color: @blackColor;
         font-weight: 500;
         font-size: .16rem;
     }

src/views/app/Account.vue

@@ -135,7 +135,7 @@ export default {
     width: 0.2rem;
     height: 0.22rem;
     margin-right: .05rem;
-    margin-top: -0.02rem;
+    // margin-top: -0.02rem;
 }
 .icon_times {
     background: url('../../assets/images/app/icon_times.png') no-repeat center center;

src/views/app/AppLogin.vue

@@ -1,351 +1,434 @@
 <template>
-    <div class="login">
-        <div class="logo">
-            <img src="../../assets/images/logo.png" alt="">
-        </div>
-        <div class="container" v-show="isTrue">
-            <div class="input-group">
-                <input type="number" @keyup="onKeyUp()" placeholder="请输入手机号" class="input" v-model="phoneNumber" maxlength="11" minlength="11" pattern="[0-9]" />
-            </div>
-            <div class="input-group">
-                <input type="password" @keyup="onKeyUp()" placeholder="请输入密码" class="input" v-model="password" />
-            </div>
+  <div class="login">
+    <div class="logo">
+      <img src="../../assets/images/logo.png" alt="" />
+    </div>
+    <div class="container" v-show="isTrue">
+      <div class="input-group">
+        <input
+          type="number"
+          @keyup="onKeyUp()"
+          placeholder="请输入手机号"
+          class="input"
+          v-model="phoneNumber"
+          maxlength="11"
+          minlength="11"
+          pattern="[0-9]"
+        />
+      </div>
+      <div class="input-group">
+        <input
+          type="password"
+          @keyup="onKeyUp()"
+          placeholder="请输入密码"
+          class="input"
+          v-model="password"
+        />
+      </div>
 
-            <van-button round size="large" @click="onLogin" :disabled="pwdDisable">登录</van-button>
-            <span class="login-change" @click="isTrue = false">验证码登录</span>
-            <span class="login-change" @click="onRegister" style="float: left;">立即注册</span>
-        </div>
+      <van-button round size="large" @click="onLogin" :disabled="pwdDisable"
+        >登录</van-button
+      >
+      <span class="login-change" @click="isTrue = false">验证码登录</span>
+      <span class="login-change" @click="onRegister" style="float: left"
+        >立即注册</span
+      >
+    </div>
 
-        <div class="container" v-show="!isTrue">
-            <div class="input-group">
-                <input type="number" @keyup="onKeyUp()" placeholder="请输入手机号" class="input" v-model="phoneNumber" maxlength="11" minlength="11" pattern="[0-9]">
-            </div>
-            <div class="input-group">
-                <input type="text" @keyup="onKeyUp()" placeholder="请输入验证码" class="input" minlength="6" maxlength="6" v-model="code" >
-                <span class="code-text" v-show="countDownStatus" @click="onSendCode">{{ codeText }}</span>
-                <span class="code-text" v-show="!countDownStatus">
-                    <van-count-down 
-                        ref="countdown"
-                        :auto-start="false"
-                        :time="countDownTime" 
-                        @finish="onFinished"
-                        format="ss秒" />
-                </span>
-            </div>
+    <div class="container" v-show="!isTrue">
+      <div class="input-group">
+        <input
+          type="number"
+          @keyup="onKeyUp()"
+          placeholder="请输入手机号"
+          class="input"
+          v-model="phoneNumber"
+          maxlength="11"
+          minlength="11"
+          pattern="[0-9]"
+        />
+      </div>
+      <div class="input-group">
+        <input
+          type="text"
+          @keyup="onKeyUp()"
+          placeholder="请输入验证码"
+          class="input"
+          minlength="6"
+          maxlength="6"
+          v-model="code"
+        />
+        <span class="code-text" v-show="countDownStatus" @click="onSendCode">{{
+          codeText
+        }}</span>
+        <span class="code-text" v-show="!countDownStatus">
+          <van-count-down
+            ref="countdown"
+            :auto-start="false"
+            :time="countDownTime"
+            @finish="onFinished"
+            format="ss秒"
+          />
+        </span>
+      </div>
 
-            <van-button round size="large" @click="onCodeLogin" :disabled="codeDisable">登录</van-button>
-            <span class="login-change" @click="isTrue = true">密码登录</span>
-            <span class="login-change" @click="onRegister" style="float: left;">立即注册</span>
+      <van-button
+        round
+        size="large"
+        @click="onCodeLogin"
+        :disabled="codeDisable"
+        >登录</van-button
+      >
+      <span class="login-change" @click="isTrue = true">密码登录</span>
+      <span class="login-change" @click="onRegister" style="float: left"
+        >立即注册</span
+      >
 
-            <!-- 图形验证码 -->
-            <m-img-code v-if="showImgCode" v-model="showImgCode" :phone="phoneNumber" @onCodeSend="onCodeSend" />
-        </div>
+      <!-- 图形验证码 -->
+      <m-img-code
+        v-if="showImgCode"
+        v-model="showImgCode"
+        :phone="phoneNumber"
+        @onCodeSend="onCodeSend"
+      />
     </div>
+  </div>
 </template>
 <script>
 /* eslint-disable */
-import { usernameLogin, sendSms, verifySmsCode, smsLogin, queryUserByPhone } from '@/api/app'
-import MImgCode from '@/components/MImgCode'
+import {
+  usernameLogin,
+  sendSms,
+  verifySmsCode,
+  smsLogin,
+  queryUserByPhone,
+} from "@/api/app";
+import MImgCode from "@/components/MImgCode";
 export default {
-    name: 'login',
-    components: {
-        MImgCode
-    },
-    data() {
-        return {
-            groupId: this.$route.query.groupId,
-            pwdDisable: true, // 密码登录按钮状态
-            codeDisable: true, // 验证码登录按钮状态
-            isTrue: true,
-            countDownStatus: true, // 到计时状态
-            phoneNumber: null,
-            password: null,
-            code: null,
-            codeText: '获取验证码',
-            countDownTime: 1000 * 120, // 倒计时时间
-            isClick: false,
-            showImgCode: false
+  name: "login",
+  components: {
+    MImgCode,
+  },
+  data() {
+    return {
+      groupId: this.$route.query.groupId,
+      pwdDisable: true, // 密码登录按钮状态
+      codeDisable: true, // 验证码登录按钮状态
+      isTrue: true,
+      countDownStatus: true, // 到计时状态
+      phoneNumber: null,
+      password: null,
+      code: null,
+      codeText: "获取验证码",
+      countDownTime: 1000 * 120, // 倒计时时间
+      isClick: false,
+      showImgCode: false,
+    };
+  },
+  mounted() {
+    // 登录时删除无用的token
+    localStorage.removeItem("userInfo");
+    localStorage.removeItem("Authorization");
+    // 登录时间判断用户是Token是否有效
+  },
+  methods: {
+    onKeyUp() {
+      if (this.isTrue) {
+        if (!this.phoneNumber || !this.password) {
+          this.pwdDisable = true;
+        } else {
+          this.pwdDisable = false;
         }
+      } else {
+        if (!this.phoneNumber || !this.code) {
+          this.codeDisable = true;
+        } else {
+          this.codeDisable = false;
+        }
+      }
     },
-    mounted() {
-        // 登录时删除无用的token
-        localStorage.removeItem('userInfo')
-        localStorage.removeItem('Authorization')
-        // 登录时间判断用户是Token是否有效
-
-    },
-    methods: {
-        onKeyUp() {
-            if(this.isTrue) {
-                if(!this.phoneNumber || !this.password) {
-                    this.pwdDisable = true
-                } else {
-                    this.pwdDisable = false
-                }
-            } else {
-                if(!this.phoneNumber || !this.code) {
-                    this.codeDisable = true
-                } else {
-                    this.codeDisable = false
-                }
-            }
-        },
-        onRegister() {
-            this.$router.push({
-                path: '/appRegister',
-                query: {
-                    groupId: this.groupId
-                }
-            })
-        },
-        onSendCode() { // 发送验证码
-            if(!this.checkPhone(this.phoneNumber)) {
-                return
-            }
-            queryUserByPhone({ mobile: this.phoneNumber }).then(res => {
-                let result = res.data
-                if(result.code == 200) {
-                    if(result.data == 1) {
-                        // sendSms({
-                        //     mobile: this.phoneNumber
-                        // }).then(res => {
-                        //     let result = res.data
-                        //     if(result.code == 200) {
-                        //         this.countDownStatus = false
-                        //         this.$refs.countdown.start() // 倒计时开始
-                        //     } else {
-                        //         this.$toast(result.msg)
-                        //     }
-                        // })
-                        this.showImgCode = true
-                    } else {
-                        this.$dialog.confirm({
-                            message: '此手机号尚未注册<br/>是否注册？',
-                            confirmButtonText: '注册'
-                        }).then(() => {
-                            this.$router.push({
-                                path: '/appRegister',
-                                query: {
-                                    groupId: this.groupId
-                                }
-                            })
-                        }).catch(() => { });
-                    }
-                } else {
-                    this.$toast(result.msg)
-                }
-            })
+    onRegister() {
+      this.$router.push({
+        path: "/appRegister",
+        query: {
+          groupId: this.groupId,
         },
-        onCodeSend() {
-            this.countDownStatus = false
-            this.$refs.countdown.start() // 倒计时开始
-        },
-        onCodeLogin() { // 短信登录
-            if(this.isClick) {
-                return
-            }
-            this.isClick = true
-            let params = {
-                clientId: 'student',
-                clientSecret: 'student',
-                phone: this.phoneNumber,
-                smsCode: this.code,
-                channel: 'H5'
-            }
-            smsLogin(params).then(sms => {
-                let s = sms.data
-                this.isClick = false
-                // 保存用户信息
-                if(s.code == 200) {
-                    let auth = s.data.authentication
-                    localStorage.setItem('userInfo', auth.token_type + ' ' + auth.access_token)
-                    if(s.data.password) {
-                        this.$router.push({
-                            path: '/classDetail',
-                            query: {
-                                groupId: this.groupId
-                            }
-                        })
-                    } else {
-                        this.$router.push({
-                            path: '/appSetInfo',
-                            query: {
-                                groupId: this.groupId
-                            }
-                        })
-                    }
-                } else if(s.code == 99) {
-                    this.$dialog.confirm({
-                        message: '此手机号尚未注册<br/>是否注册？',
-                        confirmButtonText: '注册'
-                    }).then(() => {
-                        this.$router.push({
-                            path: '/appRegister',
-                            query: {
-                                groupId: this.groupId
-                            }
-                        })
-                    }).catch(() => { });
-                } else {
-                    this.$toast(s.msg)
-                }
-            })
-            // queryUserByPhone({ mobile: this.phoneNumber }).then(res => {
+      });
+    },
+    onSendCode() {
+      // 发送验证码
+      if (!this.checkPhone(this.phoneNumber)) {
+        return;
+      }
+      queryUserByPhone({ mobile: this.phoneNumber }).then((res) => {
+        let result = res.data;
+        if (result.code == 200) {
+          if (result.data == 1) {
+            // sendSms({
+            //     mobile: this.phoneNumber
+            // }).then(res => {
             //     let result = res.data
             //     if(result.code == 200) {
-            //         this.isRegister = result.data
-            //     }
-            //     if(this.isRegister == 1) {
-            //         this.onLoginStr()
+            //         this.countDownStatus = false
+            //         this.$refs.countdown.start() // 倒计时开始
             //     } else {
-            //         this.$dialog.confirm({
-            //             message: '此手机号尚未注册<br/>是否注册？',
-            //             confirmButtonText: '注册'
-            //         }).then(() => {
-            //             this.$router.push({
-            //                 path: '/appRegister',
-            //                 query: {
-            //                     groupId: this.groupId
-            //                 }
-            //             })
-            //         }).catch(() => { });
+            //         this.$toast(result.msg)
             //     }
             // })
-        },
-        onLogin() { // 账号登录
-            if(this.isClick) {
-                return
-            }
-            this.isClick = true
+            this.showImgCode = true;
+          } else {
+            this.$dialog
+              .confirm({
+                message: "此手机号尚未注册<br/>是否注册？",
+                confirmButtonText: "注册",
+              })
+              .then(() => {
+                this.$router.push({
+                  path: "/appRegister",
+                  query: {
+                    groupId: this.groupId,
+                  },
+                });
+              })
+              .catch(() => {});
+          }
+        } else {
+          this.$toast(result.msg);
+        }
+      });
+    },
+    onCodeSend() {
+      this.countDownStatus = false;
+      this.$refs.countdown.start(); // 倒计时开始
+    },
+    onCodeLogin() {
+      // 短信登录
+      if (this.isClick) {
+        return;
+      }
+      this.isClick = true;
+      let params = {
+        clientId: "student",
+        clientSecret: "student",
+        phone: this.phoneNumber,
+        smsCode: this.code,
+        channel: "H5",
+      };
+      smsLogin(params).then((sms) => {
+        let s = sms.data;
+        this.isClick = false;
+        // 保存用户信息
+        if (s.code == 200) {
+          let auth = s.data.authentication;
+          localStorage.setItem(
+            "userInfo",
+            auth.token_type + " " + auth.access_token
+          );
+          if (s.data.password) {
+            this.$router.push({
+              path: "/classDetail",
+              query: {
+                groupId: this.groupId,
+              },
+            });
+          } else {
+            this.$router.push({
+              path: "/appSetInfo",
+              query: {
+                groupId: this.groupId,
+              },
+            });
+          }
+        } else if (s.code == 99) {
+          this.$dialog
+            .confirm({
+              message: "此手机号尚未注册<br/>是否注册？",
+              confirmButtonText: "注册",
+            })
+            .then(() => {
+              this.$router.push({
+                path: "/appRegister",
+                query: {
+                  groupId: this.groupId,
+                },
+              });
+            })
+            .catch(() => {});
+        } else {
+          this.$toast(s.msg);
+        }
+      });
+      // queryUserByPhone({ mobile: this.phoneNumber }).then(res => {
+      //     let result = res.data
+      //     if(result.code == 200) {
+      //         this.isRegister = result.data
+      //     }
+      //     if(this.isRegister == 1) {
+      //         this.onLoginStr()
+      //     } else {
+      //         this.$dialog.confirm({
+      //             message: '此手机号尚未注册<br/>是否注册？',
+      //             confirmButtonText: '注册'
+      //         }).then(() => {
+      //             this.$router.push({
+      //                 path: '/appRegister',
+      //                 query: {
+      //                     groupId: this.groupId
+      //                 }
+      //             })
+      //         }).catch(() => { });
+      //     }
+      // })
+    },
+    onLogin() {
+      // 账号登录
+      if (this.isClick) {
+        return;
+      }
+      this.isClick = true;
+
+      usernameLogin({
+        clientId: "student",
+        clientSecret: "student",
+        username: this.phoneNumber,
+        password: this.password,
+      }).then((sms) => {
+        let s = sms.data;
+        this.isClick = false;
+        // 保存用户信息
+        if (s.code == 200) {
+          let auth = s.data.authentication;
+          localStorage.setItem(
+            "userInfo",
+            auth.token_type + " " + auth.access_token
+          );
 
-            usernameLogin({
-                clientId: 'student',
-                clientSecret: 'student',
-                username: this.phoneNumber,
-                password: this.password
-            }).then(sms => {
-                let s = sms.data
-                this.isClick = false
-                // 保存用户信息
-                if(s.code == 200) {
-                    let auth = s.data.authentication
-                    localStorage.setItem('userInfo', auth.token_type + ' ' + auth.access_token)
-                    
-                    this.$router.push({
-                        path: '/classDetail',
-                        query: {
-                            groupId: this.groupId
-                        }
-                    })
-                } else if(s.code == 99) {
-                    this.$dialog.confirm({
-                        message: '此手机号尚未注册<br/>是否注册？',
-                        confirmButtonText: '注册'
-                    }).then(() => {
-                        this.$router.push({
-                            path: '/appRegister',
-                            query: {
-                                groupId: this.groupId
-                            }
-                        })
-                    }).catch(() => { });
-                } else {
-                    this.$toast(s.msg)
-                }
+          this.$router.push({
+            path: "/classDetail",
+            query: {
+              groupId: this.groupId,
+            },
+          });
+        } else if (s.code == 99) {
+          this.$dialog
+            .confirm({
+              message: "此手机号尚未注册<br/>是否注册？",
+              confirmButtonText: "注册",
             })
-        },
-        onFinished() { // 倒计时结束
-            this.countDownStatus = true
-            this.$refs.countdown.reset()
-        },
-        checkPhone(phoneNumber) {
-            let result = true
-            if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(phoneNumber))){ 
-                this.$toast('手机号输入有误')
-                result = false
-            }
-            return result
+            .then(() => {
+              this.$router.push({
+                path: "/appRegister",
+                query: {
+                  groupId: this.groupId,
+                },
+              });
+            })
+            .catch(() => {});
+        } else {
+          this.$toast(s.msg);
         }
-    }
-}
+      });
+    },
+    onFinished() {
+      // 倒计时结束
+      this.countDownStatus = true;
+      this.$refs.countdown.reset();
+    },
+    checkPhone(phoneNumber) {
+      let result = true;
+      if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(phoneNumber)) {
+        this.$toast("手机号输入有误");
+        result = false;
+      }
+      return result;
+    },
+  },
+};
 </script>
 <style lang='less' scoped>
 @import url("../../assets/commonLess/variable.less");
 
 .login {
-    min-height: 100vh;
-    background: linear-gradient(to bottom, #15938B, #6dbeba);
+  min-height: 100vh;
+//   background: -webkit-gradient(
+//     linear,
+//     left bottom,
+//     left top,
+//     from(#01c1b5),
+//     to(#1bcbbf)
+//   );
+  background: linear-gradient(1turn, #01c1b5, #1bcbbf);
 }
 .container {
-    padding: 0 .48rem;
+  padding: 0 0.48rem;
 }
 .logo {
-    padding-top: 1rem;
-    padding-bottom: .9rem;
-    width: 1.6rem;
-    margin: 0 auto;
-    img {
-        width: inherit;
-    }
+  padding-top: 1rem;
+  padding-bottom: 0.9rem;
+  width: 1.6rem;
+  margin: 0 auto;
+  img {
+    width: inherit;
+  }
 }
 .input-group {
-    position: relative;
-    height: .44rem;
-    border-radius: .5rem;
-    border: .02rem solid @whiteColor;
-    margin-bottom: .2rem;
-    padding-left: .3rem;
-    padding-right: .3rem;
-    display: flex;
-    align-items: center;
-    .input {
-        flex: 1;
-        font-size: .14rem;
-        color: @whiteColor;
-        
-        background: transparent;
-        border: none;
-        &::placeholder {
-            color: @whiteColor;
-        }
-    }
-    .code-text {
-        position: absolute;
-        right: 0;
-        flex: 1;
-        display: block;
-        width: .94rem;
-        text-align: center;
-        border-left: .02rem solid @whiteColor;
-        font-size: .14rem;
-        color: @whiteColor;
-        line-height: .3rem;
-        height: .3rem;
+  position: relative;
+  height: 0.44rem;
+  border-radius: 0.5rem;
+  border: 0.02rem solid @whiteColor;
+  margin-bottom: 0.2rem;
+  padding-left: 0.3rem;
+  padding-right: 0.3rem;
+  display: flex;
+  align-items: center;
+  .input {
+    flex: 1;
+    font-size: 0.14rem;
+    color: @whiteColor;
+
+    background: transparent;
+    border: none;
+    &::placeholder {
+      color: @whiteColor!important;
     }
+  }
+  .code-text {
+    position: absolute;
+    right: 0;
+    flex: 1;
+    display: block;
+    width: 0.94rem;
+    text-align: center;
+    border-left: 0.02rem solid @whiteColor;
+    font-size: 0.14rem;
+    color: @whiteColor;
+    line-height: 0.3rem;
+    height: 0.3rem;
+  }
 }
 /deep/.van-count-down {
-    font-size: .14rem;
-    color: @whiteColor;
-    line-height: .3rem;
-    height: .3rem;
+  font-size: 0.14rem;
+  color: @whiteColor;
+  line-height: 0.3rem;
+  height: 0.3rem;
 }
 /deep/.van-button--large {
-    height: .44rem;
-    line-height: .42rem;
-    color: @mColor;
-    border: 0;
+  height: 0.44rem;
+  line-height: 0.42rem;
+  color: @mColor;
+  border: 0;
 }
 /deep/.van-button:active::before {
-    opacity: 0.05;
+  opacity: 0.05;
 }
 /deep/.van-button--disabled {
-    opacity: 1;
-    color: rgba(0, 0, 0, 0.25);
+  opacity: 1;
+  color: rgba(0, 0, 0, 0.25);
 }
 .login-change {
-    padding-top: .08rem;
-    font-size: .14rem;
-    color: @whiteColor;
-    float: right;
+  padding-top: 0.08rem;
+  font-size: 0.14rem;
+  color: @whiteColor;
+  float: right;
 }
 </style>

src/views/app/AppRegister.vue

@@ -1,318 +1,355 @@
 <template>
-    <div class="login">
-        <div class="logo">
-            <img src="../../assets/images/logo.png" alt="">
-        </div>
+  <div class="login">
+    <div class="logo">
+      <img src="../../assets/images/logo.png" alt="" />
+    </div>
 
-        <div class="container">
-            <div class="input-group">
-                <input type="number" placeholder="请输入手机号" class="input" v-model="phoneNumber" maxlength="11" minlength="11" pattern="[0-9]">
-            </div>
-            <div class="input-group" style="margin-bottom: .05rem;">
-                <input type="text" placeholder="请输入验证码" class="input" minlength="6" maxlength="6" v-model="code" >
-                <span class="code-text" v-show="countDownStatus" @click="onSendCode">{{ codeText }}</span>
-                <span class="code-text" v-show="!countDownStatus">
-                    <van-count-down 
-                        ref="countdown"
-                        :auto-start="false"
-                        :time="countDownTime" 
-                        @finish="onFinished"
-                        format="ss秒" />
-                </span>
-            </div>
-            <div class="agreeProtocol">
-                <van-checkbox v-model="agreeStatus"></van-checkbox>
-                <i style="font-style: normal;" @click="agreeStatus = !agreeStatus">阅读并同意</i> <span @click="onToProtocol">《用户协议》</span>
-            </div>
-            <van-button round size="large" @click="onCodeLogin" >注册并登录</van-button>
-            <span class="login-change" @click="onUrlLogin">登录</span>
+    <div class="container">
+      <div class="input-group">
+        <input
+          type="number"
+          placeholder="请输入手机号"
+          class="input"
+          v-model="phoneNumber"
+          maxlength="11"
+          minlength="11"
+          pattern="[0-9]"
+        />
+      </div>
+      <div class="input-group" style="margin-bottom: 0.05rem">
+        <input
+          type="text"
+          placeholder="请输入验证码"
+          class="input"
+          minlength="6"
+          maxlength="6"
+          v-model="code"
+        />
+        <span class="code-text" v-show="countDownStatus" @click="onSendCode">{{
+          codeText
+        }}</span>
+        <span class="code-text" v-show="!countDownStatus">
+          <van-count-down
+            ref="countdown"
+            :auto-start="false"
+            :time="countDownTime"
+            @finish="onFinished"
+            format="ss秒"
+          />
+        </span>
+      </div>
+      <div class="agreeProtocol">
+        <van-checkbox v-model="agreeStatus"></van-checkbox>
+        <i style="font-style: normal" @click="agreeStatus = !agreeStatus"
+          >阅读并同意</i
+        >
+        <span @click="onToProtocol">《用户协议》</span>
+      </div>
+      <van-button round size="large" @click="onCodeLogin"
+        >注册并登录</van-button
+      >
+      <span class="login-change" @click="onUrlLogin">登录</span>
 
-            <!-- 图形验证码 -->
-            <m-img-code v-if="showImgCode" v-model="showImgCode" :phone="phoneNumber" @onCodeSend="onCodeSend" />
-        </div>
+      <!-- 图形验证码 -->
+      <m-img-code
+        v-if="showImgCode"
+        v-model="showImgCode"
+        :phone="phoneNumber"
+        @onCodeSend="onCodeSend"
+      />
     </div>
+  </div>
 </template>
 <script>
-import {smsLogin, queryUserByPhone } from '@/api/app'
-import MImgCode from '@/components/MImgCode'
+import { smsLogin, queryUserByPhone } from "@/api/app";
+import MImgCode from "@/components/MImgCode";
 export default {
-    name: 'login',
-    components: {
-        MImgCode
-    },
-    data() {
-        let query = localStorage.getItem('getRegister')
-        query = query ? JSON.parse(query) : {}
-        localStorage.removeItem('getRegister')
-        return {
-            groupId: this.$route.query.groupId,
-            // codeDisable: true, // 验证码登录按钮状态
-            countDownStatus: true, // 到计时状态
-            phoneNumber: query.phoneNumber ? query.phoneNumber : null,
-            isRegister: 0, // 默认没有注册
-            code: query.code ? query.code : null,
-            codeText: '获取验证码',
-            countDownTime: 1000 * 120, // 倒计时时间
-            isClick: false,
-            agreeStatus: query.agreeStatus ? query.agreeStatus : false,
-            showImgCode: false
-        }
+  name: "login",
+  components: {
+    MImgCode,
+  },
+  data() {
+    let query = localStorage.getItem("getRegister");
+    query = query ? JSON.parse(query) : {};
+    localStorage.removeItem("getRegister");
+    return {
+      groupId: this.$route.query.groupId,
+      // codeDisable: true, // 验证码登录按钮状态
+      countDownStatus: true, // 到计时状态
+      phoneNumber: query.phoneNumber ? query.phoneNumber : null,
+      isRegister: 0, // 默认没有注册
+      code: query.code ? query.code : null,
+      codeText: "获取验证码",
+      countDownTime: 1000 * 120, // 倒计时时间
+      isClick: false,
+      agreeStatus: query.agreeStatus ? query.agreeStatus : false,
+      showImgCode: false,
+    };
+  },
+  mounted() {
+    // 登录时删除无用的token
+    localStorage.removeItem("userInfo");
+    localStorage.removeItem("Authorization");
+  },
+  methods: {
+    codeBlur() {
+      setTimeout(() => {
+        const scrollHeight =
+          document.documentElement.scrollTop || document.body.scrollTop || 0;
+        window.scrollTo(0, Math.max(scrollHeight - 1, 0));
+      }, 100);
     },
-    mounted() {
-        // 登录时删除无用的token
-        localStorage.removeItem('userInfo')
-        localStorage.removeItem('Authorization')
-    },
-    methods: {
-        codeBlur() {
-            setTimeout(() => {
-                const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
-                window.scrollTo(0, Math.max(scrollHeight - 1, 0));
-            }, 100);
-        },
-        onToProtocol() {
-            localStorage.setItem('getRegister', JSON.stringify({
-                phoneNumber: this.phoneNumber,
-                code: this.code,
-                agreeStatus: this.agreeStatus
-            }))
-            this.$router.push({
-                path: '/userProtocol',
-                query: {
-                    groupId: this.groupId,
-                }
-            })
+    onToProtocol() {
+      localStorage.setItem(
+        "getRegister",
+        JSON.stringify({
+          phoneNumber: this.phoneNumber,
+          code: this.code,
+          agreeStatus: this.agreeStatus,
+        })
+      );
+      this.$router.push({
+        path: "/userProtocol",
+        query: {
+          groupId: this.groupId,
         },
-        onUrlLogin() {
-            this.$router.push({
-                path: '/appLogin',
-                query: {
-                    groupId: this.groupId
-                }
-            })
+      });
+    },
+    onUrlLogin() {
+      this.$router.push({
+        path: "/appLogin",
+        query: {
+          groupId: this.groupId,
         },
-        onSendCode() { // 发送验证码
-            if(!this.checkPhone(this.phoneNumber)) {
-                return
-            }
+      });
+    },
+    onSendCode() {
+      // 发送验证码
+      if (!this.checkPhone(this.phoneNumber)) {
+        return;
+      }
 
-            queryUserByPhone({ mobile: this.phoneNumber }).then(res => {
-                let result = res.data
-                if(result.code == 200) {
-                    this.isRegister = result.data
-                    if(result.data == 1) {
-                        this.$toast('用户已存在')
-                        return
-                    } else {
-                        // sendSms({
-                        //     mobile: this.phoneNumber
-                        // }).then(res => {
-                        //     let result = res.data
-                        //     if(result.code == 200) {
-                        //         this.countDownStatus = false
-                        //         this.$refs.countdown.start() // 倒计时开始
-                        //     } else {
-                        //         this.$toast(result.msg)
-                        //     }
-                        // })
-                        this.showImgCode = true
-                    }
-                }
-            })
-        },
-        onCodeSend() {
-            this.countDownStatus = false
-            this.$refs.countdown.start() // 倒计时开始
-        },
-        onCodeLogin() { // 短信登录
-            if(!this.phoneNumber) {
-                this.$toast('请输入手机号')
-                return
-            } else if(!this.checkPhone(this.phoneNumber)) {
-                return
-            }
+      queryUserByPhone({ mobile: this.phoneNumber }).then((res) => {
+        let result = res.data;
+        if (result.code == 200) {
+          this.isRegister = result.data;
+          if (result.data == 1) {
+            this.$toast("用户已存在");
+            return;
+          } else {
+            // sendSms({
+            //     mobile: this.phoneNumber
+            // }).then(res => {
+            //     let result = res.data
+            //     if(result.code == 200) {
+            //         this.countDownStatus = false
+            //         this.$refs.countdown.start() // 倒计时开始
+            //     } else {
+            //         this.$toast(result.msg)
+            //     }
+            // })
+            this.showImgCode = true;
+          }
+        }
+      });
+    },
+    onCodeSend() {
+      this.countDownStatus = false;
+      this.$refs.countdown.start(); // 倒计时开始
+    },
+    onCodeLogin() {
+      // 短信登录
+      if (!this.phoneNumber) {
+        this.$toast("请输入手机号");
+        return;
+      } else if (!this.checkPhone(this.phoneNumber)) {
+        return;
+      }
 
-            if(!this.code) {
-                this.$toast('请输入验证码')
-                return
-            }
+      if (!this.code) {
+        this.$toast("请输入验证码");
+        return;
+      }
 
-            if(!this.agreeStatus) {
-                this.$toast('请先阅读并同意用户协议')
-                return
-            }
+      if (!this.agreeStatus) {
+        this.$toast("请先阅读并同意用户协议");
+        return;
+      }
 
-            if(this.isClick) {
-                return
-            }
-            this.isClick = true
-            queryUserByPhone({ mobile: this.phoneNumber }).then(res => {
-                let result = res.data
-                if(result.code == 200) {
-                    this.isRegister = result.data
-                    if(result.data == 1) {
-                        this.$toast('用户已存在')
-                        this.isClick = false
-                        return
-                    } else {
-                        this.onLogin()
-                    }
-                }
-            })
-        },
-        onLogin() {
-            let params = {
-                clientId: 'student',
-                clientSecret: 'student',
-                phone: this.phoneNumber,
-                smsCode: this.code,
-                channel: 'H5',
-                isLessee: 'true'
-            }
-            smsLogin(params).then(sms => {
-                let s = sms.data
-                this.isClick = false
-                // 保存用户信息
-                if(s.code == 200) {
-                    let auth = s.data.authentication
-                    localStorage.setItem('userInfo', auth.token_type + ' ' + auth.access_token)
-                    if(s.password) {
-                        this.$router.push({
-                            path: '/classDetail',
-                            query: {
-                                groupId: this.groupId
-                            }
-                        })
-                    } else {
-                        this.$router.push({
-                            path: '/appSetInfo',
-                            query: {
-                                groupId: this.groupId
-                            }
-                        })
-                    }
-                } else {
-                    this.$toast(s.msg)
-                }
-            })
-        },
-        onFinished() { // 倒计时结束
-            this.countDownStatus = true
-            this.$refs.countdown.reset()
-        },
-        checkPhone(phoneNumber) {
-            let result = true
-            if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(phoneNumber))){ 
-                this.$toast('手机号输入有误')
-                result = false
-            }
-            return result
+      if (this.isClick) {
+        return;
+      }
+      this.isClick = true;
+      queryUserByPhone({ mobile: this.phoneNumber }).then((res) => {
+        let result = res.data;
+        if (result.code == 200) {
+          this.isRegister = result.data;
+          if (result.data == 1) {
+            this.$toast("用户已存在");
+            this.isClick = false;
+            return;
+          } else {
+            this.onLogin();
+          }
         }
-    }
-}
+      });
+    },
+    onLogin() {
+      let params = {
+        clientId: "student",
+        clientSecret: "student",
+        phone: this.phoneNumber,
+        smsCode: this.code,
+        channel: "H5",
+        isLessee: "true",
+      };
+      smsLogin(params).then((sms) => {
+        let s = sms.data;
+        this.isClick = false;
+        // 保存用户信息
+        if (s.code == 200) {
+          let auth = s.data.authentication;
+          localStorage.setItem(
+            "userInfo",
+            auth.token_type + " " + auth.access_token
+          );
+          if (s.password) {
+            this.$router.push({
+              path: "/classDetail",
+              query: {
+                groupId: this.groupId,
+              },
+            });
+          } else {
+            this.$router.push({
+              path: "/appSetInfo",
+              query: {
+                groupId: this.groupId,
+              },
+            });
+          }
+        } else {
+          this.$toast(s.msg);
+        }
+      });
+    },
+    onFinished() {
+      // 倒计时结束
+      this.countDownStatus = true;
+      this.$refs.countdown.reset();
+    },
+    checkPhone(phoneNumber) {
+      let result = true;
+      if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(phoneNumber)) {
+        this.$toast("手机号输入有误");
+        result = false;
+      }
+      return result;
+    },
+  },
+};
 </script>
 <style lang='less' scoped>
 @import url("../../assets/commonLess/variable.less");
 
 .login {
-    min-height: 100vh;
-    background: linear-gradient(to bottom, #15938B, #6dbeba);
+  min-height: 100vh;
+  background: linear-gradient(1turn, #01c1b5, #1bcbbf);
 }
 .container {
-    padding: 0 .48rem;
+  padding: 0 0.48rem;
 }
 .agreeProtocol {
-    font-size: .14rem;
-    display: flex;
-    align-items: center;
-    // color: #333333;
+  font-size: 0.14rem;
+  display: flex;
+  align-items: center;
+  // color: #333333;
+  color: #fff;
+  padding: 0.05rem 0.06rem 0.15rem;
+  .van-checkbox {
+    padding-right: 0.08rem;
+  }
+  /deep/.van-checkbox__icon .van-icon {
+    // border-color: #14928A;
+    background: #fff;
+  }
+  /deep/.van-checkbox__icon--checked .van-icon {
+    color:  @mColor;
+    background-color: #fff;
+    border-color: #fff;
+  }
+  span {
+    // color: #14928A;
     color: #fff;
-    padding: .05rem .06rem .15rem;
-    .van-checkbox {
-        padding-right: .08rem;
-        
-    }
-    /deep/.van-checkbox__icon .van-icon {
-        // border-color: #14928A;
-        background: #fff;
-    }
-    /deep/.van-checkbox__icon--checked .van-icon {
-        color: #14928A;
-        background-color: #fff;
-        border-color: #fff;
-    }
-    span {
-        // color: #14928A;
-        color: #fff;
-    }
+  }
 }
 .logo {
-    padding-top: 1rem;
-    padding-bottom: .9rem;
-    width: 1.6rem;
-    margin: 0 auto;
-    img {
-        width: inherit;
-    }
+  padding-top: 1rem;
+  padding-bottom: 0.9rem;
+  width: 1.6rem;
+  margin: 0 auto;
+  img {
+    width: inherit;
+  }
 }
 .input-group {
-    position: relative;
-    height: .44rem;
-    border-radius: .5rem;
-    border: .02rem solid @whiteColor;
-    margin-bottom: .2rem;
-    padding-left: .3rem;
-    padding-right: .3rem;
-    display: flex;
-    align-items: center;
-    .input {
-        flex: 1;
-        font-size: .14rem;
-        color: @whiteColor;
-        
-        background: transparent;
-        border: none;
-        &::placeholder {
-            color: @whiteColor;
-        }
-    }
-    .code-text {
-        position: absolute;
-        right: 0;
-        flex: 1;
-        display: block;
-        width: .94rem;
-        text-align: center;
-        border-left: .02rem solid @whiteColor;
-        font-size: .14rem;
-        color: @whiteColor;
-        line-height: .3rem;
-        height: .3rem;
+  position: relative;
+  height: 0.44rem;
+  border-radius: 0.5rem;
+  border: 0.02rem solid @whiteColor;
+  margin-bottom: 0.2rem;
+  padding-left: 0.3rem;
+  padding-right: 0.3rem;
+  display: flex;
+  align-items: center;
+  .input {
+    flex: 1;
+    font-size: 0.14rem;
+    color: @whiteColor;
+
+    background: transparent;
+    border: none;
+    &::placeholder {
+      color: @whiteColor!important;
     }
+  }
+  .code-text {
+    position: absolute;
+    right: 0;
+    flex: 1;
+    display: block;
+    width: 0.94rem;
+    text-align: center;
+    border-left: 0.02rem solid @whiteColor;
+    font-size: 0.14rem;
+    color: @whiteColor;
+    line-height: 0.3rem;
+    height: 0.3rem;
+  }
 }
 /deep/.van-count-down {
-    font-size: .14rem;
-    color: @whiteColor;
-    line-height: .3rem;
-    height: .3rem;
+  font-size: 0.14rem;
+  color: @whiteColor;
+  line-height: 0.3rem;
+  height: 0.3rem;
 }
 /deep/.van-button--large {
-    height: .44rem;
-    line-height: .42rem;
-    color: @mColor;
-    border: 0;
+  height: 0.44rem;
+  line-height: 0.42rem;
+  color: @mColor;
+  border: 0;
 }
 /deep/.van-button:active::before {
-    opacity: 0.05;
+  opacity: 0.05;
 }
 /deep/.van-button--disabled {
-    opacity: 1;
-    color: rgba(0, 0, 0, 0.25);
+  opacity: 1;
+  color: rgba(0, 0, 0, 0.25);
 }
 .login-change {
-    padding-top: .08rem;
-    font-size: .14rem;
-    color: @whiteColor;
-    float: right;
+  padding-top: 0.08rem;
+  font-size: 0.14rem;
+  color: @whiteColor;
+  float: right;
 }
 </style>

src/views/app/ClassDetail.vue

@@ -267,7 +267,7 @@ export default {
 }
 .pay_btn {
     margin: .25rem .3rem .2rem;
-    background: #14928A;
+    background: @mColor;
     line-height: .45rem;
     color: #fff;
     font-size: .18rem;

src/views/app/PeriodExchange.vue

@@ -232,16 +232,21 @@ export default {
     /deep/.van-cell {
         margin-top: -1px;
         padding: .26rem .16rem .15rem;
-        background: #14928A;
+        // background: #14928A;
         line-height: .24rem;
     }
     .exchangeText {
-        font-size: .18rem;
-        color: #FFFFFF;
+        font-size: .21rem;
+        color: #1A1A1A;
     }
     .info {
         font-size: .14rem;
-        color: #ccc;
+        color: #808080;
+    }
+    [class*='van-hairline']{
+         &::after{
+             border: 0 solid #fff;
+         }
     }
 }
 .activeList {
@@ -259,11 +264,11 @@ export default {
             content: ' ';
             width: .04rem;
             height: .15rem;
-            background:#14928A;
+            background:@mColor;
             border-radius: .02rem;
             position: absolute;
             left: .02rem;
-            top: .05rem;
+            top: .04rem;
         }
         span {
             float: right;

src/views/audition/ArrangeWork.vue

@@ -7,11 +7,12 @@
         <van-field type="text" placeholder="请输入（1-25字）" />
       </div> -->
       <div class="formGroup">
+           <div class="dot"></div>
         <div class="formTitle">作业内容</div>
         <van-field rows="8" v-model="content" type="textarea" placeholder="请输入（1-600字）" />
       </div>
     </div>
-    <van-cell class="endTime" title="截止时间" @click="onEndTime" readonly placeholder="请选择截止时间" >
+    <van-cell class="endTime" title="作业提交截止时间" @click="onEndTime" readonly placeholder="请选择截止时间" >
       <template #default>
         {{ dateSection.showStartDate }} <span class="arrowDown"></span>
       </template>
@@ -36,7 +37,8 @@
 </template>
 <script>
 import MHeader from "@/components/MHeader"
-import { browser, _throttle, getYMD }  from '@/common/common'
+import { browser, _throttle }  from '@/common/common'
+import dayjs from "dayjs";
 import { addHomeWork } from '@/api/audition'
 export default {
   name: "teacherList",
@@ -52,7 +54,7 @@ export default {
         minDate: new Date(),
         maxDate: new Date(2025, 10, 1),
         currentDate: tempDate,
-        showStartDate: getYMD(tempDate, true)
+        showStartDate: dayjs(tempDate).format("YYYY年MM月DD日")
       },
       content: null, // 课程编号
       expiryDate: null, // 作业截止日期
@@ -82,7 +84,7 @@ export default {
       return val
     },
     confirmStartTime() {
-      this.dateSection.showStartDate = getYMD(this.dateSection.currentDate, true)
+      this.dateSection.showStartDate = dayjs(this.dateSection.currentDate).format("YYYY年MM月DD日")
       this.dateSection.status = false
     },
     onEndTime() {
@@ -105,7 +107,9 @@ export default {
         courseId: query.courseId,
         expiryDate: this.dateSection.showStartDate
       }
-      addHomeWork(params).then(res => {
+      let visitTime = this.dateSection.showStartDate.replace(/[^\d]/g,'/');
+      let someDate = new Date(visitTime)
+      addHomeWork({...params,expiryDate:dayjs(someDate).format("YYYY-MM-DD")}).then(res => {
         let result = res.data
         this.$toast.clear()
         if(result.code == 200) {
@@ -148,10 +152,10 @@ export default {
 .container {
   background: #ffffff;
   .formTitle {
-    padding: .12rem .16rem 0;
-    font-size: .14rem;
-    color: #14928A;
-    font-weight: 600;
+    padding: .12rem .21rem 0;
+    font-size: .16rem;
+    color: #333333;
+    font-weight: 500;
   }
 }
 
@@ -160,12 +164,13 @@ export default {
   .van-cell__title {
     font-size: .16rem;
     color: #1A1A1A;
+ 
   }
 
   /deep/.van-cell__value {
-    width: 30%;
-    flex: 1 auto;
-    text-align: left;
+    // width: 30%;
+    justify-content: flex-end;
+    text-align: right;
     font-size: .16rem;
     color: #1A1A1A;
     display: flex;
@@ -183,4 +188,18 @@ export default {
     font-size: 0.18rem;
   }
 }
+
+.dot {
+  width: 4px;
+  height: 0.17rem;
+  background: #01c1b5;
+  border-radius: 3px;
+  position: absolute;
+  z-index: 200;
+  top: .15rem;
+  left: 0.12rem;
+}
+.formGroup {
+  position: relative;
+}
 </style>

src/views/audition/CourseEvaluation.vue

@@ -1,23 +1,18 @@
 <template>
-  <div style="overflow: hidden;">
+  <div style="overflow: hidden">
     <m-header v-if="headerStatus" />
     <van-cell-group>
       <van-cell title="课程班名称" :value="classGroupName" />
-    </van-cell-group>
-    <van-cell-group>
-      <van-cell title="课程类型" >
+           <van-cell title="课程类型">
         <template #default>
           {{ classType | coursesType }}
         </template>
       </van-cell>
-    </van-cell-group>
-    <van-cell-group>
       <van-cell title="上课时间" :value="classTimer" />
+        <van-cell title="乐器" :value="subjectNames" />
     </van-cell-group>
     <van-cell-group>
-      <van-cell title="乐器" :value="subjectNames" />
-    </van-cell-group>
-    <van-cell-group>
+       <div class="dot"></div>
       <van-field
         required
         rows="4"
@@ -25,33 +20,62 @@
         v-model="teachingMaterial"
         maxlength="255"
         autosize
-        label=" 教材内容"
+        label="教材内容"
         type="textarea"
         placeholder="请输入（1-255字）"
       />
     </van-cell-group>
     <van-cell-group>
-      <van-field required label="曲目" input-align="right" placeholder="请输入曲目名" v-model="song" />
+       <div class="dot"></div>
+      <van-field
+        required
+        rows="1"
+        label="曲目"
+        type="textarea"
+        placeholder="请输入曲目名"
+        class="textarea"
+        v-model="song"
+      />
     </van-cell-group>
+    <!-- <van-cell-group >
+ 
+    </van-cell-group> -->
+    <!--   label="评价备注" -->
     <van-cell-group>
-      <van-cell>
+       <div class="dot"></div>
+      <p class="evTitle">评价</p>
+
+      <van-cell class="start">
         <template slot="title">
           <div class="title-item">
             <span class="text">发音</span>
-            <van-rate v-model="pronunciation" :size="25" void-color="#eee" void-icon="star" />
+            <van-rate
+              v-model="pronunciation"
+              :size="25"
+              void-color="#eee"
+              void-icon="star"
+            />
           </div>
           <div class="title-item">
             <span class="text">节奏</span>
-            <van-rate :size="25" void-color="#eee" v-model="tempo" void-icon="star" />
+            <van-rate
+              :size="25"
+              void-color="#eee"
+              v-model="tempo"
+              void-icon="star"
+            />
           </div>
           <div class="title-item">
             <span class="text">乐理</span>
-            <van-rate :size="25" v-model="musicTheory" void-color="#eee" void-icon="star" />
+            <van-rate
+              :size="25"
+              v-model="musicTheory"
+              void-color="#eee"
+              void-icon="star"
+            />
           </div>
         </template>
       </van-cell>
-    </van-cell-group>
-    <van-cell-group>
       <van-field
         rows="4"
         required
@@ -59,26 +83,13 @@
         maxlength="255"
         v-model="memo"
         autosize
-        label="评价备注"
         type="textarea"
         placeholder="请输入（1-255字）"
       />
     </van-cell-group>
-    <!-- <van-cell-group v-if="!isReset || (isReset && homeWork)">
-      <van-field
-        rows="4"
-        class="textarea"
-        :disabled="isReset"
-        maxlength="255"
-        v-model="homeWork"
-        autosize
-        label="布置作业"
-        type="textarea"
-        placeholder="请输入（1-255字）"
-      />
-    </van-cell-group> -->
     <van-cell-group v-if="classType != 'VIP'">
-      <van-cell title="是否完成双向沟通" value-class="twoConnect">
+         <div class="dot"></div>
+      <van-cell title="是否完成双向沟通" value-class="twoConnect" class="talk">
         <template slot="default">
           <van-radio-group required v-model="hasLiaison" direction="horizontal">
             <van-radio name="1">是</van-radio>
@@ -87,29 +98,36 @@
         </template>
       </van-cell>
     </van-cell-group>
-<!--
-    <van-cell-group v-if="isReset">
-      <van-cell title="是否完成作业" value-class="twoConnect">
-        <template slot="default">
-          <van-radio-group required v-model="handHomework" direction="horizontal">
-            <van-radio name="1">是</van-radio>
-            <van-radio name="0">否</van-radio>
-          </van-radio-group>
-        </template>
-      </van-cell>
-    </van-cell-group> -->
+
     <div class="button-group" v-if="!reviewId">
-      <van-button type="primary"  round size="large" @click="submitReview">提交评价</van-button>
+      <van-button type="primary" round size="large" @click="submitReview"
+        >提交评价</van-button
+      >
     </div>
     <div class="button-group btn-operation" v-if="reviewId">
-      <van-button type="primary" :disabled="homeWork?true: false" v-if="enableAssignHomework" round @click="onWork(isAssignHomework)">{{ homeWork ? '已布置作业' : '布置作业' }}</van-button>
-      <van-button type="primary" round class="btn-plain" @click="submitReview">修改评价</van-button>
+      <van-button
+        type="primary"
+        :disabled="homeWork ? true : false"
+        v-if="enableAssignHomework"
+        round
+        @click="onWork(isAssignHomework)"
+        >{{ homeWork ? "已布置作业" : "布置作业" }}</van-button
+      >
+      <van-button type="primary" round class="btn-plain" @click="submitReview"
+        >修改评价</van-button
+      >
     </div>
 
     <van-popup v-model="showWork">
       <van-icon class="closeable" @click="onClose" name="cross" />
       <div class="popup_container">
-        <p class="content">评价成功<br/>{{ isAssignHomework ? '您课程所在周已经布置作业，是否继续布置?' : '是否布置作业？' }}</p>
+        <p class="content">
+          评价成功<br />{{
+            isAssignHomework
+              ? "您课程所在周已经布置作业，是否继续布置?"
+              : "是否布置作业？"
+          }}
+        </p>
         <div class="btn_group">
           <span @click="onClose">取消</span>
           <span @click="onWork(0)">布置作业</span>
@@ -125,7 +143,7 @@ import {
   courseReviewAdd,
   getReviewInfo,
   updateReviewInfo,
-  checkeIsAssignHomework
+  checkeIsAssignHomework,
 } from "@/api/teacher";
 import { browser } from "@/common/common";
 import MHeader from "@/components/MHeader";
@@ -178,23 +196,23 @@ export default {
       localStorage.setItem("Authorization", decodeURI(params.Authorization));
       localStorage.setItem("userInfo", decodeURI(params.Authorization));
     }
-    if(browser().android || browser().iPhone) {
-      this.headerStatus = false
+    if (browser().android || browser().iPhone) {
+      this.headerStatus = false;
     }
     // 获取头部信息
     if (this.reviewId) {
       // 获取老评价
       this.$toast.loading({
-        message: '加载中...',
+        message: "加载中...",
         duration: 10000,
         forbidClick: true,
-        loadingType: 'spinner',
-      })
-      getReviewInfo({ id: this.reviewId }).then(res => {
-        this.$toast.clear()
+        loadingType: "spinner",
+      });
+      getReviewInfo({ id: this.reviewId }).then((res) => {
+        this.$toast.clear();
         if (res.data.code == 200) {
-          let result = res.data.data
-          let teacherClassHeadInfo = result.teacherClassHeadInfo
+          let result = res.data.data;
+          let teacherClassHeadInfo = result.teacherClassHeadInfo;
           this.classTimer =
             teacherClassHeadInfo.classDate +
             teacherClassHeadInfo.startClassTime +
@@ -202,10 +220,10 @@ export default {
             teacherClassHeadInfo.endClassTime;
           this.subjectNames = teacherClassHeadInfo.subjectNames;
           this.classGroupName = teacherClassHeadInfo.classGroupName;
-          this.classType = teacherClassHeadInfo.courseScheduleType
+          this.classType = teacherClassHeadInfo.courseScheduleType;
 
           // 评价内容
-          let courseScheduleReview = result.courseScheduleReview
+          let courseScheduleReview = result.courseScheduleReview;
           this.teachingMaterial = courseScheduleReview.teachingMaterial;
           this.song = courseScheduleReview.song;
           this.pronunciation = courseScheduleReview.pronunciation;
@@ -218,9 +236,9 @@ export default {
         }
       });
     } else {
-      getCourseInfoHead({ courseId: this.courseId }).then(res => {
+      getCourseInfoHead({ courseId: this.courseId }).then((res) => {
         if (res.data.code == 200) {
-          let result = res.data.data
+          let result = res.data.data;
           this.classTimer =
             result.classDate +
             result.startClassTime +
@@ -228,19 +246,19 @@ export default {
             result.endClassTime;
           this.subjectNames = result.subjectNames;
           this.classGroupName = result.classGroupName;
-          this.classType = result.courseScheduleType
+          this.classType = result.courseScheduleType;
         }
       });
     }
-    checkeIsAssignHomework({ courseScheduleId: this.courseId }).then(res => {
-      let result = res.data
-      if(result.code == 200) {
-        this.isAssignHomework = result.data.isAssignHomework
-        this.enableAssignHomework = result.data.enableAssignHomework
+    checkeIsAssignHomework({ courseScheduleId: this.courseId }).then((res) => {
+      let result = res.data;
+      if (result.code == 200) {
+        this.isAssignHomework = result.data.isAssignHomework;
+        this.enableAssignHomework = result.data.enableAssignHomework;
       } else {
-        this.$toast(result.msg)
+        this.$toast(result.msg);
       }
-    })
+    });
   },
   methods: {
     submitReview() {
@@ -257,7 +275,7 @@ export default {
         return;
       }
       // VIP课程是没有双向沟通的
-      if (!this.hasLiaison && this.classType != 'VIP') {
+      if (!this.hasLiaison && this.classType != "VIP") {
         this.$toast("请勾选双向沟通");
         return;
       }
@@ -271,13 +289,13 @@ export default {
         // homeWork: this.homeWork,
         hasLiaison: this.hasLiaison,
         handHomework: this.handHomework,
-        courseScheduleId: this.courseId
+        courseScheduleId: this.courseId,
       };
       if (this.reviewId) {
         obj.id = this.reviewId;
-        updateReviewInfo(obj).then(res => {
-          this.$toast("修改成功")
-          setTimeout(res => {
+        updateReviewInfo(obj).then((res) => {
+          this.$toast("修改成功");
+          setTimeout((res) => {
             if (this.isInside) {
               this.$router.replace({ path: "/manageEvaluation" });
             } else {
@@ -286,13 +304,13 @@ export default {
           }, 1000);
         });
       } else {
-        courseReviewAdd(obj).then(res => {
+        courseReviewAdd(obj).then((res) => {
           if (res.data.code == 200) {
-            if(this.enableAssignHomework) {
-              this.showWork = true
+            if (this.enableAssignHomework) {
+              this.showWork = true;
             } else {
               this.$toast("提交成功");
-              setTimeout(res => {
+              setTimeout((res) => {
                 if (this.isInside) {
                   this.$router.push({ path: "/manageEvaluation" });
                 } else {
@@ -305,33 +323,35 @@ export default {
       }
     },
     onWork(isAssignHomework) {
-      if(isAssignHomework == 1) {
-        this.$dialog.confirm({
-          message: '您课程所在周已经布置作业，是否继续布置?',
-          confirmButtonText: '布置作业'
-        })
-        .then(() => {
-          // on confirm
-          this.$router.replace({
-            path: '/arrangeWork',
-            query: {
-              courseId: this.courseId
-            }
+      if (isAssignHomework == 1) {
+        this.$dialog
+          .confirm({
+            message: "您课程所在周已经布置作业，是否继续布置?",
+            confirmButtonText: "布置作业",
+          })
+          .then(() => {
+            // on confirm
+            this.$router.replace({
+              path: "/arrangeWork",
+              query: {
+                courseId: this.courseId,
+              },
+            });
           })
-        })
-        .catch(() => {
-          // on cancel
-        })
+          .catch(() => {
+            // on cancel
+          });
       } else {
         this.$router.replace({
-          path: '/arrangeWork',
+          path: "/arrangeWork",
           query: {
-            courseId: this.courseId
-          }
-        })
+            courseId: this.courseId,
+          },
+        });
       }
     },
-    onClose() { // 关闭弹窗
+    onClose() {
+      // 关闭弹窗
       if (this.isInside) {
         this.$router.replace({ path: "/manageEvaluation" });
       } else {
@@ -346,11 +366,11 @@ export default {
           JSON.stringify({ api: "back" })
         );
       }
-    }
+    },
   },
   destroyed() {
-    this.$toast.clear()
-  }
+    this.$toast.clear();
+  },
 };
 </script>
 <style lang="less" scoped>
@@ -358,11 +378,11 @@ export default {
 
 /deep/.van-cell-group {
   margin-top: 0.15rem;
-  /deep/.van-cell {
-    padding: 0.14rem 0.16rem;
-    font-size: 16px;
-    line-height: .24rem;
-  }
+}
+/deep/.van-cell {
+  padding: 16px 16px;
+  font-size: 16px;
+  line-height: 0.24rem;
 }
 
 .title-item {
@@ -393,6 +413,7 @@ export default {
 }
 .textarea {
   flex-direction: column;
+  padding:16px .21rem;
   /deep/.van-cell__value {
     margin-top: 0.1rem;
     width: 100%;
@@ -404,7 +425,7 @@ export default {
 /deep/.van-radio-group {
   display: flex;
   justify-content: flex-end;
-  height: .24rem;
+  height: 0.24rem;
   /deep/.van-radio {
     margin-left: 0.18rem;
   }
@@ -414,21 +435,21 @@ export default {
 }
 /deep/.van-radio__icon--checked {
   .van-icon {
-    border-color: #14928a;
-    background: #14928a;
+    border-color: @mColor;
+    background: @mColor;
   }
 }
 .button-group {
-  margin: 0.3rem 0.26rem 0.2rem;
+  margin: 0.3rem .16rem 0.2rem;
   .van-button--primary {
     background: @mColor;
     border: 1px solid @mColor;
     font-size: 0.18rem;
-    height: .5rem;
-    line-height: .48rem;
+    height: 0.5rem;
+    line-height: 0.48rem;
   }
   &.btn-operation {
-    margin: 0.3rem 0.16rem 0.2rem;
+    margin: 0.3rem .16rem 0.2rem;
     display: flex;
     justify-content: space-around;
     button {
@@ -436,14 +457,15 @@ export default {
     }
   }
   .btn-plain {
-    color: #14928A;
-    background: #F3F4F8;
+    color:  @mColor;
+    background: #f3f4f8;
+    width: 3.2rem;
   }
 }
 
 .van-popup {
   width: 90%;
-  border-radius: .05rem;
+  border-radius: 0.05rem;
 }
 /deep/.van-popup__close-icon {
   color: #888;
@@ -453,29 +475,58 @@ export default {
   font-size: 24px;
   color: #888;
   position: absolute;
-  right: .1rem;
-  top: .1rem;
+  right: 0.1rem;
+  top: 0.1rem;
 }
 .popup_container {
   .content {
     text-align: center;
-    font-size: .15rem;
+    font-size: 0.15rem;
     color: #000;
-    padding-top: .5rem;
-    padding-bottom: .35rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.35rem;
   }
   .btn_group {
-    font-size: .14rem;
+    font-size: 0.14rem;
     color: #009688;
-    padding: .03rem .25rem .2rem;
+    padding: 0.03rem 0.25rem 0.2rem;
     display: flex;
     justify-content: space-between;
     span {
-      width: .8rem;
+      width: 0.8rem;
       text-align: center;
     }
   }
 }
-
-
+.start.van-cell {
+   padding:16px .21rem 0;
+  &:not(:last-child) {
+    &:after {
+      border-bottom: 1px solid transparent
+    }
+  }
+}
+.talk {
+  padding:16px .21rem;
+} 
+.evTitle {
+  padding: 16px .21rem 0;
+  color: #333;
+  font-weight: 500;
+}
+.dot {
+  width: 4px;
+  height: 0.17rem;
+  background: #01c1b5;
+  border-radius: 3px;
+  position: absolute;
+  z-index: 200;
+  top: 19px;
+  left: 0.12rem;
+}
+.van-cell--required{
+  &:before {
+    color:transparent;
+  }
+}
 </style>

src/views/audition/ManageEvaluation.vue

@@ -5,59 +5,98 @@
       <div class="searchDate">
         <div class="date startDate" @click="dateSection.status = true">
           开始
-          <span>{{dateSection.showStartDate}}</span>
-        </div>-
+          <span>{{ dateSection.showStartDate }}</span>
+        </div>
+        -
         <div class="date endDate" @click="dateEndSection.status = true">
           结束
-          <span>{{dateEndSection.showEndDate}}</span>
+          <span>{{ dateEndSection.showEndDate }}</span>
         </div>
       </div>
       <!-- <div class="searchMore">
                 筛选<i class="arrowDown"></i>
       </div>-->
-      <van-dropdown-menu active-color="#14928A">
+      <van-dropdown-menu active-color="#01C1B5">
         <van-dropdown-item title="筛选" ref="item" v-model="search.status">
           <div class="dropList">
             <div class="dropItem">
               <p class="dropTitle">课程类型</p>
-              <div class="radioGroup">
-                <span :class="search.type=='PRACTICE'?'actived':''" @click="search.type='PRACTICE'">网管课</span>
-                <span :class="search.type=='VIP'?'actived':''" @click="search.type='VIP'">VIP课</span>
-                <span :class="search.type==0?'actived':''" @click="search.type=0" style="margin-top: .08rem">全部</span>
+              <div class="radioGroup" id='courseType'>
+                <span
+                  :class="search.type == 'PRACTICE' ? 'actived' : ''"
+                  @click="search.type = 'PRACTICE'"
+                  >网管课</span
+                >
+                <span
+                  :class="search.type == 'VIP' ? 'actived' : ''"
+                  @click="search.type = 'VIP'"
+                  >VIP课</span
+                >
+                <span
+                  :class="search.type == 0 ? 'actived' : ''"
+                  @click="search.type = 0"
+                  >全部</span
+                >
               </div>
             </div>
             <div class="dropItem">
               <p class="dropTitle">评价进度</p>
               <div class="radioGroup">
-                <span :class="search.hasReview==0?'actived':''" @click="search.hasReview=0">待完成</span>
-                <span :class="search.hasReview==1?'actived':''" @click="search.hasReview=1">已完成</span>
+                <span
+                  :class="search.hasReview == 0 ? 'actived' : ''"
+                  @click="search.hasReview = 0"
+                  >待完成</span
+                >
+                <span
+                  :class="search.hasReview == 1 ? 'actived' : ''"
+                  @click="search.hasReview = 1"
+                  >已完成</span
+                >
               </div>
             </div>
             <div class="dropItem">
               <p class="dropTitle">提交作业</p>
               <div class="radioGroup">
                 <span
-                  :class="search.hasHandHomework==1?'actived':''"
-                  @click="search.hasHandHomework=1"
-                >是</span>
+                  :class="search.hasHandHomework == 1 ? 'actived' : ''"
+                  @click="search.hasHandHomework = 1"
+                  >是</span
+                >
                 <span
-                  :class="search.hasHandHomework==0?'actived':''"
-                  @click="search.hasHandHomework=0"
-                >否</span>
+                  :class="search.hasHandHomework == 0 ? 'actived' : ''"
+                  @click="search.hasHandHomework = 0"
+                  >否</span
+                >
               </div>
             </div>
             <div class="dropItem">
               <p class="dropTitle">完成双向沟通</p>
               <div class="radioGroup">
-                <span :class="search.hasLiaison==1?'actived':''" @click="search.hasLiaison=1">是</span>
-                <span :class="search.hasLiaison==0?'actived':''" @click="search.hasLiaison=0">否</span>
+                <span
+                  :class="search.hasLiaison == 1 ? 'actived' : ''"
+                  @click="search.hasLiaison = 1"
+                  >是</span
+                >
+                <span
+                  :class="search.hasLiaison == 0 ? 'actived' : ''"
+                  @click="search.hasLiaison = 0"
+                  >否</span
+                >
               </div>
             </div>
             <div class="dropItem">
               <p class="dropTitle">学生是否到课</p>
               <div class="radioGroup">
-                <span :class="search.hasArrived==1?'actived':''" @click="search.hasArrived=1">是</span>
-                <span :class="search.hasArrived==0?'actived':''" @click="search.hasArrived=0">否</span>
+                <span
+                  :class="search.hasArrived == 1 ? 'actived' : ''"
+                  @click="search.hasArrived = 1"
+                  >是</span
+                >
+                <span
+                  :class="search.hasArrived == 0 ? 'actived' : ''"
+                  @click="search.hasArrived = 0"
+                  >否</span
+                >
               </div>
             </div>
           </div>
@@ -69,31 +108,53 @@
       </van-dropdown-menu>
     </div>
     <div v-if="dataShow" key="data">
-      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList">
+      <van-list
+        v-model="loading"
+        :finished="finished"
+        finished-text="没有更多了"
+        @load="getList"
+      >
         <van-cell
-          v-for="(item,index) in courseList"
+          v-for="(item, index) in courseList"
           :key="index"
           class="cellGroup"
           :title="item.classDate | filterClass"
-          title-class="sectionTitle"
           value-class="sectionValue"
         >
+          <template slot="title">
+            <div class="titleWrap" style="word-break: break-all">
+              <img class="titleIcon" :src="getIcon(item.groupType)" alt="" />
+              <div class="">
+                <p class="content van-ellipsis courseName">
+                  {{ item.courseName }}
+                </p>
+                <p class="content van-ellipsis courseTime">
+                  {{ item.classDate | formatTimer }}
+                </p>
+              </div>
+            </div>
+
+            <!--  -->
+          </template>
+
           <template solt="default">
-            <p class="content van-ellipsis">{{ item.courseName }}</p>
             <van-button
               type="primary"
               round
               size="small"
-              v-if="item.reviewId==0"
+              v-if="item.reviewId == 0"
               @click="submitReview(item)"
-            >提交评价</van-button>
+              >提交评价</van-button
+            >
             <van-button
               type="primary"
-              round class="van-update"
+              round
+              class="van-update"
               size="small"
-              v-if="item.reviewId>0"
+              v-if="item.reviewId > 0"
               @click="submitReview(item)"
-            >修改评价</van-button>
+              >修改评价</van-button
+            >
           </template>
         </van-cell>
       </van-list>
@@ -130,10 +191,10 @@
   </div>
 </template>
 <script>
-import MHeader from '@/components/MHeader'
-import MEmpty from "@/components/MEmpty"
-import { browser }  from '@/common/common'
-import { getOnlineCourse } from "@/api/audition"
+import MHeader from "@/components/MHeader";
+import MEmpty from "@/components/MEmpty";
+import { browser } from "@/common/common";
+import { getOnlineCourse } from "@/api/audition";
 // SINGLE,MIX,HIGH,VIP,DEMO,COMPREHENSIVE,PRACTICE,ENLIGHTENMENT,TRAINING_SINGLE,TRAINING_MIX,CLASSROOM,COMM,HIGH_ONLINE,MUSIC_NETWORK
 export default {
   name: "teacherList",
@@ -146,14 +207,14 @@ export default {
         minDate: new Date(2020, 0, 1),
         maxDate: new Date(2025, 10, 1),
         currentDate: null,
-        showStartDate: null
+        showStartDate: null,
       },
       dateEndSection: {
         status: false,
         minDate: new Date(2020, 0, 1),
         maxDate: new Date(2025, 10, 1),
         currentDate: null,
-        showEndDate: null
+        showEndDate: null,
       },
       search: {
         status: false,
@@ -167,7 +228,14 @@ export default {
       loading: false,
       finished: false,
       dataShow: true, // 是否显示
-      page: 1
+      page: 1,
+      iconList: {
+        pIcon: require("@/assets/images/Pdot.png"),
+        mIcon: require("@/assets/images/Mdot.png"),
+        wIcon: require("@/assets/images/Wdot.png"),
+        vIcon: require("@/assets/images/Vdot.png"),
+        tIcon: require("@/assets/images/Tdot.png"),
+      },
     };
   },
   created() {
@@ -183,8 +251,8 @@ export default {
       localStorage.setItem("Authorization", decodeURI(params.Authorization));
       localStorage.setItem("userInfo", decodeURI(params.Authorization));
     }
-    if(browser().android || browser().iPhone) {
-      this.headerStatus = false
+    if (browser().android || browser().iPhone) {
+      this.headerStatus = false;
     }
     this.dateSection.currentDate = new Date();
     this.dateSection.showStartDate = this.timeFormat(
@@ -200,8 +268,12 @@ export default {
       this.dateSection.showStartDate = this.timeFormat(
         new Date(this.search.startTime.replace(/-/g, "/"))
       );
-      this.dateSection.currentDate = new Date(this.search.startTime.replace(/-/g, "/"))
-      this.dateEndSection.currentDate = new Date(this.search.endTime.replace(/-/g, "/"))
+      this.dateSection.currentDate = new Date(
+        this.search.startTime.replace(/-/g, "/")
+      );
+      this.dateEndSection.currentDate = new Date(
+        this.search.endTime.replace(/-/g, "/")
+      );
       this.dateEndSection.showEndDate = this.timeFormat(
         new Date(this.search.endTime.replace(/-/g, "/"))
       );
@@ -222,8 +294,8 @@ export default {
       this.dateSection.showStartDate = this.timeFormat(
         this.dateSection.currentDate
       );
-      this.dataShow = true
-      this.page = 1
+      this.dataShow = true;
+      this.page = 1;
       this.onRefresh();
       this.dateSection.status = false;
     },
@@ -231,8 +303,8 @@ export default {
       this.dateEndSection.showEndDate = this.timeFormat(
         this.dateEndSection.currentDate
       );
-      this.dataShow = true
-      this.page = 1
+      this.dataShow = true;
+      this.page = 1;
       this.onRefresh();
       this.dateEndSection.status = false;
     },
@@ -254,14 +326,14 @@ export default {
         hasHandHomework: null,
         hasLiaison: null,
         hasArrived: null,
-        type: null
+        type: null,
       };
     },
     submitInfo() {
       // 提交请求
       this.onRefresh();
-      this.dataShow = true
-      this.page = 1
+      this.dataShow = true;
+      this.page = 1;
       this.search.status = false;
       this.$refs.item.toggle();
     },
@@ -272,9 +344,9 @@ export default {
       (this.search.endTime =
         this.dateEndSection.showEndDate.replace(/\//g, "-") + " 23:59:59"),
         (this.search.page = this.page);
-      this.search.type = this.search.type ? this.search.type : null
+      this.search.type = this.search.type ? this.search.type : null;
       this.search.rows = 20;
-      getOnlineCourse(this.search).then(res => {
+      getOnlineCourse(this.search).then((res) => {
         let result = res.data;
         this.loading = false;
         if (result.code == 200) {
@@ -307,15 +379,25 @@ export default {
     submitReview(item) {
       this.$router.push({
         path: "/courseEvaluation",
-        query: { id: item.id, reviewId: item.reviewId, isInside: true }
+        query: { id: item.id, reviewId: item.reviewId, isInside: true },
       });
-    }
+    },
+    getIcon(type) {
+      let obj = {
+        MUSIC: this.iconList.mIcon,
+        VIP: this.iconList.vIcon,
+        DEMO: this.iconList.tIcon,
+        PRACTICE: this.iconList.pIcon,
+        COMM: this.iconList.wIcon,
+      };
+      return obj[type];
+    },
   },
   filters: {
     filterClass(val) {
       return val.substring(0, 10);
-    }
-  }
+    },
+  },
 };
 </script>
 <style lang="less" scoped>
@@ -324,7 +406,7 @@ export default {
   min-height: 100vh;
   overflow-y: auto;
   overflow-x: hidden;
-  background-color: #F3F4F8;
+  background-color: #f3f4f8;
 }
 /deep/.van-dropdown-item__content {
   height: 100%;
@@ -335,7 +417,7 @@ export default {
   justify-content: space-between;
   background: #fff;
   margin-bottom: 0.12rem;
-  padding: .1rem 0.16rem;
+  padding: 0.1rem 0.16rem;
   align-items: center;
 
   .searchDate {
@@ -387,16 +469,16 @@ export default {
       padding: 0.12rem 0;
     }
     .btn-reset {
-      background-color: #e1f6f4;
-      color: #14928a;
+      background-color: #EEEFF3;
+      color: @mColor;
     }
     .btn-sure {
-      background-color: #14928a;
+      background-color: @mColor;
       color: #fff;
     }
   }
   .dropList {
-    margin-bottom: .55rem;
+    margin-bottom: 0.55rem;
   }
   .dropItem {
     padding: 0.1rem 0.16rem;
@@ -404,32 +486,40 @@ export default {
       font-size: 0.17rem;
       color: #1a1a1a;
     }
+    #courseType {
+      span {
+        width: 1.02rem;
+      }
+    }
     .radioGroup {
       display: flex;
       justify-content: space-between;
-      padding-top: .08rem;
+      padding-top: 0.08rem;
       flex-wrap: wrap;
       span {
         color: #000000;
-        background-color: #f4f4f4;
+        background-color: #ffffff;
         width: 48%;
-        padding: .08rem 0;
+        padding: 0.08rem 0;
         text-align: center;
         border-radius: 2px;
+         border: 1px solid #E2E0E0;
         &.actived {
-          color: #14928a;
-          background: url("../../assets/images/audition/icon_check.png")
-            no-repeat bottom right #e4f6f5;
-          background-size: 0.2rem;
+          color: @mColor;
+          // background: url("../../assets/images/audition/icon_check.png")
+          //   no-repeat bottom right #e4f6f5;
+          // background-size: 0.2rem;
+          border: 1px solid @mColor;
+          background: #ffffff;
         }
       }
     }
   }
 }
 .cellGroup {
-  padding: 0.16rem;
-  font-size: .14rem;
-  line-height: .24rem;
+  // padding: 0.16rem;
+  font-size: 0.14rem;
+  line-height: 0.24rem;
 }
 .sectionTitle {
   font-size: 0.16rem;
@@ -440,31 +530,26 @@ export default {
 .sectionValue {
   display: flex;
   width: 70%;
-  flex: 1 auto;
-  justify-content: space-between;
+  justify-content: flex-end;
   align-items: center;
   height: auto !important;
-  .content {
-    font-size: 0.17rem;
-    color: #1a1a1a;
-  }
+
   .van-button {
     font-size: 0.14rem;
-    background-color: #14928a;
-    border-color: #14928a;
+    background-color: @mColor;
+    border-color: @mColor;
     padding: 0 0.12rem;
     min-width: 0.88rem;
-    height: .3rem;
+    height: 0.3rem;
     &.van-update {
       background-color: #fff;
-      color: #14928a;
+      color: @mColor;
     }
   }
 }
 /deep/.van-cell__title {
   font-size: 0.14rem;
   color: @mFontColor;
-  flex: 1 auto;
 }
 .logo {
   width: 0.35rem;
@@ -504,4 +589,37 @@ export default {
 /deep/.van-dropdown-menu__bar {
   box-shadow: none;
 }
+.titleWrap {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  .content {
+    width: 2rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 0.17rem;
+    color: #1a1a1a;
+  }
+  .courseName {
+    font-size: 0.16rem;
+    color: #1a1a1a;
+  }
+  .courseTime {
+    font-size: 0.13rem;
+    color: #666;
+  }
+}
+.titleIcon {
+  width: 0.42rem;
+  height: 0.42rem;
+  margin-right: 0.1rem;
+}
+/deep/.van-picker__cancel,
+/deep/.van-picker__confirm {
+  color: @mColor;
+}
+
+/deep/.van-popup--bottom {
+  border-radius: 0.1rem 0.1rem 0px 0px;
+}
 </style>

src/views/teacher/PeriodAdjust.vue

@@ -1,323 +1,520 @@
 <template>
-    <div class="periodadjust">
-        <div :class="[dataShow ? 'container' : '']">
-            <!-- <m-header /> -->
-            <m-calendar @onSelectDay="onSelectDay" :dayList="getMonthDay" @onChangeMonth="onChangeMonth" />
-            <van-radio-group v-if="dataShow" key="data" v-model="radioSelect">
-                <van-cell-group v-for="(item, index) in dataList" :key="index">
-                    <van-cell icon="underway-o" :center="true" @click="onCheckRadio(item)">
-                        <!-- <template slot="default"><span>到课:{{item.studentNum}}/{{item.totalStudentNum}}</span><span>请假:{{item.leaveStudentNum}}</span></template> -->
-                        <template slot="default">{{ item.signInStatus ? '已签到' : '未签到' }}</template>
-                        <template slot="title">{{item.startClassTime | formatDate}}-{{item.endClassTime | formatDate}}</template>
-                    </van-cell>
-                    <van-cell class="input-cell" title-class="title-content" value-class="value-content" :center="true" @click="onCheckRadio(item)">
-                        <template slot="default">
-                            <van-radio ref="radioes" :disabled="radioDisabled" :name="item.id"></van-radio>
-                        </template>
-                        <template slot="title">
-                            <p style="word-break: break-all;">{{ item.name }}</p>
-                        </template>
-                        <template slot="label">{{ item.teachMode |  teachModeStatus}} &nbsp; 主讲老师：{{ item.teacherName }}</template>
-                    </van-cell>
-                </van-cell-group>
-            </van-radio-group>
-            <m-empty v-else key="data" />
-        </div>
-        <van-sticky v-if="dataShow">
-            <div class="button-group">
-                <van-button type="default" @click="onDateChange" size="large">课时调整</van-button>
-                <van-button type="primary" @click="onSubmit" size="large">去换课</van-button>
-            </div>
-        </van-sticky>
-        <van-popup v-model="dataForm.status" position="bottom">
-            <van-datetime-picker v-model="dataForm.currentDate" type="datetime" :min-date="dataForm.minDate" :max-date="dataForm.maxDate" :formatter="formatter" @cancel="dataForm.status = false" @confirm="onCurrentConfirm" />
-        </van-popup>
+  <div class="periodadjust">
+    <div :class="[dataShow ? 'container' : '']">
+      <!-- <m-header /> -->
+      <m-calendar
+        @onSelectDay="onSelectDay"
+        :dayList="getMonthDay"
+        @onChangeMonth="onChangeMonth"
+      />
+      <van-radio-group v-if="dataShow" key="data" v-model="radioSelect" class="cellList">
+        <van-cell-group v-for="(item, index) in dataList" :key="index">
+          <van-cell @click="onCheckRadio(item)" class="titleCell">
+    
+            <template slot="default">
+              <div class="signImgBox">
+                <img
+                  class="signImg"
+                  :src="getSignInIcon(item.isSignIn)"
+                  alt=""
+                />
+              </div>
+            </template>
+            <template slot="title">
+              <div class="classTitleWrap" style="word-break: break-all">
+                <img
+                  class="teacherModelImg"
+                  :src="getTeacherImg(item.teachMode)"
+                  alt=""
+                />
+                <img class="courseImg" :src="squrtList.squrt2" alt="" />
+                {{ item.name }}
+              </div>
+
+              <!--  -->
+            </template>
+          </van-cell>
+          <van-cell>
+            <template slot="title">
+              <p
+                class="studentTitle"
+                style="word-break: break-all"
+                v-if="item.schoolName"
+              >
+                上课地点 : &nbsp;{{ item.schoolName }}
+              </p>
+              <p class="studentTitle" style="word-break: break-all">
+                上课学生 : &nbsp;{{ item.studentNames }}
+              </p>
+            </template>
+          </van-cell>
+          <van-cell
+            class="input-cell"
+            title-class="title-content"
+            value-class="value-content"
+            :center="true"
+            @click="onCheckRadio(item)"
+          >
+            <template slot="title">
+              <div class="chioseWrap">
+                <img class="clockIcon" :src="squrtList.squrt8" alt="" />
+                <p class="timer">
+                  {{ item.startClassTime | formatDate }}-{{
+                    item.endClassTime | formatDate
+                  }}
+                </p>
+              </div>
+            </template>
+            <template slot="default">
+              <van-radio
+                ref="radioes"
+                :disabled="radioDisabled"
+                :name="item.id"
+              ></van-radio>
+            </template>
+          </van-cell>
+        </van-cell-group>
+      </van-radio-group>
+      <m-empty v-else key="data" />
     </div>
+    <van-sticky v-if="dataShow">
+      <div class="button-group">
+        <van-button type="default" class="changeBtn" @click="onDateChange" size="large"
+          >课时调整</van-button
+        >
+        <van-button type="primary" @click="onSubmit" size="large"
+          >去换课</van-button
+        >
+      </div> 
+    </van-sticky>
+    <van-popup v-model="dataForm.status" position="bottom">
+      <van-datetime-picker
+        v-model="dataForm.currentDate"
+        type="datetime"
+        :min-date="dataForm.minDate"
+        :max-date="dataForm.maxDate"
+        :formatter="formatter"
+        @cancel="dataForm.status = false"
+        @confirm="onCurrentConfirm"
+      />
+    </van-popup>
+  </div>
 </template>
 <script>
 /* eslint-disable */
 // import MHeader from '@/components/MHeader' courseSwap
-import MCalendar from '@/components/MCalendar'
-import MEmpty from '@/components/MEmpty'
-import dayjs from 'dayjs'
-import { browser }  from '@/common/common'
-import { getCourseSchedulesWithDate,
-    getCourseScheduleDateByMonth,
-    classStartDateAdjust } from '@/api/teacher'
-import setLoading from '@/utils/loading'
+import MCalendar from "@/components/MCalendar";
+import MEmpty from "@/components/MEmpty";
+import dayjs from "dayjs";
+import { browser } from "@/common/common";
+import {
+  getCourseSchedulesWithDate,
+  getCourseScheduleDateByMonth,
+  classStartDateAdjust,
+} from "@/api/teacher";
+import setLoading from "@/utils/loading";
 export default {
-    name: 'periodadjust',
-    components: { MCalendar, MEmpty },
-    data() {
-        return {
-            dataForm: { // 时间下拉框
-                status: false,
-                minDate: new Date(2018, 0, 1),
-                maxDate: new Date(2025, 10, 1),
-                currentDate: new Date()
-            },
-            radioSelect: null,
-            radioSelectList: [], // 选中的列表
-            dataList: [],
-            dataShow: true, // 是否有数据
-            radioDisabled: true, // 今天或今天之前的数据禁用
-            getMonthDay: [], // 当月有月份列表
-        }
+  name: "periodadjust",
+  components: { MCalendar, MEmpty },
+  data() {
+    return {
+      dataForm: {
+        // 时间下拉框
+        status: false,
+        minDate: new Date(2018, 0, 1),
+        maxDate: new Date(2025, 10, 1),
+        currentDate: new Date(),
+      },
+      radioSelect: null,
+      radioSelectList: [], // 选中的列表
+      dataList: [],
+      dataShow: true, // 是否有数据
+      radioDisabled: true, // 今天或今天之前的数据禁用
+      getMonthDay: [], // 当月有月份列表
+      squrtList: {
+        squrt2: require("@/assets/images/squrt2.png"),
+        squrt3: require("@/assets/images/squrt3.png"),
+        squrt4: require("@/assets/images/squrt4.png"),
+        squrt5: require("@/assets/images/squrt5.png"),
+        squrt6: require("@/assets/images/squrt6.png"),
+        squrt7: require("@/assets/images/squrt7.png"),
+        squrt8: require("@/assets/images/squrt8.png"),
+      },
+    };
+  },
+  created() {},
+  mounted() {
+    let params = this.$route.query;
+    if (params.Authorization) {
+      localStorage.setItem("Authorization", decodeURI(params.Authorization));
+      localStorage.setItem("userInfo", decodeURI(params.Authorization));
+    }
+    document.title = "课程调整";
+    let toDay = this.getFormartDate(new Date());
+    this.getCourseDate(toDay);
+    this.getCourseMonth(toDay);
+  },
+  methods: {
+    onSelectDay(value) {
+      if (
+        new Date(this.getFormartDateIOS(new Date())) >=
+        new Date(this.getFormartDateIOS(value))
+      ) {
+        this.radioDisabled = true;
+      } else {
+        this.radioDisabled = false;
+      }
+      this.getCourseDate(this.getFormartDate(value));
+    },
+    onChangeMonth(value) {
+      this.getCourseMonth(dayjs(value).format("YYYY-MM-DD"));
     },
-    created() {
+    onCheckRadio(item) {
+      console.log("点击", this.radioDisabled);
+      // 单选按钮选中
+      if (this.radioDisabled) return;
+      this.radioSelect = item.id;
+      this.radioSelectList = item;
     },
-    mounted() {
-        let params = this.$route.query
-        if(params.Authorization) {
-            localStorage.setItem('Authorization', decodeURI(params.Authorization))
-            localStorage.setItem('userInfo', decodeURI(params.Authorization))
+    async getCourseMonth(month) {
+      await getCourseScheduleDateByMonth({ month: month, type: "VIP" }).then(
+        (res) => {
+          let result = res.data;
+          if (result.code == 200) {
+            this.getMonthDay = [];
+            result.data.forEach((item) => {
+              this.getMonthDay.push(dayjs(item).format("DD"));
+            });
+            this.isCalendar = true;
+          }
         }
-        document.title = '课程调整'
-        let toDay = this.getFormartDate(new Date())
-        this.getCourseDate(toDay)
-        this.getCourseMonth(toDay)
+      );
     },
-    methods: {
-        onSelectDay(value) {
-            if(new Date(this.getFormartDateIOS(new Date())) >= new Date(this.getFormartDateIOS(value))) {
-                this.radioDisabled = true
-            } else {
-                this.radioDisabled = false
-            }
-            this.getCourseDate(this.getFormartDate(value))
-        },
-        onChangeMonth(value) {
-            this.getCourseMonth(dayjs(value).format('YYYY-MM-DD'))
-        },
-        onCheckRadio(item) { // 单选按钮选中
-            if(this.radioDisabled) return
-            this.radioSelect = item.id
-            this.radioSelectList = item
-        },
-        async getCourseMonth(month) {
-            await getCourseScheduleDateByMonth({ month: month, type: 'VIP' }).then(res => {
-                let result = res.data
-                if(result.code == 200) {
-                    this.getMonthDay = []
-                    result.data.forEach(item => {
-                        this.getMonthDay.push(dayjs(item).format('DD'))
-                    })
-                    this.isCalendar = true
-                }
-            })
-        },
-        async getCourseDate(date) {
-            setLoading(true)
-            try {
-                await getCourseSchedulesWithDate({ date: date, type: 'VIP' }).then(res => {
-                    let result = res.data
-                    if(result.code == 200 && result.data) {
-                        this.dataList = result.data.rows
-                        this.dataShow = result.data.rows.length > 0 ? true : false
-                    }
-                    setLoading(false)
-                })
-            } catch(err) {
-                setLoading(false)
+    async getCourseDate(date) {
+      setLoading(true);
+      try {
+        await getCourseSchedulesWithDate({ date: date, type: "VIP" }).then(
+          (res) => {
+            let result = res.data;
+            if (result.code == 200 && result.data) {
+              this.dataList = result.data.rows.map((item) => {
+                let studentNames = item.students.map((stu) => {
+                  return stu.userName;
+                });
+                return { ...item, studentNames: studentNames.join(",") };
+              });
+              this.dataShow = result.data.rows.length > 0 ? true : false;
             }
-        },
-        onSubmit() {
-            if(!this.radioSelect) {
-                this.$toast('请选择需要交换的课程')
-                return
-            }
-            let dataInfo = this.radioSelectList
-            let classDate = dataInfo.classDate.split(' ')[0]
-            let startTime = dataInfo.startClassTime.split(' ')[1]
+            setLoading(false);
+          }
+        );
+      } catch (err) {
+        setLoading(false);
+      }
+    },
+    onSubmit() {
+      if (!this.radioSelect) {
+        this.$toast("请选择需要交换的课程");
+        return;
+      }
+      let dataInfo = this.radioSelectList;
+      let classDate = dataInfo.classDate.split(" ")[0];
+      let startTime = dataInfo.startClassTime.split(" ")[1];
 
-            // 确认选择
-            this.$router.push({
-                path: '/PeriodChange',
-                query: {
-                    checkId: this.radioSelect,
-                    classDate: classDate,
-                    startTime: startTime,
-                    name: dataInfo.name
-                }
-            })
-        },
-        getFormartDateIOS(date) {
-            let checkDate = new Date(date)
-            let checkDay = checkDate.getFullYear() + '/' + (checkDate.getMonth() + 1) + '/' + checkDate.getDate()
-            return checkDay
+      // 确认选择
+      this.$router.push({
+        path: "/PeriodChange",
+        query: {
+          checkId: this.radioSelect,
+          classDate: classDate,
+          startTime: startTime,
+          name: dataInfo.name,
         },
-        getFormartDate(date) {
-            let checkDate = new Date(date)
-            let checkDay = checkDate.getFullYear() + '-' + (checkDate.getMonth() + 1) + '-' + checkDate.getDate()
-            return checkDay
-        },
-        onDateChange() {
-            if(!this.radioSelect) {
-                this.$toast('请选择需要调整的课程')
-                return
-            }
-            this.dataForm.status = true
-        },
-        onCurrentConfirm(value) { // 课时调整
-            let selectDate = []
-            this.dataList.forEach(item => {
-                if(item.id == this.radioSelect) {
-                    selectDate = item
-                }
-            })
+      });
+    },
+    getFormartDateIOS(date) {
+      let checkDate = new Date(date);
+      let checkDay =
+        checkDate.getFullYear() +
+        "/" +
+        (checkDate.getMonth() + 1) +
+        "/" +
+        checkDate.getDate();
+      return checkDay;
+    },
+    getFormartDate(date) {
+      let checkDate = new Date(date);
+      let checkDay =
+        checkDate.getFullYear() +
+        "-" +
+        (checkDate.getMonth() + 1) +
+        "-" +
+        checkDate.getDate();
+      return checkDay;
+    },
+    onDateChange() {
+      if (!this.radioSelect) {
+        this.$toast("请选择需要调整的课程");
+        return;
+      }
+      this.dataForm.status = true;
+    },
+    onCurrentConfirm(value) {
+      // 课时调整
+      let selectDate = [];
+      this.dataList.forEach((item) => {
+        if (item.id == this.radioSelect) {
+          selectDate = item;
+        }
+      });
 
-            let startStr = '2019/12/18 ' + this.getDateInfo(selectDate.startClassTime),
-                endStr = '2019/12/18 ' + this.getDateInfo(selectDate.endClassTime)
-            let startDate = new Date(startStr),
-                endDate = new Date(endStr)
-            let m = parseInt(Math.abs(endDate.getTime() - startDate.getTime()) / 1000 / 60)
-            let currentStartDate = new Date(value),
-                currentEndDate = new Date(value)
+      let startStr =
+          "2019/12/18 " + this.getDateInfo(selectDate.startClassTime),
+        endStr = "2019/12/18 " + this.getDateInfo(selectDate.endClassTime);
+      let startDate = new Date(startStr),
+        endDate = new Date(endStr);
+      let m = parseInt(
+        Math.abs(endDate.getTime() - startDate.getTime()) / 1000 / 60
+      );
+      let currentStartDate = new Date(value),
+        currentEndDate = new Date(value);
 
-            currentEndDate.setMinutes(currentStartDate.getMinutes() + m)
-            if(currentStartDate.toDateString() !== currentEndDate.toDateString()) {
-                this.$toast("课时调整不允许跨天调整")
-                return
-            }
-            classStartDateAdjust({
-                actualTeacherId: selectDate.actualTeacherId,
-                id: this.radioSelect,
-                classDate: this.getFormartDate(currentStartDate),
-                startClassTimeStr: this.getDateInfo(currentStartDate),
-                endClassTimeStr: this.getDateInfo(currentEndDate)
-            }).then(res => {
-                let result = res.data
-                if(result.code == 200) {
-                    this.$toast('调整成功')
-                    setTimeout(() => {
-                        if(browser().iPhone) {
-                            window.webkit.messageHandlers.DAYA.postMessage(JSON.stringify({api: 'back'}))
-                        } else if(browser().android) {
-                            DAYA.postMessage(JSON.stringify({api: 'back'}))
-                        } else {
-                            this.$router.push('/business')
-                        }
-                    }, 500)
-                } else {
-                    this.$toast(result.msg)
-                }
-            })
-        },
-        getDateInfo(value) {
-            let tempValue = value
-            if(typeof value !== 'object') {
-                tempValue = value.replace(/-/ig, '/')
-            }
-            let d = new Date(tempValue)
-            let hour = d.getHours() >= 10 ? d.getHours() : '0' + d.getHours()
-            let minute = d.getMinutes() >= 10 ? d.getMinutes() : '0' + d.getMinutes()
-            return hour + ':' + minute + ':00'
-        },
-        formatter(type, value) {
-            if (type === 'year') {
-                return `${value}年`;
-            } else if (type === 'month') {
-                return `${value}月`
-            } else if (type === 'day') {
-                return `${value}日`
-            } else if (type === 'hour') {
-                return `${value}时`
-            } else if (type === 'minute') {
-                return `${value}分`
+      currentEndDate.setMinutes(currentStartDate.getMinutes() + m);
+      if (currentStartDate.toDateString() !== currentEndDate.toDateString()) {
+        this.$toast("课时调整不允许跨天调整");
+        return;
+      }
+      classStartDateAdjust({
+        actualTeacherId: selectDate.actualTeacherId,
+        id: this.radioSelect,
+        classDate: this.getFormartDate(currentStartDate),
+        startClassTimeStr: this.getDateInfo(currentStartDate),
+        endClassTimeStr: this.getDateInfo(currentEndDate),
+      }).then((res) => {
+        let result = res.data;
+        if (result.code == 200) {
+          this.$toast("调整成功");
+          setTimeout(() => {
+            if (browser().iPhone) {
+              window.webkit.messageHandlers.DAYA.postMessage(
+                JSON.stringify({ api: "back" })
+              );
+            } else if (browser().android) {
+              DAYA.postMessage(JSON.stringify({ api: "back" }));
+            } else {
+              this.$router.push("/business");
             }
-            return value;
-        },
-    }
-}
+          }, 500);
+        } else {
+          this.$toast(result.msg);
+        }
+      });
+    },
+    getDateInfo(value) {
+      let tempValue = value;
+      if (typeof value !== "object") {
+        tempValue = value.replace(/-/gi, "/");
+      }
+      let d = new Date(tempValue);
+      let hour = d.getHours() >= 10 ? d.getHours() : "0" + d.getHours();
+      let minute = d.getMinutes() >= 10 ? d.getMinutes() : "0" + d.getMinutes();
+      return hour + ":" + minute + ":00";
+    },
+    formatter(type, value) {
+      if (type === "year") {
+        return `${value}年`;
+      } else if (type === "month") {
+        return `${value}月`;
+      } else if (type === "day") {
+        return `${value}日`;
+      } else if (type === "hour") {
+        return `${value}时`;
+      } else if (type === "minute") {
+        return `${value}分`;
+      }
+      return value;
+    },
+    getSignInIcon(status) {
+      if (status == 1) {
+        return this.squrtList.squrt3;
+      } else if (status == 0) {
+        return this.squrtList.squrt5;
+      } else {
+        return this.squrtList.squrt4;
+      }
+    },
+    getTeacherImg(mode) {
+      if (mode == "ONLINE") {
+        return this.squrtList.squrt6;
+      } else {
+        return this.squrtList.squrt7;
+      }
+    },
+  },
+};
 </script>
 <style lang='less' scoped>
 @import url("../../assets/commonLess/variable.less");
 .periodadjust {
-    // min-height: 100vh;
-    height: 100vh;
+  min-height: 100vh;
+//   height: 100vh;
+  position: relative;
+  background-color: #f3f4f8;
+  .container {
+    min-height: calc(100vh - 0.5rem);
+    overflow-y: auto;
+    overflow-x: hidden;
     position: relative;
-    background-color: #F3F4F8;
-    .container {
-        min-height: calc(100vh - .5rem);
-        overflow-y: auto;
-        overflow-x: hidden;
-        position: relative;
+  }
+  .button-group {
+    width: 100%;
+    // position: absolute;
+    // bottom: 0;
+    // left: 0;
+    // z-index: 99;
+    .van-button {
+      font-size: 0.16rem;
+      width: 50%;
+      height: 0.5rem;
+      line-height: 0.48rem;
     }
-    .button-group {
-        width: 100%;
-        // position: absolute;
-        // bottom: 0;
-        // left: 0;
-        // z-index: 99;
-        .van-button {
-            font-size: .16rem;
-            width: 50%;
-            height: .5rem;
-            line-height: .48rem;
-        }
-        .van-button--primary {
-            background: @mColor;
-            border-color: @mColor;
-        }
+    .van-button--primary {
+      background: @mColor;
+      border-color: @mColor;
     }
+  }
+  .van-cell__title {
+    width: 2.58rem;
+    -webkit-box-flex: auto;
+    -webkit-flex: auto;
+    flex: auto;
+    font-size: 0.18rem;
+    color: #333;
+    font-weight: 500;
+  }
 }
 /deep/.van-icon-underway-o {
-    font-size: .18rem;
+  font-size: 0.18rem;
 }
 /deep/.van-cell {
-    line-height: inherit;
+  line-height: inherit;
 }
 /deep/.van-cell__title {
-    font-size: .16rem;
-    color: @mFontColor;
+  font-size: 0.16rem;
+  color: @mFontColor;
 }
 /deep/.van-cell-group {
-    margin-top: .05rem;
+  margin-top: 0.05rem;
+  border-radius: 0.1rem;
+  margin: 0.1rem 0.12rem 0;
+  overflow: hidden;
 }
 .title-content {
-    flex: 1 auto;
-    font-weight: bold;
-    .van-cell__label {
-        font-weight: 400;
-        margin-top: .06rem;
-        display: flex;
-        align-items: center;
-    }
-    .van-icon-location {
-        margin-right: .05rem;
-    }
+  flex: 1 auto;
+  font-weight: bold;
+  .van-cell__label {
+    font-weight: 400;
+    margin-top: 0.06rem;
+    display: flex;
+    align-items: center;
+  }
+  .van-icon-location {
+    margin-right: 0.05rem;
+  }
 }
 .value-content {
-    width: 50px;
+  width: 50px;
 }
-/deep/.van-cell__value, /deep/.van-cell__label {
-    color: #444;
-    font-size: .14rem;
-    flex: 1 auto;
-    span {
-        padding-right: .1rem;
-    }
+/deep/.van-cell__value,
+/deep/.van-cell__label {
+  color: #444;
+  font-size: 0.14rem;
+  flex: 1 auto;
+  span {
+    padding-right: 0.1rem;
+  }
 }
 
 .input-cell {
-    padding: .12rem .16rem .2rem;
-    .van-radio {
-        justify-content: flex-end;
-    }
+  padding: 0.12rem 0.16rem 0.2rem;
+  .van-radio {
+    justify-content: flex-end;
+  }
 }
 /deep/.van-radio__icon--disabled .van-icon {
-    border-color: transparent;
-    background: #fff;
+  border-color: #fff;
+  background: #fff;
 }
 // /deep/.van-radio__icon .van-icon {
-    // border-color: transparent;
-    // background: #fff;
+// border-color: transparent;
+// background: #fff;
 // }
 /deep/.van-radio__icon--checked .van-icon {
-    background: @orangeColor;
-    border-color: @orangeColor;
+  background: @mColor;
+  border-color: @mColor;
 }
 /deep/.icon {
-    margin-top: .3rem;
+  margin-top: 0.3rem;
+}
+.signImgBox {
+  .signImg {
+    margin-top: 0.04rem;
+    width: 0.48rem;
+    height: 0.22rem;
+  }
+}
+.teacherModelImg {
+  width: 0.35rem;
+  height: 0.2rem;
+  margin-right: 0.05rem;
+  position: absolute;
+  left: 0;
+  top: 0.04rem;
+}
+.courseImg {
+  width: 0.42rem;
+  height: 0.18rem;
+  position: absolute;
+  left: 0.4rem;
+  top: 0.05rem;
+}
+.classTitleWrap {
+  position: relative;
+  text-indent: 0.88rem;
+  line-height: 0.28rem;
+  // align-items: center;
+}
+.titleCell {
+  padding-bottom: 0 !important;
+  &:after {
+    border-bottom: none;
+  }
+}
+.studentTitle {
+  font-size: 0.13rem;
+  color: #666;
+  line-height: 0.19rem;
+  margin-bottom: 5px;
+}
+.clockIcon {
+  width: 0.16rem;
+  height: 0.16rem;
+}
+.chioseWrap {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  img {
+    position: relative;
+    top: -0.02rem;
+    margin-right: 0.08rem;
+  }
+}
+.cellList {
+    margin-bottom: 20px;
+}
+.changeBtn {
+    background-color: #EEEFF3;
 }
 </style>

src/views/teacher/PeriodChange.vue

@@ -1,263 +1,423 @@
 <template>
-    <div class="periodchange">
-        <div :class="[dataShow ? 'container' : '']">
-            <!-- <m-header /> -->
-            <m-calendar @onSelectDay="onSelectDay" :dayList="getMonthDay" @onChangeMonth="onChangeMonth" />
+  <div class="periodchange">
+    <div :class="[dataShow ? 'container' : '']">
+      <!-- <m-header /> -->
+      <m-calendar
+        @onSelectDay="onSelectDay"
+        :dayList="getMonthDay"
+        @onChangeMonth="onChangeMonth"
+      />
 
-            <van-radio-group v-if="dataShow" key="data" v-model="radioSelect">
-                <van-cell-group v-for="(item, index) in dataList" :key="index">
-                    <van-cell icon="underway-o" :center="true" @click="onCheckRadio(item)">
-                        <template slot="default">{{ item.signInStatus ? '已签到' : '未签到' }}</template>
-                        <template slot="title">{{item.startClassTime | formatDate}}-{{item.endClassTime | formatDate}}</template>
-                    </van-cell>
-                    <van-cell class="input-cell" title-class="title-content" :center="true" @click="onCheckRadio(item)">
-                        <template slot="default">
-                            <van-radio ref="radioes" :disabled="radioDisabled" :name="item.id"></van-radio>
-                        </template>
-                        <template slot="title">{{ item.name }}</template>
-                        <template slot="label">{{ item.teachMode |  teachModeStatus}} &nbsp; 主讲老师：{{ item.teacherName }}</template>
-                    </van-cell>
-                </van-cell-group>
-            </van-radio-group>
-            <m-empty v-else key="data" />
-        </div>
-        <van-sticky v-if="dataShow">
-            <div class="button-group">
-                <van-button type="primary" @click="onChangeClass" size="large">确认交换</van-button>
-            </div>
-        </van-sticky>
+      <van-radio-group v-if="dataShow" key="data" v-model="radioSelect" class="cellList">
+        <van-cell-group v-for="(item, index) in dataList" :key="index">
+          <van-cell @click="onCheckRadio(item)" class="titleCell">
+            <template slot="default">
+              <div class="signImgBox">
+                <img
+                  class="signImg"
+                  :src="getSignInIcon(item.isSignIn)"
+                  alt=""
+                />
+              </div>
+            </template>
+            <template slot="title">
+              <div class="classTitleWrap" style="word-break: break-all">
+                <img
+                  class="teacherModelImg"
+                  :src="getTeacherImg(item.teachMode)"
+                  alt=""
+                />
+                <img class="courseImg" :src="squrtList.squrt2" alt="" />
+                {{ item.name }}
+              </div>
 
+              <!--  -->
+            </template>
+          </van-cell>
+          <van-cell>
+            <template slot="title">
+              <p
+                class="studentTitle"
+                style="word-break: break-all"
+                v-if="item.schoolName"
+              >
+                上课地点 : &nbsp;{{ item.schoolName }}
+              </p>
+              <p class="studentTitle" style="word-break: break-all">
+                上课学生 : &nbsp;{{ item.studentNames }}
+              </p>
+            </template>
+          </van-cell>
+          <van-cell
+            class="input-cell"
+            title-class="title-content"
+            value-class="value-content"
+            :center="true"
+            @click="onCheckRadio(item)"
+          >
+            <template slot="title">
+              <div class="chioseWrap">
+                <img class="clockIcon" :src="squrtList.squrt8" alt="" />
+                <p class="timer">
+                  {{ item.startClassTime | formatDate }}-{{
+                    item.endClassTime | formatDate
+                  }}
+                </p>
+              </div>
+            </template>
+            <template slot="default">
+              <van-radio
+                ref="radioes"
+                :disabled="radioDisabled"
+                :name="item.id"
+              ></van-radio>
+            </template>
+          </van-cell>
+        </van-cell-group>
+      </van-radio-group>
+      <m-empty v-else key="data" />
     </div>
+    <van-sticky v-if="dataShow">
+      <div class="button-group">
+        <van-button type="primary" @click="onChangeClass" size="large"
+          >确认交换</van-button
+        >
+      </div>
+    </van-sticky>
+  </div>
 </template>
 <script>
 /* eslint-disable */
 // import MHeader from '@/components/MHeader'
-import MCalendar from '@/components/MCalendar'
-import MEmpty from '@/components/MEmpty'
-import dayjs from 'dayjs'
-import { browser }  from '@/common/common'
-import { getCourseSchedulesWithDate,
-    getCourseScheduleDateByMonth, courseSwap } from '@/api/teacher'
-import setLoading from '@/utils/loading'
+import MCalendar from "@/components/MCalendar";
+import MEmpty from "@/components/MEmpty";
+import dayjs from "dayjs";
+import { browser } from "@/common/common";
+import {
+  getCourseSchedulesWithDate,
+  getCourseScheduleDateByMonth,
+  courseSwap,
+} from "@/api/teacher";
+import setLoading from "@/utils/loading";
 export default {
-    name: 'periodchange',
-    components: { MCalendar, MEmpty },
-    data() {
-        return {
-            dataShow: true,
-            dataList: [],
-            radioSelect: null,
-            radioSelectList: [], // 选中的列表
-            radioDisabled: true, // 今天或今天之前的数据禁用
-            getMonthDay: []
-        }
-    },
-    created() {
-        
-        // let toDay = this.getFormartDate(new Date())
-        // this.getCourseDate(toDay)
+  name: "periodchange",
+  components: { MCalendar, MEmpty },
+  data() {
+    return {
+      dataShow: true,
+      dataList: [],
+      radioSelect: null,
+      radioSelectList: [], // 选中的列表
+      radioDisabled: true, // 今天或今天之前的数据禁用
+      getMonthDay: [],
+      squrtList: {
+        squrt2: require("@/assets/images/squrt2.png"),
+        squrt3: require("@/assets/images/squrt3.png"),
+        squrt4: require("@/assets/images/squrt4.png"),
+        squrt5: require("@/assets/images/squrt5.png"),
+        squrt6: require("@/assets/images/squrt6.png"),
+        squrt7: require("@/assets/images/squrt7.png"),
+        squrt8: require("@/assets/images/squrt8.png"),
+      },
+    };
+  },
+  created() {
+    // let toDay = this.getFormartDate(new Date())
+    // this.getCourseDate(toDay)
+  },
+  mounted() {
+    let params = this.$route.query;
+    if (params.Authorization) {
+      localStorage.setItem("Authorization", decodeURI(params.Authorization));
+      localStorage.setItem("userInfo", decodeURI(params.Authorization));
+    }
+    document.title = "课程交换";
+    let toDay = this.getFormartDate(new Date());
+    this.getCourseMonth(toDay);
+    this.getCourseDate(toDay);
+  },
+  methods: {
+    onSelectDay(value) {
+      if (
+        new Date(this.getFormartDate(new Date())) >=
+        new Date(this.getFormartDate(value))
+      ) {
+        this.radioDisabled = true;
+      } else {
+        this.radioDisabled = false;
+      }
+      this.getCourseDate(this.getFormartDate(value));
     },
-    mounted() {
-        let params = this.$route.query
-        if(params.Authorization) {
-            localStorage.setItem('Authorization', decodeURI(params.Authorization))
-            localStorage.setItem('userInfo', decodeURI(params.Authorization))
-        }
-        document.title = '课程交换'
-        let toDay = this.getFormartDate(new Date())
-        this.getCourseMonth(toDay)
-        this.getCourseDate(toDay)
+    onChangeMonth(value) {
+      this.getCourseMonth(dayjs(value).format("YYYY-MM-DD"));
     },
-    methods: {
-        onSelectDay(value) {
-            if(new Date(this.getFormartDate(new Date())) >= new Date(this.getFormartDate(value))) {
-                this.radioDisabled = true
-            } else {
-                this.radioDisabled = false
+    async getCourseMonth(month) {
+      setLoading(true);
+      try {
+        await getCourseScheduleDateByMonth({ month: month, type: "VIP" }).then(
+          (res) => {
+            let result = res.data;
+            if (result.code == 200) {
+              this.getMonthDay = [];
+              result.data.forEach((item) => {
+                this.getMonthDay.push(dayjs(item).format("DD"));
+              });
+              this.isCalendar = true;
             }
-            this.getCourseDate(this.getFormartDate(value))
-        },
-        onChangeMonth(value) {
-            this.getCourseMonth(dayjs(value).format('YYYY-MM-DD'))
-        },
-        async getCourseMonth(month) {
-            setLoading(true)
-            try {
-                await getCourseScheduleDateByMonth({ month: month, type: 'VIP' }).then(res => {
-                    let result = res.data
-                    if(result.code == 200) {
-                        this.getMonthDay = []
-                        result.data.forEach(item => {
-                            this.getMonthDay.push(dayjs(item).format('DD'))
-                        })
-                        this.isCalendar = true
-                    }
-                })
-                setLoading(false)
-            } catch(err) {
-                setLoading(false)
+          }
+        );
+        setLoading(false);
+      } catch (err) {
+        setLoading(false);
+      }
+    },
+    onCheckRadio(item) {
+      // 单选按钮选中
+      if (this.radioDisabled) return;
+      this.radioSelect = item.id;
+      this.radioSelectList = item;
+    },
+    async getCourseDate(date) {
+      setLoading(true);
+      try {
+        await getCourseSchedulesWithDate({ date: date, type: "VIP" }).then(
+          (res) => {
+            let result = res.data;
+            if (result.code == 200 && result.data) {
+              this.dataList = result.data.rows;
+              this.dataShow = result.data.rows.length > 0 ? true : false;
             }
-        },
-        onCheckRadio(item) { // 单选按钮选中
-            if(this.radioDisabled) return
-            this.radioSelect = item.id
-            this.radioSelectList = item
-        },
-        async getCourseDate(date) {
-            setLoading(true)
-            try {
-                await getCourseSchedulesWithDate({ date: date, type: 'VIP' }).then(res => {
-                    let result = res.data
-                    if(result.code == 200 && result.data) {
-                        this.dataList = result.data.rows
-                        this.dataShow = result.data.rows.length > 0 ? true : false
-                    }
-                })
-                setLoading(false)
-            } catch(err) {
-                setLoading(false)
+          }
+        );
+        setLoading(false);
+      } catch (err) {
+        setLoading(false);
+      }
+    },
+    getFormartDate(date) {
+      let checkDate = new Date(date);
+      let checkDay =
+        checkDate.getFullYear() +
+        "-" +
+        (checkDate.getMonth() + 1) +
+        "-" +
+        checkDate.getDate();
+      return checkDay;
+    },
+    onChangeClass() {
+      let item = this.radioSelectList,
+        params = this.$route.query,
+        classTime = item.classDate.split(" ")[0],
+        startTime = item.startClassTime.split(" ")[1];
+      let firstClass =
+        params.classDate +
+        " " +
+        params.name +
+        " " +
+        params.startTime +
+        "<br/>与";
+      let lastClass =
+        classTime + " " + item.name + " " + startTime + "<br/>上课时间互换";
+      this.$dialog
+        .confirm({
+          message: firstClass + lastClass,
+        })
+        .then(() => {
+          courseSwap({
+            courseScheduleId1: params.checkId,
+            courseScheduleId2: item.id,
+          }).then((res) => {
+            let result = res.data;
+            if (result.code == 200) {
+              this.$toast("交换成功");
+              setTimeout(() => {
+                if (browser().iPhone) {
+                  window.webkit.messageHandlers.DAYA.postMessage(
+                    JSON.stringify({ api: "back" })
+                  );
+                } else if (browser().android) {
+                  DAYA.postMessage(JSON.stringify({ api: "back" }));
+                } else {
+                  this.$router.push("/business");
+                }
+              }, 500);
+            } else {
+              this.$toast(result.msg);
             }
-        },
-        getFormartDate(date) {
-            let checkDate = new Date(date)
-            let checkDay = checkDate.getFullYear() + '-' + (checkDate.getMonth() + 1) + '-' + checkDate.getDate()
-            return checkDay
-        },
-        onChangeClass() {
-            let item = this.radioSelectList,
-                params = this.$route.query,
-                classTime = item.classDate.split(' ')[0],
-                startTime = item.startClassTime.split(' ')[1]
-            let firstClass = params.classDate + ' ' + params.name + ' ' + params.startTime + '<br/>与'
-            let lastClass = classTime + ' ' + item.name + ' ' + startTime + '<br/>上课时间互换'
-            this.$dialog.confirm({
-                message:  firstClass + lastClass
-            }).then(() => {
-                courseSwap({
-                    courseScheduleId1: params.checkId,
-                    courseScheduleId2: item.id
-                }).then(res => {
-                    let result = res.data
-                    if(result.code == 200) {
-                        this.$toast('交换成功')
-                        setTimeout(() => {
-                            if(browser().iPhone) {
-                                window.webkit.messageHandlers.DAYA.postMessage(JSON.stringify({api: 'back'}))
-                            } else if(browser().android) {
-                                DAYA.postMessage(JSON.stringify({api: 'back'}))
-                            } else {
-                                this.$router.push('/business')
-                            }
-                        }, 500)
-                    } else {
-                        this.$toast(result.msg)
-                    }
-                })
-            }).catch(() => {
-                // on cancel
-            });
-        },
-    }
-}
+          });
+        })
+        .catch(() => {
+          // on cancel
+        });
+    },
+    getSignInIcon(status) {
+      if (status == 1) {
+        return this.squrtList.squrt3;
+      } else if (status == 0) {
+        return this.squrtList.squrt5;
+      } else {
+        return this.squrtList.squrt4;
+      }
+    },
+    getTeacherImg(mode) {
+      if (mode == "ONLINE") {
+        return this.squrtList.squrt6;
+      } else {
+        return this.squrtList.squrt7;
+      }
+    },
+  },
+};
 </script>
 <style lang='less' scoped>
 @import url("../../assets/commonLess/variable.less");
 .periodchange {
-    // height: 100vh;
-    // position: relative;
-    // .container {
-    //     // height: 100%;
-    //     height: calc(100vh - 50px);
-    //     overflow-y: auto;
-    //     overflow-x: hidden;
-    // }
+  // height: 100vh;
+  // position: relative;
+  // .container {
+  //     // height: 100%;
+  //     height: calc(100vh - 50px);
+  //     overflow-y: auto;
+  //     overflow-x: hidden;
+  // }
 
-    // .button-group {
-    //     width: 100%;
-    //     // position: absolute;
-    //     // bottom: 0;
-    //     // left: 0;
-    //     // z-index: 99;
-    //     .van-button--primary {
-    //         background: @mColor;
-    //         border: @mColor;
-    //     }
-    // }
+  // .button-group {
+  //     width: 100%;
+  //     // position: absolute;
+  //     // bottom: 0;
+  //     // left: 0;
+  //     // z-index: 99;
+  //     .van-button--primary {
+  //         background: @mColor;
+  //         border: @mColor;
+  //     }
+  // }
 
-    // min-height: 100vh;
-    height: 100vh;
+  min-height: 100vh;
+//   height: 100vh;
+  position: relative;
+  background-color: #f3f4f8;
+  .container {
+    min-height: calc(100vh - 0.5rem);
+    overflow-y: auto;
+    overflow-x: hidden;
     position: relative;
-    background-color: #F3F4F8;
-    .container {
-        min-height: calc(100vh - .5rem);
-        overflow-y: auto;
-        overflow-x: hidden;
-        position: relative;
+  }
+  .button-group {
+    width: 100%;
+    // position: absolute;
+    // bottom: 0;
+    // left: 0;
+    // z-index: 99;
+    .van-button {
+      font-size: 0.16rem;
+      width: 100%;
+      height: 0.5rem;
+      line-height: 0.48rem;
     }
-    .button-group {
-        width: 100%;
-        // position: absolute;
-        // bottom: 0;
-        // left: 0;
-        // z-index: 99;
-        .van-button {
-            font-size: .16rem;
-            width: 100%;
-            height: .5rem;
-            line-height: .48rem;
-        }
-        .van-button--primary {
-            background: @mColor;
-            border-color: @mColor;
-        }
+    .van-button--primary {
+      background: @mColor;
+      border-color: @mColor;
     }
+  }
 }
 /deep/.van-cell {
-    line-height: inherit;
+  line-height: inherit;
 }
 /deep/.van-cell__title {
-    font-size: .16rem;
-    color: @mFontColor;
+  font-size: 0.16rem;
+  color: @mFontColor;
 }
 /deep/.van-cell-group {
-    margin-top: .05rem;
-    // &:first-child {
-    //     margin-top: .12rem;
-    // }
+  margin-top: 0.05rem;
+  border-radius: 0.1rem;
+  margin: 0.1rem 0.12rem 0;
+  overflow: hidden;
 }
 .title-content {
-    font-weight: bold;
-    .van-cell__label {
-        font-weight: 400;
-        margin-top: .06rem;
-        display: flex;
-        align-items: center;
-    }
-    .van-icon-location {
-        margin-right: .05rem;
-    }
+  font-weight: bold;
+  .van-cell__label {
+    font-weight: 400;
+    margin-top: 0.06rem;
+    display: flex;
+    align-items: center;
+  }
+  .van-icon-location {
+    margin-right: 0.05rem;
+  }
 }
-/deep/.van-cell__value, /deep/.van-cell__label {
-    color: @tFontColor;
-    span {
-        padding-right: .1rem;
-    }
+/deep/.van-cell__value,
+/deep/.van-cell__label {
+  color: @tFontColor;
+  span {
+    padding-right: 0.1rem;
+  }
 }
 
 .input-cell {
-    padding: .12rem .16rem .2rem;
-    .van-radio {
-        justify-content: flex-end;
-    }
+  padding: 0.12rem 0.16rem 0.2rem;
+  .van-radio {
+    justify-content: flex-end;
+  }
 }
 /deep/.van-radio__icon .van-icon {
-    border-color: @sFontColor;
+  border-color: @sFontColor;
 }
 /deep/.van-radio__icon--checked .van-icon {
-    background: @orangeColor;
-    border-color: @orangeColor;
+  background: @mColor;
+  border-color: @mColor;
 }
 /deep/.icon {
-    margin-top: .2rem;
+  margin-top: 0.2rem;
+}
+
+.signImgBox {
+  .signImg {
+    margin-top: 0.04rem;
+    width: 0.48rem;
+    height: 0.22rem;
+  }
+}
+.teacherModelImg {
+  width: 0.35rem;
+  height: 0.2rem;
+  margin-right: 0.05rem;
+  position: absolute;
+  left: 0;
+  top: 0.04rem;
+}
+.courseImg {
+  width: 0.42rem;
+  height: 0.18rem;
+  position: absolute;
+  left: 0.4rem;
+  top: 0.05rem;
+}
+.classTitleWrap {
+  position: relative;
+  text-indent: 0.88rem;
+  line-height: 0.28rem;
+  // align-items: center;
+}
+.titleCell {
+  padding-bottom: 0 !important;
+  &:after {
+    border-bottom: none;
+  }
+}
+
+.chioseWrap {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  img {
+    position: relative;
+    top: -0.02rem;
+    margin-right: 0.08rem;
+  }
+}
+.cellList {
+    margin-bottom: 20px;
 }
 </style>

src/views/teacher/VIPApply.vue

@@ -1,5 +1,5 @@
 <template>
-	<van-tabs v-model="active" sticky class="vanTabs" @change="onChange" color="#14928A">
+	<van-tabs v-model="active" sticky class="vanTabs" @change="onChange" color="#01C1B5"> 
 		<van-tab title="VIP申请" :name="1">
 			<vip-00-apply v-if="active === 1" />
 		</van-tab>

src/views/teacher/tobeReport.vue

@@ -1,10 +1,13 @@
 <template>
   <div class="m-container">
     <div class="cellWrap">
-      <div class="mcell" v-for="(item,index) in reportList" :key="index" >
+      <div class="mcell" v-for="(item, index) in reportList" :key="index">
         <div class="left">
-          <span class="timer">{{ item.month}}</span>
-          <span class="title">{{ item.groupName}}</span>
+          <img :src="item.studentAvatar?item.studentAvatar:nomorlIcon" class="titleIcon" alt="" />
+          <div class="textWrap">
+            <span class="title">{{ item.groupName?item.groupName:'暂无课程名' }}</span>
+            <span class="timer">{{ item.month }}</span>
+          </div>
         </div>
         <div class="cellBtn" @click="submitReport(item)">提交报告</div>
       </div>
@@ -12,85 +15,94 @@
   </div>
 </template>
 <script>
-import {getNeedPost} from '@/api/teacher'
+import { getNeedPost } from "@/api/teacher";
 export default {
   data() {
     return {
-        reportList:[]
+      reportList: [],
+      nomorlIcon:require("@/assets/images/icon_student.png")
     };
   },
-  created(){
-       let params = this.$route.query;
+  created() {
+    let params = this.$route.query;
     if (params.Authorization) {
       localStorage.setItem("Authorization", decodeURI(params.Authorization));
       localStorage.setItem("userInfo", decodeURI(params.Authorization));
     }
   },
-  mounted(){
-      getNeedPost().then(res=>{
-          if(res.data.code == 200){
-              if(res.data.data.length > 0){
-                  this.reportList = res.data.data
-              }else {
-                   this.$toast('当前没有待填写报告')
-              }
-          }
-      })
-  },
-  methods:{
-      submitReport(item){
-          this.$router.push({path:'/studyReportNew',query:{id:item.id,classGroupId:item.classGroupId}})
+  mounted() {
+    getNeedPost().then((res) => {
+      if (res.data.code == 200) {
+        if (res.data.data.length > 0) {
+          this.reportList = res.data.data;
+        } else {
+          this.$toast("当前没有待填写报告");
+        }
       }
-  }
+    });
+  },
+  methods: {
+    submitReport(item) {
+      this.$router.push({
+        path: "/studyReportNew",
+        query: { id: item.id, classGroupId: item.classGroupId },
+      });
+    },
+  },
 };
 </script>
 <style lang="less" scoped>
+@import url("../../assets/commonLess/variable.less");
 .m-container {
   min-height: 100vh;
   background-color: #f3f4f8;
+  .titleIcon {
+    width: .42rem;
+    height: .42rem;
+    border-radius: 50%;
+    margin-right: .09rem;
+  }
   .cellWrap {
     background-color: #fff;
     .mcell {
       display: flex;
       flex-direction: row;
       justify-content: space-between;
-      height: 0.54rem;
-      line-height: 0.54rem;
       background-color: #fff;
       margin-left: 0.16rem;
+      height: 0.82rem;
       border-bottom: 1px solid #f0f0f0;
       align-items: center;
       .left {
         display: flex;
         flex-direction: row;
         justify-content: flex-start;
-          .timer {
-        font-size: 0.14rem;
-        color: #808080;
-        margin-right: 0.3rem;
-      }
-      .title {
-        font-size: 0.14rem;
-        color: #1a1a1a;
-        display: block;
-        width: 1.45rem;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        
+        .timer {
+          font-size: 0.14rem;
+          color: #666666;
+          margin-right: 0.3rem;
+        }
+        .title {
+          font-size: 0.16rem;
+          color: #1a1a1a;
+          display: block;
+          width: 1.45rem;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
       }
-      }
-    
+
       .cellBtn {
         text-align: center;
-        width: .8rem;
-        height: 0.24rem;
-        line-height: .24rem;
+        width: 0.8rem;
+        height: 0.28rem;
+        line-height: 0.28rem;
         color: #fff;
-        background: rgba(20, 146, 138, 1);
-        border-radius: 17px;
-        font-size: .14rem;
-        margin-right: .16rem;
+        background-color: @mColor;
+        border-radius: 0.22rem;
+        font-size: 0.14rem;
+        margin-right: 0.12rem;
       }
     }
   }

src/views/visitManager/addVisit.vue

@@ -1,453 +1,606 @@
 <template>
-	<div class="addVisit">
-		<m-header v-if="statusList.headerStatus" :name="name" />
-		<van-cell-group>
-			<van-field label="回访老师" v-model="teacherName" readonly input-align="right" placeholder="请选择" />
-		</van-cell-group>
-		<van-cell-group>
-			<van-field label="学员姓名" @click="onCheckStudent" v-model="studentName" readonly input-align="right" :is-link="id ? false : true" placeholder="请选择" />
-			<van-field label="回访类型" @click="onChange('type')" v-model="form.type" readonly input-align="right" :is-link="id ? false : true" placeholder="请选择" />
-			<van-field label="回访目的" @click="onChange('purpose')" v-model="form.purpose" readonly input-align="right" :is-link="id ? false : true" placeholder="请选择" />
-		</van-cell-group>
-		<van-cell-group>
-			<van-field label="当前学生情况" class="textarea" :readonly="id ? true : false" v-model="form.overview" rows="2" autosize type="textarea" maxlength="50" placeholder="请输入留言" :show-word-limit="id ? false : true" />
-		</van-cell-group>
-		<van-cell-group>
-			<van-field label="沟通后家长反馈" class="textarea" :readonly="id ? true : false" v-model="form.feedback" rows="2" autosize type="textarea" maxlength="50" placeholder="请输入留言" :show-word-limit="id ? false : true" />
-		</van-cell-group>
-		<van-cell-group>
-			<van-field label="回访时间" v-model="form.visitTime" readonly @click="onEnListShow" input-align="right" :is-link="id ? false : true" placeholder="请选择" />
-		</van-cell-group>
+  <div class="addVisit">
+    <m-header v-if="statusList.headerStatus" :name="name" />
+    <van-cell-group>
+      <van-field
+        label="回访老师"
+        v-model="teacherName"
+        readonly
+        input-align="right"
+        placeholder="请选择"
+      />
+    </van-cell-group>
+    <van-cell-group>
+      <van-field
+        label="学员姓名"
+        @click="onCheckStudent"
+        v-model="studentName"
+        readonly
+        input-align="right"
+        :is-link="id ? false : true"
+        placeholder="请选择"
+      />
+      <van-field
+        label="回访类型"
+        @click="onChange('type')"
+        v-model="form.type"
+        readonly
+        input-align="right"
+        :is-link="id ? false : true"
+        placeholder="请选择"
+      />
+      <van-field
+        label="回访目的"
+        @click="onChange('purpose')"
+        v-model="form.purpose"
+        readonly
+        input-align="right"
+        :is-link="id ? false : true"
+        placeholder="请选择"
+      />
+    </van-cell-group>
+    <van-cell-group>
+      <div class="dot"></div>
+      <van-field
+        label="当前学生情况"
+        class="textarea"
+        :readonly="id ? true : false"
+        v-model="form.overview"
+        rows="2"
+        autosize
+        type="textarea"
+        maxlength="50"
+        placeholder="请输入留言"
+        :show-word-limit="id ? false : true"
+      />
+    </van-cell-group>
+    <van-cell-group>
+      <div class="dot"></div>
+      <van-field
+        label="沟通后家长反馈"
+        class="textarea"
+        :readonly="id ? true : false"
+        v-model="form.feedback"
+        rows="2"
+        autosize
+        type="textarea"
+        maxlength="50"
+        placeholder="请输入留言"
+        :show-word-limit="id ? false : true"
+      />
+    </van-cell-group>
+    <van-cell-group>
+      <van-field
+        label="回访时间"
+        class="visiTimer"
+        v-model="form.visitTime"
+        readonly
+        @click="onEnListShow"
+        input-align="right"
+        :is-link="id ? false : true"
+        placeholder="请选择"
+      />
+    </van-cell-group>
 
-		<div class="button-group" v-if="!id">
-			<van-button type="primary" @click="onSubmit" round size="large">确认</van-button>
-		</div>
+    <div class="button-group" v-if="!id">
+      <van-button type="primary" @click="onSubmit" round size="large"
+        >确认</van-button
+      >
+    </div>
 
-		<van-action-sheet v-model="visit.status" :actions="visit.data" cancel-text="取消" @cancel="visit.status = false" @select="onModeSelect" />
+    <van-action-sheet
+      v-model="visit.status"
+      :actions="visit.data"
+      cancel-text="取消"
+      @cancel="visit.status = false"
+      @select="onModeSelect"
+    />
 
-		<van-popup v-model="dataForm.status" position="bottom">
-			<van-datetime-picker v-model="dataForm.currentDate" type="date" :min-date="dataForm.minDate" :max-date="dataForm.maxDate" :formatter="formatter" @cancel="dataForm.status = false" @confirm="onCurrentConfirm" />
-		</van-popup>
+    <van-popup v-model="dataForm.status" position="bottom">
+      <van-datetime-picker
+        v-model="dataForm.currentDate"
+        type="date"
+        :min-date="dataForm.minDate"
+        :max-date="dataForm.maxDate"
+        :formatter="formatter"
+        @cancel="dataForm.status = false"
+        @confirm="onCurrentConfirm"
+      />
+    </van-popup>
 
-		<!-- 选择上课学生 -->
-		<van-popup v-model="statusList.studentStatus" :lock-scroll="true" position="bottom" :style="{ height: '180%' }">
-			<van-sticky>
-				<van-search show-action shape="round" @search="onSearch" v-model="params.search" placeholder="请输入学生名或手机号">
-					<template #action>
-						<div @click="onSearch">搜索</div>
-					</template>
-				</van-search>
-			</van-sticky>
-			<div class="paddingB80">
-				<van-list v-model="loading" class="studentContainer" v-if="dataShow" key="data" :finished="finished" finished-text="" @load="getStudent">
-					<van-radio-group v-model="radioSelect">
-						<van-cell-group>
-							<van-cell v-for="(item, index) in dataList" :key="index" @click="onCheckboxSelect(item)" class="input-cell" :center="true">
-								<template slot="icon">
-									<img class="logo" v-if="item.avatar" :src="item.avatar" alt="">
-									<img class="logo" v-else src="@/assets/images/icon_student.png" alt="">
-								</template>
-								<template slot="title">
-									{{ item.userName }}
-								</template>
-								<template slot="label">
-									<span>{{ desensitPhone(item.phone) }}</span>
-								</template>
-								<template slot="default">
-									<van-radio :name="item.userId"></van-radio>
-								</template>
-							</van-cell>
-						</van-cell-group>
-					</van-radio-group>
-				</van-list>
-				<m-empty class="empty" v-else key="data" />
-			</div>
-			<div class="button-group-popup">
-				<span class="btn" @click="onPopupCancel">取消</span>
-				<span class="btn primary" @click="onPopupSubmit">确定</span>
-			</div>
-		</van-popup>
-	</div>
+    <!-- 选择上课学生 -->
+    <van-popup
+      v-model="statusList.studentStatus"
+      :lock-scroll="true"
+      position="bottom"
+      :style="{ height: '180%' }"
+    >
+      <van-sticky>
+        <van-search
+          show-action
+          shape="round"
+          :left-icon="searchIcon"
+          @search="onSearch"
+          v-model="params.search"
+          placeholder="请输入学生名或手机号"
+        >
+          <template #action>
+            <div @click="onSearch">搜索</div>
+          </template>
+        </van-search>
+      </van-sticky>
+      <div class="paddingB80">
+        <van-list
+          v-model="loading"
+          class="studentContainer"
+          v-if="dataShow"
+          key="data"
+          :finished="finished"
+          finished-text=""
+          @load="getStudent"
+        >
+          <van-radio-group v-model="radioSelect">
+            <van-cell-group>
+              <van-cell
+                v-for="(item, index) in dataList"
+                :key="index"
+                @click="onCheckboxSelect(item)"
+                class="input-cell"
+                :center="true"
+              >
+                <template slot="icon">
+                  <img
+                    class="logo"
+                    v-if="item.avatar"
+                    :src="item.avatar"
+                    alt=""
+                  />
+                  <img
+                    class="logo"
+                    v-else
+                    src="@/assets/images/icon_student.png"
+                    alt=""
+                  />
+                </template>
+                <template slot="title">
+                  <div class="studentName">
+                    {{ item.userName }}
+                  </div>
+                </template>
+                <template slot="label">
+                  <span>{{ desensitPhone(item.phone) }}</span>
+                </template>
+                <template slot="default">
+                  <van-radio :name="item.userId"></van-radio>
+                </template>
+              </van-cell>
+            </van-cell-group>
+          </van-radio-group>
+        </van-list>
+        <m-empty class="empty" v-else key="data" />
+      </div>
+      <div class="button-group-popup">
+        <span class="btn" @click="onPopupCancel">取消</span>
+        <span class="btn primary" @click="onPopupSubmit">确认选择</span>
+      </div>
+    </van-popup>
+  </div>
 </template>
 <script>
-import MHeader from '@/components/MHeader'
-import { browser } from '@/common/common'
-import MEmpty from '@/components/MEmpty'
-import dayjs from 'dayjs'
-import { queryStudentsWithTeacher, visitAdd, visitGetInfo } from '@/api/teacher'
-import { queryUserInfo } from '@/api/app'
-import setLoading from '@/utils/loading'
+import MHeader from "@/components/MHeader";
+import { browser } from "@/common/common";
+import MEmpty from "@/components/MEmpty";
+import dayjs from "dayjs";
+import {
+  queryStudentsWithTeacher,
+  visitAdd,
+  visitGetInfo,
+} from "@/api/teacher";
+import { queryUserInfo } from "@/api/app";
+import setLoading from "@/utils/loading";
 export default {
-	name: 'addVisit',
-	components: {
-		MHeader,
-		MEmpty
-	},
-	data() {
-		const query = this.$route.query
-		return {
-			id: query.id,
-			name: query.name,
-			dataForm: { // 时间下拉框
-				status: false,
-				minDate: new Date(2000, 0, 1),
-				maxDate: new Date(),
-				currentDate: new Date()
-			},
-			statusList: { // 散状态集合
-				headerStatus: true, // 头部是否展示
-				studentStatus: false, // 上课学生状态
-			},
-			typeList: [{name: "课程推荐"}, {name: "常规回访"}, {name: "其它"}],
-			visit: {
-				status: false,
-				type: null,
-				data: []
-			},
-			studentName: null,
-			teacherName: null,
-			form: {
-				teacherId: null,
-				studentId: null,
-				type: null,
-				purpose: null,
-				overview: '',
-				feedback: '',
-				visitTime: null,
-				visiterType: 'TEACHER'
-			},
-			loading: false,
-			finished: false,
-			params: {
-				search: null,
-				page: 1,
-				rows: 20
-			},
-			dataShow: true, // 是否有数据
-			radioSelect: null,
-			radioSelectName: null,
-			clickStatus: false,
-			dataList: []
-		}
-	},
-	mounted() {
-		let params = this.$route.query
-		if (params.Authorization) {
-			localStorage.setItem('Authorization', decodeURI(params.Authorization))
-			localStorage.setItem('userInfo', decodeURI(params.Authorization))
-		}
-		if (browser().android || browser().iPhone) {
-			this.statusList.headerStatus = false
-		}
-		document.title = this.name
-		this.__init()
-	},
-	methods: {
-		async __init() {
-			let res = await queryUserInfo()
-			let result = res.data
-			if(res.status == 200) {
-				this.teacherName = result.realName
-				this.form.teacherId = result.id
-			} else {
-				this.$toast(res.msg)
-			}
+  name: "addVisit",
+  components: {
+    MHeader,
+    MEmpty,
+  },
+  data() {
+    const query = this.$route.query;
+    return {
+      id: query.id,
+      name: query.name,
+      dataForm: {
+        // 时间下拉框
+        status: false,
+        minDate: new Date(2000, 0, 1),
+        maxDate: new Date(),
+        currentDate: new Date(),
+      },
+      statusList: {
+        // 散状态集合
+        headerStatus: true, // 头部是否展示
+        studentStatus: false, // 上课学生状态
+      },
+      typeList: [{ name: "课程推荐" }, { name: "常规回访" }, { name: "其它" }],
+      visit: {
+        status: false,
+        type: null,
+        data: [],
+      },
+      studentName: null,
+      teacherName: null,
+      form: {
+        teacherId: null,
+        studentId: null,
+        type: null,
+        purpose: null,
+        overview: "",
+        feedback: "",
+        visitTime: null,
+        visiterType: "TEACHER",
+      },
+      loading: false,
+      finished: false,
+      params: {
+        search: null,
+        page: 1,
+        rows: 20,
+      },
+      dataShow: true, // 是否有数据
+      radioSelect: null,
+      radioSelectName: null,
+      clickStatus: false,
+      dataList: [],
+      searchIcon: require("@/assets/images/search.png"),
+    };
+  },
+  mounted() {
+    let params = this.$route.query;
+    if (params.Authorization) {
+      localStorage.setItem("Authorization", decodeURI(params.Authorization));
+      localStorage.setItem("userInfo", decodeURI(params.Authorization));
+    }
+    if (browser().android || browser().iPhone) {
+      this.statusList.headerStatus = false;
+    }
+    document.title = this.name;
+    this.__init();
+  },
+  methods: {
+    async __init() {
+      let res = await queryUserInfo();
+      let result = res.data;
+      if (res.status == 200) {
+        this.teacherName = result.realName;
+        this.form.teacherId = result.id;
+      } else {
+        this.$toast(res.msg);
+      }
 
-			if(this.id) {
-				setLoading(true)
-				let queryInfo = await visitGetInfo({ id: this.id })
-				const queryResult = queryInfo.data
-				let form = this.form
-				setLoading(false)
-				if(queryResult.code == 200) {
-					let tempData = queryResult.data
-					this.studentName = tempData.studentName
-					form.studentId = tempData.studentId
-					form.type = tempData.type
-					form.purpose = tempData.purpose
-					form.overview = tempData.overview
-					form.feedback = tempData.feedback
-					form.visitTime = dayjs(tempData.visitTime).format('YYYY-MM-DD')
-					form.visiterType = tempData.visiterType
-				} else {
-					this.$toast(res.msg)
-				}
-			}
-		},
-		async onSubmit() {
-			const form = this.form
-			if(!form.studentId) {
-				this.$toast('请选择学员')
-				return
-			} else if(!form.type) {
-				this.$toast('请选择回访类型')
-				return
-			} else if(!form.purpose) {
-				this.$toast('请选择回访目的')
-				return
-			} else if(!form.overview) {
-				this.$toast('请输入当前学生情况')
-				return
-			} else if(!form.feedback) {
-				this.$toast('请输入沟通后家长反馈')
-				return
-			} else if(!form.visitTime) {
-				this.$toast('请选择回访时间')
-				return
-			}
-			if(this.clickStatus) {
-				return
-			}
-			this.clickStatus = true
-			setLoading(true)
-			let res = await visitAdd(form)
-			let result = res.data
-			setLoading(false)
-			if(result.code == 200) {
-				this.$toast('添加成功')
-				this.$router.push('visitList')
-			} else {
-				this.$toast(result.msg)
-				this.clickStatus = false
-				return
-			}
-		},
-		onCheckStudent() {
-			if(this.id) {
-				return
-			}
-			this.statusList.studentStatus = true
-		},
-		onChange(type) {
-			if(this.id) {
-				return
-			}
-			let visit = this.visit
-			let form = this.form
-			if(type == 'type') {
-				visit.data = this.typeList
-			} else if(type == 'purpose') {
-				if(form.type == '其它') {
-					visit.data = [{name: '其它'}]
-				} else if(form.type == '课程推荐') {
-					visit.data = [{name: '新课推荐'}, {name: '续费提醒'}]
-				} else if(form.type == '常规回访') {
-					visit.data = [{name: '课后及作业回访'}, {name: '练习及乐团表现'}]
-				} else {
-					this.$toast('请选择回访类型')
-					return
-				}
-			}
-			visit.status = true
-			visit.type = type
-		},
-		onSearch() {
-			this.params.page = 1
-			this.dataList = []
-			this.dataShow = true
-			this.loading = true
-			this.finished = false
-			this.getStudent()
-		},
-		onCheckboxSelect(item) {
-			this.radioSelect = item.userId
-			this.radioSelectName = item.userName
-		},
-		onPopupCancel () {
-			this.statusList.studentStatus = false
-		},
-		onPopupSubmit() {
-			this.form.studentId = this.radioSelect
-			this.studentName = this.radioSelectName
-			this.statusList.studentStatus = false
-		},
-		onCurrentConfirm(value) {
-			if(value) {
-				this.form.visitTime = dayjs(value).format('YYYY-MM-DD')
-			}
-			this.dataForm.status = false
-		},
-		onEnListShow() {
-			if(this.id) {
-				return
-			}
-			this.dataForm.status = true
-		},
-		getStudent() {
-			let params = this.params
-			queryStudentsWithTeacher(params).then(res => {
-				let result = res.data
-				this.loading = false
-				if (result.code == 200 && result.data) {
-					params.page = result.data.pageNo
-					this.dataList = this.dataList.concat(result.data.rows)
-					if (params.page >= result.data.totalPage) {
-						this.finished = true
-					}
-					this.params.page++
-				} else {
-					this.finished = true
-				}
-				// 判断是否有数据
-				if (this.dataList.length <= 0) {
-					this.dataShow = false
-				}
-			})
-		},
-		onModeSelect(value) {
-			let visit = this.visit
-			let form = this.form
-			if(visit.type == 'type') {
-				form.type = value.name
-				form.purpose = null
-			} else if(visit.type == 'purpose') {
-				form.purpose = value.name
-			}
-			visit.status = false
-		},
-		formatter(type, value) {
-			if (type === 'year') {
-				return `${value}年`;
-			} else if (type === 'month') {
-				return `${value}月`
-			} else if (type === 'day') {
-				return `${value}日`
-			}
-			return value;
-		},
-		desensitPhone(phone) { // 手机号脱敏
-			let first = phone.substr(0, 3)
-			let last  = phone.substr(-4)
-			return first + '****' + last
-		}
-	}
-}
+      if (this.id) {
+        setLoading(true);
+        let queryInfo = await visitGetInfo({ id: this.id });
+        const queryResult = queryInfo.data;
+        let form = this.form;
+        setLoading(false);
+        if (queryResult.code == 200) {
+          let tempData = queryResult.data;
+          this.studentName = tempData.studentName;
+          form.studentId = tempData.studentId;
+          form.type = tempData.type;
+          form.purpose = tempData.purpose;
+          form.overview = tempData.overview;
+          form.feedback = tempData.feedback;
+          form.visitTime = dayjs(tempData.visitTime).format("YYYY年MM月DD日");
+          form.visiterType = tempData.visiterType;
+        } else {
+          this.$toast(res.msg);
+        }
+      }
+    },
+    async onSubmit() {
+      const form = this.form;
+      if (!form.studentId) {
+        this.$toast("请选择学员");
+        return;
+      } else if (!form.type) {
+        this.$toast("请选择回访类型");
+        return;
+      } else if (!form.purpose) {
+        this.$toast("请选择回访目的");
+        return;
+      } else if (!form.overview) {
+        this.$toast("请输入当前学生情况");
+        return;
+      } else if (!form.feedback) {
+        this.$toast("请输入沟通后家长反馈");
+        return;
+      } else if (!form.visitTime) {
+        this.$toast("请选择回访时间");
+        return;
+      }
+      if (this.clickStatus) {
+        return;
+      }
+      this.clickStatus = true;
+      setLoading(true);
+      let visitTime = this.form.visitTime.replace(/[^\d]/g,'/');
+      let someDate = new Date(visitTime)
+      let res = await visitAdd({...form,visitTime:dayjs(someDate).format("YYYY-MM-DD")});
+      let result = res.data;
+      setLoading(false);
+      if (result.code == 200) {
+        this.$toast("添加成功");
+        this.$router.push("visitList");
+      } else {
+        this.$toast(result.msg);
+        this.clickStatus = false;
+        return;
+      }
+    },
+    onCheckStudent() {
+      if (this.id) {
+        return;
+      }
+      this.statusList.studentStatus = true;
+    },
+    onChange(type) {
+      if (this.id) {
+        return;
+      }
+      let visit = this.visit;
+      let form = this.form;
+      if (type == "type") {
+        visit.data = this.typeList;
+      } else if (type == "purpose") {
+        if (form.type == "其它") {
+          visit.data = [{ name: "其它" }];
+        } else if (form.type == "课程推荐") {
+          visit.data = [{ name: "新课推荐" }, { name: "续费提醒" }];
+        } else if (form.type == "常规回访") {
+          visit.data = [{ name: "课后及作业回访" }, { name: "练习及乐团表现" }];
+        } else {
+          this.$toast("请选择回访类型");
+          return;
+        }
+      }
+      visit.status = true;
+      visit.type = type;
+    },
+    onSearch() {
+      this.params.page = 1;
+      this.dataList = [];
+      this.dataShow = true;
+      this.loading = true;
+      this.finished = false;
+      this.getStudent();
+    },
+    onCheckboxSelect(item) {
+      this.radioSelect = item.userId;
+      this.radioSelectName = item.userName;
+    },
+    onPopupCancel() {
+      this.statusList.studentStatus = false;
+    },
+    onPopupSubmit() {
+      this.form.studentId = this.radioSelect;
+      this.studentName = this.radioSelectName;
+      this.statusList.studentStatus = false;
+    },
+    onCurrentConfirm(value) {
+      if (value) {
+        this.form.visitTime = dayjs(value).format("YYYY年MM月DD日");
+      }
+      this.dataForm.status = false;
+    },
+    onEnListShow() {
+      if (this.id) {
+        return;
+      }
+      this.dataForm.status = true;
+    },
+    getStudent() {
+      let params = this.params;
+      queryStudentsWithTeacher(params).then((res) => {
+        let result = res.data;
+        this.loading = false;
+        if (result.code == 200 && result.data) {
+          params.page = result.data.pageNo;
+          this.dataList = this.dataList.concat(result.data.rows);
+          if (params.page >= result.data.totalPage) {
+            this.finished = true;
+          }
+          this.params.page++;
+        } else {
+          this.finished = true;
+        }
+        // 判断是否有数据
+        if (this.dataList.length <= 0) {
+          this.dataShow = false;
+        }
+      });
+    },
+    onModeSelect(value) {
+      let visit = this.visit;
+      let form = this.form;
+      if (visit.type == "type") {
+        form.type = value.name;
+        form.purpose = null;
+      } else if (visit.type == "purpose") {
+        form.purpose = value.name;
+      }
+      visit.status = false;
+    },
+    formatter(type, value) {
+      if (type === "year") {
+        return `${value}年`;
+      } else if (type === "month") {
+        return `${value}月`;
+      } else if (type === "day") {
+        return `${value}日`;
+      }
+      return value;
+    },
+    desensitPhone(phone) {
+      // 手机号脱敏
+      let first = phone.substr(0, 3);
+      let last = phone.substr(-4);
+      return first + "****" + last;
+    },
+  },
+};
 </script>
 <style lang='less' scoped>
-	@import url("../../assets/commonLess/variable.less");
-	.addVisit {
-		min-height: 100vh;
-	}
-	.vip-title {
-		padding: .06rem 0 .04rem;
-		font-size: .12rem;
-		color: @mFontColor;
-		text-align: center;
-	}
-	/deep/.van-cell-group {
-		margin-bottom: .1rem;
-	}
-	/deep/.van-cell {
-		display: flex;
-		align-items: center;
-		font-size: .16rem;
-		line-height: .26rem;
-	}
-	/deep/.van-field__label,
-	/deep/.van-cell__value {
-		flex: 1 auto;
-	}
-	/deep/.van-field__word-limit {
-		margin-top: 0px;
-		position: absolute;
-		top: -0.2rem;
-		right: 5px;
-		font-size: .14rem;
-	}
-	/deep/.van-field__control:disabled {
-		color: #6a6969;
-	}
-	.textarea {
-		display: flex;
-		flex-direction: column;
-		align-items: inherit;
-		/deep/.van-field__label {
-			width: 100%;
-		}
-		// /deep/.van-field__value {
-		// 	border: 1px solid #ccc;
-		// }
-	}
-	.button-group {
-		margin: .3rem .26rem .2rem;
+@import url("../../assets/commonLess/variable.less");
+.addVisit {
+  min-height: 100vh;
+}
+.vip-title {
+  padding: 0.06rem 0 0.04rem;
+  font-size: 0.12rem;
+  color: @mFontColor;
+  text-align: center;
+}
+/deep/.van-cell-group {
+  margin-bottom: 0.1rem;
+}
+/deep/.van-cell {
+  display: flex;
+  align-items: center;
+  font-size: 0.16rem;
+  line-height: 0.28rem;
+}
+/deep/.van-field__label,
+/deep/.van-cell__value {
+  flex: 1 auto;
+}
+/deep/.van-field__word-limit {
+  margin-top: 0px;
+  position: absolute;
+  top: -0.2rem;
+  right: 5px;
+  font-size: 0.14rem;
+}
+/deep/.van-field__control:disabled {
+  color: #6a6969;
+}
+.textarea {
+  display: flex;
+  flex-direction: column;
+  align-items: inherit;
+  padding: 0.1rem 0.21rem;
+  /deep/.van-field__label {
+    width: 100%;
+  }
+  // /deep/.van-field__value {
+  // 	border: 1px solid #ccc;
+  // }
+}
+.button-group {
+  margin: 0.3rem 0.26rem 0.2rem;
 
-		.van-button--primary {
-			background: @mColor;
-			font-size: .18rem;
-			height: .5rem;
-		}
-	}
+  .van-button--primary {
+    background: @mColor;
+    border: 1px solid @mColor;
+    font-size: 0.18rem;
+    height: 0.5rem;
+  }
+}
 
-	.studentContainer {
-		/deep/.van-cell__title {
-			font-size: .14rem;
-			color: @mFontColor;
-			flex: 1 auto;
-		}
+.studentContainer {
+  /deep/.van-cell__title {
+    font-size: 0.14rem;
+    color: @mFontColor;
+    // flex: 1 auto;
+  }
 
-		.logo {
-			width: .35rem;
-			height: .35rem;
-			margin-right: .12rem;
-			border-radius: 100%;
-		}
+  .logo {
+    width: 0.42rem;
+    height: 0.42rem;
+    margin-right: 0.12rem;
+    border-radius: 100%;
+  }
 
-		.input-cell {
-			padding: .12rem .16rem .2rem;
+  .input-cell {
+    padding: 0.2rem 0.16rem;
 
-			.van-radio {
-				justify-content: flex-end;
-			}
-		}
+    .van-radio {
+      justify-content: flex-end;
+    }
+  }
 
-		/deep/.van-cell__value {
-			height: .2rem;
-		}
+  /deep/.van-cell__value {
+    height: 0.2rem;
+  }
 
-		/deep/.van-radio__icon .van-icon {
-			border-color: @sFontColor;
-		}
+  /deep/.van-radio__icon .van-icon {
+    border-color: @sFontColor;
+  }
 
-		/deep/.van-radio__icon--checked {
-			.van-icon {
-				border-color: @orangeColor;
-				background: @orangeColor;
-			}
-		}
+  /deep/.van-radio__icon--checked {
+    .van-icon {
+      border-color: @mColor;
+      background: @mColor;
+    }
+  }
 
-		.van-tag {
-			margin-left: .08rem;
-		}
-	}
-	.paddingB80 {
-		padding-bottom: .8rem
-	}
-	.button-group-popup {
-		position: fixed;
-		bottom: 0;
-		padding: 0.2rem 0;
-		width: 100%;
-		text-align: center;
-		background-color: #FFFFFF;
-		.btn {
-			padding: 0 0.45rem;
-			line-height: 0.4rem;
-			display: inline-block;
-			border: 1px solid @mColor;
-			border-radius: 1rem;
-			color: @mColor;
-			background: #fff;
-			font-size: 0.18rem;
-			&.primary {
-				color: #fff;
-				background: @mColor;
-			}
-		}
-		.btn+.btn {
-			margin-left: 0.1rem;
-		}
-	}
-	.studentColor {
-		color: #14928A;
-	}
+  .van-tag {
+    margin-left: 0.08rem;
+  }
+}
+.paddingB80 {
+  padding-bottom: 0.8rem;
+}
+.button-group-popup {
+  position: fixed;
+  bottom: 0;
+  padding: 0.2rem 0;
+  width: 100%;
+  text-align: center;
+  background-color: #ffffff;
+  .btn {
+    line-height: 0.5rem;
+    display: inline-block;
+    border: 1px solid @mColor;
+    width: 1.65rem;
+    border-radius: 0.4rem;
+    color: @mColor;
+    background: #fff;
+    font-size: 0.18rem;
+    &.primary {
+      color: #fff;
+      background: @mColor;
+    }
+  }
+  .btn + .btn {
+    margin-left: 0.1rem;
+  }
+}
+.studentColor {
+  color: @mColor;
+}
+.visiTimer {
+  /deep/.van-field__control {
+    color: #333333 !important;
+    font-size: 0.16rem;
+  }
+}
+.studentName {
+  font-size: 0.16rem;
+  color: #1a1a1a;
+  line-height: 0.22rem;
+}
+.dot {
+  width: 4px;
+  height: 0.17rem;
+  background: #01c1b5;
+  border-radius: 3px;
+  position: absolute;
+  z-index: 200;
+  top: 0.14rem;
+  left: 0.12rem;
+}
+.van-icon-search {
+  color: @mColor;
+}
 </style>

src/views/visitManager/visitList.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="visitList">
     <m-header v-if="headerStatus" />
-    <van-dropdown-menu active-color="#14928A" :close-on-click-outside="false">
+    <van-dropdown-menu active-color="#01C1B5" :close-on-click-outside="false">
       <van-dropdown-item v-model="value1" @change="onTypeChange" title="回访类型" :options="option1" />
       <van-dropdown-item
         v-model="value2"
@@ -10,7 +10,7 @@
         title="回访目的"
         :options="option2"
       />
-      <van-dropdown-item title="回访时间" ref="item">
+      <van-dropdown-item title="回访时间" ref="item" class="visitTime">
         <van-cell title="开始时间" is-link @click="onChangeDate('showStart')" :value="formatStartTime"></van-cell>
         <van-cell title="结束时间" is-link @click="onChangeDate('showEnd')" :value="formatEndTime"></van-cell>
         <div class="btnWrap">
@@ -47,8 +47,8 @@
         @click="onHref(item)"
       >
         <template slot="title">
-          <p class="type">{{ item.type }}</p>
-          <p class>{{ item.studentName }}</p>
+          <p >{{ item.type }}</p>
+          <p class="type">{{ item.studentName }}</p>
         </template>
         <template solt="default">
           <p class="content van-ellipsis">{{ item.purpose }}</p>
@@ -169,12 +169,12 @@ export default {
     chioseDate(value) {
       let dataForm = this.dataForm
       if(dataForm.type == 'showStart') {
-        this.formatStartTime = dayjs(value).format('YYYY-MM-DD')
+        this.formatStartTime = dayjs(value).format('YYYY/MM/DD')
         if(this.formatEndTime && dayjs(value).unix() > dayjs(this.formatEndTime).unix()) {
           this.formatEndTime = null
         }
       } else if(dataForm.type == 'showEnd') {
-        this.formatEndTime = dayjs(value).format('YYYY-MM-DD')
+        this.formatEndTime = dayjs(value).format('YYYY/MM/DD')
       }
       dataForm.status = false
     },
@@ -222,7 +222,7 @@ export default {
         if (result.code == 200) {
           params.page = result.data.pageNo;
           result.data.rows.forEach((item) => {
-            item.visitTime = dayjs(item.visitTime).format("YYYY-MM-DD");
+            item.visitTime = dayjs(item.visitTime).format("YYYY/MM/DD");
           });
           this.list = this.list.concat(result.data.rows);
           if (params.page >= result.data.totalPage) {
@@ -242,7 +242,7 @@ export default {
       this.$router.push({
         path: "/addVisit",
         query: {
-          name: '新增回访记录'
+          name: '新增回访记录' 
         }
       });
     },
@@ -263,6 +263,11 @@ export default {
 @import url("../../assets/commonLess/variable.less");
 .visitList {
   min-height: 100vh;
+  .visitTime {
+    .van-cell__right-icon{
+      line-height: .48rem;
+    }
+  }
 }
 .addClass {
   width: 0.2rem;
@@ -274,14 +279,15 @@ export default {
 .cellGroup {
   display: flex;
   align-items: center;
-  line-height: 1.2;
+  line-height: .61rem;
 }
 .sectionTitle {
-  font-size: 0.16rem;
+  font-size: 0.15rem!important;
   color: #1a1a1a;
   align-items: center;
+  line-height: .21rem;
   .type {
-    color: #808080;
+    color: #666;
     font-size: 0.14rem;
   }
 }
@@ -292,11 +298,15 @@ export default {
   justify-content: space-between;
   align-items: center;
   height: auto !important;
+  .time{
+    font-size: .14rem;
+    color: #808080;
+  }
   .content {
     font-size: 0.16rem;
     color: #1a1a1a;
     flex: 1;
-    text-align: left;
+    text-align: center;
   }
   .van-button {
     font-size: 0.14rem;
@@ -347,4 +357,9 @@ export default {
   color: @mColor;
   box-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
 }
+.van-cell{
+    color: #1A1A1A;
+    line-height: .48rem!important;
+    font-size: .16rem;
+}
 </style>

vue.config.js

@@ -1,7 +1,7 @@
-// let targetUrl = 'http://mteatest.dayaedu.com'
+let targetUrl = 'http://mteatest.dayaedu.com'
 // let targetUrl = 'http://192.168.3.139:8000' // 箭河
 // let targetUrl = 'https://online.dayaedu.com'
-let targetUrl = 'http://dev.dayaedu.com/'
+// let targetUrl = 'http://dev.dayaedu.com/'
 // let targetUrl = 'http://192.168.3.196'
 module.exports = {
   chainWebpack: config => {