safetyHome_wxapp/pages/circle/circles.vue

<!-- 邻里圈 -->
<template>
	<view>
		<view style="width: 100%;height: 600rpx;position: relative;">
			<image src="../../static/care_family.png" style="width: 100%;height:100%;"></image>
			<view style="height:44rpx;font-size:32rpx;font-family:PingFang SC;font-weight:bold;color:rgba(255,255,255,1);position: absolute;bottom: 20rpx;right: 194rpx;">星河</view>
			<view style="width: 132rpx;height: 132rpx;position: absolute;right: 34rpx;bottom: -30rpx;border-radius:14rpx;">
				<image src="../../static/complain_icon_complain@2x.png" style="width: 100%;height: 100%;"></image>
			</view>
		</view>
		<view class="content">
			<view class="navTitle" :style="{marginTop:phoneHeight + 'px'}" style="padding-top: 20rpx;">邻里圈</view>
			<image src="../../static/camera.png" style="width: 39rpx;height: 31rpx;margin-top: 30rpx;margin-left: 688rpx;" @tap="publish()"></image>
		</view>
		<!-- 邻里圈内容 -->
		<view class="main">
			<view v-for="(item,index) in data" :key="index" class="mainInfo">
			<view class="item" >
				<!-- 头像 -->
				<view class="left">
					<image :src="item.photo" style="width: 86rpx;height:86rpx;"></image>
				</view>
				<!-- 发布内容 -->
				<view class="right">
					<view class="name">{{item.name}}</view>
					<view class="text">
						{{item.content}}
					</view>
					<!-- 图片内容 -->
					<view class="img" v-if="item.imgArr.length==1">
						<image :src="img" style="width: 246rpx;height: 420rpx;" v-for="(img,index) in item.imgArr" :key="index"></image>
					</view>
					<view class="img" v-else style="display: flex;flex-wrap: wrap;">
						<image :src="img" style="width:180rpx;height:180rpx;margin-right: 10rpx;margin-bottom: 10rpx;" v-for="(img,index) in item.imgArr" :key="index"></image>
					</view>
					<view style="width: 100%;height: 42rpx;display: flex;justify-content: space-between;margin-bottom:20rpx ;margin-top: 30rpx;position: relative;">
						<!-- 点赞评论弹窗 -->
						<view class="dailog" v-show="visible && index==talkIndex">
							<view class="leftIcon" @tap="clickZan">
								<image src="../../static/circle_icon_heart_nor@2x.png" style="width: 42rpx;height: 37rpx;margin-top: 10rpx;margin-left: 62rpx;"></image>
								<view class="leftIcon-text" v-show="item.status==1">
									赞
								</view>
								<view class="leftIcon-text" v-show="item.status==0">
									取消
								</view>
							</view>
							<view class="rightIcon" @tap="talk">
								<image src="../../static/circle_icon_comment@2x.png" style="width: 42rpx;height: 37rpx;margin-top: 10rpx;margin-left: 62rpx;"></image>
								<view class="leftIcon-text">
									评论
								</view>
							</view>
						</view>
						<view class="leftDate">
							{{item.date}}
						</view>
						<view class="meau" @tap="openDailog(index)">
							<image src="../../static/circle_icon_more@2x.png" style="width: 100%;height: 100%;"></image>
						</view>
					</view>
					<!-- 点赞 回复列表 -->
					<view class="list">
						<view class="zanList" >
							<view style="display: flex;margin-left: 28rpx;margin-top: 28rpx;margin-bottom: 28rpx;padding-right:2rpx;">
								<image src="../../static/circle_icon_heart_set@2x.png" style="width: 48rpx;height: 37rpx;margin-top: 5rpx;"></image>
								<view style="margin-left:8rpx ;">{{item.zanList}}</view>
							</view>
						</view>
						<!-- 回复内容 -->
						<view class="replayContent">
							<view style="margin-left: 16rpx;margin-top: 10rpx;" v-for="(list,index) in item.talkList" :key="index">
								<view class="talk" v-if="list.status==1">
									<text>{{list.name}} :<text>{{list.info}}</text></text>
								</view>
								<view class="replay" v-else>
									<text class="textInfo">{{list.replayName}}</text><text>回复</text>
									<text class="textInfo">{{list.name}}:</text><text class="textInfo">{{list.info}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			</view>
		</view>
		<!-- 评论 -->
		<!-- :style="{bottom:height==''?0:height + 'rpx' } " -->
		<view class="talkAbout" v-show="isTalk">
			<!--  -->
			<view class="leftContent">
				<input type="text" style="width: 100%;height: 100%;padding-left: 16rpx;" placeholder="评论" :focus="isFouce" @blur="bindBlur">
			</view>
			<view @tap="send" class="sendBtn">发送</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				talkIndex:0,
				phoneHeight: 0, //手机状态栏的高度
				visible: false, //判断弹窗显隐
				isShow: true, //判断点赞还是取消点赞
				isTalk: false,//
				isFouce: false,//判断是否聚焦
				height: '',
				//页面数据
				data: [
					{
					photo: '../../static/guarantee_icon_guarantee@2x.png',
					name: '明灯三千',
					content: '你是我温柔的归宿，你是我嘴角扬起来',
					imgArr: ["../../static/history_bgimage@2x.png"],
					show:false,
					date:'49分钟前',
					status:1,
					zanList:"明灯三千，sugar，小飞侠，大尾巴",
					talkList:[{status:1,name:'星河',info:'小飞侠来啦~'},{status:2,replayName:'星河入梦来',name:'星河',info:'谢谢我的宝贝儿~'}]
				}, 
				{
					photo: '../../static/guarantee_icon_guarantee@2x.png',
					name: '明灯',
					content: '你是我温柔的归宿，你是我嘴角扬起来',
					imgArr: ["../../static/history_bgimage@2x.png","../../static/history_bgimage@2x.png","../../static/history_bgimage@2x.png","../../static/history_bgimage@2x.png"],
					show:false,
					date:'49分钟前',
					status:1,
					zanList:"明灯三千，sugar，小飞侠，大尾巴",
					talkList:[{status:1,name:'星河',info:'小飞侠来啦~'},{status:2,replayName:'星河入梦来',name:'星河',info:'谢谢我的宝贝儿~'}]
				}, 
				]
			}
		},
		created() {
			// 获取状态栏的高度
			this.phoneHeight = uni.getSystemInfoSync().statusBarHeight
		},
		methods: {
			// 失去焦点
			bindBlur() {
				this.isTalk = false
				this.isFouce = false
			},
			// 获取焦点
			bindFouce(e) {
				console.log(e)
				this.height = e.detail.height

			},
			// 发送评论
			send() {
				this.isTalk = false
				this.isFouce = false
			},
			// 评论
			talk() {
				this.visible=false
				this.isTalk=true
				this.data[this.talkIndex].show=!this.data[this.talkIndex].show
				this.isFouce = true

			},
			// 打开点赞弹窗
			openDailog(index) {
				this.talkIndex=index
				this.visible=true
				// this.data[index].show=!this.data[index].show
			},
			//点赞
			clickZan() {
				this.visible = false
			},
			// 发布
			publish() {
				uni.navigateTo({
					url: "publish"
				})
			}

		}
	}
</script>

<style>
	.sendBtn {
		width: 150rpx;
		font-size: 28rpx;
		height: 60rpx;
		border-radius: 30rpx;
		text-align: center;
		background: rgba(87, 224, 135, 1);
		line-height: 60rpx;
		margin-left: 15rpx;
		margin-top: 35rpx;
		color: #FFFFFF;
	}

	.talkAbout {
		width: 100%;
		height: 120rpx;
		display: flex;
		position: fixed;
		bottom: 20rpx;
		background: rgba(247, 247, 247, 1);
		border-top: 1rpx solid #C0C0C0;
		margin-left: 10rpx;
	}

	.leftContent {
		width: 550rpx;
		height: 100rpx;
		background: #FFFFFF;
		margin-top: 15rpx;
		margin-left: 15rpx;
	}

	.leftIcon-text {
		max-width: 58px;
		height: 40px;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		margin-top: 10rpx;
		margin-left: 8rpx;

	}
	.mainInfo{
		width: 100%;
		border-bottom: 2rpx solid rgba(247, 247, 247, 1);
	}

	.rightIcon {
		width: 49%;
		height: 56rpx;
		display: flex;
		margin-top: 24rpx;
	}

	.dailog {
		width: 406rpx;
		height: 100rpx;
		background: rgba(47, 47, 47, 1);
		opacity: 1;
		border-radius: 10rpx;
		position: absolute;
		right: 88rpx;
		bottom: -25rpx;
		display: flex;
	}

	.leftIcon {
		width: 49%;
		height: 56rpx;
		display: flex;
		margin-top: 24rpx;
		border-right: 2px solid rgba(112, 112, 112, 1);
	}

	.textInfo {
		height: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(41, 138, 253, 1);
	}

	.talk {
		width: 100%;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(41, 138, 253, 1);
	}

	.replayContent {
		width: 100%;
		padding-bottom: 20rpx;
	}

	.zanList {
		width: 100%;
		background: rgba(247, 247, 247, 1);
		opacity: 1;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(41, 138, 253, 1);
		overflow: hidden;
		border-bottom: 2rpx solid rgba(221, 221, 221, 1);
	}

	.list {
		width: 100%;
		background: rgba(247, 247, 247, 1);
		opacity: 1;
		margin-bottom: 15rpx;
	}

	.meau {
		width: 66rpx;
		height: 42rpx;
	}

	.leftDate {
		width: 104rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		margin-top: 4rpx;
	}

	.img {
		width: 100%;
		padding-top: 20rpx;
	}

	.text {
		width: 100%;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		margin-top: 10rpx;
	}

	.name {
		width: 100%;
		height: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(41, 138, 253, 1);
	}

	.left {
		width: 86rpx;
		border-radius: 10rpx;
	}

	.right {
		width: 100%;
		margin-left: 16rpx;
	}

	.main {
		width: 100%;
		
		position: absolute;
		top: 722rpx;
	}

	.item {
		width: 666rpx;
		margin: 0 auto;
		display: flex;
		padding-top:20rpx ;

	}

	.content {
		width: 100%;
		position: absolute;
		top: 0;
		/* position: relative; */
	}

	.navTitle {
		width: 104rpx;
		height: 48rpx;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		margin: 0 auto;
	}
</style>