Files
orico-official-website-old/app/admin/view/product/add.html
2024-10-29 14:04:59 +08:00

1628 lines
65 KiB
HTML
Executable File
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!-- Select2 -->
<link rel="stylesheet" href="__PUBLIC__/adminlte/bower_components/select2/dist/css/select2.min.css" />
<style>
.select2-container--default .select2-selection--single {
background-color: #fff;
border: 1px solid #d2d6de;
border-radius: 0;
}
.select2-container .select2-selection--single {
height: 34px;
}
</style>
<!-- Select2 -->
<script src="__PUBLIC__/adminlte/bower_components/select2/dist/js/select2.full.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>新增产品</h1>
<ol class="breadcrumb">
<li>
<a href="<?php echo url('/admin');?>"><i class="fa fa-dashboard"></i> 首页</a>
</li>
<li><a href="<?php echo url('/admin/product/lists');?>"> 产品列表</a></li>
<li class="active">产品</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-md-10">
<form class="form-horizontal" action="<?php echo url('/admin/product/save');?>" method="post" name="productform">
<div class="nav-tabs-custom">
<ul class="nav nav-tabs">
<li class="active">
<a href="#navfirst" data-toggle="tab"><i class="fa fa-edit text-green"></i> 基本信息</a>
</li>
<li><a href="#navthird" data-toggle="tab">图片信息</a></li>
<li><a href="#navsecond" data-toggle="tab">详细内容</a></li>
<li><a href="#naveighth" data-toggle="tab">相关信息下载</a></li>
</ul>
<div class="tab-content" style="background: #f3f3f3">
<div class="active tab-pane" id="navfirst">
<div class="form-group grid-margin stretch-card" style="margin-left: 0; margin-right: 0">
<div class="card">
<div class="card-body">
<div class="form-group row">
<label for="name" class="col-sm-2 control-label">产品名称<em style="color: red">*</em></label>
<div class="col-sm-8">
<input type="text" class="form-control" name="name" id="name" required value="" />
</div>
</div>
<div class="form-group">
<label for="shortname" class="col-sm-2 control-label">副标题名称</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="shortname" id="shortname" />
</div>
<div class="col-sm-2">
<span class="help-block">(副标题名称)</span>
</div>
</div>
<div class="form-group">
<label for="brand_id" class="col-sm-2 control-label">商品型号<em style="color: red">*</em></label>
<div class="col-sm-8">
<input
type="text"
class="form-control"
name="brand_id"
id="brand_id"
onkeyup="this.value=this.value.replace(/[^\w-]/g,'');"
value=""
onblur="chickbrandid()"
/>
</div>
<div class="col-sm-2">
<span class="help-block">(商品型号)</span>
</div>
</div>
<div class="form-group">
<label for="cid" class="col-sm-2 control-label">所属分类<em style="color: red">*</em></label>
<div class="col-sm-8">
<select class="form-control select2" style="width: 100%" name="cid" id="cid">
<option value="0" selected="">默认值</option>
<?php echo $categoryOptions;?>
</select>
</div>
<div class="col-sm-2">
<span class="help-block">(所属分类)</span>
</div>
</div>
</div>
</div>
</div>
<div class="form-group grid-margin stretch-card" style="margin-left: 0; margin-right: 0">
<div class="card">
<div class="card-body">
<div class="form-group">
<label for="videopath" class="col-sm-2 control-label">视频文件</label>
<div class="col-sm-8">
<div class="input-group">
<input type="text" class="form-control" name="videopath" id="videopath" value="" />
<span class="input-group-btn">
<button
class="btn btn-primary"
type="button"
onclick="webuploader_modal('videopath', '', 'media', 'video', 'file_call_back')"
>
<i class="fa fa-fw fa-folder-open-o"></i>
</button>
</span>
</div>
</div>
<div class="col-sm-2">
<span class="help-block">(视频文件)</span>
</div>
</div>
<div class="form-group">
<label for="shortname" class="col-sm-2 control-label">产品参数</label>
<div class="col-sm-8">
<textarea rows="6" class="form-control" id="product_view" name="product_view"></textarea>
</div>
<div class="col-sm-2">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="sort" class="col-sm-2 control-label">产品排序<em style="color: red">*</em></label>
<div class="col-sm-5">
<input type="text" class="form-control" name="sort" id="sort" value="9999" />
</div>
<div class="col-sm-2 col-sm-offset-3">
<span class="help-block">(产品排序)</span>
</div>
</div>
</div>
</div>
</div>
<div class="form-group grid-margin stretch-card" style="margin-left: 0; margin-right: 0">
<div class="card">
<div class="card-body">
<?php if($country_code== 'ZH'):?>
<div class="form-group">
<label for="url_tm" class="col-sm-2 control-label">天猫链接</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="url_tm" />
</div>
<div class="col-sm-2">
<span class="help-block">(天猫链接)</span>
</div>
</div>
<div class="form-group">
<label for="url_jd" class="col-sm-2 control-label">京东链接</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="url_jd" />
</div>
<div class="col-sm-2">
<span class="help-block">(京东链接)</span>
</div>
</div>
<?php else:?>
<div class="form-group">
<label for="url_shopify" class="col-sm-2 control-label">Shopiry链接</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="url_shopify" />
</div>
<div class="col-sm-2">
<span class="help-block">(独立站链接)</span>
</div>
</div>
<div class="form-group">
<label for="url_amazon" class="col-sm-2 control-label">Amazon链接</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="url_amazon" />
</div>
<div class="col-sm-2">
<span class="help-block">(亚马逊链接)</span>
</div>
</div>
<?php endif;?>
<div class="form-group">
<label for="isnew" class="col-sm-2 control-label">新品</label>
<div class="col-sm-8">
<label class="radio-inline"> <input type="radio" name="isnew" value="1" /></label>
<label class="radio-inline"> <input type="radio" name="isnew" value="0" checked /></label>
</div>
<div class="col-sm-2">
<span class="help-block">(是否新品)</span>
</div>
</div>
<div class="form-group">
<label for="ishot" class="col-sm-2 control-label">热门</label>
<div class="col-sm-8">
<label class="radio-inline"> <input type="radio" name="ishot" value="1" /></label>
<label class="radio-inline"> <input type="radio" name="ishot" value="0" checked /></label>
</div>
<div class="col-sm-2">
<span class="help-block">(是否热门)</span>
</div>
</div>
<div class="form-group">
<label for="recommend" class="col-sm-2 control-label">爆款</label>
<div class="col-sm-8">
<label class="radio-inline"> <input type="radio" name="recommend" value="1" /></label>
<label class="radio-inline"> <input type="radio" name="recommend" value="0" checked /></label>
</div>
<div class="col-sm-2">
<span class="help-block">(是否爆款)</span>
</div>
</div>
<div class="form-group">
<label for="isfeatured" class="col-sm-2 control-label">首页推荐</label>
<div class="col-sm-8">
<label class="radio-inline"> <input type="radio" name="isfeatured" value="1" /></label>
<label class="radio-inline"> <input type="radio" name="isfeatured" value="0" checked /></label>
</div>
<div class="col-sm-2">
<span class="help-block">(是否推荐)</span>
</div>
</div>
<div class="form-group">
<label for="recommend" class="col-sm-2 control-label">列表显示</label>
<div class="col-sm-8">
<label class="radio-inline"> <input type="radio" name="onelist" value="1" /></label>
<label class="radio-inline"> <input type="radio" name="onelist" value="0" checked /></label>
</div>
<div class="col-sm-2">
<span class="help-block">(是否一级列表)</span>
</div>
</div>
</div>
</div>
</div>
<div class="form-group grid-margin stretch-card" style="margin-left: 0; margin-right: 0">
<div class="card">
<div class="card-body">
<div class="form-group">
<label for="seo_title" class="col-sm-2 control-label">SEO标题</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="seo_title" />
</div>
<div class="col-sm-2">
<span class="help-block">(SEO标题)</span>
</div>
</div>
<div class="form-group">
<label for="seo_keyword" class="col-sm-2 control-label">SEO关键词</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="seo_keyword" />
</div>
<div class="col-sm-2">
<span class="help-block">(SEO关键词)</span>
</div>
</div>
<div class="form-group">
<label for="seo_description" class="col-sm-2 control-label">SEO描述</label>
<div class="col-sm-8">
<textarea class="form-control" id="seo_description" name="seo_description"></textarea>
</div>
<div class="col-sm-2">
<span class="help-block">(SEO描述)</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.tab-pane -->
<div class="tab-pane" id="navthird">
<div class="form-group grid-margin stretch-card" style="margin-left: 0; margin-right: 0">
<div class="card">
<div class="card-body">
<div class="form-group">
<label for="seo_title" class="col-sm-2 control-label">封面图</label>
<div class="col-sm-8">
<a
href="javascript:void(0);"
id="thumb-list-bk-img"
data-toggle="image"
data-folder="<?php echo $filepath;?>"
class="img-thumbnail home_image"
><img class="img-responsive" src="/uploads/nopic.jpg"
/></a>
<input type="hidden" name="list_bk_img" value="/uploads/nopic.jpg" id="input-list-bk-img" />
</div>
<div class="col-sm-2">
<span class="help-block">(800X800<br />高宽度比例1:1)</span>
</div>
</div>
<!--div class="form-group">
<label for="seo_keyword" class="col-sm-2 control-label">热门主图</label>
<div class="col-sm-8">
<a href="javascript:void(0);" id="thumb-list-rmimg" data-toggle="image" data-folder="<?php echo $filepath;?>" class="img-thumbnail"><img class="img-responsive" src="/uploads/nopic.jpg"/></a>
<input type="hidden" name="rmimg" value="/uploads/nopic.jpg" id="input-list-rmimg" />
</div>
<div class="col-sm-2">
<span class="help-block">(高宽度比例1:1)</span>
</div>
</div-->
</div>
</div>
</div>
<div class="form-group grid-margin stretch-card" style="margin-left: 0; margin-right: 0">
<div class="card">
<div class="card-body">
<label class="card-title">二级列表主图</label>
<p class="card-description">
<button type="button" onclick="addProduct();" title="添加图片" class="btn btn-primary">
<i class="fa fa-plus-circle"></i>
</button>
</p>
<div class="col-sm-12">
<div class="table-responsive">
<table id="product" class="table">
<thead>
<tr>
<th class="text-left" width="30%">主图</th>
<th class="text-center" width="20%">颜色[色值/色块名称]</th>
<th class="text-center" width="30%">描述</th>
<th class="text-left" width="10%">操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!--div class="form-group grid-margin stretch-card" style="margin-left:0; margin-right:0;">
<div class="card">
<div class="card-body">
<label class="card-title">爆款主图</label>
<p class="card-description"><button type="button" onclick="addBkimg();" title="添加图片" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></p>
<div class="col-sm-12">
<div class="table-responsive">
<table id="bkimg" class="table">
<thead>
<tr>
<th class="text-left" width="30%">主图</th>
<th class="text-center" width="20%">颜色色值</th>
<th class="text-center" width="30%">描述</th>
<th class="text-left" width="10%">操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div-->
<div class="form-group grid-margin stretch-card" style="margin-left: 0; margin-right: 0">
<div class="card">
<div class="card-body">
<label class="card-title">多属性</label>
<p class="card-description">
<button type="button" onclick="addMultiAttribute();" title="添加属性" class="btn btn-primary">
<i class="fa fa-plus-circle"></i>
</button>
</p>
<div class="col-sm-12">
<div class="table-responsive">
<table id="multi-attribute" class="table product_attrs">
<thead>
<tr>
<th class="text-left" width="40%">属性名称</th>
<th class="text-center" width="10%">操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="form-group grid-margin stretch-card" style="margin-left: 0; margin-right: 0">
<div class="card">
<div class="card-body">
<label class="card-title">相册图片</label>
<span class="right"
><a href="#"><span class="business-button">颜色说明</span></a></span
>
<!--弹出框-->
<div class="business-close">
<div class="marsk-container" style="display: none">
<div class="popup-quick">
<div class="business-close"><i class="fa fa-close"></i></div>
<div class="popup-app">
<table>
<tr>
<td>颜色(Color)</td>
<td>中文名称</td>
<td>英文名称</td>
</tr>
<tr>
<td>BK</td>
<td></td>
<td>Black</td>
</tr>
<tr>
<td>WH</td>
<td></td>
<td>White</td>
</tr>
<tr>
<td>SV</td>
<td></td>
<td>Sivler</td>
</tr>
<tr>
<td>GD</td>
<td></td>
<td>Gold</td>
</tr>
<tr>
<td>GY</td>
<td></td>
<td>Grey</td>
</tr>
<tr>
<td>BL</td>
<td></td>
<td>Blue</td>
</tr>
<tr>
<td>RD</td>
<td></td>
<td>Red</td>
</tr>
<tr>
<td>YL</td>
<td></td>
<td>Yellow</td>
</tr>
<tr>
<td>OR</td>
<td></td>
<td>Orange</td>
</tr>
<tr>
<td>PK</td>
<td></td>
<td>Pink</td>
</tr>
<tr>
<td>GR</td>
<td>绿</td>
<td>Green</td>
</tr>
<tr>
<td>PU</td>
<td></td>
<td>Purple</td>
</tr>
<tr>
<td>CF</td>
<td>咖啡</td>
<td>Coffee</td>
</tr>
<tr>
<td>RG</td>
<td>玫瑰金</td>
<td>Rose Gold</td>
</tr>
<tr>
<td>CO</td>
<td>多彩</td>
<td>Colorful</td>
</tr>
<tr>
<td>CR</td>
<td>透明</td>
<td>Cleaner</td>
</tr>
<tr>
<td>WD</td>
<td>木纹</td>
<td>Wood Texture</td>
</tr>
</table>
<div class="tips-text">温馨提示:只需要参考第一列颜色名称,后面两列是对应的中英文翻译.</div>
</div>
</div>
</div>
</div>
<!--弹出框-->
<p class="card-description">
<button type="button" onclick="addAlbum();" title="添加相册图片" class="btn btn-primary">
<i class="fa fa-plus-circle"></i>
</button>
</p>
<div class="col-sm-12">
<div class="table-responsive">
<table id="albums" class="table">
<thead></thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.tab-pane -->
<div class="tab-pane" id="navsecond">
<div class="form-group grid-margin stretch-card" style="margin-left: 0; margin-right: 0">
<div class="card">
<div class="card-body">
<label class="card-title">产品描述</label>
<p class="card-description">
<button type="button" onclick="addDesc()" title="添加描述" class="btn btn-primary">
<i class="fa fa-plus-circle"></i>
</button>
</p>
<div class="col-sm-12">
<div class="table-responsive">
<table id="descs" class="table">
<thead>
<tr>
<th class="text-center" width="45%">标题</th>
<th class="text-center" width="45%">详情</th>
<th class="text-left" width="10%">操作</th>
</tr>
</thead>
<tbody></tbody>
<tfoot></tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<div class="form-group row">
<label for="exampleInputUsername2" class="">详情描述</label>
<div class="col-sm-12">
<textarea
id="content"
style="width: 100%; height: 500px"
name="ld_md_content"
rows="10"
cols="80"
placeholder="请输入内容..."
></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.tab-pane -->
<div class="tab-pane" id="naveighth">
<div class="form-group grid-margin stretch-card" style="margin-left: 0; margin-right: 0">
<div class="card">
<div class="card-body">
<label class="card-title">相关产品</label>
<p class="card-description">
<button type="button" data-cod="related" data-callback="addRelated" title="添加相关产品" class="btn btn-primary">
<i class="fa fa-plus-circle"></i>
</button>
</p>
<div class="col-sm-12">
<div class="table-responsive">
<table id="relateds" class="table">
<thead>
<tr>
<th class="text-left" width="60%">产品名称</th>
<th class="text-center" width="10%">排序</th>
<th class="text-center" width="20%">相关说明</th>
<th class="text-left" width="10%">操作</th>
</tr>
</thead>
<tbody class="related_list"></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="form-group grid-margin stretch-card" style="margin-left: 0; margin-right: 0">
<div class="card">
<div class="card-body">
<label class="card-title">相关下载</label>
<p class="card-description">
<button type="button" onclick="addDl();" title="添加下载" class="btn btn-primary">
<i class="fa fa-plus-circle"></i>
</button>
</p>
<div class="col-sm-12">
<div class="table-responsive">
<table id="dls" class="table">
<thead>
<tr>
<th class="text-left" width="40%">文件</th>
<th class="text-center" width="20%">分类</th>
<th class="text-center" width="10%">排序</th>
<th class="text-center" width="20%">名称</th>
<th class="text-left" width="10%">操作</th>
</tr>
</thead>
<tbody class="dls_list"></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.tab-pane -->
</div>
<!-- /.tab-content -->
<div class="nav-footer row" style="padding-top: 10px">
<div class="col-sm-2 col-sm-offset-2">
<p><button id="reset-btn" type="button" class="btn btn-warning btn-block">重置</button></p>
</div>
<div class="col-sm-2">
<p><button id="submit-btn" type="submit" class="btn btn-danger btn-block">提交</button></p>
</div>
<!-- /. row -->
</div>
</div>
<!-- /.nav-tabs-custom -->
</form>
</div>
<div class="col-md-2">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">快捷入口</h3>
</div>
<div class="box-body">
<a href="<?php echo url('/admin/product/lists');?>" class="btn btn-block btn-primary">产品列表</a>
<a href="<?php echo url('/admin/product_category/lists');?>" class="btn btn-block btn-primary">产品分类</a>
<a href="<?php echo url('/admin/product/create');?>" class="btn btn-block btn-primary">添加产品</a>
</div>
</div>
</div>
</div>
</section>
<!-- /.content -->
</div>
<style>
.table thead > tr > td,
.table tbody > tr > td {
vertical-align: middle;
}
.tab-pane {
background: #f3f3f3;
}
.card .card-description {
margin-bottom: 0.875rem;
font-weight: 400;
color: #76838f;
float: right;
padding-right: 10px;
}
.table thead th {
border-top: 0;
border-bottom-width: 1px;
font-weight: 500;
}
.table thead th {
vertical-align: bottom;
border-bottom: 2px solid #f3f3f3;
border-bottom-width: 2px;
}
.table th,
.table td {
vertical-align: middle;
line-height: 1;
}
.table th,
.table td {
padding: 1.25rem 0.9375rem;
vertical-align: top;
border-top: 1px solid #f3f3f3;
}
#navfifth img {
max-width: 100px;
}
.stretch-card {
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
align-items: stretch;
-webkit-justify-content: stretch;
justify-content: stretch;
}
.stretch-card > .card {
width: 100%;
min-width: 100%;
}
.grid-margin {
margin-bottom: 1.875rem;
margin-left: 0;
margin-right: 0;
}
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
/*border: 1px solid #e7eaed;*/
border-radius: 0;
}
.card .card-body {
padding: 1.5rem 1.875rem;
}
.card .card-title {
color: #4a4a4a;
margin-bottom: 1.5rem;
text-transform: uppercase;
font-weight: bold;
}
/*相册图片*/
#albums a {
float: left;
padding: 5px;
border: 0;
display: block;
}
#albums img {
border: 1px solid #ddd;
}
/*点击弹框*/
.popup-quick {
width: 400px;
position: fixed;
top: 50%;
margin-top: -235px;
left: 50%;
margin-left: -235px;
background-color: #fff;
z-index: 9999;
box-shadow: 0px 2px 5px rgba(255, 255, 255, 0.2);
color: #333;
border-radius: 0.05rem;
}
.popup-quick .popup-app {
font-size: 14px;
color: #333;
line-height: 22px;
padding: 10px;
text-align: center;
}
.popup-app table {
padding: 10px;
width: 100%;
}
.popup-app td {
width: 33%;
}
.popup-quick .business-close {
width: 0.13rem;
height: 0.13rem;
position: absolute;
top: 0.3rem;
right: 1.5rem;
cursor: pointer;
}
.title-text {
font-size: 16px;
padding-top: 14px;
padding-left: 22px;
color: #ff0000;
}
.marsk-container {
background: rgba(0, 0, 0, 0.8);
display: none;
position: absolute;
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0px;
z-index: 999;
}
.popup-bor {
border-bottom: 1px solid #ebebeb;
padding-top: 10px;
}
.business-button {
padding-left: 10px;
}
.tips-text {
font-size: 11px;
color: #ff0000;
text-align: left;
padding: 10px 0;
width: 94%;
margin: auto;
}
</style>
<!-- /.content-wrapper -->
<?php echo editor('#content');?>
<script type="text/javascript">
function parseInt_value(ele) {
elementObj = document.forms['productform'].elements[ele]
elementObj.value = parseInt(elementObj.value)
}
function mathRound_value(ele) {
elementObj = document.forms['productform'].elements[ele]
elementObj.value = Math.round(elementObj.value) //Math.floor() Math.ceil()
}
function toFixed_value(ele) {
elementObj = document.forms['productform'].elements[ele]
elementObj.value = elementObj.value.toFixed(2)
}
function addSpec(obj) {
var trObj = obj.parentNode.parentNode
var idx = trObj.rowIndex
var tableObj = document.getElementById('type_attr_table')
var row = tableObj.insertRow(idx + 1)
var cell1 = row.insertCell(-1)
var cell2 = row.insertCell(-1)
var cell3 = row.insertCell(-1)
cell1.innerHTML = trObj.childNodes[0].innerHTML
cell2.innerHTML = trObj.childNodes[1].innerHTML.replace(/readOnly([^\s|>]*)/i, '')
cell3.innerHTML = trObj.childNodes[2].innerHTML.replace(/(.*)(addSpec)(.*)(fa-plus-circle)/i, '$1removeSpec$3fa-minus-circle')
}
function removeSpec(obj) {
var trObj = obj.parentNode.parentNode
var idx = trObj.rowIndex
var tableObj = document.getElementById('type_attr_table')
tableObj.deleteRow(idx)
}
</script>
<script type="text/javascript">
var selectColorObj = JSON.parse('<?php echo json_encode($productColor);?>')
$(function () {
$('#reset-btn').click(function (e) {
if (confirm('确认重置所有表单项吗?')) {
this.form.reset()
}
})
$('form.form-horizontal').submit(function (e) {
var nameObj = document.getElementById('name')
if (isNull(nameObj.value)) {
alert('名称必须填写')
nameObj.focus()
return false
}
var codeObj = document.getElementById('brand_id')
if (isNull(codeObj.value)) {
alert('商品型号必须填写')
codeObj.focus()
return false
}
var sortObj = document.getElementById('sort')
if (isNaN(sortObj.value)) {
alert('排序值必须是数字')
sortObj.focus()
return false
}
var cidObj = document.getElementById('cid')
if (isNaN(cidObj.value) || !parseInt(cidObj.value)) {
alert('所属分类值无效')
cidObj.focus()
return false
}
$('.product_attr').each(function(){
if(!$(this).val()){
alert('属性名称不能为空');
e.preventDefault();
$(this).focus();
return false;
}
});
changeAlbumImagesSort();
if(!$("#albums input").hasClass("image_111")){
alert('属性相册图片不能为空');
$('.image_111').focus();
e.preventDefault();
return false;
}
var skus = [];
$('.form-sku').each(function(){
if($(this).val()){
skus.push($(this).val());
}
else{
alert('属性SKU不能为空');
$(this).focus();
e.preventDefault();
return false;
}
});
if(skus.length != quchong(skus).length) {
alert('属性SKU名称存在相同名称');
$('.form-sku').focus();
e.preventDefault();
}
$('.album_attr').find('select').each(function(){
var selectColor = $(this).val();
if(selectColor == '' || selectColor==undefined){
alert('相册选项属性不能为空');
$(this).focus();
e.preventDefault();
return false;
}
});
$('.album_attr input').each(function(){
if($(this).val()=='' || $(this).val()==undefined) {
alert('相册属性名称不能为空');
$(this).focus();
e.preventDefault();
return false;
}
});
})
$("[data-cod='related']").click(function (event) {
var param = {}
param.callback = $(this).data('callback')
//var $element = $(this).parent().parent();
//param.inputid = $element.find('input[type=hidden]').attr('id');
//param.titleid = $element.find('input[type=text]').attr('id');
$('#modal-product').remove()
$.ajax({
url: "<?php echo url('/admin/product/modallists');?>",
data: param,
dataType: 'html',
success: function (html) {
$('body').append('<div id="modal-product" class="modal fade">' + html + '</div>')
$('#modal-product').modal({ show: true, backdrop: 'static' })
}
})
})
//Initialize Select2 Elements
$('.select2').select2()
})
</script>
<script type="text/javascript">
var filePath = '<?php echo $filepath;?>'
var productModel = $('#brand_id').val()
if (productModel) {
filePath = '<?php echo $filepath;?>/' + productModel.replace('ORICO-', '').toUpperCase()
}
//ajax无刷新方式校验产品型号
function chickbrandid() {
var id = document.getElementById('brand_id').value;
if (id != '') {
$.ajax({
url: "/admin/product/chickbrandid/id/" +id,
dataType: 'html',
success: function (html) {
alert(html);
filePath = '<?php echo $filepath;?>/' + id.toUpperCase().replace('ORICO-', '');
$('.home_image').attr('data-folder',filePath);
}
})
}
}
</script>
<script type="text/javascript">
var image_row = 0
var arr_product_img = []
var image_rows = []
function remove_imgs(row) {
var len = image_rows.length
for (var i = 0; i < len; i++) {
if (row == image_rows[i]) {
arr_product_img.splice(i, 1)
image_rows.splice(i, 1)
}
}
$('#image-row' + row).remove()
$('#albums').children('.image_111').remove()
for (var j = 0; j < arr_product_img.length; j++) {
for (var k = 0; k < arr_product_img[j].length; k++) {
var tmp_html = '<input type="hidden" class="image_111" name="arr_product_img[' + j + '][]" value="' + arr_product_img[j][k] + '">'
$('#albums').append(tmp_html)
}
}
}
/*二级列表主图*/
var product_row = "<?php echo '0';?>"
function addProduct() {
var sltclrOption = '<select class="form-control" name="product_image[' + product_row + '][image_color]"><option value="">请选择</option>'
for (clroption in selectColorObj) {
sltclrOption += '<option value="' + clroption + '">' + selectColorObj[clroption] + '</option>'
}
sltclrOption += '</select>'
var html = '<tr id="product_row' + product_row + '">'
html +=
' <td class="text-left"><a href="" id="thumb-two-image' +
product_row +
'"data-toggle="image" data-folder="' +
filePath +
'" class="img-thumbnail"><img class="img-responsive" src="/uploads/nopic.jpg"/></a><input type="hidden" name="product_product[' +
product_row +
'][image_url]" value="" id="input-two-image' +
product_row +
'"/></td>'
html += ' <td class="text-right">' + sltclrOption + '</td>'
//html += ' <td class="text-right"><input type="hidden" name="product_product[' + product_row + '][image_color]" value="" id="input-two-color-image' + product_row + '"/></td>';
//html += ' <td class="text-right"><input type="text" name="product_product[' + product_row + '][image_bkcolor]" value="" placeholder="颜色" class="form-control" size="2"/></td>';
html +=
' <td class="text-right"><input type="text" name="product_product[' +
product_row +
'][image_desc]" value="" placeholder="描述" class="form-control" size="2"/></td>'
html +=
' <td class="text-left"><button type="button" onclick="$(\'#product_row' +
product_row +
'\').remove();" title="删除" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>'
html += '</tr>'
$('#product tbody').append(html)
product_row++
}
/*爆款主图*/
var bkimg_row = "<?php echo '0';?>"
function addBkimg() {
var html = '<tr id="bkimg_row' + bkimg_row + '">'
html +=
' <td class="text-left"><a href="" id="thumb-bk-image' +
bkimg_row +
'"data-toggle="image" data-folder="' +
filePath +
'" class="img-thumbnail"><img class="img-responsive" src="/uploads/nopic.jpg"/></a><input type="hidden" name="bkimg_row[' +
bkimg_row +
'][image_url]" value="" id="input-bk-image' +
bkimg_row +
'"/></td>'
// html += ' <td class="text-right">' + sltclrOption + '</td>';
//html += ' <td class="text-right"><a href="" id="thumb-bk-color-image' + bkimg_row + '"data-toggle="image" data-folder="' + filePath + '" class="img-thumbnail"><img class="img-responsive" src="/uploads/nopic.jpg"/></a><input type="hidden" name="bkimg_row[' + bkimg_row + '][image_color]" value="" id="input-bk-color-image' + bkimg_row + '"/></td>';
html +=
' <td class="text-right"><input type="text" name="bkimg_row[' +
bkimg_row +
'][image_bkcolor]" value="" placeholder="颜色" class="form-control" size="2"/></td>'
html +=
' <td class="text-right"><input type="text" name="bkimg_row[' +
bkimg_row +
'][image_desc]" value="" placeholder="颜色描述" class="form-control" size="2"/></td>'
/* html += ' <td class="text-right"><input type="text" name="bkimg_row[' + bkimg_row + '][image_desc]" value="" placeholder="描述" class="form-control" size="2"/></td>';*/
html +=
' <td class="text-left"><button type="button" onclick="$(\'#bkimg_row' +
bkimg_row +
'\').remove();" title="删除" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>'
html += '</tr>'
$('#bkimg tbody').append(html)
bkimg_row++
}
var dltoption,
selectTypeObj = JSON.parse('<?php echo json_encode(config("product_dltype"));?>')
var dl_row = "<?php echo '0';?>"
function addDl() {
var sltdltOption = '<select class="form-control" name="product_dl[' + dl_row + '][dl_type]">'
for (dltoption in selectTypeObj) {
sltdltOption += '<option value="' + dltoption + '">' + selectTypeObj[dltoption] + '</option>'
}
sltdltOption += '</select>'
var html = '<tr id="dl-row' + dl_row + '" draggable="true">'
html +=
' <td class="text-left"><div class="input-group"><input type="text" class="form-control" name="product_dl[' +
dl_row +
'][dl_url]" value="" id="input-dl' +
dl_row +
'"><span class="input-group-btn"><button class="btn btn-primary" type="button" onclick="webuploader_modal(\'input-dl' +
dl_row +
"', '', 'download', 'file', 'file_call_back')\"><i class=\"fa fa-fw fa-download\"></i></button></span></div></td>"
html += ' <td class="text-right">' + sltdltOption + '</td>'
html +=
' <td class="text-right"><input type="text" name="product_dl[' +
dl_row +
'][dl_sort]" value="" placeholder="排序" class="form-control" size="2"/></td>'
html +=
' <td class="text-right"><input type="text" name="product_dl[' +
dl_row +
'][dl_name]" value="" placeholder="名称" class="form-control" size="2"/></td>'
html +=
' <td class="text-left"><button type="button" onclick="$(\'#dl-row' +
dl_row +
'\').remove();" title="删除" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>'
html += '</tr>'
$('#dls tbody').append(html)
dl_row++
$('.dls_list').sortable({
// cursor: "move",
items: 'tr', //仅仅是li能够拖动
opacity: 0.7, //拖动时透明度为0.6
revert: true, //释放时,添加动画
update: function () {
//更新排序之后
//changeAlbumImagesSort();
}
})
}
var related_row = "<?php echo '0';?>"
var related_list = []
var addRelated = function (id, title) {
console.log('add: ', id)
if (inArray(id, related_list) === false) {
var html = '<tr id="related-row_' + id + '" draggable="true">'
html +=
' <td class="text-left" draggable="true"><p class="form-control-static">' +
title +
'</p><input type="hidden" name="product_related[' +
related_row +
'][related_product_id]" value="' +
id +
'"/></td>'
html +=
' <td class="text-right" draggable="true"><input type="text" name="product_related[' +
related_row +
'][related_sort]" value="" placeholder="排序" class="form-control" size="2"/></td>'
html +=
' <td class="text-right" draggable="true"><input type="text" name="product_related[' +
related_row +
'][related_desc]" value="" placeholder="相关说明" class="form-control" size="2"/></td>'
html +=
' <td class="text-left" draggable="true"><button type="button" onclick="delRelated(\'' +
id +
'\')" title="删除" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>'
html += '</tr>'
$('#relateds tbody').append(html)
related_list.push(id)
related_row++
}
$('.related_list').sortable({
// cursor: "move",
items: 'tr', //仅仅是li能够拖动
opacity: 0.7, //拖动时透明度为0.6
revert: true, //释放时,添加动画
update: function () {
//更新排序之后
//changeAlbumImagesSort();
}
})
}
var delRelated = function (id) {
console.log('del: ', id)
// var isin = inArray(id,related_list);
var index = related_list.indexOf(id)
if (index > -1) {
related_list.splice(index, 1)
}
$('#related-row_' + id).remove()
}
function inArray(need, array) {
if (typeof array != 'object') {
return false
}
var index
for (index in array) {
if (index == need) {
return index
}
}
return false
}
var desc_row = '<?php echo "0";?>'
function addDesc() {
html = '<tr id="desc-row' + desc_row + '">'
html +=
' <td class="text-left"><input type="text" name="product_desc[' +
desc_row +
'][desc_title]" value="" placeholder="标题" class="form-control" size="2"/></td>'
html +=
' <td class="text-left"><input type="text" name="product_desc[' +
desc_row +
'][desc_desc]" value="" placeholder="详情" class="form-control" size="2"/></td>'
html +=
' <td class="text-left"><button type="button" onclick="$(\'#desc-row' +
desc_row +
'\').remove();" title="删除" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>'
html += '</tr>'
$('#descs tbody').append(html)
desc_row++
}
var view_row = '<?php echo "0";?>'
//属性去重
function quchong(array) {
var temp = [] //一个新的临时数组
for (var i = 0; i < array.length; i++) {
if (temp.indexOf(array[i]) == -1) {
temp.push(array[i])
}
}
return temp
}
//相册图片
var product_attrs = []
function addAlbum() {
var inputFeed = []
$("input[name='product_attr[]']").each(function () {
// 在这里可以对每个input元素执行相应的操作
inputFeed.push($(this).val())
})
var htmlHeader = ' <tr><th class="text-left" width="30%">图片</th>'
var html = '<tr id="image-row' + image_row + '">'
html +=
' <td class="text-left "><ul class="listbox"><li id="thumb-image' +
image_row +
'" draggable="true" data-toggle="image" data-folder="' +
filePath +
'" class="img-thumbnail"><img draggable="true" class="img-responsive input-image' +
image_row +
'" src="/uploads/nopic.jpg"/></li></td>'
inputFeed.forEach(function (atrVal, atrKey) {
if (atrVal) {
var sltclrOption = '<select class="form-control" name="product_image[' + image_row + '][type][' + atrKey + ']"><option value="">请选择</option>'
for (clroption in selectColorObj) {
sltclrOption += '<option value="' + clroption + '">' + selectColorObj[clroption] + '</option>'
}
sltclrOption += '</select>'
if (atrVal.toLowerCase() == 'color' || atrVal.toLowerCase() == '颜色') {
html += ' <td class="text-right attr_row album_attr" data-type="' + atrVal + '">' + sltclrOption + '</td>'
} else {
html +=
' <td class="text-right attr_row album_attr" data-type="' +
atrVal +
'"><input type="text" name="product_image[' +
image_row +
'][type][' +
atrKey +
']" value="" class="form-control" size="2"/></td>'
}
//html += ' <td class="text-right attr_row" data-type="' + atrVal + '"><input type="text" name="product_image[' + image_row + '][type][' + atrKey + ']" value="" class="form-control" size="2"/></td>';
html +=
' <td class="text-right attr_row" data-type="' +
atrVal +
'"><input type="text" name="product_image[' +
image_row +
'][sort][' +
atrKey +
']" value="" class="form-control" size="2"/></td>'
htmlHeader += '<th class="text-center" width="10%" data-type="' + atrVal + '">' + atrVal + '</th>'
htmlHeader += '<th class="text-center" width="8%" data-type="' + atrVal + '">' + atrVal + '排序</th>'
}
})
html +=
' <td class="text-right"><input type="text" name="product_image[' +
image_row +
'][sku]" value="" placeholder="SKU" class="form-control form-sku" size="2"/></td>'
html +=
' <td class="text-left"><button type="button" onclick="remove_imgs(' +
image_row +
');" title="删除" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>'
html += '</tr>'
htmlHeader += '<th class="text-center" width="10%">SKU</th>'
htmlHeader += '<th class="text-left" width="5%">操作</th><tr> '
$('#albums thead').html(htmlHeader)
$('#albums tbody').append(html)
image_rows.push(image_row)
image_row++
$('.listbox').sortable({
// cursor: "move",
items: 'li', //仅仅是li能够拖动
opacity: 0.7, //拖动时透明度为0.6
revert: true, //释放时,添加动画
update: function () {
//更新排序之后
//console.log('*********');
//alert($(this).sortable("toArray"));
//$(this).sortable("toArray");
changeAlbumImagesSort()
}
})
}
function changeAlbumImagesSort() {
var productImages = []
$('[id^="image-row"]').each(function () {
var rowIds = $(this).attr('id')
var rowID = rowIds.replace('image-row', '')
var feed = []
var elementImgs = $(this).find('img')
elementImgs.each(function () {
feed.push($(this).attr('src'))
})
productImages.push(feed)
})
$('#albums').children('.image_111').remove()
for (var j = 0; j < productImages.length; j++) {
for (var k = 0; k < productImages[j].length; k++) {
var tmp_html = '<input type="hidden" class="image_111" name="arr_product_img[' + j + '][]" value="' + productImages[j][k] + '">'
$('#albums').append(tmp_html)
}
}
}
//调整相册属性数据项
function changeAlbumAttribute(option,typeIndex,attrValue, diffAttr){
$('[id^="image-row"]').each(function(){
var rowId = $(this).attr('id');
var rowSort = rowId.replace("image-row",'');
var elements = $(this).find('.attr_row');
var html = '';
var addHtml = '';
if(option == 'delete'){
console.log('Del' + attrValue);
$(this).find('[data-type="'+ attrValue +'"]').remove();
$(this).find('[data-type="'+ attrValue +'"]').remove();
}
else{
if(attrValue){
var sltclrOption = '<select class="form-control" name="product_image[' + rowSort + '][type][' + typeIndex + ']"><option value="">请选择</option>';
for (clroption in selectColorObj) {
sltclrOption += '<option value="' + clroption + '">' + selectColorObj[clroption] + '</option>';
}
sltclrOption += '</select>';
if(attrValue.toLowerCase()== 'color' || attrValue.toLowerCase()== '颜色'){
html += sltclrOption;
addHtml += ' <td class="text-right attr_row album_attr" data-type="' + attrValue + '">'+ sltclrOption +'</td>';
}
else{
html += ' <input type="text" data-type="attribute" name="product_image[' + rowSort + '][type][' + typeIndex + ']" value="" class="form-control" size="2"/>';
addHtml += ' <td class="text-right attr_row album_attr" data-type="' + attrValue + '"><input type="text" data-type="attribute" name="product_image[' + rowSort + '][type][' + typeIndex + ']" value="" class="form-control" size="2"/></td>';
}
var html2= ' <td class="text-right attr_row" data-type="' + attrValue + '"><input type="text" data-type="sort" name="product_image[' + rowSort + '][sort][' + typeIndex + ']" value="" class="form-control" size="2"/></td>';
addHtml += ' <td class="text-right attr_row" data-type="' + attrValue + '"><input type="text" data-type="sort" name="product_image[' + rowSort + '][sort][' + typeIndex + ']" value="" class="form-control" size="2"/></td>';
}
if(option == 'add'){
//console.log(((typeIndex+1)*2-1) + '---Add----');
$(this).find('td:eq('+ ((typeIndex+1)*2-2) +')').after(addHtml);
}
else{
//console.log(diffAttr + 'diff');
$(this).find('.album_attr[data-type="'+ diffAttr +'"]').html(html);
$(this).find('[data-type="'+ diffAttr +'"]').attr('data-type',attrValue);
}
}
//console.log(typeIndex +'++++'+attrValue);
/*if(diffAttr){
console.log(diffAttr + 'diff');
//console.log(diffAttr);
var element =$(this).find('[data-type="'+ diffAttr +'"]');
if(attrValue){
element.data('type',attrValue);
console.log('Update');
$(this).find('.album_attr[data-type="'+ diffAttr +'"]').html(html);
$(this).find('[data-type="'+ diffAttr +'"]').attr('data-type',attrValue);
//console.log(html);
}
else{
console.log('Del');
$(this).find('[data-type="'+ diffAttr +'"]').remove();
$(this).find('[data-type="'+ diffAttr +'"]').remove();
}
//console.log('diff feed');
//$(this).find('td:eq('+ (elements.length) +')').after(html);
}
else{
console.log(((typeIndex+1)*2-1) + '---Add----');
/*if(elements.length>1){
//console.log(elements.length);
$(this).find('td:eq('+ ((typeIndex+1)*2-1) +')').attr('data-type',attrValue);
$(this).find('td:eq('+ ((typeIndex+1)*2-1) +')').html(html);
$(this).find('td:eq('+ ((typeIndex+1)*2) +')').attr('data-type',attrValue);
//$(this).find('td:eq('+ ((typeIndex+1)*2) +')').html(html2);
}else{
console.log(0);
$(this).find('td:eq(0)').after(html);
}
$(this).find('td:eq('+ ((typeIndex+1)*2-2) +')').after(addHtml);
}*/
});
}
function changeMultAlbum(object){
//获取当前所有属性
var attrValue = $(object + ' input').val();
var rowIndex = object.replace("#attr_row",'');
var inputFeed = [];
var product_attrs = [];
$("input[name='product_attr[]']").each(function (index) {
// 在这里可以对每个input元素执行相应的操作
if($(this).val()){
inputFeed.push($(this).val());
}
});
product_attr = quchong(inputFeed);
console.log(inputFeed);
console.log('************');
console.log(product_attr);
$(".attr_column").each(function (index) {
// 在这里可以对每个input元素执行相应的操作
product_attrs.push($(this).data('type').toString());
});
console.log('Old');
console.log(product_attrs);
//属性存在重复数据
if(product_attr.length == inputFeed.length) {
var htmlHeader = ' <tr><th class="text-left" width="30%">图片</th>';
inputFeed.forEach(function(atrVal,atrKey) {
if(atrVal){
htmlHeader += '<th class="text-center attr_column attr_' + atrVal + '" width="10%" data-type="' + atrVal + '">' + atrVal + '</th>';
htmlHeader += '<th class="text-center sort_' + atrVal + '" width="8%" data-type="' + atrVal + '">' + atrVal + '排序</th>';
}
});
//计算新旧属性的差集
var diffAttr = product_attrs.filter(function(v){ return product_attr.indexOf(v) == -1 });
console.log('---DiffAttr---');
console.log(diffAttr);
//判断当前属性是否存在
var typeIndex = $.inArray(attrValue, product_attrs);
if(product_attr.length == quchong(product_attrs).length) {
//替换指定列
var typeOldIndex = $.inArray(diffAttr[0], product_attrs);
changeAlbumAttribute('update',rowIndex,attrValue, diffAttr[0]);
console.log(rowIndex + '==update=>' + attrValue);
}
else if(product_attr.length < quchong(product_attrs).length){
console.log('==delete=>' + diffAttr[0]);
changeAlbumAttribute('delete',0,diffAttr[0]);
}
else{
//判断当前属性下标
var typeNewIndex = $.inArray(attrValue, product_attr);
changeAlbumAttribute('add',typeNewIndex,attrValue);
console.log(typeNewIndex + '==add => ' + attrValue);
}
htmlHeader += '<th class="text-center" width="10%">SKU</th>';
htmlHeader += '<th class="text-left" width="5%">操作</th><tr> ';
$('#albums thead').html(htmlHeader);
}
else{
console.log(product_attr.length +'=='+ inputFeed.length);
alert("属性重复,请修改重复属性名称重试");
}
product_attrs = product_attr;
}
$(function () {
$('#btn-product-video').click(function (e) {
//var param = {};
//param.callback = $(this).data('callback');
//var $element = $(this).parent().parent();
//param.inputid = $element.find('input[type=hidden]').attr('id');
//param.titleid = $element.find('input[type=text]').attr('id');
$('#modal-video').remove()
$.ajax({
url: "<?php echo url('/admin/video/modallists');?>?inputid=videopath",
dataType: 'html',
success: function (html) {
$('body').append('<div id="modal-video" class="modal fade">' + html + '</div>')
$('#modal-video').modal({ show: true, backdrop: 'static' })
}
})
})
})
var attr_row = '<?php echo "0";?>'
//添加属性
function addMultiAttribute() {
var html = '<tr id="attr_row' + attr_row + '">'
html +=
' <td class="text-right "><input type="text" name="product_attr[]" onblur="changeMultAlbum(\'#attr_row' +
attr_row +
'\')" value="" placeholder="属性名称" class="form-control product_attr" size="2"/></td>'
html +=
' <td class="text-center"><button type="button" onclick="delAlbumAttributeColumn(\'#attr_row' +
attr_row +
'\')" title="删除" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>'
html += '</tr>'
$('#multi-attribute tbody').append(html)
attr_row++
}
//删除相册属性列+排序
function delAlbumAttributeColumn(object) {
var delValue = $(object + ' input').val()
if (delValue) {
//删除指定列
$('#albums').find('[data-type="' + delValue + '"]').remove();
$('#albums').find('[data-type="' + delValue + '"]').remove();
}
$(object).remove();
}
</script>
<script>
$(function () {
$('.business-button,.busniess-joinus-btn').click(function () {
$('.marsk-container').show()
})
})
/*弹出框关闭*/
$(function () {
$('.business-close').click(function () {
$('.marsk-container').hide()
})
})
</script>