businessCard/xiaochengxu/pageA/circle/circle-item.vue

<template>
	<!-- <mescroll-uni :ref="'mescrollRef' + i" @init="mescrollInit" :height="height" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick" @scroll="scroll"> -->
	<view class="u-demo-block">
		<view class="u-demo-block__content" v-for="(item, index) in list" :key="index" @touchstart="click">
			<view class="album" style="padding: 30upx;">
					<image :src="item.head" mode="" style="width: 80upx;height: 80upx;border-radius: 10rpx;"></image>
				<view class="album__content">
					<view class="album__info">
						<text class="info-name" @click="toDetail(item)">{{ item.nickname }}</text>
						<text class="info-content" @click="toDetail(item)">{{ item.content }}</text>
						<template v-if="item.mediaType == 1">
							<u-album v-if="item.urlList && item.urlList.length > 1" :urls="item.urlList" multipleSize="90" space='10'></u-album>
							<u-album v-else :urls="item.urlList" singleSize='150'></u-album>
						</template>
						<view v-else class="video">
								<video v-show="isShowVideo"
									class="video-info"
									:show-center-play-btn="false"
									:src="item.image"
									id="myVideo"
									:autoplay="true"
									:loop="true"
									:controls= "true"
								></video>
							<view v-if="item.direction==1&&!isShowVideo" class="relative">
								<image :src="item.image + '?x-oss-process=video/snapshot,t_1000,f_jpg,w_800,h_600,m_fast,ar_auto'" mode="aspectFill" style="width: 424rpx;height:320rpx"></image>
								<image class="cover" src="/static/play.png" @click="playVideo"></image>
							</view>
							<view v-if="item.direction==2&&!isShowVideo" class="relative">
								<image :src="item.image + '?x-oss-process=video/snapshot,t_1000,f_jpg,w_800,h_600,m_fast,ar_auto'" mode="aspectFill" style="width: 320rpx;height:424rpx"></image>
								<image class="cover1" src="/static/play.png" @click="playVideo"></image>
							</view>
						</view>
					</view>
					<view class="location" v-if="item.location">
						<view class="location-left">
							<text class="location-left-name">{{ item.location }}</text>
						</view>
					</view>
					<view class="time">
							<text class="time-text">{{$u.timeFrom(new Date(item.gmtCreate).getTime(),'yyyy年mm月dd日')}}</text>
						</view>
					<view class="comment">
						<text class="time-text">{{ item.dateTime }}</text>
						<view class="comment-right">
							<view class="comment-item" @click="doThumb(item, index)">
								<image class="image-love" :src="item.helpFlag==1 ? '../../static/love-fill.png' : '../../static/love.png'"></image>
								<text class="number">{{ item.count }}</text>
							</view>
							<view class="comment-item" @click="doComment(item, null, index)">
								<image class="image-comment" src="../../static/comment.png"></image>
								<text class="number">{{ item.count1 }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="thumb-comment" v-if="(item.circleFriendsDetailList&&item.circleFriendsDetailList.length > 0)||(item.circleFriendsDetailList1&&item.circleFriendsDetailList1.length > 0)">
				<view class="thumbs" v-if="item.circleFriendsDetailList&&item.circleFriendsDetailList.length > 0">
					<image class="image-love thumbs-icon" src="../../static/love.png"></image>
					<view class="thumbs-headers">
						<view class="thumbs-headers-img" v-for="(item2, index2) in item.circleFriendsDetailList" :key="index2">
							<view class="thumbs-item">
								<text class="thumbs-name">{{ item2.nickname }}</text>
								<text class="thumbs-name" v-if="index2 != item.circleFriendsDetailList.length - 1">,</text>
							</view>
						</view>
						<text class="thumbs-headers-img thumbs-headers-more" v-if="item.circleFriendsDetailList.length > 20">等</text>
					</view>
				</view>
				<view class="comments" v-if="item.circleFriendsDetailList1&&item.circleFriendsDetailList1.length > 0">
					<image class="image-comment comments-icon" src="../../static/comment.png"></image>
					<view class="comments-headers">
						<view class="comments-headers-item" v-for="(item3, index3) in item.circleFriendsDetailList1" :key="index3">
							<view class="item-left">
								<u-avatar :src="item3.head" shape="square" size="32"></u-avatar>
							</view>
							<view class="item-right">
								<view class="item-right-name">
									<text class="item-right-name-top">{{ item3.nickname }}</text>
									<text class="item-right-name-bottom">{{$u.timeFrom(new Date(item3.gmtCreate).getTime(),'yyyy年mm月dd日')}}</text>
								</view>
								<view class="comment-content">
									<view class="comment-response" v-if="item3.commentName">
										<text class="comment-response-txt">回复</text>
										<text class="comment-response-name">{{ item3.commentName }}</text>
										<text class="comment-response-txt">:</text>
									</view>
									<text class="item-right-info" @click="doComment(item, item3, index)">{{ item3.commentContent }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-line></u-line>
		</view>
	</view>
	<!-- </mescroll-uni> -->
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import MescrollMoreItemMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js';
// import { apiGoods } from '@/api/mock.js';

export default {
	mixins: [MescrollMixin, MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
	data() {
		return {
			isShowVideo:false,
			videoContext:'',
			downOption: {
				auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
			},
			upOption: {
				onScroll: true,
				auto: false, // 不自动加载
				// page: {
				// 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
				// 	size: 10 // 每页数据的数量
				// },
				noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				empty: {
					tip: '空空如也', // 提示
					icon: 'http://cdn.uviewui.com/uview/empty/data.png'
				}
			},
			showInput: false
		};
	},
	props: {
		list: {
			type: Array,
			default: function(e) {
				return [];
			}
		}
	},
watch:{
	list:{
		handler:async function (newVal,oldVal){
			this.list = newVal;
		}
	},
},
	computed: {
		...mapState(['locateInformation'])
	},

	created() {},

	filters: {
		formatDistance(distance) {
			var strDistance = '';
			if (distance < 1) {
				//一公里以内的
				strDistance = distance * 1000 + 'm';
			} else {
				distance = distance.toFixed(1);
				strDistance = distance + 'km';
			}
			return strDistance;
		}
	},

	methods: {
		playVideo(val) {
			this.isShowVideo = true
			console.log('--play--');
			// 点击显示全屏
			this.videoContext = uni.createVideoContext('myVideo')
			this.videoContext.requestFullScreen();
		},

		onJump(url) {
			uni.navigateTo({
				url: url
			});
		},

		toDetail(item) {
			uni.navigateTo({
				url: '/pageA/circle/circleDetail?item=' + JSON.stringify(item)
			});
		},

		click() {
			this.$emit('click');
		},

		doThumb(item, index) {
			item.index = index;
			this.$emit('doThumb', item);
		},

		doComment(item, comment, index) {
			item.index = index;
			this.$emit('doComment', item, comment);
		},

		doComment2Com(item, comment) {
			this.$emit('doComment2Com', item, comment);
		}
	}
};
</script>
<style lang="scss">
.view {
	flex-direction: column;
}
.album {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}
.album__avatar {
	background-color: #fff;
	padding: 5px;
	border-radius: 3px;
}
.album__content {
	margin-left: 10px;
	flex: 1;
}
.album__info {
	margin-bottom: 15upx;
	display: flex;
	flex-direction: column;
}
.info-name {
	color: #5786cc;
	font-size: 30upx;
	font-weight: bold;
}
.info-content {
	color: #333;
	font-size: 30upx;
	padding: 5px 0 8px 0;
}
.video {
	position: relative;
	image {
		width: 100%;
		height: 180px;
	}
	.cover {
	width: 50px;
	    height: 50px;
	    position: absolute;
	    z-index: 5;
	    left: -180rpx;
	    right: 0;
	    bottom: 0;
	    top: 0;
	    margin: auto;
	}
	.cover1 {
	width: 50px;
	    height: 50px;
	    position: absolute;
	    z-index: 5;
	    left: -270rpx;
	    right: 0;
	    bottom: 0;
	    top: 0;
	    margin: auto;
	}
}
.video-info {
	width: 280px;
	height: 200px;
}
.video-cover {
	position: absolute;
	top: 0;
	left: 0;
	width: 270px;
	height: 200px;
}
.location {
}
.location-left {
	display: flex;
	flex-direction: row;
}
.location-left-name {
	font-size: 24upx;
	color: #5786cc;
}
.location-left-distance {
	margin-left: 30upx;
	font-size: 24upx;
	color: #5786cc;
}

.location-right {
	color: #999;
	font-size: 24upx;
}

.time-text {
	color: #666;
	font-size: 24upx;
}

.comment {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin-top: 15upx;
}

.comment-right {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.comment-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-left: 40upx;
	color: #666;
}

.image-love {
	width: 32upx;
	height: 32upx;
	margin-right: 6upx;
}
.image-comment {
	width: 30upx;
	height: 30upx;
	margin-right: 8upx;
}

.number {
	color: #666;
	padding-left: 5upx;
	font-size: 26upx;
}
.yzb {
	margin-right: 8upx;
}
.yzb-pinglun1 {
}
.thumb-on {
	font-size: 32upx;
	color: red;
}
.thumb-off {
	font-size: 32upx;
}

.thumb-comment {
	padding: 20upx;
}
.thumbs {
	padding: 20upx;
	border-radius: 10upx;
	background-color: #f8f8f8;
	display: flex;
	flex-direction: row;
	align-items: center;
}
.thumbs-icon {
	margin-right: 10upx;
	color: #666;
	/* margin-top: 5upx; */
}

.thumbs-headers {
	display: flex;
	flex-direction: row;
	align-items: center;
	overflow: hidden;
	white-space: nowrap;
	flex-wrap: wrap;
	flex: 1;
}
.thumbs-headers-img {
	margin-left: 10upx;
	margin-bottom: 10upx;
}

.thumbs-headers-more {
	font-size: 30upx;
	color: #999;
}

.thumbs-item {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.thumbs-name {
	font-size: 28upx;
	color: #5786cc;
}

.comments {
	margin-top: 1upx;
	padding: 20upx;
	border-radius: 10upx;
	background-color: #f8f8f8;
	display: flex;
	flex-direction: row;
}
.comments-icon {
	margin-right: 10upx;
	color: #666;
	margin-top: 15upx;
	font-size: 24upx;
}
.comments-headers {
	flex: 1;
	display: flex;
	flex-direction: column;
}
.comments-headers-item {
	flex: 1;
	display: flex;
	flex-direction: row;
	/* align-items: center; */
	margin-bottom: 20upx;
}
.item-left {
	margin: 0 10upx;
	margin-top: 10upx;
}
.item-right {
	margin-left: 5upx;
	display: flex;
	flex: 1;
	flex-direction: column;
}
.item-right-name {
	display: flex;
	flex: 1;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.item-right-name-top {
	color: #5786cc;
	font-size: 26upx;
}
.item-right-name-bottom {
	font-size: 24upx;
	color: #999;
	margin-top: 10upx;
}
.item-right-info {
	font-size: 28upx;
	color: #333;
	flex: 1;
}

.comment-content {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	margin-top: 3upx;
	flex: 1;
}
.comment-response {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-right: 10upx;
}
.comment-response-txt {
	font-size: 28upx;
}
.comment-response-name {
	font-size: 28upx;
	color: #5786cc;
	padding: 0 8upx;
}

.bottom {
	bottom: 0;
	position: fixed;
	height: 120rpx;
	width: 100%;
	padding: 0 20rpx;
	box-sizing: border-box;
	background-color: #f8f8f8;
	align-items: center;
	justify-content: center;
	display: flex;

	.bottom-bt {
		display: flex;
		flex-direction: row;
		align-items: center;
		input {
			width: 550rpx;
			height: 70rpx;
			padding: 0 15rpx;
			border-radius: 10rpx;
			background-color: #fff;
			margin-right: 20rpx;
		}
		button {
			padding: 0 20rpx;
			height: 60rpx;
			line-height: 60rpx;
			background-color: #12ae85;
			color: #fff;
			font-size: 28rpx;
		}
	}
}
</style>