792 lines
46 KiB
Vue
792 lines
46 KiB
Vue
|
<template>
|
|||
|
|
<obj-modal class="obj-modal" ref="modal" labelWidth="150px" :modalConfig="modalConfig" :modalData="modalData"
|
|||
|
|
:modalHandles="modalHandles">
|
|||
|
|
<div slot="dialog__content">
|
|||
|
|
<el-card class="box-card mt14" :body-style="{ padding: '0 20px 20px' }" shadow="never" :bordered="false">
|
|||
|
|
<el-tabs class="list-tabs" v-model="currentTab">
|
|||
|
|
<el-tab-pane v-for="(item, index) in headTab" :key="index" :label="item.tit"
|
|||
|
|
:name="item.name"></el-tab-pane>
|
|||
|
|
</el-tabs>
|
|||
|
|
<el-form ref="formValidate" v-loading="fullscreenLoading" class="formValidate form-boder-padding"
|
|||
|
|
:rules="ruleValidate" :model="formValidate" label-width="108px" @submit.native.prevent>
|
|||
|
|
<el-row v-show="currentTab === '1'" :gutter="24">
|
|||
|
|
<!-- 商品信息-->
|
|||
|
|
<el-col v-bind="grid2">
|
|||
|
|
<el-form-item label="商品名称：" prop="name">
|
|||
|
|
<el-input class="from-ipt-width" v-model.trim="formValidate.name" maxlength="249"
|
|||
|
|
placeholder="请输入商品名称" :disabled="isDisabled" />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col v-bind="grid2">
|
|||
|
|
<el-form-item label="商户商品分类：" prop="cateIds">
|
|||
|
|
<el-cascader class="from-ipt-width" v-model="formValidate.cateIds"
|
|||
|
|
:options="getProductCategory" :props="props2" clearable :show-all-levels="false"
|
|||
|
|
:disabled="isDisabled" />
|
|||
|
|
<el-button class="ml15" @click="handleAddMenu({ id: 0, name: '顶层目录' })">添加分类</el-button>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col v-bind="grid2">
|
|||
|
|
<el-form-item label="平台商品分类：" prop="categoryId">
|
|||
|
|
<el-cascader class="from-ipt-width" @change="onChangeCategory"
|
|||
|
|
v-model="formValidate.categoryId" :options="productClassify" :props="props1"
|
|||
|
|
filterable clearable :show-all-levels="false" :disabled="isDisabled" />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col v-bind="grid2">
|
|||
|
|
<el-form-item label="品牌：" prop="brandId">
|
|||
|
|
<el-select class="from-ipt-width" clearable filterable v-model="formValidate.brandId"
|
|||
|
|
:loading="loading" remote :disabled="isDisabled || !formValidate.categoryId"
|
|||
|
|
placeholder="请选择品牌">
|
|||
|
|
<el-option v-for="user in brandList" :key="user.id" :label="user.name"
|
|||
|
|
:value="user.id"> </el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col v-bind="grid2">
|
|||
|
|
<el-form-item label="单位：" prop="unitName">
|
|||
|
|
<el-input v-model.trim="formValidate.unitName" placeholder="请输入单位"
|
|||
|
|
class="from-ipt-width" :disabled="isDisabled" />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col v-if="formValidate.type !== 5 && formValidate.type !== 6" :xs="18" :sm="18" :md="18"
|
|||
|
|
:lg="12" :xl="12">
|
|||
|
|
<!-- <el-form-item label="运费模板：" prop="tempId">
|
|||
|
|
<el-select v-model="formValidate.tempId" placeholder="请选择" :disabled="isDisabled"
|
|||
|
|
class="from-ipt-width mr20">
|
|||
|
|
<el-option v-for="item in shippingTemplates" :key="item.id" :label="item.name"
|
|||
|
|
:value="item.id" />
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item> -->
|
|||
|
|
</el-col>
|
|||
|
|
<el-col v-bind="grid2">
|
|||
|
|
<el-form-item label="商品关键字：">
|
|||
|
|
<div class="from-tips">用户可以根据关键字进行商品搜索</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col v-bind="grid2">
|
|||
|
|
<el-form-item label="商品简介：" prop="intro">
|
|||
|
|
<el-input class="from-ipt-width" v-model.trim="formValidate.intro" type="textarea"
|
|||
|
|
maxlength="250" :rows="3" placeholder="请输入商品简介" :disabled="isDisabled" />
|
|||
|
|
<div class="from-tips">通过公众号分享商品详情，会展示此简介信息</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col v-bind="grid2">
|
|||
|
|
<el-form-item label="商品封面图：" prop="image">
|
|||
|
|
<div class="upLoadPicBox acea-row" @click="modalPicTap('1')" :disabled="isDisabled">
|
|||
|
|
<div v-if="formValidate.image" class="pictrue"><img :src="formValidate.image" />
|
|||
|
|
</div>
|
|||
|
|
<div v-else class="upLoad">
|
|||
|
|
<i class="el-icon-camera cameraIconfont" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="from-tips" v-show="!isDisabled">建议尺寸：800*800px，上传小于500kb的图片</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="24">
|
|||
|
|
<el-form-item label="商品轮播图：" prop="sliderImages">
|
|||
|
|
<div class="acea-row">
|
|||
|
|
<div v-for="(item, index) in formValidate.sliderImages" :key="index" class="pictrue"
|
|||
|
|
draggable="true" @dragstart="handleDragStart($event, item)"
|
|||
|
|
@dragover.prevent="handleDragOver($event, item)"
|
|||
|
|
@dragenter="handleDragEnter($event, item)"
|
|||
|
|
@dragend="handleDragEnd($event, item)">
|
|||
|
|
<img :src="item" />
|
|||
|
|
<i v-show="!isDisabled" class="el-icon-error btndel"
|
|||
|
|
@click="handleRemove(index)" />
|
|||
|
|
</div>
|
|||
|
|
<div v-if="formValidate.sliderImages.length < 10 && !isDisabled"
|
|||
|
|
class="upLoadPicBox" @click="modalPicTap('2')">
|
|||
|
|
<div class="upLoad">
|
|||
|
|
<i class="el-icon-camera cameraIconfont" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="from-tips">建议尺寸：800*800px，上传小于500kb的图片；最多可上传10张图片，拖动可调整顺序</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col v-bind="grid2">
|
|||
|
|
<el-form-item label="保障服务：">
|
|||
|
|
<div class="acea-row row-middle mb5">
|
|||
|
|
<el-select class="from-ipt-width" v-model="formValidate.guaranteeIdsList"
|
|||
|
|
placeholder="请选择保障服务" clearable filterable :multiple="multiples"
|
|||
|
|
:disabled="isDisabled" @change="changeGuarantee">
|
|||
|
|
<el-option :value="item.id" v-for="(item, index) in guaranteeNew" :key="index"
|
|||
|
|
:label="item.name"></el-option>
|
|||
|
|
</el-select>
|
|||
|
|
<el-switch :disabled="isDisabled" class="ml10" v-model="isShowGroup"
|
|||
|
|
:active-value="true" :inactive-value="false" active-text="多选" inactive-text="单选"
|
|||
|
|
@change="onchangeIsShow" />
|
|||
|
|
</div>
|
|||
|
|
<el-tag v-for="(item, index) in guaranteeName" :key="index" class="mr10">{{ item
|
|||
|
|
}}</el-tag>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col v-bind="grid2">
|
|||
|
|
<el-form-item label="主图视频：" prop="video_link">
|
|||
|
|
<div class="acea-row">
|
|||
|
|
<el-input v-model="videoLink" :disabled="isDisabled" size="small"
|
|||
|
|
class="from-ipt-width" placeholder="请输入MP4格式的视频链接">
|
|||
|
|
<input ref="refid" type="file" style="display: none" />
|
|||
|
|
<el-upload class="upload-demo" action slot="append"
|
|||
|
|
:http-request="handleUploadForm" :before-upload="beforeAvatarUpload"
|
|||
|
|
:headers="myHeaders" :show-file-list="false" :disabled="isDisabled"
|
|||
|
|
multiple>
|
|||
|
|
<el-button :disabled="isDisabled" size="small">
|
|||
|
|
{{ videoLink ? '确认添加' : '上传视频' }}</el-button>
|
|||
|
|
</el-upload>
|
|||
|
|
</el-input>
|
|||
|
|
</div>
|
|||
|
|
<div class="from-tips">请上传小于20M的视频</div>
|
|||
|
|
<div v-if="videoLink" class="iview-video-style">
|
|||
|
|
<video class="from-ipt-width" style="height: 100% !important; border-radius: 10px"
|
|||
|
|
:src="videoLink" controls="controls">
|
|||
|
|
您的浏览器不支持 video 标签。
|
|||
|
|
</video>
|
|||
|
|
<div class="mark" />
|
|||
|
|
<i class="el-icon-delete iconv" @click="delVideo" />
|
|||
|
|
</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<!-- 商品规格-->
|
|||
|
|
<el-row v-show="currentTab === '2'" :gutter="24">
|
|||
|
|
<el-col :span="24">
|
|||
|
|
<el-form-item label="商品规格：" props="specType">
|
|||
|
|
<el-radio-group v-model="formValidate.specType"
|
|||
|
|
@change="onChangeSpec(formValidate.specType)" :disabled="isDisabled">
|
|||
|
|
<el-radio :label="false" class="radio">单规格</el-radio>
|
|||
|
|
<el-radio :label="true">多规格</el-radio>
|
|||
|
|
</el-radio-group>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="佣金设置：" props="isSub">
|
|||
|
|
<el-radio-group v-model="formValidate.isSub" @change="onChangetype(formValidate.isSub)"
|
|||
|
|
:disabled="isDisabled">
|
|||
|
|
<el-radio :label="true" class="radio">单独设置</el-radio>
|
|||
|
|
<el-radio :label="false">默认设置</el-radio>
|
|||
|
|
</el-radio-group>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="会员商品：" required>
|
|||
|
|
<el-radio-group v-model="formValidate.isPaidMember"
|
|||
|
|
@change="onChangetype(formValidate.isSub)" :disabled="isDisabled">
|
|||
|
|
<el-radio :label="true" class="radio">是</el-radio>
|
|||
|
|
<el-radio :label="false">否</el-radio>
|
|||
|
|
</el-radio-group>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<!-- 多规格添加-->
|
|||
|
|
<el-col v-if="formValidate.specType && !isDisabled" :span="24" class="noForm">
|
|||
|
|
<el-form-item label="选择规格：" prop="">
|
|||
|
|
<div class="acea-row">
|
|||
|
|
<el-select v-model="formValidate.selectRule" style="width: 600px">
|
|||
|
|
<el-option v-for="item in ruleList" :key="item.id" :label="item.ruleName"
|
|||
|
|
:value="item.id" />
|
|||
|
|
</el-select>
|
|||
|
|
<el-button type="primary" class="ml20" @click="confirm">确认</el-button>
|
|||
|
|
<el-button @click="addRule">添加规格</el-button>
|
|||
|
|
</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
<!-- <el-form-item v-if="formValidate.attr.length">
|
|||
|
|
<div class="from-tips mb5">规格值支持拖拽排序,调整默认选中的规格</div>
|
|||
|
|
<div v-for="(item, index) in formValidate.attr" :key="index">
|
|||
|
|
<div class="acea-row row-middle">
|
|||
|
|
<span class="mr5">{{ item.attrName }}</span><i class="el-icon-circle-close"
|
|||
|
|
@click="handleRemoveAttr(index)" />
|
|||
|
|
</div>
|
|||
|
|
<div class="acea-row row-middle">
|
|||
|
|
<div v-for="(j, indexn) in item.attrValue" :key="indexn" draggable="true"
|
|||
|
|
@dragstart="handleDragStart($event, j)"
|
|||
|
|
@dragover.prevent="handleDragOver($event, j)"
|
|||
|
|
@dragenter="handleDragEnter($event, j, index)"
|
|||
|
|
@dragend="handleDragEnd($event, j)">
|
|||
|
|
<el-tag closable size="medium" :disable-transitions="false"
|
|||
|
|
class="mb5 mr10 pointer" @close="handleClose(item.attrValue, indexn)">
|
|||
|
|
{{ j }}
|
|||
|
|
</el-tag>
|
|||
|
|
</div>
|
|||
|
|
<el-input v-if="item.inputVisible" ref="saveTagInput" placeholder="按回车键添加"
|
|||
|
|
v-model.trim="item.attrValue.attrsVal" class="input-new-tag" size="small"
|
|||
|
|
@keyup.enter.native="createAttr(item.attrValue.attrsVal, index)" />
|
|||
|
|
<el-button v-else class="button-new-tag" size="small" @click="showInput(item)">+
|
|||
|
|
添加</el-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-form-item> -->
|
|||
|
|
<div class="acea-row">
|
|||
|
|
<el-form-item label="规格：">
|
|||
|
|
<el-input v-model.trim="formDynamic.attrsName" placeholder="请输入规格"
|
|||
|
|
style="width: 255px" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="规格值：" label-width="90px">
|
|||
|
|
<el-input v-model.trim="formDynamic.attrsVal" placeholder="请输入规格值"
|
|||
|
|
style="width: 254px" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label-width="0px">
|
|||
|
|
<el-button class="ml20" size="small" type="primary"
|
|||
|
|
@click="createAttrName">确定</el-button>
|
|||
|
|
<el-button size="small" @click="offAttrName">取消</el-button>
|
|||
|
|
</el-form-item>
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
<!-- 批量设置-->
|
|||
|
|
<el-col v-if="formValidate.attr.length > 0 && formValidate.specType && !isDisabled" :span="24"
|
|||
|
|
class="noForm">
|
|||
|
|
<el-form-item label="批量设置：">
|
|||
|
|
<el-alert title="价格设置范围 0.01~999999.99" type="info"> </el-alert>
|
|||
|
|
<el-table :data="oneFormBatch" border class="tabNumWidth" size="small">
|
|||
|
|
<el-table-column label="图片" width="80" align="center">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<div class="upLoadPicBox" @click="modalPicTap('1', 'pi')">
|
|||
|
|
<div v-if="scope.row.image" class="pictrue tabPic"><img
|
|||
|
|
:src="scope.row.image" /></div>
|
|||
|
|
<div v-else class="upLoad tabPic">
|
|||
|
|
<i class="el-icon-camera cameraIconfont" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column v-if="formValidate.isSub" label="一级返佣(%)" min-width="120"
|
|||
|
|
align="center">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-input maxlength="6" v-model.trim="scope.row.brokerage" min="0"
|
|||
|
|
:max="scope.row.price" class="priceBox"
|
|||
|
|
@keyup.native="keyupEventBrokerage('brokerage', scope.$index, 1)" />
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column v-if="formValidate.isSub" label="二级返佣(%)" min-width="120"
|
|||
|
|
align="center">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-input maxlength="6" v-model.trim="scope.row.brokerageTwo" min="0"
|
|||
|
|
:max="scope.row.price" class="priceBox"
|
|||
|
|
@keyup.native="keyupEventBrokerage('brokerageTwo', scope.$index, 1)" />
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column v-for="(item, iii) in attrValue" :key="iii"
|
|||
|
|
:label="formThead[iii].title" min-width="120" align="center">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-input v-if="iii === 'barCode'" v-model="scope.row[iii]" maxlength="40"
|
|||
|
|
type="test" class="priceBox" :readonly="false" />
|
|||
|
|
<el-input-number v-else v-model.trim="scope.row[iii]" :max="999999.99"
|
|||
|
|
:step="iii === 'stock' ? 1 : 0.01" controls-position="right"
|
|||
|
|
step-strictly></el-input-number>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<template v-if="formValidate.isSub"> </template>
|
|||
|
|
<el-table-column label="操作" width="70" align="center">
|
|||
|
|
<template>
|
|||
|
|
<a class="submission" @click="batchAdd">批量添加</a>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
|
|||
|
|
<!-- 单规格表格-->
|
|||
|
|
<el-form-item v-if="formValidate.specType === false">
|
|||
|
|
<el-alert title="价格设置范围 0.01~999999.99" type="info"> </el-alert>
|
|||
|
|
<el-table :data="OneattrValue" border class="tabNumWidth" size="small">
|
|||
|
|
<el-table-column label="图片" width="77" align="center">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<div class="upLoadPicBox" @click="modalPicTap('1', 'dan', 'pi')">
|
|||
|
|
<div v-if="scope.row.image" class="pictrue tabPic"><img
|
|||
|
|
:src="scope.row.image" /></div>
|
|||
|
|
<div v-else class="upLoad tabPic">
|
|||
|
|
<i class="el-icon-camera cameraIconfont" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<template v-if="formValidate.isSub">
|
|||
|
|
<el-table-column label="一级返佣(%)" min-width="120" align="center">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-input maxlength="6" :disabled="isDisabled"
|
|||
|
|
v-model.trim="scope.row.brokerage" min="0" class="priceBox"
|
|||
|
|
@keyup.native="keyupEventBrokerage('brokerage', scope.$index, 2)" />
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="二级返佣(%)" min-width="120" align="center">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-input maxlength="6" :disabled="isDisabled"
|
|||
|
|
v-model.trim="scope.row.brokerageTwo" min="0" class="priceBox"
|
|||
|
|
@keyup.native="keyupEventBrokerage('brokerageTwo', scope.$index, 2)" />
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</template>
|
|||
|
|
<el-table-column v-for="(item, iii) in attrValue" :key="iii"
|
|||
|
|
:label="formThead[iii].title" min-width="120" align="center">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-input v-if="iii === 'barCode'" :disabled="isDisabled"
|
|||
|
|
v-model="scope.row[iii]" maxlength="40" type="test" class="priceBox"
|
|||
|
|
:readonly="false" />
|
|||
|
|
<el-input-number v-else v-model.trim="scope.row[iii]" :disabled="isDisabled"
|
|||
|
|
:min="iii === 'stock' ? 1 : 0.01" :max="formValidate.isPaidMember && iii === 'vipPrice' ? Number(scope.row.price) - 0.01 : 999999.99
|
|||
|
|
" :step="iii === 'stock' ? 1 : 0.01" controls-position="right"
|
|||
|
|
step-strictly></el-input-number>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<template v-if="formValidate.type == 5">
|
|||
|
|
<el-table-column label="云盘设置" min-width="120" align="center">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-button v-if="!scope.row.expand" size="small"
|
|||
|
|
@click="handleAddVirtually(0, 'OneattrValue', 1)">添加链接</el-button>
|
|||
|
|
<el-button v-else class="seeCatMy pointer" type="text" size="small"
|
|||
|
|
@click="seeVirtually(OneattrValue[0], 'OneattrValue', 0, 1)">已设置</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</template>
|
|||
|
|
<template v-if="formValidate.type == 6">
|
|||
|
|
<el-table-column label="卡密设置" min-width="120" align="center">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-button v-if="!scope.row.cdkeyId" size="small"
|
|||
|
|
@click="handleAddVirtually(0, 'OneattrValue', 2)">添加卡密</el-button>
|
|||
|
|
<el-button v-else type="text" class="seeCatMy pointer"
|
|||
|
|
@click="seeVirtually(OneattrValue[0], 'OneattrValue', 0, 2)">{{
|
|||
|
|
scope.row.cdkeyLibraryName }}</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</template>
|
|||
|
|
</el-table>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="全部sku：" v-if="$route.params.id && showAll">
|
|||
|
|
<el-button type="default" @click="showAllSku()" :disabled="isDisabled">展示</el-button>
|
|||
|
|
</el-form-item>
|
|||
|
|
<!-- 多规格表格-->
|
|||
|
|
<el-form-item v-if="formValidate.attr.length > 0 && formValidate.specType" label="商品属性："
|
|||
|
|
class="labeltop" :class="isDisabled ? 'disLabel' : 'disLabelmoren'">
|
|||
|
|
<el-alert title="价格设置范围 0.01~999999.99" type="info"> </el-alert>
|
|||
|
|
<el-table :data="ManyAttrValue" border class="tabNumWidth" size="small">
|
|||
|
|
<template v-if="manyTabDate">
|
|||
|
|
<el-table-column v-for="(item, iii) in manyTabDate" :key="iii"
|
|||
|
|
:label="manyTabTit[iii].title" min-width="80" align="center">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<span class="priceBox" v-text="scope.row[iii]" />
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</template>
|
|||
|
|
<el-table-column label="图片" width="80" align="center">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<div class="upLoadPicBox" @click="modalPicTap('1', 'duo', scope.$index)">
|
|||
|
|
<div v-if="scope.row.image" class="pictrue tabPic"><img
|
|||
|
|
:src="scope.row.image" /></div>
|
|||
|
|
<div v-else class="upLoad tabPic">
|
|||
|
|
<i class="el-icon-camera cameraIconfont" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column v-if="formValidate.isSub" label="一级返佣(%)" min-width="120"
|
|||
|
|
align="center">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-input :disabled="isDisabled" v-model.trim="scope.row.brokerage"
|
|||
|
|
maxlength="6" min="0" class="priceBox"
|
|||
|
|
@keyup.native="keyupEventBrokerage('brokerage', scope.$index, 3)" />
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column v-if="formValidate.isSub" label="二级返佣(%)" min-width="120"
|
|||
|
|
align="center">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-input maxlength="6" :disabled="isDisabled"
|
|||
|
|
v-model.trim="scope.row.brokerageTwo" min="0" class="priceBox"
|
|||
|
|
@keyup.native="keyupEventBrokerage('brokerageTwo', scope.$index, 3)" />
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column v-for="(item, iii) in attrValue" :key="iii"
|
|||
|
|
:label="formThead[iii].title" min-width="120" align="center">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-input v-if="iii === 'barCode'" :disabled="isDisabled"
|
|||
|
|
v-model="scope.row[iii]" maxlength="40" type="test" class="priceBox"
|
|||
|
|
:readonly="false" />
|
|||
|
|
<el-input-number v-else v-model.trim="scope.row[iii]" :disabled="isDisabled"
|
|||
|
|
:min="iii === 'stock' ? 1 : 0.01" :max="formValidate.isPaidMember && iii === 'vipPrice' ? Number(scope.row.price) - 0.01 : 999999.99
|
|||
|
|
" :step="iii === 'stock' ? 1 : 0.01" controls-position="right"
|
|||
|
|
step-strictly></el-input-number>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<template v-if="formValidate.isSub"></template>
|
|||
|
|
<template v-if="formValidate.type == 5">
|
|||
|
|
<el-table-column label="云盘设置" min-width="120" align="center">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-button v-if="!scope.row.expand" size="small"
|
|||
|
|
@click="handleAddVirtually(scope.$index, 'ManyAttrValue', 1)">添加链接</el-button>
|
|||
|
|
<el-button v-else class="seeCatMy pointer" type="text" size="small"
|
|||
|
|
@click="seeVirtually(ManyAttrValue[scope.$index], 'ManyAttrValue', scope.$index, 1)">已设置</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</template>
|
|||
|
|
<template v-if="formValidate.type == 6">
|
|||
|
|
<el-table-column label="卡密设置" min-width="120" align="center">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-button v-if="!scope.row.cdkeyId" size="small"
|
|||
|
|
@click="handleAddVirtually(scope.$index, 'ManyAttrValue', 2)">添加卡密</el-button>
|
|||
|
|
<el-button v-else type="text" class="seeCatMy pointer"
|
|||
|
|
@click="seeVirtually(ManyAttrValue[scope.$index], 'ManyAttrValue', scope.$index, 2)">{{
|
|||
|
|
scope.row.cdkeyLibraryName }}</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</template>
|
|||
|
|
<el-table-column v-if="!isDisabled" key="3" label="操作" width="70" align="center">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<a class="submission" @click="delAttrTable(scope.$index)">删除</a>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<!-- 商品详情-->
|
|||
|
|
<el-row v-show="currentTab === '3' && !isDisabled">
|
|||
|
|
<el-col :span="24">
|
|||
|
|
<el-form-item label="商品详情：">
|
|||
|
|
<Tinymce v-model.trim="formValidate.content"></Tinymce>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
<el-row v-show="currentTab === '3' && isDisabled">
|
|||
|
|
<el-col :span="24">
|
|||
|
|
<el-form-item label="商品详情：">
|
|||
|
|
<span v-html="formValidate.content || '无'"></span>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<!-- 其他设置-->
|
|||
|
|
<el-row v-show="currentTab === '4'">
|
|||
|
|
<el-form-item label="排序：">
|
|||
|
|
<el-input-number v-model.trim="formValidate.sort" :min="1" :max="9999" placeholder="请输入排序"
|
|||
|
|
@keyup.native="proving1" :disabled="isDisabled" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<div class="acea-row">
|
|||
|
|
<el-form-item label="赠送优惠券：" class="proCoupon">
|
|||
|
|
<div class="from-tips mb14">用户购买商品后赠送的优惠券</div>
|
|||
|
|
<div class="acea-row">
|
|||
|
|
<el-tag v-for="(tag, index) in formValidate.coupons" :key="index" class="mr10 mb10"
|
|||
|
|
:closable="!isDisabled" :disable-transitions="false"
|
|||
|
|
@close="handleCloseCoupon(tag)">
|
|||
|
|
{{ tag.name }}
|
|||
|
|
</el-tag>
|
|||
|
|
<span class="mr15" v-if="formValidate.couponIds == null">无</span>
|
|||
|
|
<el-button v-if="!isDisabled" size="small" class="mr15"
|
|||
|
|
@click="addCoupon">选择优惠券</el-button>
|
|||
|
|
</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
</div>
|
|||
|
|
</el-row>
|
|||
|
|
<el-form-item>
|
|||
|
|
<el-button v-if="Number(currentTab) > 1" class="submission priamry_border"
|
|||
|
|
@click="handleSubmitUp">上一步</el-button>
|
|||
|
|
<el-button v-show="Number(currentTab) < 4" class="priamry_border"
|
|||
|
|
@click="handleSubmitNest('formValidate')">下一步</el-button>
|
|||
|
|
<el-button v-show="(currentTab === '3' || $route.params.id) && !isDisabled" type="primary"
|
|||
|
|
class="submission" @click="handleSubmit('formValidate')"
|
|||
|
|
:loading="loadingBtn">保存</el-button>
|
|||
|
|
<el-button v-show="(currentTab === '3' || $route.params.id) &&
|
|||
|
|
!isDisabled &&
|
|||
|
|
(this.productSwitch || this.formValidate.auditStatus > 0)
|
|||
|
|
" type="primary" class="submission" @click="handleSubmitAndAudit('formValidate')"
|
|||
|
|
:loading="loadingBtn">保存并提审</el-button>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
</el-card>
|
|||
|
|
</div>
|
|||
|
|
</obj-modal>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
const defaultObj = {
|
|||
|
|
image: '',
|
|||
|
|
sliderImages: [],
|
|||
|
|
sliderImage: '',
|
|||
|
|
name: '',
|
|||
|
|
intro: '',
|
|||
|
|
keyword: '',
|
|||
|
|
cateIds: [], // 商品分类id
|
|||
|
|
cateId: null, // 商品分类id传值
|
|||
|
|
unitName: '',
|
|||
|
|
sort: 0,
|
|||
|
|
isShow: false,
|
|||
|
|
tempId: '',
|
|||
|
|
attrValue: [
|
|||
|
|
{
|
|||
|
|
image: '',
|
|||
|
|
price: 0.01,
|
|||
|
|
vipPrice: 0.01,
|
|||
|
|
cost: 0.01,
|
|||
|
|
otPrice: 0.01,
|
|||
|
|
stock: 0,
|
|||
|
|
barCode: '',
|
|||
|
|
weight: 0,
|
|||
|
|
volume: 0,
|
|||
|
|
brokerage: 0,
|
|||
|
|
brokerageTwo: 0,
|
|||
|
|
cdkeyId: null,
|
|||
|
|
cdkeyLibraryName: '',
|
|||
|
|
expand: '',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
attr: [],
|
|||
|
|
selectRule: '',
|
|||
|
|
isSub: false,
|
|||
|
|
isPaidMember: false,
|
|||
|
|
content: '',
|
|||
|
|
specType: false,
|
|||
|
|
id: undefined,
|
|||
|
|
couponIds: [],
|
|||
|
|
coupons: [],
|
|||
|
|
categoryId: 0,
|
|||
|
|
guaranteeIds: '',
|
|||
|
|
guaranteeIdsList: [] || null,
|
|||
|
|
brandId: '',
|
|||
|
|
type: 0, // 商品类型
|
|||
|
|
isAutoSubmitAudit: false, //是否自动提审
|
|||
|
|
isAutoUp: false, //是否自动上架
|
|||
|
|
};
|
|||
|
|
const objTitle = {
|
|||
|
|
price: {
|
|||
|
|
title: '售价（元）',
|
|||
|
|
},
|
|||
|
|
vipPrice: {
|
|||
|
|
title: '会员价（元）',
|
|||
|
|
},
|
|||
|
|
cost: {
|
|||
|
|
title: '成本价（元）',
|
|||
|
|
},
|
|||
|
|
otPrice: {
|
|||
|
|
title: '原价（元）',
|
|||
|
|
},
|
|||
|
|
stock: {
|
|||
|
|
title: '库存',
|
|||
|
|
},
|
|||
|
|
barCode: {
|
|||
|
|
title: '商品编号',
|
|||
|
|
},
|
|||
|
|
weight: {
|
|||
|
|
title: '重量（KG）',
|
|||
|
|
},
|
|||
|
|
volume: {
|
|||
|
|
title: '体积(m³)',
|
|||
|
|
},
|
|||
|
|
brokerage: {
|
|||
|
|
title: '一级返佣(%)',
|
|||
|
|
},
|
|||
|
|
brokerageTwo: {
|
|||
|
|
title: '二级返佣(%)',
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
import Tinymce from "@/components/tinymce";
|
|||
|
|
import { debounce, cloneDeep } from "lodash";
|
|||
|
|
export default {
|
|||
|
|
components: { Tinymce },
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
modalData: {},
|
|||
|
|
modalConfig: {
|
|||
|
|
title: "编辑商品",
|
|||
|
|
show: false,
|
|||
|
|
width: "1300px",
|
|||
|
|
fullscreen: true,
|
|||
|
|
},
|
|||
|
|
//添加商品
|
|||
|
|
headTab: [
|
|||
|
|
{ tit: '商品信息', name: '1' },
|
|||
|
|
{ tit: '规格库存', name: '2' },
|
|||
|
|
{ tit: '商品详情', name: '3' },
|
|||
|
|
{ tit: '其他设置', name: '4' },
|
|||
|
|
],
|
|||
|
|
form: 2,
|
|||
|
|
url: '',
|
|||
|
|
copyConfig: {},
|
|||
|
|
labelarr: [],
|
|||
|
|
isDisabled: this.$route.params.isDisabled === '1' ? true : false,
|
|||
|
|
isCopy: this.$route.params.isCopy === '1' ? true : false, //是否是采集
|
|||
|
|
props2: {
|
|||
|
|
children: 'childList',
|
|||
|
|
label: 'name',
|
|||
|
|
value: 'id',
|
|||
|
|
multiple: false,
|
|||
|
|
emitPath: false,
|
|||
|
|
checkStrictly: true,
|
|||
|
|
},
|
|||
|
|
props1: {
|
|||
|
|
children: 'childList',
|
|||
|
|
label: 'name',
|
|||
|
|
value: 'id',
|
|||
|
|
multiple: false,
|
|||
|
|
emitPath: false,
|
|||
|
|
},
|
|||
|
|
tabs: [],
|
|||
|
|
fullscreenLoading: false,
|
|||
|
|
props: { multiple: true },
|
|||
|
|
active: 0,
|
|||
|
|
OneattrValue: [Object.assign({}, defaultObj.attrValue[0])], // 单规格
|
|||
|
|
ManyAttrValue: [Object.assign({}, defaultObj.attrValue[0])], // 多规格
|
|||
|
|
ruleList: [],
|
|||
|
|
merCateList: [], // 商户分类筛选
|
|||
|
|
shippingList: [], // 运费模板
|
|||
|
|
formThead: Object.assign({}, objTitle),
|
|||
|
|
formValidate: Object.assign({}, defaultObj),
|
|||
|
|
formDynamics: {
|
|||
|
|
ruleName: '',
|
|||
|
|
ruleValue: [],
|
|||
|
|
},
|
|||
|
|
tempData: {
|
|||
|
|
page: 1,
|
|||
|
|
limit: 9999,
|
|||
|
|
},
|
|||
|
|
manyTabTit: {},
|
|||
|
|
manyTabDate: {},
|
|||
|
|
grid2: {
|
|||
|
|
xl: 24,
|
|||
|
|
lg: 24,
|
|||
|
|
md: 24,
|
|||
|
|
sm: 24,
|
|||
|
|
xs: 24,
|
|||
|
|
},
|
|||
|
|
// 规格数据
|
|||
|
|
formDynamic: {
|
|||
|
|
attrsName: '',
|
|||
|
|
attrsVal: '',
|
|||
|
|
},
|
|||
|
|
isBtn: false,
|
|||
|
|
manyFormValidate: [],
|
|||
|
|
currentTab: '1',
|
|||
|
|
isChoice: '',
|
|||
|
|
grid: {
|
|||
|
|
xl: 24,
|
|||
|
|
lg: 24,
|
|||
|
|
md: 24,
|
|||
|
|
sm: 24,
|
|||
|
|
xs: 24,
|
|||
|
|
},
|
|||
|
|
ruleValidate: {
|
|||
|
|
name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
|
|||
|
|
categoryId: [{ required: true, message: '请选择平台商品分类', trigger: 'change' }],
|
|||
|
|
cateIds: [{ required: true, message: '请选择商户商品分类', trigger: 'change', min: '1' }],
|
|||
|
|
unitName: [{ required: true, message: '请输入单位', trigger: 'blur' }],
|
|||
|
|
intro: [{ required: true, message: '请输入商品简介', trigger: 'blur' }],
|
|||
|
|
tempId: [{ required: true, message: '请选择运费模板', trigger: 'change' }],
|
|||
|
|
image: [{ required: true, message: '请上传商品图', trigger: 'change' }],
|
|||
|
|
sliderImages: [{ required: true, message: '请上传商品轮播图', type: 'array', trigger: 'change' }],
|
|||
|
|
specType: [{ required: true, message: '请选择商品规格', trigger: 'change' }],
|
|||
|
|
brandId: [{ required: true, message: '请选择商品品牌', trigger: 'change' }],
|
|||
|
|
},
|
|||
|
|
attrInfo: {},
|
|||
|
|
tableFrom: {
|
|||
|
|
page: 1,
|
|||
|
|
limit: 9999,
|
|||
|
|
keywords: '',
|
|||
|
|
},
|
|||
|
|
tempRoute: {},
|
|||
|
|
keyNum: 0,
|
|||
|
|
isAttr: false,
|
|||
|
|
showAll: false,
|
|||
|
|
guaranteeList: [],
|
|||
|
|
brandList: [],
|
|||
|
|
search: {
|
|||
|
|
limit: 10,
|
|||
|
|
page: 1,
|
|||
|
|
cid: '',
|
|||
|
|
brandName: '',
|
|||
|
|
},
|
|||
|
|
totalPage: 0,
|
|||
|
|
total: 0,
|
|||
|
|
loading: false,
|
|||
|
|
loadingBtn: false,
|
|||
|
|
isShowGroup: false,
|
|||
|
|
guaranteeGroupList: [],
|
|||
|
|
guaranteeNew: [],
|
|||
|
|
guaranteeName: [],
|
|||
|
|
multiples: true,
|
|||
|
|
productClassify: [], //平台商品分类
|
|||
|
|
productType: [
|
|||
|
|
{ tit: '普通商品', id: 0, tit2: '实体货物' },
|
|||
|
|
{ tit: '云盘商品', id: 5, tit2: '同一链接发货' },
|
|||
|
|
{ tit: '卡密商品', id: 6, tit2: '不同充值码发货' },
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
carMytabIndex: 0,
|
|||
|
|
carMytabName: '',
|
|||
|
|
cloudDisk: '', //云盘地址
|
|||
|
|
upload: {
|
|||
|
|
videoIng: false, // 是否显示进度条；
|
|||
|
|
},
|
|||
|
|
videoLink: '', //视频地址
|
|||
|
|
progress: 10, // 进度条默认0
|
|||
|
|
myHeaders: { 'token': this.$cookie.get('token') },
|
|||
|
|
cdkeyId: null, //卡密库id
|
|||
|
|
cdkeyLibraryInfo: null, //卡密库对象
|
|||
|
|
editDialogConfig: {
|
|||
|
|
visible: false,
|
|||
|
|
isCreate: 0, // 0=创建，1=编辑
|
|||
|
|
prent: {}, // 父级对象
|
|||
|
|
data: {},
|
|||
|
|
biztype: { name: '产品分类', value: 1, shortName: '产品' }, // 统一主业务中的目录类型
|
|||
|
|
}, //商品分类
|
|||
|
|
isSwitch: false, //商户开关
|
|||
|
|
productSwitch: false, //商品是否需要审核 true需要审核，false免审
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
mounted() { },
|
|||
|
|
methods: {
|
|||
|
|
toggle(e) {
|
|||
|
|
if (this.modalConfig.show == false) {
|
|||
|
|
this.modalConfig.show = true;
|
|||
|
|
} else {
|
|||
|
|
this.ctxBg.clear();
|
|||
|
|
this.modalConfig.show = false;
|
|||
|
|
}
|
|||
|
|
if (e) {
|
|||
|
|
console.log(e);
|
|||
|
|
this.init(cloneDeep(e.row));
|
|||
|
|
}
|
|||
|
|
return {
|
|||
|
|
add: (item) => {
|
|||
|
|
console.log(item);
|
|||
|
|
this.isAdd = true;
|
|||
|
|
},
|
|||
|
|
update: (row) => {
|
|||
|
|
this.modalData = row;
|
|||
|
|
this.isAdd = false;
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
init(row) { },
|
|||
|
|
onChangeCategory() { },
|
|||
|
|
changeGuarantee() { },
|
|||
|
|
onchangeIsShow() { },
|
|||
|
|
handleUploadForm() { },
|
|||
|
|
beforeAvatarUpload() { },
|
|||
|
|
addCoupon() { }
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
modalHandles() {
|
|||
|
|
return [
|
|||
|
|
{
|
|||
|
|
label: "下载平面图",
|
|||
|
|
type: "info",
|
|||
|
|
plain: true,
|
|||
|
|
icon: "el-icon-download",
|
|||
|
|
loading: this.isLoading,
|
|||
|
|
// submit: true,
|
|||
|
|
handle: debounce(() => {
|
|||
|
|
this.download();
|
|||
|
|
}, 300),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "确定",
|
|||
|
|
type: "primary",
|
|||
|
|
loading: this.isLoading,
|
|||
|
|
// submit: true,
|
|||
|
|
handle: debounce(() => {
|
|||
|
|
}, 300),
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
asyncComputed: {
|
|||
|
|
async getProductCategory() {
|
|||
|
|
let res = await this.$api.mer_admin.getProductCategory();
|
|||
|
|
return res.data.data;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss" scoped></style>
|