jsasg/orico-official-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

feat: 模板区分pc与mobile

Browse Source
This commit is contained in:
jsasg
2025-05-22 18:05:49 +08:00
parent 2020a13e92
commit 3b3f06c92e
147 changed files with 5104 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
app/index/view/pc/product/category.html Normal file
View File

@@ -0,0 +1,69 @@
{extend name="public/base" /}
{block name="style"}
<link rel="stylesheet" href="__CSS__/product_category.css" type="text/css" />
{/block}
{block name="main"}
<div class="orico_Page_category">
<!-- banner轮播 -->
{notempty name="focus_image"}
<div class="opdBanner">
{volist name="focus_image" id="fi"}
<a {notempty name="fi.link" }href="{$fi.link}" {/notempty}>
<img src="{$fi.image}" class="opdbannerImg" />
</a>
{/volist}
</div>
{/notempty}
<!--分类/产品内容 -->
<div class="pageMain">
{volist name="list" id="vo"}
<div class="cat">
<div class="ori-pd-title">
<div class="catname">{$vo.name}</div>
<a class="catmore" href="{:url('product/subcategory', ['id' => $vo.id])}">
<span class="tmore">{:lang('product_newpro.view_all')}</span>
<img src="/static/index/images/more.png" class="catmoreImg" />
</a>
</div>
{notempty name="vo.products"}
<div class="ori-pd-list">
{volist name="vo.products" id="pro"}
<a class="oripditem" href="{:url('product/detail', ['id' => $pro.id])}">
<div>
<img src="{:thumb($pro.cover_image)}" class="prdimg prdimg-show" />
</div>
<div class="prdName">{$pro.name}</div>
<div class="prddec">{$pro.spu}</div>
{eq name="pro.is_new" value="1"}
<div class="newcp">New</div>
{/eq}
</a>
{/volist}
</div>
{/notempty}
</div>
{/volist}
</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
$(function () {
// 显示第一张图片
$('.opdbannerImg').eq(0).show();
let currentIndex = 0;
const imgCount = $('.opdbannerImg').length;
setInterval(() => {
// 淡出当前图片
$('.opdbannerImg').eq(currentIndex).fadeTo(10, 0, () => {
// 隐藏当前图片
$('.opdbannerImg').eq(currentIndex).hide();
// 计算下一张图片的索引
currentIndex = (currentIndex + 1) % imgCount;
// 显示并淡入下一张图片
$('.opdbannerImg').eq(currentIndex).show().fadeTo(10, 1);
});
}, 10000);
});
</script>
{/block}

335
app/index/view/pc/product/detail.html Normal file
View File

@@ -0,0 +1,335 @@
{extend name="public/base" /}
{block name="title"}
{notempty name="product.seo_title"}<title>{$product.seo_title}</title>{else /}{__BLOCK__}{/notempty}
{/block}
{block name="seo"}
{notempty name="product.seo_keywords"}
<meta name="keywords" content="{$product.seo_keywords}" />
<meta name="description" content="{$product.seo_desc}" />
{else/}
{__BLOCK__}
{/notempty}
{/block}
{block name="style"}
<link rel="stylesheet" type="text/css" href="__CSS__/product_detail.css" />
{/block}
{block name="main"}
<div class="orico_Page_prdetail">
<!--产品详情内容 -->
<div class="oriprdetail">
<!--产品路径-->
<div class="product_address">
<a class="pathname" href="/">首页</a>
{volist name="product_categorys" id="ca"}
<div class="arrow"></div>
<a class="pathname" href="{:url('product/category', ['id' => $ca.id])}">{$ca.name}</a>
{/volist}
</div>
<!-- 产品主图切换和参数详情-->
<div class="cp">
<!--左边图片 -->
<div class="cpfl">
{volist name="product_skus" id="sku" key="idx"}
<div class="preview" id="preview{$sku.id}" {neq name="idx" value="1"}style="display:none"{/neq}>
<div class="smallImg">
<!-- 左边切换按钮 -->
<div class="scrollbutton smallImgUp disabled"></div>
<!-- 小图片预览 -->
<div id="imageMenu">
<ul class="image_list">
{if condition="!empty($product.video_img) && !empty($product.video_url) && $idx == 1"}
<!-- 产品视频 -->
<li id="onlickImg"><img src="{:thumb($product.video_img)}" data-url="{$product.video_url}" /></li>
{/if}
{volist name="sku.photo_album" id="photo"}
<li id="onlickImg"><img src="{:thumb($photo)}" data-url="{$photo}" /></li>
{/volist}
</ul>
</div>
<!-- 右边切换按钮 -->
<div class="scrollbutton smallImgDown"></div>
</div>
<!-- 产品大图 -->
<div class="bigImg" id="vertical">
<!-- 主图 -->
{if condition="!empty($product.video_img) && !empty($product.video_url) && $idx == 1"}
<!-- 如果有视频情况下默认先显示视频 -->
<video poster="{$product.video_img}" autoplay="autoplay" muted="muted" loop="loop" id="video" controls style="width: 510px;height: 510px; position: relative;z-index: 998;">
<source src="{$product.video_url}" type="video/mp4"/>
</video>
{else/}
{notempty name="sku.photo_album[0]"}
<img src="{$sku.photo_album[0]}" id="midimg" />
{/notempty}
{/if}
</div>
</div>
{/volist}
</div>
<!-- 右边产品详情 -->
<div class="cprh">
<div class="cpcon">
<p class="ctit1">{$product.name|default=''}</p>
<p>{$product.short_name|default=''}</p>
<div class="proTfg">
<ul class="swt-Table">
{volist name="product_params" id="pp"}
<li class="Table-Row">
<div class="ms3 Table-Cell">{$pp.name}</div>
<div class="ms2 Table-Cell"></div>
<div class="ms4 Table-Cell">{$pp.value}</div>
</li>
{/volist}
</ul>
</div>
<!-- 颜色-->
{volist name="product_sku_attrs" id="ps"}
<div class="prcolors">
<div class="dt">{$ps.attr_name}</div>
<ul class="dowebok">
{volist name="ps.attr_values" id="pv" key="k"}
{assign name="attr_value_type" value=":rgb_or_image($pv.attr_value)" /}
<a {eq name='k' value='1'}class="on"{/eq} data-sku_id="{$pv.sku_id}">
{eq name="attr_value_type" value="IMAGE"}
<span class="itemcolor"><img src="{$pv.attr_value}" /></span>
{elseif condition="$attr_value_type == 'RGB'" /}
<span class="itemcolor" {:style(['background-color'=>$pv.attr_value])}></span>
{else /}
<span>{$pv.attr_value}</span>
{/eq}
</a>
{/volist}
</ul>
</div>
{/volist}
</div>
<!-- 按钮-->
<div class="buy">
{volist name="product_purchase_links" id="ppp" key="k"}
<a class="thebt bttype{$k}" href="{$ppp.link}">{$ppp.platform_name}</a>
{/volist}
<a class="thebt bttype3" id="open_form_modal">{:lang('product_detail.display_form')}</a>
</div>
</div>
</div>
<!-- 产品介绍详情-->
<div class="oriprInfo">
<div class="titleprinfo">
<a href="#detail" class="checkshow">{:lang('product_detail.detail_section_title')}</a>
{notempty name="product_related"}
<span>|</span>
<a href="#related">{:lang('product_detail.related_products')}</a></div>
{/notempty}
<!-- 富文本渲染-->
<div class="products_des" id="detail">
{$product.detail|default=''|raw}
</div>
</div>
<!-- 关联产品 -->
{notempty name="product_related"}
<div class="glcpmain" id="related">
<div class="glcptitle">{:lang('product_detail.related_products')}</div>
<div class="swiper-container glcpswiper">
<div class="swiper-wrapper">
{volist name="product_related" id="rel"}
<a class="swiper-slide glcpit" href="{:url('product/detail', ['id'=>$rel.id])}">
<img src="{:thumb($rel.cover_image)}" class="glimg" />
<div class="glinfo">
<div class="t1">{$rel.name}</div>
<div class="t2">{$rel.spu}</div>
</div>
</a>
{/volist}
</div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
{/notempty}
<!-- 弹框-->
<div id="form_modal" class="XJmodal">
<div class="XJmodal-content">
<span class="close">&times;</span>
<h2>{:lang('product_detail.display_form')}</h2>
<form action="" method="post" autocomplete="off">
<div class="tkitem">
<div class="form-group">
<label for="firstName">
<strong style="color: red; margin-right: 0.3125rem;"> * </strong> {:lang('product_detail.form_name')}</label>
<div>
<input type="text" name="first_name" id="firstName" placeholder="{:lang('product_detail.form_first_name_placeholder')}" class="detail-w">
<input type="text" name="last_name" id="lastName" placeholder="{:lang('product_detail.form_last_name_placeholder')}" class="detail-w">
</div>
</div>
<div class="form-group">
<label for="corp">
<strong style="color: red; margin-right: 0.3125rem;"> * </strong>
{:lang('product_detail.form_corp')}
</label>
<input type="text" name="corp_name" id="corp" class="detail-w01">
</div>
</div>
<div class="tkitem">
<div class="form-group">
<label for="email">
<strong style="color: red; margin-right: 0.3125rem;"> * </strong> Email
{:lang('product_detail.form_email')}
</label>
<input type="text" name="email" id="email" class="detail-w01">
</div>
<div class="form-group">
<label for="phone">
<strong style="color: red; margin-right: 0.3125rem;"> * </strong> Phone
{:lang('product_detail.form_phone')}
</label>
<input type="text" name="phone" id="phone" class="detail-w01">
</div>
</div>
<div class="tkitem">
<div class="form-group">
<label for="country">
<strong style="color: red; margin-right: 0.3125rem;"> * </strong>
{:lang('product_detail.form_country')}
</label>
<select name="country_name" id="country">
<option value="">{:lang('product_detail.form_country_placeholder')}</option>
{volist name="country_list" id="country"}
<option value="{$country}">{$country}</option>
{/volist}
</select>
</div>
<div class="form-group">
<label for="industry">
<strong style="color: red; margin-right: 0.3125rem;"> * </strong>
{:lang('product_detail.form_industry')}
</label>
<input type="text" name="industry" id="industry" class="detail-w01">
</div>
</div>
<div class="tkitem">
<div class="form-group" style="width: 100%;margin-right: 0px;">
<label for="message">
<strong style="color: red; margin-right: 0.3125rem;"> * </strong>
{:lang('product_detail.form_inquiry')}
</label>
<textarea name="message" id="message"></textarea>
</div>
</div>
<button type="button" id="send" class="submit-btn">{:lang('product_detail.form_submit')}</button>
</form>
</div>
</div>
</div>
<!-- 点击主图放大图片观看 -->
<div class="enlarge-img">
<div class="scrollbutton_01 smallImgUp"></div>
<img src=""/>
<div class="scrollbutton_01 smallImgDown"></div>
<div class="close"><span>X</span></div>
</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
$(document).ready(function() {
// 切换图册
$('.prcolors .dowebok a').click(function() {
// 移除所有 .on 类
$(this).addClass('on').siblings('a').removeClass('on');
// 获取当前点击的元素的 data-sku_id 值
var skuId = $(this).data('sku_id');
// 根据 skuId 显示对应的预览
$('#preview' + skuId).show().siblings('.preview').hide();
})
// 获取模态框和打开按钮以及关闭按钮
var modal = $("#form_modal");
var openBtn = $("#open_form_modal");
var closeBtn = $(".close");
// 打开模态框
openBtn.click(function() {
modal.show();
});
// 关闭模态框
closeBtn.click(function() {
modal.hide();
});
// 当用户点击模态框外部时，关闭模态框
$(window).click(function(event) {
if (event.target === modal[0]) {
modal.hide();
}
});
// 处理表单提交
modal.find("form").submit(function(e) {
e.preventDefault();
var formData = $(this).serialize();
// 这里可以添加代码将formData发送到服务器
// 例如通过AJAX
console.log("提交的数据: " + formData);
// 提交成功后可以选择关闭模态框
modal.hide();
});
// 提交询盘
$('#send').click(function() {
var form = $(this).parents('form');
$.ajax({
url: "{:url('product/inquiry')}",
type: 'POST',
data: form.serialize(),
success: function(r) {
if (r.code == 0) {
form[0].reset(); // 重置表单
modal.hide();
}
alert(r.msg);
},
error: function(e) {
console.error(e);
}
})
});
// 产品详情切换
$('.titleprinfo a').click(function(e) {
e.preventDefault();
$('.titleprinfo a').removeClass('checkshow');
$(this).addClass('checkshow');
var targetId = $(this).attr('href');
if($(targetId).length) {
$('html, body').animate({
scrollTop: $(targetId).offset().top
}, 500);
}
});
/*图片放大效果*/
$(".bigImg").click(function() {
// 判断容器内是否存在视频元素
if ($(this).find("video").length > 0) {
// 若存在视频，不执行任何操作
return;
} else if ($(this).find("img").length > 0) {
// 若存在图片，显示放大图片层
$(".enlarge-img").show();
}
});
$(".enlarge-img .close").click(function () {
$(".enlarge-img").hide();
});
//相关产品
var mySwiper = new Swiper('.glcpswiper', {
// 配置选项
slidesPerView: 3,
spaceBetween: 30,
slidesPerGroup: 3,
loop: true,
loopFillGroupWithBlank: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
});
</script>
{/block}

57
app/index/view/pc/product/newpro.html Normal file
View File

@@ -0,0 +1,57 @@
{extend name="public/base" /}
{block name="style"}
<link rel="stylesheet" href="__CSS__/product_newpro.css">
{/block}
{block name="main"}
<div class="orico_Page_newproducts">
<!-- 新品-->
<!-- 主打产品banner轮播 -->
<div class="opdBanner">
{volist name="focus_image" id="fo"}
<a {notempty name="fo.link" }href="{$fo.link}" {/notempty}><img src="{$fo.image}" class="opdbannerImg" /></a>
{/volist}
</div>
<div class="oricoNewPrMain">
{volist name="newpros" id="vo"}
<div class="cat">
<h1 class="ori-pd-title">
<div class="catname">{$vo.category.name}</div>
</h1>
<div class="ori-pd-list">
{volist name="vo.products" id="pro"}
<a class="oripditem" href="{:url('product/detail', ['id' => $pro.id])}">
<img src="{:thumb($pro.cover_image)}" class="prdimg prdimg-show" />
<div class="prdName">{$pro.name}</div>
<div class="prddec">{$pro.spu}</div>
{eq name="pro.is_new" value="1"}
<div class="newcp">New</div>
{/eq}
</a>
{/volist}
</div>
</div>
{/volist}
</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
$(function () {
// 显示第一张图片
$('.opdbannerImg').eq(0).show();
let currentIndex = 0;
const imgCount = $('.opdbannerImg').length;
setInterval(() => {
// 淡出当前图片
$('.opdbannerImg').eq(currentIndex).fadeTo(10, 0, () => {
// 隐藏当前图片
$('.opdbannerImg').eq(currentIndex).hide();
// 计算下一张图片的索引
currentIndex = (currentIndex + 1) % imgCount;
// 显示并淡入下一张图片
$('.opdbannerImg').eq(currentIndex).show().fadeTo(10, 1);
});
}, 10000);
});
</script>
{/block}

37
app/index/view/pc/product/search.html Normal file
View File

@@ -0,0 +1,37 @@
{extend name="public/base" /}
{block name="style"}
<link rel="stylesheet" href="__CSS__/product_search.css" type="text/css" />
{/block}
{block name="main"}
<!--内容 -->
<div class="orico_Page_search">
<div class="searchMain">
<!-- 搜索框 -->
<form action="{:url('product/search')}" method="get">
<div class="search-ipt">
<input class="ssipt" name="keywords" value="{$Request.param.keywords}" placeholder="请搜索" />
<img src="__IMAGES__/ssico.png" class="ssico" />
</div>
</form>
<!-- 搜索结果列表-->
<ul class="seul">
{volist name="products" id="pro"}
<a href="{:url('product/detail', ['id' => $pro['id']])}">
<li class="seitme">
<div class="imgb">
<img src="{$pro.cover_image}" class="search-pr-img" />
</div>
<div class="prInfp">
<div class="txt1">{$pro.name|raw}</div>
{notempty name="pro.short_name"}
<div class="txt2">{$pro.short_name|raw}</div>
{/notempty}
<div class="txt3">{$pro.spu|raw}</div>
</div>
</li>
</a>
{/volist}
</ul>
</div>
</div>
{/block}

86
app/index/view/pc/product/subcategory.html Normal file
View File

@@ -0,0 +1,86 @@
{extend name="public/base" /}
{block name="style"}
<link rel="stylesheet" href="__CSS__/product_subcategory.css" type="text/css" />
{/block}
{block name="main"}
<div class="orico_Page_subcategory">
{notempty name="focus_image"}
<div class="opdBanner">
{volist name="focus_image" id="fi"}
<a {notempty name="fi.link"}href="{$fi.link}"{/notempty}>
<img src="{$fi.image}" alt="" class="opdbannerImg" />
</a>
{/volist}
</div>
{/notempty}
<!-- 首页主题内容 -->
<div class="pageMain">
{notempty name="categorys_data"}
{volist name="categorys_data" id="vo"}
<div class="ori-pd-title">
<span>{$vo.name}</span>
</div>
{notempty name="vo.products"}
<div class="ori-pd-list">
{volist name="vo.products" id="vp"}
<a class="oripditem" href="{:url('product/detail', ['id' => $vp.id])}">
<div>
{volist name="vp.sku" id="vs" key="vs_idx"}
<img src="{:thumb($vs.main_image)}" id="sku_image_{$vs.id}" class="prdimg {eq name='vs_idx' value='1'}prdimg-show{/eq}" />
{/volist}
</div>
<div class="prdName">{$vp.name}</div>
<div class="prddec">{$vp.spu}</div>
{notempty name="vp.colors"}
<div class="prd-colors">
{volist name="vp.colors" id="vc" key="vc_idx"}
<div class="prdolorit {eq name='vc_idx' value='1'}on{/eq}" data-sku_id="{$vc.sku_id}">
{assign name="color_type" value=":rgb_or_image($vc.attr_value)" /}
{eq name="color_type" value="IMAGE"}
<img src="{$vc.attr_value}" />
{elseif condition="$color_type == 'RGB'" /}
<span class="rgb_hex" {:style(['background-color'=>$vc.attr_value])}></span>
{/eq}
</div>
{/volist}
</div>
{/notempty}
</a>
{/volist}
</div>
{/notempty}
{/volist}
{/notempty}
</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
$(function () {
// 显示第一张图片
$('.opdbannerImg').eq(0).show();
let currentIndex = 0;
const imgCount = $('.opdbannerImg').length;
setInterval(() => {
// 淡出当前图片
$('.opdbannerImg').eq(currentIndex).fadeTo(10, 0, () => {
// 隐藏当前图片
$('.opdbannerImg').eq(currentIndex).hide();
// 计算下一张图片的索引
currentIndex = (currentIndex + 1) % imgCount;
// 显示并淡入下一张图片
$('.opdbannerImg').eq(currentIndex).show().fadeTo(10, 1);
});
}, 10000);
$('.prd-colors .prdolorit').click(function(event) {
event.stopPropagation();
event.preventDefault();
var sku_id = $(this).data('sku_id');
$('#sku_image_' + sku_id).addClass('prdimg-show').siblings().removeClass('prdimg-show');
$(this).addClass('on').siblings().removeClass('on');
});
})
</script>
{/block}