onecric_h5/pages/Game/compontent/historyList.vue

<template>
  <div class="tournament">
    <div class="box" v-if="list.length">
      <div class="title">
        <!-- History -->
        <div :class="{'fadeInRight': animationLoaded}">{{$t('live.title3')}}</div>
        <div class="all" :class="{'fadeInLeft': animationLoaded}" @click="$toUrl('./list?type=2')">
        <!-- See More -->
        {{ $t('live.more1') }}
        </div>
      </div>
      <div class="list-box" :class="{'fadeInTop': animationLoaded}">
        <div class="item" v-for="item in list" :key="item.id">
          <div class="top flex">
            <div class="left flex">
              <u--image
                class="avatar"
                :src="item.avatar"
                shape="circle"
                width="86rpx"
                height="86rpx"
              ></u--image>
              <div>
                <div class="name">{{ item.user_nickname }}</div>
                <div class="time">{{ getTimeAgo(item.created_at) }}</div>
              </div>
            </div>
            <div class="right">
              <u-icon @click="attention(item)" v-if="item.is_attention != 1" color="#747474" name="plus-people-fill" size="50rpx"></u-icon>
              <u-icon @click="attention(item)" v-if="item.is_attention == 1" color="#747474" name="minus-people-fill" size="50rpx"></u-icon>
            </div>
          </div>
          <div class="title">{{ item.title }}</div>
          <div class="body"  @click="toMatchLive(item)">
            <img class="img" :src="item.thumb" alt="">
            <div class="flex">
              <!-- <img class="live1" src="/static/image/game/live1.png" alt=""> -->
              <div class="view-box">
                <img class="icon_view1" src="/static/image/game/icon_view.png" alt="">
                {{ numberToK(item.viewers) || 0 }}
              </div>
            </div>
          </div>
          <div class="root">
            <div class="flex">
              <u-icon @click="isLike(item)" v-if="item.like != 1" color="#888888" name="heart" size="40rpx"></u-icon>
              <u-icon @click="isLike(item)" v-if="item.like == 1" color="#e46d45" name="heart-fill" size="40rpx"></u-icon>
              {{ numberToK(item.is_likes) || 0}}
            </div>
            <div class="flex">
              <img class="icon" src="/static/image/game/icon_comment.png" alt="">
              {{ numberToK(item.comment) || 0}}
            </div>
            <div class="flex">
              <img class="icon" @click="copyText(item)" src="/static/image/game/icon_share.png" alt="">
              <!-- Share -->
              {{ $t('news.share') }}
            </div>
          </div>
        </div>
        <div class="no-data" v-if="list.length == 0">
					<img class="load1" src="/static/image/live/load2.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { numberToK, formatTime } from "@/utils/util";
import animationMixin from '@/pages/mixins/animation'
import NativeShare from 'nativeshare'
export default {
  mixins: [animationMixin],
  data() {
    return {
      list: [],
      activeInfo: {},
      timer: null,
      pageNumber: 1,
    };
  },
  deactivated() {
  },
  created() {
    this.getHistory()
  },
  activated() {
    this.getHistory()
  },
  methods: {
    getHistory() {
      uni.$u.http.get('/api/game/history', {
        params: {
          page: this.pageNumber
        }
      }).then(res => {
        if (this.pageNumber == 1) {
          this.list = res.data || []
        } else {
          this.list = this.list.concat(res.data || [])
        }
        // this.status = this.liveList.length == res.total ? 'nomore' : 'loadmore'
      }).finally(() => {
        if (this.animationLoaded) {
          return;
        }
        this.animationLoaded = true;
        this.$nextTick(() => {
          this.scrollFun();
        });
      })
    },
    toMatchLive(item) {
      uni.navigateTo({
        url:`/pages/Live/history-detail?type=game&ID=${item.live_id}&MediaUrl=${item.video}`
      })
    },
    toUrlLive(item) {
      gtag("event", "live_H5", {
        live_H5: "0",
      });
      uni.navigateTo({
        url: `/pages/Live/live-detail?id=${item.live_id}&ID=${item.live_id}`,
      });
    },
    /* 喜欢 */
    isLike(item) {
      if (this.$store.state.isLogin != 1) {
        this.$toUrl('/pages/login/login')
        return
      }
      uni.showLoading({
        title: this.$t('common.lab'),
      });
      uni.$u.http
        .post("/api/Member/live_like", {
          id: item.live_id,
          type: item.like == 1 ? 0 : 1
        })
        .then((res) => {
          this.getHistory()
        }).finally(() => {
          uni.hideLoading();
        });
    },
    /* 关注 */
    attention(item) {
      if (this.$store.state.isLogin != 1) {
        this.$toUrl('/pages/login/login')
        return
      }
      uni.showLoading({
        title: this.$t('common.lab'),
      });
      uni.$u.http
        .post("/api/Member/attention", {
          id: item.uid,
        })
        .then((res) => {
          this.getHistory()
        }).finally(() => {
          uni.hideLoading();
        });
    },
    copyText(item) {
      if (this.$store.state.isLogin != 1) {
        this.$toUrl('/pages/login/login')
        return
      }
      this.nativeShare = new NativeShare()
      var shareData = {
          title: `${item.title}`,
          desc: 'OneCric: Live',
          // 如果是微信该link的域名必须要在微信后台配置的安全域名之内的。
          link: window.location.origin + `/pages/Live/history-detail?type=game&ID=${item.live_id}&MediaUrl=${item.video}`,
          icon: 'https://m.onecric.tv/static/logo.png',
          // 不要过于依赖以下两个回调，很多浏览器是不支持的
          // success: function() {
          //     alert('success')
          // },
          // fail: function() {
          //     alert('fail')
          // }
      }
      this.nativeShare.setShareData(shareData)
      try {
        this.nativeShare.call()
      } catch (err) {
        let oInput = document.querySelector('#copy-input')
        oInput.value = window.location.origin + `/pages/Live/history-detail?type=game&ID=${item.live_id}&MediaUrl=${item.video}`
        oInput.select() // 选择对象;
        document.execCommand('Copy') // 执行浏览器复制命令
        uni.$u.toast('Copy succeeded');
      }
      uni.$u.http
        .post("/api/Member/live_share", {
          id: item.live_id
        })
        .then((res) => {
          this.$emit('success')
          this.getHistory()
        }).finally(() => {
        });
    },
    numberToK(v) {
      return numberToK(v);
    },
    countdownFun(value) {
      if (!value) {
        return "";
      }
      var h = parseInt(value / 3600);
      var m = parseInt((value % 3600) / 60);
      var str = "";
      if (h > 0) {
        str += h + "hrs";
        if (m < 10) {
          m = "0" + m;
        }
        str += " " + m + "min";
        return str;
      } else {
        if (m > 0) {
          if (m < 10) {
            m = "0" + m;
          }
          str += m + "min";
        }
      }

      var s = parseInt((value % 3600) % 60);
      if (s < 10) {
        s = "0" + s;
      }
      str += " " + s + "s";
      return str;
    },
    getTimeAgo(time) {
      if (!time) {
        return ''
      }
      let t = new Date(time).getTime()
      return formatTime(t,this)
    }
  },
};
</script>
<style lang="scss">
.box {
  padding-top: 30px;
  padding-bottom: 6rpx;
  .title {
    font-size: 15px;
    padding-right: 14px;
    font-weight: bold;
    color: #242424;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20rpx;
    padding-left: 29rpx;
    .icon {
      height: 4.08vw;
      margin-right: 14rpx;
    }
    .all {
        color: #FF3300;
    }
  }
}
.list-box {
  .item {
    padding-top: 20rpx;
    padding-bottom: 30rpx;
    border-bottom: 1px solid #e7e7e7;
  }
  .top {
    justify-content: space-between;
    padding: 0 14px 22rpx 16rpx;
    .avatar {
      margin-right: 28rpx;
    }
    .name {
      font-size: 31rpx;
      font-weight: bold;
    }
    .time {
      font-size: 28rpx;
      color: #888;
    }
  }
  .title {
    padding: 0 14px 30rpx 16rpx;
    font-size: 31rpx;
    font-weight: 400;
  }
  .icon_view {
    width: 40rpx;
  }
  .body {
    position: relative;
    .flex {
      position: absolute;
      left: 40rpx;
      bottom: 24rpx;
      border-radius: 2rpx;
    }
    .live1 {
      height: 44rpx;
      margin-right: 34rpx;
    }
    .view-box {
      display: flex;
      align-items: center;
      height: 44rpx;
      padding: 0 12rpx;
      color: #fff;
      background-color: #000;
      border-radius: 2rpx;
      font-size: 25rpx;
    }
    .icon_view1 {
      width: 27rpx;
      margin-right: 6rpx;
    }
  }
  .img {
    display: block;
    width: 100%;
    margin-bottom: 27rpx;
  }
  .root {
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 28rpx;
    color: #888888;
    .u-icon {
      margin-right: 20rpx;
    }
    .icon {
      margin-right: 20rpx;
      width: 40rpx;
    }
  }
}
.no-data {
  padding: 5rpx;
 .load1 {
    width: 35.74vw;
    display: block;
  }
}

</style>