orico-official-website/app/index/view/mobile/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="oricoEGapp">
    <!--产品详情-->
    <div class="oricoEGapp-prdetail">
        <div class="m_Container margin-top-90">
            <div class="goods_address">
                <a class="href_01">{:lang_i18n('首页')}</a>
                {volist name="product_categorys" id="ca"}
                <span class="icon-arrow arrow_address"></span>
                {eq name="ca.pid" value="0"}
                <a class="href_02" href="{:url('product/category', ['id' => $ca.id])}">{$ca.name}</a>
                {else /}
                <a class="href_02" href="{:url('product/subcategory', ['id' => $ca.id])}">{$ca.name}</a>
                {/eq}
                {/volist}
            </div>
        </div>
        <!--产品轮播图 -->
        {notempty name="product_skus"}
        <div class="m_Container oricodtail-pdetailimgs">
            {volist name="product_skus" id="sku" key="idx"}
            <div class="swiper-container pdetailswiper" data-index="{$idx}" {neq name="idx" value="1"}style="display: none;"{/neq}>
                <div class="swiper-wrapper">
                    {volist name="sku.photo_album" id="photo"}
                    <div class="swiper-slide">
                        <img src="{$photo}" alt="" />
                    </div>
                    {/volist}
                    {if condition="!empty($product.video_img) && !empty($product.video_url) && $idx == 1"}
                    <div class="swiper-slide">
                        <video poster="{$product.video_img}" autoplay="autoplay" muted="muted" loop="loop" id="video" controls>
                            <source src="{$product.video_url}" type="video/mp4"/>
                        </video>
                    </div>
                    {/if}
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
            </div>
            {/volist}
        </div>
        {/notempty}
        <!-- 规格参数 -->
        <div class="m_Container">
            <!-- 颜色/属性 -->
            {notempty name="product_sku_attrs"}
            <div class="slideTxtBox">
                <div class="hd clearfix">
                    {volist name="product_sku_attrs" id="ps"}
                    <div class="dt attr_type">
                        <span>{$ps.attr_name}</span>
                        {notempty name="ps.attr_values"}
                        <ul class="hd clearfix">
                            {volist name="ps.attr_values" id="pv" key="pk"}
                            {assign name="attr_value_type" value=":rgb_or_image($pv.attr_value)" /}
                            {between name="ps.attr_id" value="1,2"}
                            <li class="attr_value tip1 attr_item" data-index="{$pk}">
                            {else/}
                            <li class="attr_value tip1 attr_item_defalut" data-index="{$pk}">
                            {/between}
                                {eq name="attr_value_type" value="IMAGE"}
                                <span class="co-bg"><img src="{$pv.attr_value}" /></span>
                                {elseif condition="$attr_value_type == 'RGB'" /}
                                <span class="co-bg" {:style(['background-color'=>$pv.attr_value])}></span>
                                {else/}
                                <span>{$pv.attr_value}</span>
                                {/eq}
                            </li>
                            {/volist}
                        </ul>
                        {/notempty}
                    </div>
                    {/volist}
                </div>
            </div>
            {/notempty}
            <div class="goods_all_title">
                <div class="title">{$product.name}</div>
            </div>
            {notempty name="product_params"}
            <div class="proTfg">
                <ul class="msul swt-Table">
                    <li class="Table-Row">
                        <div class="ms1 Table-Cell">{:lang_i18n('型号')}</div>
                        <div class="ms2 Table-Cell"></div>
                        <div class="ms3 Table-Cell">{$product.spu}</div>
                    </li>
                    {volist name="product_params" id="param"}
                    <li class="Table-Row">
                        <div class="ms1 Table-Cell">{$param.name}</div>
                        <div class="ms2 Table-Cell"></div>
                        <div class="ms3 Table-Cell">{$param.value}</div>
                    </li>
                    {/volist}
                </ul>
            </div>
            {/notempty}
            <div class="platform_buy">
                {eq name=":cookie('think_lang')" value="en-us"}
                <a class="btn-blue-detail business-button">{:lang_i18n('发送查询')}</a>
                {/eq}
            </div>
        </div>
        <!-- 产品描述 -->
        <div class="goods_details">
            <ul class="cpa des cursor_p">
                <li class="active" id="one">{:lang_i18n('产品描述')}</li>
                {notempty name="product_related"}
                <li onclick="javascript:location.href='#related'">{:lang_i18n('关联产品')}</li>
                {/notempty}
                <div class="clear"></div>
            </ul>
        </div>
        <!-- 产品图片-->
        <div class="goods_des img-responsives" id="description-tab">{$product.detail|raw}</div>
        <!-- 关联产品-->
        {notempty name="product_related"}
        <div class="glcplist" id="related">
            {volist name="product_related" id="rel"}
            <div class="glcpitem">
                <a href="{:url('product/detail', ['id'=>$rel.id])}">
                    <img src="{:thumb($rel.cover_image)}" class="glcpimg" />
                    <span class="glt1">{$rel.name}</span>
                    <span class="glt2">{$rel.spu}</span>
                </a>
            </div>
            {/volist}
        </div>
        {/notempty}
        <!-- 弹窗-->
        <div class="marsk-container-detail">
            <div class="popup-quick">
                <div class="title-text">{:lang_i18n('发送查询')}</div>
                <div class="business-close"><img src="__IMAGES__/close2.png"></div>
                <form action="" method="post" autocomplete="off" class="apply_content">
                    <div class="detail_form">
                        <div>
                            <p><strong class="redstr">*</strong>{:lang_i18n('姓名')}</p>
                            <div class="name clearfix">
                                <input type="text" class="first detail-w02" placeholder="{:lang_i18n('请输入您的名称')}"
                                    name="first_name" id="firstname" style="margin-right:0.5rem;">
                                <input type="text" class="first detail-w02" placeholder="{:lang_i18n('请输入您的姓氏')}"
                                    name="last_name" id="lastname">
                            </div>
                        </div>
                        <div class=" clearfix">
                            <p><strong class="redstr">*</strong>{:lang_i18n('公司/组织')}</p>
                            <div class="redstr">
                                <input type="text" class="first detail-w01" id="companyName" name="company_name">
                            </div>
                        </div>
                        <div class=" clearfix">
                            <p><strong class="redstr">*</strong>{:lang_i18n('邮箱')}</p>
                            <div class="redstr">
                                <input type="text" class="first detail-w01" id="email" name="email">
                            </div>
                        </div>
                        <div class=" clearfix">
                            <p><strong class="redstr">*</strong>{:lang_i18n('电话号码')}</p>
                            <div class="redstr">
                                <input type="text" class="first detail-w01" id="phone" name="phone">
                            </div>
                        </div>
                        <div class="clearfix">
                            <p><strong class="redstr">*</strong>{:lang_i18n('国家')}</p>
                            <div class="redstr">
                                <select class=" detail-w01" id="country" name="corp_name">
                                    <option value="">--- {:lang_i18n('请选择所属国家')} ---</option>
                                    {volist name="country_list" id="country"}
                                    <option value="{$country}">{$country}</option>
                                    {/volist}
                                </select>
                            </div>
                        </div>
                        <div class=" clearfix">
                            <p><strong class="redstr">*</strong>{:lang_i18n('行业')}</p>
                            <div class="redstr">
                                <input type="text" class="first detail-w01" id="industry" name="industry">
                            </div>
                        </div>
                        <div class=" clearfix">
                            <p><strong style="color: red;">*</strong>{:lang_i18n('询问内容')}</p>
                            <div>
                                <textarea rows="3" cols="20" class="first detail-w01" id="message" name="message"></textarea>
                            </div>
                        </div>
                        <div class="submit_btn" id="send">{:lang_i18n('提交')}</div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
    //产品图片轮播
    var pdetailswiper = new Swiper('.pdetailswiper', {
        // 配置选项
        loop: true,
        autoplay: {
            delay: 3000,
        },
        pagination: {
            el: '.swiper-pagination',
        }
    });
    $(function() {
        $('.business-button').click(function() {
            $('.marsk-container-detail').show()
        })
        $('.business-close').click(function() {
            $('.marsk-container-detail').hide()
        })
        // 产品描述和关联产品切换
        $('.cpa li').on('click', function() {
            $(this).siblings().removeClass('active');
            $(this).addClass('active'); 
            const targetTab = $(this).data('tab');
            $('.tab-pane').hide();
            if (targetTab === 'description') {
              $('#description-tab').show();
            } else if (targetTab === 'related') {
              $('#description-tab').hide();
            }
        });
        // 根据颜色切换图册
        $('.attr_type').find('.attr_value').click(function() {
            var index = $(this).data('index');
            $('.pdetailswiper').hide();
            $('.pdetailswiper[data-index="' + index + '"]').show();
            $('.attr_value').removeClass('attr_item_on');
            $(this).addClass('attr_item_on');
        });

        // 提交产品询价查询
        // 提交询盘
        $('#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}