uni-popup 小程序首页弹出层

景： 要求在首页加载的时候弹出弹框显示一张图片，弹出五秒后自动关闭，也可以点击
叉号手动关闭；如图：

代码：

<template>
  <u-popup
	class="auth-popup"
	mode="center"
	width="600rpx"
	height="770rpx"
	:closeable="true"
	close-icon-color="#010101"
	:mask-close-able="false"
	close-icon-size="42"
	border-radius="5">
		   <view class="back_box">
				<image
					class="back_img"
					:src="popUpUrl"
					:key="index"
				></image>
			</view>
  </u-popup>
</template>
<script>
	import http from '@/api/http.js';
	import {
		getImsgPushlogmsg
	} from '@/api/interfaceHDB.js';
	
	export default {
		data() {
			return {
				isShowPoupon: false, //是否隐藏对话框
				popUpUrl: "", //首页弹窗图片
			}
		},
		mounted() {
			this.getLogdatainfo();
		},
	    methods: {
			// 获取弹窗内容
			getLogdatainfo() {
				http.get(getImsgPushlogmsg).then(res => {
				    if (res.list[0]) {
						this.popUpUrl = res.list[0].pushmsgJpushType; //图片地址
						this.isShowPoupon = true;
						
						//设置五秒后弹窗自动关闭
						let time = setTimeout(item => {
							this.isShowPoupon = false;
							clearTimeout(time)
						}, 5000)
					} else {
						console.log('没有弹窗数据')
					}
				})
			},
		}
</script>
<style lang="less" scoped>
	.back_box {
		position: relative;
		width: 100%;
		height: 100%;
		
		.back_img {
			width: 100%;
			height: 100%;
		}
	}
</style>

接口数据：