tlfb/pages/index/child/wholesale.vue

<template>
	<view class="wholesale">
		<view class="title">
			<view class="img">
				<image src="../../../static/img/list1.png" mode=""></image>
			</view>
			<view class="title-t"> 批发专区 </view>
			<view class="about"> 限时抢购 </view>
		</view>
		<view class="date">
			<view class="date-item" @click="navto('/pages/product/wholesale?bin=' + encodeURI(list[0].time) + '&stp=' + list[0].stop + '&status=' + list[0].status + '&state=' + list[0].state)">
				<image src="../../../static/img/mom.png"></image>
				<view class="item-name">
					上午场
				</view>
				<view class="item-time">
					{{list[0].time}}~{{list[0].stop | time}}
				</view>
			</view>
			<view class="date-item" @click="navto('/pages/product/wholesale?bin=' + encodeURI(list[1].time) + '&stp=' + list[1].stop + '&status=' + list[1].status  + '&state=' + list[1].state)">
				<image src="../../../static/img/aft.png"></image>
				<view class="item-name">
					下午场
				</view>
				<view class="item-time">
					{{list[1].time}}~{{list[1].stop | time}}
				</view>
			</view>
			<view class="date-item" @click="navto('/pages/product/wholesale?bin=' + encodeURI(list[2].time) + '&stp=' + list[2].stop + '&status=' + list[2].status  + '&state=' + list[2].state)">
				<image src="../../../static/img/eve.png"></image>
				<view class="item-name">
					晚上场
				</view>
				<view class="item-time">
					{{list[2].time}}~{{list[2].stop | time}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getWholeTimeArea
	} from '@/api/whole.js'
	export default {
		data() {
			return {
				list: []
			}
		},
		filters: {
			time(val) {
				let str = ''
				if (val) {
					let time = new Date(val * 1000);
					let h = time.getHours() >= 10 ? time.getHours() : ('0' + time.getHours())
					let m = time.getMinutes() >= 10 ? time.getMinutes() : ('0' + time.getMinutes())
					str = h + ':' + m
				}
				return str
			}
		},
		mounted() {
			this.getTimeArea()
		},
		methods: {
			navto(url) {
				uni.navigateTo({
					url: url
				})
			},
			getTimeArea() {
				getWholeTimeArea().then(({
					data
				}) => {
					this.list = data.seckillTime
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	$grey: #95A0B1;
	$text: #333333;
	$red: #FF4C4C;

	.wholesale {
		padding: 20rpx;
		background-color: #fff;
		margin: 20rpx 0;

		.title {
			display: flex;
			line-height: 40rpx;

			.title-t {
				color: $text;
				font-weight: bold;
				margin: 0 20rpx;
				font-size: 34rpx;
			}

			.about {
				font-size: 24rpx;
				color: $grey;
			}

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.date {
			padding: 30rpx 0;
			display: flex;
			justify-content: space-between;

			.date-item {
				width: 220rpx;
				height: 300rpx;
				position: relative;

				image {
					border-radius: 20rpx;
					// max-width: 32%;
					width: 220rpx;
					height: 300rpx;
				}

				.item-name {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					position: absolute;
					top: 36rpx;
					padding-left: 30rpx;

				}

				.item-time {
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					position: absolute;
					top: 80rpx;
					padding-left: 30rpx;
				}
			}

			// image {
			// 	border-radius: 20rpx;
			// 	// max-width: 32%;
			// 	width: 220rpx;
			// 	height: 300rpx;
			// }
		}
	}
</style>