yanzong_qianduan/pages/activity/presale.vue

<template>
	<view class="presale">
		<view class="presale-hd">
			<view class="rule" @click="openPage()"></view>
		</view>
		<view class="presale-bd">
			<view class="tab">
				<u-tabs :list="menuList" :is-scroll="true" :show-bar="false" active-color="#FFFFFF"
					bg-color="rgba(255,255,255,0)" inactive-color="rgba(255,255,255,0.62)" v-model="current"
					@change='onChosed'></u-tabs>
			</view>
			<view class="title">
				<image :src="$picUrl+'/static/news/newPresale-1.png'"></image>
				正在进行中
				<image :src="$picUrl+'/static/news/newPresale-1.png'"></image>
			</view>
			<view class="list" :isLoading="isLoading">
				<view class="item" v-for="(item,index) in goodList" :key="index" @click="goPre(item)">
					<image class="pic" :src="item.image" mode="center"></image>
					<view class="info">
						<view class="t">{{item.goods_name}}</view>
						<view class="d">
							<u-count-down :timestamp="item.end_time*1000" format="HH:mm:ss"></u-count-down><text>后失效</text>
						</view>
						<view class="p">
							<image :src="$picUrl+'/static/news/newPresale-2.png'"></image>
							<view class="s">预约价¥{{item.goods_price_min}}</view>
							<view class="n">去预约</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-empty text="暂无信息" v-if="menuList.length == 0 || goodList.length==0" mode="list" style="margin-top: 160rpx;">
		</u-empty>
	</view>
</template>

<script>
	import * as Api from '@/api/activity'
	export default {
		data() {
			return {
				timestamp: '',
				current: 0,
				isLoading: true,
				goodList: [],
				menuList: [],
				info: ''
			}
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow(options) {
			this.getListCharts()
		},
		methods: {
			goPre(item) {
				uni.navigateTo({
					url: '/pages/goods/detail?goodsId=' + item.goods_id + '&isPre=' + true+'&pre_id='+this.info.id+'&isBuy='+this.info.end_time
				})
			},
			openPage() {
				uni.navigateTo({
					url: '/pages/activity/presaleRule?type=5'
				})
			},
			getListgoodData(categoryId) {
				let app = this;
				let pamars = {
					category_id: categoryId,
				}
				Api.presaleGoodsList(pamars)
					.then(result => {
						app.goodList = result.data.list;
					})
					.finally(() => app.isLoading = false)
			},
			onChosed(index) {
				let app = this;
				app.current = index;
				app.getListgoodData(app.menuList[index].category_id)
			},
			beginTime(end) {
				const now = new Date();
				const year = now.getFullYear();
				const month = now.getMonth() + 1;
				const day = now.getDate();
				const hour = now.getHours();
				const minute = now.getMinutes();
				const second = now.getSeconds();
				let start= year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
				return (Date.parse(end.replace(/-/g, '/'))-Date.parse(start.replace(/-/g, '/')))
			},
			// 分类
			getListCharts() {
				let app = this
				app.menuList = []
				let pamars = {
					store_id: 10001
				}
				Api.presaleCateList(pamars)
					.then(result => {
						app.timestamp = this.beginTime(result.data.info.p_time);
						app.info = result.data.info
						app.menuList = result.data.category;
						app.getListgoodData(result.data.category[0].category_id)
					})
					.finally(() => app.isLoading = false)
			},
			goDetail(orderId) {
				uni.navigateTo({
					url: '/pages/goods/detail?goodsId=' + orderId
				})
			},
			goDetailMore(categoryId, name) {
				uni.navigateTo({
					url: '/pages/activity/charts?categoryId=' + categoryId + '&name=' + name
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.presale {
		background: #ff7b79 url(https://www.royaum.com.cn/static/news/newPresale-bg.jpg) center top no-repeat;
		background-size: 100% auto;
		overflow: hidden;
		min-height: 100vh;

		&-hd {
			position: relative;
			height: 380rpx;

			.rule {
				width: 100rpx;
				height: 60rpx;
				position: absolute;
				right: 0;
				top: 74rpx;
				z-index: 2;
			}
		}

		&-bd {
			width: 678rpx;
			margin: 0 auto;
			padding-bottom: 30rpx;
			margin-top: 20rpx;

			.title {
				width: 100%;
				border-radius: 12rpx 12rpx 0 0;
				height: 78rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
				border: 2px solid #fff;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 32rpx;
					height: 13rpx;
					margin: 0 20rpx;
				}
			}

			.list {
				background-color: #fff;
				border-radius: 0 0 12rpx 12rpx;
				overflow: hidden;

				.item {
					padding: 45rpx 40rpx 45rpx 30rpx;
					overflow: hidden;
					border-top: 1px solid #F1F1F1;

					&:first-child {
						border-top-color: #fff;
					}

					display: flex;

					image {
						width: 220rpx;
						height: 220rpx;
						margin-right: 30rpx;
					}

					.info {
						flex: 1;
						max-width: 400rpx;

						.t {
							height: 80rpx;
							line-height: 40rpx;
							font-size: 32rpx;
							font-weight: 500;
							color: #626262;
							word-break: break-all;
							text-overflow: ellipsis;
							overflow: hidden;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
						}

						.d {
							display: flex;
							align-items: center;
							height: 44rpx;
							font-size: 32rpx;
							font-weight: 500;
							color: #F94021;

							text {
								color: #9E9E9E;
								margin-left: 15rpx;
							}
						}

						.p {
							width: 396rpx;
							height: 88rpx;
							position: relative;

							image {
								width: 396rpx;
								height: 88rpx;
							}

							.s {
								width: 240rpx;
								line-height: 88rpx;
								position: absolute;
								text-align: center;
								left: 0;
								top: 0;
								z-index: 2;
								font-size: 32rpx;
								font-weight: 500;
								color: #FF584D;
							}

							.n {
								width: 150rpx;
								line-height: 88rpx;
								text-align: center;
								position: absolute;
								right: 0;
								top: 0;
								z-index: 2;
								font-size: 32rpx;
								font-weight: 500;
								color: #FFFFFF;
							}
						}
					}
				}
			}
		}
	}
</style>