WenWuGuanJia/index_fenbao/GuanLi/XiangQing.vue

<template>
	<view class="box">
		<u-navbar :autoBack="true" bgColor="rgba(255,255,255,0)"></u-navbar>
		<view>
			<u-swiper
				@click="clickImg"
				:list="imageList"
				imgMode="aspectFill"
				:height="200"
				:indicator="true"
				:autoplay="true"
				:circular="true"
				indicatorStyle="bottom: 25px"
				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; margin-left: 28rpx; margin-top: 30rpx">
				<view style="color: #640000; margin-right: 20rpx; font-weight: 700; font-size: 36rpx">{{ list.title }}</view>
			</view>
			<view class="info">
				<view style="width: 40%">始建年代: {{ list.age ? list.age : '暂无描述' }}</view>

				<view style="width: 40%">文物类型:{{ list.cr_type_text ? list.cr_type_text : '暂无描述' }}</view>

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

				<view style="width: 40%">所属区域:{{ citySection }}</view>
			</view>

			<view style="margin-left: 24rpx; display: flex; align-items: center; margin-top: 40rpx">
				<view style="display: flex; align-items: center">
					<uni-icons type="location" size="22" color="#940000"></uni-icons>
					<!-- <image style="width: 40rpx; height: 40rpx" src="/static/img/map-pin-5-line.png"></image> -->
					<view class="item_tit">地点</view>
				</view>
			</view>
			<view class="" @tap="openGuide(list.title, list.address, list.latitude, list.longitude)">
				<view
					class=""
					style="
						width: 95%;
						margin: auto;
						display: flex;
						justify-content: space-between;
						align-items: center;
						height: 80rpx;
						margin-top: 15rpx;
						color: green;
						background-color: #ffffff;
					"
				>
					<view class="text flex" style="background-color: aliceblue">
						{{ list.address }}
						<uni-icons type="location" size="20"></uni-icons>
					</view>
				</view>
			</view>

			<view v-if="list.protected_area != null" style="margin-left: 24rpx; display: flex; align-items: center; margin-top: 40rpx">
				<view style="display: flex; align-items: center">
					<uni-icons type="map-pin-ellipse" size="22" color="#940000"></uni-icons>
					<view class="item_tit">保护区域</view>
				</view>
			</view>
			<view class="u-info">
				<u-parse :content="list.protected_area"></u-parse>
			</view>
			<view v-if="list.intro" style="margin-left: 24rpx; display: flex; align-items: center; margin-top: 40rpx">
				<view style="display: flex; align-items: center">
					<uni-icons type="calendar" size="22" color="#940000"></uni-icons>
					<view class="item_tit">介绍</view>
				</view>
			</view>
			<view class="text">
				<u-parse :content="list.intro"></u-parse>
			</view>
			<view v-if="list.environment != null" style="margin-left: 24rpx; display: flex; align-items: center; margin-top: 40rpx">
				<view style="display: flex; align-items: center">
					<uni-icons type="home" size="22" color="#940000"></uni-icons>

					<view class="item_tit">建筑环境</view>
				</view>
			</view>
			<view class="text">
				<u-parse :content="list.environment"></u-parse>
			</view>
			<view class="" v-if="list.value">
				<view style="margin-left: 24rpx; display: flex; align-items: center; margin-top: 40rpx">
					<view style="display: flex; align-items: center">
						<uni-icons type="medal" size="22" color="#940000"></uni-icons>

						<view class="item_tit">文物价值</view>
					</view>
				</view>
				<view class="text">
					<u-parse :content="list.value"></u-parse>
				</view>
			</view>

			<view class="" v-if="list.director">
				<view style="margin-left: 24rpx; display: flex; align-items: center; margin-top: 40rpx">
					<view style="display: flex; align-items: center">
						<uni-icons type="auth" size="22" color="#940000"></uni-icons>

						<view class="item_tit">文物负责人</view>
					</view>
				</view>
				<view class="text">
					<u-parse :content="list.director"></u-parse>
				</view>
			</view>
		</view>
		<!-- 构件 -->
		<view class="" v-if="association.length > 0">
			<view style="margin-left: 24rpx; display: flex; align-items: center; margin-top: 40rpx">
				<view style="display: flex; align-items: center">
					<uni-icons type="cloud-download" size="22" color="#940000"></uni-icons>

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

			<view class="jj_btm">
				<view @click="$common.navigateTo(item.page)" 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>
</template>

<script>
let that = this;
export default {
	data() {
		return {
			list: [],
			association: [],
			imageList: ['https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/sh_lb1.jpg']
		};
	},
	onLoad(e) {
		that = this;
		this.getContentDetail(e.id);
	},
	computed: {
		citySection() {
			let cityPart;
			if (this.list.address) {
				const index = this.list.address.indexOf('市');
				if (index !== -1) {
					// 如果找到了"市"，取市后面七个字
					cityPart = this.list.address.substring(index + 1, index + 8);
				} else {
					// 如果没有找到"市"，返回整个地址
					cityPart = this.list.region_text;
				}
			} else {
				// 如果list.address不存在或为空，也可以设定一个默认值
				cityPart = this.list.region_text;
			}
			return cityPart;
		}
	},
	methods: {
		// 详情
		getContentDetail(id) {
			this.$api.getContentDetail(
				{
					main_body_id: 1,
					id: id
				},
				function (res) {
					// console.log(res, 666666666);
					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.imageList;
			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);
				}
			});
		},

		// 唤起地图
		openGuide(name, address, latitude, longitude) {
			//  微信小程序
			// #ifdef MP-WEIXIN
			//console.log('走的这里', item);
			wx.openLocation({
				latitude: +latitude, // 纬度
				longitude: +longitude, // 经度
				name: name, // 地址名称
				address: address, // 详细地址
				success: function (r) {
					console.log(r);
				},
				fail: function (res) {
					console.log('拉起失败啦', res);
				}
			});
			// #endif
		}
	}
};
</script>

<style>
/deep/.u-swiper-indicator__wrapper__dot--active {
	width: 5px !important;
}
.box {
	min-height: 100%;
	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-repeat: repeat-y;
	background-attachment: fixed;
	background-size: 100% 100%;
}
.title {
	font-size: 28rpx;
	font-weight: 400;
	color: #444444;
	line-height: 44rpx;
}
.u-info {
	font-size: 28rpx;
	color: #444444;
	line-height: 44rpx;
	margin: 20rpx;
	text-align: center;
}
.text {
	margin: 20rpx;
}
.info {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 20rpx;
	margin-top: 16rpx;
}
.info_item {
}
.info > view {
	margin-top: 20rpx;
	font-size: 30rpx;
	margin-left: 8rpx;
	color: #940000;
	/* font-weight: 900; */
}
.item_tit {
	font-size: 32rpx;
	color: #940000;
	line-height: 48rpx;
	font-weight: 700;
}
.jj_btm {
	width: 92%;
	margin: auto;
	display: flex;
	margin-top: 20rpx;
	flex-wrap: wrap;
	justify-content: space-between;
}
.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>