qimall/backend/modules/mall/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:'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_subtype" v-if="ruleForm.is_enable_cloud_prescription == 1 && ruleForm.goods_type == 1">
            <el-radio-group v-model="ruleForm.goods_subtype">
                <el-radio :label="0">普通商品</el-radio>
                <el-radio :label="1">处方药</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item label="添加疾病" v-if="ruleForm.goods_subtype == 1" prop="extra.symptom_list" :rules="[
            {
                required: true,
                message: '请输入疾病名称',
                trigger: 'change'
            }
        ]">
            <div style="display: flex;">
                <div style="width: 530px;">
                    <div style="display: flex; flex-wrap: wrap;">
                        <div style="width: 20%; position: relative; padding: 0 5px;margin-bottom: 10px;" v-for="(item, index) in ruleForm.extra.symptom_list" :key="index">
                            <el-input v-model="ruleForm.extra.symptom_list[index]"></el-input>
                            <i class="el-icon-close"
                               style="position: absolute; top: 0; right: 0; cursor: pointer; padding-top: 4px; padding-right: 7px; z-index: 1;"
                               @click="removeSymptom(index)"></i>
                        </div>
                    </div>
                </div>
                <div>
                    <i class="el-icon-circle-plus" style="font-size: 30px; color: #3ba9f6; cursor: pointer;" @click="ruleForm.extra.symptom_list.push('')"></i>
                </div>
            </div>
        </el-form-item>

        <el-form-item label="药品通用名称" prop="extra.drug_generic_name" v-if="ruleForm.goods_subtype == 1" >
            <el-input class="width-560" maxlength="120" show-word-limit v-model="ruleForm.extra.drug_generic_name"></el-input>
        </el-form-item>

        <!-- mch -->
        <el-form-item v-if="is_mch" label="多商户分类" prop="mchCats">
            <el-tag style="margin-right: 5px" v-for="(item,index) in mchCats" :key="item.value" v-model="ruleForm.mchCats" type="warning" closable disable-transitions @close="destroyCat_2(item.value,index)">{{item.label}}
            </el-tag>
            <el-button type="primary" @click="$refs.mchCats.openDialog()">选择分类</el-button>
            <el-button type="text" @click="$navigate({r:'mall/cate/edit'}, true)">添加分类
            </el-button>
            <com-add-cat ref="mchCats" :new-cats="ruleForm.mchCats" :mch_id="mch_id" @select="selectMchCat"></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-model="ruleForm.bannar_pic" 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;视频大小不能超过500 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="video_cover_pic">
            <com-attachment v-if="!ruleForm.video_cover_pic" :multiple="false" :max="1" type="images" @selected="videoCoverPic">
                <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.video_cover_pic"></el-image>
                <el-button @click="delPic('video_cover_pic')" class="icon-close" type="primary" size="mini" icon="el-icon-close" circle></el-button>
            </div>
        </el-form-item>

        <el-form-item label="广告模版" v-if="ruleForm.alipay_mini_app_id">
            <el-select v-model="ruleForm.goods_template_id" filterable placeholder="请选择广告模版">
                <el-option v-for="item in goods_template_list" :key="item.id" :label="item.id+ ' ' + item.name" :value="item.id">
                </el-option>
            </el-select>
            <span v-if="goods_template_list.length <= 0">
                <el-button type="primary" size="small" @click="$navigate({r:'mall/goods-template/edit'})" style="margin-left: 10px;">立即设置</el-button>
            </span>
        </el-form-item>

        <el-form-item label="" prop="">
            <template slot="label">
                <div class="more-setting" @click="showMore('base')">
                    {{is_base_show?'收起更多设置':'展开更多设置'}}
                </div>
            </template>
        </el-form-item>

        <div v-show="is_base_show">
            <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>
        </div>
        <el-form-item label="是否上架">
            <el-switch v-model="ruleForm.is_on_sale" :active-value="1" :inactive-value="0"></el-switch>
        </el-form-item>
        <el-form-item label="主商城显示">
            <el-switch v-model="ruleForm.is_show" :active-value="1" :inactive-value="0"></el-switch>
        </el-form-item>
        <el-form-item label="是否启用区域分类">
            <el-switch v-model="ruleForm.searchAddress.is_enable" :active-value="1" :inactive-value="0"></el-switch>
        </el-form-item>
        <el-form-item label="是否允许售后" v-if="ruleForm.goods_type !== 3">
            <el-switch v-model="ruleForm.can_feedback" :active-value="1" :inactive-value="0"></el-switch>
        </el-form-item>
        <el-form-item label="设置独立放弃退换货">
            <el-col :span="14">
                <el-switch v-model="ruleForm.extra.is_alone_show_return_btn" :active-value="1"
                           :inactive-value="0"></el-switch>
                <div v-if="ruleForm.extra.is_alone_show_return_btn == 1">
                    <el-radio v-model="ruleForm.extra.is_show_return_btn" :label="1">允许退换</el-radio>
                    <el-radio v-model="ruleForm.extra.is_show_return_btn" :label="0">不允许退换</el-radio>
                </div>
                <div class="tips-text">若开启放弃退换货，则用户可在订单详情处进行放弃退换货，订单直接变成已完成状态</div>
            </el-col>
        </el-form-item>
        <template v-if="ruleForm.searchAddress.is_enable == 1">
            <el-form-item label="省市区">
                <el-cascader
                    @change="addressChange"
                    :options="districtList"
                    :props="goodsAddressProps"
                    v-model="ruleForm.searchAddress.addressIdsMap">
                </el-cascader>
            </el-form-item>  
            <el-form-item label="镇">
                <el-select v-model="ruleForm.searchAddress.town_id" placeholder="请选择镇" @change="onChangeTown">
                    <el-option
                        v-for="item in townList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
        </template>
       
    </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>
            <p style="color:red;">注意事项：规格组规格值请按照顺序添加</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" :is-show-attr="ruleForm.is_show_attr"></com-attr>
            </div>
        </el-form-item>
        <el-form-item label="售价" required 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="cost_price">
            <el-input placeholder="请输入价格" class="width-150" v-model="ruleForm.cost_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="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">商品库存少于预警数量，商品列表库存数量标红显示，如需要发送消息通知，请到<a style="margin: 0 5px;" href="javascript:;" target="_blank">消息通知</a>设置</p> -->
            <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" v-if="ruleForm.is_attr==0">
            <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="ruleForm.reserve.reserve_time_range_type == 1 ? '每天最多可预约的数量' : '每段时间最多可预约数量'" 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>

            <template v-if="ruleForm.reserve.reserve_type == 0">
                <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>
                <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-qq-map style="margin-bottom: 15px" @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-qq-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>

            <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">快递物流</el-checkbox>
                    <el-checkbox :label="2" v-if="ruleForm.is_install_yunmeng == 1">到店自提</el-checkbox>
                    <el-checkbox :label="3" v-if="ruleForm.is_install_yunmeng == 1">同城配送</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-form-item label="配送范围限制" prop="is_area_limit">
            <el-switch v-model="ruleForm.is_area_limit" :active-value="1" :inactive-value="0"></el-switch>
        </el-form-item>
        <el-form-item v-if="ruleForm.is_area_limit" label="允许购买区域" prop="area_limit">
            <!-- <el-card shadow="never" style="margin-bottom: 12px;" v-if="ruleForm.area_limit.length>0">

        </el-card> -->
            <div flex="dir:left box:last" v-if="ruleForm.area_limit.length>0" class="width-560">
                <div flex="dir:left" style="flex-wrap: wrap">
                    <el-tag style="margin:5px;border:0" type="info" v-for="(item, index) in revealArea" :key="item.id" v-if="index < 200">
                        {{item.name}}
                    </el-tag>
                    <el-tag style="margin:5px;border:0" type="danger">
                        共 {{ruleForm.area_limit.length}} 项
                    </el-tag>
                </div>
                <div style="text-align: right">
                    <el-button type="text" @click="openDistrict" 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 type="text" size="small" @click="space" 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-button size="small" type="text" @click="openDistrict" v-if="ruleForm.area_limit.length<=0">
                <i class="el-icon-plus">添加地区</i>
            </el-button>
        </el-form-item>
        <el-dialog title="允许购买区域" :visible.sync="dialogVisible" width="50%" :close-on-click-modal="false">
            <div style="margin-bottom: 1rem;">
                <com-district :rule="earaRule" @selected="selectDistrict" :mall_id="mall_id" :level="4" :edit="earaRule"></com-district>
                <div style="text-align: right;margin-top: 1rem;">
                    <el-button type="primary" @click="districtConfirm">
                        确定选择
                    </el-button>
                </div>
            </div>
        </el-dialog>
    </el-card>

    <!-- 其他设置 -->
    <el-card class="edit-card" shadow="never" v-if="false">
        <div slot="header" class="clearfix">
            <div class="card-title">其他设置</div>
        </div>

        <el-form-item label="跨境商品" prop="is_cross_border">
            <el-radio v-model="ruleForm.is_cross_border" :label="1">是</el-radio>
            <el-radio v-model="ruleForm.is_cross_border" :label="0">否</el-radio>
        </el-form-item>
        <el-form-item label="身份证上传" prop="is_id_card">
            <el-radio v-model="ruleForm.is_id_card" :label="1">是</el-radio>
            <el-radio v-model="ruleForm.is_id_card" :label="0">否</el-radio>
            <p class="tips-text">订单详情可查看，会员详情可查看</p>
        </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="商品说明模板">
            <el-select v-model="ruleForm.extra.description_template_id" placeholder="请选择商品说明模板" @change="descriptionTemplateChange">
                <el-option :label="item.name" :value="item.id" :key="index" v-for="(item, index) in descriptionTemplateList"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item v-for="(item, index) in ruleForm.extra.description_list" :label="item.field + ''" :key="index">
            <el-input placeholder="请输入内容" v-model="item.value" class="width-560"></el-input>
        </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>