mteacher/src/views/liveActive/model/liveRoom.vue

<template>
  <div>
    <van-cell-group class="cell-group" :border="false">
      <van-cell center style="border-radius: 0.1rem !important">
        <template #title>
          <div class="title">
            <img src="../images/icon_video.png" alt="" />
            <p class="van-ellipsis" style="width: 2.8rem">
              {{ item.roomTitle }}
            </p>
          </div>
        </template>
        <template #label>
          直播内容：{{ item.liveRemark }} <br />
          <template v-if="item.liveState != 1">
            直播时间：{{ item.liveStartTime }}
          </template>
        </template>
      </van-cell>
      <van-cell
        center
        class="userInfo"
        style="border-radius: 0.1rem !important"
      >
        <template #title>
          <div class="username">
            <img src="../images/icon_person.png" />
            <span>主讲人：{{ item.speakerName }}</span>

            <div class="tag" v-if="item.liveState != 2">
              <img src="../images/icon_mobli.png" />
              {{ item.os == "pc" ? "电脑直播" : "手机直播" }}
            </div>
          </div>
        </template>

        <van-button
          round
          size="small"
          color="#FF806F"
          v-if="item.liveState == 1"
          @click="onDetail"
        >
          <img class="svg" src="../images/audio.svg" alt="" />
          开始直播
        </van-button>

        <van-button
          round
          size="small"
          type="info"
          style="min-width: 68px"
          v-if="item.liveState == 2"
          @click="onDetail"
        >
          查看回放
        </van-button>
      </van-cell>
    </van-cell-group>
    <van-popup v-model="videoStatus" round style="width: 90%" closeable>
      <preview-video v-if="videoStatus" :videoList="videoList" />
    </van-popup>
  </div>
</template>

<script>
import { postMessage } from "@/helpers/native-message";
import previewVideo from "./previewVideo";
export default {
  components: { previewVideo },
  props: ["item"],
  data() {
    return {
      videoStatus: false,
      videoList: [],
      src: "",
    };
  },
  methods: {
    async onDetail() {
      const item = this.item;
      if (item.liveState == 1) {
        postMessage({
          api: "enterLiveRoom",
          content: { roomId: item.roomUid },
        });
      } else if (item.liveState == 2) {
        this.$router.push("/previewVideo?roomUid=" + item.roomUid);

        this.videoStatus = true;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.cell-group {
  margin: 0.12rem 0.14rem;
  overflow: hidden !important;
  border-radius: 0.1rem !important;
  /deep/.van-cell__label {
    // line-height: 1.5;
  }
}
.title {
  display: flex;
  align-items: center;
  font-size: 0.16rem;
  font-weight: 500;
  color: #000000;
  line-height: 1.2;
  padding-top: 0.1rem;
  padding-bottom: 0.05rem;
  img {
    width: 0.22rem;
    height: 0.22rem;
    margin-right: 0.08rem;
  }
}
.svg {
  width: 0.12rem;
  height: 0.09rem;
}
.username {
  display: flex;
  align-items: center;
  font-size: 0.13rem;
  color: #ff806f;
  img {
    width: 0.12rem;
    height: 0.15rem;
    margin-right: 0.05rem;
  }
}
.userInfo {
  /deep/.van-cell__title {
    flex: 40%;
  }
}
.tag {
  margin-left: 0.1rem;
  padding: 0 0.06rem;
  display: flex;
  align-items: center;
  justify-items: center;
  font-size: 0.12rem;
  color: #ff806f;
  background: rgba(255, 128, 111, 0.08);
  border-radius: 3px;
  border: 1px solid rgba(255, 128, 111, 0.25);
  height: 0.2rem;
  img {
    width: 0.1rem;
    height: 0.12rem;
    margin-right: 0.02rem;
  }
}
</style>