H5_module/service/live/live - 副本.vue

<template>
	<view>
		<!-- <view class="top">
			<image :src="picUrlss + 'activity_top.png'" mode="widthFix"></image>
		</view> -->
		<view class="banner">
			<swiper class="swiper" @change="swiperChange" autoplay="true" interval="5000" duration="300">
				<block v-for="(item, index) in bannerList" :key="index">
					<swiper-item>
						<contact-button :img-url="item.pic + '?x-oss-process=style/w750-auto'" image-mode="aspectFill" class-name="banner-img" v-if="item.type == 8"></contact-button>
						<!-- <button open-type="contact" v-if="item.type == 8">
							<image lazy-load="true" :src="item.pic + '?x-oss-process=style/w750-auto'" mode="aspectFill"></image>
						</button> -->
						<image lazy-load="true" :src="item.pic + '?x-oss-process=style/w750-auto'"mode="aspectFill" @tap="getUrl2(item)" :data-type="item.type" :data-content="item.content" :data-merchant="url" v-else></image>
					</swiper-item>
				</block>
			</swiper>
			<view class="dots ddflex">
				<block v-for="(item, index) in bannerList" :key="index"><view :class="['dot', index == swiperCurrent ? 'active' : '']"></view></block>
			</view>
		</view>
		<view class="cons">
			<view class="box" v-if="liveList&&liveList.length>0">
				<view class="title ddflex">
					<view class="fflex">直播课</view>
					<navigator url="/service/live/live" hover-class="none" class="more ddflex">更多直播<image src="../../static/pages/images/more.png"></image></navigator>
				</view>
				<view class="live-list">
					<view class="li ddflex">
					</view>
					<view class="li ddflex" v-for="(item, index) in liveList" :key="index" @click="intoLive(item.roomid,index)">
						<view class="live-img">
							<image :src="item.share_img" mode="aspectFill" class="live-pic"></image>
							<view class="live-sta ddflex" v-if="item.live_status == 101"><image :src="picUrlss+'meizhihua/zb_ico.png'"></image>直播中</view>
							<view class="live-sta end ddflex" v-if="item.live_status == 103"><image :src="picUrlss+'meizhihua/zb_ico_end.png'"></image>直播完</view>
						</view>
						<view class="fflex">
							<view class="live-tit tover">{{item.name}}</view>
							<view class="live-bri tover" v-if="item.live_status == 102">直播时间：<text>{{item.time}}</text></view>
							<!-- <view class="live-bri tover">小学生口腔保健应知</view> -->
							<view class="live-opt ddflex">
								<view class="fflex ddflex">
									<!-- <image src="../../static/pages/images/userimg.png" mode="aspectFill" class="userimg"></image>
									<view class="username">小光医生</view> -->
								</view>
								<view class="live-btn">{{item.live_status == 103 ? '查看回放':'进入直播'}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="box" v-if="matchList&&matchList.length>0">
				<view class="title ddflex">
					<view class="fflex">活动报名</view>
					<navigator url="/topic/activitys/activity" hover-class="none" class="more ddflex">更多活动<image src="../../static/pages/images/more.png"></image></navigator>
				</view>
				<view class="act-list">
					<view class="li" v-for="(item,index) in matchList" :key="index">
						<view class="infos ddflex" @click="toActivity(item)">
							<view class="imgbox">
								<image :src="item.pic" mode="aspectFill"></image>
								<!-- <text class="tag">已认证</text> -->
							</view>
							<view class="fflex">
								<view class="act-tit tovers">{{item.title}}</view>
								<view class="ddflex">
									<view class="area fflex tover">
										<text>{{getTime(item.startTime)}} 开始</text>
										<!-- <text>湖南长沙</text> -->
									</view>
									<view class="money" v-if="userinfovip.levelGrade>0&& !userinfovip.end"><text v-if="item.vipMoney">￥</text>{{item.vipMoney ? item.vipMoney : '免费' }}</view>
									<view class="money" v-else><text v-if="item.money">￥</text>{{item.money ? item.money : '免费'}}</view>
								</view>
							</view>
						</view>
						<view class="stas ddflex">
							<view class="tag-box ddflex fflex">
								{{item.brief}}
								<!-- <text>#经销商</text>
								<text>#服务商</text>
								<text>#新零售</text> -->
							</view>
							<view class="act-btn" v-if="!item.isEnlist" @click="toActivity(item)">立即报名</view>
							<view class="act-btn" @click="jumpUrl('/mine/activity/activity')" v-else>查看报名</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<foot channel="live" :isUpdate="isUpdate" v-if="query.isSwitchTab"></foot>
	</view>
</template>

<script>
//index.js
//获取应用实例
const app = getApp();
const req = require('../../utils/request.js');
const api = require('../../utils/api.js');
const utils = require('../../utils/util.js');
const mes = require('../../utils/requestmessage.js');
const route = require('../../utils/route');
const QQMapWX = require("../../utils/qqmap.js");
import foot from '../../components/nav-bar/index';
import footerCopyright from '../../components/footer-copyright/footer-copyright';
var timer; //定时器状态
export default {
	data() {
		return {
			picUrlss: req.public.picUrls,
			query: {},
			isLogin: false,
			liveList: [],
			matchList: [],
			query: {},
			userinfovip: {},
			swiperCurrent: 0,
			bannerList: []
		};
	},

	components: {
		foot,
		footerCopyright,
	},
	onReachBottom() {
	},
	onLoad: async function(options) {
		if(options.isSwitchTab) options.isSwitchTab = true;
		this.query = options;
		req.silenceLogin(options.userId, '');
	},

	async onShow() {
		this.isLogin = req.isAuth();
		this.getBannerList();
		this.getMatchList()
		if(this.isLogin){
			this.getuserVip();
		}
	},
	onShareAppMessage: function() {
		let url = '/pages/activity/index'
		if(req.getStorage('userInfo')){
			url += '?userId=' + req.getStorage('userInfo').id
		}
		return{
			path: url
		}
	},
	onShareTimeline() {
	},
	methods: {
		getBannerList() {
			req.getRequest('/api/banner', {
				code: '0003'
			}, data => {
				this.bannerList = data;
			});
		},
		swiperChange(e){
			this.swiperCurrent = e.detail.current
		},
		getUrl2(e){
			app.globalData.clickBanner(e);
		},
		getLiveList() {
			let that = this;
			let form = {
				page: 1,
				limit: 1
			};
			req.getRequest('/api/live/list', form, data => {
				if (data) {
					data.map(item => {
						if (item.start_time) {
							item.time = util.transTime(item.start_time);
						}
						return item;
					});
				}
				that.liveList = data
			});
		},
		getLive(id) {
			return new Promise((resolve, reject) => {
				req.getRequest('/api/live/playBack', {
					page: 1,
					limit: 10,
					room_id: id
				}, data => {
					this.videoList = data;
					resolve();
				});
			});
		},
		intoLive(roomId, index) {
			let redirect = '/service/liveMiddle/liveMiddle?id=' + roomId
			req.isLogin().then(success => {
				if (success) {
					uni.navigateTo({
						url: redirect // url:`plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}`
					});
				}
			});
		},
		async playBack(event) {
			let roomId = event.currentTarget.dataset.id;
			await this.getLive(roomId);
			let videoList = JSON.stringify(this.videoList);
			if (videoList.length < 1) return req.msg('回放生成中');
			uni.navigateTo({
				url: '/service/video/video?videoList=' + videoList
			});
		},
		getTime(time){
			if(time){
				return time.substring(0,16)
			}
		},
		getMatchList(){
			let form = {
				page: 1,
				limit: 3,
				state: 2
			}
			req.getRequest('/api/match/list',form,res => {
				this.matchList = res;
			});
		},
		toActivity(item){
			uni.navigateTo({
				url: '/topic/activityDetail/activityDetail?id=' + item.id
			})
		},
		getuserVip() {
			req.getRequest('/api/user/levelDetails', {}, data => {
				let expireTime = Array;
				if (data.expireTime) {
					expireTime = data.expireTime.split(" ");
					data.expireTime = data.expireTime.replace(/-/g, '/');
				} // 解决苹果不兼容---日期
				let nowTime = new Date().getTime();
				let endTime = new Date(data.expireTime).getTime();
				let times = parseInt((endTime - nowTime) / 1000); // var expireTime= new Date(data.expireTime)
				// console.log(times, nowTime, endTime, data.expireTime);
				this.userinfovip = data;
				if (times <= 0) {
					this.userinfovip.end = true;
				} else {
					this.userinfovip.end = false;
				}
			});
		},
		jumpUrl(url) {
			uni.navigateTo({
				url: url
			})
		}
	}
};
</script>

<style>
	@import "live.css";
</style>