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

feat: 新品上市

Browse Source
This commit is contained in:
jsasg
2025-04-27 15:18:21 +08:00
parent 5ed391cc5b
commit 49c865bf85
6 changed files with 695 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,273 @@
{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=""}
<meta name="keywords" content="{$product.seo_keywords}" />
<meta name="description" content="{$product.seo_description}" />
{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">
{if condition="!empty($product.video_img) && !empty($product.video_url)"}
<div class="preview" id="preview{$sku.id}">
<div class="smallImg">
<!-- 小图片预览 -->
<div id="imageMenu">
<ul class="image_list">
<li id="onlickImg"><img src="{$product.video_img}" /></li>
</ul>
</div>
</div>
<!-- 产品视频 -->
<div class="bigImg" id="vertical">
<video poster="{$product.video_img}" controls="controls" width="100%" height="100%">
<source src="{$product.video_url}" type="video/mp4"/>
</video>
</div>
</div>
{/if}
{volist name="product_skus" id="sku" key="idx"}
{if condition="!empty($product.video_img) && !empty($product.video_url)"}
<div class="preview" id="preview{$sku.id}" style="display:none">
{else /}
<div class="preview" id="preview{$sku.id}" {neq name="idx" value="1"}style="display:none"{/neq}>
{/if}
<div class="smallImg">
<!-- 小图片预览 -->
<div id="imageMenu">
<ul class="image_list">
{volist name="sku.photo_album" id="thumb_image"}
<li id="onlickImg"><img src="{$thumb_image}" /></li>
{/volist}
</ul>
</div>
</div>
<!-- 产品大图 -->
<div class="bigImg" id="vertical">
<!-- 左边切换按钮 -->
<div class="scrollbutton smallImgUp disabled"></div>
<!-- 主图 -->
{notempty name="sku.photo_album[0]"}
<img src="{$sku.photo_album[0]}" id="midimg" />
{/notempty}
<!-- 右边切换按钮 -->
<div class="scrollbutton smallImgDown"></div>
</div>
</div>
{/volist}
</div>
<!-- 右边产品详情 -->
<div class="cprh">
<div class="cpcon">
<p class="ctit1">{$product.name|default=''}</p>
<p>{$product.desc|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"}
<a class="thebt bttype1" 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">{:lang('product_detail.detail_section_title')}</div>
<!-- 富文本渲染-->
<div class="products_des">
{$product.detail|default=''|raw}
</div>
</div>
<!-- 弹框-->
<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>
{/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);
}
})
});
});
</script>
{/block}

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

@@ -0,0 +1,51 @@
{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>
{volist name="newpros" id="vo"}
<div class="oricoNewPrMain">
<h1 class="ori-pd-title">{$vo.category.name}</h1>
<div class="ori-pd-list">
{volist name="vo.products" id="pro"}
<a class="oripditem" href="{:url('product/detail', ['id' => $pro.id])}">
<!-- <div class="oNpicoNEW">New</div> -->
<img src="{$pro.cover_image}" class="prdimg prdimg-show" />
<div class="prdName">{$pro.name}</div>
<div class="prddec">{$pro.spu}</div>
</a>
{/volist}
</div>
</div>
{/volist}
</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}