qimall/addons/Mch/backend/views/store-goods/goods-basic.php

<div class="goods-basic">
    <!-- 基础信息 -->
    <el-card class="edit-card" shadow="never">
        <div slot="header" class="clearfix">
            <div class="card-title">基础信息</div>
        </div>
        <el-form-item label="商品分类" prop="cats">
            <el-tag style="margin-right: 5px;margin-bottom:5px" v-for="(item,index) in cats" :key="index" type="warning" closable disable-transitions @close="destroyCat(index)">{{item.name}}
            </el-tag>
            <el-button type="primary" @click="$refs.cats.openDialog()">选择分类</el-button>
            <el-button type="text" @click="$navigate({r:'mall/cate/edit'}, true)">添加分类
            </el-button>
            <com-add-cat ref="cats" :new-cats="ruleForm.cats" @select="selectCat"></com-add-cat>
        </el-form-item>

        <el-form-item label="商品名称" prop="goods_name">
            <el-input class="width-560" maxlength="40" show-word-limit v-model="ruleForm.goods_name"></el-input>
        </el-form-item>
        <el-form-item label="商品副标题" prop="subtitle">
            <el-input class="width-560" maxlength="60" show-word-limit v-model="ruleForm.subtitle"></el-input>
        </el-form-item>
        <el-form-item label="商品主图" prop="cover_pic">
            <com-attachment v-if="!ruleForm.cover_pic" :multiple="false" :max="1" type="images" @selected="coverPic">
                <div class="card-upload">
                    <i class="el-icon-plus"></i>
                </div>
            </com-attachment>
            <div class="card-coverimg" v-else>
                <el-image style="width: 80px; height: 80px" :src="ruleForm.cover_pic"></el-image>
                <el-button @click="delPic('cover_pic')" class="icon-close" type="primary" size="mini" icon="el-icon-close" circle></el-button>
            </div>
            <p class="tips-text">作用于商城列表、分享头图；建议尺寸：750*750像素。</p>
        </el-form-item>
        <el-form-item label="商品轮播图" prop="bannar_pic">
            <div flex="dir:left">
                <draggable v-if="ruleForm.bannar_pic.length" flex="dif:left">
                    <div class="card-coverimg" v-for="(item, index) in ruleForm.bannar_pic">
                        <el-image class="elImages" style="width: 80px; height: 80px" :src="item.pic_url"></el-image>
                        <el-button @click="delPic('bannar_pic', index)" class="icon-close" type="primary" size="mini" icon="el-icon-close" circle></el-button>
                    </div>
                </draggable>
                <com-attachment v-if="ruleForm.bannar_pic.length < 9" :multiple="true" :max="9" type="images" @selected="bannerPic">
                    <div class="card-upload">
                        <i class="el-icon-plus"></i>
                    </div>
                </com-attachment>
            </div>
            <p class="tips-text">作用于商品详情页顶部轮播；建议尺寸：750*750像素，轮播图可以拖拽图片调整顺序，最多上传9张</p>
        </el-form-item>
        <el-form-item label="商品视频" prop="video_url">
            <el-input v-model="ruleForm.video_url" placeholder="请输入视频原地址或选择上传视频" class="width-560">
                <template slot="append">
                    <com-attachment :multiple="false" :max="1" @selected="videoUrl" type="videos">
                        <el-tooltip class="item" effect="dark" content="支持格式mp4;支持编码H.264;视频大小不能超过50 MB" placement="top">
                            <el-button size="mini">添加视频</el-button>
                        </el-tooltip>
                    </com-attachment>
                </template>
            </el-input>
            <el-link class="box-grow-0" type="primary" style="font-size:12px" v-if='ruleForm.video_url' :underline="false" target="_blank" :href="ruleForm.video_url">视频链接
            </el-link>
        </el-form-item>

        <el-form-item label="商品标签">
            <el-select v-model="ruleForm.labels" multiple placeholder="请选择标签">
                <el-option v-for="item in label_list" :key="item.id" :label="item.title + ''" :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="商品服务">
            <el-select v-model="ruleForm.services" multiple placeholder="请选择服务">
                <el-option v-for="item in service_list" :key="item.name" :label="item.name" :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>
    </el-card>

    <!-- 价格库存 -->
    <el-card class="edit-card" shadow="never">
        <div slot="header" class="clearfix">
            <div class="card-title">价格库存</div>
        </div>
        <el-form-item label="商品规格" prop="is_attr">
            <el-radio v-model="ruleForm.is_attr" :label="0">无</el-radio>
            <el-radio v-model="ruleForm.is_attr" :label="1">多规格商品</el-radio>
            <p class="tips-text">如有颜色、尺码等多种规格，请添加商品规格</p>
        </el-form-item>
        <el-form-item prop="attr" v-if="ruleForm.is_attr == 1">
            <div v-if="ruleForm.is_attr" style="width:60%;margin-top: 24px;">
                <com-attr-group @select="makeAttrGroup" v-model="attrGroups"></com-attr-group>
                <com-attr v-model="ruleForm.attr" :attr-groups="attrGroups"></com-attr>
            </div>
        </el-form-item>
        <el-form-item label="售价" required prop="price">
            <el-input placeholder="请输入价格" class="width-150" v-model="ruleForm.price" onkeyup="value=toNumber(value,2)">
                <template slot="append">元</template>
            </el-input>
        </el-form-item>
        <el-form-item label="划线价" prop="original_price">
            <el-input placeholder="请输入价格" class="width-150" v-model="ruleForm.original_price" onkeyup="value=toNumber(value,2)">
                <template slot="append">元</template>
            </el-input>
            <p class="tips-text">商品没有优惠的情况下，划线价在商品详情会以划线形式显示</p>
        </el-form-item>
        <el-form-item label="成本价" prop="cost_price">
            <el-input placeholder="请输入价格" class="width-150" v-model="ruleForm.cost_price" onkeyup="value=toNumber(value,2)">
                <template slot="append">元</template>
            </el-input>
            <p class="tips-text">成本价将不会对用户展示，仅在订单导出时，可导出该价格，便于商家统计使用</p>
        </el-form-item>
        <el-form-item label="商品单位" prop="unit">
            <el-input placeholder="请输入商品单位" maxlength="3" show-word-limit class="width-150" v-model="ruleForm.unit"></el-input>
        </el-form-item>
        <el-form-item label="商品库存" prop="stock">
            <el-input placeholder="请输入商品库存" class="width-150" v-model="ruleForm.stock"></el-input>
        </el-form-item>
        <el-form-item label="库存预警" prop="stock_warning">
            <el-input placeholder="请输入库存预警" class="width-150" v-model="ruleForm.stock_warning"></el-input>
            <p class="tips-text">商品库存少于预警数量，商品列表库存数量标红显示</p>
        </el-form-item>
        <el-form-item label="商品重量" prop="goods_weight">
            <el-input placeholder="请输入商品重量" class="width-150" v-model="ruleForm.goods_weight"></el-input>
        </el-form-item>
        <el-form-item label="商品货号" prop="goods_no">
            <el-input placeholder="请输入商品货号" class="width-150" v-model="ruleForm.goods_no"></el-input>
        </el-form-item>
        <el-form-item label="商品详情显示库存" prop="is_show_stock">
            <el-radio v-model="ruleForm.is_show_stock" :label="1">显示</el-radio>
            <el-radio v-model="ruleForm.is_show_stock" :label="0">隐藏</el-radio>
        </el-form-item>
        <el-form-item label="商品销量显示" prop="is_show_sales">
            <el-radio v-model="ruleForm.is_show_sales" :label="1">显示</el-radio>
            <el-radio v-model="ruleForm.is_show_sales" :label="0">隐藏</el-radio>
        </el-form-item>
        <el-form-item label="虚拟销量" prop="virtual_sales">
            <el-input placeholder="请输入商品库存" class="width-150" v-model="ruleForm.virtual_sales"></el-input>
            <p class="tips-text">销量显示开启后,虚拟销量为0显示真实销量,虚拟销量大于0则显示虚拟销量</p>
        </el-form-item>
    </el-card>

    <!-- 物流设置 -->
    <el-card class="edit-card" shadow="never" v-if="ruleForm.goods_type == 1">
    <div slot="header" class="clearfix">
            <div class="card-title">物流支持</div>
        </div>
        <el-form-item label="物流方式" prop="logistics_way">
            <div flex="dir:top">
                <el-checkbox-group v-model="ruleForm.freight_type" @change="changeFreightType">
                    <el-checkbox :label="1">快递发货</el-checkbox>
<!--                     <el-checkbox :label="2">上门自提</el-checkbox>-->
<!--                    <el-checkbox :label="3">同城配送</el-checkbox>-->
                </el-checkbox-group>
            </div>
        </el-form-item>
        <div v-if="is_show_freight">
            <el-form-item label="快递运费" prop="freight_rules_type">
                <el-radio v-model="ruleForm.freight_rules_type" :label="1">运费模板</el-radio>
                <el-radio v-model="ruleForm.freight_rules_type" :label="2">统一运费</el-radio>
            </el-form-item>
            <el-form-item label="运费模板" prop="freight_id" v-if="ruleForm.freight_rules_type == 1">
                <el-select v-model="ruleForm.freight_id" placeholder="请选择运费模板" @change="changeFreightRules">
                    <el-option v-for="item in freight_rules" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="统一运费" prop="shipping_fee" v-if="ruleForm.freight_rules_type == 2">
                <el-input placeholder="请输入统一运费" class="width-150" v-model="ruleForm.shipping_fee">
                    <template slot="append">元</template>
                </el-input>
            </el-form-item>
        </div>
        <el-form-item label="满件包邮" prop="not_must_price">
            <el-input placeholder="请输入数量" class="width-150" v-model="ruleForm.free_shipping_num">
                <template slot="append">件</template>
            </el-input>
            <p class="tips-text">单次购买此商品xx件，则包邮,设0不支持</p>
        </el-form-item>
        <el-form-item label="满额包邮" prop="not_must_price">
            <el-input placeholder="请输入价格" class="width-150" v-model="ruleForm.free_shipping_money">
                <template slot="append">元</template>
            </el-input>
            <p class="tips-text">单次购买此商品金额达到xx元，则包邮,设0不支持</p>
        </el-form-item>
    </el-card>
    <el-card class="edit-card" shadow="never" v-if="ruleForm.freight_rules_type == 1 && ruleForm.freight_id > 0">
        <div slot="header" class="clearfix">
            <div class="card-title">运费模板</div>
        </div>
        <el-form-item label="规则名称">
            <el-input size="small" v-model="form.name" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="计费方式">
            <el-radio name="type" :label="1" :disabled="true" v-model="form.type">按重计费</el-radio>
            <el-radio name="type" :label="2" :disabled="true" v-model="form.type">按件计费</el-radio>
        </el-form-item>

        <el-form-item label="按商品计算">
            <el-radio name="type" :label="1" :disabled="true" v-model="form.compute_type">按不同商品计算</el-radio>
            <el-radio name="type" :label="2" :disabled="true" v-model="form.compute_type">按同件商品计算</el-radio>
            <div class="tips-text" v-if="form.compute_type == 1" style="line-height: 24px;">
                运费规则：首件/重 15元，续件/重 1.5元<br />
                商品A*1件 = 15元，商品A*2件 = 16.5元<br />
                商品A*1件 + 商品B*1件 = 30元， 商品A*2件 + 商品B*1件 = 31.5元
            </div>
            <div class="tips-text" v-if="form.compute_type == 2" style="line-height: 24px;">
                运费规则：首件/重 15元，续件/重 1.5元<br />
                商品A*1件 = 15元，商品A*2件 = 16.5元<br />
                商品A*1件 + 商品B*1件 = 16.5元， 商品A*2件 + 商品B*1件 = 18元<br />
                规则：首件 + 续件 + 续件 + 续件……【注意：就算不同商品也是按续件算】
            </div>
        </el-form-item>

        <el-form-item label="选择地区">
            <el-radio name="select_com" :disabled="form.id ? true : false" :label="0" v-model="form.select_com">多选地区</el-radio>
            <el-radio name="select_com" :disabled="form.id ? true : false" :label="1" v-model="form.select_com">单选地区</el-radio>
        </el-form-item>
        <el-form-item label="运费规则">
            <el-card shadow="never" style="margin-bottom: 12px;width: 650px" v-if="form.rule"v-for="(item, index) in form.rule" :key="item.id">
                <div flex="dir:left box:last">
                    <div>
                        <div>
                            <el-breadcrumb separator="/">
                                <el-breadcrumb-item>首重/件(克/个):{{item.first}}</el-breadcrumb-item>
                                <el-breadcrumb-item>首费(元):{{item.firstPrice}}</el-breadcrumb-item>
                                <el-breadcrumb-item>续重/件(克/个):{{item.second}}</el-breadcrumb-item>
                                <el-breadcrumb-item>续费(元):{{item.secondPrice}}</el-breadcrumb-item>
                            </el-breadcrumb>
                        </div>
                        <div flex="dir:left" style="flex-wrap: wrap">
                            <div>区域：</div>
                            <el-tag type="info" style="margin: 5px;border:0" v-for="(value, key) in item.list">
                                {{value.name}}
                            </el-tag>
                        </div>
                    </div>
                    <!-- <div style="text-align: right">
                        <el-button type="text" @click="editDistrict(item)" size="small" circle>
                            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                                <img src="resources/img/mall/edit.png" alt="">
                            </el-tooltip>
                        </el-button>
                        <el-button style="margin-left: 0" type="text" @click="deleteDetail(index)" size="small"
                                    circle>
                            <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                <img src="resources/img/mall/del.png" alt="">
                            </el-tooltip>
                        </el-button>
                    </div> -->
                </div>
            </el-card>
            <!-- <el-button type="text" @click="openDistrict"><i class="el-icon-plus">新增规则</i></el-button> -->
        </el-form-item>
    </el-card>
    <!-- 商品详情 -->
    <el-card class="edit-card" shadow="never">
        <div slot="header" class="clearfix">
            <div class="card-title">商品详情</div>
        </div>
        <com-rich-text style="width: 750px" v-model="ruleForm.detail"></com-rich-text>
    </el-card>
</div>