powerbank/pages/nearbystores/index.vue

<template>
	<view class="page">
		<u-navbar title="附近门店" :border-bottom="false" :background="bgc" title-color='#000' title-size='36' height='38'></u-navbar>
			<view class="dtxs">
				<map  class='map' :latitude="latitude" :show-location="true" :longitude="longitude" :markers="covers" />
			</view>
		<view class="listbox">
			<view class="title">
				<text :class="index == 1 ? 'active' : ''" @click="btntab(1)">可租借</text> <text :class="index == 2 ? 'active' : ''" @click="btntab(2)">可归还</text> <text :class="index == 3 ? 'active' : ''" @click="btntab(3)">全部门店</text>
			</view>
			<view class="list" v-for="(item,index) in 10" :key="index">
				<view class="pic">
					<image src="../../static/image/sm.png" mode=""></image>
				</view>
				<view class="cen">
					<view class="cena">
						老福鼎传统菜
					</view>
					<view class="cenb">
						育贤路太姥商住楼东侧约160米
					</view>
					<view class="cenc">
						营业时间：08:00-21:00
					</view>
					<view class="rt">
						<text class="ke">可租借</text><text class="gui">可归还</text><text class="man">即将还满</text><text class="bu">不可还</text>
					</view>
				</view>
				<view class="right">
					<image src="../../static/image/lx.png" mode="" @click="mapFun"></image>
					<text>337m</text>
				</view>
			</view>
		</view>	
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: 31.02,
				longitude:112.12,
				covers: [{
					latitude: 31.02,
					longitude: 112.12,
					width: '50rpx'
				}],
				index:1
			}
		},
		onLoad() {

		},
		methods: {
			mapFun() {
				uni.openLocation({
					latitude: this.latitude,
					 //纬度 - 目的地/坐标点
					longitude: this.longitude, 
					 //经度 - 目的地/坐标点
					name: "荆门市",
					address: "一夜城"
				});
			},
			
			btntab(num){
				this.index = num
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .map{
		width: 100%;
		height: 100%;
	}
	page {
		// background-color: ;
		background: linear-gradient(180deg, #25CE88 0%, rgba(255, 255, 255, 0) 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.page {
		width: 750rpx;
        position: fixed;
		top: 0;
		left: 0;
		.dtxs{
			width: 100%;
			height: 40vh;
			position: fixed;
			top: 0;
			left: 0;
			z-index: -1;
		}
		.listbox{
			margin-top: 450rpx;
			background: #FFFFFF;
			border-radius: 64rpx 64rpx 0  0;
			box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08);
			padding-top: 140rpx;
			padding-left: 32rpx;
			padding-right: 32rpx;
			box-sizing: border-box;
			height: 70vh;
			overflow-y: scroll;
			padding-bottom: 140rpx;
			.title{
				border-radius: 64rpx 64rpx 0  0;
				display: flex;
				justify-content: space-between;
				font-weight: 500;
				font-size: 36rpx;
				color: #3D3D3D;
				line-height: 160rpx;
				padding: 0 76rpx;
				width: 100%;
				background-color: #fff;
				position: fixed;
				height: 160rpx;
				top: 35vh;
				left: 0;
				padding-bottom: 20rpx;
			}
			.list{
				display: flex;
				justify-content: space-between;
				margin-top: 44rpx;
				border-bottom: 1px solid #eee;
				padding-bottom: 16rpx;
				.pic{
					width: 134rpx;
					height: 134rpx;
					background-color: #25CE88;
					border-radius: 10rpx;
					margin-right: 20rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.cen{
					// margin-right: 140rpx;
					.cena{
						font-weight: 500;
						font-size: 28rpx;
						color: #3D3D3D;
						line-height: 38rpx;
					}
					.cenb{
						font-weight: 400;
						font-size: 24rpx;
						color: #3D3D3D;
						line-height: 32rpx;
						margin-top: 14rpx;
					}
					.cenc{
						font-weight: 400;
						font-size: 24rpx;
						color: #3D3D3D;
						line-height: 32rpx;
						margin-top: 14rpx;
					}
					.rt{
						font-weight: 500;
						font-size: 20rpx;
						margin-top: 24rpx;
						text{
							display: inline-block;
							padding: 4rpx 18rpx;
							box-sizing: border-box;
							// border: 1px solid #ccc;
							border-radius: 20rpx;
							margin-right: 10rpx;
						}
						.ke{
							background: #B7FFE1;
							color: #109F64;
						}
						.gui{
							background: #B7FFE1;
							color: #109F64;
						}
						.man{
							background:#FFEFEF;
							color: #FF4444;
						}
						.bu{
							background:#E1E1E1;
							color: #666666;
						}
					}
				}
				.right{
					padding-top: 40rpx;
					image{
						width: 40rpx;
						height: 40rpx;
					}
					text{
						display: block;
						font-weight: 400;
						font-size: 20rpx;
						color: #808080;
						line-height: 28rpx;
					}
				}
			}
		}
	}
	.active{
		border-bottom: 10rpx solid #3AEEA3;
		border-radius: 7rpx;
		padding-bottom: 10rpx;
		font-weight: 700;
	}
</style>