smartSchoolClockApp/pages/addLocation/addLocation.vue

<template>
	<view class="container">
		<!-- 地图区域 -->
		<view class="map">
			<map style="width: 100%; height: 100%;" :latitude="latitude" :longitude="longitude" :scale="18"
				:markers="covers">
			</map>
		</view>

		<!-- 顶部搜索框区域 -->
		<view class="search">
			<uni-search-bar placeholder="请输入搜索内容" cancelButton="none" v-model="searchValue" @input="input"
				@clear="clear" @blur="blur">
			</uni-search-bar>
		</view>

		<!-- 位置列表区域 -->
		<view class="list">
			<!-- 每一个位置区域 -->
			<view class="box" v-for="item in list" :key="item.id">
				<view class="icon">
					<img src="../../static/location2.png">
				</view>
				<view class="place">
					<view class="top">
						{{item.title}}
					</view>
					<view class="bottom">
						地点：{{item.place}}
					</view>
				</view>
			</view>
		</view>

		<!-- 打卡范围区域 -->
		<view class="range">
			<view class="key">
				打卡范围：
			</view>
			<view class="value" @click="changeRange">
				<text>300米</text>
				<img src="../../static/right.png">
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					id: 1,
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../static/location.png',
					width: 20,
					height: 20
				}],
				imgUrl: "",
				searchValue: "",
				list: [{
						id: 1,
						title: "南昌交通学院",
						place: "江西省南昌市经开区广兰大道899号"
					},
					{
						id: 2,
						title: "华东理工学院",
						place: "江西省南昌市经开区广兰大道899号"
					},
					{
						id: 3,
						title: "江西财经大学",
						place: "江西省南昌市经开区广兰大道899号"
					}
				]
			}
		},
		methods: {
			// 点击选择打卡范围回调
			changeRange() {
				uni.showActionSheet({
					itemList: ['300米', '400米', '500米'],
					success: (res) => {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
					},
					fail: (res) => {
						console.log(res.errMsg);
					}
				});
			},
			// 搜索框失焦回调
			blur(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			// 搜索框输入时的回调
			input(res) {
				console.log('----input:', res)
			},
			// 清除搜索框内容时的回调
			clear(res) {
				uni.showToast({
					title: 'clear事件，清除值为：' + res.value,
					icon: 'none'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.map {
			position: relative;
			width: 100vw;
			height: 100vh;
		}

		.search {
			position: fixed;
			top: 30rpx;
			left: 30rpx;
			width: 690rpx;
			height: 80rpx;
			border-radius: 152rpx;
			background-color: #fff;
		}

		.list {
			position: fixed;
			left: 30rpx;
			bottom: 100rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			width: 690rpx;
			height: 435rpx;
			border-radius: 18rpx 18rpx 0 0;
			background-color: #fff;
			overflow-y: auto;

			.box {
				display: flex;
				align-items: center;
				width: 630rpx;
				height: 104rpx;
				border-bottom: 1rpx solid #E6E6E6;

				.icon {
					margin-top: 10rpx;
					flex: 1;
					text-align: center;

					img {
						width: 40rpx;
						height: 40rpx;
					}
				}

				.place {
					flex: 7;

					.top {
						font-size: 32rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.bottom {
						font-size: 24rpx;
						color: #999999;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}
		}

		.range {
			position: fixed;
			left: 0;
			bottom: 0;
			display: flex;
			// flex-direction: column;
			align-items: center;
			width: 750rpx;
			height: 100rpx;
			box-shadow: 1px -4px 10px 0px rgba(0, 0, 0, 0.2);
			background-color: #fff;

			.key {
				flex: 4;
				margin-left: 30rpx;
				font-size: 28rpx;
			}

			.value {
				flex: 1;
				font-size: 28rpx;
				color: #A6A6A6;

				img {
					margin-left: 15rpx;
					width: 20rpx;
					height: 25rpx;
				}
			}
		}
	}

	// 解决输入框不居中问题
	::v-deep .uni-searchbar {
		padding: 10rpx;
	}

	::v-deep .uni-searchbar__box {
		padding: 0;
		height: 60rpx;
	}
</style>