muck_truck_app/pages/dotPath/index - 副本.vue

<template>
	<view class="container">
		<uni-navbar title="新增路线"></uni-navbar>
		<view class="box">
			<view class="map">
				<mapNew></mapNew>
				<!-- <map id="map" ref="map" style="height: 713rpx;width: 100%;" @tap="tapMap">
				</map> -->
			</view>
			<view class="reject-box commonBj commonMt">
				<view class="reject-box-top">
					<view class="top-left">
						<image src="../../static/images/path/location.png" mode="widthFix"></image>
						<text class="state-text">附近地址</text>

					</view>
					<view class="top-right">
						<u-button class="buttonDd" @click="dot">
							打点</u-button>
					</view>
				</view>
				<view class="reject-box-bottom">
					<view class="boxMr">
						<view :class="'adrBox ' +(activeIndex===index?'active':'')" v-for="(item,index) in addresData"
							@click="changeAddres(index)">
							<view class="ml">{{item.name}}</view>
							<view class="activeImg" v-if="activeIndex===index"></view>
						</view>
					</view>
				</view>
			</view>
			<u-button @click="submit" class="buttonLang commonMb">确认选择</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeIndex: null,
				addresData: [{
						name: '君子大厦'
					},
					{
						name: '君悦豪庭'
					},
					{
						name: '朝阳区永昌街道惠民社区'
					}
				],
			}
		},
		methods: {
			changeAddres(index) {
				this.activeIndex = index;
			},
			submit() {

			},
			dot() {

			},
			tapMap(e) {
				var that = this;
				var id = e.currentTarget.id;
				var maps = uni.createMapContext(id, this).$getAppMap();
				maps.onclick = function(point) {
					console.log(point);
					// point.iconPath = '/static/btn_loc0.png';
					// that.markers = that.markers.concat(point); uni.showToast({ 
					//     title: '添加成功',
					//     icon: 'none'
					// });
				};
			}
		}

	}
</script>
<style lang="scss" scoped>
	.reject-box {
		margin-bottom: 28rpx;

		.reject-box-top {
			width: 100%;
			height: 69rpx;
			background: #7FB5FF;
			border-radius: 26rpx 26rpx 0px 0px;
			display: flex;
			justify-content: space-between;

			.top-right {
				display: flex;
				justify-content: start;
				align-items: center;
				margin-right: 36rpx;
			}

			uni-image {
				width: 50rpx;
				margin-left: 32rpx;
				vertical-align: middle;
			}

			.state-text {
				font-size: 26rpx;
				font-weight: bold;
				color: #FFFFFF;
				margin-left: 23rpx;
				line-height: 69rpx;
			}
		}

	}

	.buttonDd {
		width: 134rpx;
		height: 45rpx;
		background: linear-gradient(0deg, #FFD334 0%, #F59A02 100%);
		box-shadow: 0px 2rpx 13rpx 0px rgba(27, 43, 95, 0.25);
		border-radius: 23rpx;
		border: 0;
		font-size: 26rpx;
		font-weight: bold;
		color: #FFFFFF;
		padding: 0;
		text-align: center;
	}

	.map {
		height: 713rpx;
		background: #FFFFFF;
		border: 2rpx solid #77A8FF;
		box-shadow: 0px 2rpx 13rpx 0px rgba(27, 43, 95, 0.25), 0px 0px 24rpx 6rpx rgba(109, 160, 251, 0.6);
		border-radius: 28rpx;
	}

	.reject-box-bottom {
		height: 336rpx;
		overflow-y: auto;
	}

	.boxMr {
		margin-left: 32rpx;
		margin-right: 36rpx;
		padding-top: 39rpx;
		padding-bottom: 39rpx;
	}

	.adrBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 86rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
	}

	.active {
		background: rgba(73, 91, 147, 0.3);
		border-radius: 28rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
	}

	.activeImg {
		background: url(../../static/images/path/active.png);
		background-size: 100% 100%;
		width: 44rpx;
		height: 44rpx;
		margin-right: 21rpx;
	}

	.ml {
		margin-left: 29rpx;
	}
</style>