ThinkAdmin/application/store/view/goods/form.html

{extend name='admin@public/content'}

{block name="content"}
<form onsubmit="return false;" action="{:request()->url()}" data-auto="true" method="post" id="ProductForm" class='form-horizontal layui-form padding-top-20'>

    <!--{if !empty($brands)}-->
    <div class="form-group">
        <label class="col-sm-2 control-label">商品品牌</label>
        <div class='col-sm-8'>
            <select required class="layui-select full-width" name="brand_id">
                {foreach $brands as $brand}
                <!--{eq name='$brand.id' value='$vo.brand_id|default=0'}-->
                <option selected="selected" value="{$brand.id}">{$brand.brand_title}</option>
                <!--{else}-->
                <option value="{$brand.id}">{$brand.brand_title}</option>
                <!--{/eq}-->
                {/foreach}
            </select>
        </div>
    </div>
    <!--{/if}-->

    <!--{if !empty($cates)}-->
    <div class="form-group">
        <label class="col-sm-2 control-label">商品分类</label>
        <div class='col-sm-8 text-top'>
            <select required class="layui-select full-width" name="cate_id">
                {foreach $cates as $cate}
                <!--{if isset($vo.cate_id) and $cate.id eq $vo.cate_id}-->
                <option selected value="{$cate.id}">{$cate.spl|raw}{$cate.cate_title}</option>
                <!--{else}-->
                <option value="{$cate.id}">{$cate.spl|raw}{$cate.cate_title}</option>
                <!--{/if}-->
                {/foreach}
            </select>
        </div>
    </div>
    <!--{/if}-->

    <div class="form-group">
        <label class="col-sm-2 control-label">商品名称</label>
        <div class='col-sm-8'>
            <input name="goods_title" required value="{$vo.goods_title|default=''}" class="layui-input" title="请输入商品名称" placeholder="请输入商品名称">
        </div>
    </div>

    {if !empty($tags)}
    <div class="form-group">
        <label class="col-sm-2 control-label">商品标签</label>
        <div class='col-sm-8'>
            <div class="background-item">
                {foreach $tags as $tag}
                <label class="nowrap margin-right-10 line-height-18">
                    <!--{if isset($vo.tags_id) && in_array($tag.id,$vo.tags_id)}-->
                    <input type="checkbox" value="{$tag.id}" name="tags_id[]" checked="checked" lay-ignore>
                    <!--{else}-->
                    <input type="checkbox" value="{$tag.id}" name="tags_id[]" lay-ignore>
                    <!--{/if}-->
                    {$tag.tags_title}
                </label>
                {/foreach}
            </div>
        </div>
    </div>
    {/if}

    <div class="form-group">
        <label class="col-sm-2 control-label label-required">商品图片</label>
        <div class='col-sm-8'>
            <table class="layui-table background-item margin-none" lay-size="sm" lay-skin="nob">
                <thead>
                <tr>
                    <td>商品LOGO</td>
                    <td>商品图片</td>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td class="text-top" style="width:100px">
                        <input type="hidden" name="goods_logo" value="{$vo.goods_logo|default=''}">
                    </td>
                    <td class="text-top">
                        <input type="hidden" name="goods_image" value="{$vo.goods_image|default=''}">
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- 普通商品及积分商品 开始 -->
    <div class="form-group">
        <label class="col-sm-2 control-label">商品规格</label>
        <div class='col-sm-8'>
            <select required class="layui-select full-width block" name="spec_id" lay-ignore>
                {foreach $specs as $spec}
                {php}$param=str_replace('"',"'",$spec['spec_param']);{/php}
                <!--{eq name='spec.id' value='$vo.spec_id|default=0'}-->
                <option data-param="{$param}" selected="selected" value="{$spec.id}">{$spec.spec_title}</option>
                <!--{else}-->
                <option data-param="{$param}" value="{$spec.id}">{$spec.spec_title}</option>
                <!--{/eq}-->
                {/foreach}
            </select>
            <table class="layui-table notevent" lay-size="sm" ng-if="specs.length>0">
                <tr>
                    <th>可选规格</th>
                    <th>规格内容</th>
                </tr>
                <tr ng-repeat="x in specs">
                    <td ng-bind="x.name"></td>
                    <td>
                        <label ng-repeat="m in x.param" class="nowrap margin-right-10 line-height-18">
                            <input data-spec="{{x.name}}_{{m.value}}" ng-model="m.checked" class="inline-block" type="checkbox" lay-ignore>
                            <span ng-bind="m.value"></span>
                        </label>
                    </td>
                </tr>
            </table>
            <table class="layui-table notevent" lay-size="sm">
                <thead>
                <tr>
                    <th>商品规格</th>
                    <th>市场价格</th>
                    <th>销售价格</th>
                    <th>规格状态</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-class="x.status?'':'layui-bg-gray'" ng-repeat="x in specdata">
                    <td class="nowrap">
                        <input type="hidden" name="goods_spec[]" value="{{x.spec_name}}">
                        <span ng-repeat="a in x.spec_attrs">
                            <span class="layui-badge layui-bg-blue" ng-bind="a.name"></span>
                            <span ng-if="b" class="layui-badge layui-bg-green" ng-repeat="b in a.value" ng-bind="b"></span>
                        </span>
                    </td>
                    <td class="price-input-td">
                        <input onblur="this.value=(parseFloat(this.value)||0).toFixed(2)" class="layui-input" placeholder="0.00" name="market_price[]" value="{{x.market_price}}">
                    </td>
                    <td class="price-input-td">
                        <input onblur="this.value=(parseFloat(this.value)||0).toFixed(2)" class="layui-input" placeholder="0.00" name="selling_price[]" value="{{x.selling_price}}">
                    </td>
                    <td>
                        <label class="nowrap line-height-18">
                            <input type="hidden" name="spec_status[]" value="{{x.status?1:0}}">
                            <input ng-checked="x.status" ng-model="x.status" value="1" lay-ignore class="inline-block" type="checkbox"/> 启用
                        </label>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!-- 普通商品及积分商品 结束 -->

    <div class="form-group">
        <label class="col-sm-2 control-label">视频展示</label>
        <div class='col-sm-8'>
            <div class="row">
                <div class="col-sm-10 padding-right-0">
                    <input style="border-right:none" name="goods_video" value="{$vo.goods_video|default=''}" class="layui-input" title="请输入链接或上传视频展示文件" placeholder="请输入链接或上传视频展示文件">
                </div>
                <div class="col-sm-2 padding-left-0">
                    <button data-file="one" data-type="mp4" data-field="goods_video" type="button" class="layui-btn layui-btn-sm" style="height:38px;line-height:38px;width:100%">上传视频文件</button>
                </div>
            </div>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">展示描述</label>
        <div class='col-sm-8'>
            <textarea class="layui-textarea" name="goods_desc" placeholder="请输入展示描述">{$vo.goods_desc|default=''}</textarea>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label label-required">商品内容</label>
        <div class='col-sm-8'>
            <textarea name="goods_content">{$vo.goods_content|default=''|htmlspecialchars_decode}</textarea>
        </div>
    </div>

    <div class="hr-line-dashed"></div>

    <div class="col-sm-7 col-sm-offset-2">
        <div class="layui-form-item text-center">
            {if !empty($vo.id)}<input type="hidden" name="id" value="{$vo.id}">{/if}
            <button class="layui-btn" type="submit">保存配置</button>
            <button class="layui-btn layui-btn-danger" type='button' onclick="window.history.back()">取消编辑</button>
        </div>
    </div>

</form>

<script>
    require(['jquery', 'ckeditor', 'angular'], function () {
        window.form.render();
        window.createEditor('[name="goods_content"]', {height: 500});
        var app = angular.module("ProductForm", []).run(callback);
        angular.bootstrap(document.getElementById(app.name), [app.name]);

        function callback($rootScope) {
            // 绑定规格列表
            $rootScope.specs = [];
            // 规格默认数据
            var specdata = JSON.parse('{$vo.list|default=[]|json_encode=###,256|raw}');
            // 单图片上传处理
            $('#ProductForm [name="goods_logo"]').uploadOneImage();
            // 多图片上传处理
            $('#ProductForm [name="goods_image"]').uploadMultipleImage();
            // 规格显示切换
            $('#ProductForm').on('click', '[data-spec]', applySpecData);
            // 商品规格切换
            $('#ProductForm').on('change', '[name="spec_id"]', function () {
                var specs = eval(this.options[this.selectedIndex].getAttribute('data-param'));
                for (var i in specs) {
                    specs[i].param = [];
                    var values = specs[i].value.split(' ');
                    for (var j in values) {
                        specs[i].param.push({
                            name: specs[i].name, value: values[j],
                            checked: getSpecStatus(specs[i].name, values[j])
                        });
                    }
                }
                $rootScope.$apply(function () {
                    $rootScope.specs = specs;
                    setTimeout(applySpecData, 10);
                });
            }).find('[name="spec_id"]').trigger('change');

            // 规格属性切换
            function applySpecData() {
                var params = {};
                for (var i in $rootScope.specs) {
                    var isChecked = false;
                    for (var j in $rootScope.specs[i].param) {
                        if ($rootScope.specs[i].param[j].checked) {
                            isChecked = true;
                            var name = $rootScope.specs[i].param[j].name;
                            var value = $rootScope.specs[i].param[j].value;
                            (params[name] || (params[name] = [])).push({name: name, value: value});
                        }
                    }
                    if (!isChecked) {
                        $rootScope.specs[i].param[0].checked = true;
                        var name = $rootScope.specs[i].param[0].name;
                        var value = $rootScope.specs[i].param[0].value;
                        (params[name] || (params[name] = [])).push({name: name, value: value});
                    }
                }
                $rootScope.$apply(function () {
                    $rootScope.specdata = DataArray.render(params);
                });
            }

            // 获取规格选择状态
            function getSpecStatus(name, spec) {
                for (var i in specdata) {
                    if (specdata[i].goods_spec.indexOf(name + ':' + spec) > -1) {
                        return true;
                    }
                }
                return false;
            }

            // 数据处理
            var DataArray = new function () {
                // 编译生成规格数据
                this.render = function (data) {
                    var specs = [], list = [];
                    for (var i in data) {
                        specs = this.joinArray(data[i], specs, i);
                    }
                    (specs.length < 1) && (specs = ['default:default']);
                    for (var i in specs) {
                        var specName = specs[i];
                        var specTitle = (specName === 'default:default') ? '默认规格' : specName.replace(/,/ig, ';').replace(/:/ig, ':');
                        var specAttrs = [], lines = specTitle.split(';');
                        for (var j in lines) {
                            var line = lines[j].split(':');
                            specAttrs.push({name: line[0], value: (line[1] || '').split(',')});
                        }
                        list.push({
                            spec_name: specName, spec_title: specTitle, spec_attrs: specAttrs,
                            market_price: parseFloat(this.getData(specs[i], 'market_price') || '0').toFixed(2),
                            selling_price: parseFloat(this.getData(specs[i], 'selling_price') || '0').toFixed(2),
                            status: this.getData(specName, 'status') !== '0'
                        });
                    }
                    return list;
                };
                // 读取规格默认数据
                this.getData = function (spec, field) {
                    for (var i in specdata) {
                        if (specdata[i].goods_spec === spec) {
                            return specdata[i][field] || '0';
                        }
                    }
                    return '1';
                };
                // 数组交叉计算
                this.joinArray = function (item, list, pk) {
                    var _list = [];
                    for (var i in item) {
                        if (list.length > 0) {
                            for (var j in list) {
                                _list.push(list[j] + ',' + pk + ':' + item[i].value);
                            }
                        } else {
                            _list.push(pk + ':' + item[i].value);
                        }
                    }
                    return _list;
                }
            };
        }
    });
</script>
{/block}

{block name="style"}
<style>

    .background-item {
        padding: 15px;
        background: #efefef;
    }

    .background-item thead tr {
        background: #e0e0e0
    }

    .price-input-td {
        padding: 0 !important;
    }

    .price-input-td:before {
        margin: 4px;
        width: 35px;
        height: 22px;
        content: "金额";
        line-height: 20px;
        text-align: center;
        position: absolute;
        background: #e2e2e2;
    }

    .price-input-td input {
        height: 30px;
        padding-left: 50px;
        border: none !important;
    }
</style>
{/block}