bigdata_WX/pages/expertDiagnosis/exchangeShare.vue

<template>
	<view>
		<view class="status_bar"></view>
		<view class="" style="position: relative;top: 40px;">
			<view style="position: fixed;z-index: 100;">
				<uni-nav-bar @clickLeft="clickLeft" left-icon="back" left-text="返回" title="交流圈">
				</uni-nav-bar>
			</view>
			<u-action-sheet :list="actionSheetList" v-model="post_show" @click="message"></u-action-sheet>
			<view class="invitations">
				<view class="invitations_item" v-for="(items,index) in invitation" :key="index" @click="particulars(items)">
					<view class="invitations_item_left">
						<image :src="items.img_urls" mode="" v-if="items.img_urls!='' && items.img_urls!=null"></image>
						<image :src="$imageURL+'/projectimg'+defaultimg" mode="" v-else></image>
					</view>
					<view class="invitations_item_right">
						<view class="invitations_item_right_top">
							<image :src="$imageURL+'/bigdata_app'+'/image/expertDiagnosis/6940a11a251770f1b0d8b7b10ebdf9b.png'" mode="" v-if="Number(items.heat) == 1"></image>
							<span>{{items.title}}</span>
						</view>
						<view class="invitations_item_right_contert" v-html="items.content">
						</view>
						<view class="invitations_item_right_bot">
							<image :src="$imageURL+'/bigdata_app'+'/image/expertDiagnosis/d2014837228702eeceb762bc5302b3f.png'" mode=""></image>
							<span>{{items.username}}</span>
							<p>查看详情</p>
						</view>
						<view class="delinvit" v-if="myTF" @click.stop="delinvit(items.lower)">
							删除
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="addindent" @click="postmessage">
			发 帖
		</view>
		<view class="top" v-if="isTop" @click="top">
			<image :src="$imageURL+'/bigdata_app'+'/image/6209a98f0cb3b5086f2ca36152c9269.png'" mode=""></image>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				// pest.pests.pests_heat_rank
				invitation: [],
				actionSheetList: [{
					text: "我的发帖"
				}, {
					text: "我要发帖"
				}],
				post_show: false,
				defaultimg: '/images/expertDiagnosis/img01.png',
				page:1,
				myTF:false ,//判断是全部发帖还是我的发帖
				isTop:false
			}
		},
		methods: {
			async getInvitation(str) { //获取全部发帖 自己发帖"my"
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=pest.pests.pests_answers_list',
					data: {
						screen:str,
						page:this.page,
						page_size:10
					}
				})
				this.invitation = this.invitation.concat(res.data)
				for (var i = 0; i < this.invitation.length; i++) {
					var index1 = this.invitation[i].content.indexOf("/>") + 2
					var index2 = this.invitation[i].content.indexOf('<img')
					var str = this.invitation[i].content.slice(index2, index1)
					this.invitation[i].content = this.invitation[i].content.replace(str, '')
				}
				console.log(this.invitation)
			},
			//pest.pests.del_pests_card删除帖子
			async delInvitation(data) { //获取全部发帖 自己发帖"my"
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=pest.pests.del_pests_card',
					data: {
						lower:data,
						card:1  
					}
				})
				if(res.code==200){
					this.$forceUpdate()
				}
			},
			clickLeft() {
				uni.navigateTo({
					url: './index'
				})
			},
			particulars(items) { //详情页
				uni.navigateTo({
					url: "particulars?items=" + items.id
				})
			},
			postmessage() { //发帖
				this.post_show = true
			},
			message(index) {
				if (this.actionSheetList[index].text.includes("我要发帖")) {
					uni.navigateTo({
						url: "./postmessage"
					})
				} else if (this.actionSheetList[index].text.includes("我的发帖")) {
					this.actionSheetList[index].text = "全部发帖"
					this.page = 1
					let str = "my"
					this.invitation = []
					this.getInvitation(str)
					this.myTF = true
				} else if (this.actionSheetList[index].text.includes("全部发帖")) {
					this.page = 1
					let str = ""
					this.invitation = []
					this.getInvitation(str)
					this.myTF = false
				}
			},
			delinvit(items){
				uni.showModal({
				    title: '提示',
				    content: '是否删除该帖子？',
				    success: (res)=> {
				        if (res.confirm) {
				            this.delInvitation(items)
							this.page = 1
							let str = "my"
							this.invitation = []
							this.getInvitation(str)
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
				
			},
			top() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 500
				})
			}
		},
		onLoad() {
			let str = ""
			this.getInvitation(str)
		},
		onReachBottom(){
			this.page ++ 
			if(this.myTF){
				let str = "my"
				this.getInvitation(str)
			}else{
				let str = ""
				this.getInvitation(str)
			}
		},
		onBackPress(options) {
			if (options.from === 'navigateBack') {
				return false;
			}
			this.clickLeft();
			return true;
		},
		onPageScroll(e) { //nvue暂不支持滚动监听，可用bindingx代替
			if (e.scrollTop > 200) { //距离大于200时显示
				this.isTop = true
			} else { //距离小于200时隐藏
				this.isTop = false
			}
		},
	}
</script>

<style lang="scss">
	.right_icon {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: 26rpx;
		right: 26rpx;
	}

	.invitations {
		width: 100%;
		position: relative;
		top: 88rpx;
		margin-bottom: 50px;
		.invitations_item {
			width: 90%;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			padding: 30rpx 0;

			.invitations_item_left {
				width: 26%;

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

			.invitations_item_right {
				width: 71%;
				position: relative;
				
				.invitations_item_right_top {
					width: 100%;

					image {
						width: 32rpx;
						height: 32rpx;
						margin: 0 16rpx 0 0;
						vertical-align: text-bottom;
					}

					span {
						font-weight: 700;
					}
				}
				.delinvit{
					position: absolute;
					right: 0;
					top: 0;
					color: #ff0000;
				}
				.invitations_item_right_contert {
					width: 100%;
					margin: 10rpx 0;
					overflow: hidden;
					-webkit-line-clamp: 2;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
				}

				.invitations_item_right_bot {
					display: flex;
					position: absolute;
					bottom: 12rpx;
					height: 50rpx;
					width: 100%;

					image {
						width: 50rpx;
						height: 50rpx;
						position: absolute;
					}

					span {
						color: #B9B9B9;
						margin-left: 74rpx;
						line-height: 50rpx;
					}

					p {
						width: 100rpx;
						height: 40rpx;
						font-size: 24rpx;
						border: 2rpx solid #5FAE50;
						line-height: 40rpx;
						padding: 0 10rpx;
						position: absolute;
						right: 0;
						top: 6rpx;
						color: #5FAE50;
					}
				}
			}
		}
	}
	.addindent{
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		background-color: #71cd9a;
		color: #ffffff;
		font-size: 16px;
		z-index: 100;
	}
	.top { 
		position: fixed;
		right: 30px;
		bottom: 100px;
		z-index: 100;
		image{
			width: 100rpx;
			height: 100rpx;
		}
	}
</style>