MinNan/index_fenbao/jianzhu/jianZhuXQ.vue

<template>
	<view class="body">
		<u-navbar :autoBack="true" :title="list.title" bgColor="rgba(255,255,255,0.3)" :placeholder="true" titleStyle="font-weight:bold;color:#121212"></u-navbar>
		<view>
			<u-swiper
				:list="imageList"
				imgMode="aspectFill"
				:height="200"
				:indicator="true"
				:autoplay="true"
				:circular="true"
				indicatorStyle="bottom: 25px"
				@click="bannerClick"
				indicatorMode="dot"
				indicatorActiveColor="#fff"
				indicatorInactiveColor="rgba(255, 255, 255, 0.35)"
			></u-swiper>
		</view>
		<view class="box">
			<view class="" style="display: flex; align-items: center; color: #640000; font-size: 24rpx; margin-left: 28rpx; margin-top: 30rpx">
				<view style="margin-right: 20rpx; font-weight: 700; font-size: 36rpx">
					{{ list.title }}
				</view>
				<view
					class=""
					style="
						display: flex;
						align-items: center;
						justify-content: space-evenly;
						height: 40rpx;
						width: 100rpx;
						border-radius: 30rpx;
						background-color: rgb(253 0 0 / 60%);
					"
					@click="likeBtn"
				>
					<uni-icons v-if="list.is_like > 0" type="heart-filled" color="red" size="20"></uni-icons>
					<uni-icons v-else type="heart-filled" color="#f8f8f8" size="20"></uni-icons>
					<text style="font-size: 28rpx">{{ list.likes }}</text>
				</view>
			</view>

			<view class="info">
				<view style="width: 40%">始建年代:{{ list.age }}</view>

				<view style="width: 40%">文物类型:{{ list.cr_type }}</view>

				<view style="width: 40%">文物等级:{{ list.level }}</view>

				<view style="width: 40%">所属区域:{{ list.region }}</view>
			</view>
			<view style="color: #940000; font-size: 24rpx; margin-left: 24rpx; display: flex; align-items: center; margin-top: 40rpx">
				<view style="font-weight: 700; font-size: 36rpx">地址</view>
			</view>
			<view
				class=""
				style="
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 80rpx;
					margin-left: 30rpx;
					margin-top: 15rpx;
					color: green;
					background-color: #ffffff;
				"
			>
				<view class="text flex" style="background-color: aliceblue">{{ list.address }}</view>
				<view class="">
					<uni-icons type="location" size="20"></uni-icons>
				</view>
			</view>
			<view style="color: #940000; font-size: 24rpx; margin-left: 24rpx; display: flex; align-items: center; margin-top: 40rpx">
				<view style="font-weight: 700; font-size: 18px">保护区域</view>
			</view>
			<view class="u-info">
				<u-parse :content="list.protected_area"></u-parse>
			</view>
			<view style="color: #940000; font-size: 24rpx; margin-left: 24rpx; display: flex; align-items: center; margin-top: 40rpx">
				<view style="font-weight: 700; font-size: 18px">介绍</view>
			</view>
			<view class="text">
				<u-parse :content="list.intro"></u-parse>
			</view>
			<view style="color: #940000; font-size: 24rpx; margin-left: 24rpx; display: flex; align-items: center; margin-top: 40rpx">
				<view style="font-weight: 700; font-size: 18px">建筑环境</view>
			</view>
			<view class="text">
				<u-parse :content="list.environment"></u-parse>
			</view>

			<view style="color: #940000; font-size: 24rpx; margin-left: 24rpx; display: flex; align-items: center; margin-top: 40rpx">
				<view style="font-weight: 700; font-size: 18px">建筑描述</view>
			</view>
			<view class="text">
				<u-parse :content="list.description ? list.description : '暂无描述'"></u-parse>
			</view>

			<view style="color: #940000; font-size: 24rpx; margin-left: 24rpx; display: flex; align-items: center; margin-top: 40rpx">
				<view style="font-weight: 700; font-size: 18px">文物价值</view>
			</view>
			<view class="text">
				<u-parse :content="list.description.value ? list.description.value : '暂无评估'"></u-parse>
			</view>

			<view style="color: #940000; font-size: 24rpx; margin-left: 24rpx; display: flex; align-items: center; margin-top: 40rpx">
				<view style="font-weight: 700; font-size: 18px">文物责任人</view>
			</view>
			<view class="text">
				<u-parse :content="list.director ? list.director : '暂无责任人'"></u-parse>
			</view>
		</view>
	</view>
</template>

<script>
let that = this;
export default {
	data() {
		return {
			main_body_id: '',
			list: [],
			imageList: [
				// 'https://huli-app.wenlvti.net/app_static/minnanhun/image/sy_lbt2.png',
				// 'https://huli-app.wenlvti.net/app_static/minnanhun/image/sy_lbt1.png',
				// 'https://huli-app.wenlvti.net/app_static/minnanhun/image/sy_lbt3.jpg',
				// 'https://huli-app.wenlvti.net/app_static/minnanhun/image/sy_lbt4.jpg',
				// 'https://huli-app.wenlvti.net/app_static/minnanhun/image/sy_lbt5.png'
			]
		};
	},
	onLoad(e) {
		that = this;
		console.log(e);
		this.main_body_id = this.$db.get('main_body_id');
		this.getContentDetails(e.id);
	},

	methods: {
		// 详情
		getContentDetails(id) {
			this.$api.getContentDetails(
				{
					main_body_id: this.main_body_id,
					id: id
				},
				function (res) {
					that.list = res.data;
					that.imageList = res.data.images;
				}
			);
		},
		// 点赞
		likeBtn(i) {
			if (this.list.is_like == 0) {
				this.$api.like(
					{
						main_body_id: this.main_body_id,
						content_id: this.list.id
					},
					function (res) {
						that.list.is_like = 1;
						that.list.likes++;
						that.$common.successToShow('成功点赞');
					}
				);
			} else {
				that.$api.unLike(
					{
						main_body_id: that.main_body_id,
						content_ids: that.list.id
					},
					function (res) {
						that.list.is_like = 0;
						that.list.likes--;
						that.$common.successToShow('取消点赞');
					}
				);
			}
		}
	}
};
</script>

<style>
/deep/.u-swiper-indicator__wrapper__dot--active {
	width: 5px !important;
}
.box {
	height: auto;
	width: 100%;
	background-image: url('https://huli-app.wenlvti.net/app_static/wuyuan/static/shouhu/wyj-feiyi3-001.png');
	background-size: 100% 100%;
	background-attachment: fixed;
	border-radius: 32rpx 32rpx 0 0;
	position: relative;
	top: -40rpx;
	padding-top: 10rpx;
}
.u-info {
	margin: 20rpx;
}
.text {
	margin: 20rpx;
}
.info {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 20rpx;
	margin-top: 16rpx;
}
.info > view {
	margin-top: 20rpx;
	font-size: 28rpx;
	margin-left: 8rpx;
	color: #940000;
}
</style>