zh_order_food_xcx/pages-buy/group.vue

<template>
	<view class="group-box iPhone-bottom box-border-box flex-common-css">
		<Nav title='团购专区'></Nav>
		<scroll-view :scroll-y="true" class="scroll-view-css">
			<image class="head-img" src="@/static/img/buy/group-bg.png" mode="scaleToFill"></image>
			<view class="box-border-box content-b">
				<view class="box-card box-border-box 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-32 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>
		</scroll-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();
		},
		mounted() {},
		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">
	.content-b {
		padding: 0 24rpx 24rpx;
	}

	.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, #FF545D 0%, #FF4B84 100%);
			// background-color: #FF2652;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			z-index: 12;
		}
	}


	.group-box {
		background-color: #EF2864;
		height: 100vh;

		.head-img {
			width: 100%;
			height: 422rpx;
		}

		.box-card {
			width: 100%;
			min-height: 100rpx;
			background: #FFFFFF;
			padding: 16rpx;
			box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(51, 51, 51, 0.1);
			border-radius: 20rpx;

			.goods-img {
				width: 100%;
				height: 452rpx;
				border-radius: 20rpx;
				// margin-top: 24rpx;
			}

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