zzwy2/view/page/activity.html

{layout name="layout"/}
{php}
use app\model\Article;
use app\model\Category;
$childrenMenu = Category::getChildrenByParentId($topCategoryId);
$where = [];
$where['category_id'] = Category::CATEGORY_BRAND_ACTIVITY;
$where['size'] = $category['number'] ?? 4;
$where['where'] = [['is_prev', '=',0]];
$items = Article::getListByWhere($where);
$previewList = Article::getList(Category::CATEGORY_BRAND_ACTIVITY, 10, null, ['is_prev']);
{/php}

{include file="public/about_second" /}

<!-- 品牌活动 -->
<div class="pull-section brand-activities-bg wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="0">
	<div class="brand-activities w1360">
		<div class="profile-title culture-title honor-title activities-title">
			<p class="capitalize font-helvetica color-blue wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="0">{$blocks['brand_activity']['value']}</p>
			<strong class="wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="0.2s">{$blocks['brand_activity']['title']}</strong>
		</div>
		<div class="activities-list flex">
			{foreach $items as $k => $item}
			<a href="/activity/{$item.id}.html" class="activities-item flex wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="0">
				<div class="img"><img src="{$isMobile ? $item.src_mobile : $item.src}" alt="{$item.title}"></div>
				<div class="txt bg-col-f5">
					<h2 class="clips1">{$item.title}</h2>
					<p class="color-66 clips3">{$item.summary}</p>
					<span class="more-btn-other color-66">查看更多</span>
				</div>
			</a>
			{/foreach}
		</div>
	</div>

	<div style="text-align: center;margin-top: 15px;display: none" class="show-msg">没有更多了</div>
	<div class="load-more color-66 get-more-list" data-href="/article/getActivity?category_id={:Category::CATEGORY_BRAND_ACTIVITY}" data-page="2" data-size="{$category['number'] ?? 4}">点击加载更多</div>
</div>

<!-- 活动预告 -->
<div class="pull-section pull-content-bg bg-col-f5 wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="0">
	<div class="profile-title culture-title honor-title activities-title w1360">
		<p class="capitalize font-helvetica color-blue wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="0">{$blocks['event_preview']['value']}</p>
		<strong class="wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="0.2s">{$blocks['event_preview']['title']}</strong>
	</div>
	<div class="event-preview">
		<div class="preview-swiper swiper">
			<div class="swiper-wrapper">
				{foreach $previewList as $prev}
				<a href="/activity/{$prev.id}.html" class="preview-item swiper-slide flex">
					<div class="img"><img src="{$isMobile ? $prev.src_mobile : $prev.src}" alt="{$prev.title}"></div>
					<div class="txt bg-col-white">
						<h2 class="clips1">{$prev.title}</h2>
						<p class="color-66 clips3">{$prev.summary}</p>
						<span class="article-more-btn color-blue">查看详情<img src="__STATIC__/web/images/icon/icon-arrow-more.png" alt="查看详情"></span>
						<em class="uppercase font-helvetica pc-show">Events</em>
					</div>
				</a>
				{/foreach}
			</div>
			<!-- 切换按钮 -->
			<div class="swiper-button-prev"><img src="__STATIC__/web/images/icon/icon-preview-btn.png" alt="向前"></div>
			<div class="swiper-button-next"><img src="__STATIC__/web/images/icon/icon-preview-btn.png" alt="向后"></div>
		</div>
	</div>
</div>

<script>
	$('body').on('click', '.get-more-list',	function () {
		let that = $(this);
		let url = that.data('href');
		let page = that.data('page');
		let size = that.data('size');
		$.post(url, {page: page, size: size}, function (res) {
			if (res.code === 0) {
				if (!res.data || res.data.length <= 0) {
					$('.show-msg').show();
					setTimeout(function () {
						$('.show-msg').hide();
					}, 2000)
					return false;
				}
				let html = '';
				$.each(res.data, function (index, item) {
					html += `
					<a href="/activity/${item.id}.html" class="activities-item flex wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="0">
						<div class="img"><img src="${item.src}" alt="${item.title}"></div>
						<div class="txt bg-col-f5">
							<h2 class="clips1">${item.title}</h2>
							<p class="color-66 clips3">${item.summary}</p>
							<span class="article-more-btn color-blue">查看详情<img src="__STATIC__/web/images/icon/icon-arrow-more.png" alt="查看详情"></span>
						</div>
					</a>
				`;
				})
				page++;
				that.data('page', page);
				$('.activities-list').append(html);
				html = '';
				return false;
			}
		})
	})
</script>