zhibo/pages_company/shareLive.vue

<template>
	<view>
		<!-- <view class="search-cont">
			<view class="inner">
				<image class="icon-search" src="/static/images/search.png" mode=""></image>
				<input type="text" value="" placeholder="输入订单号" confirm-type="搜索" @confirm="goSearch"
					placeholder-style="font-size:28rpx;color:#BBBBBB;font-family: PingFang SC;" />
			</view>
		</view> -->
		<!-- 订单列表 -->
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
			:up="upOption">
			<view class="live-list">
				<view v-for="(item,index) in dataList" :key="index" class="item">
					<!-- 药品列表 -->
					<!-- 实付金额、按钮 -->
					<view class="bottom-box">
						<view class="left">
							<image class="img" v-if="item.liveImgUrl" :src="item.liveImgUrl"></image>
							<text class="ml30 label">{{item.liveName}}</text>
						</view>
						<view class="btn-box">
							<!-- <view class="btn pay" @click.stop="showDetail(item)">
									分享直播间
								</view> -->
							<button open-type="share" class="button" :data-item="JSON.stringify(item)"
								@click="setShareItem($event)">
								分享
							</button>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import {
		liveShareList
	} from '@/api/living.js'


	// import {
	// 	getCompanyStoreOrderList
	// } from '@/api/storeOrder'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				userinfo: {},
				currentShareItem: null,
				// searchKey: "",
				mescroll: null,
				// 上拉加载的配置
				upOption: {
					onScroll: true,
					use: true, // 是否启用上拉加载; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						icon: '/static/images/no_data.png',
						tip: '暂无数据'
					}
				},
				companyId: null,
				companyUserId:null,
				// 列表数据
				dataList: [],
			};
		},
		onLoad(options) {
			var that = this;
			// uni.$on('refreshOrder', () => {
			that.mescroll.resetUpScroll()
			// })
			this.companyId = options.companyId;
			this.companyUserId = options.companyUserId;
			this.userinfo = JSON.parse(uni.getStorageSync("userInfo"))
		},
		onShareAppMessage() {
			const item = this.currentShareItem || {};
			console.log("item.liveId", item.liveId)
			console.log("this.companyUserId", this.companyUserId)
			return {
				title: '邀请你来观看直播：' + item.liveName,
				path: `/pages_course/living?companyId=${this.companyId}&companyUserId=${this.companyUserId}&liveId=${item.liveId}`,
				// imageUrl: this.products.image,
				imageUrl: '/static/images/logo.png',
				success(res) {
					console.log("分享成功", res);
				},
				fail(err) {
					console.error("分享失败", err);
				}
			};
		},
		methods: { // 记录当前要分享的item
			setShareItem(e) {
				// 从事件对象的currentTarget.dataset中获取item（需解析JSON）
				const itemStr = e.currentTarget.dataset.item;
				this.currentShareItem = JSON.parse(itemStr);
			},
			// goSearch(e) {
			// 	this.searchKey = e.detail.value;
			// 	this.mescroll.resetUpScroll()
			// },
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*下拉刷新的回调 */
			downCallback(mescroll) {
				mescroll.resetUpScroll()
			},
			upCallback(page) {
				//联网加载数据
				var that = this;
				if(!this.companyId) return;
				// var data = {
				// 	pageNum: page.num,
				// 	pageSize: page.size,
				// };
				liveShareList(this.companyId,page.size,page.num).then(res => {
					if (res.code == 200) {
						//设置列表数据
						if (page.num == 1) {
							that.dataList = res.data.list;

						} else {
							that.dataList = that.dataList.concat(res.data.list);

						}
						that.mescroll.endBySize(res.data.list.length, res.data.total);

					} else {
						uni.showToast({
							icon: 'none',
							title: "请求失败",
						});
						that.dataList = null;
						that.mescroll.endErr();
					}
				});
			},
			// showDetail(item) {
			// 	uni.navigateTo({
			// 		url: './storeOrderDetail?id=' + item.id
			// 	})
			// },

		}
	}
</script>

<style lang="scss">
	.search-cont {
		padding: 16rpx 30rpx;
		background-color: #FFFFFF;

		.inner {
			box-sizing: border-box;
			width: 100%;
			height: 72rpx;
			background: #F7F7F7;
			border-radius: 36rpx;
			display: flex;
			align-items: center;
			padding: 0 30rpx;

			.icon-search {
				width: 28rpx;
				height: 28rpx;
				margin-right: 20rpx;
			}

			input {
				height: 60rpx;
				line-height: 60rpx;
				flex: 1;
			}
		}
	}

	.live-list {
		padding: 20rpx;

		.item {
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 20rpx 30rpx;
			margin-bottom: 20rpx;

			.bottom-box {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;

					.img {
						width: 140rpx;
						height: 140rpx;
					}

					.label {
						font-size: 28rpx;
						font-weight: 500;
						color: #999999;
						line-height: 1;
					}



					.price-box {
						display: flex;
						align-items: flex-end;

						.unit {
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #FF6633;
							line-height: 1.2;
							margin-right: 4rpx;
						}

						.num {
							font-size: 32rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #FF6633;
							line-height: 1;
						}
					}
				}

				.btn-box {
					box-sizing: border-box;
					display: flex;
					align-items: center;

					button {
						font-size: 28rpx;
						color: #F7F7F7;
						padding: 12rpx 20rpx !important;
						background-color: #2BC7B9 !important;
						line-height: inherit !important;
						margin: 0 !important;
						width: auto !important;
						font-weight: 500 !important;
						border-radius: none !important;
					}
				}
			}

		}
	}
</style>