|
|
@@ -0,0 +1,759 @@
|
|
|
+<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="1">不限制</el-radio>
|
|
|
+ <el-radio :label="2">限库存</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="团购库存数量" prop="use_num_per_consume" v-if="formData.limit_use_rule==2">
|
|
|
+ <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:true,
|
|
|
+ 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:[],
|
|
|
+ detail_image_list:[],
|
|
|
+ environment_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()
|
|
|
+ var id = this.$route.query.id;
|
|
|
+ var product_id = this.$route.query.product_id;
|
|
|
+ this.getDetail(id,product_id);
|
|
|
+ // this.formData.sold_start_time = this.formattedCurrentDate();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async getDetail(id,product_id){
|
|
|
+ var resp = await this.$API.merGoods.detail.get({"id":id,"product_id":product_id});
|
|
|
+ if (resp.code == 0) {
|
|
|
+ this.$message.error(resp.msg);
|
|
|
+ setTimeout(function(){
|
|
|
+ this.$router.go(-1)
|
|
|
+ },1500)
|
|
|
+ }
|
|
|
+ this.formData = resp.data;
|
|
|
+ this.specs = resp.data.specs;
|
|
|
+ this.skuSpecs = resp.data.skuSpecs;
|
|
|
+ },
|
|
|
+ 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>
|
Zory