jiaoyi-vue/src/views/merchant/goods/add.vue

<template>
    <el-container>
        <el-main>
            <el-row :gutter="20">
                <el-col :span="18">
                    <el-form ref="dialogForm" :model="formData" :rules="rules" label-width="100px" label-position="top">
                        <el-card shadow="never" header="商品类型">
                            <el-form-item label="商品品类" prop="category">
                                <el-cascader v-model="formData.category" :options="categoryData" :props="deptsProps" @change="getTemplate" clearable style="width: 50%;" />
                                <div class="el-form-item-msg"></div>
                            </el-form-item>
                            <el-form-item label="商品类型" prop="product_type" @change="getTemplate" v-loading="channelLoad">
                                <el-radio-group v-model="formData.product_type">
                                    <el-radio border :label="item.key" v-for="(item,index) in typeData" :key="index">{{item.name}}</el-radio>
                                </el-radio-group>
                                <div class="el-form-item-msg"></div>
                            </el-form-item>
                        </el-card>
                        <template v-if="showNext">
                        <el-card shadow="never" header="商家信息">
                            <el-form-item label="收款方式" prop="settle_type">
                                <el-radio-group v-model="formData.settle_type">
                                    <el-radio border :label="1">总店结算</el-radio>
                                    <el-radio border :label="2">分店结算</el-radio>
                                    <el-radio border :label="3">区域结算</el-radio>
                                </el-radio-group>
                                <div class="el-form-item-msg">
                                    <span v-if="formData.settle_type==1">现有支付账户统一接收该团购产生的所有账款 </span>
                                    <span v-if="formData.settle_type==2">若分店在消费者核销时未开通收款账户或未授权管理门店，则分店款项对应结算给公司账户或被授权的公司账户  </span>
                                    <span v-if="formData.settle_type==3">区域账户统一接收关联门店产生的所有账款，如分店未关联区域收款账户，该分店的款项自动结算给总店账户  </span>
                                </div>
                            </el-form-item>
                        </el-card>
                        <el-card shadow="never" header="商品信息">
                            <el-form-item label="商品名称" prop="product_name">
                                <el-input v-model="formData.product_name" maxlength="40" show-word-limit clearable placeholder="请输入"></el-input>
                                <div class="el-form-item-msg"></div>
                            </el-form-item>
                            <el-row :gutter="15">
                                <el-col :span="12">
                                    <el-form-item label="团购/次卡/代金券等划线价" prop="line_price">
                                        <el-input v-model="formData.line_price" type="number" clearable placeholder="请输入">
                                            <template #append>元</template>
                                        </el-input>
                                        <div class="el-form-item-msg"></div>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="顾客实际需支付" prop="price">
                                        <el-input v-model="formData.price" type="number" clearable placeholder="请输入">
                                            <template #append>元</template>
                                        </el-input>
                                        <div class="el-form-item-msg"></div>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <fieldset>
                                <legend><el-tag>商品搭配</el-tag></legend>
                                <el-button type="primary" size="small" @click="addSpecs" v-if="specs.length<5">添加分组</el-button>
                                <div class="specs" v-for="(item,indx) in specs" :key="indx">
                                    <div class="specs-header">
                                        <div class="specs-left">
                                            <el-input v-model="item.name" placeholder="请输入商品组名称" maxlength="10" show-word-limit clearable style="width: 50%;"></el-input>
                                        </div>
                                        <div class="specs-right">
                                            <el-select v-model="item.num" placeholder="请选择">
                                                <el-option :value="0" label="全部可选"></el-option>
                                                <el-option :value="len" :label="item.list.length+'选'+len" v-for="len in item.list.length" v-if="item.list.length > 1"></el-option>
                                            </el-select>
                                        </div>
                                    </div>
                                    <div class="specs-tips">商品组名称中不可出现“任选N”“X选N”字样，当商品组的可选范围是“几选1”或“全部可选”时，不可配置重复选</div>
                                    <div class="specs-body">
                                        <div class="body-item" v-for="(its,ind) in item.list" :key="ind">
                                            <div class="item-left">
                                                <el-row :gutter="10">
                                                    <el-col :span="12" class="mb10">
                                                        <el-input placeholder="请输入单品名称 " v-model="its.name">
                                                            <template #prepend>名称</template>
                                                        </el-input>
                                                    </el-col>
                                                    <el-col :span="12" class="mb10">
                                                        <el-input placeholder="单价" v-model="its.price" type="number">
                                                            <template #prepend>单价</template>
                                                            <template #append>元</template>
                                                        </el-input>
                                                    </el-col>
                                                    <el-col :span="12" class="mb10">
                                                        <el-input placeholder="请输入重量 " v-model="its.weight" type="number">
                                                            <template #prepend>重量</template>
                                                            <template #append>
                                                                <el-select v-model="its.weight_unit">
                                                                    <el-option value="kg" label="kg(千克)"></el-option>
                                                                    <el-option value="g" label="g(克)"></el-option>
                                                                    <el-option value="L" label="L(升)"></el-option>
                                                                    <el-option value="ml" label="ml(毫升)"></el-option>
                                                                    <el-option value="m" label="m(米)"></el-option>
                                                                    <el-option value="m²" label="m²(平方米)"></el-option>
                                                                    <el-option value="m³" label="m³(立方米)"></el-option>
                                                                </el-select>
                                                            </template>
                                                        </el-input>
                                                    </el-col>
                                                    <el-col :span="12" class="mb10">
                                                        <el-input placeholder="数量" v-model="its.number" type="number">
                                                            <template #prepend>数量</template>
                                                            <template #append>份</template>
                                                        </el-input>
                                                    </el-col>
                                                </el-row>
                                            </div>
                                            <div class="item-dels">
                                                <el-button type="danger" @click="removeItem(indx,ind)" circle icon="el-icon-delete" size="small"></el-button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="specs-footer">
                                         <el-button type="primary" @click="addItem(indx)">增加单品</el-button>
                                        <el-button type="danger" @click="removeSpec(indx)">删除组</el-button>
                                    </div>
                                </div>
                            </fieldset>
                            <el-form-item label="多规格" prop="mult_sku">
                                <el-radio-group v-model="formData.mult_sku">
                                    <el-radio border :label="1">关闭</el-radio>
                                    <el-radio border :label="2">开启</el-radio>
                                </el-radio-group>
                                <div class="el-form-item-msg"></div>
                            </el-form-item>
                            <fieldset v-if="formData.mult_sku == 2">
                                <legend><el-tag>规格明细</el-tag></legend>
                                <el-button type="primary" size="small" @click="addSkuSpecs" v-if="skuSpecs.length<5">新增规格</el-button>
                                <div class="sku-table">
                                    <el-table :data="skuSpecs" border>
                                        <el-table-column prop="image" label="规格图片" width="180">
                                            <template #default="scope">
                                                <sc-upload v-model="scope.row.image" title="规格图片" :cropper="true" :compress="1" :aspectRatio="1/1"></sc-upload>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="sku_id" label="商品ID(必填)" width="220">
                                            <template #default="scope">
                                                <el-input v-model="scope.row.sku_id" placeholder="商品ID"></el-input>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="name" label="名称(必填)" width="220">
                                            <template #default="scope">
                                                <el-input v-model="scope.row.name" maxlength="40" show-word-limit placeholder="SKU名称"></el-input>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="line_price" label="划线价(必填)" width="220">
                                            <template #default="scope">
                                                <el-input v-model="scope.row.line_price" type="number" placeholder="划线价">
                                                    <template #append>元</template>
                                                </el-input>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="price" label="支付价(必填)" width="220">
                                            <template #default="scope">
                                                <el-input v-model="scope.row.price" type="number" placeholder="支付价">
                                                    <template #append>元</template>
                                                </el-input>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="操作" align="left" fixed="right">
                                            <template #default="scope">
                                                <el-button type="danger" size="small" @click="removeItemSku(scope.$index)" icon="el-icon-delete">删除</el-button>
                                                <el-button size="small" @click="itemSkuView(scope.$index,scope.row)">规格详情</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </fieldset>
                            <el-form-item label="商品头图" prop="image_list">
                                <sc-upload-multiple v-model="formData.image_list" :multiple="false" draggable :limit="10" tip="图片尺寸不超过5M，图片越小呈现的速度越快，建议分辨率不低于750*562px"></sc-upload-multiple>
                                <div class="el-form-item-msg"></div>
                            </el-form-item>
                            <el-form-item label="辅助图" prop="detail_image_list">
                                <sc-upload-multiple v-model="formData.detail_image_list" :multiple="false" draggable :limit="4" tip="辅助图上传1-4张，每张图片不得超过5M，建议分辨率不低于750*562px"></sc-upload-multiple>
                                <div class="el-form-item-msg"></div>
                            </el-form-item>
                            <el-form-item label="环境图" prop="environment_image_list">
                                <sc-upload-multiple v-model="formData.environment_image_list" :multiple="false" draggable :limit="10" tip="良好的环境也是用户的优先选择，最多可上传10张。每张图片不得超过5M，建议分辨率不低于750*562px"></sc-upload-multiple>
                                <div class="el-form-item-msg"></div>
                            </el-form-item>
                        </el-card>
                        <el-card shadow="never" header="售卖信息">
                            <el-form-item label="投放渠道" prop="show_channel">
                                <el-radio-group v-model="formData.show_channel">
                                    <el-radio :label="1">不限制</el-radio>
                                    <el-popover placement="top-start" trigger="hover" content="用户仅可在直播间开播时支付购买，售价及库存均仅在直播间渠道生效。用户无法通过收藏或分享的商品链接支付购买。如希望以此售价通过多渠道分享和售卖，投放渠道需选择“不限制”。" :width="280">
                                        <template #reference>
                                            <el-radio :label="2">
                                                <template #default>
                                                    <div class="radio-flex">仅直播间展示 <el-icon><el-icon-question-filled /></el-icon></div>
                                                </template>
                                            </el-radio>
                                        </template>
                                    </el-popover>
                                    <el-popover placement="top-start" trigger="hover" content="用户仅可通过线下二维码等物料购买，商品不会在线上任何渠道展示和售卖。" :width="280">
                                        <template #reference>
                                            <el-radio :label="5">
                                                <template #default>
                                                    <div class="radio-flex">仅线下 <el-icon><el-icon-question-filled /></el-icon></div>
                                                </template>
                                            </el-radio>
                                        </template>
                                    </el-popover>
                                    <el-popover placement="top-start" trigger="hover" content="新用户只可在新人频道购买，售价及库存仅在新人频道生效，用户无法通过收藏或分享的商品链接支付购买。" :width="280">
                                        <template #reference>
                                            <el-radio :label="7">
                                                <template #default>
                                                    <div class="radio-flex">仅新人频道 <el-icon><el-icon-question-filled /></el-icon></div>
                                                </template>
                                            </el-radio>
                                        </template>
                                    </el-popover>
                                    <el-popover placement="top-start" trigger="hover" content="用户可通过线上所有渠道购买（除新人频道），但不可通过线下二维码物料购买。" :width="280">
                                        <template #reference>
                                            <el-radio :label="8">
                                                <template #default>
                                                    <div class="radio-flex">仅线上 <el-icon><el-icon-question-filled /></el-icon></div>
                                                </template>
                                            </el-radio>
                                        </template>
                                    </el-popover>
                                    <el-popover placement="top-start" trigger="hover" content="用户仅可在免费试频道购买,免费价格及库存仅针对参与免费试活动条件的用户生效。" :width="280">
                                        <template #reference>
                                            <el-radio :label="18">
                                                <template #default>
                                                    <div class="radio-flex">仅免费试 <el-icon><el-icon-question-filled /></el-icon></div>
                                                </template>
                                            </el-radio>
                                        </template>
                                    </el-popover>
                                    <el-popover placement="top-start" trigger="hover" content="用户仅可在「团购」页面看到和购买商品。" :width="280">
                                        <template #reference>
                                            <el-radio :label="22">
                                                <template #default>
                                                    <div class="radio-flex">仅团购商城 <el-icon><el-icon-question-filled /></el-icon></div>
                                                </template>
                                            </el-radio>
                                        </template>
                                    </el-popover>
                                    <el-popover placement="top-start" trigger="hover" content="商品售卖日期内，用户仅在直播间和获客卡渠道可支付购买，售价及库存均仅在直播间和获客卡渠道生效。" :width="280">
                                        <template #reference>
                                            <el-radio :label="23">
                                                <template #default>
                                                    <div class="radio-flex">直播间+获客卡 <el-icon><el-icon-question-filled /></el-icon></div>
                                                </template>
                                            </el-radio>
                                        </template>
                                    </el-popover>
                                    <el-popover placement="top-start" trigger="hover" content="该渠道商品不会在常规渠道售卖，需报名参加营销活动进行售卖。" :width="280">
                                        <template #reference>
                                            <el-radio :label="25">
                                                <template #default>
                                                    <div class="radio-flex">仅活动报名 <el-icon><el-icon-question-filled /></el-icon></div>
                                                </template>
                                            </el-radio>
                                        </template>
                                    </el-popover>
                                </el-radio-group>
                                <div class="el-form-item-msg"></div>
                            </el-form-item>
                            <el-form-item label="库存数量" prop="limit_use_rule">
                                <el-radio-group v-model="formData.limit_use_rule">
                                    <el-radio :label="2">不限制</el-radio>
                                    <el-radio :label="1">限库存</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="团购库存数量" prop="use_num_per_consume" v-if="formData.limit_use_rule==1">
                                <el-input v-model="formData.use_num_per_consume" style="width: 30%;">
                                    <template #append>份</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="商品售卖日期" prop="sold_start_times">
                                <div style="width: 30%;">
                                    <el-date-picker v-model="formData.sold_start_times" placeholder="请选择商品售卖日期" start-placeholder="开始时间" end-placeholder="结束时间" type="daterange" range-separator="至" />
                                </div>
                                <div class="el-form-item-msg">顾客可以在这个时间内购买商品，超过这个日期，活动自动下线</div>
                            </el-form-item>
                            <div class="radio-flex">
                                自动延期<el-switch active-text="开" inactive-text="关" inline-prompt v-model="formData.auto_renew" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" :active-value="1" :inactive-value="0"/>
                                <span class="fs12">团购到期后自动延长30天（有效期同时延长），可随时关闭。</span>
                            </div>
                        </el-card>
                        <el-card shadow="never" header="交易规则">
                            <el-form-item label="顾客可消费日期" prop="use_date_type">
                                <el-radio-group v-model="formData.use_date_type">
                                    <el-radio :label="1">指定天数</el-radio>
                                    <el-radio :label="2">指定日期</el-radio>
                                </el-radio-group>
                                <div class="el-form-item-msg" v-if="formData.use_date_type==1"></div>
                                <div class="el-form-item-msg" v-if="formData.use_date_type==2">
                                    可使用日期的结束时间必须晚于售卖日期的结束时间
                                </div>
                                <div v-if="formData.use_date_type==1">
                                    <el-input v-model="formData.day_duration">
                                        <template #append>天，购买当日默认可用</template>
                                        <template #prepend>自购买次日起</template>
                                    </el-input>
                                </div>
                                <div v-if="formData.use_date_type==2" style="width: 30%;">
                                    <el-date-picker v-model="formData.use_times" placeholder="请选择商品售卖日期" start-placeholder="开始时间" end-placeholder="结束时间" type="daterange" range-separator="至" />
                                </div>
                            </el-form-item>
                            <el-form-item label="顾客不可消费日期" prop="can_no_use_date">
                                <el-radio-group v-model="formData.can_no_use_date">
                                    <el-radio :label="1">所有日期均可使用</el-radio>
                                    <!-- <el-radio :label="2">部分日期不可用</el-radio> -->
                                </el-radio-group>
                                <div class="el-form-item-msg"></div>
                            </el-form-item>
                            <el-form-item label="券码类型" prop="code_source_type">
                                <el-radio-group v-model="formData.code_source_type" disabled>
                                    <el-radio :label="1">抖音码</el-radio>
                                    <el-radio :label="2">三方码</el-radio>
                                </el-radio-group>
                                <div class="el-form-item-msg"></div>
                            </el-form-item>
                            
                        </el-card>
                        <el-card shadow="never" header="消费规则">
                            <el-form-item label="限购规则" prop="limit_rule_type">
                                <el-radio-group v-model="formData.limit_rule_type">
                                    <el-radio :label="1">不限制购买</el-radio>
                                    <el-radio :label="2">限制购买</el-radio>
                                </el-radio-group>
                                <div class="el-form-item-msg"></div>
                                <div v-if="formData.limit_rule_type==2">
                                    <el-input v-model="formData.limit_rule">
                                        <template #append>份</template>
                                        <template #prepend>限制每人最多购买</template>
                                    </el-input>
                                </div>
                            </el-form-item>
                            <el-form-item label="预约规则" prop="booking_type">
                                <el-radio-group v-model="formData.booking_type">
                                    <el-radio :label="1">无需预约</el-radio>
                                    <el-radio :label="2">到店前需要预约</el-radio>
                                </el-radio-group>
                                <div class="el-form-item-msg"></div>
                                <div v-if="formData.booking_type==2">
                                    <el-input v-model="formData.booking_date">
                                        <template #prepend>需提前电话预约</template>
                                        <template #append>
                                            <el-select v-model="formData.booking_unit" style="width: 80px;">
                                                <el-option :value="1" label="天"></el-option>
                                                <el-option :value="2" label="小时"></el-option>
                                            </el-select>
                                        </template>
                                    </el-input>
                                </div>
                            </el-form-item>
                            <el-form-item label="使用张数限制" prop="rec_person_type">
                                <el-radio-group v-model="formData.rec_person_type">
                                    <el-radio :label="1">不限制张数</el-radio>
                                    <el-radio :label="2">限制张数</el-radio>
                                </el-radio-group>
                                <div class="el-form-item-msg"></div>
                                <div v-if="formData.rec_person_type==2">
                                    <el-input v-model="formData.rec_person_num_max">
                                        <template #prepend>单次消费最多使用张数</template>
                                        <template #append>张</template>
                                    </el-input>
                                </div>
                            </el-form-item>
                        </el-card>
                        </template>
                    </el-form>
                </el-col>
                <el-col :span="6">
                    <el-card shadow="never" header="详情预览">
                        <div class="sub-tips">该功能只做预览，实际效果以真机为准</div>
                        <div class="preview-mobile">
                            <div class="mobile-bannber">
                                <el-carousel :interval="5000" arrow="always">
                                    <el-carousel-item v-for="item in formData.image_list" :key="item">
                                        <el-image :src="item.url"></el-image>
                                    </el-carousel-item>
                                </el-carousel>
                            </div>
                            <div class="mobile-info">
                                <div class="info-price">
                                    <span class="price">{{ formData.price?$TOOL.moneyFormat(formData.price):'¥0.00' }}</span>
                                    <span class="line">{{ formData.line_price?$TOOL.moneyFormat(formData.line_price):'¥0.00' }}</span>
                                    <span class="dis">{{ $TOOL.disFormat(formData.price,formData.line_price) }}折</span>
                                </div>
                                <div class="info-title">{{ formData.product_name?formData.product_name:'演示商品标题' }}</div>
                                <div class="sku-list" v-if="skuSpecs.length > 0">
                                    <div class="sku-title">规格<br>选择</div>
                                    <div class="sku-list-body">
                                        <div class="sku-item" v-for="(item,indx) in skuSpecs" :key="indx">{{item.name}}</div>
                                    </div>
                                </div>
                                <div class="item-tag">
                                    <div class="tag-li"><el-icon color="#f00" size="14"><el-icon-circle-check /></el-icon>过期退</div>
                                    <div class="tag-li"><el-icon color="#f00" size="14"><el-icon-circle-check /></el-icon>随时退</div>
                                </div>
                            </div>
                            <div class="mobile-group">
                                <div class="group-title">团购套餐</div>
                                <div class="group-body" v-if="specs.length > 0" v-for="(item,indx) in specs" :key="indx">
                                    <div class="body-title">
                                        {{item.name}}
                                        <span v-if="item.num == 0">全部可选</span>
                                        <span v-else>{{item.list.length}}选{{item.num}}</span>
                                    </div>
                                    <div class="body-item">
                                        <div class="body-item-li" v-for="(its,idx) in item.list" :key="idx">
                                            {{its.name}}
                                            <div class="item-right">
                                                <span>({{its.number}}份)</span>
                                                <span>{{$TOOL.moneyFormat(its.price)}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="mobile-group">
                                <div class="group-title">购买须知</div>
                                <div class="group-mix">
                                    <div class="mix-title">
                                        <el-icon size="14" color="#000"><el-icon-suitcase /></el-icon>有效期
                                    </div>
                                    <div class="mix-item" v-if="formData.use_date_type==1">
                                        购买后 <span>{{ formData.day_duration }}</span> 天有效
                                    </div>
                                    <div class="mix-item" v-if="formData.use_date_type==2">
                                        <span v-if="formData.use_times">
                                        {{ $TOOL.dateFormat(formData.use_times[0],'yyyy-MM-dd') }}至{{ $TOOL.dateFormat(formData.use_times[1],'yyyy-MM-dd') }}
                                        </span>
                                    </div>
                                </div>
                                <div class="group-mix">
                                    <div class="mix-title">
                                        <el-icon size="14" color="#000"><el-icon-clock /></el-icon>可用时间
                                    </div>
                                    <div class="mix-item" v-if="formData.can_no_use_date==1">
                                        商家营业时间可用
                                    </div>
                                </div>
                                <div class="group-mix">
                                    <div class="mix-title">
                                        <el-icon size="14" color="#000"><el-icon-alarm-clock /></el-icon>预约规则
                                    </div>
                                    <div class="mix-item" v-if="formData.booking_type==1">
                                        无需预约，高峰期可能需要排队
                                    </div>
                                    <div class="mix-item" v-if="formData.booking_type==2">
                                        需要提前<span>{{ formData.booking_date }}</span>{{ formData.booking_unit==1?'天':'小时' }}预约
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </el-main>
        <el-footer style="text-align: center;">
            <el-button @click="reback" size="large">取 消</el-button>
            <el-button size="large" type="primary" :loading="isSaveing" @click="submit()">提交审核</el-button>
        </el-footer>
    </el-container>
    <skuView ref="skuView" @success="skuResp"></skuView>
</template>

<script>
import dayjs from 'dayjs';
import skuView from './components/sku'
export default {
    components:{
        skuView
    },
    data(){
        return {
            isSaveing:false,
            showNext:false,
            formData:{
                settle_type:1,
                show_channel:1,
                limit_use_rule:1,
                auto_renew:true,
                use_date_type:1,
                day_duration:30,
                can_no_use_date:1,
                code_source_type:1,
                limit_rule_type:1,
                limit_rule:1,
                booking_date:1,
                booking_type:1,
                booking_unit:1,
                rec_person_type:1,
                rec_person_num_max:1,
                image_list:[],
                mult_sku:1
            },
            specs:[{"name":"","num":0,"list":[ {"name":"","price":1,"weight":"1","weight_unit":'kg',"number":1} ]}],
            skuSpecs:[],
            channelLoad:false,
            rules:{
                line_price: [
                    {required: true, message: '请输入'}
                ],
                price: [
                    {required: true, message: '请输入'}
                ],
                image_list: [
                    {required: true, message: '请上传'}
                ],
                rec_person_type: [
                    {required: true, message: '请选择'}
                ],
                code_source_type: [
                    {required: true, message: '请选择'}
                ],
                can_no_use_date: [
                    {required: true, message: '请选择'}
                ],
                use_date_type: [
                    {required: true, message: '请选择'}
                ],
                product_name: [
                    {required: true, message: '请输入'}
                ],
                use_num_per_consume: [
                    {required: true, message: '请输入'}
                ],
                limit_use_rule: [
                    {required: true, message: '请选择'}
                ],
                sold_start_times: [
                    {required: true, message: '请选择'}
                ],
                show_channel: [
                    {required: true, message: '请选择'}
                ],
                settle_type: [
                    {required: true, message: '请选择'}
                ],
                category: [
                    {required: true, message: '请选择'}
                ],
                product_type: [
                    {required: true, message: '请选择'}
                ],
            },
            deptsProps:{
                value: "category_id",
                label: "name"
            },
            typeData:[],
            categoryData:[]
        }
    },
    created(){
        this.getData()
        this.formData.sold_start_times = this.formattedCurrentDate();
    },
    methods: {
        skuResp(data){
            this.skuSpecs[data.index] = data.data;
        },
        itemSkuView(index,data){
            this.$nextTick(() => {
                this.$refs.skuView.open("edit").setData(index,data)
            })
        },
        addSkuSpecs(){
            this.skuSpecs.push({"image":"","sku_id":this.generate(),"name":"","line_price":1,"price":1,"is_default":false,"specs":[]});
        },
        removeItemSku(index){
            this.skuSpecs.splice(index,1)
        },
        addSpecs(){
            if (this.specs.length >= 5) {
                return this.$message.error("最多只能添加三组规格")
            }
            this.specs.push({"name":"","num":0,"list":[ {"name":"","price":1,"weight":"1","weight_unit":'kg',"number":1} ]});
        },
        addItem(index){
            if (this.specs[index].list.length >= 20) {
                return this.$message.error("最多只能添加20个")
            }
            this.specs[index].list.push({"name":"","price":1,"weight":"1","weight_unit":'kg',"number":1})
        },
        removeSpec(index){
            this.specs.splice(index,1)
        },
        removeItem(index,sub){
            this.specs[index].list.splice(sub,1)
        },
        generate() {
            let timestamp = Date.now();
            if (timestamp === this.lastTimestamp) {
                this.sequence++;
            } else {
                this.sequence = 0;
                this.lastTimestamp = timestamp;
            }
            const randomPart = Math.floor(Math.random() * 10000).toString().padStart(4, '0');
            const timestampPart = timestamp.toString().slice(-6);   // 取时间戳后6位
            const seqPart = this.sequence.toString().padStart(2, '0'); // 序列号占2位（0-99）
            let base = timestampPart + seqPart + randomPart; // 6+2+4=12位
            const remainingLength = 18 - base.length;
            const extraRandom = Math.floor(Math.random() * Math.pow(10, remainingLength)).toString().padStart(remainingLength, '0');
            return base + extraRandom; // 最终18位字符串
        },
        formattedCurrentDate() {
            const now = dayjs();
            const currentDate = now.format('YYYY-MM-DD HH:mm:ss');
            const nextYearDate = now.add(1, 'year').format('YYYY-MM-DD HH:mm:ss');
            return [currentDate,nextYearDate];
        },
        async getTemplate(){
            var { formData, $message } = this;
            if (formData.product_type && formData.category) {
                // var resp = await this.$API.merGoods.template.post({"product_type":formData.product_type,"category":formData.category});
                this.showNext = true;
                return ;
            }
        },
        async getData(){
            this.channelLoad = true;
            var resp = await this.$API.category.list.get();
            if (resp.code == 0) {
                return this.$message.error(resp.msg)
            }
            this.categoryData = resp.data;
            this.getCate()
        },
        async getCate(){
            var resp = await this.$API.merGoods.type.get();
            this.channelLoad = false;
            if (resp.code == 0) {
                return this.$message.error(resp.msg)
            }
            this.typeData = resp.data;
        },
        reback(){
            this.$confirm(`确定要退出添加商品吗？`, '提示', {
                type: 'warning'
            }).then(() => {
                this.$router.go(-1)
            }).catch(() => {

            })
        },
        async submit(){
            var { formData, $message } = this;
            var validate = await this.$refs.dialogForm.validate().catch(()=>{});
            if(!validate){ return false }
            formData.specs = this.specs;
            formData.skuSpecs = this.skuSpecs;
            if (formData.sold_start_times) {
                var sold_start_time = formData.sold_start_times;
                formData.sold_start_time = this.$TOOL.dateFormat(sold_start_time[0],"yyyy-MM-dd")
                formData.sold_end_time = this.$TOOL.dateFormat(sold_start_time[1],"yyyy-MM-dd")
            }
            if (formData.use_times) {
                var use_time = formData.use_times;
                formData.use_time_start = this.$TOOL.dateFormat(use_time[0],"yyyy-MM-dd")
                formData.use_time_end = this.$TOOL.dateFormat(use_time[1],"yyyy-MM-dd")
            }
            this.isSaveing = true;
            var resp = await this.$API.merGoods.save.post(formData);
            this.isSaveing = false;
            if (resp.code == 0) {
                return $message.error(resp.msg)
            }
            $message.success(resp.msg)
            this.$router.go(-1)
        }
    }
}
</script>


<style scoped>
.group-mix .mix-title{display: flex;align-items: center;line-height: 32px;font-weight: bold;font-size: 12px;gap: 5px;}
.group-mix .mix-item{padding-left: 10px;position: relative;line-height: 32px;margin-left: 10px;}
.group-mix .mix-item span{color: orange;padding: 0 5px;}
.group-mix .mix-item::after{position: absolute;top: 0;width: 5px;height: 5px;background-color: #000;border-radius: 5px;content: "";left: 0;top: 38%;}
.mobile-group{background-color: #fff;margin-top: 10px;padding: 10px;}
.mobile-group .group-title{font-size: 14px;font-weight: bold;color: #333;line-height: 36px;}
.mobile-group .body-title{display: flex;align-items: center;line-height: 32px;font-size: 14px;color: #333;font-weight: bold;gap: 8px;}
.mobile-group .body-title span{font-size: 12px;font-weight: normal;color: #666;}
.mobile-group .body-item-li{display: flex;align-items: center;justify-content: space-between;line-height: 32px;font-size: 12px;color: #333;font-weight: bold;}
.mobile-group .body-item-li .item-right{display: flex;align-items: center;gap: 10px;}

.mobile-bannber{background-color: #f8f8f8;}
.mobile-info{padding: 10px;background-color: #fff;}
.mobile-info .info-title{font-size: 14px;font-weight: bold;line-height: 36px;}
.mobile-info .info-price{display: flex;align-items: flex-end;gap: 8px;}
.mobile-info .info-price .price{color: #f00;font-size: 22px;font-weight: bold;}
.mobile-info .info-price .line{color: #666;font-size: 12px;text-decoration:line-through;}
.mobile-info .info-price .dis{background-color: rgb(255, 234, 234);;color: rgb(255, 68, 68);;padding: 5px;border-radius: 2px;}
.mobile-info .item-tag{display: flex;align-items: center;gap: 10px;font-size: 12px;}
.mobile-info .item-tag .tag-li{display: flex;align-items: center;gap: 5px;}
.mobile-info .sku-list{display: flex;align-items: center;margin: 10px 0;}
.mobile-info .sku-list .sku-title{color: #999090;font-size: 12px;}
.mobile-info .sku-list .sku-list-body{display: flex;align-items: center;margin-left: 8px;flex: 1;overflow: hidden;overflow-x: auto;gap: 8px;}
.mobile-info .sku-list .sku-list-body .sku-item{background-color: #f6fafd;padding: 8px 16px;border-radius: 8px;text-wrap: nowrap;}

.preview-mobile{margin-top: 10px;box-shadow: 0 20px 30px 0 rgb(63 63 65 / 6%);border-radius: 10px;border: 1px solid #f8f8f8;box-sizing: border-box;background-color: #f8f8f8;}
.radio-flex{display: flex;align-items: center;gap: 5px;}
.fs12{color: #999;font-size: 12px;}

.specs{margin-top: 15px;background-color: #f8f8f8;}
.specs-header{
    display: flex;
    background-color: #ddd;
    padding: 10px;
}
.specs-tips{
    padding: 0 10px 10px 10px;
    background-color: #ddd;
}
.specs-header .specs-left{
    display: flex;
    align-items: center;
    flex: 1;
    gap: 10px;
}
.specs-header .specs-right{
    display: flex;
    margin-left: auto;
    margin-right: 0;
}
.specs-body{display: flex;align-items: center;gap: 10px;padding: 10px;flex-direction: row;flex-wrap: wrap;}
.specs-body .body-item{padding: 5px;display: flex;align-items: center;}
.specs-body .body-item .item-dels{margin-left: 10px;}
.item-img{margin-bottom: 5px;}
.mb10{margin-bottom: 10px;}
.specs-footer{background-color: #ddd;padding: 10px;}
.sku-table{margin-top: 10px;}
.el-upload__tip,
.el-upload-list__item,
.el-dialog__wrapper {
    z-index: 9999 !important;
}
</style>