waterElectricityMinApp/pagesElectric/jiaofei/ad_dianfei.vue

<template>
	<!-- <web-view :src="url" :progress="false"></web-view> -->
	<view class="container" :style="{height: screenHeight}">
		<image :src="url" :show-menu-by-longpress="true" mode="aspectFit" class="ad_img" @tap="longClickImg"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ceshi: 'code',
				screenHeight: '',
				url: ''
			}
		},
		onLoad() {
			this.get_img()
		},
		onShow() {
			// 从新计算高度
			setTimeout(() => {
				this.calc_screen_height()
			}, 1500)
		},
		methods: {
			async get_img() {
				let res = await this.$myRequest({
					host: this.ceshi,
					url: '/HotWaters/advertquery_h.action',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						'url_name': '水电广告'
					}
				})

				// console.log(res.data)
				if (res.data.data.length == 0) {
					return
				}

				if (res.data.code == 200) {
					if (res.data.data.length > 0) {
						this.url = res.data.data[res.data.data.length - 1].url
					} else {
						uni.showToast({
							title: '未找到图片',
							duration: 2000
						})
					}
				} else {
					uni.showToast({
						title: '加载数据异常',
						duration: 1500
					})

					return
				}
			},
			longClickImg() {
				wx.previewImage({
					current: this.url,
					urls: [this.url]
				})
			},
			/**
			 * 计算屏幕的高度
			 */
			calc_screen_height() {
				uni.getSystemInfo({
					success: res => {
						let h = ((res.screenHeight * (750 / res.windowWidth)) - 160) //将px 转换rpx
						this.screenHeight = Math.floor(h) + 'rpx'
					}
				});
			}
		}
	}
</script>

<style scoped>
	page {
		background-color: #f5f5f5;
	}

	.container {
		display: flex;
		flex-direction: column;
		font-size: 29upx;
		font-family: "MicrosoftYaHei";
		padding: 10rpx;
		width: 730rpx;
	}

	.ad_img {
		width: 730rpx;
		height: 100%;
	}
</style>