zh_order_food_xcx/pages-takeout/seckill.vue

<template>
	<view class="flex-common-css iPhone-bottom  box-border-box seckill-box">
		<Nav title="限时秒杀" bgckgroundBox='transparent' leftColor='#fff' titleColor='#fff'></Nav>
		<scroll-view :scroll-y="true" class="scroll-view-css p-24 box-border-box" @scrolltolower="scrolltolower">
			<view class="head-box b-rad-20 bgc-f mb-18 align-items-center flex-justify-center">
				<view class="fc-213C45 fs-40 fw-b mr-14 fs-i l-s-2">
					限时秒杀
				</view>
				<view class="fc-213C45 fs-40 fw-b fs-i l-s-2">
					疯狂<text class="fc-FF6320 fs-40 fw-b fs-i l-s-2">抢购</text>
				</view>
			</view>
			<view class="b-rad-20 bgc-f mb-10 p-24 box-border-box align-items-flex-start"
				v-for="(item,index) in goodsData" :key="index" @click="goToUrl(item)">
				<image class="goods-img flex-shrink0 mr-20 b-rad-12" :src="item.goods_image" mode="aspectFill"></image>
				<view class="flex-1 right-h flex-direction flex-justify-space">
					<view class="">
						<view class="fs-30 fw-600 fc-0 mb-10 text-overflow-ellipsis">
							{{item.goods_name}}
						</view>
						<view class="align-items-center">
							<uni-icons type="shop" size="15" color="#666" class="mr-4"></uni-icons>
							<view class="fs-26 fc-6">
								{{item.shop_name}}
							</view>
						</view>
					</view>
					<view class="item-but align-items-center flex-justify-space bgc-FDF3EC box-border-box">
						<view class="align-items-center">
							<view class="fs-28 fw-600 fc-F43D04 mr-14">
								￥ <text class="fs-30 fw-600 fc-F43D04">{{Number(item.seckill_money).toFixed(2)}}</text>
							</view>
							<view class="fs-24 fc-a text-line-through">
								￥{{Number(item.line_price).toFixed(2)}}
							</view>
						</view>
						<view class="fs-28 fc-f msq-but plr-24 box-border-box bgc-EB5127 b-rad-20">
							马上抢
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		seckillAllGoods
	} from "@/api/seckill.js"
	import {
		shopInfo,
	} from "@/api/shop.js"
	export default {
		components: {},
		data() {
			return {
				goodsData: [],
				page: 1,
				total: 0
			};
		},
		onLoad(data) {},
		mounted() {
			this.seckillAllGoods()
		},
		methods: {
			goToUrl(item) {
				shopInfo({
					shop_id: item.shop_id
				}).then((res) => {
					if (res.code == 1) {
						uni.navigateTo({
							url: '/pages-takeout/shop?shop_id=' + item.shop_id + '&category_id=' + item
								.category_id + '&goods_id=' + item.goods_id
						})
					} else {
						tools.error(res.msg)
					}
				})
			},
			scrolltolower() {
				if (this.total > this.goodsData.length) {
					++this.page
					this.scrolltolower()
				}
			},
			seckillAllGoods() {
				seckillAllGoods({
					page: this.page
				}).then((res) => {
					if (res.code === 1) {
						this.goodsData.push(...res.data.items)
						this.total = res.data.total
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.seckill-box {
		background: linear-gradient(to bottom, rgba(0, 170, 255, 0.6), #F5F5F5, #F5F5F5);
	}

	.head-box {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
	}

	.goods-img {
		width: 200rpx;
		height: 200rpx;
	}

	.right-h {
		height: 200rpx;
	}

	.item-but {
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 5rpx 20rpx 20rpx 5rpx;
		padding: 0 0 0 24rpx;
	}

	.msq-but {}
</style>