zxhxx
/
tl


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="{__FRAME_PATH}css/font-awesome.min.css" rel="stylesheet">
    <link href="{__ADMIN_PATH}plug/umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="{__ADMIN_PATH}plug/umeditor/third-party/jquery.min.js"></script>
    <script type="text/javascript" src="{__ADMIN_PATH}plug/umeditor/third-party/template.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="{__ADMIN_PATH}plug/umeditor/umeditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="{__ADMIN_PATH}plug/umeditor/umeditor.min.js"></script>
    <script type="text/javascript" src="{__ADMIN_PATH}plug/umeditor/lang/zh-cn/zh-cn.js"></script>
    <link rel="stylesheet" href="/static/plug/layui/css/layui.css">
    <script src="/static/plug/layui/layui.js"></script>
    <script src="{__PLUG_PATH}vue/dist/vue.min.js"></script>
    <script src="/static/plug/axios.min.js"></script>
    <script src="{__MODULE_PATH}widget/aliyun-oss-sdk-4.4.4.min.js"></script>
    <script src="{__MODULE_PATH}widget/cos-js-sdk-v5.min.js"></script>
    <script src="{__MODULE_PATH}widget/qiniu-js-sdk-2.5.5.js"></script>
    <script src="{__MODULE_PATH}widget/plupload.full.min.js"></script>
    <script src="{__MODULE_PATH}widget/videoUpload.js"></script>
    <style>
        .layui-form-item {
            margin-bottom: 0px;
        }

        .pictrueBox {
            display: inline-block !important;
        }

        .pictrue {
            width: 60px;
            height: 60px;
            border: 1px dotted rgba(0, 0, 0, 0.1);
            margin-right: 15px;
            display: inline-block;
            position: relative;
            cursor: pointer;
        }

        .pictrue img {
            width: 100%;
            height: 100%;
        }

        .upLoad {
            width: 58px;
            height: 58px;
            line-height: 58px;
            border: 1px dotted rgba(0, 0, 0, 0.1);
            border-radius: 4px;
            background: rgba(0, 0, 0, 0.02);
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .rulesBox {
            display: flex;
            flex-wrap: wrap;
            margin-left: 10px;
        }

        .layui-tab-content {
            margin-top: 15px;
        }

        .ml110 {
            margin: 18px 0 4px 110px;
        }

        .rules {
            display: flex;
        }

        .rules-btn-sm {
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            width: 109px;
        }

        .rules-btn-sm input {
            width: 79% !important;
            height: 84% !important;
            padding: 0 10px;
        }

        .ml10 {
            margin-left: 10px !important;
        }

        .ml40 {
            margin-left: 40px !important;
        }

        .closes {
            position: absolute;
            left: 86%;
            top: -18%;
        }
        .red {
            color: red;
        }
        .layui-input-block .layui-video-box{
            width: 22%;
            height: 180px;
            border-radius: 10px;
            background-color: #707070;
            margin-top: 10px;
            position: relative;
            overflow: hidden;
        }
        .layui-input-block .layui-video-box i{
            color: #fff;
            line-height: 180px;
            margin: 0 auto;
            width: 50px;
            height: 50px;
            display: inherit;
            font-size: 50px;
        }
        .layui-input-block .layui-video-box .mark{
            position: absolute;
            width: 100%;
            height: 30px;
            top: 0;
            background-color: rgba(0,0,0,.5);
            text-align: center;
        }
        .store_box{
            display: flex;
        }
        .info{
            color: #c9c9c9;
            padding-left: 10px;
            line-height: 30px;
        }
        #listDetial{
            height: 38px;
            line-height: 1.3;
            border-width: 1px;
            border-style: solid;
            padding:0 10px;
            background-color: #fff;
            border-radius: 2px;
            border-color: #D2D2D2!important;
            outline: 0;
            width: 100%;
            -webkit-appearance: none;
            transition: all .3s;
            -webkit-transition: all .3s;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<div class="layui-fluid">

    <div class="layui-row layui-col-space15"  id="app" v-cloak="">

        <div class="layui-card">

            <div class="layui-card-header">

                <span class="">{{id ? '商品修改': '商品添加' }}</span>
                <button style="margin-left: 20px" type="button" class="layui-btn layui-btn-primary layui-btn-xs" @click="goBack">返回列表</button>

            </div>

            <div class="layui-card-body">

                <form class="layui-form" action="" v-cloak="">

                    <div class="layui-tab layui-tab-brief" lay-filter="docTabBrief">

                        <ul class="layui-tab-title">

                            <li class="layui-this" lay-id='1'>基础信息</li>

                            <li lay-id='2'>商品详情</li>

                        </ul>

                        <div class="layui-tab-content">

                            <div class="layui-tab-item layui-show">

                                <div class="layui-row layui-col-space15">

                                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">

                                        <div class="grid-demo grid-demo-bg1">

                                            <div class="layui-form-item">

                                                <label class="layui-form-label">商品名称<i class="red">*</i></label>

                                                <div class="layui-input-block">

                                                    <input type="text" name="title" lay-verify="title" autocomplete="off"

                                                           placeholder="请输入商品名称" class="layui-input" v-model="formData.title" maxlength="100">

                                                </div>

                                            </div>

                                        </div>

                                    </div>

                                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">

                                        <div class="grid-demo grid-demo-bg1">

                                            <div class="layui-form-item">

                                                <label class="layui-form-label">单位</label>

                                                <div class="layui-input-block">

                                                    <input style="width: 40%" type="text" name="unit_name" lay-verify="title" autocomplete="off"

                                                           placeholder="请输入单位" class="layui-input" v-model="formData.unit_name">

                                                </div>

                                            </div>

                                        </div>

                                    </div>

                                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">

                                        <div class="grid-demo grid-demo-bg1">

                                            <div class="layui-form-item">

                                                <label class="layui-form-label">时间</label>

                                                <div class="layui-input-block">

                                                    <input style="width: 40%" type="text" name="unit_name" id="date" lay-verify="date" autocomplete="off"

                                                           placeholder="选择时间" class="layui-input" :value="formData.start_time+' - '+formData.stop_time" >

                                                </div>

                                            </div>

                                        </div>

                                    </div>

                                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">

                                        <div class="grid-demo grid-demo-bg1">

                                            <div class="layui-form-item">

                                                <label class="layui-form-label">商品封面图<i class="red">*</i></label>

                                                <div class="pictrueBox">

                                                    <div class="pictrue" v-if="formData.image" @click="uploadImage('image')">

                                                        <img :src="formData.image"></div>

                                                    <div class="upLoad" @click="uploadImage('image')" v-else>

                                                        <i class="layui-icon layui-icon-camera" class="iconfont"

                                                           style="font-size: 26px;"></i>

                                                    </div>

                                                </div>

                                            </div>

                                        </div>

                                    </div>

                                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">

                                        <div class="grid-demo grid-demo-bg1">

                                            <div class="layui-form-item">

                                                <label class="layui-form-label">商品轮播图<i class="red">*</i></label>

                                                <div class="pictrueBox pictrue" v-for="(item,index) in formData.images">

                                                    <img :src="item">

                                                    <i class="layui-icon closes" @click="deleteImage('images',index)">&#x1007</i>

                                                </div>

                                                <div class="pictrueBox">

                                                    <div class="upLoad" @click="uploadImage('images')"

                                                         v-if="formData.images.length <= rule.images.maxLength">

                                                        <i class="layui-icon layui-icon-camera" class="iconfont"

                                                           style="font-size: 26px;"></i>

                                                    </div>

                                                </div>

                                            </div>

                                        </div>

                                    </div>

                                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12" v-if="formData.spec_type == 1">

                                    </div>

                                </div>

                                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">

                                    <div class="grid-demo grid-demo-bg1">

                                        <div class="layui-form-item">

                                            <label class="layui-form-label">时间</label>

                                            <div class="layui-input-block">

                                                <input list="browsers" id="listDetial" v-model="formData.time_id">

                                                <datalist id="browsers">

                                                    <option v-for="ls in tempList" :value="ls.id">{{'开始时间：'+ls.time+' - 持续时间：'+ls.continued}}</option>
                                                </datalist>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-row layui-col-space15">

                                    <div class="layui-col-xs12 layui-col-sm4 layui-col-md4">

                                        <div class="grid-demo grid-demo-bg1">

                                            <div class="layui-form-item">

                                                <label class="layui-form-label">商品状态</label>

                                                <div class="layui-input-block">

                                                    <input type="radio" name="is_show" lay-filter="is_show" value="1" title="上架"

                                                           :checked="formData.is_show == 1 ? true : false">

                                                    <input type="radio" name="is_show" lay-filter="is_show" value="0" title="下架"

                                                           :checked="formData.is_show == 0 ? true : false">

                                                </div>

                                            </div>

                                        </div>

                                    </div>

                                    <div class="layui-col-xs12 layui-col-sm4 layui-col-md4">

                                        <div class="grid-demo grid-demo-bg1">

                                            <div class="layui-form-item">

                                                <label class="layui-form-label">热卖单品</label>

                                                <div class="layui-input-block">

                                                    <input type="radio" name="is_hot" lay-filter="is_hot" value="1" title="开启"

                                                           :checked="formData.is_hot == 1 ? true : false">

                                                    <input type="radio" name="is_hot" lay-filter="is_hot" value="0" title="关闭"

                                                           :checked="formData.is_hot == 0 ? true : false">

                                                </div>

                                            </div>

                                        </div>

                                    </div>

                                    <div class="layui-col-xs12 layui-col-sm4 layui-col-md4">

                                        <div class="grid-demo grid-demo-bg1">

                                            <div class="layui-form-item">

                                                <label class="layui-form-label">新人礼包</label>

                                                <div class="layui-input-block">

                                                    <input type="radio" name="is_news" lay-filter="is_news" value="1" title="开启"

                                                           :checked="formData.is_news == 1 ? true : false">

                                                    <input type="radio" name="is_news" lay-filter="is_news" value="0" title="关闭"

                                                           :checked="formData.is_news == 0 ? true : false">

                                                </div>

                                            </div>

                                        </div>

                                    </div>

                                </div>

                                <div class="layui-col-xs12 layui-col-sm4 layui-col-md4">

                                    <div class="grid-demo grid-demo-bg1">

                                        <div class="layui-form-item">

                                            <label class="layui-form-label">价格</label>

                                            <div class="layui-input-block">

                                                <input type="number" name="price" lay-verify="price"

                                                       autocomplete="off" placeholder="请输入价格" class="layui-input" v-model="formData.price">

                                            </div>

                                        </div>

                                    </div>

                                </div>

                                <div class="layui-col-xs12 layui-col-sm4 layui-col-md4">

                                    <div class="grid-demo grid-demo-bg1">

                                        <div class="layui-form-item">

                                            <label class="layui-form-label">成本</label>

                                            <div class="layui-input-block">

                                                <input type="number" name="cost" lay-verify="cost"

                                                       autocomplete="off" placeholder="请输入成本" class="layui-input" v-model="formData.cost">

                                            </div>

                                        </div>

                                    </div>

                                </div>

                                <div class="layui-col-xs12 layui-col-sm4 layui-col-md4">

                                    <div class="grid-demo grid-demo-bg1">

                                        <div class="layui-form-item">

                                            <label class="layui-form-label">原价</label>

                                            <div class="layui-input-block">

                                                <input type="number" name="ot_price" lay-verify="ot_price"

                                                       autocomplete="off" placeholder="请输入原价" class="layui-input" v-model="formData.ot_price">

                                            </div>

                                        </div>

                                    </div>

                                </div>

                                <div class="layui-col-xs12 layui-col-sm4 layui-col-md4">

                                    <div class="grid-demo grid-demo-bg1">

                                        <div class="layui-form-item">

                                            <label class="layui-form-label">库存</label>

                                            <div class="layui-input-block">

                                                <input type="number" name="stock" lay-verify="stock"

                                                       autocomplete="off" placeholder="请输入库存" class="layui-input" v-model="formData.stock">

                                            </div>

                                        </div>

                                    </div>

                                </div>

                                <div class="layui-col-xs12 layui-col-sm4 layui-col-md4">

                                    <div class="grid-demo grid-demo-bg1">

                                        <div class="layui-form-item">

                                            <label class="layui-form-label">可的积分</label>

                                            <div class="layui-input-block">

                                                <input type="number" name="give_integral" lay-verify="title"

                                                       autocomplete="off" placeholder="请输入可的积分" class="layui-input" v-model="formData.give_integral">

                                            </div>

                                        </div>

                                    </div>

                                </div>

                                <div class="layui-col-xs12 layui-col-sm4 layui-col-md4">

                                    <div class="grid-demo grid-demo-bg1">

                                        <div class="layui-form-item">

                                            <label class="layui-form-label">排序</label>

                                            <div class="layui-input-block">

                                                <input type="number" name="sort" lay-verify="title" autocomplete="off"

                                                       placeholder="请输入排序" class="layui-input" v-model="formData.sort">

                                            </div>

                                        </div>

                                    </div>

                                </div>

                            </div>

                            <div class="layui-tab-item">

                                <div class="layui-row layui-col-space15">

                                    <textarea type="text/plain" name="description" id="myEditor" style="width:100%;">{{formData.description}}</textarea>
                                </div>
                            </div>
                        </div>
                        <div class="layui-tab-content">

                            <div class="layui-row layui-col-space15">

                                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">

                                    <div class="grid-demo grid-demo-bg1">

                                        <div class="layui-form-item" v-if="id">

                                            <button class="layui-btn layui-btn-primary layui-btn-sm" id="submit" type="button" @click="handleSubmit()">保存</button>

                                            <button class="layui-btn layui-btn-primary layui-btn-sm" type="button" @click="back" v-if="layTabId != 1">上一步</button>

                                            <button class="layui-btn layui-btn-normal layui-btn-sm" type="button" v-if="layTabId != 3" @click="next">下一步</button>

                                        </div>

                                        <div class="layui-form-item" v-else>

                                            <button class="layui-btn layui-btn-primary layui-btn-sm" type="button" @click="back" v-if="layTabId != 1">上一步</button>

                                            <button class="layui-btn layui-btn-normal layui-btn-sm" type="button" @click="next" v-if="layTabId ==1">下一步</button>

                                            <button class="layui-btn layui-btn-normal layui-btn-sm" id="submit" type="button" v-if="layTabId == 2" @click="handleSubmit()">提交</button>

                                        </div>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </form>

            </div>

        </div>

    </div>

</div>

<script src="{__ADMIN_PATH}js/layuiList.js"></script>

<script>

    var id = {$id};

    new Vue({

        el: '#app',

        data: {

            id:id,

            //分类列表

            cateList: [],

            //运费模板

            tempList: [],

            upload:{

                videoIng:false

            },

            formData: {

                cate_id: [],

                temp_id: 0,

                commission:0,

                title: '',

                keyword: '',

                unit_name: '',

                postage: '',

                store_info: '',

                image: '',

                video_link: '',

                images: [],

                price: 0,

                cost: 0,

                ot_price: 0,

                stock: 0,

                spec_type: 0,

                attr: {

                    pic: '',

                    price: 0,

                    cost: 0,

                    ot_price: 0,

                    stock: 0,

                    bar_code: '',

                    weight: 0,

                    volume: 0,

                    brokerage: 0,

                    brokerage_two: 0,

                },

                where:{


                    data:''

                },

                attrs: [],

                description: '',

                ficti: 0,

                give_integral: 0,

                sort: 0,

                is_show: 1,

                is_hot: 0,

                is_benefit: 0,

                is_best: 0,

                is_news: 0,

                is_good: 0,

                is_sub:0,

                time_id:'',

                items: [

                    // {

                    //     value: '',

                    //     detailValue:'',

                    //     attrHidden:false,

                    //     detail:[]

                    // }

                ],

                activity:['秒杀','砍价','拼团'],

            },

            videoLink:'',

            //批量添加属性

            batchAttr:{

                pic: '',

                price: 0,

                cost: 0,

                ot_price: 0,

                stock: 0,

                bar_code: '',

                weight: 0,

                volume: 0,

            },

            //多属性header头

            formHeader:[],

            // 规格数据

            formDynamic: {

                attrsName: '',

                attrsVal: ''

            },

            brokerage:{

                brokerage: '',

                brokerage_two: '',

            },

            activity:{'秒杀':'#1E9FFF','砍价':'#189688','拼团':'#FEB900'},

            attr: [],//临时属性

            newRule: false,//是否添加新规则

            radioRule: ['is_sub','is_show', 'is_hot', 'is_benefit', 'is_news','is_good' ,'is_best', 'spec_type'],//radio 当选规则

            rule: { //多图选择规则

                images: {

                    maxLength: 5

                }

            },

            ruleList:[],

            ruleIndex:-1,

            progress: 0,

            um: null,//编译器实例化

            form: null,//layui.form

            layTabId: 1,

            ruleBool: id ? true : false,

        },

        watch:{

            'formData.is_sub':function (n) {

                if (n == 1) {

                    this.formHeader.push({title:'一级返佣(元)'});

                    this.formHeader.push({title:'二级级返佣(元)'});

                } else {

                    this.formHeader.pop();

                    this.formHeader.pop();

                }

            },

            'formData.spec_type':function (n) {

                if (n) {

                    this.render();

                }

            },

            // 'formData.image':function (n) {

            //     if(!this.batchAttr.pic){

            //         this.batchAttr.pic = n;

            //     }

            //     if(!this.formData.attr.pic){

            //         this.formData.attr.pic = n;

            //     }

            // }

        },

        methods: {

            back:function(){

                var that = this;

                layui.use(['element'], function () {

                    layui.element.tabChange('docTabBrief', that.layTabId == 1 ? 1 : parseInt(that.layTabId) - 1);

                });

            },

            next:function(){

                var that = this;

                layui.use(['element'], function () {

                    layui.element.tabChange('docTabBrief', that.layTabId == 3 ? 3 : parseInt(that.layTabId) + 1);

                });

            },

            goBack:function(){

                location.href = this.U({c:'ump.StoreWholesale',a:'index'});

            },

            U: function (opt) {

                var m = opt.m || 'admin', c = opt.c || window.controlle || '', a = opt.a || 'index', q = opt.q || '',

                    p = opt.p || {};

                var params = Object.keys(p).map(function (key) {

                    return key + '/' + p[key];

                }).join('/');

                var gets = Object.keys(q).map(function (key) {

                    return key+'='+ q[key];

                }).join('&');


                return '/' + m + '/' + c + '/' + a + (params == '' ? '' : '/' + params) + (gets == '' ? '' : '?' + gets);

            },

            /**

             * 提示

             * */

            showMsg: function (msg, success) {

                $('#submit').removeAttr('disabled').text('提交');

                layui.use(['layer'], function () {

                    layui.layer.msg(msg, success);

                });

            },

            addBrokerage:function(){

                if (this.brokerage.brokerage >= 0 && this.brokerage.brokerage_two >= 0){

                    var that = this;

                    this.$set(this.formData,'attrs',this.formData.attrs.map(function (item) {

                        item.brokerage = that.brokerage.brokerage;

                        item.brokerage_two = that.brokerage.brokerage_two;

                        return item;

                    }));

                } else {

                    return this.showMsg('请填写返佣金额在进行批量添加');

                }

            },

            batchClear:function(){

                this.$set(this,'batchAttr',{

                    pic: '',

                    price: 0,

                    cost: 0,

                    ot_price: 0,

                    stock: 0,

                    bar_code: '',

                    weight: 0,

                    volume: 0,

                });

            },

            /**

             * 批量添加

             * */

            batchAdd:function(){

                var that = this;

                this.$set(this.formData,'attrs',this.formData.attrs.map(function (item) {

                    if (that.batchAttr.pic) {

                        item.pic = that.batchAttr.pic;

                    }

                    if (that.batchAttr.price > 0){

                        item.price = that.batchAttr.price;

                    }

                    if (that.batchAttr.cost > 0){

                        item.cost = that.batchAttr.cost;

                    }

                    if (that.batchAttr.ot_price > 0){

                        item.ot_price = that.batchAttr.ot_price;

                    }

                    if (that.batchAttr.stock > 0){

                        item.stock = that.batchAttr.stock;

                    }

                    if (that.batchAttr.bar_code != ''){

                        item.bar_code = that.batchAttr.bar_code;

                    }

                    if (that.batchAttr.weight > 0){

                        item.weight = that.batchAttr.weight;

                    }

                    if (that.batchAttr.volume > 0){

                        item.volume = that.batchAttr.volume;

                    }

                    return item;

                }));


            },

            /**

             * 获取商品信息

             * */

            getProductInfo: function () {

                var that = this;

                that.requestGet(that.U({c:"ump.StoreWholesale",a:'get_product_info',q:{id:that.id}})).then(function (res) {

                    that.$set(that,'cateList',res.data.cateList);

                    that.$set(that,'tempList',res.data.time_id);

                    var productInfo = res.data.productInfo || {};

                    if(productInfo.id && that.id){

                        that.$set(that,'formData',productInfo);

                        that.generate();

                    }

                    that.getRuleList();

                    that.init();

                }).catch(function (res) {

                    that.showMsg(res.msg);

                })

            },

            /**

             * 给某个属性添加属性值

             * @param item

             * */

            addDetail: function (item) {

                if (!item.detailValue) return false;

                if (item.detail.find(function (val) {

                    if(item.detailValue == val){

                        return true;

                    }

                })) {

                    return this.showMsg('添加的属性值重复');

                }

                item.detail.push(item.detailValue);

                item.detailValue = '';

            },

            /**

             * 删除某个属性值

             * @param item 父级循环集合

             * @param inx 子集index

             * */

            deleteValue: function (item, inx) {

                if (item.detail.length > 1) {

                    item.detail.splice(inx, 1);

                } else {

                    return this.showMsg('请设置至少一个属性');

                }

            },

            /**

             * 删除某条属性

             * @param index

             * */

            deleteItem: function (index) {

                this.formData.items.splice(index, 1);

            },

            /**

             * 创建属性

             * */

            createAttrName: function () {

                if (this.formDynamic.attrsName && this.formDynamic.attrsVal) {

                    if (this.formData.items.find(function (val) {

                        if (val.value == this.formDynamic.attrsName) {

                            return true;

                        }

                    }.bind(this))) {

                        return this.showMsg('添加的属性重复');

                    }

                    this.formData.items.push({

                        value: this.formDynamic.attrsName,

                        detailValue: '',

                        attrHidden: false,

                        detail: [this.formDynamic.attrsVal]

                    });

                    this.formDynamic.attrsName = '';

                    this.formDynamic.attrsVal = '';

                    this.newRule = false;

                } else {

                    return this.showMsg('请添加完整的规格!');

                }

            },

            /**

             * 删除图片

             * */

            deleteImage: function (key, index) {

                var that = this;

                if (index != undefined) {

                    that.formData[key].splice(index, 1);

                    that.$set(that.formData, key, that.formData[key]);

                } else {

                    that.$set(that.formData, key, '');

                }

            },

            createFrame: function (title, src, opt) {

                opt === undefined && (opt = {});

                var h = 0;

                if (window.innerHeight < 800 && window.innerHeight >= 700) {

                    h = window.innerHeight - 50;

                } else if (window.innerHeight < 900 && window.innerHeight >= 800) {

                    h = window.innerHeight - 100;

                } else if (window.innerHeight < 1000 && window.innerHeight >= 900) {

                    h = window.innerHeight - 150;

                } else if (window.innerHeight >= 1000) {

                    h = window.innerHeight - 200;

                } else {

                    h = window.innerHeight;

                }

                var area = [(opt.w || window.innerWidth / 2) + 'px', (!opt.h || opt.h > h ? h : opt.h) + 'px'];

                layui.use('layer',function () {

                    return layer.open({

                        type: 2,

                        title: title,

                        area: area,

                        fixed: false, //不固定

                        maxmin: true,

                        moveOut: false,//true  可以拖出窗外  false 只能在窗内拖

                        anim: 5,//出场动画 isOutAnim bool 关闭动画

                        offset: 'auto',//['100px','100px'],//'auto',//初始位置  ['100px','100px'] t[ 上 左]

                        shade: 0,//遮罩

                        resize: true,//是否允许拉伸

                        content: src,//内容

                        move: '.layui-layer-title'

                    });

                });

            },

            changeIMG: function (name, value) {

                if (this.getRule(name).maxLength !== undefined) {

                    var that = this;

                    value.map(function (v) {

                        that.formData[name].push(v);

                    });

                    this.$set(this.formData, name, this.formData[name]);

                } else {

                    if(name == 'batchAttr.pic'){

                        this.batchAttr.pic = value;

                    } else {

                        if (name.indexOf('.') !== -1) {

                            var key = name.split('.');

                            if (key.length == 2){

                                this.formData[key[0]][key[1]] = value;

                            } else if(key.length == 3){

                                this.formData[key[0]][key[1]][key[2]] = value;

                            } else if(key.length == 4){

                                this.$set(this.formData[key[0]][key[1]][key[2]],key[3],value)

                            }

                        } else {

                            this.formData[name] = value;

                        }

                    }

                }

            },

            getRule: function (name) {

                return this.rule[name] || {};

            },

            uploadImage: function (name) {

                return this.createFrame('选择图片',this.U({c:"widget.images",a:'index',p:{fodder:name}}),{h:545,w:900});

            },

            uploadVideo: function () {

                if (this.videoLink) {

                    this.formData.video_link = this.videoLink;

                } else {

                    $(this.$refs.filElem).click();

                }

            },

            delVideo: function () {

                var that = this;

                that.$set(that.formData, 'video_link', '');

            },

            insertEditor: function (list) {

                this.um.execCommand('insertimage', list);

            },

            insertEditorVideo: function (src) {

                this.um.setContent('<div><video style="width: 99%" src="'+src+'" class="video-ue" controls="controls" width="100"><source src="'+src+'"></source></video></div><br>',true);

            },

            getContent: function () {

                return this.um.getContent();

            },

            /**

             * 监听radio字段

             */

            eeventRadio: function () {

                var that = this;

                that.radioRule.map(function (val) {

                    that.form.on('radio(' + val + ')', function (res) {

                        that.formData[val] = res.value;

                    });

                })

            },

            init: function () {

                var that = this;

                window.UMEDITOR_CONFIG.toolbar = [

                    // 加入一个 test

                    'source | undo redo | bold italic underline strikethrough | superscript subscript | forecolor backcolor | removeformat |',

                    'insertorderedlist insertunorderedlist | selectall cleardoc paragraph | fontfamily fontsize',

                    '| justifyleft justifycenter justifyright justifyjustify |',

                    'link unlink | emotion selectimgs video  | map',

                    '| horizontal print preview fullscreen', 'drafts', 'formula'

                ];

                UM.registerUI('selectimgs', function (name) {

                    var me = this;

                    var $btn = $.eduibutton({

                        icon: 'image',

                        click: function () {

                            that.createFrame('选择图片', "{:Url('widget.images/index',['fodder'=>'editor'])}");

                        },

                        title: '选择图片'

                    });


                    this.addListener('selectionchange', function () {

                        //切换为不可编辑时，把自己变灰

                        var state = this.queryCommandState(name);

                        $btn.edui().disabled(state == -1).active(state == 1)

                    });

                    return $btn;


                });

                UM.registerUI('video', function (name) {

                    var me = this;

                    var $btn = $.eduibutton({

                        icon: 'video',

                        click: function () {

                            that.createFrame('选择视频', "{:Url('widget.video/index',['fodder'=>'video'])}");

                        },

                        title: '选择视频'

                    });


                    this.addListener('selectionchange', function () {

                        //切换为不可编辑时，把自己变灰

                        var state = this.queryCommandState(name);

                        $btn.edui().disabled(state == -1).active(state == 1)

                    });

                    return $btn;


                });

                //实例化编辑器

                this.um = UM.getEditor('myEditor', {initialFrameWidth: '99%', initialFrameHeight: 400});

                this.um.setContent(that.formData.description);

                that.$nextTick(function () {

                    layui.use(['form','element','laydate'], function () {

                        that.form = layui.form;

                        that.laydate = layui.laydate;

                        that.form.render();

                        that.form.on('select(temp_id)', function (data) {

                            that.$set(that.formData, 'temp_id', data.value);

                        });

                        that.form.on('select(rule_index)', function (data) {

                            that.ruleIndex = data.value;

                        });

                        layui.element.on('tab(docTabBrief)', function(){

                            that.layTabId = this.getAttribute('lay-id');

                        });

                        that.laydate.render({

                            elem: '#date'

                            ,type: 'date'

                            ,range: true,

                            change:function (value, date, endDate) {

                                that.formData.start_time = `${date.year}-${date.month}-${date.date}`;

                                that.formData.stop_time = `${endDate.year}-${endDate.month}-${endDate.date}`;

                            }

                        });

                        that.eeventRadio();

                    });


                    // layui.config({

                    //     base : '/static/plug/layui/'

                    // }).extend({

                    //     selectN: './selectN',

                    // }).use('selectM',function () {

                    //     var selectM = layui.selectM;

                    //     selectM({

                    //         //元素容器【必填】

                    //         elem: '#cate_id'

                    //         //候选数据【必填】

                    //         ,data: that.cateList

                    //         //默认值

                    //         ,selected: that.formData.cate_id || []

                    //         //最多选中个数，默认5

                    //         ,max : 10

                    //         ,name: 'cate_id'

                    //         ,model: 'formData.cate_id'

                    //         //值的分隔符

                    //         ,delimiter: ','

                    //         //候选项数据的键名

                    //         ,field: {idName:'value',titleName:'label',statusName:'disabled'}

                    //     });

                    // });

                })

            },

            requestPost: function (url, data) {

                return new Promise(function (resolve, reject) {

                    axios.post(url, data).then(function (res) {

                        if (res.status == 200 && res.data.code == 200) {

                            resolve(res.data)

                        } else {

                            reject(res.data);

                        }

                    }).catch(function (err) {

                        reject({msg:err})

                    });

                })

            },

            requestGet: function (url) {

                return new Promise(function (resolve, reject) {

                    axios.get(url).then(function (res) {

                        if (res.status == 200 && res.data.code == 200) {

                            resolve(res.data)

                        } else {

                            reject(res.data);

                        }

                    }).catch(function (err) {

                        reject({msg:err})

                    });

                })

            },

            generates: function () {

                var that = this;

                that.generate(1);

            },

            generate: function (type = 0) {

                var that = this;

                this.requestPost(that.U({c:"store.StoreProduct",a:'is_format_attr',p:{id:that.id,type:type}}), {attrs:this.formData.items}).then(function (res) {

                    that.$set(that.formData, 'attrs', res.data.value);

                    that.$set(that, 'formHeader', res.data.header);

                    if (that.id && that.formData.is_sub == 1 && that.formData.spec_type == 1) {

                        that.formHeader.push({title:'一级返佣(元)'});

                        that.formHeader.push({title:'二级级返佣(元)'});

                    }

                }).catch(function (res) {

                    return that.showMsg(res.msg);

                });

            },

            handleSubmit:function () {

                var that = this, cate_id = $('input[name="cate_id"]').val();

                // if (cate_id != '') {

                //     this.formData.cate_id = cate_id.split(',');

                // }

                // if (!that.formData.cate_id.length) {

                //     return that.showMsg('请选择商品分类');

                // }

                // if (!that.formData.temp_id) {

                //     return that.showMsg('请选择运费模板');

                // }

                if (!that.formData.title) {

                    return that.showMsg('请填写商品名称');

                }

                if (!that.formData.image) {

                    return that.showMsg('请填选择商品图');

                }

                if (!that.formData.images.length) {

                    return that.showMsg('请填选择商品轮播图');

                }

                that.formData.description = that.getContent();

                $('#submit').attr('disabled', 'disabled').text('保存中...');

                that.requestPost(that.U({c:'ump.StoreWholesale',a:'save',p:{id:that.id}}),that.formData).then(function (res) {

                    that.confirm();

                }).catch(function (res) {

                    that.showMsg(res.msg);

                });

            },

            confirm: function(){

                var that = this;

                layui.use(['layer'], function () {

                    var layer = layui.layer;

                    layer.confirm(that.id ? '修改成功是否返回产品列表' : '添加成功是否返回产品列表', {

                        btn: ['返回列表',that.id ? '继续修改' : '继续添加'] //按钮

                    }, function(){

                        location.href = that.U({c:'ump.StoreWholesale',a:'index'});

                    }, function(){

                        location.reload();

                    });

                });

            },

            render:function(){

                this.$nextTick(function(){

                    layui.use(['form'], function () {

                        layui.form.render('select');

                    });

                })

            },

            // 移动

            handleDragStart (e, item) {

                this.dragging = item;

            },

            handleDragEnd (e, item) {

                this.dragging = null

            },

            handleDragOver (e) {

                e.dataTransfer.dropEffect = 'move'

            },

            handleDragEnter (e, item) {

                e.dataTransfer.effectAllowed = 'move'

                if (item === this.dragging) {

                    return

                }

                var newItems = [...this.formData.activity];

                var src = newItems.indexOf(this.dragging);

                var dst = newItems.indexOf(item);

                newItems.splice(dst, 0, ...newItems.splice(src, 1))

                this.formData.activity = newItems;

            },

            getRuleList:function (type) {

                var that = this;

                that.requestGet(that.U({c:'store.StoreProduct',a:'get_rule'})).then(function (res) {

                    that.$set(that,'ruleList',res.data);

                    if(type !== undefined){

                        that.render();

                    }

                });

            },

            addRule:function(){

                return this.createFrame('添加商品规则',this.U({c:'store.StoreProductRule',a:'create'}));

            },

            allRule:function () {

                if (this.ruleIndex != -1) {

                    var rule = this.ruleList[this.ruleIndex];

                    if (rule) {

                        this.ruleBool = true;

                        var rule_value = rule.rule_value.map(function (item) {

                            return item;

                        });

                        this.$set(this.formData,'items',rule_value);

                        this.$set(this.formData,'attrs',[]);

                        this.$set(this,'formHeader',[]);

                        return true;

                    }

                }

                this.showMsg('选择的属性无效');

            }

        },

        mounted: function () {

            var that = this;

            axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

            that.getProductInfo();

            window.$vm = that;

            window.changeIMG = that.changeIMG;

            window.insertEditor = that.insertEditor;

            window.insertEditorVideo = that.insertEditorVideo;

            window.successFun = function(){

                that.getRuleList(1);

            }

            $(that.$refs.filElem).change(function () {

                var inputFile = this.files[0];

                that.requestPost(that.U({c:"widget.video",a:'get_signature'})).then(function (res) {

                    AdminUpload.upload(res.data.uploadType,{

                        token: res.data.uploadToken || '',

                        file: inputFile,

                        accessKeyId: res.data.accessKey || '',

                        accessKeySecret: res.data.secretKey || '',

                        bucketName: res.data.storageName || '',

                        region: res.data.storageRegion || '',

                        domain: res.data.domain || '',

                        uploadIng:function (progress) {

                            that.upload.videoIng = true;

                            that.progress = progress;

                        }

                    }).then(function (res) {

                        //成功

                        that.$set(that.formData, 'video_link', res.url);

                        that.progress = 0;

                        that.upload.videoIng = false;

                        return that.showMsg('上传成功');

                    }).catch(function (err) {

                        //失败

                        console.info(err);

                        return that.showMsg('上传错误请检查您的配置');

                    });

                }).catch(function (res) {

                    return that.showMsg(res.msg || '获取密钥失败,请检查您的配置');

                });

            })


        }

    });

</script>

</body>

</html>

<script>

    // import Layout from "../../../../../public/static/plug/iview/dist/iview";

    // export default {

    //     components: {Layout}

    // }

</script>