qjm/pages/zc/zc.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>
						<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="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 { articleList } 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) {
				articleList(
					{
						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;
			}
		}
	}
	.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>