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" :scroll-into-view="scrollIndex"> <!-- 设置滚动条方向为横向 -->
							<view :id="'scroll'+index" class="item goods_item_img "  v-for="(item,index) in e.goodsImage" :key="index">
								<!-- 通过for循环生成view -->
								<image style="width: 108rpx;height: 108rpx;" :src="item" mode="scaleToFill" />
							</view>
					</scroll-view>
					<view class="" @click="moveImg(e.goodsImage.length)">
						<image class="nextimg" src="http://www.gzzzyd.com/groupon/home_slices/进入箭头2小@2x.png" mode="scaleToFill" />
					</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 < 3" :class="{'avatar-group_1':index===0 }" referrerpolicy="no-referrer"
								:src="item.userAvatar || `/static/images/one.png`" />

						</block>
						<text class="red">{{ e.grouponUserTotal }}人</text>
						<text class="yellow" v-if="currentId == 0">正在参团中</text>
						<text class="yellow" v-if="currentId == 1">已参团</text>
					</view>
					<view class="countdown-r " v-if="currentId == 0">
						<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 :time="e.seconds * 1000" format="HH:mm:ss" @change="timechange">
							<text  :style="{'color':'#B42A3E','font-size':'26rpx'}">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}时{{ timeData.minutes }}分{{ timeData.seconds }}秒</text>
						</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" v-if="currentId == 0">
				<button class="share" open-type="share" :data-groupon="e">
					<image src="http://www.gzzzyd.com/groupon/home_slices/分享@2x.png" mode="scaleToFill" />
					<text>分享有礼</text>
				</button>
				<button class="now" @click="goToDetail(e)">
					<image src="http://www.gzzzyd.com/groupon/home_slices/购物@2x.png" mode="scaleToFill" />
					<text>立即下单</text>
				</button>
			</view>
		</view>

	</view>
</template>

<script>
const app = getApp();
import productConSwiperGroupbuying from "@/components/productConSwiperGroupbuying";
import { latestGroupon, historyGroupon, detailGroupon, goodsDetail } from '@/api/groupon.js'

export default {
	components: {
		productConSwiperGroupbuying
	},
	name: 'promotionList',
	props: {
		grouponData: {
			type: Array,
			default() {
				return []
			}
		},
		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() {
				return 0
			}
		}
	},
	watch: {

	},
	data() {
		return {
			index:4,
			scrollIndex:'scroll4',
			timeData:{},
			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: '',
			loading: false, //是否加载中
			loadend: false, //是否加载完毕
			loadTitle: this.$t(`加载更多`), //提示语
		};
	},
	created() {

	},
	methods: {

		moveImg(length){
			this.scrollIndex= 'scroll' +this.index
			if (this.index>length){
				this.index = 4
			}else {
				this.index +=5;
			}

		},
		timechange(e) {
			this.timeData = e
		},

		goToDetail(item) {
			uni.navigateTo({
				url: `/pages/groupbuying_details/index?id=${item.id}&selfTakeId=${item.selfTake.id}&organizerUserId=${item.organizerUserId}`
			})
		},
	}
}
</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: 124rpx;
	margin-top: 10rpx;

	.home {
		display: flex;
		width: 100%;
		height: 124rpx;
		margin-top: 10rpx;

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

		}

		.navscroll {
			white-space: nowrap;
			width: 570rpx;
			overflow: hidden;
		}
	}
}

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

	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;
	display: flex;
	justify-content: space-between;

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

	.countdown-r {
		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-radius: 20rpx;
		margin-left: -20rpx;
		border: 2rpx solid #FFFFFF;
		}

	.avatar-group_1{
		margin-left: 0rpx;
	}
	}

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

.introduce {
	padding: 0 30rpx;
	min-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: bold;
			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;
	flex-direction: row;
	justify-content: center;
	height: 80rpx;

	image {
		width: 28rpx;
		height: 28rpx;
		margin-right: 10rpx;
		margin-top: 18rpx;
		line-height: 64rpx;
	}

	button {
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin: auto;
		height: 64rpx;
		border-radius: 8rpx;
		line-height: 64rpx;
		width: 332rpx;
	}

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

	}

}



.goods_item_img{
	display: inline-block;
	line-height: 108rpx;
	width: 108rpx;
	height: 108rpx;
	border-radius: 5rpx;
	margin-top: 8rpx;
	overflow: hidden;
	margin-left: 16rpx;
}
.nextimg{
	width: 34rpx;
	height: 34rpx;
	margin-top: 45rpx;
	margin-left: 10rpx;
}
	.bord{
		border: 1px solid red;
	}
</style>