562 lines
21 KiB
PHTML
Executable File
562 lines
21 KiB
PHTML
Executable File
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
{include file="include/head-seo" /}
|
||
{include file="include/head" /}
|
||
<script type="text/javascript">
|
||
var navID = "1";
|
||
</script>
|
||
<link rel="stylesheet" type="text/css" href="__PUBLIC__/m_web/js/bxslider/goods.bxslider.css">
|
||
<link rel="stylesheet" type="text/css" href="__PUBLIC__/m_web/css/style.css">
|
||
<script type="text/javascript" src="__PUBLIC__/m_web/js/bxslider/jquery.bxslider.min.js"></script>
|
||
<script type="text/javascript" src="__PUBLIC__/web/scripts/jquery.SuperSlide.2.1.1.js"></script>
|
||
</head>
|
||
<body>
|
||
<!--top-->
|
||
<div id="content">
|
||
<!--头部-->
|
||
{include file="include/top_back1" /}
|
||
|
||
<!--产品地址-->
|
||
<div class="m_Container margin-top-90">
|
||
<div class="goods_address">
|
||
<a href="__ORICOROOT__" class="href_01">首页</a>
|
||
<?php if ($pid): ?>
|
||
<span class="icon-arrow arrow_address"></span>
|
||
<a href="__ORICOROOT__/product/catelists/id/<?php echo $pid['id']; ?>" class="href_02"><?php echo $pid['name']; ?></a>
|
||
<?php endif; ?>
|
||
<?php if ($cid): ?>
|
||
<span class="icon-arrow arrow_address"></span>
|
||
<a href="__ORICOROOT__/product/subcatelists/id/<?php echo $cid['id']; ?>" class="href_02"><?php echo $cid['name']; ?></a>
|
||
<?php endif; ?>
|
||
</div>
|
||
</div>
|
||
<!--产品主图-->
|
||
<?php if (!empty($product_images)): ?>
|
||
<div class="m_Container" id="goods_list">
|
||
<ul class="goods_list">
|
||
<?php
|
||
|
||
//判断属性规则为旧版【2023-12-30前】单一颜色属性， 还是新版多属性
|
||
if(is_array($product_attr)) {
|
||
|
||
$arr_product_images = reset($product_images);
|
||
|
||
}
|
||
else{
|
||
if ($color){
|
||
$arr_product_images = $product_images[$color];
|
||
} else {
|
||
$arr_product_images = reset($product_images);
|
||
}
|
||
}
|
||
?>
|
||
<?php
|
||
if(is_array($product_attr) && is_array($arr_product_images['image_url'])){
|
||
foreach($arr_product_images['image_url'] as $km => $itm) {
|
||
|
||
echo '<li> <img src="'.getImage($itm).'"></li>';
|
||
|
||
}
|
||
}
|
||
else{
|
||
|
||
//echo "<pre>=="; print_r($arr_product_images);die;
|
||
if(isset($arr_product_images['image_url']) && is_array($arr_product_images['image_url'])) {
|
||
foreach ($arr_product_images['image_url'] as $k => $img){
|
||
|
||
|
||
echo '<li> <img src="'.getImage($img).'"></li>';
|
||
}
|
||
}
|
||
else{
|
||
|
||
foreach ($arr_product_images as $key => $value){
|
||
echo '<li> <img src="'.getImage($value['image_url']).'"></li>';
|
||
}
|
||
}
|
||
}
|
||
?>
|
||
</ul>
|
||
</div>
|
||
<?php endif; ?>
|
||
<!--规格参数-->
|
||
<div class="m_Container">
|
||
<!--多颜色-->
|
||
<div class="slideTxtBox">
|
||
|
||
<?php
|
||
|
||
if(is_array($attributes) && sizeof($attributes)){
|
||
foreach($attributes as $ka => $attrList){
|
||
echo "<div class='hd clearfix'><div class ='dt attr_type'>".$ka."<span class='selectedAttr'></span>";
|
||
$isColor = false;
|
||
|
||
if(strtolower($ka) == 'color' || $ka == '颜色' || $ka == '色彩') {
|
||
echo "<ul class='hd clearfix'>";
|
||
$isColor = true;
|
||
}
|
||
else{
|
||
echo "<ul class='typeColor'>";
|
||
}
|
||
$colorType = '';
|
||
foreach($attrList as $kl => $attrValue){
|
||
|
||
$firstClass = " attr_item ".($kl ==0 ? "on" : "");
|
||
if($isColor){
|
||
//判断颜色属性取值【中文文字、色值、色块图英文名称】
|
||
//$firstChar = substr($attrValue, 0, 1);
|
||
//$colorFile = 'https://cc.f2b211.com/uploads/color/' .strtolower($attrValue). '.jpg';
|
||
|
||
//echo $attrValue."==". mb_strlen($attrValue,'gb2312');
|
||
if (mb_strlen($attrValue,'gb2312') == 2 && strlen($attrValue) ==2) {
|
||
$colorType = 2;
|
||
|
||
}else{
|
||
$colorType = '';
|
||
}
|
||
|
||
//判断为颜色色值RGB
|
||
if($colorType == 1){
|
||
echo '<li class=" attr_value '.$firstClass.'" data-type="'.$ka.'" data-value="'.trim($attrValue).'"><a style="background-color: '.$attrValue.'""></a></li>';
|
||
}
|
||
elseif($colorType == 2){
|
||
//echo $attrValue."<pre>=="; print_r($productColor);
|
||
$colorValue = $productColor[$attrValue];
|
||
if(isset($productColor[$attrValue])) {
|
||
if($attrValue == 'GD'||$attrValue == 'GR'||$attrValue == 'SV'||$attrValue == 'RG'||$attrValue == 'CO'||$attrValue == 'WD'){
|
||
echo '<li class=" attr_value tip1 '.$firstClass.'" data-feed="'.$productColor[$attrValue].'" data-type="'.$ka.'" data-value="'.trim($attrValue).'" data-tipso="'.$productColor[$attrValue].'"><a><img src="/uploads/color/'.$attrValue.'.jpg" alt="" style="width:10px; height: 10px; border-radius: 5px; margin:3px;"></a></li>';
|
||
|
||
}
|
||
else{
|
||
echo '<li class=" attr_value tip1 '.$firstClass.'" data-feed="'.$productColor[$attrValue].'" data-type="'.$ka.'" data-value="'.trim($attrValue).'" data-tipso="'.$productColor[$attrValue].'"><span class="co-bg '.$attrValue.'"></span></li>';
|
||
}
|
||
}
|
||
//echo $firstClass.'+'.$attrValue.'+'.$colorValue; die;
|
||
// echo '<li class=" attr_value tip1 '.$firstClass.'" data-type="'.$ka.'" data-value="'.trim($attrValue).'" data-feed="'.$colorValue.'" data-tipso="'.$colorValue.'"><span class="co-bg '.$attrValue.'"></span></li>';
|
||
|
||
}
|
||
else{
|
||
echo '<li class=" attr_value '.$firstClass.'" data-feed="'.strtoupper($attrValue).'" data-type="'.$ka.'" data-feed="'.strtoupper($attrValue).'" data-value="'.trim($attrValue).'"><a ><i class="text">'.strtoupper($attrValue).'</i></a></li>';
|
||
}
|
||
|
||
}
|
||
|
||
|
||
else{
|
||
echo '<li class="item attr_value '.$firstClass.'" data-type="'.$ka.'" data-feed="'.trim($attrValue).'" data-value="'.trim($attrValue).'"><a ><i class="text">'.$attrValue.'</i></a></li>';
|
||
}
|
||
}
|
||
echo "</ul> </div></div>";
|
||
}
|
||
}
|
||
|
||
else{
|
||
?>
|
||
|
||
<div class="hd Multi_color">
|
||
<ul>
|
||
<?php if (!empty($product_images) && count($product_images) > 1): ?>
|
||
<?php foreach($product_images as $key => $value):
|
||
if(is_array($value)) {
|
||
?>
|
||
<a href="__ORICOROOT__/product/detail/id/<?php echo $detail['id']; ?>/color/<?php echo $key; ?>">
|
||
<li class="img-responsive S-small-img on">
|
||
<div class="cricle">
|
||
<img src="<?php echo $value[0]['image_color']; ?>" alt="" class="S-Cricle-Bg">
|
||
</div>
|
||
</li>
|
||
</a>
|
||
<?php } ?>
|
||
<?php endforeach; ?>
|
||
<?php endif; ?>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<?php } ?>
|
||
<div class="goods_all_title">
|
||
<div class="title"><?php echo $detail['name']; ?></div>
|
||
<div class="subtitle"><?php echo $detail['shortname']; ?></div>
|
||
<!--div class="position_r img-responsives" style="width:2.56rem; margin-top:0.5rem; height: 0.4rem;">
|
||
<img src="__PUBLIC__/web/images/star_whhite.png">
|
||
<div class="star" style="width:<?php echo $detail['cpyanse']; ?>%;"></div>
|
||
</div-->
|
||
</div>
|
||
<div class="proTfg">
|
||
<ul class="msul swt-Table">
|
||
<li class="Table-Row">
|
||
<div class="ms1 Table-Cell">型号</div>
|
||
<div class="ms2 Table-Cell"></div>
|
||
<div class="ms3 Table-Cell"><?php echo $detail['brand_id']; ?></div>
|
||
</li>
|
||
<?php if ($detail['product_view']): ?>
|
||
<?php $detail_views = unserialize($detail['product_view']); ?>
|
||
<?php foreach ($detail_views as $key => $value): ?>
|
||
<li class="Table-Row">
|
||
<div class="ms1 Table-Cell"><?php echo $value['desc_title']; ?></div>
|
||
<div class="ms2 Table-Cell"></div>
|
||
<div class="ms3 Table-Cell"><?php echo $value['desc_desc']; ?></div>
|
||
</li>
|
||
<?php endforeach; ?>
|
||
<?php endif; ?>
|
||
</ul>
|
||
</div>
|
||
<!--a onclick="toggle_colleciton(this)" class="text_gray img-responsive text_22 ">
|
||
<span class="house house_img01
|
||
<?php if ($detail['is_collection']): ?>
|
||
house_img02
|
||
<?php endif; ?>
|
||
"></span>
|
||
<div class="clear"></div>
|
||
</a-->
|
||
<br class="margin-bottom-14">
|
||
<!-- <div class="platform_buy">
|
||
<?php if ($detail['url_tm'] != ''): ?>
|
||
<a href="<?php echo $detail['url_tm']; ?>" class="text_white">天猫购买</a>
|
||
<?php endif; ?>
|
||
<?php if ($detail['url_jd'] != ''): ?>
|
||
<a href="<?php echo $detail['url_jd']; ?>" class="text_white">京东购买</a>
|
||
<?php endif; ?>
|
||
</div> -->
|
||
</div>
|
||
<!--收藏功能-->
|
||
<!--详情-->
|
||
<div id="Goods_detail"></div>
|
||
<div class="goods_details">
|
||
<ul class="cpa des cursor_p">
|
||
<li class="active" id="one">产品描述</li>
|
||
<li id="two">关联产品</li>
|
||
<li id="three">评论</li>
|
||
<div class="clear"></div>
|
||
</ul>
|
||
</div>
|
||
<div class="goods_des img-responsives" id="goods_details_Content1">
|
||
<?php echo str_replace('<br />', '', $detail['ld_md_content']); ?>
|
||
<!-- <img src="__PUBLIC__/m_web/images/products/des-01.jpg">
|
||
<img src="__PUBLIC__/m_web/images/products/des-02.jpg">
|
||
<img src="__PUBLIC__/m_web/images/products/des-03.jpg">
|
||
<img src="__PUBLIC__/m_web/images/products/des-04.jpg">
|
||
<img src="__PUBLIC__/m_web/images/products/des-05.jpg">
|
||
<img src="__PUBLIC__/m_web/images/products/des-06.jpg">
|
||
<img src="__PUBLIC__/m_web/images/products/des-07.jpg">
|
||
<img src="__PUBLIC__/m_web/images/products/des-08.jpg"> -->
|
||
</div>
|
||
<div class="m_Container goods_Related" id="goods_details_Content2" style="display: none">
|
||
<!--<div class="text_center title goods_Related_title" id="link2">关联产品</div>-->
|
||
<?php if ($product_relateds): ?>
|
||
<div class="list_two">
|
||
<?php foreach ($product_relateds as $key => $value): ?>
|
||
<li class="text_center bg_white img-responsive">
|
||
<a href="__ORICOROOT__/product/detail/id/<?php echo $value['id']; ?>" style="display: inline-block; width:94%;">
|
||
<p class="margin-top-50"><img src="<?php echo getImage($value['product_two_img']['image_url']); ?>" style="display: inline-block"></p>
|
||
<p class="text_22 text_black margin-top-30 nowrap_ellipsis"><?php echo $value['name']; ?></p>
|
||
<p class="text_16 text_gray margin-top-14 margin-bottom-30"><?php echo $value['brand_id']; ?></p>
|
||
</a>
|
||
|
||
</li>
|
||
<?php endforeach; ?>
|
||
</ul>
|
||
</div>
|
||
<?php endif; ?>
|
||
</div>
|
||
|
||
<!--评论-->
|
||
<div class="m_Container goods_Related" id="goods_details_Content3" style="display: none">
|
||
<!--<div class="text_center title margin-bottom-30" id="link4">评论</div>-->
|
||
<?php if ($list): $list = $list->items(); ?>
|
||
<?php foreach ($list as $key => $value): ?>
|
||
<div class="goods_comment">
|
||
<span class="title"><?php echo $value['auctionSku']; ?></span>
|
||
<span class="subtitle"><?php echo $value['displayUserNick']; ?></span> <span class="subtitle"><?php echo $value['rateDate']; ?></span>
|
||
<span class="subcon"><?php echo $value['rateContent']; ?></span>
|
||
<?php if ($value['pics']): ?>
|
||
<div class="goods_comment_img">
|
||
<ul>
|
||
<?php foreach ($value['pics'] as $k => $v): ?>
|
||
<li><img src="<?php echo getImage($v); ?>" class=""></li>
|
||
<?php endforeach; ?>
|
||
</ul>
|
||
</div>
|
||
<?php endif; ?>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
<?php endif; ?>
|
||
</div>
|
||
|
||
<!--大图-->
|
||
<div class="big_img">
|
||
<div class="swiper-container2">
|
||
<div class="swiper-wrapper"> </div>
|
||
</div>
|
||
</div>
|
||
<!--底部文件-->
|
||
{include file="include/bottom1" /}
|
||
|
||
</div>
|
||
<script type="text/javascript">
|
||
//jQuery(".slideTxtBox").slide();
|
||
jQuery(".slideTxtBox").slide();
|
||
</script>
|
||
<link rel="stylesheet" type="text/css" href="__PUBLIC__/m_web/js/Click_enlarge/swiper.min.css"/>
|
||
<script type="text/javascript" src="__PUBLIC__/m_web/js/Click_enlarge/swiper.min.js"></script>
|
||
|
||
<script type="text/javascript">
|
||
|
||
$(function () {
|
||
var attributes = JSON.parse('<?php echo json_encode($product_attr);?>');
|
||
var pictures = JSON.parse('<?php echo json_encode($product_images);?>');
|
||
|
||
//多属性选择及绑定事件
|
||
$(".hd .attr_item").click(function(){
|
||
$(this).siblings().removeClass('on');
|
||
$(this).toggleClass('on');
|
||
|
||
/*var attrVal = $(this).data('feed');
|
||
if($(this).hasClass("on")){
|
||
$(this).parents(".hd").find(".selectedAttr").text(attrVal);
|
||
}
|
||
else{
|
||
|
||
$(this).parents(".hd").find(".selectedAttr").html('');
|
||
}*/
|
||
|
||
//验证是否所有属性全部选中
|
||
var skuCount = $('.attr_type').length;
|
||
var activeCount = $('.hd .on').length;
|
||
|
||
var productAttr = skuAttrType();
|
||
|
||
if(activeCount == skuCount)
|
||
{
|
||
|
||
//勾选属性事件： 重新加载属性图片
|
||
pictures.forEach(function(image, key) {
|
||
//选中的属性
|
||
var imageColor = image.image_color;
|
||
|
||
//判断属性是否全部匹配
|
||
var attrFlag = true;
|
||
attributes.forEach(function(attrName, kat) {
|
||
|
||
if(imageColor[kat][attrName] == productAttr[kat][attrName]){
|
||
|
||
}else{
|
||
|
||
attrFlag = false;
|
||
return;
|
||
|
||
}
|
||
})
|
||
|
||
if(attrFlag){
|
||
|
||
var bigImagesHtml = '<ul class="goods_list">';
|
||
var imageUrl = image.image_url;
|
||
|
||
imageUrl.forEach(function(atrVal,atrKey) {
|
||
|
||
bigImagesHtml += '<li> <img src="' + atrVal + '"></li>';
|
||
|
||
});
|
||
bigImagesHtml += '</ul>';
|
||
|
||
|
||
$(".bx-wrapper").remove();
|
||
$("#goods_list").html(bigImagesHtml);
|
||
$('.goods_list').bxSlider({});
|
||
}
|
||
|
||
})
|
||
|
||
}
|
||
|
||
});
|
||
|
||
});
|
||
|
||
function skuAttrType(){
|
||
// 获取规格值
|
||
var spec = [];
|
||
$('.hd .on').each(function()
|
||
{
|
||
var typeName = $(this).data('type');
|
||
var selected = {};
|
||
|
||
selected[typeName] = $(this).data('value');
|
||
|
||
spec.push(selected);
|
||
});
|
||
|
||
return JSON.parse(JSON.stringify(spec));
|
||
}
|
||
|
||
|
||
/*banner*/
|
||
$(function(){
|
||
$('.goods_list').bxSlider({
|
||
});
|
||
});
|
||
//===========================详情/关联产品/评论切换效果====================================
|
||
|
||
$(document).ready(function(){
|
||
$("#one").click(function(){
|
||
$(this).addClass("active");
|
||
$(this).siblings().removeClass("active");
|
||
$("#goods_details_Content2").hide();
|
||
$("#goods_details_Content1").show();
|
||
$("#goods_details_Content3").hide();
|
||
});
|
||
|
||
$("#two").click(function(){
|
||
$(this).addClass("active");
|
||
$(this).siblings().removeClass("active");
|
||
$("#goods_details_Content1").hide();
|
||
$("#goods_details_Content2").show();
|
||
$("#goods_details_Content3").hide();
|
||
});
|
||
|
||
$("#three").click(function(){
|
||
$(this).addClass("active");
|
||
$(this).siblings().removeClass("active");
|
||
$("#goods_details_Content1").hide();
|
||
$("#goods_details_Content3").show();
|
||
$("#goods_details_Content2").hide();
|
||
});
|
||
|
||
});
|
||
|
||
/*固定导航栏 */
|
||
|
||
$(function() {
|
||
$(window).scroll(function() {
|
||
|
||
var var_height = $("#Goods_detail").offset().top;
|
||
var var_st = $(window).scrollTop();
|
||
|
||
if(var_st > var_height) {
|
||
$(".goods_details").addClass("goods_details_fixed");
|
||
} else {
|
||
$(".goods_details").removeClass("goods_details_fixed");
|
||
}
|
||
})
|
||
})
|
||
|
||
|
||
/*关联产品
|
||
var htmlfontSize=$("html").css('font-size'); // 获取字体大小
|
||
var reg = /\d+/;
|
||
var bxSliderWidth = (htmlfontSize.match(reg)[0] * 5.04);
|
||
var slideMarginWidth = (htmlfontSize.match(reg)[0] * 0.58);
|
||
|
||
//alert(slideMarginWidth);
|
||
|
||
$(function(){
|
||
$('.goods_Related_list').bxSlider({
|
||
autoControls: true,
|
||
pager:false,
|
||
minSlides: 3,
|
||
maxSlides: 3,
|
||
slideWidth: bxSliderWidth,
|
||
slideMargin: slideMarginWidth,
|
||
infiniteLoop:false,
|
||
|
||
});
|
||
});
|
||
*/
|
||
/*评论点击放大功能*/
|
||
$(document).ready(function(){
|
||
/*调起大图 S*/
|
||
var mySwiper = new Swiper('.swiper-container2', {
|
||
loop: false,
|
||
pagination: '.swiper-pagination2',
|
||
})
|
||
$(".goods_Related").on("click", ".goods_comment_img img",
|
||
function() {
|
||
var imgBox = $(this).parents(".goods_comment_img").find("img");
|
||
var i = $(imgBox).index(this);
|
||
$(".big_img .swiper-wrapper").html("")
|
||
|
||
for(var j = 0 ,c = imgBox.length; j < c ;j++){
|
||
$(".big_img .swiper-wrapper").append('<div class="swiper-slide"><div class="cell"><img src="' + imgBox.eq(j).attr("src") + '" / ></div></div>');
|
||
}
|
||
mySwiper.updateSlidesSize();
|
||
mySwiper.updatePagination();
|
||
$(".big_img").css({
|
||
"z-index": 1001,
|
||
"opacity": "1"
|
||
});
|
||
mySwiper.slideTo(i, 0, false);
|
||
return false;
|
||
});
|
||
|
||
$(".big_img").on("click",
|
||
function() {
|
||
$(this).css({
|
||
"z-index": "-1",
|
||
"opacity": "0"
|
||
});
|
||
|
||
});
|
||
});
|
||
/*调起大图 E*/
|
||
|
||
|
||
var curr_url = '/product/detail/<?php echo $detail['id']; ?>.html';
|
||
var is_collection = <?php echo $detail['is_collection']; ?>;
|
||
var flag = 1; // 限制调用收藏接口 1可用 0不可用
|
||
function toggle_colleciton(that)
|
||
{
|
||
if (flag == 0)
|
||
{
|
||
return;
|
||
}
|
||
|
||
is_collection = Number(!is_collection);
|
||
flag = 0;
|
||
if (is_collection)
|
||
{
|
||
var url = '/index/collection/add_collection.html';
|
||
}
|
||
else
|
||
{
|
||
var url = '/index/collection/cancel_collection.html';
|
||
}
|
||
|
||
var coll_id = <?php echo $detail['id']; ?>;
|
||
var data = {
|
||
type: 1,
|
||
coll_id: coll_id,
|
||
curr_url: curr_url
|
||
};
|
||
|
||
$.ajax({
|
||
url: url,
|
||
type: 'post',
|
||
dataType: 'json',
|
||
data : data,
|
||
success: function(res) {
|
||
if (res.code == -1000)
|
||
{
|
||
$('.alert').show();
|
||
/*$('.alert_white').html('请先登录').delay(1000).fadeOut();
|
||
setTimeout(function() {
|
||
location.href = '__ORICOROOT__/customer/login.html?url=' + res.data.url;
|
||
}, 800);*/
|
||
}
|
||
else if (res.code == 200)
|
||
{
|
||
$(that).find('.house').toggleClass("house_img02");
|
||
}
|
||
}
|
||
});
|
||
|
||
setTimeout(function() {
|
||
flag = 1;
|
||
}, 1000);
|
||
}
|
||
|
||
</script>
|
||
</body>
|
||
</html>
|