Merge branch 'colexiu1.3' into dev

src/views/live-class/live-item.tsx

@@ -1,141 +1,146 @@
-import { defineComponent, PropType } from 'vue'
-import { Image, CellGroup, Cell, Icon } from 'vant'
-import styles from './live-item.module.less'
-import dayjs from 'dayjs'
-
-import iconSuccess from '@common/images/icon_success.png'
-import iconTeacher from '@common/images/icon_teacher.png'
-import iconTimer from '@common/images/icon_timer3.png'
-
-interface IProps {
-  backgroundPic: string
-  courseGroupId: number
-  courseGroupName: string
-  courseNum: string
-  courseStartTime?: number
-  coursePrice: number
-  teacherName: string
-  teacherId: number
-  avatar?: string
-  studentCount: number
-  existBuy: number
-  subjectName: string
-}
-
-export default defineComponent({
-  name: 'liveItem',
-  props: {
-    onClick: {
-      type: Function,
-      default: (item?: any) => {}
-    },
-    liveInfo: {
-      type: Object as PropType<IProps>,
-      default: {}
-    },
-    coverClass: {
-      type: String,
-      defualt: ''
-    }
-  },
-  data() {
-    return {
-      backgroundPic: '',
-      avatar: ''
-    }
-  },
-  mounted() {
-    this.backgroundPic =
-      this.liveInfo.backgroundPic + '@base@tag=imgScale&h=192&w=340&m=1'
-    //  + '?time=' + new Date().valueOf()
-    this.avatar = this.liveInfo.avatar + '@base@tag=imgScale&h=80&w=80&m=1'
-    //  + '?time=' + new Date().valueOf() || ''
-  },
-  render() {
-    // console.log(this.liveInfo, 121212)
-    return (
-      <Cell
-        center
-        border={false}
-        class={styles.liveItem}
-        onClick={() => this.onClick(this.liveInfo)}
-        v-slots={{
-          icon: () => (
-            <div style={{ position: 'relative' }}>
-              <img
-                class={[styles.liCover, this.coverClass]}
-                src={this.backgroundPic}
-                crossorigin="anonymous"
-                style={{
-                  objectFit: 'cover'
-                }}
-              />
-              <span class={styles.subjectName}>
-                {this.liveInfo.subjectName}
-              </span>
-            </div>
-          ),
-          title: () => (
-            <div>
-              <div class={[styles.liTitle, 'van-ellipsis', 'itemTitle']}>
-                {this.liveInfo.courseGroupName}
-              </div>
-              <div class={styles.liUserInfo}>
-                <p class={styles.liteachername}>
-                  {/* 老师： */}
-                  {/* <Image
-                    src={this.liveInfo.avatar || iconTeacher}
-                    class={styles.liteacherIcon}
-                  /> */}
-                  <img
-                    src={this.liveInfo.avatar ? this.avatar : iconTeacher}
-                    class={styles.liteacherIcon}
-                    crossorigin="anonymous"
-                    style={{
-                      objectFit: 'cover'
-                    }}
-                  />
-                  {this.liveInfo.teacherName ||
-                    `游客${this.liveInfo.teacherId}`}
-                </p>
-                {this.liveInfo.courseStartTime && (
-                  <p>
-                    <img src={iconTimer} class={styles.iconTimer} />
-                    {dayjs(this.liveInfo.courseStartTime).format(
-                      'MM月DD日 HH:mm'
-                    )}
-                  </p>
-                )}
-              </div>
-              <div class={styles.liPrice}>
-                <p>
-                  {this.liveInfo.coursePrice > 0 && (
-                    <span class={styles.price}>
-                      <i>¥</i>
-                      {this.liveInfo.coursePrice}
-                    </span>
-                  )}
-
-                  <span class={styles.classNum}>
-                    {this.liveInfo.courseNum}课时
-                  </span>
-                </p>
-                {this.liveInfo.existBuy === 1 && (
-                  <span class={styles.buyNum}>
-                    {/* <Icon name={iconSuccess} size="15" /> */}
-                    已购买
-                  </span>
-                )}
-                {/* : ( 
-                <span class={styles.num}>
-                   {this.liveInfo.studentCount}人已购买 
-                </span>
-                ) */}
-              </div>
-            </div>
-          )
-        }}
-      />
-    )
-  }
-})
+import { defineComponent, PropType } from 'vue'
+import { Image, CellGroup, Cell, Icon } from 'vant'
+import styles from './live-item.module.less'
+import dayjs from 'dayjs'
+
+import iconSuccess from '@common/images/icon_success.png'
+import iconTeacher from '@common/images/icon_teacher.png'
+import iconTimer from '@common/images/icon_timer3.png'
+
+interface IProps {
+  backgroundPic: string
+  courseGroupId: number
+  courseGroupName: string
+  courseNum: string
+  courseStartTime?: number
+  coursePrice: number
+  teacherName: string
+  teacherId: number
+  avatar?: string
+  studentCount: number
+  existBuy: number
+  subjectName: string
+}
+
+export default defineComponent({
+  name: 'liveItem',
+  props: {
+    onClick: {
+      type: Function,
+      default: (item?: any) => {}
+    },
+    liveInfo: {
+      type: Object as PropType<IProps>,
+      default: {}
+    },
+    coverClass: {
+      type: String,
+      defualt: ''
+    }
+  },
+  data() {
+    return {
+      backgroundPic: '',
+      avatar: ''
+    }
+  },
+  mounted() {
+    this.backgroundPic =
+      this.liveInfo.backgroundPic + '@base@tag=imgScale&h=192&w=340&m=1'
+    //  + '?time=' + new Date().valueOf()
+    this.avatar = this.liveInfo.avatar + '@base@tag=imgScale&h=80&w=80&m=1'
+    //  + '?time=' + new Date().valueOf() || ''
+  },
+  render() {
+    // console.log(this.liveInfo, 121212)
+    return (
+      <Cell
+        center
+        border={false}
+        class={styles.liveItem}
+        onClick={() => this.onClick(this.liveInfo)}
+        v-slots={{
+          icon: () => (
+            <div style={{ position: 'relative' }}>
+              <img
+                class={[styles.liCover, this.coverClass]}
+                src={this.backgroundPic}
+                crossorigin="anonymous"
+                style={{
+                  objectFit: 'cover'
+                }}
+              />
+              <span class={styles.subjectName}>
+                {this.liveInfo.subjectName}
+              </span>
+            </div>
+          ),
+          title: () => (
+            <div>
+              <div class={[styles.liTitle, 'van-ellipsis', 'itemTitle']}>
+                {this.liveInfo.courseGroupName}
+              </div>
+              <div class={styles.liUserInfo}>
+                <p class={styles.liteachername}>
+                  {/* 老师： */}
+                  {/* <Image
+                    src={this.liveInfo.avatar || iconTeacher}
+                    class={styles.liteacherIcon}
+                  /> */}
+                  <img
+                    src={this.liveInfo.avatar ? this.avatar : iconTeacher}
+                    class={styles.liteacherIcon}
+                    crossorigin="anonymous"
+                    style={{
+                      objectFit: 'cover'
+                    }}
+                  />
+                  {this.liveInfo.teacherName ||
+                    `游客${this.liveInfo.teacherId}`}
+                </p>
+                {this.liveInfo.courseStartTime && (
+                  <p>
+                    <img src={iconTimer} class={styles.iconTimer} />
+                    {dayjs(this.liveInfo.courseStartTime).format(
+                      'MM月DD日 HH:mm'
+                    )}
+                  </p>
+                )}
+              </div>
+              <div class={styles.liPrice}>
+                <p>
+                  {this.liveInfo.coursePrice > 0 && (
+                    <span class={styles.price}>
+                      <i>¥</i>
+                      {this.liveInfo.coursePrice}
+                    </span>
+                  )}
+                  {this.liveInfo.coursePrice == 0 && (
+                    <span class={styles.price}>
+                      免费
+                    </span>
+                  )}
+
+                  <span class={styles.classNum}>
+                    {this.liveInfo.courseNum}课时
+                  </span>
+                </p>
+                {this.liveInfo.existBuy === 1 && (
+                  <span class={styles.buyNum}>
+                    {/* <Icon name={iconSuccess} size="15" /> */}
+                    已购买
+                  </span>
+                )}
+                {/* : (
+                <span class={styles.num}>
+                   {this.liveInfo.studentCount}人已购买
+                </span>
+                ) */}
+              </div>
+            </div>
+          )
+        }}
+      />
+    )
+  }
+})