onecric_h5/pages/Live/compontent/historyList.vue

<!-- 推荐 -->
<template>
  <view class="list">
    <div>
      <div><img src="/static/image/live/detail01.png" />
        <!-- History -->
			{{ $t('live.title3') }}
      </div>
      <div>
        <!-- See More -->
			{{ $t('live.more1') }}
      </div>
    </div>
    <u-empty
      v-if="robot.length == 0"
      mode="data"
      width="474"
      height="312"
      textSize="28"
      marginTop="100"
      :text="$t('common.nodata')"
      icon="/static/image/common/nodata.png"
    >
    </u-empty>
    <!-- History -->
    <u-row>
      <u-col span="6">
        <view
          class="detail-video-li"
          style="position: relative"
          v-for="(item, index) in robot"
          :key="index"
          @click="historyLive(item)"
        >
          <u--image
            :showLoading="true"
            :src="item.img"
            width="100%"
            height="176rpx"
          >
            <template v-slot:loading>
              <image
                class="loading-list-img"
                src="/static/image/common/live-list-bg.png"
              ></image>
            </template>
          </u--image>
          <image
            src="/static/image/live/live-history-icon.png"
            mode=""
            class="history-icon"
          ></image>
          <view class="detail-video-content">
            <view class="detail-video-title text-clamp2">
              {{ item.Name }}
            </view>
            <view class="detail-video-right flex">
              <image
                class="detail-video-content-logo"
                :src="item.UserHead"
                mode="aspectFill"
              ></image>
              <view class="detail-video-info flex">
                <text class="text-clamp">{{ item.UserName }}</text>
                <image src="/static/image/live/detail-hot.png" mode=""></image>
                <!-- <view>{{item.Heat}}</view> -->
              </view>
            </view>
          </view>
        </view>
      </u-col>
      <u-col span="6">
        <view
          class="detail-video-li"
          style="position: relative"
          v-for="(item, index) in robot"
          :key="index"
          @click="historyLive(item)"
        >
          <u--image
            :showLoading="true"
            :src="item.img"
            width="100%"
            height="176rpx"
          >
            <template v-slot:loading>
              <image
                class="loading-list-img"
                src="/static/image/common/live-list-bg.png"
              ></image>
            </template>
          </u--image>
          <image
            src="/static/image/live/live-history-icon.png"
            mode=""
            class="history-icon"
          ></image>
          <view class="detail-video-content">
            <view class="detail-video-title text-clamp2">
              {{ item.Name }}
            </view>
            <view class="detail-video-right flex">
              <image
                class="detail-video-content-logo"
                :src="item.UserHead"
                mode="aspectFill"
              ></image>
              <view class="detail-video-info flex">
                <text class="text-clamp">{{ item.UserName }}</text>
                <image src="/static/image/live/detail-hot.png" mode=""></image>
                <!-- <view>{{item.Heat}}</view> -->
              </view>
            </view>
          </view>
        </view>
      </u-col>
    </u-row>
  </view>
</template>

<script>
import { numberToK } from "@/utils/util";
export default {
  data() {
    return {
      robot: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 点击history
    historyLive(item) {
      uni.navigateTo({
				url:`/pages/Live/history-detail?id=${item.Uid}&ID=${item.live_id}&MediaUrl=${item.MediaUrl}`
      });
    },
    toUrlLive(item) {
      gtag("event", "live_H5", {
        live_H5: "0",
      });
      if (item.islive == 0) {
        uni.$u.toast(this.$t('live.lab35'));
      } else {
        uni.navigateTo({
          url: `./live-detail?id=${item.live_id}&ID=${item.id}`,
        });
      }
    },
    getList() {
      uni.$u.http
        .get("/api/LivePlayBack/list", {})
        .then((res) => {
          this.robot = (res.list || []).slice(0, 6);
        });
    },
  },
};
</script>

<style lang="scss">
.detail-video-li {
  overflow: hidden;
  margin-top: 20rpx;
  border-radius: 12rpx;
  background-color: white;
  .loading-list-img {
    width: 100%;
    height: 176rpx;
  }
  .history-icon {
    position: absolute;
    right: 10rpx;
    bottom: 170rpx;
    width: 150rpx;
    height: 42rpx;
  }
  .detail-video-li-logo {
    width: 100%;
    height: 176rpx;
    display: block;
  }

  .detail-video-content {
    padding: 16rpx;

    .detail-video-content-logo {
      width: 40rpx;
      height: 40rpx;
      border-radius: 50%;
      margin-right: 24rpx;
    }

    .detail-video-title {
      width: 99%;
      height: 80rpx;
      color: #333;
      font-size: 28rpx;
    }
  }

  .detail-video-info {
    font-size: 24rpx;
    flex: 1;

    image {
      width: 24rpx;
      height: 24rpx;
      margin-right: 6rpx;
    }

    text {
      flex: 1;
      width: 100rpx;
      color: #9193b4;
    }

    view {
      color: #999;
    }
  }
}

.detail-video-right {
  flex: 1;
  min-width: 100px;
}
</style>