groupon-wx/pages/index/diy/components/latestGroupBuying.vue

<template>
	<view class="index-product-wrapper" v-show="!isSortType">

		<!-- 拼团列表 -->

		<view class="list-box animated" v-for="(e, index) in grouponData" :key="index">


			<productConSwiperGroupbuying class="skeleton-rect" :imgUrls="e.slideshow" :videoline="e.video_link"
				@videoPause="videoPause"></productConSwiperGroupbuying>

			<view class="content">
				<view class="home">
					<view class="count">共{{ e.goodsTotal }}个</view>
					<scroll-view scroll-x class="navscroll"> <!-- 设置滚动条方向为横向 -->
						<view style="width: 108rpx;height: 108rpx; margin-right: 20rpx; padding: 0;" class="item"
							v-for="item in e.goodsImage">
							<!-- 通过for循环生成view -->
							<image style="width: 108rpx;height: 108rpx;" :src="item" mode="scaleToFill" />
						</view>
					</scroll-view>
				</view>
			</view>


			<view class="wrapper">
				<view class="price">
					<view>
						¥{{ e.minPrice || 0.00 }} ~ ¥ {{ e.maxPrice || 0.00 }}
					</view>
				</view>
				<view class="introduce" @click="goToDetail(e)">
					<view>
						{{ e.mainTitle || '测试名字' }}
					</view>
					<image src="http://www.gzzzyd.com/groupon/home_slices/进入箭头2小@2x.png" mode="scaleToFill" />

				</view>

				<view class="countdown flex-row">
					<view class="countdown-l" hover-class="none" hover-stop-propagation="false">
						<block v-for="(item, index) in e.grouponUsers" :key="index">
							<image v-if="index < 4" class="avatar-group_1" referrerpolicy="no-referrer"
								:src="item.userAvatar || `http://wine.gzzzyd.com/test/static/img/bg.a82f9752.jpg`" />
						</block>
						
						<text class="red">{{ e.grouponUserTotal }}人</text>
						<text class="yellow">正在参团中</text>
					</view>
					<view class="countdown-r">
						<image src="http://www.gzzzyd.com/groupon/home_slices/倒计时@2x.png" mode="scaleToFill" />
						<text class="yellow">截止倒计时</text>
						<!-- <text class="red2">02时25分19秒</text> -->
						<!-- <uni-countdown :show-day="false" :hour="e.h" :minute="e.m" :second="e.s"></uni-countdown> -->
						<u-count-down :timestamp="e.seconds" :show-days="false"></u-count-down>
					</view>
				</view>
				<view class="self-pickup-point">
					<view class="a-t">
						最近的自提网点：
					</view>
					<view class="a-m">
						<view class="am1">
							<view class="am1-1">{{e.selfTake.name}}
							</view>
							<view class="am1-2">
								距您{{e.selfTake.distanceDesc}}
								<image src="http://www.gzzzyd.com/groupon/order_details/距离@2x.png" mode="scaleToFill" />
							</view>
						</view>
					</view>
				</view>
				<view class='info-area'>
					<view class='time '>
						<image src="http://www.gzzzyd.com/groupon/home_slices/编辑@2x.png" mode="scaleToFill" />
						发布于：
						<text class="imp_info">
							{{ e.publishTimeDesc }}
						</text>
					</view>
					<view class='view-count '>
						{{ e.views }}人浏览过
						<image src="http://www.gzzzyd.com/groupon/home_slices/浏览@2x.png" mode="scaleToFill" />
					</view>
				</view>
			</view>
			<view class="btn-area">
				<button class="share">
					<image src="http://www.gzzzyd.com/groupon/home_slices/分享@2x.png" mode="scaleToFill" />
					<text>分享有礼</text>
				</button>
				<button class="now">
					<image src="http://www.gzzzyd.com/groupon/home_slices/购物@2x.png" mode="scaleToFill" />
					<text>立即下单</text>
				</button>
			</view>

		</view>
	</view>
</template>

<script>
import productConSwiperGroupbuying from "@/components/productConSwiperGroupbuying";
import { getGoodsInfo, getCategoryTwo } from '@/api/home.js'
import { latestGroupon, historyGroupon, detailGroupon, goodsDetail } from '@/api/groupon.js'
export default {
	components: {
		productConSwiperGroupbuying
	},
	name: 'promotionList',
	props: {
		dataConfig: {
			type: Object,
			default: () => { }
		},
		positionInfo: {
			type: Object,
			default: () => { }
		},
		tempArr: {
			type: Array,
			default: []
		},
		iSshowH: {
			type: Boolean,
			default: false
		},
		isSortType: {
			type: String | Number,
			default: 0
		},
		currentId: {
			type: String | Number,
			default: 0
		}
	},
	watch: {
		currentId () {
			this.onLoadData(this.currentId);
		}
	},
	data () {
		return {
			timestamp: 86400,
			navigationList2: [],
			ProductNavindex: 0,
			numConfig: 9,
			// imgStyle: this.dataConfig.imgStyle.type,
			mbConfig: 0,
			themeColor: "rgba(29,176,252,1)",
			titleShow: true, //标题是否显示
			opriceShow: true, //原价是否显示
			priceShow: true, //价格是否显示
			couponShow: true,//优惠券标签是否显示
			titleConfig: 2, //标题位置
			fontColor: "rgba(253,80,47,1)",
			labelColor: "rgba(29,176,252,1)",
			typeId: '',
			grouponData: [],
		};
	},
	created () {
		this.onLoadData(this.currentId);
	},
	methods: {
		goToDetail(item){
			uni.navigateTo({
				url: `/pages/groupbuying_details/index?id=${item.id}&selfTakeId=${item.selfTake.id}&organizerUserId=${item.organizerUserId}`
			})
		},
		onLoadData (currentId) {
			// 最新团购
			if (currentId == 0) {
				this.getLatestGroupon()
			}
			// 历史团购
			if (currentId == 1) {
				this.getHistoryGroupon()
			}
		},
		getLatestGroupon() {
			let longitude = uni.getStorageSync('user_longitude');
			let latitude = uni.getStorageSync('user_latitude');
			let that = this;
			latestGroupon({
				current: 1,
				size: 1,
				longitude: longitude,
				latitude: latitude
			}).then(res => {
				this.grouponData = res.data.records;
			})
		},
		getHistoryGroupon() {
			let that = this;
			historyGroupon({
				current: 1,
				size: 1,
				longitude: that.positionInfo.longitude,
				latitude: that.positionInfo.latitude
			}).then(res => {

				that.grouponData = res.data.records;
			})
		},
		clickNav (e) {
			this.typeId = e.id
			this.getGoodsPage(e.id)
		},
		getCategoryTwo (Id) {
			getCategoryTwo({
				parentId: Id
			}).then(res => {
				this.navigationList2 = res.data
				if (res.data.length > 0) {
					this.getGoodsPage(res.data[0].id)
				}
			})
		},
		getGoodsPage (typeId) {
			uni.showLoading({ title: '商品加载中' });
			getGoodsInfo({
				zoneType: 3,
				goodsCategoryId: this.typeId,
				current: 1,
				size: 100
			}).then(res => {
				this.tempArr = []
				this.tempArr = res.data
				uni.hideLoading();
				uni.stopPullDownRefresh()
			})
		},
		// 首发新品切换
		ProductNavTab (type, index) {
			this.ProductNavindex = index;
			this.$emit('changeTab', type);
		},
		goDetail (item) {
			this.$emit('detail', item);
		}
	}
}
</script>

<style lang="scss">
.list-box{
	background: white;

	padding-bottom: 20px;
}
.index-product-wrapper {

	&.on {
		min-height: 1050rpx;
	}

	.nav-bd {
		display: flex;
		align-items: center;
		margin-top: 30rpx;

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 25%;

			&.on {
				border-radius: 0;
			}

			.txt {
				font-size: 32rpx;
				color: #282828;
			}

			.label {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 124rpx;
				height: 32rpx;
				margin-top: 5rpx;
				font-size: 24rpx;
				color: #999;
				border-radius: 16rpx;
			}
		}
	}


}


.content {
	width: 100%;
	height: 108rpx;
	margin-top: 10rpx;

	.home {
		display: flex;
		width: 100%;
		height: 100%;
		position: relative;
		left: 0;
		margin-top: 10rpx;

		.count {
			text-align: center;
			width: 150rpx !important;
			position: relative;
			height: 108rpx;
			line-height: 108rpx;
			z-index: 999;
			background-size: 100% 100%;
			background: linear-gradient(90deg, #FFE9E9 0%, #FAFAFA 100%);

		}

		.navscroll {
			width: calc(100% - 150rpx);
		}
	}
}

.info-area {
	margin: 23rpx 30rpx 0 30rpx;
	justify-content: space-between;
	display: flex;
	width: 100%;
	height: 84rpx;
	font-size: 24rpx;
	font-weight: 400;
	color: #333333;
	line-height: 84rpx;

	image {
		width: 40rpx;
		height: 40rpx;
		margin: 0 10rpx;
		vertical-align: middle;

	}

	.time {
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;

		.imp_info {
			font-size: 24rpx;
			font-weight: 400;
			color: #333333;
		}
	}

	.view-count {
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		margin-right: 60rpx;
	}
}

.countdown {
	margin: 23rpx 30rpx 0 30rpx;
	box-sizing: border-box;
	background-color: rgba(255, 247, 248, 1.000000);
	border-radius: 12rpx;
	height: 100rpx;
	padding: 20rpx;
	line-height: 100rpx;
	align-self: center;
	display: flex;
	border: 1px solid dashed;
	display: flex;
	justify-content: space-between;

	.countdown-l {
		flex: 1;
		display: flex;
    align-items: center;
	}

	.countdown-r {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.red {
		height: 34rpx;
		font-size: 24rpx;
		font-weight: 600;
		line-height: 34rpx;
		color: #B22338;
		vertical-align: super;
		margin-left: 20rpx;
	}

	.red2 {
		height: 40rpx;
		font-size: 28rpx;
		font-weight: 600;
		color: #B22338;
		line-height: 40rpx;
		vertical-align: super;
	}

/deep/.yellow,.u-count-down  {
		font-size: 24rpx ;
		font-weight: 400 ;
		color: #FF9600 ;
		line-height: 80rpx ;
		margin: 0 10rpx ;
		vertical-align: super ;
	}

	image {
		width: 40rpx;
		height: 40rpx;
		border: 2rpx solid #FFFFFF;
	}
}

.price {
	padding: 0 30rpx;
	height: 48rpx;
	font-size: 36rpx;
	font-weight: bolder;
	color: #B22338;
	line-height: 48rpx;
	margin: 20rpx 0;
}

.introduce {
	padding: 0 30rpx;
	height: 44rpx;
	font-size: 36rpx;
	font-weight: bolder;
	color: #111111;
	line-height: 44rpx;
	margin: 20rpx 0;
	display: flex;
	justify-content: space-between;
	image{
	 width: 36rpx;
	 height: 36rpx;
	 vertical-align: middle;
	}
}

.wrapper {}

.a-t {
	padding: 0 30rpx;
	display: flex;
	justify-content: space-between;
	height: 44rpx;
	margin-bottom: 20rpx;

}

.a-m {
	
	padding: 0 30rpx;
	padding-bottom: 20rpx;
	min-height: 60rpx;
	.am1 {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;

		.am1-1 {
			min-height: 40rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #B22338;
			line-height: 40rpx;

		}

		.am1-2 {
			height: 36rpx;
			font-size: 20rpx;
			font-weight: 400;
			color: #666666;
			line-height: 36rpx;

			image {
				margin-left: 30rpx;
				vertical-align: middle;
				height: 34rpx;
				width: 34rpx;
			}
		}
	}

	.am2 {
		margin-bottom: 20rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		line-height: 34rpx;
	}


}

.a-b {
	padding: 0 30rpx;
	width: 100%;
	background: #FFF7F8;
	border: 1px solid dashed #333333;
	height: 60rpx;
	line-height: 60rpx;
	display: flex;
	justify-content: space-between;

	.a-b1 {
		font-size: 20rpx;
		font-weight: 400;
		color: #666666;

		.red {
			font-size: 20rpx;
			font-weight: 500;
			color: #B22338;
		}
	}

	.a-b2 {
		image {
			vertical-align: middle;
			margin-right: 30rpx;
			margin-left: 30rpx;
			height: 34rpx;
			width: 34rpx;
		}
	}
}

.self-pickup-point {
	background: #FFF7F8;
	padding-top: 20rpx;
	margin: 0 30rpx;
	margin-top: 20rpx;

}

.btn-area {
	padding: 30rpx;
	display: flex;
	justify-content: center;
	height: 80rpx;

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

	button {
		flex:1;

		text-align: center;
		margin: auto;

		height: 64rpx;
		border-radius: 8rpx;
		line-height: 64rpx;
	}

	.share {
		margin-right: 20rpx;
		background: #F1F8E5;
		font-size: 24rpx;
		font-weight: 400;
		color: #75BE00;

	}

	.now {


		background: #F7E9EB;
		font-size: 24rpx;
		font-weight: 400;
		color: #B22338;

	}
}</style>