qimall/addons/Happiness/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="ruleForm.is_sync_goods == 0" disable-transitions @close="destroyCat(index)">{{item.name}}
            </el-tag>
            <el-button v-if="ruleForm.is_sync_goods == 0" type="primary" @click="$refs.cats.openDialog()">选择分类</el-button>
            <!-- <el-button type="text" @click="$navigate({r:'store/client/cate/edit'}, true)">添加分类 -->
            </el-button>
            <com-add-cat ref="cats" :is-add="true" :store-id='storeId' :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="商品展示风格" prop="show_style">
            <div class="flex flex-y-center">
                <template>
                    <el-radio v-model="ruleForm.show_style" :label="1">风格1</el-radio>
                    <el-radio v-model="ruleForm.show_style" :label="2">风格2</el-radio>
                </template>
            </div>
        </el-form-item> -->
    </el-card>

    <!-- 价格库存 -->
    <el-card class="edit-card" shadow="never" v-if="ruleForm.goods_type == 1 || ruleForm.goods_type == 2">
        <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" :type="attrLimit()"></com-attr-group>
                <com-attr v-model="ruleForm.attr" :attr-groups="attrGroups"></com-attr>
                <com-package-attr :attr="ruleForm.attr" ref="package" :show="packageShow()" :package-data="package_data"></com-package-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 == 3">
        <div slot="header" class="clearfix">
            <div class="card-title">预约规则</div>
            <!--            <el-form-item label="预约类型" prop="reserve.reserve_type">-->
            <!--                <el-radio v-model="ruleForm.reserve.reserve_type" :label="0" v-if="is_reserve_type == 0 || is_reserve_type == 2">商品预约</el-radio>-->
            <!--                <el-radio v-model="ruleForm.reserve.reserve_type" :label="1" v-if="is_reserve_type == 1 || is_reserve_type == 2">项目服务预约</el-radio>-->
            <!--            </el-form-item>-->
            <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-attrs-setting v-if="ruleForm.attr.length" :reserve_type="ruleForm.reserve.reserve_type" v-model="ruleForm.attr" :attr-groups="attrGroups"></com-attrs-setting>
                </div>
            </el-form-item>
            <template v-if="ruleForm.is_attr != 1">
                <template v-if="ruleForm.reserve.reserve_type == 0">
                    <el-form-item label="可预约时间" prop="reserve.reserve_date_type">
                        <el-radio v-model="ruleForm.reserve.reserve_date_type" :label="1">选择范围</el-radio>
                        <el-radio v-model="ruleForm.reserve.reserve_date_type" :label="2">自选日期</el-radio>
                        <div v-if="ruleForm.reserve.reserve_date_type == 1" class="range-box">
                            <el-date-picker v-if="ruleForm.reserve.reserve_date_type == 1" v-model="checkRangeList" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="dateSelectChange"></el-date-picker>
                            <div v-if="dayArr.length" class="range-check-box">
                                <el-checkbox-group v-model="checkWeekList" @change="weekSelectChange">
                                    <el-checkbox v-for="(item,inx) in dayArr" :key="inx" :label="item.txt"></el-checkbox>
                                </el-checkbox-group>
                            </div>
                        </div>
                        <div v-if="ruleForm.reserve.reserve_date_type == 2" class="range-box">
                            <el-date-picker v-if="ruleForm.reserve.reserve_date_type == 2" type="dates" v-model="ruleForm.reserve.reserve_date" value-format="yyyy-MM-dd" placeholder="选择一个或多个日期"></el-date-picker>
                        </div>
                    </el-form-item>
                    <el-form-item label="预约模式" prop="reserve.reserve_time_range_type">
                        <el-radio-group v-model="ruleForm.reserve.reserve_time_range_type" @change="onChangeReserveTimeRangeType">
                            <el-radio :label="1">按天预约</el-radio>
                            <el-radio :label="2">按时间段预约</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="时段划分" required prop="reserve.time_slot_type" v-if="ruleForm.reserve.reserve_time_range_type == 2">
                        <!-- 1自定义划分 2自动划分 -->
                        <el-radio v-model="ruleForm.reserve.time_slot_type" :label="1">自定义时间段</el-radio>
                        <el-radio v-model="ruleForm.reserve.time_slot_type" :label="2">自动划分</el-radio>
                        <div v-if="ruleForm.reserve.time_slot_type == 1 || ruleForm.reserve.time_slot_type == 2">
                            <com-time-select ref="timeSelect" :date-list="ruleForm.reserve.reserve_date"
                                             :slot-type="ruleForm.reserve.time_slot_type" :price-type="ruleForm.reserve.reserve_price_type"
                                             :current-setting="initializationDates" @select="resetDateInfo"></com-time-select>
                        </div>
                    </el-form-item>
                    <el-form-item label="价格设置" prop="reserve.reserve_price_type">
                        <!-- 1自定义划分 2自动划分 -->
                        <el-radio v-model="ruleForm.reserve.reserve_price_type" :label="0">统一售价</el-radio>
                        <el-radio v-model="ruleForm.reserve.reserve_price_type" v-if="ruleForm.reserve.reserve_time_range_type == 2" :label="1">按时间段设置</el-radio>
                        <el-radio v-model="ruleForm.reserve.reserve_price_type" v-if="ruleForm.reserve.reserve_time_range_type == 1" :label="2">按天设置</el-radio>
                    </el-form-item>
                </template>

                <template v-if="ruleForm.reserve.reserve_price_type == 0 || ruleForm.reserve.reserve_type == 1">
                    <el-form-item label="售价" prop="price">
                        <el-input placeholder="请输入价格" class="width-150" v-model="ruleForm.price" onInput="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" onInput="value=toNumber(value,2)">
                            <template slot="append">元</template>
                        </el-input>
                        <p class="tips-text">商品没有优惠的情况下，划线价在商品详情会以划线形式显示</p>
                    </el-form-item>
                    <el-form-item label="最多可预约数量" prop="reserve_max_buy">
                        <el-input placeholder="" class="width-150" v-model="ruleForm.reserve.reserve_max_buy"></el-input>
                    </el-form-item>
                </template>
                <template v-if="ruleForm.reserve.reserve_price_type == 1">
                    <el-form-item label="" prop="">
                        <com-price-set :price-type="1" ref="priceSet"></com-price-set>
                    </el-form-item>
                </template>
                <template v-if="ruleForm.reserve.reserve_price_type == 2">
                    <el-form-item label="" prop="">
                        <com-price-day-set :price-type="2" ref="priceSet" :date-list="ruleForm.reserve.reserve_date"></com-price-day-set>
                    </el-form-item>
                </template>
                <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="reserve.service_min">
                    <el-input placeholder="请输入项目时间" show-word-limit class="width-150" v-model="ruleForm.reserve.service_min">
                        <template #append>分钟</template>
                    </el-input>
                </el-form-item>
            </template>

            <template v-if="ruleForm.reserve.reserve_type == 0">
                <el-form-item label="提前预约" prop="reserve_advance_hourse">项目开始前
                    <el-input placeholder="" class="width-150" v-model="ruleForm.reserve.reserve_advance_hourse">
                        <template slot="append">小时</template>
                    </el-input>
                    不可预约
                </el-form-item>
                <el-form-item label="预约日期范围" prop="reserve.reserve_days_range">限制选择并购买
                    <el-input placeholder="" class="width-150" v-model="ruleForm.reserve.reserve_days_range">
                        <template slot="append">天</template>
                    </el-input> 以内的时间（输入0即不限制）
                </el-form-item>
            </template>

            <el-form-item label="取消预约" prop="reserve.cancel_type">
                <div>
                    <el-radio v-model="ruleForm.reserve.cancel_type" :label="1">不允许取消</el-radio>
                </div>
                <div>
                    <el-radio v-model="ruleForm.reserve.cancel_type" :label="2" style="margin-right: 10px;">服务开始</el-radio>
                    <el-input placeholder="" class="width-150" v-model="ruleForm.reserve.cancel_rule.cancel_hour">
                        <template slot="append">小时</template>
                    </el-input> 前，允许取消并自动退款
                </div>
                <div>
                    <el-radio v-model="ruleForm.reserve.cancel_type" :label="3" style="margin-right: 10px;">允许待服务、待验收取消订单，并需要扣除</el-radio>
                    <el-input placeholder="" class="width-150" v-model="ruleForm.reserve.cancel_rule.cancel_fee_percent">
                        <template slot="append">%</template>
                    </el-input> 手续费
                </div>
            </el-form-item>
            <el-form-item label="预约码过期后" required prop="reserve.expired_handle_type">
                <!-- 1自定义划分 2自动划分 -->
                <el-radio v-model="ruleForm.reserve.expired_handle_type" :label="1">不退款</el-radio>
                <el-radio v-model="ruleForm.reserve.expired_handle_type" :label="2">自动退款</el-radio>
                <p style="color: #999">自动退款为项目结束时间外加24个小时,如果在这个时间之前没有核销那么系统将自动退款。</p>
            </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-form-item label="服务方式" required prop="reserve.service_type">
                <el-radio v-model="ruleForm.reserve.service_type" :label="1">上门服务</el-radio>
                <el-radio v-model="ruleForm.reserve.service_type" :label="2">到店服务</el-radio>
                <el-radio v-model="ruleForm.reserve.service_type" :label="3">上门/到店</el-radio>
            </el-form-item>

            <template v-if="ruleForm.reserve.reserve_type == 0">
                <template v-if="ruleForm.reserve.reserve_type == 0">
                    <el-form-item label="所在区域" prop="reserve.district_id">
                        <div class="width-560 s-between">
                            <el-select v-model="provinceInfo" value-key='id' placeholder="请选择省" @change="regionChange($event, 1)" style="width: 32%;">
                                <el-option v-for="item in provinces" :key="item.id" :label="item.name" :value="item"></el-option>
                            </el-select>
                            <el-select v-model="cityInfo" value-key='id' placeholder="请选择市" @change="regionChange($event, 2)" style="width: 32%;">
                                <el-option v-for="item in citys" :key="item.id" :label="item.name" :value="item"></el-option>
                            </el-select>
                            <el-select v-model="districtInfo" value-key='id' placeholder="请选择区" @change='regionChange($event, 3)' style="width: 32%;">
                                <el-option v-for="item in districts" :key="item.id" :label="item.name" :value="item"></el-option>
                            </el-select>
                            <el-input v-model="ruleForm.reserve.district_id" style="display: none"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="详细地址" prop="reserve.detail" :rules="[{required: true, message: '详细地址不能为空'}]">
                        <el-input class="width-560" size="small" v-model="ruleForm.reserve.detail" placeholder="请输入详细地址"></el-input>
                    </el-form-item>
                    <el-form-item label="经纬度" prop="reserve.lng" :rules="[{required: true, message: '经纬度不能为空'}]">
                        <el-input class="width-560" size="small" v-model="long_lat" disabled></el-input>
                    </el-form-item>
                    <!-- 地图 start -->
                    <com-map @map-submit="mapEvent" :address="ruleForm.reserve.detail" :lat="ruleForm.reserve.lat" :long="ruleForm.reserve.lng">
                        <el-button style="margin-left: 151px;font-size:12px;border-radius:3px;padding:10px 40px;" type="primary">展开地图</el-button>
                    </com-map>
                    <!-- 地图 end -->

                    <el-form-item label="有效距离" prop="reserve.distance" :rules="[{required: true, message: '有效距离不能为空'}]">
                        <el-input class="width-150" size="small" v-model="ruleForm.reserve.distance">
                            <template #append>公里</template>
                        </el-input>
                    </el-form-item>
                </template>
            </template>

            <el-form-item label="订购须知" prop="reserve.ordering_information" style="margin-top: 14px;">
                <el-input class="width-560" size="small" v-model="ruleForm.reserve.ordering_information" placeholder="请输入订购须知"></el-input>
            </el-form-item>
            <el-form-item label="须知详情" prop="reserve.information_detail">
                <com-rich-text style="width: 750px" v-model="ruleForm.reserve.information_detail"></com-rich-text>
            </el-form-item>
        </div>
    </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" v-if="ruleForm.goods_type==1">物流配送</el-checkbox>
                    <el-checkbox :label="2" v-if="ruleForm.goods_type==1">买家自提</el-checkbox>
                    <el-checkbox :label="3" v-if="ruleForm.goods_type==1">商家配送</el-checkbox>
                </el-checkbox-group>
            </div>
        </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>