WenWuGuanJia/user_fenbao/myTouGao/touGaoXiangQing.vue

<template>
	<view class="box">
		<u-navbar :autoBack="true" title="投稿详情" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#000000"></u-navbar>
		<view style="width: 92%; margin: auto">
			<u-swiper
				@click="clickImg"
				:list="[list.image]"
				imgMode="aspectFill"
				:height="160"
				:indicator="true"
				radius="5"
				:autoplay="true"
				:circular="true"
				indicatorStyle="bottom: 10px"
				indicatorMode="dot"
				indicatorActiveColor="#fff"
				indicatorInactiveColor="rgba(255, 255, 255, 0.35)"
			></u-swiper>
		</view>
		<view class="" style="width: 92%; margin: auto">
			<view style="display: flex; justify-content: space-between; align-items: center; margin-top: 30rpx">
				<view lines="1" class="text_4">{{ list.title }}</view>
				<view class="text_25">{{ list.publish_at }}</view>
			</view>

			<view v-if="list.content != null" class="text_5">
				<u-parse :content="list.content"></u-parse>
			</view>
			<!-- 		<view v-else class="">
				<u-empty text="暂无介绍" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
			</view> -->

			<view class="">
				<view style="display: flex; align-items: center; margin-top: 40rpx">
					<view style="display: flex; align-items: center">
						<uni-icons type="cloud-download" size="22" color="#000000"></uni-icons>

						<view class="item_tit">关联文物</view>
					</view>
				</view>

				<view class="jj_btm">
					<view @click="$common.navigateTo('/index_fenbao/GuanLi/XiangQing?id=' + item.id)" class="container" v-for="(item, index) in association" :key="item.index">
						<view class="mn_box">
							<image style="border-radius: 10rpx; width: 100%; height: 100%" :lazy-load="true" :src="item.image"></image>
						</view>
						<view class="mn_text">{{ item.title }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			association: [],
			list: {}
		};
	},
	onLoad(o) {
		that = this;
		this.getContentDetail(o.id);
	},
	methods: {
		getContentDetail(id) {
			this.$api.getContentDetail({ main_body_id: 1, id: id }, function (res) {
				console.log(res, '风采详情');
				if (res.code == 1) {
					that.list = res.data;
					let aa = Object.values(res.data.association_me_list);
					that.association = aa.filter((item) => item.title !== '文保牌' && item.main_body_column_name !== '我和文物的故事');
					// if (res.data.images.length > 0) {
					// 	that.imageList = res.data.images;
					// }
				}
			});
		},
		// 图片预览
		clickImg(index) {
			// console.log(index, 555);
			var imgs = this.list.images;
			let temp = [imgs[index]];
			// console.log('temp', temp);

			uni.previewImage({
				urls: imgs,
				current: index,
				success: function (data) {
					console.log(data);
				},
				fail: function (err) {
					console.log(err.errMsg);
				}
			});
		}
	}
};
</script>

<style>
.box {
	width: 100%;
	padding-bottom: 50rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/xy_bgt.png');
	background-size: 100% 100%;
	background-attachment: fixed;
	background-repeat: repeat-y;
	min-height: 100%;
	height: auto;
	/* background-color: #fff9e9; */
}

.text_4 {
	width: 112rpx;
	height: 28rpx;
	overflow-wrap: break-word;
	color: rgba(49, 37, 32, 1);
	font-size: 32rpx;
	font-family: SourceHanSansCN-Bold;
	font-weight: 700;
	text-align: left;
	white-space: nowrap;
	line-height: 28rpx;
}

.text_5 {
	height: 400rpx;
	font-size: 28rpx;
	overflow: scroll;
	font-weight: normal;
	text-align: justifyLeft;
	line-height: 48rpx;
	margin: 44rpx 0 0 16rpx;
	text-indent: 2rem;
}
/deep/.u-swiper-indicator__wrapper__dot--active {
	width: 5px !important;
}
.text_25 {
	font-size: 26rpx;
	color: #727070;
	margin-top: 10rpx;
	font-weight: 400;
}
.jj_btm {
	width: 92%;
	margin: auto;
	display: flex;
	margin-top: 20rpx;
	flex-wrap: wrap;
	justify-content: space-between;
}
.item_tit {
	font-size: 32rpx;

	line-height: 48rpx;
	font-weight: 700;
}
.mn_box {
	width: 300rpx;
	height: 200rpx;
}
.mn_text {
	width: 298rpx;
	font-size: 28rpx;
	text-align: center;
	color: #ffffff;
	position: absolute;
	top: 160rpx;
	left: 2rpx;
	line-height: 40rpx;
	background: rgba(0, 0, 0, 0.3);
	border-radius: 0px 0rpx 10rpx 10rpx;
}
.container {
	position: relative;
	margin-top: 20rpx;
	/* 	width: 260rpx;
	height: 182rpx; */
}
</style>