feat: mobile产品详情
This commit is contained in:
@@ -17,4 +17,39 @@ return [
|
|||||||
'常见问题' => 'FAQ',
|
'常见问题' => 'FAQ',
|
||||||
'回答您最关心的问题' => 'What are you most concerned about',
|
'回答您最关心的问题' => 'What are you most concerned about',
|
||||||
'客服团队的工作时间：周一到周五，早9点到晚6点 平均应答时间：24小时内' => 'Our customer support is available Monday to Friday: 9am-6:00pm. Average answer time: 24h',
|
'客服团队的工作时间：周一到周五，早9点到晚6点 平均应答时间：24小时内' => 'Our customer support is available Monday to Friday: 9am-6:00pm. Average answer time: 24h',
|
||||||
|
'发送查询' => 'Send Inquiry',
|
||||||
|
'型号' => 'Model',
|
||||||
|
'产品描述' => 'Product Description',
|
||||||
|
'关联产品' => 'Related Products',
|
||||||
|
'姓名' => 'Name',
|
||||||
|
'请输入您的名称' => 'First name',
|
||||||
|
'请输入您的姓氏' => 'Last name',
|
||||||
|
'公司/组织' => 'Company/Organization',
|
||||||
|
'电子邮箱' => 'Email',
|
||||||
|
'电话号码' => 'Phone Number',
|
||||||
|
'国家' => 'Country',
|
||||||
|
'请选择所属国家' => 'Select your country',
|
||||||
|
'行业' => 'Industry',
|
||||||
|
'询问内容' => 'Inquiry',
|
||||||
|
'提交' => 'SUBMIT',
|
||||||
|
// 验证器中文本
|
||||||
|
'validate_first_name_require' => '名不能为空',
|
||||||
|
'validate_first_name_max' => '名不能超过64个字符',
|
||||||
|
'validate_last_name_require' => '姓不能为空',
|
||||||
|
'validate_last_name_max' => '姓不能超过64个字符',
|
||||||
|
'validate_email_require' => '邮箱不能为空',
|
||||||
|
'validate_email_email' => '邮箱格式不正确',
|
||||||
|
'validate_email_max' => '邮箱不能超过128个字符',
|
||||||
|
'validate_phone_max' => '电话号码不能超过32个字符',
|
||||||
|
'validate_country_name_require' => '国家不能为空',
|
||||||
|
'validate_country_name_max' => '国家不能超过128个字符',
|
||||||
|
'validate_corp_name_require' => '公司/组织不能为空',
|
||||||
|
'validate_corp_name_max' => '公司/组织不能超过128个字符',
|
||||||
|
'validate_industry_require' => '行业不能为空',
|
||||||
|
'validate_industry_max' => '行业不能超过64个字符',
|
||||||
|
'validate_message_require' => '询问内容不能为空',
|
||||||
|
'validate_message_max' => '询问内容不能超过1024个字符',
|
||||||
|
// 返回文本
|
||||||
|
'send_success' => '信息已成功提交',
|
||||||
|
'send_fail' => '信息提交失败',
|
||||||
];
|
];
|
||||||
231
app/index/view/mobile/product/detail.html
Normal file
231
app/index/view/mobile/product/detail.html
Normal file
@@ -0,0 +1,231 @@
|
|||||||
|
{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('首页')}</a>
|
||||||
|
{volist name="product_categorys" id="ca"}
|
||||||
|
<span class="icon-arrow arrow_address"></span>
|
||||||
|
<a class="href_02" href="{:url('product/category', ['id' => $ca.id])}">{$ca.name}</a>
|
||||||
|
{/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}
|
||||||
|
</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)" /}
|
||||||
|
<li class="attr_value tip1 attr_item" data-index="{$pk}">
|
||||||
|
{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('型号')}</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">
|
||||||
|
<a class="btn-blue-detail business-button">{:lang('发送查询')}</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 产品描述 -->
|
||||||
|
<div class="goods_details">
|
||||||
|
<ul class="cpa des cursor_p">
|
||||||
|
<li class="active" id="one">{:lang('产品描述')}</li>
|
||||||
|
{notempty name="product_related"}
|
||||||
|
<li>{:lang('关联产品')}</li>
|
||||||
|
{/notempty}
|
||||||
|
<div class="clear"></div>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<!-- 产品图片-->
|
||||||
|
<div class="goods_des img-responsives" id="goods_details_Content1">{$product.detail|raw}</div>
|
||||||
|
<!-- 弹窗-->
|
||||||
|
<div class="marsk-container-detail">
|
||||||
|
<div class="popup-quick">
|
||||||
|
<div class="title-text">{:lang('发送查询')}</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('姓名')}</p>
|
||||||
|
<div class="name clearfix">
|
||||||
|
<input type="text" class="first detail-w02" placeholder="{:lang('请输入您的名称')}"
|
||||||
|
name="firstname" id="firstname" style="margin-right:0.5rem;">
|
||||||
|
<input type="text" class="first detail-w02" placeholder="{:lang('请输入您的姓氏')}"
|
||||||
|
name="lastname" id="lastname">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class=" clearfix">
|
||||||
|
<p><strong class="redstr">*</strong>{:lang('公司/组织')}</p>
|
||||||
|
<div class="redstr">
|
||||||
|
<input type="text" class="first detail-w01" id="companyName" name="companyName">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class=" clearfix">
|
||||||
|
<p><strong class="redstr">*</strong>{:lang('邮箱')}</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('电话号码')}</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('国家')}</p>
|
||||||
|
<div class="redstr">
|
||||||
|
<select class=" detail-w01" id="country" name="country">
|
||||||
|
<option value="">--- {:lang('请选择所属国家')} ---</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('行业')}</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('询问内容')}</p>
|
||||||
|
<div>
|
||||||
|
<textarea rows="3" cols="20" class="first detail-w01" id="inquiry" name="inquiry"></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="submit_btn" id="send">{:lang('提交')}</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()
|
||||||
|
})
|
||||||
|
|
||||||
|
// 根据颜色切换图册
|
||||||
|
$('.attr_type').find('.attr_value').click(function() {
|
||||||
|
var index = $(this).data('index');
|
||||||
|
$('.pdetailswiper').hide();
|
||||||
|
$('.pdetailswiper[data-index="' + index + '"]').show();
|
||||||
|
$('.attr_value').removeClass('active');
|
||||||
|
$(this).addClass('active');
|
||||||
|
});
|
||||||
|
|
||||||
|
// 提交产品询价查询
|
||||||
|
// 提交询盘
|
||||||
|
$('#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}
|
||||||
37
public/static/index/mobile/css/product_detail.css
Executable file
37
public/static/index/mobile/css/product_detail.css
Executable file
@@ -0,0 +1,37 @@
|
|||||||
|
.oricoEGapp-prdetail {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.oricoEGapp-prdetail img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
.oricoEGapp-prdetail .margin-top-90 {
|
||||||
|
padding-top: 3.125rem;
|
||||||
|
}
|
||||||
|
.oricoEGapp-prdetail .margin-top-90 .goods_address {
|
||||||
|
padding-top: 1.25rem;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
.oricoEGapp-prdetail .margin-top-90 .goods_address a {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.oricoEGapp-prdetail .oricodtail-pdetailimgs {
|
||||||
|
position: relative;
|
||||||
|
margin: 1rem;
|
||||||
|
margin-top: 0%;
|
||||||
|
}
|
||||||
|
.oricoEGapp-prdetail .redstr {
|
||||||
|
color: red;
|
||||||
|
margin-right: 0.3125rem;
|
||||||
|
}
|
||||||
|
.oricoEGapp-prdetail .clearfix {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
.oricoEGapp-prdetail .slideTxtBox .clearfix .attr_type {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.oricoEGapp-prdetail .slideTxtBox .clearfix .attr_type .clearfix li {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
BIN
public/static/index/mobile/images/close2.png
Executable file
BIN
public/static/index/mobile/images/close2.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 518 B |
Reference in New Issue
Block a user