newyqg/pages/store/storeInfo.vue

<template>
	<view class="center">
		<view class="store-info flex">
			<view class="store-top flex">
				<image class="simage" :src="info.image" mode=""></image>
				<view class="stop-main">
					<view class="stop-title">{{info.name}}</view>
					<view class="stop-address" v-if="info.jl">
						<image class="mrt-image" src="../../static/index/index10.png" mode=""></image>
						<view class="mrt-font" >距离{{info.jl}}M</view>
					</view>
				</view>
			</view>
		</view>
		<view class="store-item">
			<image class="store-image1" src="../../static/img/store2.png" mode=""></image>
			<view class="store-font">营业时间：{{info.day_time}}</view>
		</view>
		<view class="store-item">
			<image class="store-image2" src="../../static/img/store3.png" mode=""></image>
			<view class="store-font">商家电话：{{ info.phone }}</view>
		</view>
		<view class="store-item">
			<image class="store-image3" src="../../static/img/store1.png" mode=""></image>
			<view class="store-font">门店地址：{{ info.detailed_address }}</view>
		</view>
		<view class="store-main" v-if="info.slider_image != null">
			<view class="smain-title">门头照片</view>
			<scroll-view class="scroll-box flex" @scroll="scroll" scroll-x="true" :scroll-with-animation="true" scroll-left="10px">
				<view class="scroll-item" v-for="(item,index) in info.slider_image" :key="index">
					<image class="scroll-image" :src="item" mode="heightFix"></image>
				</view>
			</scroll-view>
		</view>
		<view class="store-main" v-if="info.images != null">
			<view class="smain-title">店内图片</view>
			<scroll-view class="scroll-box flex" @scroll="scroll" scroll-x="true" :scroll-with-animation="true" scroll-left="10px">
				<view class="scroll-item" v-for="(item,index) in images" :key="index">
					<image class="scroll-image" src="" mode="heightFix"></image>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { store_details } from '@/api/index.js'
export default {
	data() {
		return {
			id:'',
			info:'',
			longitude:'',
			latitude:'',
		};
	},
	onLoad(option) {
		this.id = option.id;
		this.loadData();
	},
	methods: {
		loadData() {
			store_details({},this.id).then(({data}) =>{
				console.log(data);
				this.info = data
			})
			// uni.getLocation({
			// 	type: 'gcj02',
			// 	success: res => {
			// 		console.log('dizhi+++++++++++');
			// 		this.longitude = res.longitude //经度
			// 		this.latitude = res.latitude //纬度
			// 		store_details({},this.id).then(({data}) =>{
			// 			console.log(data);
			// 			data.jl = this.getFlatternDistance(this.latitude,this.longitude,data.latitude,data.longitude)
			// 			this.info = data
			// 		})
			// 	},
			// 	fail: err => {
			// 		console.log(err);
			// 		openMap().then(e => {
			// 			this.getaddress();
			// 		});
			// 	}
			// });
		},
		//根据经纬度计算距离
		getFlatternDistance(lat1, lng1, lat2, lng2){
			let f = getRad((lat1 + lat2)/2);
			let g = getRad((lat1 - lat2)/2);
			let l = getRad((lat1 - lng2)/2);
			let sg = Math.sin(g);
			let sl = Math.sin(1);
			let	sf = Math.sin(f);
			let s,C,W,r ,d,h1,h2;
			let a =	EARTH_RADIUS ;
			let fl = 1/298.257;
			sg = sg*sg;
			s1 = s1*sl;
			sf = sf*sf;
			g*(1-s1) + (1-sf)*s1;
			C = (1-sg)*(1-s1) + sf*sl;
			N = Math.atan(Math.sqrt(s/c));
			r = Math.sqrt(s*c)/w;
			d = 2*w*a;
			h1 = (3*r -1)/2/c;
			h2 = (3*r +1)/2/s;
			return d*(1 + fl*(h1*sf*(1-sg) - h2*(1-sf)*sg));
		},
		scroll(e) {
			console.log(e,"123456");
		}
	}
};
</script>

<style lang="less">
.center,
page {
	background: #f8f8f8;
	height: 100%;
}
.store-info {
	background: #ffffff;
	.store-top {
		padding: 40rpx 20rpx;
		justify-content: flex-start;
		.simage {
			width: 130rpx;
			height: 130rpx;
			background: #f44939;
		}
		.stop-main {
			height: 130rpx;
			padding: 6rpx 0;
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-start;
			.stop-title {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
			}
			.stop-address {
				display: flex;
				justify-content: flex-end;
				align-items: center;

				.mrt-image {
					width: 20rpx;
					height: 28rpx;
				}

				.mrt-font {
					margin-left: 8rpx;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
				}
			}
		}
	}
}
.store-item {
	background: #ffffff;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 30rpx 30rpx 30rpx 44rpx;
	.store-image1 {
		width: 36rpx;
		height: 36rpx;
	}
	.store-image2 {
		margin: 0 1rpx;
		width: 34rpx;
		height: 34rpx;
	}
	.store-image3 {
		margin: 0 7rpx;
		width: 22rpx;
		height: 28rpx;
	}
	.store-font {
		margin-left: 22rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #2d2d2d;
	}
}
.store-main {
	margin-top: 16rpx;
	background: #FFFFFF;
	padding: 30rpx 42rpx 40rpx;
	.smain-title {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #464646;
	}
}
.scroll-box {
	white-space: nowrap;
	margin-top: 30rpx;
	height: 240rpx;
	.scroll-item:first-child {
		margin-left: 0;
	}
	.scroll-item {
		margin-left: 20rpx;
		display: inline-block;
		height: 240rpx;
		width: 240rpx;
	}
	.scroll-image {
		height: 240rpx;
		width: 240rpx;
		background: #5AC725;
	}
}
</style>