<template>
|
<div>
|
<!--基本信息-->
|
<div class="common-form">基本信息</div>
|
<el-form-item label="商品名称：" :rules="[{ required: true, message: '请填写商品名称' }]" prop="model.product_name">
|
<el-input v-model="form.model.product_name" class="max-w460"></el-input>
|
</el-form-item>
|
<el-form-item label="所属分类：" :rules="[{ required: true, message: '请选择商品分类' }]" prop="model.category_id">
|
<el-select v-model="form.model.category_id">
|
<template v-for="cat in form.category">
|
<el-option :value="cat.category_id" :key="cat.category_id" :label="cat.name"></el-option>
|
<template v-if="cat.child !== undefined" v-for="two in cat.child">
|
<el-option :value="two.category_id" :key="two.category_id" :label="two.name" style="padding-left: 30px;"></el-option>
|
<template v-if="two.child !== undefined" v-for="three in two.child">
|
<el-option :value="three.category_id" :key="three.category_id" :label="three.name" style="padding-left: 60px;"></el-option>
|
</template>
|
</template>
|
</template>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="预告商品：">
|
<el-radio-group v-model="form.model.is_preview">
|
<el-radio :label="1">开启</el-radio>
|
<el-radio :label="0">关闭</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item v-if="form.model.is_preview==1" label="预告开启购买时间" :rules="[{ required: true, message: '请选择开启购买时间' }]" prop="model.preview_time">
|
<el-date-picker
|
v-model="form.model.preview_time"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
placeholder="选择日期">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="销售状态：">
|
<el-radio-group v-model="form.model.product_status">
|
<el-radio :label="10">立即上架</el-radio>
|
<el-radio :label="20">放入仓库</el-radio>
|
</el-radio-group>
|
<div class="gray9">如果平台开启了商品审核，则商品审核通过后才能销售</div>
|
</el-form-item>
|
<el-form-item label="是否审核：" v-if="form.audit_setting.add_audit == 1 && form.scene == 'add'">
|
<el-radio-group v-model="form.model.audit_status">
|
<el-radio :label="0">提交审核</el-radio>
|
<el-radio :label="40">保存草稿</el-radio>
|
</el-radio-group>
|
<div class="gray9">当前平台开启了审核，审核通过后才能上架销售</div>
|
</el-form-item>
|
<el-form-item label="是否审核：" v-if="form.audit_setting.edit_audit == 1 && form.scene != 'add'">
|
<el-radio-group v-model="form.model.audit_status">
|
<el-radio :label="0">提交审核</el-radio>
|
<el-radio :label="40">保存草稿</el-radio>
|
</el-radio-group>
|
<div class="gray9">当前平台开启了修改审核，审核通过后才能上架销售</div>
|
</el-form-item>
|
<el-form-item label="商品图片：" :rules="[{ required: true, message: '请上传商品图片' }]" prop="model.image">
|
<div class="draggable-list">
|
<draggable class="wrapper" v-model="form.model.image">
|
<transition-group>
|
<div class="item" v-for="(item, index) in form.model.image" :key="item.file_path">
|
<img v-img-url="item.file_path" />
|
<a href="javascript:void(0);" class="delete-btn" @click.stop="deleteImg(index)"><i class="el-icon-close"></i></a>
|
</div>
|
</transition-group>
|
</draggable>
|
<div class="item img-select" @click="openProductUpload('image', 'image')"><i class="el-icon-plus"></i></div>
|
</div>
|
</el-form-item>
|
<el-form-item label="商品视频：">
|
<el-row>
|
<div class="draggable-list">
|
<div class="item img-select" v-if="form.model.video_id==0" @click="openProductUpload('video', 'video')"><i class="el-icon-plus"></i></div>
|
<div v-if="form.model.video_id!=0">
|
<video width="150" height="150" :src="form.model.video.file_path" :autoplay="false" controls>
|
您的浏览器不支持 video 标签
|
</video>
|
<div>
|
<el-button icon="el-icon-picture-outline" @click="delVideo">删除视频</el-button>
|
</div>
|
</div>
|
</div>
|
</el-row>
|
</el-form-item>
|
<el-form-item label="视频封面：">
|
<el-row>
|
<div class="draggable-list">
|
<div class="item img-select" v-if="form.model.poster_id==0" @click="openProductUpload('image', 'poster')"><i class="el-icon-plus"></i></div>
|
<div v-if="form.model.poster_id!=0" class="item" @click="openProductUpload('image', 'poster')">
|
<img :src="form.model.poster.file_path" width="100" height="100" />
|
</div>
|
</div>
|
</el-row>
|
</el-form-item>
|
<el-form-item label="商品卖点：">
|
<el-input type="textarea" v-model="form.model.selling_point" class="max-w460"></el-input>
|
</el-form-item>
|
<!--其他设置-->
|
<div class="common-form">其他设置</div>
|
<el-form-item label="商品属性：">
|
<el-radio-group v-model="form.model.is_virtual">
|
<el-radio :label="0">实物商品</el-radio>
|
<el-radio :label="1">虚拟商品(无需发货)</el-radio>
|
<el-radio :label="2">券商品</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="运费：" prop="model.delivery_id" v-if="form.model.is_virtual==0">
|
<el-radio-group v-model="form.model.is_delivery_free" @change="changeDelivery">
|
<el-radio :label="0">包邮</el-radio>
|
<el-radio :label="1">运费模板</el-radio>
|
</el-radio-group>
|
<el-select v-model="form.model.delivery_id" v-if="form.model.is_delivery_free == 1">
|
<el-option v-for="item in form.delivery" :value="item.delivery_id" :key="item.delivery_id" :label="item.name"></el-option>
|
</el-select>
|
<el-link type="primary" :underline="false" v-if="form.model.is_delivery_free == 1" @click="setExpress">去设置</el-link>
|
</el-form-item>
|
<el-form-item label="抵扣金额：" :rules="[{ required: true, message: ' ' }]" prop="model.deduction_price" v-if="form.model.is_virtual == 2">
|
<el-input type="number" min="0" v-model="form.model.deduction_price" class="max-w460"></el-input>
|
<div class="gray9">该券线下核销时，实际抵扣的金额</div>
|
</el-form-item>
|
<el-form-item label="商品排序：" :rules="[{ required: true, message: ' ' }]" prop="model.product_sort">
|
<el-input type="number" min="0" v-model="form.model.product_sort" class="max-w460"></el-input>
|
</el-form-item>
|
<el-form-item label="限购数量：" :rules="[{ required: true, message: ' ' }]" prop="model.limit_num">
|
<el-input type="number" min="0" v-model="form.model.limit_num" class="max-w460"></el-input>
|
<div class="gray9">每个会员购买的最大数量，0为不限购</div>
|
</el-form-item>
|
<el-form-item label="发货类型：" v-if="form.model.is_virtual==1">
|
<el-radio-group v-model="form.model.virtual_auto">
|
<el-radio :label="1">自动</el-radio>
|
<el-radio :label="0">手动</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="虚拟内容：" :rules="[{ required: true, message: '请填写虚拟内容' }]" prop="model.virtual_content" v-if="form.model.is_virtual==1">
|
<el-input type="text" v-model="form.model.virtual_content" class="max-w460"></el-input>
|
<div class="gray9">虚拟物品内容</div>
|
</el-form-item>
|
|
<template v-if="form.model.virtual_auto==0&&form.model.is_virtual==1">
|
<el-form-item label="支持线下核销：">
|
<el-radio-group v-model="form.model.is_verify">
|
<el-radio :label="1">支持</el-radio>
|
<el-radio :label="0">不支持</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="核销到期类型：" v-if="form.model.is_verify==1">
|
<el-radio-group v-model="form.model.verify_type">
|
<el-radio :label="10">购买后生效</el-radio>
|
<el-radio :label="20">固定时间</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<div v-if="form.model.verify_type == 10">
|
<el-form-item label="核销有效天数：">
|
<el-input v-model="form.model.verify_day" placeholder="请输入有效天数" type="number" class="max-w460"></el-input>
|
<div class="gray9">0或留空表示不限核销时间，永久有效</div>
|
</el-form-item>
|
</div>
|
<div v-else>
|
<el-form-item label="核销有效时间：">
|
<el-date-picker
|
v-model="form.model.verify_time"
|
type="daterange"
|
align="right"
|
unlink-panels
|
value-format="yyyy-MM-dd"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
></el-date-picker>
|
</el-form-item>
|
</div>
|
<el-form-item label="可核销门店：" v-if="form.model.is_verify==1">
|
<el-button @click="openStore" icon="el-icon-plus">选择门店</el-button>
|
<div class="choice-shop-list">
|
<div :key="index" v-for="(shop, index) in form.verifyStoreList" class="item" @click="log(shop)">
|
<div class="delete-box"><i class="el-icon-error" @click="onEditorDeleleData(index)"></i></div>
|
{{shop.store_name}}
|
</div>
|
</div>
|
<div class="gray9">不选择则所有支持核销的门店都可核销</div>
|
</el-form-item>
|
</template>
|
|
<!--商品图片组件-->
|
<Upload v-if="isProductUpload" :config="config" :isupload="isProductUpload" @returnImgs="returnProductImgsFunc">上传图片</Upload>
|
<!--选择门店-->
|
<StoreSelect :isstore="isstore" :excludeIds="excludeStoreIds" :islist="isstorelist" @closeDialog="closeStoreDialogFunc($event)"></StoreSelect>
|
</div>
|
</template>
|
|
<script>
|
|
import Upload from '@/components/file/Upload';
|
import draggable from 'vuedraggable';
|
import StoreSelect from '@/components/store/StoreSelect';
|
export default {
|
components: {
|
Upload,
|
draggable,
|
StoreSelect
|
},
|
data() {
|
return {
|
isProductUpload: false,
|
config: {},
|
file_name: 'image',
|
defaultProps: {
|
children: 'child',
|
label: 'name'
|
},
|
/*是否显示门店选中*/
|
isstore: false,
|
/*门店是否多选*/
|
isstorelist: true,
|
/*门店需要去重的*/
|
excludeStoreIds: [],
|
};
|
},
|
inject: ['form'],
|
created() {
|
|
},
|
methods: {
|
|
/*打开上传图片*/
|
openProductUpload: function(file_type, file_name) {
|
this.file_name = file_name;
|
if(file_type == 'image'){
|
this.config = {
|
total: 9,
|
file_type: 'image'
|
};
|
}else{
|
this.config = {
|
total: 1,
|
file_type: 'video'
|
};
|
}
|
this.isProductUpload = true;
|
},
|
|
/*上传商品图片*/
|
returnProductImgsFunc(e) {
|
if (e != null) {
|
if(this.file_name == 'video'){
|
this.form.model.video_id = e[0].file_id;
|
this.form.model.video = e[0];
|
}else if(this.file_name == 'image'){
|
let imgs = this.form.model.image.concat(e);
|
this.$set(this.form.model, 'image', imgs);
|
}else if(this.file_name == 'poster'){
|
this.form.model.poster_id = e[0].file_id;
|
this.form.model.poster = e[0];
|
}
|
}
|
this.isProductUpload = false;
|
},
|
|
/*删除商品图片*/
|
deleteImg(index) {
|
this.form.model.image.splice(index, 1);
|
},
|
delVideo(){
|
this.form.model.video_id = 0;
|
this.form.model.video = {};
|
},
|
/*打开添加*/
|
setExpress() {
|
this.$router.push('/setting/delivery/index');
|
},
|
changeDelivery(e){
|
if(e == 0){
|
this.form.model.delivery_id = '';
|
}
|
},
|
//监听选中
|
handleCheckChange(data, checked) {
|
this.form.access_id = checked.checkedKeys.concat(checked.halfCheckedKeys);
|
},
|
|
/*门店选择列表弹出层*/
|
openStore() {
|
let arr = [];
|
console.log(this.form.model.verify_store_ids);
|
if(this.form.model.verify_store_ids){
|
this.form.model.verify_store_ids.forEach(store_id => {
|
console.log(store_id);
|
if(typeof store_id != 'undefined'){
|
arr.push(parseInt(store_id));
|
}
|
});
|
}
|
|
this.excludeStoreIds = arr;
|
this.isstore = true;
|
},
|
/*关闭获取门店弹窗*/
|
closeStoreDialogFunc(e) {
|
this.isstore = false;
|
this.form.model.verify_store_ids = [];
|
//console.log(e.params);
|
if (e.type == 'success') {
|
e.params.forEach(item => {
|
this.form.model.verify_store_ids.push(item.store_id);
|
this.form.verifyStoreList.push(item);
|
});
|
//console.log(this.form.model.verify_store_ids);
|
}
|
},
|
/**
|
* 编辑器：删除data元素
|
* @param index
|
*/
|
onEditorDeleleData: function(index) {
|
let self = this;
|
self.form.model.verify_store_ids.splice(index, 1);
|
self.form.verifyStoreList.splice(index, 1);
|
},
|
|
}
|
};
|
</script>
|
|
<style>
|
.edit_container {
|
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
-webkit-font-smoothing: antialiased;
|
-moz-osx-font-smoothing: grayscale;
|
text-align: center;
|
line-height: 20px;
|
color: #2c3e50;
|
}
|
|
.ql-editor {
|
height: 400px;
|
}
|
|
.draggable-list {
|
display: flex;
|
justify-content: flex-start;
|
flex-wrap: wrap;
|
}
|
.draggable-list .wrapper > span {
|
display: flex;
|
justify-content: flex-start;
|
flex-wrap: wrap;
|
}
|
|
.draggable-list .item {
|
position: relative;
|
width: 110px;
|
height: 110px;
|
margin-top: 10px;
|
margin-right: 10px;
|
border-radius: 8px;
|
overflow: hidden;
|
border: 1px solid #dddddd;
|
}
|
|
.draggable-list .delete-btn {
|
position: absolute;
|
top: 0;
|
right: 0;
|
width: 16px;
|
height: 16px;
|
background: red;
|
line-height: 16px;
|
font-size: 16px;
|
color: #ffffff;
|
display: none;
|
}
|
|
.draggable-list .item:hover .delete-btn {
|
display: block;
|
}
|
|
.draggable-list .item img {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
-webkit-transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
max-height: 100%;
|
max-width: 100%;
|
}
|
|
.draggable-list .img-select {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border: 1px dashed #dddddd;
|
font-size: 30px;
|
}
|
|
.draggable-list .img-select i {
|
color: #409eff;
|
}
|
|
.choice-shop-list {
|
display: flex;
|
justify-content: flex-start;
|
flex-wrap: wrap;
|
margin-top: 10px;
|
}
|
|
.choice-shop-list .item {
|
position: relative;
|
margin-right: 10px;
|
border: 1px solid #dddddd;
|
padding: 0 10px;
|
width: auto;
|
height: auto;
|
}
|
|
.choice-shop-list .item .delete-box {
|
position: absolute;
|
width: 20px;
|
height: 20px;
|
top: -10px;
|
right: -10px;
|
font-size: 20px;
|
cursor: pointer;
|
color: #999999;
|
}
|
|
.choice-shop-list .item .delete-box:hover {
|
color: rgb(255, 51, 0);
|
}
|
|
.choice-shop-list .item.plus-btn {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.choice-shop-list .item.plus-btn>i {
|
font-size: 30px;
|
color: #cccccc;
|
}
|
|
.choice-shop-list img {
|
width: 100%;
|
height: 100%;
|
}
|
</style>
|
