<template>
|
<div class="status_add">
|
<v-header :title="add ? '新增' : '编辑'"></v-header>
|
<div class="fm">
|
<section class="sec">
|
<p class="label">商品名称：</p>
|
<article>
|
<el-input
|
placeholder="请输入"
|
size="small"
|
v-model="os.goodName"
|
maxlength="50"
|
></el-input>
|
</article>
|
</section>
|
|
<section class="sec">
|
<p class="label">商品价格：</p>
|
<article>
|
<el-input
|
placeholder="请输入"
|
size="small"
|
v-model="os.goodPrice"
|
maxlength="50"
|
></el-input>
|
</article>
|
</section>
|
|
<section class="sec">
|
<p class="label">上架状态：</p>
|
<article class="unmountType">
|
<el-radio v-model="os.goodType" label="1">上架</el-radio>
|
<el-radio v-model="os.goodType" label="0">下架</el-radio>
|
</article>
|
</section>
|
|
<section class="sec">
|
<p class="label">商品封面：</p>
|
<article>
|
<div
|
class="image-box"
|
v-if="os.coverImgUrl != null && os.coverImgUrl != ''"
|
>
|
<img class="image" :src="os.coverImgUrl" alt />
|
<img
|
@click="imgclear"
|
class="clear-icon"
|
src="static/image/clear.png"
|
alt
|
/>
|
</div>
|
<div class="avatar" v-else>
|
<v-u
|
:boxWidth="800"
|
:boxHeight="400"
|
:width="categoryId == 10 ? 670 : 650"
|
:height="categoryId == 10 ? 348 : 285"
|
@path="onPath"
|
></v-u>
|
</div>
|
</article>
|
</section>
|
|
<!---->
|
<section class="sec">
|
<p class="label">商品详情：</p>
|
<article></article>
|
</section>
|
</div>
|
<div class="edit">
|
<!-- <editor-bar
|
v-model="os.content"
|
:isClear="isClear"
|
@change="change"
|
></editor-bar> -->
|
<quill-editor
|
@editorContext="change"
|
:contentText="os.content"
|
></quill-editor>
|
</div>
|
|
<div class="btn">
|
<el-button type="primary" size="small" @click="sub">
|
{{ "立即发布" }}
|
</el-button>
|
<el-button size="small" @click="$router.go(-1)">取消</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import EditorBar from "com/wangEnduit/index"; //富文本组件
|
import QuillEditor from "com/editor/quilleditor"; //富文本组件
|
|
import vU from "com/upload/upload";
|
export default {
|
props: {
|
add: { type: Boolean, default: false },
|
aid: { type: [String, Number], default: "" },
|
categoryIdEdit: { type: [String, Number], default: "" }
|
},
|
components: { EditorBar, vU, QuillEditor },
|
data() {
|
return {
|
checked: false,
|
checked1: false, //定时
|
isClear: false,
|
detail: "",
|
categoryId: "",
|
os: {
|
goodName: "", //商品名称
|
goodPrice: "", //商品积分
|
goodType: "", //上架状态 0下架 1上架
|
coverImgUrl: "", //封面
|
content: "" //详情
|
},
|
queryDynamiclist: {},
|
expireTimeOption: {
|
disabledDate(time) {
|
let nowData = new Date();
|
nowData = new Date(nowData.setDate(nowData.getDate() - 1));
|
return time < nowData;
|
}
|
},
|
expireTimeOption2: {
|
disabledDate(time) {
|
let nowData = new Date();
|
nowData = new Date(nowData.setDate(nowData.getDate()));
|
return time > nowData;
|
}
|
}
|
};
|
},
|
watch: {
|
aid() {
|
this.getDetail();
|
},
|
categoryIdEdit(val) {
|
this.categoryId = val;
|
}
|
},
|
methods: {
|
imgclear() {
|
//删除图片
|
this.os.coverImgUrl = "";
|
},
|
onPath(v) {
|
this.os.coverImgUrl = v;
|
},
|
sub() {
|
let o = demo.copy(this.os);
|
if (!o.goodName) {
|
demo.toast("请输入商品名称");
|
return 0;
|
}
|
if (!o.goodPrice) {
|
demo.toast("请输入商品价格");
|
return 0;
|
}
|
if (this.os.coverImgUrl === "") {
|
demo.toast("请上传商品封面");
|
return 0;
|
}
|
|
if (!o.content) {
|
demo.toast("请输入商品详情");
|
return 0;
|
}
|
|
let method = "post";
|
let url = "Jinhui/shoppingAddData";
|
if (!this.add) {
|
o.id = this.aid;
|
method = "post";
|
url = "Jinhui/shoppingEditData";
|
}
|
|
let user = demo.$session.get("user") || {};
|
if (user.communityId) {
|
o.communityId = user.communityId;
|
}
|
|
this.$api[method](url, o, e => {
|
demo.toast((this.add ? "发布" : "编辑") + "成功");
|
this.reset();
|
this.$router.go(-1);
|
});
|
},
|
reset() {
|
for (let k in this.os) {
|
this.os[k] = "";
|
}
|
this.volunteerStyle = "";
|
this.checked = false;
|
},
|
//编辑富文本
|
change(val) {
|
this.os.content = val;
|
},
|
getDetail() {
|
if (this.aid) {
|
this.$api.get("Jinhui/shoppingGetDetails", { id: this.aid }, e => {
|
// certificateUrl: "",
|
// name: "", //商品名称
|
// commodityValue: "",//商品价值
|
// goodPrice: "",//商品积分
|
// goodType: "", //上架状态 0下架 1上架
|
// coverImgUrl: "",//封面
|
// content: ""//详情
|
this.os.goodName = e.goodName;
|
this.os.goodPrice = e.goodPrice;
|
// this.os.creationTime = e.creationTime;
|
this.os.goodType = e.goodType;
|
this.os.coverImgUrl = e.coverImgUrl;
|
this.os.content = e.content;
|
});
|
}
|
}
|
},
|
mounted() {
|
this.categoryId = this.$route.query.id;
|
this.getDetail();
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.image-box {
|
position: relative;
|
/*overflow: hidden;*/
|
max-width: 300px;
|
}
|
.image-box2 {
|
position: relative;
|
/*overflow: hidden;*/
|
width: 300px;
|
}
|
.clear-icon {
|
cursor: pointer;
|
position: absolute;
|
top: -10px;
|
right: -10px;
|
width: 30px;
|
height: 30px;
|
}
|
.image {
|
width: 100%;
|
object-fit: cover;
|
/*width: 300px;*/
|
}
|
.status_add {
|
overflow-y: auto;
|
.edit,
|
.zd,
|
.btn {
|
margin-bottom: 10px;
|
padding: 0 40px;
|
}
|
.sec:last-child {
|
margin-bottom: 0;
|
}
|
article {
|
max-width: 300px;
|
}
|
|
.unmountType {
|
display: flex;
|
align-items: center;
|
}
|
.article-maxwidth {
|
.el-radio {
|
margin-bottom: 10px;
|
}
|
}
|
}
|
.radio-text {
|
width: 100%;
|
font-size: 10px;
|
color: #7f7f7f;
|
}
|
</style>
|
