jsasg/orico-official-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

feat: 新品上市

Browse Source
This commit is contained in:
jsasg
2025-04-27 15:18:21 +08:00
parent 31744ee208
commit 7e7ea4dda7
6 changed files with 695 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

359
app/index/controller/Product.php Normal file
View File

@@ -0,0 +1,359 @@
<?php
declare (strict_types = 1);
namespace app\index\controller;
use app\index\model\ProductAttrModel;
use app\index\model\ProductCategoryModel;
use app\index\model\ProductInquiryModel;
use app\index\model\ProductModel;
use app\index\model\ProductParamsModel;
use app\index\model\ProductPurchaseLinkModel;
use app\index\model\ProductSkuAttrModel;
use app\index\model\ProductSkuModel;
use app\index\model\SysBannerModel;
use app\index\validate\ProductInquiryValidate;
use think\facade\View;
use think\helper\Arr;
/**
* 产品控制器
*/
class Product extends Common
{
// 产品分类
public function category()
{
// 参数
$param = request()->param(['id']);
$focus_image = [];
// 获取产品分类页焦点横幅
$banner = SysBannerModel::with(['items' => function($query) {
$query->withoutField([
'status',
'created_at',
'updated_at',
'deleted_at'
])
->where('status', '=', 1)
->order(['sort' => 'asc', 'id' => 'desc']);
}])
->uniqueLabel(['BANNER_6808abd813d78'])
->language($this->lang_id)
->enabled(true)
->select();
if (!$banner->isEmpty()) {
$banner_map = [];
foreach ($banner as $v) {
$banner_map[$v->unique_label] = $v;
}
$focus_image = data_get($banner_map, 'BANNER_6808abd813d78')?->items->toArray();
}
View::assign('focus_image', $focus_image);
// 获取分类及产品信息
$categorys_data = ProductCategoryModel::field(['id', 'name', 'level'])
->language($this->lang_id)
->displayed(true)
->child($param['id'], true)
->order(['sort' => 'asc', 'id' => 'desc'])
->select();
if (!$categorys_data->isEmpty()) {
if ($categorys_data->count() > 1) {
// 当分类数不只一个时，当前分类下有子分类，移除当前分类，只输出子分类
$categorys_data = $categorys_data->filter(function($item) use($param) {
return $item->id != $param['id'];
});
}
$categorys_data = $categorys_data->toArray();
$products = ProductModel::field([
'id',
'category_id',
'spu',
'name',
'short_name',
'cover_image',
'desc'
])
->byCategory(array_column($categorys_data, 'id'))
->language($this->lang_id)
->enabled(true)
->onSale(true)
->onShelves(true)
->order(['sort' => 'asc', 'id' => 'desc'])
->select();
if (!$products->isEmpty()) {
// 获取sku信息
$skus_map = [];
$color_map = [];
$skus = ProductSkuModel::withoutField(['sort', 'created_at', 'updated_at'])
->byProductId(Arr::pluck($products, 'id'))
->order(['sort' => 'asc', 'id' => 'asc'])
->select();
if (!$skus->isEmpty()) {
// 获取产品sku属性信息
$sku_attrs_map = [];
$sku_attrs = ProductSkuAttrModel::bySkuId(array_unique(Arr::pluck($skus, 'id')))->select()->toArray();
if (!empty($sku_attrs)) {
// 获取属性名称
$attrs = ProductAttrModel::bypks(array_unique(Arr::pluck($sku_attrs, 'attr_id')))->column(['attr_name'], 'id');
// 获取属性名称
foreach ($sku_attrs as $v) {
$sku_attrs_map[$v['sku_id']][] = [
'sku_id' => $v['sku_id'],
'attr_id' => $v['attr_id'],
'attr_name' => $attrs[$v['attr_id']]?? '',
'attr_value' => $v['attr_value']
];
}
}
// sku匹配属性
foreach ($skus as $v) {
// 找到相应产品的sku图片信息
$skus_map[$v['product_id']][] = [
'id' => $v['id'],
'sku' => $v['sku'],
'main_image' => $v['main_image'],
];
// 找到相应产品的sku产色属性信息
$attr = $sku_attrs_map[$v['id']]?? [];
if (!empty($attr)) {
foreach ($attr as $at) {
if ($at['attr_name'] == '颜色') {
$color_map[$v['product_id']][] = $at;
}
}
}
}
}
// 按分类分组产品
$products_map = [];
foreach ($products as $v) {
$products_map[$v['category_id']][] = [
'id' => $v['id'],
'spu' => $v['spu'],
'name' => $v['name'],
'short_name' => $v['short_name'],
'cover_image' => $v['cover_image'],
'desc' => $v['desc'],
'sku' => $skus_map[$v['id']]?? [],
'colors' => $color_map[$v['id']]?? []
];
}
foreach ($categorys_data as $k => $v) {
$categorys_data[$k]['products'] = $products_map[$v['id']] ?? [];
}
}
}
View::assign('categorys_data', $categorys_data);
return View::fetch('category');
}
/**
* 产品详情页
*/
public function detail()
{
$param = request()->param(['id']);
// 获取产品信息
$product = ProductModel::withoutField([
'language_id',
'status',
'created_at',
'updated_at',
'deleted_at'
])
->bypk($param['id'])
->find();
View::assign('product', $product);
$product_categorys = [];
$product_params = [];
$product_skus = [];
$product_sku_attrs = [];
$product_purchase_links = [];
if (!empty($product)) {
// 获取产品分类信息
$product_categorys = ProductCategoryModel::field(['id', 'pid', 'name'])
->bypk($product['category_id'])
->union(function($query) use($product) {
$query->name('product_category')
->field(['id', 'pid', 'name'])
->where('id', 'IN', function($sub_query) use($product) {
$sub_query->name('product_category')
->where('id', '=', $product['category_id'])
->field('path');
});
})
->order(['id' => 'asc'])
->select()
->toArray();
// 获取产品参数信息
$product_params = ProductParamsModel::field(['id', 'name', 'value'])
->byProductId($product['id'])
->order(['id' => 'asc'])
->select()
->toArray();
// 获取产品sku信息
$skus = ProductSkuModel::withoutField(['created_at', 'updated_at'])
->byProductId($product['id'])
->order(['sort' => 'asc', 'id' => 'asc'])
->select();
if (!empty($skus)) {
$product_skus = $skus->toArray();
// 获取产品sku属性信息
$sku_attrs = ProductSkuAttrModel::bySkuId(array_unique(Arr::pluck($skus, 'id')))->select()->toArray();
if (!empty($sku_attrs)) {
// 获取属性名称
$attrs = ProductAttrModel::bypks(array_unique(Arr::pluck($sku_attrs, 'attr_id')))->column(['attr_name'], 'id');
foreach ($sku_attrs as $v) {
$v['attr_name'] = $attrs[$v['attr_id']]?? '';
// 按属性分组
$product_sku_attrs[$v['attr_id']]['attr_id'] = $v['attr_id'];
$product_sku_attrs[$v['attr_id']]['attr_name'] = $v['attr_name'];
$product_sku_attrs[$v['attr_id']]['attr_values'][] = [
'sku_id' => $v['sku_id'],
'attr_value' => $v['attr_value'],
];
}
$product_sku_attrs = array_values($product_sku_attrs);
}
}
// 获取产品购买链接信息
$product_purchase_links = ProductPurchaseLinkModel::with(['platform'])
->field(['platform_id', 'link'])
->byProductId($product['id'])
->order(['sort' => 'asc', 'id' => 'desc'])
->select()
->hidden(['platform'])
->bindAttr('platform', ['platform_name' => 'platform'])
->toArray();
}
View::assign('product_categorys', $product_categorys);
View::assign('product_params', $product_params);
View::assign('product_skus', $product_skus);
View::assign('product_sku_attrs', $product_sku_attrs);
View::assign('product_purchase_links', $product_purchase_links);
// 获取询盘可选国家
$config = $this->basic_config['optional_country_for_product_inquiry'];
View::assign('country_list', explode(',', preg_replace('/\r?\n/', ',', $config['value']?? '')));
return View::fetch('detail');
}
/**
* 产品询盘
*/
public function inquiry()
{
$post = request()->post([
'first_name',
'last_name',
'email',
'phone',
'country_name',
'corp_name',
'industry',
'message'
]);
// 输出校验
$validate = new ProductInquiryValidate;
if (!$validate->check($post)) {
return error($validate->getError());
}
// 保存询盘信息
$ret = ProductInquiryModel::create([
'language_id' => $this->lang_id,
'first_name' => $post['first_name'],
'last_name' => $post['last_name'],
'email' => $post['email'],
'phone' => $post['phone'],
'country_name' => $post['country_name'],
'corp_name' => $post['corp_name'],
'industry' => $post['industry'],
'referer_url' => request()->header('referer'),
'message' => $post['message'],
]);
if ($ret->isEmpty()) {
return error(lang('product_detail.send_fail'));
}
return success(lang('product_detail.send_success'));
}
/**
* 新品上市
*/
public function newpro()
{
$focus_image = [];
// 获取焦点图
$banner = SysBannerModel::with(['items' => function($query) {
$query->withoutField([
'status',
'created_at',
'updated_at',
'deleted_at'
])
->where('status', '=', 1)
->order(['sort' => 'asc', 'id' => 'desc']);
}])
->uniqueLabel(['BANNER_680dd7ceaa529'])
->language($this->lang_id)
->enabled(true)
->select();
if (!$banner->isEmpty()) {
$focus_image = $banner->first()?->items ?? [];
}
View::assign('focus_image', $focus_image);
$newpros = [];
// 获取新品上市产品
$products = ProductModel::field(['id', 'category_id', 'name', 'spu', 'cover_image'])
->language($this->lang_id)
->enabled(true)
->onSale(true)
->onShelves(true)
->isNew(true)
->order(['sort' => 'asc', 'id' => 'desc'])
->select();
if ($products->isEmpty()) {
return [];
}
// 按分类分组产品
$products_map = [];
foreach ($products as $product) {
$products_map[$product['category_id']][] = $product;
}
// 获取产品分类信息
$categorys = ProductCategoryModel::field(['id', 'name'])
->byPks(array_keys($products_map))
->language($this->lang_id)
->displayed(true)
->order(['sort' => 'asc', 'id' => 'desc'])
->select();
if (!$categorys->isEmpty()) {
foreach ($categorys as $category) {
$newpros[] = [
'category' => $category,
'products' => $products_map[$category['id']] ?? [],
];
}
}
View::assign('newpros', $newpros);
return View::fetch('newpro');
}
}

6
app/index/model/ProductModel.php
View File

@@ -46,4 +46,10 @@ class ProductModel extends ProductBaseModel
{
$query->where('is_hot', '=', (int)$stat);
}
// 新品状态范围查询
public function scopeIsNew($query, bool $stat = true)
{
$query->where('is_new', '=', (int)$stat);
}
}

4
app/index/route/route.php
View File

@@ -18,6 +18,10 @@ Route::group('product', function() {
Route::get('index/:id', 'Product/index')->name('product_index');
// 产品详情页
Route::get('detail/:id', 'Product/detail')->name('product_detail');
// 产品询盘
Route::post('inquiry', 'Product/inquiry');
// 新品上市
Route::get('newpro', 'Product/newpro');
// 产品搜索页
Route::get('search', 'Product/search');
});

273
app/index/view/product/detail.html Normal file
View File

@@ -0,0 +1,273 @@
{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=""}
<meta name="keywords" content="{$product.seo_keywords}" />
<meta name="description" content="{$product.seo_description}" />
{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">
{if condition="!empty($product.video_img) && !empty($product.video_url)"}
<div class="preview" id="preview{$sku.id}">
<div class="smallImg">
<!-- 小图片预览 -->
<div id="imageMenu">
<ul class="image_list">
<li id="onlickImg"><img src="{$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>
</div>
{/if}
{volist name="product_skus" id="sku" key="idx"}
{if condition="!empty($product.video_img) && !empty($product.video_url)"}
<div class="preview" id="preview{$sku.id}" style="display:none">
{else /}
<div class="preview" id="preview{$sku.id}" {neq name="idx" value="1"}style="display:none"{/neq}>
{/if}
<div class="smallImg">
<!-- 小图片预览 -->
<div id="imageMenu">
<ul class="image_list">
{volist name="sku.photo_album" id="thumb_image"}
<li id="onlickImg"><img src="{$thumb_image}" /></li>
{/volist}
</ul>
</div>
</div>
<!-- 产品大图 -->
<div class="bigImg" id="vertical">
<!-- 左边切换按钮 -->
<div class="scrollbutton smallImgUp disabled"></div>
<!-- 主图 -->
{notempty name="sku.photo_album[0]"}
<img src="{$sku.photo_album[0]}" id="midimg" />
{/notempty}
<!-- 右边切换按钮 -->
<div class="scrollbutton smallImgDown"></div>
</div>
</div>
{/volist}
</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">{:lang('product_detail.detail_section_title')}</div>
<!-- 富文本渲染-->
<div class="products_des">
{$product.detail|default=''|raw}
</div>
</div>
<!-- 弹框-->
<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>
{/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);
}
})
});
});
</script>
{/block}

51
app/index/view/product/newpro.html Normal file
View File

@@ -0,0 +1,51 @@
{extend name="public/base" /}
{block name="style"}
<link rel="stylesheet" href="__CSS__/product_newpro.css">
{/block}
{block name="main"}
<div class="orico_Page_newproducts">
<!-- 新品-->
<!-- 主打产品banner轮播 -->
<div class="opdBanner">
{volist name="focus_image" id="fo"}
<a {notempty name="fo.link"}href="{$fo.link}"{/notempty}><img src="{$fo.image}" class="opdbannerImg" /></a>
{/volist}
</div>
{volist name="newpros" id="vo"}
<div class="oricoNewPrMain">
<h1 class="ori-pd-title">{$vo.category.name}</h1>
<div class="ori-pd-list">
{volist name="vo.products" id="pro"}
<a class="oripditem" href="{:url('product/detail', ['id' => $pro.id])}">
<!-- <div class="oNpicoNEW">New</div> -->
<img src="{$pro.cover_image}" class="prdimg prdimg-show" />
<div class="prdName">{$pro.name}</div>
<div class="prddec">{$pro.spu}</div>
</a>
{/volist}
</div>
</div>
{/volist}
</div>
{/block}
{block name="script"}
<script type="text/javascript">
$(function() {
// 显示第一张图片
$('.opdbannerImg').eq(0).show();
let currentIndex = 0;
const imgCount = $('.opdbannerImg').length;
setInterval(() => {
// 淡出当前图片
$('.opdbannerImg').eq(currentIndex).fadeTo(10, 0, () => {
// 隐藏当前图片
$('.opdbannerImg').eq(currentIndex).hide();
// 计算下一张图片的索引
currentIndex = (currentIndex + 1) % imgCount;
// 显示并淡入下一张图片
$('.opdbannerImg').eq(currentIndex).show().fadeTo(10, 1);
});
}, 10000);
});
</script>
{/block}

4
public/static/index/css/new_arrival.css → public/static/index/css/product_newpro.css
View File

@@ -2,7 +2,7 @@
.orico_Page_newproducts {
width: 100%;
position: relative;
height: 100vh;
min-height: 100vh;
overflow-y: auto;
overflow-x: hidden;
background: #f9f9f9;
@@ -25,7 +25,7 @@
object-fit: cover;
transition: opacity 1s ease-in-out;
}
.orico_Page_newproducts .opdbannerImg:first-child {
.orico_Page_newproducts .opdbanner>a:first-child {
display: block;
}
.orico_Page_newproducts .oricoNewPrMain {