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">
			<view @click="goToDetail(e)">
				<productConSwiperGroupbuying class="skeleton-rect" :h="210" :imgUrls="e.slideshow" :videoline="e.video_link"
											 @videoPause="videoPause"></productConSwiperGroupbuying>
			</view>

			<view class="content">
				<view class="home">
					<view class="count " @click="goToDetail(e)">共{{ e.goodsTotal }}个</view>
					<scroll-view id="scrollView" scroll-x class="navscroll"  @click="goToDetail(e)"
						:scroll-with-animation="true" onScroll :scroll-left="scrollLeft" @scroll="scroll">
						<view :id="'scroll' + index" class="item goods_item_img" v-for="(item, index) in e.goodsImage"
							:key="index">
							<image style="width: 108rpx;height: 108rpx;" :src="item" mode="scaleToFill" />
						</view>
					</scroll-view>
					<view class="" @click="moveImg()">
						<image class="nextimg" src="http://www.gzzzyd.com/groupon/home_slices/进入箭头2小@2x.png"
							mode="scaleToFill" />
					</view>
				</view>
			</view>


			<view class="wrapper"  @click="goToDetail(e)">
				<view class="price">
					<view>
						¥{{ e.minPrice || 0.00 }} ~ ¥ {{ e.maxPrice || 0.00 }}
					</view>
				</view>
				<view class="introduce" @click="goToDetail(e)">
					<view class="grouponTitle ">
						<text class="mainTitle">{{ e.mainTitle}}</text>
					</view>

					<image src="http://www.gzzzyd.com/groupon/home_slices/进入箭头2小@2x.png" mode="scaleToFill" />

				</view>
				<view class="introduce" @click="goToDetail(e)">
					<view class="grouponTitle ">
						<text class="subTitle">{{ e.subTitle}}</text>
					</view>
				</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 :style="{'width':'26rpx','height':'26rpx'}" src="http://www.gzzzyd.com/groupon/home_slices/倒计时@2x.png" mode="scaleToFill" />
						<text class="yellow" v-if="e.isStart">截止倒计时</text>
						<text class="yellow" v-else>开团倒计时</text>
						<u-count-down v-if="e.isStart" :time="e.seconds * 1000" format="HH:mm:ss" @change="timechange">
							<text  :style="{'color':'#B42A3E','font-size':'26rpx'}">{{timeData.days}}天{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}时{{ timeData.minutes }}分{{ timeData.seconds }}秒</text>
						</u-count-down>
						<u-count-down v-if="!e.isStart" :time="e.secondsStart * 1000" format="HH:mm:ss" @change="timechange2">
						  <text  :style="{'color':'#B42A3E','font-size':'26rpx'}">{{timeData.days}}天{{ timeData2.hours>10?timeData2.hours:'0'+timeData2.hours}}时{{ timeData2.minutes }}分{{ timeData2.seconds }}秒</text>
						</u-count-down>

					</view>


				</view>
				<view class="self-pickup-point">
					<view class="a-t">
						<text class="zuijinzitidian">最近的自提网点：</text>
						<image class="address-img" src="http://www.gzzzyd.com/groupon/order_details/距离@2x.png" mode="scaleToFill" />
					</view>
					<view class="a-m">
						<view class="am1">
							<view class="am1-1">
								<text class="self-take-name">{{ e.selfTake.name }}</text>

							</view>
							<view class="am1-2">
								<text class="juli">距您{{ e.selfTake.distanceDesc }}</text>
							</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 {
			scrollLeft: 0,
			scrollLeftOld: 0,
			timeData: {},
			timeData2: {},
			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: {
		scroll(e) {
			this.scrollLeftOld = e.detail.scrollLeft
		},
		moveImg() {
			this.scrollLeft = this.scrollLeftOld + 54
		},
		timechange(e) {
			this.timeData = e
		},
    timechange2(e) {
      this.timeData2 = e
    },
		goToDetail(item) {
			uni.navigateTo({
				url: `/pages/groupbuying_details/index?id=${item.id}&selfTakeId=${item.selfTake.id}&organizerUserId=${item.organizerUserId}`
			})
		},
	}
}
</script>

<style lang="scss">
	.grouponTitle{
		display: flex;
		flex-direction: column;
		width: 630rpx;
		height: 55rpx;

	}
	.subTitle{
		font-size: 28rpx;
		color: #666666;
		font-weight: 400;
		line-height: 44rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
	}
.mainTitle{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	text-overflow: ellipsis;
}

.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;
			height: auto;
			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: 72rpx;
	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: 10rpx 0;
	display: flex;
	justify-content: space-between;

	image {
		width: 36rpx;
		height: 36rpx;
		margin-top: 8rpx;
	}
}

.wrapper {}

.a-t {
	display: flex;
	justify-content: space-between;
	height: 52rpx;

	.address-img {
		width: 14px !important;
		height: 14px;
		margin-top: 19rpx;
		margin-right: 56rpx;
	}
}

.a-m {
	height: 52rpx;

	.am1 {
		display: flex;
		justify-content: space-between;

		.am1-1 {
			width: 450rpx;
			min-height: 40rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #B22338;
			line-height: 40rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			text-overflow: ellipsis;
		}

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


		}
	}

	.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;
	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;
	margin: 0 30rpx;
	margin-top: 8rpx;
	height: 104rpx;
}

.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;
	}
.self-take-name {
	width: 500rpx;
	font-size: 20rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: bold;
	color: #B22338;
	line-height: 52rpx;
	margin-left: 18rpx;
}
	.zuijinzitidian {
		font-size: 20rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 52rpx;
		margin-left: 18rpx;
	}
	.juli {
		font-size: 20rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 52rpx;
		margin-right: 18rpx;
	}



</style>