<template>
	
	<view class="Sbox" 
		:style="{ 'background-image': 'url('+ad.backgroundPicUrl+')', backgroundSize: '100% 86px' }"
		v-if="Id!=0"
	>
		<view style="display: flex;flex-direction: row;align-items: center;">
			<u-avatar :src="shopData.Logo" size="100" slot="addBtn"></u-avatar>
			<view class="shopbox_l_text">
				<text class="item_text" :style=" {'font-size': '30rpx','color': ad.fontColor,'font-size':'Bold'}">{{shopData.Name?shopData.Name:''}}</text>
				<text class="item_text" :style=" {'font-size': '24rpx','color': ad.fontColor,}">{{shopData.Notice?shopData.Notice:''}}</text>
			</view>
		</view>
		<button class="fx" open-type="share">
			<image
			  mode="aspectFit"
			  :src="ad.bottonImg"
			  style="height:100%;width: 100%;"
			/>
		</button>
		
	</view>
	
</template>

<script>
export default {
	props: ["ad"],
	data() {
	  return {
	    shopData:{},
		Id:0
	  }
	},
	created() {
	  this.Id = uni.getStorageSync("mall_UserInfo") ? uni.getStorageSync("mall_UserInfo").UserSmallShopId: 0;
	  if(this.Id!=0){
		  this.getSmallShopById()
		  console.log(this.ad,'this.ad')
	  }
	  
	  
	},
	methods:{
		getSmallShopById(){
			 
			this.request2(
				{
					url: '/api/AppletUser/GetSmallShopById',
					data: {
						Id: this.Id
						// Id: 5
					}
				},
				res => {
					if (res.resultCode == 1) {
						this.shopData = res.data
					}
				}
			);
		}
	},
}
</script>

<style>
	.Sbox{
		width: 100%;
		height: 86px;
		padding: 0 30px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		
	}
	.Sbox .shopbox_l_text{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		width: 180px;
		height: 100rpx;
		margin-left: 10px;
	}
	.Sbox .fx{
		width: 65px;
		height: 27px;
		border: none;
		outline: none;
		padding: 0;
		margin: 0;
		line-height: unset;
		background: none;
	}
	.Sbox button:after{
		border: none;
	}
	.Sbox .item_text{
		font-size: 24rpx;color: #878787;width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
	}
</style>
