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 && item.pic[0]">
					<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" v-if="child">
					</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(item)">
					<text class="cuIcon-flashbuyfill margin-lr-xs" :class="item.is_oppose ? 'text-red' : ''"></text> {{item.num_oppose}}
				</view>
				<view class="icon-display" @click="updateUp(item)">
					<text class="cuIcon-appreciatefill margin-lr-xs" :class="item.is_up ? 'text-red' : ''"></text> {{item.num_up}}
				</view>
				<view class="icon-display"  @click="updateComment(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="item.child.length">
				<view class="cu-item" v-for="(v, k) in item.child" :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-content text-df text-content-margin">
							<text class="text-grey" v-if="v.to_uid > 0">回复@{{v.to_user.username}}：</text> {{v.content}}
						</view>
						<view class="margin-top-sm flex justify-between">
							<view class="text-gray text-df">{{v.cdate_string}}</view>
							<view class="text-gray">
								<view class="icon-display" @click="updateOppose(v)">
									<text class="cuIcon-flashbuyfill margin-lr-xs" :class="v.is_oppose ? 'text-red' : ''"></text> {{v.num_oppose}}
								</view>
								<view class="icon-display" @click="updateUp(v)">
									<text class="cuIcon-appreciatefill margin-lr-xs" :class="v.is_up ? 'text-red' : ''"></text> {{v.num_up}}
								</view>
								<view class="icon-display"  @click="updateComment(item.id, v.id, v.uid)">
									<text class="cuIcon-messagefill margin-lr-xs"></text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="text-grey flex solid-bottom padding justify-center more" @click="getMore" v-if="item.child_total > 1">{{more}}</view>
			</view>
		</view>
		<view v-if="show">
			<publish :title="title" :is_upload="false" @hideModal="hideModal" @getRefresh="getRefresh" :cate_id="cate_id" :type="type" :type_id="type_id" :to_id="to_id" :to_uid="to_uid"></publish>
		</view>
	</view>
</template>

<script>
	import publish from '@/lib/dever/components/publish.vue';
	export default {
		props: {
			item: {
				type: Object
			},
			radius:{
				type: Boolean,
				default: false
			},
			cate_id : null,
		},
		components:{
			publish
		},
		created() {
			this.more = '展开'+(this.item.child_total-1)+'条回复';
			if (this.item.child_total > 0) {
				this.id = this.item.child[0].id;
			}
			this.child = this.item.child;
		},
		data() {
			return {
				title : '回复话题',
				show : false,
				showPop: false,
				type : 20,
				type_id : 0,
				to_id : 0,
				to_uid : 0,
				page : 1,
				num : 5,
				more : '',
				id : 0,
				child : [],
			};
		},
		methods: {
			getRefresh : function(cate_id, type, type_id) {
				this.item.num_comment++;
				this.getMore(1, 1);
			},
			getMore : function(page, push) {
				var self = this;
				if (page && typeof(page) != 'object') {
					self.page = page;
				}
				
				if (self.page > 1 && self.more == '收起') {
					// 收起
					self.item.child = self.child;
					self.more = '展开'+(self.item.child_total-1)+'条回复';
					self.page = 1;
					return;
				}
				
				var send = {cate_id:self.cate_id, type:self.type, type_id:self.item.id, pg:self.page, noconcat:true};
				send.id = self.id;
				this.Dever.get(this, 'app/community/?l=api.info', send, function(t) {
					if (self.page == 1) {
						self.item.child = self.child;
					}
					
					if (t.info && t.info.length > 0) {
						self.item.child = self.item.child.concat(t.info);
						self.page = self.page + 1;
					}
					if (self.Dever.pageData.status == 0) {
						self.more = '收起';
					} else {
						self.more = '展开更多回复';
					}
					self.hideModal();
				});
			},
			updateUp : function(item) {
				var self = this;
				if (item.is_oppose) {
					return;
				}
				if (item.is_up) {
					item.num_up--;
					item.is_up = false;
				} else {
					item.num_up++;
					item.is_up = true;
				}
				self.Dever.post('app/community/?l=api.up', {id:item.id,noloading:1});
			},
			updateOppose : function(item) {
				var self = this;
				if (item.is_up) {
					return;
				}
				if (item.is_oppose) {
					item.num_oppose--;
					item.is_oppose = false;
				} else {
					item.num_oppose++;
					item.is_oppose = true;
				}
				self.Dever.post('app/community/?l=api.oppose', {id:item.id,noloading:1});
			},
			updateComment : function (type_id, to_id, to_uid) {
				this.type = this.type;
				this.type_id = type_id;
				if (to_id) {
					this.to_id = to_id;
				} else {
					this.to_id = 0;
				}
				if (to_uid) {
					this.to_uid = to_uid;
				} else {
					this.to_uid = 0;
				}
				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;
}
.text-content-margin {
	margin-top:10rpx;
}
.icon-display {
	display: inline;
	margin-left: 20rpx;
}
.more {
	margin-top:-40rpx;
}
</style>