From 3b0ef38763e1f82af7ae033f71fbcb7b5c280105 Mon Sep 17 00:00:00 2001
From: jsasg <735273025@qq.com>
Date: Wed, 14 May 2025 15:20:02 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BA=A7=E5=93=81=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/index/view/product/detail copy.html | 308 ------------------------
 app/index/view/product/detail.html      |  43 ++--
 2 files changed, 20 insertions(+), 331 deletions(-)
 delete mode 100644 app/index/view/product/detail copy.html

diff --git a/app/index/view/product/detail copy.html b/app/index/view/product/detail copy.html
deleted file mode 100644
index c2d260a2..00000000
--- a/app/index/view/product/detail copy.html	
+++ /dev/null
@@ -1,308 +0,0 @@
-{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">
-						<div class="preview">
-							<div class="smallImg">
-								<div class="scrollbutton smallImgUp disabled"></div>
-								<div id="imageMenu">
-									<ul id="image_list">
-										<li id="onlickImg" class="on">
-											<img src="https://www.orico.com.cn/uploads/product/DD35-C3/DD35-C3-2.jpg">
-										</li>
-										<li class=""> <img
-												src="https://www.orico.com.cn/uploads/product/DD35-C3/DD35-C3-PNG.png">
-										</li>
-										<li class=""> <img
-												src="https://www.orico.com.cn/uploads/product/DD35-C3/DD35-C3-SIZE.jpg">
-										</li>
-										<li class=""> <img
-												src="https://www.orico.com.cn/uploads/product/DD35-C3/DD35u3&amp;c3-800-1.jpg">
-										</li>
-										<li class=""> <img
-												src="https://www.orico.com.cn/uploads/product/DD35-C3/DD35u3&amp;c3-800-2.jpg">
-										</li>
-										<li class=""> <img
-												src="https://www.orico.com.cn/uploads/product/DD35-C3/DD35u3&amp;c3-800-3.jpg">
-										</li>
-										<li class=""> <img
-												src="https://www.orico.com.cn/uploads/product/DD35-C3/DD35u3&amp;c3-800-5.jpg">
-										</li>
-										<li class=""> <img
-												src="https://www.orico.com.cn/uploads/product/DD35-C3/DD35u3&amp;c3-800-6.jpg">
-										</li>
-										<li class=""> <img
-												src="https://www.orico.com.cn/uploads/product/DD35-C3/DD35u3&amp;c3-800-4.png">
-										</li>
-									</ul>
-								</div>
-								<div class="scrollbutton smallImgDown"></div>
-							</div><!--smallImg end-->
-							<div id="vertical" class="bigImg">
-								<img src="https://www.orico.com.cn/uploads/product/DD35-C3/DD35-C3-SIZE.jpg"
-									id="midimg">
-							</div><!--bigImg end-->
-						</div>
-					</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">
-        <a href="#detail">{:lang('product_detail.detail_section_title')}</a>
-        <span>|</span>
-        <a href="#related">{:lang('product_detail.related_products')}</a>
-      </div>
-      <!-- 富文本渲染-->
-      <div class="products_des" id="detail">
-        {$product.detail|default=''|raw}
-      </div>
-    </div>
-    <!-- 相关产品 -->
-    {notempty name="product_related"}
-    <div id="related">
-      <p>{:lang('product_detail.related_products')}</p>
-      <div>
-        <ul>
-          {volist name="product_related" id="related"}
-          <li>
-            <a href="{:url('product/detail', ['id' => $related.id])}">
-              <img src="{$related.cover_img}" alt="{$related.name}" />
-              <p>{$related.name}</p>
-              <p>{$related.spu}</p>
-            </a>
-          </li>
-          {/volist}
-        </ul>
-      </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 />
-    <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);
-        }
-      })
-    });
-    /*图片放大效果*/
-    $(".bigImg").click(function () {
-      $(".enlarge-img").show();
-    });
-    $(".enlarge-img .close").click(function () {
-      $(".enlarge-img").hide();
-    });
-  });
-</script>
-{/block}
\ No newline at end of file
diff --git a/app/index/view/product/detail.html b/app/index/view/product/detail.html
index 45ab6cbb..40340301 100644
--- a/app/index/view/product/detail.html
+++ b/app/index/view/product/detail.html
@@ -31,42 +31,37 @@
             <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}>
-                    {if condition="!empty($product.video_img) && !empty($product.video_url) && $idx == 1"}
-                    <div class="smallImg">
-                        <!-- 小图片预览 -->
-                        <div id="imageMenu">
-                            <ul class="image_list">
-                                <li id="onlickImg"><img src="{:thumb($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>
-                    {/if}
                     <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)}" /></li>
+                                <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">
-                        <!-- 左边切换按钮 -->
-                        <div class="scrollbutton smallImgUp disabled"></div>
                         <!-- 主图 -->
+                        {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>
+                            <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}
-                        <!-- 右边切换按钮 -->
-                        <div class="scrollbutton smallImgDown"></div>
+                        {/if}
                     </div>
                 </div>
                 {/volist}
@@ -110,8 +105,8 @@
                 </div>
                 <!-- 按钮-->
                 <div class="buy">
-                    {volist name="product_purchase_links" id="ppp"}
-                    <a class="thebt bttype1" href="{$ppp.link}">{$ppp.platform_name}</a>
+                    {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>
@@ -121,8 +116,10 @@
         <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}