orico-official-website/app/index/view/product/detail.html

{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}