businessCard/xiaochengxu/pageA/circle/friendSCirlce.vue

<template>
	<view class="u-page">
		<mescroll-uni :up="upOption" :down="downOption" ref="mescrollRef" @init="mescrollInit" @up="upCallback"
			@down="downCallback">
			<circle-item ref="mescrollItem" :list="list" @click="showInput = false" @doThumb="doThumb"
				@doComment="doComment"></circle-item>
		</mescroll-uni>
		<view class="bottom" v-if="showInput">
			<view class="bottom-bt">
				<input class="bottom-bt-input" placeholder="请输入内容" v-model="commentValue" />
				<text class="bottom-bt-button" @click="submitComment">发送</text>
			</view>
		</view>
		<image src="../../static/imgs/cirlce/add.png" mode="widthFix" class="add" @click="addCircle"></image>
		<u-action-sheet :show="show2" @close="show2 = false" @select="sheetSelect" :actions="actions2"
			cancelText="取消"></u-action-sheet>
	</view>
</template>

<script>
	var that;
	import circleItem from './circle-item.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
	import {
		friendlyDate
	} from '@/common/util.js';

	export default {
		mixins: [MescrollMixin],
		components: {
			circleItem
		},
		data() {
			return {
				formData: {
					circleFriendsId: '',
					commonId: '',
					head: '',
					nickname: '',
					interactionFlag: '',

				},
				userInfo: {},
				circleId: '',
				downOption: {
					auto: false,
					textColor: '#bbb'
				},
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					auto: false,
					noMoreSize: 1,
					textNoMore: '没有更多了~',
					textColor: '#bbb'
				},
				list: [],
				requestParams: {
					searchType: 1,
					latitude: 0,
					longitude: 0,
					pageSize: 10,
					pageNo: 1
				},

				show2: false,
				actions2: [{
					name: '删除'
				}],
				showInput: false
			};
		},
		onLoad(options) {
			that = this
			this.circleId = options.id
			this.userInfo = uni.getStorageSync("userInfo")
			// 需要固定swiper的高度 (需减去悬浮tabs的高度64rpx)
			// this.height = uni.getSystemInfoSync().windowHeight - uni.upx2px(100) + 'px';
			// this.tabHeight = uni.upx2px(100) + 'px';
			this.loadData(true);
		},
		methods: {
			addCircle() {
				console.log(1111)
				uni.navigateTo({
					url: "/pageA/circle/addFriendCirlce?id=" + this.circleId
				})
			},
			/*下拉刷新的回调 */
			downCallback() {
				// this.loadData(true);
				this.mescroll.resetUpScroll();
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				console.log('upCallback=================', page);
				this.requestParams.pageNo = page.num;
				this.requestParams.pageSize = page.size;
				this.loadData();
			},

			scroll() {},

			change(index) {
				console.log('change=========', index);
				this.requestParams.searchType = index + 1;
				this.loadData(true);
			},
			// 处理图片
			imageInfo(url) {
				let promise = new Promise(function(resolve, reject) {
					uni.getImageInfo({
						src: url,
						success: function(image) {
							resolve(image)
							console.log(image.width);
							console.log(image.height);
						}
					});
				})
				return promise
			},
			loadData(refresh) {
				this.$request.baseRequest('admin.unimall.circleFriendsInfo', 'list', {
					page: this.requestParams.pageNo,
					limit: this.requestParams.pageSize,
					circleId: this.circleId,
					currentCommonId: this.userInfo.id
				}, failres => {
					console.log('res+++++', failres.errmsg)
					uni.showToast({
						icon: "none",
						title: failres.errmsg,
						duration: 3000
					});
					uni.hideLoading()
				}).then(async res => {
					console.log(res)
					if (this.requestParams.pageNo.num == 1) this.list = [];
					let curPageLen = res.data.items.length;
					let totalPage = res.data.total;
					this.list = res.data.items
					for (let i = 0; i < this.list.length; i++) {
						this.list[i].urlList = this.list[i].image.split(",")
						if (this.list[i].mediaType == 2) {
							let _image = await this.imageInfo(this.list[i].image +
								'?x-oss-process=video/snapshot,t_1000,f_jpg,w_800,h_600,m_fast,ar_auto')
							console.log("_image", _image)
							if (_image.width > _image.height) {
								this.list[i].direction = 1
							} else {
								this.list[i].direction = 2
							}
						}
					}
					this.$nextTick(() => {
						that.mescroll.endBySize(curPageLen, totalPage)
					});
					uni.hideLoading()
				})
			},

			getCircleDetail(id, index) {
				let param = {
					id: id,
					searchType: 1,
					latitude: 0,
					longitude: 0
				};
				if (this.locateInformation.location) {
					param.latitude = this.locateInformation.location.lat;
					param.longitude = this.locateInformation.location.lng;
				}
				getCircleDetail({
						params: param
					})
					.then(res => {
						console.log('getCircleDetail====', res);
						if (res) {
							let data = res;
							if (data.mediaType == 1) {
								let arr = data.url.split(',');
								if (arr.length > 1) {
									let list = [];
									arr.forEach(item2 => {
										list.push(item2);
									});
									data.urlList = list;
								} else {
									data.urlList = arr;
								}
							}
							data.dateTime = friendlyDate(new Date(data.createTime.replace(/\-/g, '/')).getTime());
							this.list[index].thumbNumber = data.thumbNumber;
							this.list[index].commentNumber = data.commentNumber;
							this.list[index].thumbed = data.thumbed;
							this.list[index].thumbs = data.thumbs;
							this.list[index].comments = data.comments;
							console.log('data====', data);
							console.log('index====', index);
							console.log('this.list====', this.list);
							this.$forceUpdate();
						} else {}
					})
					.catch(err => {
						console.log(err, 'catch');
					});
			},
			//点赞
			async doThumb(item) {
				if (item.helpFlag == 0) {
					this.formData = {
						circleFriendsId: item.id,
						commonId: this.userInfo.id,
						head: this.userInfo.head,
						nickname: this.userInfo.nickname
					}
					
					this.formData.interactionFlag = 1
					this.$request.baseRequest('admin.unimall.circleFriendsDetail', 'add', {
						circleFriendsDetail: JSON.stringify(this.formData)
					}, failres => {
						console.log('res+++++', failres.errmsg)
						uni.showToast({
							icon: "none",
							title: failres.errmsg,
							duration: 3000
						});
						uni.hideLoading()
					}).then(async res => {
						console.log(res)
						uni.showToast({
							icon: "success",
							title: '点赞成功！',
							duration: 2000
						});
						this.loadData()
					})
				} else {
					this.$request.baseRequest('admin.unimall.circleFriendsDetail', 'cancelLike', {
						circleFriendsId: item.id,
						commonId: this.userInfo.id,
					}, failres => {
						console.log('res+++++', failres.errmsg)
						uni.showToast({
							icon: "none",
							title: failres.errmsg,
							duration: 3000
						});
						uni.hideLoading()
					}).then(async res => {
						console.log(res)
						uni.showToast({
							icon: "success",
							title: '取消成功！',
							duration: 2000
						});
						this.loadData()
					})
				}
			},

			doComment(item, comment) {debugger
				this.selectedComment = comment;
				if(!this.selectedComment){
					this.selectedComment.id = ''
				}
				this.selectedCircle = item;
				if (comment != null && comment.userId == this.userInfo.id) {
					this.show2 = true;
					return;
				}
				this.showInput = !this.showInput;
				this.commentValue = '';
				this.$forceUpdate();
			},

			async submitComment() {
				debugger
				// if (!this.commentValue) {
				// 	uni.$u.toast('请输入内容');
				// 	return;
				// }
				
				this.formData = {
					circleFriendsId: this.selectedCircle.id,
					commonId: this.userInfo.id,
					head: this.userInfo.head,
					nickname: this.userInfo.nickname,
					commentContent:this.commentValue,
					commentId:this.selectedComment.id,
					commentName:this.selectedComment.nickname,
				}
				
				this.formData.interactionFlag = 2
				this.$request.baseRequest('admin.unimall.circleFriendsDetail', 'add', {
					circleFriendsDetail: JSON.stringify(this.formData)
				}, failres => {
					console.log('res+++++', failres.errmsg)
					uni.showToast({
						icon: "none",
						title: failres.errmsg,
						duration: 3000
					});
					uni.hideLoading()
				}).then(async res => {
					console.log(res)
					uni.showToast({
						icon: "success",
						title: '评论成功！',
						duration: 2000
					});
					this.loadData()
				})
				
				// let params = {
				// 	comment: this.commentValue,
				// 	circleId: this.selectedCircle.id,
				// 	circleUserId: this.selectedCircle.userId
				// };
				// if (this.selectedComment) {
				// 	let tmp = {
				// 		pid: this.selectedComment.id,
				// 		comUserId: this.selectedComment.userId
				// 	};
				// 	params = uni.$u.deepMerge(params, tmp);
				// }
				// let res = await addComment(params);
				// if (res) {
				// 	uni.$u.toast('评论成功');
				// 	this.getCircleDetail(this.selectedCircle.id, this.selectedCircle.index);
				// }
			},

			sheetSelect(val) {
				console.log('---sheetSelect---');
				this.doDelComment();
			},

			async doDelComment() {
				let params = {
					id: this.selectedComment.id,
					circleId: this.selectedComment.circleId
				};
				let res = await delComment(params);
				console.log('doDelComment', res);
				if (res) {
					uni.$u.toast('删除成功');
					this.getCircleDetail(this.selectedCircle.id, this.selectedCircle.index);
				}
			}
		}
	};
</script>

<style lang="scss">
	.u-swiper {
		position: relative;
	}

	.bottom {
		bottom: 0;
		position: fixed;
		height: 120upx;
		width: 750upx;
		// padding: 0 20upx;
		background-color: #eee;
		align-items: center;
		justify-content: center;
		display: flex;
		z-index: 999;
	}

	.bottom-bt {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.bottom-bt-input {
		width: 550upx;
		height: 70upx;
		padding: 0 15upx;
		border-radius: 10upx;
		background-color: #fff;
		margin-right: 20upx;
		font-size: 28upx;
		color: #333;
	}

	.bottom-bt-button {
		padding: 0 20upx;
		height: 55upx;
		line-height: 55upx;
		background-color: #344577;
		font-size: 28upx;
		color: #fff;
		border-radius: 10upx;
	}

	.add {
		width: 84rpx;
		height: auto;
		position: fixed;
		bottom: 200rpx;
		right: 30rpx;
		height: auto;
		z-index: 999;
	}
</style>