dreamland/lib/community/y-DiaryItem/y-DiaryItem.vue

<template>
	<view class="cu-card dynamic no-card">
		<view class="cu-item shadow">
			<view class="cu-list menu-avatar">
				<view class="cu-item">
					<image :src="item.user.avatar" mode="widthFix" class="cu-avatar round lg"></image>
					<view class="content flex-sub">
						<view>{{ item.user.username }}</view>
						<view class="text-gray text-sm flex justify-between">
							{{ item.cdate_string }}
						</view>
					</view>
				</view>
			</view>
			<view class="text-content">
				{{ item.content }}
			</view>
			<view v-if="item.pic.length > 0">
				<view class="grid flex-sub padding-lr col-1" v-if="item.pic.length == 1">
					<view @tap.stop @tap="Dever.viewPic(item.pic, child)" class="bg-img only-img" :style="{backgroundImage: 'url('+child+')'}"
					 v-for="(child, idx) in item.pic" :key="idx">
					</view>
				</view>
				
				<view class="grid flex-sub padding-lr col-3 grid-square" v-if="item.pic.length > 1">
					<view @tap.stop @tap="Dever.viewPic(item.pic, child)" class="bg-img" :style="{backgroundImage: 'url('+child+')'}"
					 v-for="(child, idx) in item.pic" :key="idx">
					</view>
					
				</view>
			</view>
			<view class="text-gray text-sm text-right padding">
				<view class="icon-display" @click="updateOppose">
					<text class="cuIcon-flashbuyfill margin-lr-xs" :class="item.is_oppose ? 'text-red' : ''"></text> {{item.num_oppose}}
				</view>
				<view class="icon-display" @click="updateUp">
					<text class="cuIcon-appreciatefill margin-lr-xs" :class="item.is_up ? 'text-red' : ''"></text> {{item.num_up}}
				</view>
				<view class="icon-display"  @click="updateComment(20, item.id)">
					<text class="cuIcon-messagefill margin-lr-xs"></text> {{item.num_comment}}
				</view>
			</view>

			<view class="cu-list menu-avatar comment solids-top" v-if="fetch.info.length">
				<view class="cu-item" v-for="(v, k) in fetch.info" :key="k">
					<image :src="v.user.avatar" mode="widthFix" class="cu-avatar round"></image>
					<view class="content">
						<view class="text-grey">{{v.user.username}}</view>
						<view class="text-grays text-content text-df">
							{{v.content}}
						</view>
						<view class="bg-greys padding-sm radius margin-top-sm  text-sm">
							<view class="flex">
								<view>凯尔：</view>
								<view class="flex-sub">妹妹，你在帮他们给黑暗找借口吗?</view>
							</view>
						</view>
						<view class="margin-top-sm flex justify-between">
							<view class="text-gray text-df">{{v.cdate_string}}</view>
							<view>
								<text class="cuIcon-appreciatefill text-red"></text>
								<text class="cuIcon-messagefill text-gray margin-left-sm"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="show">
			<communityPush :title="title" :is_upload="false" @hideModal="hideModal" @getRefresh="getRefresh" :cate_id="cate_id" :type="type" :type_id="type_id"></communityPush>
		</view>
	</view>
</template>

<script>
	import communityPush from "@/pages/dream/view/communityPush";
	export default {
		props: {
			item: {
				type: Object
			},
			radius:{
				type: Boolean,
				default: false
			},
			cate_id : null,
		},
		components:{
			communityPush
		},
		mounted() {
			this.getData(1, 20, this.item.id);
		},
		data() {
			return {
				title : '回复话题',
				show : false,
				showPop: false,
				type : 20,
				type_id : 0,
				fetch: {
					info : [],
				},
			};
		},
		methods: {
			getRefresh : function(cate_id, type, type_id) {
				this.getData(1, type, type_id);
			},
			getData : function(page, type, type_id) {
				var self = this;
				this.Dever.get(this, 'app/community/?l=api.info', {cate_id:self.cate_id, type:type, type_id:type_id}, function(t) {
					self.hideModal();
				});
			},
			updateUp : function() {
				let that = this;
				if (that.item.is_oppose) {
					return;
				}
				if (that.item.is_up) {
					that.item.num_up--;
					that.item.is_up = false;
				} else {
					that.item.num_up++;
					that.item.is_up = true;
				}
			},
			updateOppose : function() {
				let that = this;
				if (that.item.is_up) {
					return;
				}
				if (that.item.is_oppose) {
					that.item.num_oppose--;
					that.item.is_oppose = false;
				} else {
					that.item.num_oppose++;
					that.item.is_oppose = true;
				}
			},
			updateComment : function (type, type_id) {
				this.type = type;
				this.type_id = type_id;
				this.show = true;
			},
			hideModal : function () {
				this.show = false;
			}
		}
	};
</script>

<style lang="less" scoped>
.cu-card {
	
}
.cu-list.menu-avatar>.cu-item:after, .cu-list.menu>.cu-item:after {
	border: 0px;
}
.icon-display {
	display: inline;
	margin-left: 20rpx;
}
</style>