fengpingle/pages/share/share.vue

<template>
	<view class="content">
		<view class="vheigh"></view>
		<!-- <view class="top-bg">
			<view class="top" @click="clickSearch()">
				<view class="top-icon">
					<image src="../../static/icon/icon.png" mode=""></image>
				</view>
				<view class="top-main">输入关键词搜索</view>
			</view>
		</view> -->
		<!-- <view class="navbar">
			<view class="nav-item" :class="{ current: tabCurrentIndex === 0 }" @click="tabClick('0')">笔记素材</view>
			<view class="nav-item" :class="{ current: tabCurrentIndex === 1 }" @click="tabClick('1')">买家反馈</view>
		</view> -->
		<swiper :current="tabCurrentIndex" :style="{ height: height }" class="swiper-box" duration="300"
			@change="changeTab">
			<swiper-item class="tab-content">
				<scroll-view scroll-y="true" class="list-scroll-content">
					<view class="main" v-for="(item, index) in bjsclist" :key="index"
						@click="navTo('/pages/zc/wzDetail?id=' + item.id)">
						<view class="main-userInfo">
							<view class="avatar">
								<image src="../../static/icon/fire.png" mode=""></image>
							</view>
							<view class="main-user-info">
								<view class="main-userName">{{ item.author }}</view>
								<view class="main-user-time">2022-12-20 20:52</view>
							</view>
						</view>
						<view class="main-info">{{ item.synopsis }}</view>
						<!-- <sunuiGrand :content="item.synopsis" clamp="4" expandText="全文" shinkText="收起" bg="#ffffff"></sunuiGrand> -->
						<!-- <view class="imagebox">
							<view class="image-item" v-for="(itm, inx) in item.share_images"><image :src="itm" mode=""></image></view>
						</view> -->
						<view class="main-bottom flex">
							<view class="main-bottom-item" @click.stop="navTo('/pages/zc/wzshare?id=' + item.id)">
								<view class="main-bottom-icon">
									<image src="../../static/icon/pyq.png" mode=""></image>
								</view>
								<view class="main-bottom-font">朋友圈</view>
							</view>
							<button class="main-bottom-item" open-type="share" @click.stop="seave(item)">
								<view class="main-bottom-icon1">
									<image src="../../static/icon/wxhy.png" mode=""></image>
								</view>
								<view class="main-bottom-font">微信好友</view>
							</button>
							<view class="main-bottom-item" @click.stop="wzdz(item)">
								<view class="main-bottom-icon" v-if="item.user_good == 1">
									<image src="../../static/icon/zanguo.png" mode=""></image>
								</view>
								<view class="main-bottom-icon" v-else>
									<image src="../../static/icon/zan.png" mode=""></image>
								</view>
								<view class="main-bottom-font">{{ item.goods_count }}</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<!-- <swiper-item class="tab-content">
				<scroll-view scroll-y="true" class="list-scroll-content">
					<view class="info">
						<view class="info-item" v-for="(item, index) in mjfklist" :key="index"
							@click="navTo('/pages/zc/plDetail?id=' + item.id)">
							<view class="info-image">
								<image :src="item.main_pic" mode=""></image>
							</view>
							<view class="info-name clamp">{{ item.title }}</view>
							<view class="info-userinfo flex">
								<view class="info-left">
									<view class="info-avatar">
										<image :src="item.avatar" mode=""></image>
									</view>
									<view class="info-userinfo-name">{{ item.nickname }}</view>
								</view>
								<view class="info-right" @click.stop="pldz(item)">
									<view class="info-avatar" v-if="item.user_good == 0">
										<image src="../../static/icon/zan.png" mode=""></image>
									</view>
									<view class="info-avatar" v-if="item.user_good == 1">
										<image src="../../static/icon/zanguo.png" mode=""></image>
									</view>
									<view class="info-userinfo-name">{{ item.goods_count }}</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item> -->
		</swiper>
	</view>
</template>

<script>
	import {
		article
	} from '@/api/user.js';
	import {
		reply_list
	} from '@/api/product.js';
	import {
		article_good,
		reply_good
	} from '@/api/activity.js';
	import sunuiGrand from '@/components/sunui-grand/sunui-grand.vue';
	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.image_input[0],
					title: this.share.title
				};
				console.log('data', data);
				return data;
			}
		},
		// #endif
		components: {
			sunuiGrand
		},
		data() {
			return {
				tabCurrentIndex: 0,
				height: '',
				bjsclist: '',
				mjfklist: '',
				share: ''
			};
		},
		onLoad() {},
		onShow() {
			this.loadData();
		},
		onReachBottom() {},
		onReady(res) {
			var _this = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.swiper-box').boundingClientRect();
					query.exec(function(res) {
						_this.height = resu.windowHeight - res[0].top + 'px';
						console.log('打印页面的剩余高度', _this.height);
					});
				},
				fail: res => {}
			});
		},
		methods: {
			seave(item) {
				this.share = item;
			},
			clickSearch() {
				uni.navigateTo({
					url: '/pages/product/search'
				});
			},
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
				this.loadData();
			},
			tabClick(index) {
				this.tabCurrentIndex = index;
				this.loadData();
			},
			// 文章点赞
			wzdz(item) {
				article_good({}, item.id).then(e => {
					if (item.user_good == 0) {
						item.user_good = 1;
						item.goods_count += 1;
					} else {
						item.user_good = 0;
						item.goods_count -= 1;
					}
				});
			},
			// 评论点赞
			pldz(item) {
				reply_good({}, item.id).then(e => {
					if (item.user_good == 0) {
						item.user_good = 1;
						item.goods_count += 1;
					} else {
						item.user_good = 0;
						item.goods_count -= 1;
					}
				});
			},
			navTo(url) {
				uni.navigateTo({
					url
				});
			},
			async loadData(source) {
				let obj = this;
				if (this.tabCurrentIndex == 0) {
					article({
								page: 1,
								limit: 1000
							},
							1
						)
						.then(({
							data
						}) => {
							this.bjsclist = data;
						})
						.catch(e => {
							console.log(e);
						});
				} else {
					reply_list({
								page: 1,
								limit: 1000
							},
							0
						)
						.then(({
							data
						}) => {
							this.mjfklist = data;
						})
						.catch(e => {
							console.log(e);
						});
				}
			}
		}
	};
</script>

<style lang="scss">
	.vheigh {
		height: var(--status-bar-height);
		background-color: #ffffff;
	}

	button {
		padding: 0;
		margin: 0;
		border: none;
		background-color: #ffffff;
		line-height: 1;
		height: auto;
	}

	button::after {
		border: none;
	}

	page,
	.content {
		min-height: 100%;
		height: auto;
	}

	.top-bg {
		padding-top: 20rpx;
		background: #ffffff;
	}

	.list-scroll-content {
		background: #ffffff;
		height: 100%;

		.yan {
			padding-bottom: 100rpx;
		}
	}

	.top {
		width: 689rpx;
		height: 58rpx;
		background: #ededed;
		border-radius: 29rpx;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;

		.top-icon {
			width: 32rpx;
			height: 32rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.top-main {
			margin-left: 20rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #cbcbcb;
		}
	}

	.navbar {
		display: flex;
		height: 88rpx;
		padding: 0 5px;
		background: #ffffff;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
		position: relative;
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: #999999;
			position: relative;

			&.current {
				color: #000;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid #000000;
				}
			}
		}
	}

	.main {
		margin-top: 20rpx;
		padding: 35rpx 20rpx 24rpx;
		background: #ffffff;

		image {
			width: 100%;
			height: 100%;
		}

		.main-userInfo {
			display: flex;
			align-items: center;

			.avatar {
				width: 80rpx;
				height: 80rpx;
				background: #ffffff;
				border-radius: 50%;
			}

			.main-user-info {
				margin-left: 14rpx;
				line-height: 1;

				.main-userName {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #000000;
				}

				.main-user-time {
					margin-top: 14rpx;
					font-size: 21rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
				}
			}
		}

		.main-info {
			margin-top: 20rpx;
		}

		.imagebox {
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.image-item {
				margin: 10rpx;
				width: 30%;
				height: 230rpx;
			}
		}

		.main-bottom {
			margin-top: 60rpx;

			.main-bottom-item {
				padding: 30rpx 0;
				width: 33%;
				display: flex;
				justify-content: center;
				align-items: center;

				.main-bottom-icon {
					width: 36rpx;
					height: 36rpx;
				}

				.main-bottom-icon1 {
					width: 43rpx;
					height: 36rpx;
				}

				.main-bottom-icon2 {
					width: 36rpx;
					height: 36rpx;
				}

				.main-bottom-font {
					margin-left: 17rpx;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}
		}
	}

	.info {
		padding: 10rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		image {
			width: 100%;
			height: 100%;
		}

		.info-item {
			width: 48%;
			padding-bottom: 20rpx;

			.info-image {
				width: 100%;
				height: 480rpx;
			}

			.info-name {
				margin-top: 20rpx;
				padding: 0 10rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000000;
			}

			.info-userinfo {
				margin-top: 20rpx;
				padding: 0 10rpx;

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

					.info-avatar {
						width: 32rpx;
						height: 32rpx;
					}
				}

				.info-userinfo-name {
					margin-left: 10rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #999999;
				}

				.info-right {
					display: flex;
					align-items: center;

					.info-avatar {
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
		}
	}
</style>