修改到评论

1

src/assets/commonLess/common.less

@@ -42,11 +42,7 @@
 .defaultStatus {
     color: #777777 !important;
 }
-.van-cell{
-    color: #1A1A1A;
-    line-height: .48rem;
-    font-size: .16rem;
-}
+
 
 .van-field__control {
     color: #808080 !important;
@@ -74,4 +70,5 @@
   }
   .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/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/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/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) {
@@ -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>