hyshop/pages/index/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> -->
				<button class="info-right" open-type="share" @click.stop="shareLink(item)">分享</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getZbList
	} from '@/api/index.js'
	import {
		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() {
				getZbList({
					page: 1,
					limit: 50
				}).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;
			},
			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;
			justify-content: space-between;
			.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 {
				margin: 0;
				&::after {
					border: none;
				}
				padding: 0;
				border-radius: 50rpx;
				width: 100rpx;
				height: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #e56969;
				background-color: #fff;
				border: 1px solid #e56969;
				font-size: $font-lg;
			}
		}
	}

	.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: 100rpx;
		height: 50rpx;
		padding: 0;
		font-size: $font-sm;
		background: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 25rpx;
		border: 1px solid #f75022;
		color: #f75022;

		&::after {
			border: none;
		}
	}
</style>