WenWuGuanJia/index_fenbao/fuWu/baoMing/renLing.vue

<template>
	<view class="box">
		<u-navbar @leftClick="rightClick" title="文物认领" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#000000"></u-navbar>
		<view class="fj_box">
			<view class="" style="display: flex; justify-content: space-between; margin-left: -25rpx">
				<button open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">
					<view class="fj_item">
						<view class="tit2">通过手机号找回</view>
					</view>
				</button>

				<view class="fj_item" @click="vicinityBtn">
					<view class="tit2">附近可被认领文物</view>
				</view>
			</view>

			<view class="scarch_box2">
				<u--input
					@change="search"
					@input="onInputChange"
					placeholderStyle="color: #985741"
					height="25"
					prefixIcon="search"
					shape="square"
					placeholder="输入文物关键字"
					v-model.trim="value"
				></u--input>
			</view>
		</view>
		<!-- 搜索的文物 -->
		<view class="" style="position: relative">
			<u-transition :show="searchList.length > 0">
				<scroll-view v-if="searchList.length > 0" class="search_box" scroll-y="true" @scrolltolower="LoadMore">
					<view>
						<view @click="searchItem(item)" class="item_tit" v-for="item in searchList" :key="item.id">
							{{ item.title }}
						</view>
					</view>
				</scroll-view>
			</u-transition>
		</view>
		<!-- 文物信息 -->
		<u-popup :show="introduceShow" @close="close" mode="center" :closeable="true" bgColor="#f9dbbf" round="5">
			<view class="xx_box">
				<view v-if="swiperList != null">
					<u-swiper
						:list="swiperList"
						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><u-empty text="暂无图片 " iconColor="#4a433d" textColor="#4a433d" mode="data"></u-empty></view>
				<view class="xx_tit" v-if="claimDetails.intro != '' && claimDetails.intro != null">
					<u-parse :content="claimDetails.intro"></u-parse>
				</view>
				<view v-else><u-empty text="该文物暂无介绍 " iconColor="#4a433d" textColor="#4a433d" mode="data"></u-empty></view>
				<view class="claim_tit" @click="claimBtn">认领</view>
			</view>
		</u-popup>

		<!-- 地图 -->
		<view>
			<mapComponent
				ref="mychild"
				@subComponent="subComponent"
				:markers="markers"
				:height="height"
				:latitudeAndLongitude="latitudeAndLongitude"
				:introduceShow="introduceShow"
			></mapComponent>
		</view>
		<!-- 手机号弹层 -->
		<u-popup bgColor="#f2c8a2" :show="deleteShow" @close="close" mode="center" customStyle="width:600rpx;padding: 30rpx;" round="20rpx">
			<view style="text-align: center; font-size: 30rpx">请输入报名志愿者的手机号</view>
			<view style="margin-top: 20rpx">
				<u--textarea height="50" v-model.trim="mobile" placeholder="请输入手机号:"></u--textarea>
			</view>
			<view class="bt_box">
				<view
					class="bt1"
					@click="
						deleteShow = false;
						reasonVal = '';
					"
				>
					取消
				</view>
				<view @click="isOk" class="bt3">确认</view>
			</view>
		</u-popup>
		<!-- 确认弹层 -->
		<u-popup bgColor="#f2c8a2" :show="queren" mode="center" customStyle="width:600rpx;height: 300rpx; padding: 30rpx;" round="20rpx">
			<view style="text-align: center; font-size: 30rpx">手机号绑定成功</view>
			<view @click="querenBtn" class="bt2">确认</view>
		</u-popup>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			queren: false,
			volunteer_id: '',
			mobile: '',
			deleteShow: false,
			longitude: '',
			latitude: '',
			page: 1,
			searchList: [] /* 搜索的数组 */,
			isProcessingItemClick: false,
			volunteerId: '' /* 志愿者id */,
			value: '',
			swiperList: [],
			height: '1200',
			latitudeAndLongitude: {
				latitude: '24.504403',
				longitude: ' 118.143033',
				anchorPoint: true /* 定位点是否显示 */
			},
			markers: [],
			claimDetails: {} /* 文物详情 */,
			introduceShow: false,
			joinList: []
		};
	},
	onLoad() {
		that = this;
		this.details();
		// this.vicinityBtn();
		this.getContentList();
	},
	methods: {
		search() {
			if (this.preventSearchOnChange) {
				this.preventSearchOnChange = false;
				return;
			}
			// console.log(this.value, '666');

			if (this.value) {
				// 只有在搜索词变化时重置page为1
				if (this.prevSearchVal !== this.value) {
					this.prevSearchVal = this.value; // 更新prevSearchVal为当前搜索词
					this.page = 1; // 当搜索词变化时重置page
					this.searchList = []; // 清空已有搜索结果
				}
				this.$api.getContentList(
					{
						main_body_id: 1,
						model_id: 1,
						keywords: this.value || '',
						page: this.page,
						claim_status: '0',
						pageSize: '10'
					},
					function (res) {
						that.searchList = [...that.searchList, ...res.data];
					}
				);
			} else {
				this.searchList = [];
			}
		},
		// 解决选中文物后再次触发change事件
		onInputChange(value) {
			// 如果在处理点击搜索结果，不触发搜索
			if (!this.isProcessingItemClick) {
				this.value = value;
			}
		},
		// 搜索的每项
		searchItem(item) {
			// console.log(item, 'item');
			this.isProcessingItemClick = true;
			this.value = item.title;
			// this.cr_id = item.id;
			this.searchList = []; // 清空已有的搜索结果
			// 在操作完成后恢复标记
			this.$nextTick(() => {
				this.isProcessingItemClick = false;
			});
			this.latitude = '';
			this.longitude = '';
			this.getContentList(this.value);
			this.latitudeAndLongitude.latitude = item.latitude;
			this.latitudeAndLongitude.longitude = item.longitude;
		},
		// 下滑加载
		LoadMore() {
			this.page++;
			this.search();
		},
		// 附近
		vicinityBtn() {
			// console.log(this.$refs.mychild);
			this.$refs.mychild.vicinityBtn();
			this.value = '';
			this.longitude = this.$refs.mychild.longitude;
			this.latitude = this.$refs.mychild.latitude;
			// console.log(this.longitude, this.latitude, '子组件经纬度');
			// 附近未被认领文物
			this.$api.getContentList(
				{
					model_id: '1',
					main_body_id: '1',
					page: 1,
					pageSize: '100',
					region: 5,
					claim_status: 0,
					longitude: this.longitude,
					latitude: this.latitude
				},
				function (res) {
					that.markers = [];
					res.data.forEach((item, index) => {
						// console.log(item, 'itemitem');
						that.markers.push({
							id: parseFloat(item.id),
							latitude: parseFloat(item.latitude), //纬度
							longitude: parseFloat(item.longitude), //经度
							// iconPath: item.thumbnail, //显示的图标
							iconPath: item.thumbnail ? item.thumbnail : '/static/img.icon_map.png',
							width: 30, //宽
							height: 30, //高
							title: item.title, //标注点名
							label: {
								//自定义标记点上方的文本
								content: item.title, //文本
								color: '#444444', //文字颜色
								fontSize: 14, //文本大小
								bgColor: '#f1cdb2', // 背景颜色（半透明黑色）
								borderRadius: 5, // 边框圆角
								padding: [2, 2], // 内边距
								textAlign: 'center', // 文本对齐方式
								display: 'ALWAYS' // 始终显示标签
							},
							joinCluster: true
						});
					});
				}
			);
		},

		getContentList() {
			this.$api.getContentList(
				{
					model_id: '1',
					main_body_id: '1',
					page: 1,
					pageSize: '100',
					region: 5,
					keywords: this.value,
					longitude: this.longitude,
					latitude: this.latitude
				},
				function (res) {
					// console.log(res, '地图文物');
					if (res.data.length <= 0 || res.data == []) {
						that.$common.errorToShow('该文物已被认领');
					} else {
						that.markers = [];
						res.data.forEach((item, index) => {
							// console.log(item, 'itemitem');
							that.markers.push({
								id: parseFloat(item.id),
								latitude: parseFloat(item.latitude), //纬度
								longitude: parseFloat(item.longitude), //经度
								// iconPath: item.thumbnail, //显示的图标
								iconPath: item.thumbnail ? item.thumbnail : '/static/img.icon_map.png',
								width: 30, //宽
								height: 30, //高
								title: item.title, //标注点名
								label: {
									//自定义标记点上方的文本
									content: item.title, //文本
									color: '#444444', //文字颜色
									fontSize: 14, //文本大小
									bgColor: '#f1cdb2', // 背景颜色（半透明黑色）
									borderRadius: 5, // 边框圆角
									padding: [2, 2], // 内边距
									textAlign: 'center', // 文本对齐方式
									display: 'ALWAYS' // 始终显示标签
								},
								joinCluster: true
							});
						});
					}
				}
			);
		},
		// 接收子组件传递的id
		subComponent(newShow, id) {
			// console.log(newShow, 'ooo');
			this.introduceShow = newShow;
			// 详情
			this.$api.getContentDetail(
				{
					main_body_id: 1,
					id: id
				},
				function (res) {
					that.claimDetails = res.data;

					that.swiperList = res.data.images;
				}
			);
		},
		details() {
			this.$api.details({ main_body_id: 1 }, function (res) {
				if (res.code == 1) {
					that.volunteer_id = res.data.id;
				}
			});
		},
		// 认领文物
		claimBtn() {
			if (that.claimDetails.claim_status === 1 && that.claimDetails.is_multiple_claims === 0) {
				that.$common.errorToShow('该文物已被认领');
			} else if (this.volunteer_id != undefined && this.volunteer_id != '') {
				this.$api.claimCr(
					{
						main_body_id: 1,
						type: 'volunteer',
						volunteer_id: this.volunteer_id,
						cr_id: this.claimDetails.id,
						cr_code: this.claimDetails.code,
						desc: ''
					},
					function (res) {
						console.log(res, '详情');
						that.$common.errorToShow(res.msg);
					}
				);
			} else {
				uni.navigateTo({
					url: '/index_fenbao/fuWu/baoMing/baoMing?id=' + this.claimDetails.id
				});
			}
		},

		// 获取老志愿者手机号
		decryptPhoneNumber(e) {
			// console.log(e, '手机号信息');
			wx.login({
				success: (res) => {
					// console.log(res, 'code');
					that.$api.wxLogin(
						{
							main_body_id: 1,
							code: res.code
						},
						(res) => {
							// console.log(res, 'code22222');
						}
					);
				},
				fail: function (error) {
					console.log('login failed ' + error);
				}
			});

			if (e.detail.errMsg == 'getPhoneNumber:ok') {
				this.$api.getPhoneNumber(
					{
						main_body_id: 1,
						encryptedData: e.detail.encryptedData,
						iv: e.detail.iv
					},
					function (res) {
						// console.log(res, '成功');

						if (res.data == 'volunteer') {
							that.$common.successToShow(res.msg);
							that.queren = true;
							console.log('1');
						} else if (res.data == 'mobile' || res.data == 'isBoundMobile') {
							// 手动输入手机号
							console.log('2');
							that.$common.errorToShow(res.msg);
							setTimeout(() => {
								that.deleteShow = true;
							}, 2000);
						} else if (res.data == 'bound') {
							console.log('3');
							setTimeout(() => {
								that.$common.errorToShow(res.msg);
							}, 1000);
						} else {
							console.log('4');
							// console.log('失败');
							setTimeout(() => {
								that.$common.errorToShow(res.msg);
							}, 1000);
						}
					}
				);
			}
			return;
		},
		// 绑定成功回到守护页
		querenBtn() {
			uni.switchTab({
				url: '/pages/shouhu/shouhu'
			});
		},
		// 手动输入手机号
		isOk() {
			if (this.mobile != '' && this.mobile != undefined) {
				this.$api.mobileBindVolunteer({ main_body_id: 1, mobile: this.mobile }, function (res) {
					if (res.code == 1) {
						that.$common.errorToShow(res.msg);
						setTimeout(() => {
							that.deleteShow = false;
							that.queren = true;
						}, 1500);
					} else {
						// console.log('手动输入');
						that.$common.errorToShow(res.msg);
					}
				});
			} else {
				that.$common.errorToShow('请输入手机号');
			}
		},
		rightClick() {
			uni.switchTab({
				url: '/pages/index/index'
			});
		},
		close() {
			this.introduceShow = false;
			this.deleteShow = false;
		}
	}
};
</script>

<style>
/deep/.u-swiper-indicator__wrapper__dot--active {
	width: 5px !important;
}
.box {
	/* height: auto; */
	height: 100%;
	width: 100%;
	padding-bottom: 50rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/xy_bgt.png');
	background-repeat: repeat-y;
	background-size: cover;
	background-size: 100% 100%;
}
.active {
	border: 6rpx solid #efb57a;
	border-radius: 10rpx;
}
.img {
	width: 230rpx;
	height: 250rpx;
	border: 6rpx solid #efb57a;
	border-radius: 10rpx;
}
.map_tit {
	display: flex;
	align-items: center;
	margin-left: 60rpx;
	margin-top: 40rpx;
	font-size: 40rpx;
	font-family: Songti SC, Songti SC;
	font-weight: 900;
	line-height: 52rpx;
	color: #444444;
}
.scarch_box2 {
	width: 674rpx;
	height: 82rpx;
	padding: 6rpx 0 0 30rpx;
	margin-top: 20rpx;
	background-image: url('/static/img/search_bg1.png');
	background-size: 100% 100%;
}
.rl_box {
	width: 90%;
	margin: auto;
	margin-top: 40rpx;
	display: flex;
	justify-content: space-between;
}
.rl_item {
	width: 188rpx;
	height: 102rpx;
	background-image: url('/static/img/rl_bg.png');
	background-size: 100% 100%;
}
.tit {
	text-align: center;
	line-height: 102rpx;
	font-weight: 700;
	font-size: 36rpx;
	letter-spacing: 6rpx;
	background: linear-gradient(180deg, #af7e44 0%, #934b36 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.fj_box {
	width: 90%;
	margin: auto;
	margin-top: 40rpx;
	margin-bottom: 20rpx;
	/* display: flex;
	justify-content: space-between; */
}
.fj_item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 300rpx;
	height: 78rpx;
	background-image: url('/static/img/search_bg1.png');
	background-size: 100% 100%;
}
.tit2 {
	text-align: center;
	line-height: 66rpx;
	font-weight: 700;
	font-size: 30rpx;
	letter-spacing: 6rpx;
	background: linear-gradient(180deg, #af7e44 0%, #934b36 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.claim_tit {
	width: 190rpx;
	height: 70rpx;
	margin: auto;
	margin-top: 30rpx;
	font-weight: 600;
	text-align: center;
	line-height: 70rpx;
	font-size: 32rpx;
	background-color: #efb681;
}
.xx_box {
	padding: 20rpx;
	background-color: #e1bf9a;
	width: 660rpx;
	/* height: 560rpx; */
	padding-top: 80rpx;
}
.xx_tit {
	height: 360rpx;
	font-size: 30rpx;
	padding: 20rpx;
	text-indent: 2em;
	margin-top: 30rpx;
	background-color: #f3e3d3;
	overflow: scroll;
}
.search_box {
	width: 87%;
	position: absolute;
	height: 400rpx;
	z-index: 9;
	left: 50rpx;
	/* 	top: -295rpx; */
	padding: 40rpx;
	background-color: #f7dfc0;
}
.item_tit {
	line-height: 50rpx;
	font-size: 30rpx;
}
button::after {
	border: none;
	margin: 0;
}
button {
	margin: 0;
}
.bt_box {
	display: flex;
	margin-top: 50rpx;
	justify-content: space-around;
}
.bt1 {
	width: 244rpx;
	height: 78rpx;
	border: 1px solid #312520;
	border-radius: 39rpx;
	text-align: center;
	line-height: 78rpx;
	color: black;
}
.bt2 {
	width: 244rpx;
	height: 78rpx;
	margin: auto;
	margin-top: 120rpx;
	background: #ca5642;
	border-radius: 39rpx;
	text-align: center;
	line-height: 78rpx;
	color: #ffffff;
}
.bt3 {
	width: 244rpx;
	height: 78rpx;
	background: #ca5642;
	border-radius: 39rpx;
	text-align: center;
	line-height: 78rpx;
	color: #ffffff;
}
/deep/.u-textarea.data-v-09988a29 {
	background-color: #fce3c4 !important;
	border-radius: 0;
}
/deep/.u-textarea.data-v-09988a29 {
	background-color: #fce3c4 !important;
}
</style>