shjz-applet/pages/gps/gps.vue

<template>
	<view>
		<!-- 头部 -->
		<status-nav :ifReturn="false" navBarTitle="GPS" :marginBottom="0"></status-nav>
		<!-- 背景 -->
		<view class="gps-content-bg border-box" :style="{height:screenHeight-statusHeight-50+'px'}">
			<image src="/static/public/gps-bg.jpg" mode="heightFix"></image>
		</view>
		<!-- 二维码 -->
		<view class="gps-code">
			<view class="tips font30">
				<text>
					查询物流实时状态
					请常按识别下方二维码
				</text>
			</view>
			<image :show-menu-by-longpress="true" src="/static/public/gps-code.jpg" mode="widthFix" @click="previewImage"></image>
		</view>
		<!-- 尾部 -->
		<foot-tab :current="2"></foot-tab>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				screenHeight:uni.getSystemInfoSync().screenHeight,
				statusHeight:uni.getSystemInfoSync().statusBarHeight,
			}
		},
		onLoad(op) {
			
		},
		methods: {
			previewImage() {
				uni.previewImage({
					// 需要预览的图片链接列表
					urls: [],
					// 为当前显示图片的链接/索引值
					current: '/static/public/gps-code.jpg',
					// 图片指示器样式	
					indicator:'default',
					// 是否可循环预览
					loop:false,
					// 长按图片显示操作菜单，如不填默认为保存相册
					success: res => {
						console.log('res', res);
					}, 
					fail: err => {
						console.log('err', err);
					}
				});
			}
		}
	}
</script>
<style scoped>
	.gps-content-bg{
		width: 100%;
		padding-bottom: 98rpx;
	}
	.gps-content-bg>image{
		min-width: 100%;
		min-height: 100%;
	}
	.gps-code{
		width: 500rpx;
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-55%);
	}
	.gps-code .tips{
		line-height: 1.6;
		color: #ffffff;
		text-align: center;
		margin-bottom: 60rpx;
	}
	.gps-code>image{
		width: 100%;
		border-radius: .02rem;
	}
</style>