tlfb/pages/product/store.vue

<template>
	<view class="store">
		<view class="list">
			<view class="item" v-for="(item,index) in list">
				<view class="left">
					<view class="img">
						<image :src="item.image" mode=""></image>
					</view>
					<view class="middle">
						<view class="name">
							<text class="storeName">{{item.name}}</text><br>
							<text class="address">{{ item.detailed_address }}</text>
						</view>
						<view class="distance">
							<image src="@/static/icon/img01.png" mode=""></image>
							距离{{item.range}}KM
						</view>
					</view>
				</view>
				<view class="about">
					门店
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { openMap } from '@/utils/rocessor.js';
import { storeList } from '@/api/index.js'
export default {
	data(){
		return {
			latitude:'',
			longitude:'',
			list:[],
		}
	},
	onLoad() {
		this.getaddress();
	},
	methods:{
		loadData(){
			const obj = this;
			console.log(obj.longitude)
			storeList({
				longitude:obj.longitude,//经度
				latitude:obj.latitude,//纬度
			}).then(function({ data }) {
					obj.list = data.list.map(e => {
						e.show = true;
						return e;
					});
				})
				.catch(e => {
					console.log(e);
				});
		},
		//获取定位信息
		getaddress() {
			let obj = this;
			uni.getLocation({
				type: 'gcj02',
				success: res => {
					obj.latitude = res.latitude;
					obj.longitude = res.longitude;
					this.loadData()
				},
				fail: err => {
					openMap().then(e => {
						this.getaddress();
					});
				}
			});
		},
		
	}
}
</script>

<style lang="scss" scoped>
$grey: #95A0B1;
$text: #333333;
$red: #FF4C4C;
	.store {
		.list {
			.item {
				box-shadow: 2rpx 2rpx 10rpx #e1e1e1;
				height: 220rpx;
				border-radius: 20rpx;
				background-color: #fff;
				margin: 20rpx;
				padding: 20rpx;
				display: flex;
				justify-content: space-between;
				.left {
					display: flex;
					.img {
						margin-right: 20rpx;
						image {
							border-radius: 20rpx;
							width: 180rpx;
							height: 180rpx;
						}
					}
					.middle {
						display: grid;
						align-content: space-between;
						.name {
							.storeName {
								font-weight: bold;
								font-size: 32rpx;
								color: #333333;
							}
							.address {
								font-size: 20rpx;
								color: #6c6c6c;
							}
						}
						.distance {
							font-size: 26rpx;
							color: $grey;
							image {
								width: 20rpx;
								height: 25rpx;
								margin-right: 10rpx;
							}
						}
					}
				}
				.about {
					font-size: 26rpx;
					padding: 0 10rpx;
					border-radius: 10rpx;
					height: 50rpx;
					line-height: 50rpx;
					color: #fff;
					background: linear-gradient(90deg,  #FFBD70 0%, #FF8F44 100%);
				}
			}
		}
	}
</style>