LSM_OIL_SITE/pages/stationList/components/StationItem.vue

<template>
	<view class="my-card my-cell radius">
		<view class="flex ">
			<view class="icon-self flex-sub margin-xs">
				<image src="https://www.51xingka.net/LSMOIL/static/img/oil.png" height="100px" width="100px" mode="widthFix"></image>
			</view>


			<view class="flex-quadruple">
				<view class="navigation" @tap="openMap">
					10.2km|
					<image class="icon-self" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=907966196,3433585328&fm=11&gp=0.jpg"
					 mode=""></image>
					导航
				</view>
				<view class="text-cut" style="width: 400upx;">
					<text class="strong">
						中国石化(紫云路)
					</text>
				</view>
				<view class="">
					<text class="">
						营业时间：00:00-23:59(紫云路)
					</text>
				</view>
				<view class="text-cut" style="width: 400upx;">
					<text class="">
						经开区紫云路与金寨南路交口向西经开区紫云路与金寨南路交口向西经开区紫云路与金寨南路交口向西经开区紫云路与金寨南路交口向西经开区紫云路与金寨南路交口向西经开区紫云路与金寨南路交口向西200米.....
					</text>
				</view>
				<view class="padding-top-xs">
					<text class="strong padding-right font-16">
						0#柴油
					</text>
					<text>市场价 </text>
					<text class="s-rich">￥6.5</text>
				</view>
				<view class="padding-bottom-xs">
					<text class="color-999 font-12">更新时间；2020-05-07,具体油价与工作人员确定</text>
				</view>

			</view>

		</view>
		<PriceList />


	</view>
</template>

<script>
	import PriceList from './PriceList'
	export default {
		components: {
			PriceList
		},
		data() {
			return {
				nodes: [{
					name: 'div',
					attrs: {
						class: 'div-class',
						style: 'line-height: 60px; color: red; text-align:center;'
					},
					children: [{
						type: 'text',
						text: 'Hello&nbsp;uni-app!'
					}]
				}],
				strings: '<div style="text-align:center;"><img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png"/></div>'
			}
		},
		methods: {
			// 打开map地图
			openMap() {
				let that = this
				uni.openLocation({
					latitude: 117,
					longitude: 21,
					name: '江西景德镇',
					address: '九龙路1188号',
					scale: 12,
					success: function() {
						console.log('success');
					},
					fail: (error) => {
						console.log('error')
						console.log(error)
					},
					complete: () => {

						console.log('made')
					},

				});

				var map = uni.createMapContext('map');
				map.moveToLocation();
			},
		}
	}
</script>

<style>
	.bottom-part {
		width: 750upx;
		position: absolute;
		bottom: 60rpx;
	}

	.icon-self {
		width: 1rem;
		height: 1rem;
	}

	.my-card,
	.my-cell {
		background-color: #fff;
		position: relative;
	}

	.oil-card-price {
		max-width: 4rem;
		margin: auto;
	}

	.free-money {
		color: #FE0505;
		max-width: 3rem;
		font-size: 12px;
		line-height: 12px;
	}

	.navigation {
		position: absolute;
		right: 16px;
	}
</style>