<template>
	<view class="container-image">
		<view class="iamges-box">
			<image class="image" :src="!!propsImagesSrc?propsImagesSrc:imageSrc" mode="widthFix"></image>
			<block v-if="propsdiyTitleType==='Data'">
				<view class="title f-24 col-9">{{!!propsdiyTitle?propsdiyTitle:languageStatus!=1?'暂无数据，快去逛逛吧~':'쇼핑하러 가기'}}</view>
			</block>
			<block v-if="propsdiyTitleType==='packet'">
				<view class="title f-24 col-9 m-btm20">您还没有红包，去红包广场领取吧！</view>
				<view class="navPacket f-24" @click="navgateTo()">立即去领取</view>
			</block>
		</view>
	</view>
</template>

<script>
	import App from "@/common/js/app.js"
	export default {
		data() {
			return {

			}
		},
		methods:{
			navgateTo(){
				App.navigationTo({
					url:'pages/subPages/redpacket/redsquare'
				})
			}
		},
		props: {
			// 参数:自定义图片 580* 270
			diyImagesSrc: {
				type: String,
				default: function() {
					return ""
				}
			},
			// 参数:自定义标题
			diyTitle: {
				type: String,
				default: function() {
					return ""
				}
			},
			diyTitleType: {
				type: String,
				default: function() {
					return "Data"
				}
			}
		},
		computed: {
			imageSrc() {
				return this.imageRoot + 'noneMores.png'
			},
			propsImagesSrc() {
				return this.diyImagesSrc
			},
			propsdiyTitle() {
				return this.diyTitle
			},
			propsdiyTitleType() {
				return this.diyTitleType
			}
		}
	}
</script>

<style>
	.container-image {
		position: relative;
		display: block;
		width: 100%;
		height: 0;
		padding-bottom: 100%;
		overflow: hidden
	}

	.iamges-box {
		position: absolute;
		display: flex;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		flex-direction: column;
		justify-content: center;
		align-items: center
	}

	.iamges-box .image {
		width: 580upx;
		height: 270upx;
		display: block;
		background: transparent no-repeat;
		background-size: cover
	}
	.navPacket{
		color: #17D117;
	}
</style>
