<template>
<view class="page-content">
<!-- 天天特价 -->
<view class="title-2" style="margin-top: 20rpx;" >
<image :src="homepage_icon_tejiabg" mode="aspectFit"></image>
<view class="txt-content">
</view>
</view>
<!-- 天天特价展示 -->
<view class="store-display" style="border: none;" >
<scroll-view lower-threshold="50px" scroll-x="true" show-scrollbar="true"
@scrolltolower="lowerDay" v-bind:style="{'height': '1000rpx'}" >
<view class="store-item-box" v-if="day_day_list.length != 0" >
<!-- -->
<template v-for="(value,i) in day_day_list " >
<view class="store-item" style="width: 50%; border: none;background-color: #F3F3F3; " >
<view class="day-item">
<view class="day-item-img" @click="goods_id = value.goods_id ,goodsDetailTo()" >
<image class="img" :src="value.original_img" mode="aspectFit"></image>
<!-- original_img value.goods_thumb -->
<view v-if="false" class="txt">
</view>
</view>
<view class="day-item-price">
<text class="txt-new" >
￥{{value.shop_price}}
</text>
<text class="txt-old" >
￥{{value.market_price}}
</text>
<br/>
<text class="txt-new-2" >
VIP￥{{value.vip_price}}
</text>
</view>
</view>
</view>
</template>
</view>
<view class="no-data" v-if="day_day_list.length == 0" >
没有更多数据，待商家上传
</view>
</scroll-view>
</view>
</view>
</template>
<script>
export default {
props:{
day_day_list:Array,
homepage_icon_tejiabg:String,
login_isShow:Boolean,
},
data() {
return {
goods_id:'',
ima_url:'',
}
},
onLoad() {
this.ima_url = getApp().globalData.global_domain_name ;
},
methods:{
lowerDay() {
this.$emit('lowerDay');
},
goodsDetailTo() {
this.$emit('goodsDetailTo',this.goods_id);
},
}
}
</script>
<style lang="scss" scoped >
.page-content {
margin-top: 70rpx;
// 每日好店
.title-2 {
width: 95%;
height: 60rpx;
margin: 20rpx auto ;
text-align: center;
position: relative;
image {
width: 97%;
height: 60rpx;
border-radius: 20rpx;
margin: auto;
object-fit: contain;
}
.txt-content {
width: 100%;
height: 60rpx;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
.txt {
width: 100%;
height: 60rpx;
line-height: 60rpx;
font-size: 20rpx;
color: #FFFEFF;
text-align: center;
position: relative;
.see-add {
height: 60rpx;
width: 150rpx;
position: absolute;
top: 0;
left: 80rpx;
.see-add-img {
vertical-align: middle;
height: 30rpx;
width: 150rpx;
object-fit: contain;
}
.see-add-img-txt {
z-index: 100;
color: #AF1513;
text-align: center;
height: 60rpx;
width: 150rpx;
line-height: 60rpx;
font-size: 20rpx;
}
}
.open-store {
height: 60rpx;
width: 160rpx;
position: absolute;
top: 0;
right: 150rpx;
.see-add-img {
vertical-align: middle;
height: 30rpx;
width: 150rpx;
object-fit: contain;
}
.see-add-img-txt {
z-index: 100;
color: #AF1513;
text-align: center;
height: 60rpx;
width: 150rpx;
line-height: 60rpx;
font-size: 20rpx;
}
}
.open-store-2 {
height: 60rpx;
width: 150rpx;
position: absolute;
top: 0;
right: 80rpx;
.see-add-img {
vertical-align: middle;
height: 30rpx;
width: 150rpx;
object-fit: contain;
}
.see-add-img-txt {
z-index: 100;
color: #AF1513;
text-align: center;
height: 60rpx;
width: 150rpx;
line-height: 60rpx;
font-size: 20rpx;
}
}
}
}
}
.store-display {
width: 97%;
height: 1000rpx;
font-size: 28rpx;
margin: 0 auto;
border: 4rpx solid #374760;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
.store-item-box {
width: 100%;
height: 1000rpx;
display: flex;
flex-wrap: wrap;
flex-direction: column;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
.store-item {
width: 50%;
height: 500rpx;
border-bottom: 2rpx solid #C8C8C8;
border-right:2rpx solid #C8C8C8;
background-color: #FFFFFF;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
.logo {
width: 70rpx;
height: 70rpx;
margin: 30rpx auto 20rpx;
border-radius: 50%;
image {
border-radius: 50%;
width: 70rpx;
height: 70rpx;
object-fit: cover;
}
}
.name {
width: 100%;
text-align: center;
}
.day-item {
width: 95%;
height: 97%;
vertical-align: middle;
margin: auto auto;
background-color: #FFFFFF;
.day-item-img {
width: 100%;
height: 80%;
position: relative;
.img {
width: 100%;
height: 100%;
// object-fit: cover;
}
.txt {
width: 100%;
height: 50rpx;
line-height: 50rpx;
background-color: rgba($color: #8891A0, $alpha: 0.6);
color: #FFFFFF;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
}
.day-item-price {
width: 100%;
height: 22%;
text-align: left;
position: relative;
.img {
width: 45rpx;
height: 45rpx;
position: absolute;
top: 20rpx;
right: 18rpx;
image {
width: 45rpx;
height: 45rpx;
object-fit: contain;
border-radius: 50%;
}
}
.txt-new {
font-size: 28rpx;
color:#CC0519 ;
padding-left: 15rpx;
}
.txt-new-2 {
font-size: 26rpx;
color:#CC0519 ;
text-align: left;
padding-left: 25rpx;
}
.txt-old {
font-size: 20rpx;
text-decoration:line-through;
color: #7F7F7F;
}
}
}
}
}
.no-data {
width: 100% ;
text-align:center;
line-height:250rpx;
}
}
}
</style>
