zh_order_food_xcx/pages-buy/group-det.vue

<template>
	<view class="ticket-det-box iPhone-bottom flex-common-css box-border-box">
		<view class="nav-box">
			<Nav :leftShow='false' :customNav='true' bgckgroundBox='transparent'>
				<template>
					<view slot="custom" class="align-items-center">
						<view class="yuan-bg">
							<uni-icons type="left" size="20" @click="toBack()" color="#000"></uni-icons>
						</view>
					</view>
				</template>
			</Nav>
		</view>
		
		<view class="scroll-view-css">
			<swiper class="swiper " circular :autoplay="true" :interval="3000" :duration="500" @change="onSwiperChange">
				<swiper-item v-for="(item,i) in obj.image" :key="i">
					<image class="swiper-item" :src="item" mode="aspectFill" @click="lookImg(obj.image,i)"></image>
					<view class="swiper-num fc-f">{{BanenerCurrent}}/{{obj.image.length}}</view>
				</swiper-item>
			</swiper>
			
			<view class="box-border-box p-24 card-f">
				<view class="card-top">
					<image src="@/static/img/buy/tg-det-bg.png" mode="scaleToFill"></image>
					<view class="card-money">
						<view class="mb-4">
							<span class="fs-28 fc-f fw-600">￥</span><span class="fs-48 fc-f fw-600">{{obj.price||''}}</span>
						</view>
						<view class="fs-24 fw-400 fc-f text-line-through">原价{{obj.line_price||''}}</view>
					</view>

					<view class="info-1-time">
						<view class="time-title">倒计时</view>
						<view class="time-day" v-if="showTime">{{time.day}}<text>天</text></view>
						<view class="time-hms" v-else>
							<view class="time-H">{{time.h}}</view>
							<view class="time-dian">:</view>
							<view class="time-M">{{time.m}}</view>
							<view class="time-dian">:</view>
							<view class="time-S">{{time.s}}</view>
						</view>
					</view>
				</view>
				<view class="card-bottom box-border-box">
					<view class="fs-36 fc-3 fw-600 text-overflow-ellipsis mb-24">{{obj.title||''}}</view>
					<view class="jd-f mb-24">
						<view class="jd-1"></view>
						<view class="jd-2" :style="{width:setWidth(obj.number,obj.sales)+'rpx'}"></view>
					</view>
					<view class="flex-justify-space align-items-center">
						<view class="">
							<span class="fs-24 fc-9">已团</span>
							<span class="fs-24 fc-3">{{obj.sales||''}}</span>
						</view>
						<view class="">
							<span class="fs-24 fc-9">剩余</span>
							<span class="fs-24 fc-3">{{obj.number - obj.sales||''}}</span>
						</view>
					</view>
				</view>
			</view>
			
			<image class="pwxq" src="@/static/img/buy/tgxq.png" mode="scaleToFill"></image>
			
			<view class="box-border-box plr-24">
				<view class="box-card box-border-box p-24 fs-30 fc-0" v-html="obj.content"></view>
			</view>
		</view>
		
		<view class="bottom-box box-border-box p-24">
			<view class="flex-justify-space">
				<view class="align-items-flex-end box-1">
					<span class="fs-28 fc-FB3D03 fw-600">定金 </span>
					<span class="fs-28 fc-FB3D03 fw-600">￥</span>
					<span class="fs-44 fc-FB3D03 fw-600">{{obj.deposit||''}}</span>
				</view>
				<view class="text-align-center box-2 fs-32 fc-f fw-600" @click="toSave()">{{bText}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {groupInfo} from '@/api/groupOrder.js';
	import tools from "@/service/tools";
	export default {
		data(){
			return{
				id:"",
				BanenerCurrent:1,
				showTime:false,
				isTimeEnd:false,
				bText:'立即抢购',
				time:{
					day:'',
					h:"",
					m:'',
					s:'',
				},
				
				obj:{
					image:[],
				},
			}
		},
		onLoad(e) {
			if(e.id){
				this.id = e.id;
				this.getInfo();
			}
		},
		onShow() {
			
		},
		methods:{
			getInfo(){
				let school_id = uni.getStorageSync('school_id');
				groupInfo({school_id:school_id,id:this.id}).then((res)=>{
					if(res.code === 1){
						this.obj = res.data;
						this.setCountDown(this.obj.end_time);
					}
				})
			},
			lookImg(list,i){
				tools.lookBigImg(i,list);
			},
			toBack(){
				tools.leftClick()
			},
			onSwiperChange(e){
				this.BanenerCurrent = (e.detail.current + 1);
			},
			setWidth(total,num){
				let w  = 0
				let tH = 654;
				w = (tH/total * num).toFixed(0)
				return w
			},
			
			setCountDown(sTime){
				let end = new Date(sTime.replace(/-/g, "/")).getTime();
				let now = new Date().getTime();
				let msec = end - now;
				this.time.day = parseInt(msec / 1000 / 60 / 60 / 24);
				let h = parseInt(msec / 1000 / 60 / 60 % 24);
				let m = parseInt(msec / 1000 / 60 % 60);
				let s = parseInt(msec / 1000 % 60);
				this.time.h = h > 9 ? h : '0' + h;
				this.time.m = m > 9 ? m : '0' + m;
				this.time.s = s > 9 ? s : '0' + s;
				msec -= 1000;
				if(this.time.day >= 1){
					this.showTime = true;
				}else{
					this.showTime = false;
				};
				if(msec>=0){
					setTimeout(()=>{
						this.setCountDown(sTime);
					}, 1000);
				}else{
					this.isTimeEnd = true;
					this.bText = '活动结束';
					this.time.h = '--';
					this.time.m = '--';
					this.time.s = '--';
				};
			},
			toSave(){
				if(!this.isTimeEnd){
					let goodsData = {
						title:this.obj.title,
						cover_img:this.obj.cover_img,
						deposit:this.obj.deposit,
						id:this.obj.id,
						price: this.obj.price
					}
					uni.navigateTo({
						url:'/pages-buy/save-order?goodsData=' + encodeURIComponent(JSON.stringify(goodsData))
					})
				}
			},
		},
	}
</script>

<style scoped lang="scss">
	.ticket-det-box{
		position: relative;
		.nav-box{
			position: absolute;
			.yuan-bg{
				width: 60rpx;
				height: 60rpx;
				background-color: #B3B3B4;
				border-radius: 50%;
				text-align: center;
				line-height: 62rpx;
			}
		}
		.bottom-box{
			.box-1{
				flex: 1;
				height: 100rpx;
				background: #FDE9E8;
				border-radius: 200rpx 0rpx 0rpx 200rpx;
				box-sizing: border-box;
				padding-left: 32rpx;
				padding-bottom: 20rpx;
			}
			.box-2{
				width: 200rpx;
				height: 100rpx;
				line-height: 100rpx;
				background: #FD2E42;
				border-radius: 0rpx 200rpx 200rpx 0rpx;
				text-align: center;
			}
		}
		.swiper{
			width: 100%;
			height: 750rpx;
			position: relative;
			.swiper-item{
				width: 100%;
				height: 750rpx;
			}
			.swiper-num{
				position: absolute;
				right: 24rpx;
				bottom: 24rpx;
				width: 120rpx;
				height: 48rpx;
				background: rgba(51,51,51,0.6);
				border-radius: 200rpx;
				text-align: center;
				line-height: 48rpx;
			}
		}
		.box-card{
			width: 100%;
			min-height: 100rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
		}
		.pwxq{
			width: 146rpx;
			height: 46rpx;
			margin: 20rpx auto 24rpx;
		}
		
		.card-f{
			width: 100%;
			position: relative;
			// height: 386rpx;
			
			.card-top{
				width: 100%;
				height: 148rpx;
				position: relative;
				z-index: 2;
				image{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 148rpx;
					z-index: 1;
				}
				.card-money{
					position: absolute;
					top: 10rpx;
					left: 20rpx;
					z-index: 10;
				}
			}
			.card-bottom{
				padding: 24rpx;
				width: 702rpx;
				max-height: 234rpx;
				border-radius: 20rpx;
				background-color: #fff;
				// position: absolute;
				// top: 145rpx;
				// left: 24rpx;
				margin: -24rpx 0 0 0;
				position: relative;
				z-index: 5;
			}
		}
		.jd-f{
			position: relative;
			width: 654rpx;
			height: 18rpx;
			.jd-1{
				position: absolute;
				top: 0;
				left: 0;
				width: 654rpx;
				height: 18rpx;
				background: #FEE0E0;
				border-radius: 200rpx 200rpx 200rpx 200rpx;
				z-index: 10;
			}
			.jd-2{
				position: absolute;
				top: 0;
				left: 0;
				height: 18rpx;
				background: linear-gradient( 90deg, #FF545D 0%, #FF4B84 100%);
				// background-color: #FF2652;
				border-radius: 200rpx 200rpx 200rpx 200rpx;
				z-index: 12;
			}
		}
		.info-1-time{
			position: absolute;
			top: 40rpx;
			right: 24rpx;
			z-index: 20;
			display: flex;
			.time-title{
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(255,255,255,0.8);
				margin-right: 8rpx;
				margin-top: 30rpx;
			}
			.time-day{
				font-size: 40rpx;
				color: #fff;
				margin-top: 16rpx;
				text{
					margin-left: 6rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(255,255,255,0.8);
				}
			}
			.time-hms{
				margin-top: 30rpx;
				display: flex;
			}
			.time-dian{
				color: #fff;
				margin: 0 8rpx;
			}
			.time-H,.time-M,.time-S{
				width: 34rpx;
				height: 34rpx;
				background-color: #fff;
				border-radius: 4rpx;
				text-align: center;
				line-height: 34rpx;
				color: #FF2C35;
			}
		}
	}
</style>