shop_uniapp/bundle_b/pages/panic_buying/index.vue

<template>
	<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption" :down="upDown">
		<u-navbar id="navbar" :border-bottom="false" :background="{ background: 'rgba(256,256,256, 0)'}"
			:back-bg="'rgba(0, 0, 0, 0.2)'" back-icon-color="rgba(256, 256, 256, 1)" :immersive="true">
		</u-navbar>
		<view class="content">
			<view class="head"></view>
			<view class="rule bold xl text-center m-b-20" @click="showModel = true">
				活动规则
			</view>
			<!-- 	<view class="time">
				距离活动结束仅剩
				<u-count-down separator="zh" :timestamp="getCancelTime(cancelTime)"
					 :separator-size="26" :font-size="26"
					bg-color="transparent" @end="refresh"></u-count-down>
			</view> -->
	
			<view class="list">
				<view class="item flex" v-for="(item, index) in list" :key="index" @click="toPage(item.goods_id, item.activity_sn)">
					<u-image class="img" :src="item.goods_image" width="240rpx" height="240rpx" border-radius="10rpx"></u-image>
					<view class="info m-l-20">
						<view class="line-2 xl bold goods-name">{{item.goods_name}}</view>
						<view class="panic-btn m-t-20">
							<view class="left sm text-center bold">￥{{item.goods_min_price}}</view>
							<view class="right">
								<view class="xl m-t-10 bold">￥{{item.activity_price}}</view>
								<view class="sm">抢购价</view>
								<u-image class="flash" :src="aliOSSDomain + '/activity/panic_buying/flash.png'" width="60rpx" height="60rpx"></u-image>
							</view>
						</view>
					</view>
				</view>
			</view>
		
		
			<u-modal v-model="showModel" :mask-close-able="true">
				<view class="bold p-l-20">商品活动规则</view>
				<view class="p-20">
					<u-parse :html="rule"></u-parse>
				</view>
			</u-modal>
		</view>
	</mescroll-body>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	import {getPanic} from '@/api/shop.js'
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				upOption: {
					empty: {
						icon: 'https://zjeloong.oss-cn-hangzhou.aliyuncs.com/uniapp/order_null.png',
						tip: '暂无记录', // 提示
					},
					textColor: '#ccc'
				},
				upDown: {
					bgColor: '#fff'
				},
				storeState: 1,
				list: [],
				cancelTime: 1727169974,
				showModel: false,
				rule: ''
			}
		},
		methods: {
			getCancelTime(time) {
				// return time - Date.now() / 1000
			},
			
			async downCallback(page) {
				this.mescroll.resetUpScroll();
			},
			
			upCallback(page) {
				let pageNum = page.num;
				let pageSize = page.size;
				getPanic({
					type: this.type,
					goods_id: this.id,
					page_no: pageNum,
					page_size: pageSize
				}).then(res => {
					if (res.code == 1) {
						let curPageData = res.data.lists;
						let curPageLen = curPageData.length;
						let hasNext = !!res.data.more;
						if (page.num == 1) this.list = [];
						this.list = this.list.concat(curPageData);
						this.rule = res.data.rule;
						this.mescroll.endSuccess(curPageLen, hasNext);
					}
				})
			},
			
			toPage(goods_id, activity_sn){
				this.$Router.push({
					path: '/pages/goods_details/goods_details',
					query: {
						id: goods_id,
						activity_sn
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #c22921;
	}
	.content {
		padding-bottom: 20rpx;
	}

	.head {
		background-image: url(https://zjeloong.oss-cn-hangzhou.aliyuncs.com/activity/panic_buying/panic_bg.jpg);
		background-size: cover;
		background-repeat: no-repeat;
		min-height: 800rpx;
		max-height: 800rpx;
	}
	
	.rule {
		color: #fff;
		text-decoration: underline;
	}

	.time {
		text-align: center;
		background-image: linear-gradient(45deg, #FF60A8 0%, #FF3C6A 99%, #FF0001 100%);
	}
	
	.list {
		margin: 0 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		
		.item {
			width: 100%;
			margin-bottom: 20rpx;
			
			.info {
				width: calc(100% - 240rpx);
				
				.goods-name {
					height: 90rpx;
				}
				
				.panic-btn {
					display: flex;
					align-items: center;

					.left {
						width: 30%;
						background-color: #feece3; background-image: linear-gradient(90deg, #feece3 0%, #ffeede 100%);
						height: 100rpx;
						line-height: 100rpx;
						color: #A77227;
						text-decoration: line-through;
					}
					
					.right {
						color: #fff;
						width: 70%;
						background-color: #e04670; background-image: linear-gradient(106deg, #e04670 18%, #fd0a1c 100%);
						border-top-right-radius: 40rpx;
						border-bottom-right-radius: 40rpx;
						height: 100rpx;
						text-align: center;
						position: relative;

						view {
							margin-left: -20rpx;
						}
						
						.flash {
							position: absolute;
							top: 50%;
							transform: translateY(-50%);
							right: 20rpx;
						}
					}
				}
			}
		}
	}
	
	.upwrap-nodata {
		color: #fff
	} 
	
	.rule-box {
		border-radius: 10rpx;
	}
</style>