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