qimall/addons/Mch/client/views/goods/goods-basic.php

<div class="goods-basic">
    <!-- 选择商品类型 -->
    <el-card class="edit-card" shadow="never">
        <div slot="header" class="clearfix">
            <div class="card-title">选择商品类型<span class="card-sub-title">商品类型，商品保存后无法修改，请谨慎选择</span></div>
        </div>

        <ul flex="cross:center wrap:wrap">
            <li style="width: 172px;margin-right: 12px;" v-for="(item, type) in typeArr" :key="type">
                <div class="select-type" @click="toggle(item, type, 'select')">
                    <div class="type-content" :class="type == ruleForm.goods_type ? 'active' : ''" flex="main:justify cross:center">
                        <div class="cont-lf">
                            {{item.name}}
                            <p>{{item.desc}}</p>
                        </div>
                        <img class="img-rg" :src="item.img" alt="">
                    </div>
                    <i class="el-icon-check icon-tick" v-show="type == ruleForm.goods_type"></i>
                </div>
            </li>
        </ul>
    </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="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(item)">
                {{ item.name }}
            </el-tag>
            <el-button type="primary" @click="$refs.cats.openDialog()">选择分类</el-button>
<!--            <el-button type="text" @click="$navigate({r:'mch/client/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="请选择运费模板">
                    <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">
        <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>