1027 lines
28 KiB
Vue
1027 lines
28 KiB
Vue
<template>
|
||
<div class="components-container main-cont">
|
||
<div style="position: relative;">
|
||
<div style="display: inline-block;font-size:18px;margin-bottom: 15px;">
|
||
<a href="#" @click="prev" style="text-decoration:none;font-size: 14px;">
|
||
<icon-svg name="jiantou" style="width: 1.2em;height: 1.2em;position: relative;top: 0.3em;"></icon-svg>
|
||
返回
|
||
</a>
|
||
<span style="display: inline-block;margin: 0 15px;color: #D9D9D9;">|</span>
|
||
<span>积分商品添加</span>
|
||
</div>
|
||
<el-row>
|
||
<el-col :span="6" >
|
||
<span>商品标题：</span>
|
||
<el-input style="width: 200px;" class="margin15" placeholder="请输入商品标题" v-model="title" autosize></el-input>
|
||
</el-col>
|
||
<el-col :span="6" >
|
||
<span>商品积分：</span>
|
||
<el-input style="width:200px;" @keyup.native="proving" class="margin15" placeholder="请输入商品积分" type="number" :min="1" :controls="false" v-model="price" autosize></el-input>
|
||
<p style="color: #F56C6C;font-size: 13px;margin-left:80px;margin-top: 4px;">注:积分等于商品加邮费</p>
|
||
</el-col>
|
||
<el-col :span="6" >
|
||
<span>商品销量：</span>
|
||
<el-input style="width:200px;" @keyup.native="proving" class="margin15" placeholder="请输入商品销量" type="number" :min="1" :controls="false" v-model="sales" autosize></el-input>
|
||
</el-col>
|
||
<el-col :span="6" >
|
||
<span>商品状态：</span>
|
||
<el-select v-model="status" class="margin15" placeholder="请选择商品状态" style="width:200px;">
|
||
<el-option v-for="(item,index) in statusmain2" :key="item.index" :label="item.label" :value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="6">
|
||
<span>商品参数：</span>
|
||
<el-input style="width:200px;" class="margin15" placeholder="请输入商品参数" v-model="buyReason" autosize></el-input>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<span>是否发货：</span>
|
||
<el-select v-model="isExpress" class="margin15" placeholder="请选择商品是否发货" style="width:200px;">
|
||
<el-option v-for="(item,index) in isExpressmain" :key="item.index" :label="item.label" :value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
</el-col>
|
||
</el-row>
|
||
<div style="display: flex;align-items: center;margin: 2% 0;">
|
||
<span style="display: inline-block;text-align: right;">商品封面图：</span>
|
||
<div style=" width:148px;height:148px;background-color: #fbfdff; border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
|
||
<el-upload
|
||
class="avatar-uploader"
|
||
v-model="coverImg"
|
||
:action="uploadUrl"
|
||
:show-file-list="false"
|
||
:on-success="handleAvatarSuccess1"
|
||
>
|
||
<img v-if="coverImg" :src="coverImg" class="avatar" style="width: 148px;height: 148px;"/>
|
||
<i v-else class="el-icon-plus avatar-uploader-icon" style="font-size: 28px;color: #8c939d"></i>
|
||
</el-upload>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex;align-items: center;margin: 2% 0;flex-flow: wrap;">
|
||
<span style="display: inline-block;text-align: right;">商品轮播图：</span>
|
||
<div>
|
||
<el-upload
|
||
:action="uploadUrl"
|
||
list-type="picture-card"
|
||
:on-success="handleUploadSuccess"
|
||
:on-change="handleChange"
|
||
:on-remove="handleRemove">
|
||
<i class="el-icon-plus"></i>
|
||
</el-upload>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex;align-items: center;margin: 2% 0;">
|
||
<span style="display: inline-block;text-align: right;">商品规格：</span>
|
||
<el-radio-group v-model="guige" @change="guigeChange">
|
||
<el-radio :label="0">单规格</el-radio>
|
||
<el-radio :label="1">多规格</el-radio>
|
||
</el-radio-group>
|
||
<div v-if="guigeshow" style="margin-left: 20px;">
|
||
<el-select v-model="ruleId" placeholder="请选择商品规格" style="width:200px;" @change="selectTrigger(ruleId)">
|
||
<el-option v-for="(item,index) in specifdata" :key="item.index" :label="item.ruleName" :value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
|
||
</div>
|
||
<div v-if="ruleValue" style="margin-left: 70px;">
|
||
<div class="ruleitem" v-for="(item,index) in ruleValue" :key="index">
|
||
<div>{{item.value}} <span @click="deleterule(index)"><icon-svg name="schu" class="ruleicon"></icon-svg></span></div>
|
||
<div>
|
||
<el-tag
|
||
:key="tag"
|
||
v-for="(tag,j) in item.detail.split(',')"
|
||
closable
|
||
:disable-transitions="false"
|
||
@close="handleClose(tag,j,item)">
|
||
{{tag}}
|
||
</el-tag>
|
||
<el-input
|
||
class="input-new-tag"
|
||
v-model="inputValues[index]"
|
||
ref="saveTagInput"
|
||
size="small"
|
||
style="width:120px;"
|
||
placeholder="请输入属性名"
|
||
@keyup.enter.native="handleInputConfirm(index,item)"
|
||
>
|
||
</el-input>
|
||
<el-button class="button-new-tag" size="small" @click="handleInputConfirm(index,item)">添加</el-button>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:20px;" v-if="ruleshow">
|
||
<div v-if="isshow" class="btn_specif">
|
||
<el-button type="primary" @click="btnToclick()">添加新规格</el-button>
|
||
<el-button type="success" @click="create()">立即生成</el-button>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:10px;">
|
||
<div v-if="!isshow" style="margin-top: 20px;">
|
||
<div style="display: inline-block;">
|
||
<span style="width:80px;display: inline-block;text-align: right;">规格：</span>
|
||
<el-input style="width:50%;" v-model="releobject.value" placeholder="例:颜色"></el-input>
|
||
</div>
|
||
<div style="display: inline-block;">
|
||
<span style="width:80px;display: inline-block;text-align: right;">规格值：</span>
|
||
<el-input style="width:50%;" v-model="releobject.detail" placeholder="例:黑色"></el-input>
|
||
</div>
|
||
<div style="display: inline-block;">
|
||
<el-button type="primary" @click="speciTo()">确 定</el-button>
|
||
<el-button @click="speciTotwo()">取 消</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex;margin-top: 20px;" v-if="propshow">
|
||
<span>商品属性：</span>
|
||
<div class="property_table">
|
||
<table style="width: 100%;">
|
||
<tr style="display:flex;">
|
||
<th style="width:120px;text-align: left;" v-for="item in headerData">{{item}}</th>
|
||
</tr>
|
||
</table>
|
||
<el-table
|
||
:data="valueData">
|
||
<el-table-column
|
||
v-if="detailJson.length == 1"
|
||
prop="value0"
|
||
width="120">
|
||
</el-table-column>
|
||
<el-table-column
|
||
v-if="detailJson.length == 2"
|
||
prop="value0"
|
||
width="120">
|
||
</el-table-column>
|
||
<el-table-column
|
||
v-if="detailJson.length == 2"
|
||
prop="value1"
|
||
width="120">
|
||
</el-table-column>
|
||
<el-table-column
|
||
v-if="detailJson.length == 3"
|
||
prop="value0"
|
||
width="120">
|
||
</el-table-column>
|
||
<el-table-column
|
||
v-if="detailJson.length == 3"
|
||
prop="value1"
|
||
width="120">
|
||
</el-table-column>
|
||
<el-table-column
|
||
v-if="detailJson.length == 3"
|
||
prop="value2"
|
||
width="120">
|
||
</el-table-column>
|
||
<el-table-column
|
||
v-if="detailJson.length == 4"
|
||
prop="value0"
|
||
width="120">
|
||
</el-table-column>
|
||
<el-table-column
|
||
v-if="detailJson.length == 4"
|
||
prop="value1"
|
||
width="120">
|
||
</el-table-column>
|
||
<el-table-column
|
||
v-if="detailJson.length == 4"
|
||
prop="value2"
|
||
width="120">
|
||
</el-table-column>
|
||
<el-table-column
|
||
v-if="detailJson.length == 4"
|
||
prop="value3"
|
||
width="120">
|
||
</el-table-column>
|
||
<el-table-column
|
||
v-if="detailJson.length == 5"
|
||
prop="value0"
|
||
width="120">
|
||
</el-table-column>
|
||
<el-table-column
|
||
v-if="detailJson.length == 5"
|
||
prop="value1"
|
||
width="120">
|
||
</el-table-column>
|
||
<el-table-column
|
||
v-if="detailJson.length == 5"
|
||
prop="value2"
|
||
width="120">
|
||
</el-table-column>
|
||
<el-table-column
|
||
v-if="detailJson.length == 5"
|
||
prop="value3"
|
||
width="120">
|
||
</el-table-column>
|
||
<el-table-column
|
||
v-if="detailJson.length == 5"
|
||
prop="value4"
|
||
width="120">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="skuImg"
|
||
width="100">
|
||
<template slot-scope="scope">
|
||
<div class="imgWrap" style=" width:60px;height:60px;background-color: #fbfdff; border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 60px;">
|
||
<el-upload
|
||
style="width: 60px;height: 60px;"
|
||
class="avatar-uploader"
|
||
v-model="scope.row.skuImg"
|
||
:action="uploadUrl"
|
||
:show-file-list="false"
|
||
:on-success="handleAvatarSuccess"
|
||
>
|
||
<img v-if="scope.row.skuImg" :src="scope.row.skuImg" class="avatar" style="border-radius: 6px;width:60px;height: 60px;"/>
|
||
<i v-else class="el-icon-plus avatar-uploader-icon" @click="curRowIndex=scope.$index"></i>
|
||
</el-upload>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- <el-table-column
|
||
prop="skuOriginalPrice"
|
||
width="120">
|
||
<template slot-scope="scope">
|
||
<div>
|
||
<el-input type="text" v-model="scope.row.skuOriginalPrice" style="width:80px;font-size:14px;">
|
||
</el-input>
|
||
</div>
|
||
</template>
|
||
</el-table-column> -->
|
||
<el-table-column
|
||
prop="skuPrice"
|
||
width="120">
|
||
<template slot-scope="scope">
|
||
<div>
|
||
<el-input type="text" v-model="scope.row.skuPrice" style="width:80px;font-size:14px;">
|
||
</el-input>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- <el-table-column
|
||
prop="memberPrice"
|
||
width="120">
|
||
<template slot-scope="scope">
|
||
<div>
|
||
<el-input type="text" v-model="scope.row.memberPrice" style="width:80px;font-size:14px;">
|
||
</el-input>
|
||
</div>
|
||
</template>
|
||
</el-table-column> -->
|
||
<el-table-column
|
||
prop="stock"
|
||
width="120">
|
||
<template slot-scope="scope">
|
||
<div>
|
||
<el-input type="text" v-model="scope.row.stock" style="width:80px;font-size:14px;">
|
||
</el-input>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="sales"
|
||
width="120">
|
||
<template slot-scope="scope">
|
||
<div>
|
||
<el-input type="text" v-model="scope.row.sales" style="width:80px;font-size:14px;">
|
||
</el-input>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
width="120">
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
:disabled="!isAuth('userList:delete')"
|
||
size="mini"
|
||
type="danger"
|
||
@click="deleter(scope.$index)">删除
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex;margin-top: 20px;" v-if="propshow1">
|
||
<span>商品属性：</span>
|
||
<div class="property_table">
|
||
<table style="width: 100%;">
|
||
<tr style="display:flex;">
|
||
<th style="width:150px;text-align: left;" v-for="item in headerData2">{{item}}</th>
|
||
</tr>
|
||
</table>
|
||
<el-table
|
||
:data="valueData2">
|
||
<el-table-column
|
||
prop="skuImg"
|
||
width="150">
|
||
<template slot-scope="scope">
|
||
<div class="imgWrap" style=" width:60px;height:60px;background-color: #fbfdff; border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 60px;">
|
||
<el-upload
|
||
style="width: 60px;height: 60px;"
|
||
class="avatar-uploader"
|
||
v-model="scope.row.skuImg"
|
||
:action="uploadUrl"
|
||
:show-file-list="false"
|
||
:on-success="handleAvatarSuccess3"
|
||
>
|
||
<img v-if="scope.row.skuImg" :src="scope.row.skuImg" class="avatar" style="border-radius: 6px;width:60px;height: 60px;"/>
|
||
<i v-else class="el-icon-plus avatar-uploader-icon" @click="curRowIndex=scope.$index"></i>
|
||
</el-upload>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- <el-table-column
|
||
prop="skuOriginalPrice"
|
||
width="150">
|
||
<template slot-scope="scope">
|
||
<div>
|
||
<el-input type="text" v-model="scope.row.skuOriginalPrice" style="width:80px;font-size:14px;">
|
||
</el-input>
|
||
</div>
|
||
</template>
|
||
</el-table-column> -->
|
||
<el-table-column
|
||
prop="skuPrice"
|
||
width="150">
|
||
<template slot-scope="scope">
|
||
<div>
|
||
<el-input type="text" v-model="scope.row.skuPrice" style="width:80px;font-size:14px;">
|
||
</el-input>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- <el-table-column
|
||
prop="memberPrice"
|
||
width="150">
|
||
<template slot-scope="scope">
|
||
<div>
|
||
<el-input type="text" v-model="scope.row.memberPrice" style="width:80px;font-size:14px;">
|
||
</el-input>
|
||
</div>
|
||
</template>
|
||
</el-table-column> -->
|
||
<el-table-column
|
||
prop="stock"
|
||
width="150">
|
||
<template slot-scope="scope">
|
||
<div>
|
||
<el-input type="text" v-model="scope.row.stock" style="width:80px;font-size:14px;">
|
||
</el-input>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="sales"
|
||
width="150">
|
||
<template slot-scope="scope">
|
||
<div>
|
||
<el-input type="text" v-model="scope.row.sales" style="width:80px;font-size:14px;">
|
||
</el-input>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
<div style="height: 38px;line-height: 38px;margin:20px 0;">
|
||
<span>是否包邮：</span>
|
||
<el-radio-group v-model="positage" @change="agreeChange">
|
||
<el-radio :label="0">是</el-radio>
|
||
<!-- <el-radio :label="1">否</el-radio>
|
||
<el-input v-if="priceshow" style="width:200px;margin-left: 10px;" placeholder="请输入邮费" type="number" v-model="postagePrice" autosize></el-input> -->
|
||
</el-radio-group>
|
||
</div>
|
||
</div>
|
||
<div class="tinymce-content" style="display: flex;">
|
||
<div style="width:90px;">商品详情：</div>
|
||
<!-- <textarea id="tinymceId" :value="descrition" class="tinymce-textarea"/> -->
|
||
<quill-editor ref="myTextEditor" v-model="descrition" :options="quillOption"
|
||
style="padding-bottom: 50px;height: 300px;width: 72%;display: inline-table;margin-bottom: 60px;">
|
||
</quill-editor>
|
||
</div>
|
||
<div style="text-align: center;margin-top:30px;">
|
||
<el-button style='margin:0 20px 0 0;' size="mini" type="primary" icon="document" @click="prev">返回上一页
|
||
</el-button>
|
||
<el-button size="mini" type="primary" icon="document" @click="artiReleass">发布商品
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { quillEditor }
|
||
from 'vue-quill-editor'
|
||
import 'quill/dist/quill.core.css'
|
||
import 'quill/dist/quill.snow.css'
|
||
import 'quill/dist/quill.bubble.css'
|
||
import quillConfig from '../mission/quill-config.js'
|
||
import { serverPaths } from '@/utils/enumData'
|
||
export default {
|
||
name: 'news',
|
||
components: {
|
||
quillEditor
|
||
},
|
||
data() {
|
||
return {
|
||
uploadUrl: serverPaths.uploadUrl,
|
||
quillOption: quillConfig,
|
||
specif:'',
|
||
typeId: '',
|
||
title: '',
|
||
merchants: '',
|
||
originalPrice:'',
|
||
price:'',
|
||
memberPrice:'',
|
||
positage:0,
|
||
guige:1,
|
||
skuImg:'',
|
||
ruleId:'',
|
||
postagePrice:0,
|
||
priceshow:true,
|
||
isshow:true,
|
||
commissionPrice:'',
|
||
buyReason:'',
|
||
ruleshow:false,
|
||
propshow:false,
|
||
guigeshow:true,
|
||
propshow1:false,
|
||
ruleValue:[],
|
||
attr:[],
|
||
attrs:[],
|
||
headerData:[],
|
||
valueData:[],
|
||
detailJson:[],
|
||
inputValues:{
|
||
inputValue0:'',
|
||
inputValue1:'',
|
||
inputValue2:'',
|
||
inputValue3:'',
|
||
inputValue4:'',
|
||
inputValue5:''
|
||
},
|
||
sku:[],
|
||
img:'',
|
||
sales:'',
|
||
status:'',
|
||
photos:'',
|
||
typeDatas:[],
|
||
value:[],
|
||
isSelect:'',
|
||
homeGoods:'',
|
||
isRecommend:'',
|
||
isExpress:'',
|
||
coverImg:'',
|
||
valueData2:[],
|
||
headerData2:[],
|
||
statusmain2:[
|
||
{
|
||
value:1,
|
||
label:'上架'
|
||
},
|
||
{
|
||
value:2,
|
||
label:'下架'
|
||
}
|
||
],
|
||
isExpressmain:[
|
||
{
|
||
value:1,
|
||
label:'普通商品需要发货'
|
||
},
|
||
{
|
||
value:2,
|
||
label:'虚拟商品无需发货'
|
||
},
|
||
{
|
||
value:3,
|
||
label:'门店核销无需发货'
|
||
}
|
||
],
|
||
attrName:'',
|
||
ruleName:'',
|
||
attrValue:[],
|
||
releobject:{
|
||
value:'',
|
||
detail:''
|
||
},
|
||
brandId:'',
|
||
brandIds:[],
|
||
isJiFenGoods:1,
|
||
specifdata:[],
|
||
dialogVisible: false,
|
||
isShow: false,
|
||
hideUpload: false,
|
||
limit:1,
|
||
id:'',
|
||
hasChange: false,
|
||
hasInit: false,
|
||
tinymceId: 'tinymceId',
|
||
height: 435,
|
||
toolbar: [],
|
||
menubar: 'file edit insert view format table',
|
||
languageTypeList: {
|
||
'en': 'en',
|
||
'zh': 'zh_CN'
|
||
},
|
||
artiCletypes: [],
|
||
// 富文本内容
|
||
descrition: ''
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
// 验证input只能输入正整数
|
||
proving() {
|
||
this.price = this.price.replace(/[^\.\d]/g,'');
|
||
this.price = this.price.replace('.','');
|
||
this.sales = this.sales.replace(/[^\.\d]/g,'');
|
||
this.sales = this.sales.replace('.','');
|
||
},
|
||
// 图标上传
|
||
handleAvatarSuccess(file) {
|
||
if(this.curRowIndex == 0){
|
||
this.skuImg = file.data;
|
||
this.valueData[0].skuImg = this.skuImg
|
||
return
|
||
}else{
|
||
this.skuImg = file.data;
|
||
this.valueData[this.curRowIndex].skuImg = this.skuImg
|
||
}
|
||
},
|
||
// 图标上传
|
||
handleAvatarSuccess3(file) {
|
||
this.skuImg = file.data;
|
||
this.valueData2[0].skuImg = this.skuImg
|
||
},
|
||
// 是否包邮
|
||
agreeChange(val){
|
||
if(val == 1){
|
||
this.priceshow = true
|
||
this.postagePrice = ''
|
||
}else{
|
||
this.priceshow = false
|
||
this.postagePrice = 0
|
||
}
|
||
},
|
||
// 是否多规格
|
||
guigeChange(val){
|
||
if(val == 1){
|
||
this.ruleId = ''
|
||
this.guigeshow = true
|
||
this.propshow1 = false
|
||
}else{
|
||
this.ruleId = 0
|
||
this.guigeshow = false
|
||
this.propshow1 = true
|
||
this.propshow = false
|
||
this.ruleshow = false
|
||
this.attr = []
|
||
this.ruleValue = []
|
||
this.guigeclect()
|
||
}
|
||
},
|
||
// 单规格
|
||
guigeclect(){
|
||
if(this.price == ''){
|
||
this.price = '0'
|
||
}
|
||
this.$http({
|
||
url: this.$http.adornUrl('goods/onlyFormatAttr'),
|
||
method: 'get',
|
||
params: this.$http.adornParams({
|
||
'price':this.price,
|
||
'coverImg':this.coverImg,
|
||
})
|
||
}).then(({data}) => {
|
||
let returnData = data.data;
|
||
this.headerData2 = returnData.header
|
||
this.valueData2 = returnData.value
|
||
this.propshow = false
|
||
this.propshow1 = true
|
||
this.sku = returnData.value
|
||
})
|
||
},
|
||
handleChange1(value) {
|
||
this.value.forEach(element => {
|
||
this.typeId = element;
|
||
});
|
||
},
|
||
handleChange(file, fileList){
|
||
this.hideUpload = fileList.length >= this.limit;
|
||
},
|
||
handleRemove(file, fileList) {
|
||
this.hideUpload = fileList.length >= this.limit;
|
||
},
|
||
handleAvatarSuccess1(file,fileList) {
|
||
this.coverImg = file.data
|
||
},
|
||
//上传成功
|
||
handleUploadSuccess(file,fileList) {
|
||
this.photos+=file.data+','
|
||
},
|
||
// 返回上一级
|
||
prev(){
|
||
this.$router.back()
|
||
},
|
||
// 发布商品
|
||
artiReleass(){
|
||
let photost=this.photos;
|
||
photost = photost.substr(0,photost.length-1)
|
||
if (this.title == '') {
|
||
this.$notify({
|
||
title: '提示',
|
||
duration: 1800,
|
||
message: '请输入商品标题',
|
||
type: 'warning'
|
||
});
|
||
return
|
||
}
|
||
if (this.price == '') {
|
||
this.$notify({
|
||
title: '提示',
|
||
duration: 1800,
|
||
message: '请输入商品积分',
|
||
type: 'warning'
|
||
});
|
||
return
|
||
}
|
||
if (this.price < 1) {
|
||
this.$notify({
|
||
title: '提示',
|
||
duration: 1800,
|
||
message: '商品积分不能小于1',
|
||
type: 'warning'
|
||
});
|
||
return
|
||
}
|
||
if (this.status == '') {
|
||
this.$notify({
|
||
title: '提示',
|
||
duration: 1800,
|
||
message: '请选择商品状态',
|
||
type: 'warning'
|
||
});
|
||
return
|
||
}
|
||
if (this.sales == '') {
|
||
this.$notify({
|
||
title: '提示',
|
||
duration: 1800,
|
||
message: '请输入商品销量',
|
||
type: 'warning'
|
||
});
|
||
return
|
||
}
|
||
if (this.buyReason == '') {
|
||
this.$notify({
|
||
title: '提示',
|
||
duration: 1800,
|
||
message: '请输入产品参数',
|
||
type: 'warning'
|
||
});
|
||
return
|
||
}
|
||
if (this.isExpress == '') {
|
||
this.$notify({
|
||
title: '提示',
|
||
duration: 1800,
|
||
message: '请选择商品是否发货',
|
||
type: 'warning'
|
||
});
|
||
return
|
||
}
|
||
if (this.coverImg == '') {
|
||
this.$notify({
|
||
title: '提示',
|
||
duration: 1800,
|
||
message: '请选择商品封面图',
|
||
type: 'warning'
|
||
});
|
||
return
|
||
}
|
||
if (this.descrition == '') {
|
||
this.$notify({
|
||
title: '提示',
|
||
duration: 1800,
|
||
message: '请输入商品详情',
|
||
type: 'warning'
|
||
});
|
||
return
|
||
}
|
||
if (this.sku.length == 0) {
|
||
this.$notify({
|
||
title: '提示',
|
||
duration: 1800,
|
||
message: '请选择商品规格',
|
||
type: 'warning'
|
||
});
|
||
return
|
||
}
|
||
if (this.postagePrice === '') {
|
||
this.$notify({
|
||
title: '提示',
|
||
duration: 1800,
|
||
message: '请输入邮费',
|
||
type: 'warning'
|
||
});
|
||
return
|
||
}
|
||
this.$http({
|
||
url: this.$http.adornUrl('goods/save'),
|
||
method: 'post',
|
||
data: this.$http.adornData({
|
||
'img':photost,
|
||
'title':this.title,
|
||
'merchants':this.merchants,
|
||
'originalPrice':this.originalPrice,
|
||
'price':this.price,
|
||
'memberPrice':this.memberPrice,
|
||
'sales':this.sales,
|
||
'status':this.status,
|
||
'coverImg':this.coverImg,
|
||
'descrition':this.descrition,
|
||
'commissionPrice':this.commissionPrice,
|
||
'isSelect':this.isSelect,
|
||
'homeGoods':this.homeGoods,
|
||
'buyReason':this.buyReason,
|
||
'isRecommend':this.isRecommend,
|
||
'isExpress':this.isExpress,
|
||
'postagePrice':this.postagePrice,
|
||
'sku':this.sku,
|
||
'attr':this.attr,
|
||
'brandId':this.brandId,
|
||
'isJiFenGoods':this.isJiFenGoods
|
||
})
|
||
}).then(({data}) => {
|
||
this.$message({
|
||
message: '操作成功',
|
||
type: 'success',
|
||
duration: 1500,
|
||
onClose: () => {
|
||
this.title = ''
|
||
this.type = ''
|
||
this.merchants = ''
|
||
this.price = ''
|
||
this.memberPrice = ''
|
||
this.originalPrice = ''
|
||
this.sales = ''
|
||
this.descrition = ''
|
||
this.postagePrice = ''
|
||
this.status = ''
|
||
this.buyReason = ''
|
||
this.brandId = ''
|
||
this.$router.push({path: '/integralist'})
|
||
}
|
||
})
|
||
})
|
||
},
|
||
|
||
// 商品分类
|
||
dataSelect () {
|
||
this.tableDataLoading = true
|
||
this.$http({
|
||
url: this.$http.adornUrl('goodsType/result'),
|
||
method: 'get',
|
||
params: this.$http.adornParams({
|
||
})
|
||
}).then(({data}) => {
|
||
this.tableDataLoading = false
|
||
let returnData = data.data;
|
||
this.typeDatas = returnData
|
||
})
|
||
},
|
||
// 商品规格
|
||
specifSelect () {
|
||
this.$http({
|
||
url: this.$http.adornUrl('goods/info'),
|
||
method: 'get',
|
||
params: this.$http.adornParams({
|
||
})
|
||
}).then(({data}) => {
|
||
let returnData = data.data;
|
||
this.specifdata = returnData;
|
||
})
|
||
},
|
||
// 删除商品属性
|
||
deleter(index){
|
||
let length = this.sku.length
|
||
if(length == 1){
|
||
this.$message({
|
||
title: '提示',
|
||
type: 'error',
|
||
duration: 1800,
|
||
message: '属性至少要有一个',
|
||
type: 'warning'
|
||
});
|
||
return
|
||
}else{
|
||
this.sku.splice(index, 1);
|
||
}
|
||
},
|
||
// 查询商品规格
|
||
selectTrigger(val){
|
||
this.$http({
|
||
url: this.$http.adornUrl('selfGoodsRule/find'),
|
||
method: 'get',
|
||
params: this.$http.adornParams({
|
||
'id':val
|
||
})
|
||
}).then(({data}) => {
|
||
let returnData = data.data;
|
||
this.ruleValue = returnData.ruleValue
|
||
this.attrName = returnData.ruleName
|
||
this.ruleshow = true
|
||
this.ruleId = returnData.id
|
||
this.create()
|
||
})
|
||
},
|
||
deleterule(index){
|
||
this.ruleValue.splice(index, 1);
|
||
},
|
||
btnToclick(){
|
||
this.isshow = false
|
||
this.releobject.value = ''
|
||
this.releobject.detail = ''
|
||
},
|
||
speciTotwo(){
|
||
this.isshow = true
|
||
this.releobject.value = ''
|
||
this.releobject.detail = ''
|
||
},
|
||
speciTo(){
|
||
if(this.releobject.value == ''){
|
||
this.$message({
|
||
title: '提示',
|
||
type: 'error',
|
||
duration: 1800,
|
||
message: '请输入规格',
|
||
type: 'warning'
|
||
});
|
||
return
|
||
}
|
||
if(this.releobject.detail == ''){
|
||
this.$message({
|
||
title: '提示',
|
||
duration: 1800,
|
||
type: 'error',
|
||
message: '请输入规格值',
|
||
type: 'warning'
|
||
});
|
||
return
|
||
}
|
||
this.ruleValue.push({
|
||
value: this.releobject.value,
|
||
detail:this.releobject.detail
|
||
});
|
||
this.isshow = true
|
||
this.releobject.value = ''
|
||
this.releobject.detail = ''
|
||
},
|
||
handleClose(tag,j,item) {
|
||
var detailarr = item.detail.split(',')
|
||
detailarr.splice(detailarr.indexOf('tag'),1);
|
||
if(detailarr.length < 1){
|
||
this.$message({
|
||
title: '提示',
|
||
type: 'error',
|
||
duration: 1800,
|
||
message: '规格值至少要有一个',
|
||
type: 'warning'
|
||
});
|
||
return
|
||
}else{
|
||
item.detail = String(detailarr)
|
||
}
|
||
},
|
||
handleInputConfirm(index,item) {
|
||
let inputValue = this.inputValues[index];
|
||
if (inputValue) {
|
||
var detailarr = item.detail.split(',')
|
||
detailarr.push(inputValue)
|
||
for(var i=0;i<detailarr.length;i++){
|
||
for(var j=0;j<detailarr.length;j++){
|
||
if(detailarr[i] == detailarr[j] && i !=j){
|
||
detailarr.splice(j,1);
|
||
}
|
||
}
|
||
}
|
||
item.detail = String(detailarr)
|
||
this.inputValues[index] = '';
|
||
}
|
||
this.inputVisible = false;
|
||
},
|
||
// 获取品牌
|
||
brandSelect () {
|
||
let page = this.page-1
|
||
this.tableDataLoading = true
|
||
this.$http({
|
||
url: this.$http.adornUrl('selfGoodsBrand/result'),
|
||
method: 'get',
|
||
params: this.$http.adornParams({
|
||
})
|
||
}).then(({data}) => {
|
||
this.tableDataLoading = false
|
||
let returnData = data.data;
|
||
this.brandIds = returnData
|
||
})
|
||
},
|
||
// 立即生成
|
||
create(){
|
||
this.attr = []
|
||
this.attr.push({
|
||
attrName:this.attrName,
|
||
attrValue:this.ruleValue,
|
||
ruleId:this.ruleId
|
||
})
|
||
if(this.price == ''){
|
||
this.price = '0'
|
||
}
|
||
|
||
this.$http({
|
||
url: this.$http.adornUrl(`goods/isFormatAttr?coverImg=${this.coverImg}&price=${this.price}`),
|
||
method: 'post',
|
||
data: this.attr[0]
|
||
}).then(({data}) => {
|
||
let returnData = data.data;
|
||
this.headerData = returnData.header
|
||
this.valueData = returnData.value
|
||
this.propshow = true
|
||
this.propshow1 = false
|
||
this.sku = returnData.value
|
||
this.detailJson = returnData.value[0].detailJson.split(',')
|
||
})
|
||
}
|
||
},
|
||
mounted() {
|
||
this.specifSelect()
|
||
},
|
||
|
||
}
|
||
</script>
|
||
|
||
<style scoped="scoped">
|
||
.main-cont {
|
||
max-width: 100%;
|
||
min-width: 80%;
|
||
padding-bottom:5%;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.tinymce-container {
|
||
position: relative;
|
||
line-height: normal;
|
||
}
|
||
|
||
.tinymce-container >>> .mce-fullscreen {
|
||
z-index: 10000;
|
||
}
|
||
|
||
.tinymce-textarea {
|
||
visibility: hidden;
|
||
z-index: -1;
|
||
}
|
||
.hide .el-upload--picture-card {
|
||
display: none;
|
||
}
|
||
.margin15{margin-right: 15px;margin-top: 10px;}
|
||
.ruleitem {padding-left:10px;margin-top: 15px;}
|
||
.ruleitem .ruleicon{position: relative;top: 3px; left:2px;width:1.2em;height:1.2em;}
|
||
.el-tag + .el-tag {
|
||
margin-left: 10px;
|
||
}
|
||
.button-new-tag{
|
||
height: 32px;
|
||
line-height: 31px;
|
||
padding-top: 0;
|
||
padding-bottom: 0;
|
||
border-radius: 4px;
|
||
border-top-left-radius: 0;
|
||
border-bottom-left-radius: 0;
|
||
background-color: #f5f7fa;
|
||
position: relative;
|
||
left: -5px;
|
||
border-color: #dcdfe6;
|
||
border: 1px solid #dcdfe6;
|
||
}
|
||
.input-new-tag {
|
||
width: 90px;
|
||
margin-left: 10px;
|
||
vertical-align: bottom;
|
||
}
|
||
.el-input--small .el-input__inner{
|
||
border-top-right-radius: 0;
|
||
border-bottom-right-radius: 0;
|
||
}
|
||
.el-table--enable-row-transition .el-table__body td{
|
||
text-align: center;
|
||
}
|
||
.imgWrap .avatar-uploader .el-upload{
|
||
width: 60px;
|
||
}
|
||
.el-table .cell{
|
||
text-align: center!important;
|
||
}
|
||
.el-tag--medium{margin-right: 10px;}
|
||
</style>
|