dreamland/pages/dream/view/moment.vue

<template name="moment">
	<view id="moments">
	
		<view class="home-pic" :style="style">
			<view class="home-pic-base">
				<view class="top-pic">
					<image class="header" :src="item.logo"></image>
				</view>
				<view class="top-name">{{item.name}}</view>
			</view>
		</view>

		<view style="padding-bottom: 140rpx;">
			<view class="moments__post" v-for="(v,k) in fetch.info" :key="k">
				<momentItem :item="v" :user="fetch.user" :key="v.server_time"></momentItem>
			</view>
		</view>

		<view class="foot" >

		</view>
		
		<y-Fab :bottom="20" :right="140" @click="showModal" bgColor="#0fa5e5" text="发布"></y-Fab>
		<block v-if="index == -1">
			<y-Fab :bottom="20" :right="20" @click="back" text="返回"></y-Fab>
		</block>
		<view v-if="showComment">
			<dever-publish :title="title" :is_upload="true" @hideModal="hideModal" @getRefresh="getRefresh" :type="type" :type_id="type_id" :api="api"></dever-publish>
		</view>
	</view>

</template>

<script>
	import deverPublish from '@/lib/dever/components/publish.vue';
	import momentItem from "@/pages/dream/view/momentItem.vue";
	export default {
		name: "moment",
		props: {
			control : {
				type : Object,
				value : null
			},
			bottom : {
				type : Object,
				value : null
			},
			item : {
				type    : Object,
				value	: null
			},
			index : 0
		},
		components: {
			deverPublish,momentItem
		},
		data() {
			return {
				fetch : {
					'info' : [],
				},
				style : '',
				title : '发布新动态',
				api : 'app/community/?l=api.addMoment',
				type : 3,
				type_id : 0,
				showComment : false,
			}
		},
		mounted() {
			this.bottom[this.index] = this;
			this.type_id = this.item.id;
			this.style = 'background:url("'+this.item.pic+'");background-size: contain;';
			this.getData(1);

		},
		computed:{
			
		},
		methods: {
			getData : function(page) {
				this.Dever.page([page, 'info'], this, 'app/community/?l=api.moment', {type:this.type,type_id:this.type_id,code:this.Dever.config.code,noloading:1});
			},
			showModal : function() {
				this.showComment = true;
			},
			hideModal : function() {
				this.showComment = false;
			},
			getRefresh : function(cate_id, type, type_id, content) {
				this.getData(1);
				this.hideModal();
			},
		}
	}
</script>

<style scoped>
view {
	box-sizing: border-box;
}
.header {
	width: 100%;
	height: 100%;
	z-index: 10;
	border-radius: 40upx;
}
#moments {
	background: #fff;
}

#moments .home-pic {
	width: 100%;
	/* margin-top: -150upx; */
	position: relative;
	height: 500upx;
	z-index: 5;
	background-size: cover;
	margin-bottom: 50upx
}

#moments .home-pic-base {
	position: absolute;
	/*left: -60upx;*/
	bottom: -40upx;
	width: 100%;
	height: 160upx;
	padding: 0 30upx;
}

#moments .home-pic-base .top-pic {
	width: 360upx;
	height: 360upx;
	
	border-radius: 40upx;
	-webkit-transform: scale(0.5);
	-ms-transform: scale(0.5);
	transform: scale(0.5);
	-webkit-transform-origin: 100% 0%;
	-ms-transform-origin: 100% 0%;
	transform-origin: 100% 0%;
	background-color: #ffffff;
	
	float: right
}

#moments .home-pic-base .top-name {
	position: absolute;
	/* left: 20px; */
	right: 240upx;
	top: 30upx;
	font-size: 32upx;
	font-weight: 600;
	text-align: right;
	color: #ffffff;
	overflow: hidden
}

#moments .moments__post {
	background: #fff;
	display: block;
	border-bottom: 1px solid #f2eeee;
	padding: 30upx 20upx;
	position: relative;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
}

#moments .moments__post::before {
	content: none
}

</style>