mteacher/src/views/afterClassEvaluate/modal/item.vue

<template>
  <van-cell-group class="item" @click="onItem" v-show="dataInfo.courseScheduleId">
    <van-cell title-class="timer" class="comment">
      <template #title>
        <van-icon :name="icon_timer" size="16" style="padding-right: .06rem;margin-top: 0.02rem;" />
        {{dataInfo.classStartTime | dayFormat('YYYY-MM-DD HH:mm')}}-{{ dataInfo.classEndTime | dayFormat('HH:mm') }}
      </template>
      <template #default>
        <!-- <span v-show="isComment" style="color: #01C1B5; font-size: .15rem">
          {{ dataInfo.courseScheduleReviewId ?  '已评价' : '待评价' }}
        </span> -->
      </template>
    </van-cell>
    <van-cell label-class="address">
      <template #title>
        <div class="course-info">
          <span class="teachMode">{{ dataInfo.teachMode == 'ONLINE' ? '线上' : null }}{{ dataInfo.teachMode == 'OFFLINE' ? '线下' : null }}</span>
          <span :class="['courseType', dataInfo.courseType]">{{ dataInfo.courseType | coursesType }}</span>
          <span style="line-height: .18rem;vertical-align: bottom;color: #1A1A1A;font-size: .16rem;font-weight: 500;">{{ dataInfo.courseName }}</span>
          <!-- <div class="course-img">
            <img v-if="dataInfo.courseType === 'VIP'" src="../images/icon_vip.png" alt="">
            <img v-if="dataInfo.courseType === 'PRACTICE'" src="../images/icon_p.png" alt="">
            <img v-if="dataInfo.courseType !== 'VIP' && dataInfo.courseType !== 'PRACTICE'" src="../images/icon_music.png" alt="">
          </div>
          <div class="course-name">
            {{ dataInfo.courseName }}<span class="teachMode" v-show="dataInfo.teachMode">{{ dataInfo.teachMode === 'ONLINE' ? '线上' : '线下' }}</span>
          </div> -->
        </div>
      </template>
      <template #label>
        <van-icon v-if="dataInfo.schoolName || dataInfo.teachMode == 'ONLINE'" :name="icon_address" class="icon-address" style="padding-right: .02rem;vertical-align: middle;" />
        {{ dataInfo.teachMode == 'ONLINE' ? '上课地点：网络教室' : dataInfo.schoolName }}
      </template>
    </van-cell>
  </van-cell-group>
</template>

<script>
// classStartTime
// classEndTime
// courseType
// courseName
// teachMode
// schoolName
// courseScheduleId
import dayjs from 'dayjs';
export default {
  name: "item",
  props: {
    dataInfo: { // 单个课程对象
      type: Object,
      default() {
        return {}
      }
    },
    isComment: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      icon_timer: require('@/views/afterClassEvaluate/images/icon_timer.png'),
      icon_address: require('@/views/afterClassEvaluate/images/icon_address.png'),
    }
  },
  methods: {
    onItem() {
      this.$emit('onItem', this.dataInfo)
    }
  },
  filters: {
    dayFormat(val, formatStr = 'HH:mm:ss') {
      return dayjs(val).format(formatStr)
    }
  }
}
</script>

<style lang="less" scoped>
.item {
  margin: .15rem .12rem 0;
  border-radius: .1rem;
  overflow: hidden;
  .timer {
    display: flex;
    align-items: center;
    font-size: .14rem;
    color: #666;
    flex: 1 auto;
  }
  .address {
    font-size: .14rem;
    color: #666;
    line-height: 1.5;
  }
  .icon-address {
    width: .12rem;
    height: .15rem;
    .van-icon__image {
      width: inherit;
      height: inherit;
    }
  }

  .course-info {
    // display: flex;
    // align-items: center;
    padding: 2px 0 16px;
    .course-img {
      // width: .48rem;
      // height: .4rem;
      // margin-right: .08rem;
      // img {
      //   border-radius: 50%;
      //   width: .4rem;
      //   height: .4rem;
      // }
    }
    .course-name {
      color: #1A1A1A;
      font-size: .16rem;
      font-weight: 500;
    }
  }

  .teachMode {
    background: #F2FFFC;
    border-radius: .03rem;
    border: 1px solid #01C1B5;
    font-size: 12px;
    color: #01C1B5;
    display: inline-block;
    // height: 16px;
    line-height: 16px;
    padding: 0 5px;
    // margin-left: .05rem;
  }

  .comment {
    /deep/.van-cell__value {
      flex-basis: auto;
    }
  }
}

@mColor: #01C1B5;
@color1: #FF8642;
@color2: #8C98E5;
@color3: #6FB2FF;
@color4: #7DC0CF;
@color5: #cfcaca;
@color6: #FF9288;
@color7: #AA92CF;
@color8: #2CD3E3;
@color9: #0684E8;
@color10: #97C672;
@color11: #72C67A;
@color12: #51CF83;
@color13: #FFA25F;
@color14: #85BEBE;
@color15: #7584E8;

.courseType {
    line-height: 18px;
    // height: 18px;
    font-size: 12px;
    color: #fff;
    display: inline-block;
    border-radius: 0px 5px 0px 5px;
    padding: 0 3px;
    margin: 0 .05rem;
}
.NORMAL, .SINGLE {
    background: @color4;
}
.MIX {
    background: @color6;
}
.HIGH {
    background: @color7;
}
.VIP {
    background: @color1;
}
.DEMO {
    background: @color3;
}
.COMPREHENSIVE {
    background: @color8;
}
.ENLIGHTENMENT {
    background: @color9;
}
.TRAINING {
    background: @color10;
}
.TRAINING_SINGLE {
    background: @color11;
}
.TRAINING_MIX {
    background: @color12;
}
.CLASSROOM {
    background: @color13;
}
.PRACTICE, .MUSIC_NETWORK {
    background: @color2;
}
.COMM {
    background: @color14;
}
.MUSIC {
    background: @mColor;
}
.HIGH_ONLINE {
    background: @color15;
}
</style>