promotion.vue

<template>
	<view class="promo_content" :style="[style_setting.bg_show ? {'background-image': 'url('+style_setting.bg_url+')'} : null, {'background-color': style_setting.bg_color}]">
		<view class="flex">
			<view>
				<i v-if="style_setting.icon_show" class="promo_icon" :style="{'background-image': 'url('+style_setting.icon_url+')'}"></i>
				<text class="promo_title" :style="{'color': style_setting.title_color, 'font-size': style_setting.title_font*2+'rpx'}">{{style_setting.title}}</text>
				<text class="du_start" v-if="this.style_setting.is_not_start">距开始:</text>
				<text class="countdown" v-if="style_setting.count_down_show">
					<uni-countdown :day="day" :hour="hour" :minute="minute" :second="second" :show-day="day > 0" backgroundColor="#000" color="#fff"></uni-countdown>
				</text>
			</view>
			<text class="check_more" @click="$jump(style_setting.more_link)">{{style_setting.more_title}}
				<svg viewBox="64 64 896 896" class="svg" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg>
			</text>
		</view>
		<view class="promo_goods_content">
			<view class="promo_goods_item" v-for="(item,key) in list" :key="key" @click="$jumpGoodDetail(item.goods_id)">
				<view class='img_box'>
					<image :src="item.default_image || $noGoodsImg"></image>
					<view v-if="item.stock<=0" class="stock_title">已售罄</view>
				</view>
				<view  v-if="isLogin">
					<text class="pro_price">￥{{item.pro_price}}</text>
					<text class="price">￥{{item.price}}</text>
				</view>
				<view v-else class="unshow_price">登录显示价格</view>
			</view>
			<view v-if="spaceArray.length" v-for="(item, key) in spaceArray" :key="key+65535" class="promo_goods_item"></view>
		</view>
	</view>
</template>

<script>
	import uniCountdown from "@/components/uni-countdown/uni-countdown.vue";
	import moment from 'moment';
	export default {
		props: {
			wrapper_props: {
				type: Object
			},
			isLogin: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				style_setting: this.wrapper_props.style_setting,
				list: this.wrapper_props.goods_list,
				day: 0,
				hour:0,
				minute: 0,
				second: 0,
				spaceArray: []
			}
		},
		mounted() {
			const t = this.style_setting.is_not_start ? this.style_setting.count_down_time : (this.style_setting.count_down_type === 1 ? this.wrapper_props.first_end_time : this.style_setting.count_down_time);
			const now = moment(new Date(), 'YYYY-MM-DD HH:mm:ss'),
				  end = moment(t, 'YYYY-MM-DD HH:mm:ss'),
				  du = moment.duration(end-now, 'ms');
			this.day = end.diff(now, 'day');
			this.hour = du.hours();
			this.minute = du.minutes();
			this.second = du.seconds();
			const space = 4 - this.list.length % 4;
			if(space !== 4) {
				this.spaceArray = new Array(space)
			}
		},
		components:{
			uniCountdown
		}
	}
</script>

<style lang="less" scoped>
	.promo_content {
		width: 702rpx;
		border-radius: 16rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin: 0 auto;
		padding: 0 24rpx 0 28rpx;
		box-sizing: border-box;
		border-radius: 16rpx;
	}
	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 88rpx;
	}
	.countdown {
		display: inline-block;
		vertical-align: middle;
	}
	.promo_icon {
		display: inline-block;
		width: 48rpx;
		height: 48rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		vertical-align: middle;
	}
	.promo_title {
		font-weight: 500;
		vertical-align: middle;
		margin: 0 12rpx;
	}
	.check_more {
		font-size: 22rpx;
		color: rgb(33, 33, 33);
	}
	.promo_goods_content {
		padding: 12rpx 0;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.promo_goods_content_after:after {
		content: '';
		flex: auto;
	}
	.promo_goods_item {
		width: 140rpx;
		text-align: center;
		margin-bottom: 14rpx;
		.img_box{
			position: relative;
			width: 140rpx;
			height: 140rpx;
			.stock_title{
				position: absolute;
				bottom: 0;
				width: 100%;
				background-color: rgba(0,0,0,0.5);
				height: 30rpx;
				color: #fff;
				font-size: 22rpx;
				line-height: 30rpx;
			}
		}
		image {
			width:140rpx;
			height: 140rpx;
		}
		.pro_price {
			color: #c3a070;
			font-size: 24rpx;
			width: 140rpx;
			display: block;
		}
		.price {
			color: #aeaeae;
			font-size: 24rpx;
			text-decoration: line-through;
			width: 140rpx;
			display: block;
		}
		.unshow_price {
			font-size: 20rpx;
		}
	}
	.du_start {
		font-size: 20rpx;
		vertical-align: middle;
		margin-right: 4rpx;
	}
	.svg {
		position: relative;
		top: 4rpx;
	}
</style>