yixiang/pageA/topic-detail.vue

<template>
	<view class="content">
		<view class="top">
			<view class="top-text">{{topic.title}}</view>
			<view class="intro">
				<view class="hflex acenter jbetween">
					<view class="title">简介</view>
					<view class="hflex acenter" @click="show = !show">
						<view class="extext">{{show ? '收起' : '展开'}}</view>
						<u-icon :name="show ? 'arrow-down' : 'arrow-up'"></u-icon>
					</view>
				</view>
				<view v-if="show" class="intro-text">{{topic.description}}</view>
			</view>
		</view>
		<view class="list">
			<listinfo type="post" :data="item" v-for="(item,index) in list" :key="index"></listinfo>
		</view>
		<view class="fixed hflex acenter jcenter" @click="toadd">
			<image src="/static/images/edit.png" mode="aspectFill"></image>
			<text>参与</text>
		</view>
	</view>
</template>

<script>
	import listinfo from '@/components/list-info/index.vue'
	import $api from '@/static/js/api.js'
	export default {
		components: {
			listinfo,
		},
		data() {
			return {
				id: '',
				list: [],
				topic: {},
				page: 1,
				last_page: 1,
				show: false
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getdata()
			this.getlist()
		},
		onShow() {
			
		},
		onPullDownRefresh() {
			
		},
		onReachBottom() {
			
		},
		methods: {
			
			toadd() {
				uni.navigateTo({
					url: '/pageA/add-luntan?topic=' + JSON.stringify(this.topic)
				})
			},
			getdata() {
				
				var _this = this
				$api.req({
					url: 'topic/' + _this.id,
					method: 'GET',
					data: {
						id: _this.id
					}
				}, function(res) {
					if(res.code == 10000) {
						_this.topic = res.data
					}
				})
			},
			getlist() {
				var _this = this
				$api.req({
					url: 'post',
					method: 'GET',
					data: {
						page: _this.page,
						limit: 10,
						topic_id: _this.id
					}
				}, function(res) {
					if(res.code == 10000) {
						_this.list = _this.list.concat(res.data.list)
						_this.last_page = res.data.last_page
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.content {
		background: #f5f5f5;
		
		.fixed {
			width: 210rpx;
			height: 84rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 48rpx -12rpx rgba(0,0,0,0.2);
			border-radius: 42rpx;
			position: fixed;
			bottom: 65rpx;
			left: 270rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}
			
			text {
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #00B0B0;
				padding-left: 18rpx;
			}
		}
		.list {
			margin-top: 20rpx;
		}
		.top {
			padding: 32rpx 0 38rpx;
			background: #FFFFFF;
			.top-text {
				font-size: 40rpx;
				font-family: AppleColorEmoji;
				color: #333333;
				padding: 0 30rpx 30rpx;
				box-sizing: border-box;
				border-bottom: 1px solid #F3F3F3;
			}
			.intro {
				box-sizing: border-box;
				padding: 30rpx 30rpx 0;
				.title {
					font-size: 32rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #333333;
				}
				.extext {
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #999999;
					padding-right: 8rpx;
				}
				.intro-text {
					font-size: 26rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #333333;
					padding: 28rpx 0;
				}
			}
		}
	}
</style>