WenWuGuanJia/index_fenbao/HuoHuaLiYong/waJue/waJue.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 class="">
			<view v-if="images.length > 0" style="width: 90%; margin: auto">
				<u-swiper
					@click="clickImg"
					:list="images"
					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 v-else class="box_2">
				<image style="width: 100%; height: 100%" :src="list.image" />
			</view>
			<view style="width: 76%; display: flex; justify-content: space-between; align-items: center">
				<view class="text_4">投稿人：{{ list.from }}</view>

				<view class="text_4">{{ list.publish_at }}</view>
			</view>
			<view class="text-wrapper_1">
				<u-parse :content="list.content"></u-parse>
			</view>
		</view>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			list: {},
			images: []
		};
	},
	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, '挖掘详情');
				that.list = res.data;
				if (res.data.images.length > 0) {
					that.images = 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>
/deep/.u-swiper-indicator__wrapper__dot--active {
	width: 5px !important;
}
.box {
	height: auto;
	width: 100%;
	padding-bottom: 50rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/wuyuan/static/shouhu/wyj-feiyi3-001.png');
	background-attachment: fixed;
	background-repeat: repeat-y;
	background-size: 100% 100%;
	min-height: 100%;
	height: auto;
	/* background-color: #fff9e9; */
}
.box_2 {
	box-shadow: 0px 30px 60px 0px rgba(19, 104, 158, 0.1);
	background-color: rgba(255, 255, 255, 1);
	border-radius: 20rpx;
	position: relative;
	width: 690rpx;
	height: 322rpx;
	display: flex;
	flex-direction: column;
	margin: 0 0 20rpx 30rpx;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 20rpx 15px -6rpx, rgba(0, 0, 0, 0.05) 0px 8rpx 12rpx -4rpx;
}
.text_4 {
	width: 112rpx;
	height: 28rpx;
	overflow-wrap: break-word;
	color: #727070;
	font-size: 26rpx;
	font-family: SourceHanSansCN-Bold;
	text-align: left;
	white-space: nowrap;
	line-height: 28rpx;
	margin: 60rpx 0 0 47rpx;
}
.text-group_4 {
	width: 263rpx;
	height: 61rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 163rpx 0 0 180rpx;
}
.text-wrapper_1 {
	/* background-color: rgba(255, 255, 255, 1); */
	border-radius: 20rpx;
	/* height: 500rpx; */
	display: flex;
	flex-direction: column;
	width: 686rpx;
	margin: 20rpx 0 0 32rpx;
}
.text_5 {
	width: 652rpx;
	height: 279rpx;
	overflow-wrap: break-word;
	font-size: 28rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: justifyLeft;
	line-height: 48rpx;
	margin: 44rpx 0 0 16rpx;
	overflow: scroll;
	text-indent: 2rem;
}
</style>