zh_order_food_xcx/pages-buy/group.vue

<template>
	<view class="group-box iPhone-bottom box-border-box">
		<Nav title='团购专区'></Nav>
		
		<image class="head-img" src="@/static/img/buy/group-bg.png" mode="scaleToFill"></image>
		
		<view class="box-border-box p-24">
			<view class="box-card box-border-box p-24 mb-20" v-for="(item,i) in list" :key="i" @click="todet(item)">
				<image class="goods-img mb-16" :src="item.cover_img" mode="aspectFill"></image>
				<view class="text-overflow-ellipsis fs-36 fw-600 mb-20 w-100100">
					{{item.title}}
				</view>
				<view class="mb-40 flex-justify-space align-items-center">
					<view class="jd-f">
						<view class="jd-1"></view>
						<view class="jd-2" :style="{width:setWidth(item.number,item.sales)+'rpx'}"></view>
					</view>
					<view class="">
						<span class="fs-24 fc-9">已团</span>
						<span class="fs-24 ">{{item.sales}}件</span>
						<span class="fs-24 fc-9">/剩</span>
						<span class="fs-24 ">{{item.number - item.sales}}</span>
					</view>
				</view>
				
				<view class="info-box display-flex">
					<view class="flex-1">
						<span class="fs-28 fc-FB3D03 fw-400">团购价￥</span>
						<span class="fs-40 fc-FB3D03 fw-600">{{item.price}}</span>
					</view>
					<view class="info-box-qiang">
						<image class="qiang-img" src="@/static/img/buy/qiang.png" mode="scaleToFill"></image>
						<view class="jiang-box fc-65420c fs-24 fw-600">直降</view>
						<view class="jiang-box-1 fs-24 fc-65420c fw-600">￥{{item.line_price - item.price}}</view>
						<image class="jiang-img" src="@/static/img/buy/x-jt.png" mode="scaleToFill"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {groupList} from '@/api/groupOrder.js';
	import tools from "@/service/tools";
	import EnBlank from "@/components/en-utils/en-blank/en-blank";
	export default {
		components:{EnBlank},
		data(){
			return{
				page:1,
				total:0,
				list:[],
			}
		},
		onReachBottom() {
			if(this.list.length < this.total){
				this.page += 1;
				this.getList();
			}
		},
		onShow() {
			this.page = 1;
			this.list = [];
			this.getList();
		},
		methods:{
			getList(){
				let school_id = uni.getStorageSync('school_id');
				groupList({school_id:school_id,page:this.page}).then((res)=>{
					if(res.code === 1){
						this.list = [...this.list,...res.data.items];
						this.total = res.data.total;
					}
				})
			},
			
			setWidth(total,num){
				let w  = 0
				let tH = 434;
				w = (tH/total * num).toFixed(0)
				console.log(w);
				return w
			},
			todet(item){
				uni.navigateTo({
					url:'/pages-buy/group-det?id=' + item.id
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.jd-f{
		position: relative;
		width: 434rpx;
		height: 18rpx;
		.jd-1{
			position: absolute;
			top: 0;
			left: 0;
			width: 434rpx;
			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, #3FF9F9 0%, #E0FEA4 100%);
			background-color: #FF2652;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			z-index: 12;
		}
	}
	
	
	.group-box{
		background-color: #EF2864;
		min-height: 100vh;
		.head-img{
			width: 100%;
			height: 422rpx;
		}
		.box-card{
			width: 100%;
			min-height: 100rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(51,51,51,0.1);
			border-radius: 20rpx;
			.goods-img{
				width: 100%;
				height: 452rpx;
				border-radius: 20rpx;
			}
			.info-box{
				width: 100%;
				height: 72rpx;
				background: #FEE0E0;
				border-radius: 20rpx;
				line-height: 72rpx;
				padding-left: 14rpx;
				box-sizing: border-box;
				.info-box-qiang{
					width: 148rpx;
					height: 72rpx;
					background: #F63E36;
					border-radius: 0rpx 20rpx 20rpx 0rpx;
					position: relative;
					.qiang-img{
						width: 60rpx;
						height: 60rpx;
						margin: 6rpx 22rpx 0 auto;
					}
					.jiang-box{
						position: absolute;
						top: -30rpx;
						left: -22rpx;
						z-index: 20;
					}
					.jiang-box-1{
						position: absolute;
						top: 0rpx;
						left: -30rpx;
						z-index: 20;
					}
					.jiang-img{
						position: absolute;
						width: 120rpx;
						height: 90rpx;
						left: -60rpx;
						bottom: 0;
						z-index: 11;
					}
				}
			}
		}
	}
</style>