123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356 |
- <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>
|