panqihua
2 years ago
parent
65e1281a29
commit
589bc2d017
@ -0,0 +1,31 @@ |
|||||||
|
export default { |
||||||
|
state: { |
||||||
|
// 商品分类
|
||||||
|
categoryOptions: [ |
||||||
|
{ |
||||||
|
label: "1", |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
label: "1-1", |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: "1-2", |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: "2", |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
label: "2-1", |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
mutations: { |
||||||
|
updateCategory(state, category) { |
||||||
|
state.categoryOptions = category; |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
@ -0,0 +1,179 @@ |
|||||||
|
<template> |
||||||
|
<div class="app-container"> |
||||||
|
<el-tabs v-model="activeName" type="border-card"> |
||||||
|
<el-tab-pane label="基本信息" name="base"> |
||||||
|
<div class="title">基本信息</div> |
||||||
|
<el-divider /> |
||||||
|
<el-form :inline="true"> |
||||||
|
<el-form-item label="商品名称"> |
||||||
|
<el-input placeholder="请输入商品名称" /> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="商品编码"> |
||||||
|
<el-input placeholder="请输入商品编码" /> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item> |
||||||
|
<el-cascader placeholder="请选择商品分类" :options="categoryOptions"></el-cascader> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<el-form :inline="true"> |
||||||
|
<el-form-item label="计量单位"> |
||||||
|
<el-select placeholder="请选择计量单位" v-model="form.unit" /> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="库存预警"> |
||||||
|
<el-input-number placeholder="请输入最低库存数量" v-model="form.num" controls-position="right" |
||||||
|
:step="100" :min="0"></el-input-number> |
||||||
|
</el-form-item> |
||||||
|
<br /> |
||||||
|
<el-form-item label="是否上架"> |
||||||
|
<el-switch v-model="form.isOnShelf" active-color="#adbcf9" inactive-color="#adbc00"> |
||||||
|
</el-switch> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<div class="title">商品主图</div> |
||||||
|
<el-divider /> |
||||||
|
<el-row> |
||||||
|
<el-col :span="4" v-for="(item, index) in form.fileList" :key="index"> |
||||||
|
<div class="img" :style="{ |
||||||
|
backgroundImage: `url(${item.blobURL})` |
||||||
|
}"> |
||||||
|
<i class="el-icon-check" v-if="item.primary"></i> |
||||||
|
</div> |
||||||
|
<div style="text-align: center;"> |
||||||
|
<el-button type="text" @click="setPrimary(index)">设为主图</el-button> |
||||||
|
<el-button type="text" @click="handleRemove(index)">删除图片</el-button> |
||||||
|
</div> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
<el-upload action="#" accept="image/png, image/jpeg" :limit="maxFileCount" :show-file-list="false" |
||||||
|
:auto-upload="false" :file-list="form.fileList" :on-change="handleChange"> |
||||||
|
<el-button type="primary" v-if="form.fileList.length < maxFileCount">上传图片</el-button><span |
||||||
|
class="upload-tip">145*145（单张图片大小不超过{{ maxFileSizeM }}，支持格式jpg、png，最多上传8张）</span> |
||||||
|
</el-upload> |
||||||
|
<div class="title">商品详情</div> |
||||||
|
<h1>富文本编辑器</h1> |
||||||
|
<el-divider /> |
||||||
|
<el-button type="primary" @click="save">保存</el-button> |
||||||
|
<el-button @click="$emit('close')">关闭</el-button> |
||||||
|
</el-tab-pane> |
||||||
|
<el-tab-pane label="库存规格" name="spec"></el-tab-pane> |
||||||
|
</el-tabs> |
||||||
|
|
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import { mapState } from 'vuex' |
||||||
|
export default { |
||||||
|
name: "AddProduct", |
||||||
|
data() { |
||||||
|
return { |
||||||
|
// 最大上传文件数 |
||||||
|
maxFileCount: 2, |
||||||
|
//最大上传文件体积 单位字节 |
||||||
|
maxFileSize: 1024 * 1024 * 5, |
||||||
|
form: { |
||||||
|
// 库存预警 |
||||||
|
num: 100, |
||||||
|
// 是否商家 |
||||||
|
isOnShelf: true, |
||||||
|
//计量单位 |
||||||
|
unit: undefined, |
||||||
|
fileList: [] |
||||||
|
|
||||||
|
}, |
||||||
|
activeName: "base" |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
setPrimary(index) { |
||||||
|
|
||||||
|
let _index = this.form.fileList.findIndex(item => item.primary) |
||||||
|
let old = this.form.fileList[_index] |
||||||
|
old.primary = false |
||||||
|
this.form.fileList.splice(_index, 1, old) |
||||||
|
let _new = this.form.fileList[index] |
||||||
|
_new.primary = true |
||||||
|
this.form.fileList.splice(index, 1, _new) |
||||||
|
|
||||||
|
}, |
||||||
|
handleChange(file, fileList) { |
||||||
|
if (file.size > this.maxFileSize) { |
||||||
|
this.$modal.msgWarning(`单张图片大小不能超过${this.maxFileSizeM}`) |
||||||
|
return |
||||||
|
} |
||||||
|
file.blobURL = URL.createObjectURL(file.raw) |
||||||
|
file.primary = false |
||||||
|
if (this.form.fileList.length === 0) { |
||||||
|
file.primary = true |
||||||
|
} |
||||||
|
this.form.fileList.push(file) |
||||||
|
|
||||||
|
}, |
||||||
|
handleRemove(index) { |
||||||
|
let del = this.form.fileList[index] |
||||||
|
this.form.fileList.splice(index, 1) |
||||||
|
//删除主图时默认设置剩下图片中的第一张为主图 |
||||||
|
if (this.form.fileList.length > 0 && del.primary) { |
||||||
|
let defaultPrimary = this.form.fileList[0] |
||||||
|
defaultPrimary.primary = true |
||||||
|
this.form.fileList.splice(0, 1, defaultPrimary) |
||||||
|
} |
||||||
|
}, |
||||||
|
handlePreview(file) { |
||||||
|
console.log(file); |
||||||
|
}, |
||||||
|
save() { |
||||||
|
this.$modal.msgSuccess("保存成功") |
||||||
|
this.$emit('close') |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
...mapState({ |
||||||
|
categoryOptions: state => state.platformShop.categoryOptions |
||||||
|
}), |
||||||
|
maxFileSizeM() { |
||||||
|
return `${this.maxFileSize / 1024 / 1024}M` |
||||||
|
} |
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style> |
||||||
|
.img { |
||||||
|
width: 145px; |
||||||
|
height: 145px; |
||||||
|
background-position: center; |
||||||
|
background-size: cover; |
||||||
|
margin: auto; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
font-size: 50px; |
||||||
|
} |
||||||
|
|
||||||
|
.title { |
||||||
|
color: rgba(16, 16, 16, 1); |
||||||
|
font-size: 16px; |
||||||
|
text-align: left; |
||||||
|
font-family: SourceHanSansSC-regular; |
||||||
|
margin-top: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.el-switch__core:after { |
||||||
|
content: ""; |
||||||
|
position: absolute; |
||||||
|
top: 1px; |
||||||
|
left: 1px; |
||||||
|
border-radius: 100%; |
||||||
|
-webkit-transition: all 0.3s; |
||||||
|
transition: all 0.3s; |
||||||
|
width: 16px; |
||||||
|
height: 16px; |
||||||
|
background-color: #5a7bf4 !important; |
||||||
|
} |
||||||
|
|
||||||
|
.upload-tip { |
||||||
|
font-size: 14px; |
||||||
|
text-align: left; |
||||||
|
font-family: SourceHanSansSC-regular; |
||||||
|
margin-left: 10px; |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue