qjm/pages/user/living.vue

<template>
	<view class="content">
		<u-empty v-if="list.length == 0" text="暂无直播" mode="list"></u-empty>
		<view class="main-item" v-for="(item, index) in list" v-else @click="navTo(item)">
			<view class="type">{{ item.live_status == 101 ? '直播中' : item.live_status == 102 ? '未开始' : item.live_status == 103 ? '已结束' : '' }}</view>
			<view class="main-image"><image :src="item.cover_img" mode=""></image></view>
			<view class="info flex">
				<view class="info-left">
					<view class="main-title">{{ item.name }}</view>
					<view class="main-time">{{ item.add_time }}开播</view>
				</view>
				<view class="info-right" @click.stop="shareLink(item)">分享</view>
			</view>
		</view>
		<view v-if="shareShow" class="Shraremask" @click="cancel">
			<view class="mask-content">
				<scroll-view class="view-content" scroll-y>
					<view class="share-header">分享到</view>
					<view class="share-list">
						<view class="share-item">
							<!-- 微信 -->
							<button class="wechat-box" open-type="share">
								<image class="itemImage" src="../../static/icon/share1.png" mode=""></image>
								<text class="itemText">微信好友</text>
							</button>
							<!-- 朋友圈 -->
							<view class="wechat-box" @click="copy()">
								<image class="itemImage" src="../../static/icon/share3.png" mode=""></image>
								<text class="itemText">复制链接</text>
							</view>
							<!-- <view class="wechat-box" @click="copy()">
								<image class="itemImage" src="../../static/icon/share4.png" mode=""></image>
								<text class="itemText">生成海报</text>
							</view> -->
						</view>
					</view>
				</scroll-view>
				<view class="bottomButtom b-t" @click="cancel">取消</view>
			</view>
		</view>
	</view>
</template>

<script>
import { live, short_link } from '@/api/activity.js';
import { getTime } from '@/utils/rocessor.js';
import uniCopy from '@/js_sdk/xb-copy/uni-copy.js';
export default {
	// #ifdef MP
	onShareAppMessage: function(res) {
		console.log(this.share);
		if (res.from === 'button') {
			// 来自页面内分享按钮
			let pages = getCurrentPages();
			// 获取当前页面
			let page = pages[pages.length - 1];
			let path = '/' + page.route + '?';
			// 保存传值
			for (let i in page.options) {
				path += i + '=' + page.options[i] + '&';
			}
			// 保存邀请人
			let data = {
				path: path,
				imageUrl: this.share.cover_img,
				title: this.share.name
			};
			console.log('data', data);
			return data;
		}
	},
	// #endif
	data() {
		return {
			list: [],
			shareShow: false,
			share: ''
		};
	},
	onLoad() {
		this.loadData();
	},
	onShow() {},
	onReachBottom() {},
	onReady() {},
	methods: {
		loadData() {
			live({ page: 1, limit: 100 }).then(({ data }) => {
				data.forEach(e => {
					e.add_time = getTime(e.start_time);
				});
				this.list = data;
				console.log(data);
			});
		},
		shareLink(item) {
			console.log('dainjideniang');
			this.share = item;
			this.shareShow = true;
		},
		copy() {
			short_link({ url: 'pages/user/living' }).then(({ data }) => {
				console.log(data);
				this.comfirm(data.link);
			});
		},
		comfirm(text) {
			console.log(text);
			const result = uniCopy(text);
			if (result === false) {
				uni.showToast({
					title: '不支持'
				});
			} else {
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				});
			}
		},
		//取消分享
		cancel() {
			this.shareShow = false;
		},
		navTo(opt) {
			let roomId = opt.roomid;
			let customParams = encodeURIComponent(JSON.stringify({ path: 'pages/index/index', pid: 1 }));
			uni.navigateTo({
				url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}&custom_params=${customParams}`
			});
		}
	}
};
</script>

<style lang="scss">
page,
.content {
	min-height: 100%;
	height: auto;
}
.main-item {
	margin: 20rpx auto 0;
	width: 690rpx;
	background: #ffffff;
	border-radius: 30rpx;
	position: relative;
	image {
		width: 100%;
		height: 100%;
	}
	.type {
		top: 50rpx;
		left: 50rpx;
		position: absolute;
		z-index: 2;
		border-radius: 50rpx;
		width: 100rpx;
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #7f7f7f;
		color: #ffffff;
	}
	.main-image {
		width: 100%;
		height: 500rpx;
	}
	.info {
		padding: 10rpx 10rpx 20rpx;
		.info-left {
			line-height: 1;
			.main-title {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
			.main-time {
				margin-top: 8rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}
		}
		.info-right {
			border-radius: 50rpx;
			width: 100rpx;
			height: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #e56969;
			border: 1px solid #e56969;
		}
	}
}
.Shraremask {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	z-index: 998;
	transition: 0.3s;
	background-color: rgba(51, 51, 51, 0.6);
	.bottomButtom {
		position: absolute;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 90rpx;
		background: #fff;
		z-index: 9;
		font-size: $font-base + 2rpx;
		color: $font-color-dark;
	}
}
.mask-content {
	margin-bottom: 88rpx;
	width: 100%;
	height: 380rpx;
	transition: 0.3s;
	background: #fff;
	&.has-bottom {
		padding-bottom: 90rpx;
	}
	.view-content {
		height: 100%;
	}
}
.share-header {
	height: 110rpx;
	font-size: $font-base + 2rpx;
	color: font-color-dark;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 10rpx;
	&:before,
	&:after {
		content: '';
		width: 240rpx;
		height: 0;
		border-top: 1px solid $border-color-base;
		transform: scaleY(0.5);
		margin-right: 30rpx;
	}
	&:after {
		margin-left: 30rpx;
		margin-right: 0;
	}
}
.share-list {
	display: flex;
	width: 80%;
	margin: 0rpx auto;
}
.share-item {
	min-width: 33.33%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 180rpx;
	width: 100%;
	.wechat-box {
		width: 50%;
		height: 100%;
		background: #ffffff;
		border: 0;
		display: flex;
		align-items: center;
		flex-direction: column;
		&::after {
			border: 0;
		}
		.itemImage {
			width: 80rpx;
			height: 80rpx;
			margin-bottom: 16rpx;
		}
		.itemText {
			font-size: $font-base;
			color: $font-color-base;
			line-height: 2;
		}
	}
}
</style>