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="/static/news/newPresale-1.png"></image>
				正在进行中
				<image src="/static/news/newPresale-1.png"></image>
			</view>
			<view class="list" :isLoading="isLoading">
				<view class="item" v-for="(item,index) in goodList" :key="index">
					<image class="pic" :src="item.goods_image"></image>
					<view class="info">
						<view class="t">{{item.goods_name}}</view>
						<view class="d">
							<u-count-down :timestamp="timestamp" format="HH:mm:ss"></u-count-down><text>后失效</text>
						</view>
						<view class="p">
							<image src="/static/news/newPresale-2.png"></image>
							<view class="s">预约价¥{{item.goods_price_min}}</view>
							<view class="n" @click="goPre(i)">去预约</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import img from "@/static/news/newPeople-bg.png"
	import * as Api from '@/api/activity'
	export default {
		data() {
			return {
				timestamp: 24 * 3600 * 1000,
				current: 0,
				isLoading: true,
				goodList: [],
				menuList: [],
				list: [{
					name: '精选好物'
				}, {
					name: '吹风机'
				}, {
					name: '空调'
				}, {
					name: '手机'
				}, {
					name: '洗衣机'
				}, {
					name: '冰箱'
				}, {
					name: '彩电'
				}],
			}
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow(options) {
			this.getListCharts()
		},
		methods: {
			getListgoodData(categoryId) {
				let app = this;
				let pamars = {
					store_id: 10001,
					categoryId: categoryId,
				}
				Api.chartsGoodsList(pamars)
					.then(result => {
						app.goodList = result.data.data;
					})
					.finally(() => app.isLoading = false)
			},
			onChosed(index) {
				let app = this;
				app.current = index;
				app.getListgoodData(index != 0 ? app.menuList[index].category_id : '')
			},
			// 分类
			getListCharts() {
				let app = this
				app.menuList = []
				let pamars = {
					store_id: 10001
				}
				Api.charts(pamars)
					.then(result => {
						let obj = {
							name: '精选好物'
						}
						result.data.unshift(obj)
						app.menuList = result.data;
						app.getListgoodData('')
					})
					.finally(() => app.isLoading = false)
			},
			goDetail(orderId) {
				uni.navigateTo({
					url: '/pages/goods/detail?orderId=' + orderId
				})
			},
			goDetailMore(categoryId, name) {
				uni.navigateTo({
					url: '/pages/activity/charts?categoryId=' + categoryId + '&name=' + name
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.presale {
		background: #ff7b79 url(@/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 45rpx;
					overflow: hidden;
					border-top: 1px solid #F1F1F1;

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

					display: flex;

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

					.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: 60rpx;
							font-size: 32rpx;
							font-weight: 500;
							color: #F94021;

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

						.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>