广告管理
This commit is contained in:
440
src/views/modules/appManage/advertisement-add-or-update.vue
Normal file
440
src/views/modules/appManage/advertisement-add-or-update.vue
Normal file
@@ -0,0 +1,440 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
width="700px"
|
||||
:title="`${!dataForm.id?'新增':'修改'}广告`"
|
||||
:close-on-click-modal="false"
|
||||
:visible.sync="visible"
|
||||
@close="handlereset"
|
||||
style="height: auto;"
|
||||
>
|
||||
<div style="margin-bottom: 60px;">
|
||||
<el-form
|
||||
style="height: auto;"
|
||||
class="addFormBox"
|
||||
:model="dataForm"
|
||||
:rules="dataRule"
|
||||
ref="dataForm"
|
||||
label-width="80px"
|
||||
>
|
||||
<el-form-item label="发布APP" prop="title">
|
||||
<el-select v-model="dataForm.appType" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in APPList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="广告类型" prop="type">
|
||||
<el-radio-group v-model="dataForm.type" @input="selectType">
|
||||
<el-radio
|
||||
v-for="item in typeList"
|
||||
:key="item.value"
|
||||
:label="item.value"
|
||||
>{{ item.label }}</el-radio
|
||||
>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="关联商品" prop="type" v-if="dataForm.type == 0">
|
||||
<div>
|
||||
<el-button type="primary" size="mini" @click="showProTable"
|
||||
>关联商品</el-button
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
v-if="JSON.stringify(bindProductData) != '{}'"
|
||||
style="background: #f5f5f5;border-radius: 10px;padding:10px 20px;"
|
||||
>
|
||||
<div style="line-height: 20px;font-weight: bold;">
|
||||
商品信息
|
||||
|
||||
<span
|
||||
style="float: right;color: red;cursor: pointer;"
|
||||
@click="clearBind"
|
||||
>解绑</span
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
style="margin-top: 10px;display: flex;align-items: center;
|
||||
justify-content: space-between;"
|
||||
>
|
||||
<div style="background-color: #b0b0b0;width: 50px;height: 70px;">
|
||||
<img
|
||||
v-if="
|
||||
JSON.stringify(bindProductData) != '{}' &&
|
||||
bindProductData.productImages != ''
|
||||
"
|
||||
:src="bindProductData.productImages"
|
||||
width="50"
|
||||
height="70"
|
||||
class="tableImg"
|
||||
/>
|
||||
<span
|
||||
v-else
|
||||
style="text-align: center;line-height: 70px;font-size: 10px;"
|
||||
>暂无封面图</span
|
||||
>
|
||||
</div>
|
||||
<div style="width: calc(100% - 60px);line-height: 20px;">
|
||||
<div>
|
||||
<span style="font-weight: bold;">商品ID：</span>
|
||||
{{ bindProductData.productId }}
|
||||
</div>
|
||||
<div>
|
||||
<span style="font-weight: bold;">商品名称：</span
|
||||
>{{ bindProductData.productName }}
|
||||
</div>
|
||||
<div>
|
||||
<span style="font-weight: bold;">价格：</span
|
||||
>{{ bindProductData.price }}
|
||||
</div>
|
||||
<div>
|
||||
<span style="font-weight: bold;">活动价：</span
|
||||
>{{ bindProductData.activityPrice }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="广告图片" prop="type">
|
||||
<el-upload
|
||||
:limit="1"
|
||||
class="el-uploadfeng"
|
||||
:action="baseUrl + '/oss/fileoss'"
|
||||
list-type="picture-card"
|
||||
:on-preview="handlePictureCardPreview"
|
||||
:file-list="fileList"
|
||||
:on-success="handlePicSuccess"
|
||||
accept=".jpeg,.jpg,.gif,.png"
|
||||
:on-remove="handleRemove"
|
||||
>
|
||||
<i class="el-icon-plus"></i>
|
||||
</el-upload>
|
||||
<el-dialog
|
||||
:visible.sync="dialogVisible"
|
||||
:append-to-body="true"
|
||||
custom-class="iconBox"
|
||||
>
|
||||
<img width="100%" :src="dataForm.icon" alt="" />
|
||||
</el-dialog>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="handlereset">取消</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
|
||||
</span>
|
||||
<commonShopTable
|
||||
ref="commonShopTable"
|
||||
currentType="courseLinkPro"
|
||||
@submit="bindProduct"
|
||||
></commonShopTable>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import debounce from "lodash/debounce"; //导入lodash中的debounce
|
||||
import commonShopTable from "./shopproductTable.vue";
|
||||
import global from "@/views/common/common.vue"; //引入共用组间
|
||||
export default {
|
||||
props: ["typeList", "APPList"],
|
||||
data() {
|
||||
return {
|
||||
bindProductData: {}, // 封面图
|
||||
fileList: [], // 封面图
|
||||
baseUrl: global.baseUrl,
|
||||
visible: false,
|
||||
// 富文本编辑器配置
|
||||
|
||||
props: {
|
||||
dictType: "",
|
||||
dictValue: ""
|
||||
},
|
||||
gushuList: [],
|
||||
|
||||
restaurants: [],
|
||||
author: "",
|
||||
publisherList: [],
|
||||
fileList: [],
|
||||
fileListNovel: [],
|
||||
dialogImageUrl: "",
|
||||
dialogVisible: false,
|
||||
dataForm: {
|
||||
type: 0,
|
||||
app_type: 0
|
||||
},
|
||||
|
||||
dataRule: {
|
||||
// url: [{ required: true, message: "链接地址不能为空", trigger: "blur" }]
|
||||
},
|
||||
urlList: {
|
||||
// info: "/master/message/getMessageById",
|
||||
add: "/master/mainAd/addMainAd",
|
||||
edit: "/master/mainAd/editMainAd",
|
||||
productInfo: "/master/shopProduct/getProductDetail"
|
||||
}
|
||||
};
|
||||
},
|
||||
components: { commonShopTable },
|
||||
created() {},
|
||||
mounted() {
|
||||
// this.restaurants = this.loadAll();
|
||||
},
|
||||
methods: {
|
||||
selectType() {
|
||||
this.bindProductData = {};
|
||||
this.dataForm.relationId = "";
|
||||
this.$forceUpdate();
|
||||
},
|
||||
clearBind() {
|
||||
this.bindProductData = {};
|
||||
this.dataForm.relationId = "";
|
||||
this.$forceUpdate();
|
||||
},
|
||||
async bindProduct(data) {
|
||||
console.log("data at line 186:", data);
|
||||
this.dataForm.relationId = data.productId;
|
||||
this.bindProductData = data;
|
||||
// await this.getProductInfo();
|
||||
|
||||
this.$forceUpdate();
|
||||
},
|
||||
showProTable(data) {
|
||||
console.log("data", data);
|
||||
this.$nextTick(() => {
|
||||
this.$refs.commonShopTable.open();
|
||||
});
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
this.dataForm.icon = "";
|
||||
// this.dataForm.noneBtnImg = fileList.length >= this.dataForm.limitCountImg;
|
||||
},
|
||||
handlePicSuccess(res, file) {
|
||||
if (res.msg == "success") {
|
||||
this.dataForm.icon = res;
|
||||
this.$message.success("上传成功");
|
||||
} else {
|
||||
this.$message.error("上传失败");
|
||||
}
|
||||
},
|
||||
changeType(e) {
|
||||
console.log("e at line 256:", e);
|
||||
if (e == 0) {
|
||||
this.dataForm.content = "";
|
||||
} else {
|
||||
this.dataForm.url = "";
|
||||
}
|
||||
},
|
||||
contentUploadSuccess(res, file) {
|
||||
// console.log(res)
|
||||
let quill = this.$refs.myQuillEditor.quill;
|
||||
// 如果上传成功
|
||||
if (res) {
|
||||
// 获取光标所在位置
|
||||
let length = quill.getSelection().index;
|
||||
// 插入图片，res为服务器返回的图片链接地址
|
||||
quill.insertEmbed(length, "image", res.url);
|
||||
// 调整光标到最后
|
||||
quill.setSelection(length + 1);
|
||||
} else {
|
||||
// 提示信息，需引入Message
|
||||
this.$message.error("图片插入失败！");
|
||||
}
|
||||
},
|
||||
// 失去焦点事件
|
||||
onEditorBlur(quill) {
|
||||
// console.log('editor blur!', quill)
|
||||
},
|
||||
// 获得焦点事件
|
||||
onEditorFocus(quill) {
|
||||
//console.log('editor focus!', quill)
|
||||
},
|
||||
// 准备富文本编辑器
|
||||
onEditorReady(quill) {
|
||||
// console.log('editor ready!', quill)
|
||||
},
|
||||
init(row) {
|
||||
this.dataForm = { ...row };
|
||||
if (this.dataForm.icon) {
|
||||
this.fileList.push({
|
||||
name: this.dataForm.icon,
|
||||
url: this.dataForm.icon
|
||||
});
|
||||
}
|
||||
if (this.dataForm.shopProduct) {
|
||||
this.bindProductData = { ...this.dataForm.shopProduct };
|
||||
} else {
|
||||
this.bindProductData = {};
|
||||
}
|
||||
this.$forceUpdate();
|
||||
this.visible = true;
|
||||
this.$nextTick(()=>{
|
||||
this.$refs.dataForm.clearValidate();
|
||||
})
|
||||
|
||||
|
||||
},
|
||||
|
||||
async getProductInfo() {
|
||||
if (this.dataForm.relationId == "" || this.dataForm.type != 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
await this.$http({
|
||||
url: this.$http.adornUrl(this.urlList.productInfo),
|
||||
|
||||
method: "POST",
|
||||
data: {
|
||||
productId: this.dataForm.relationId
|
||||
},
|
||||
header: {
|
||||
//默认 无 说明：请求头
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
}).then(({ data }) => {
|
||||
console.log("data at line 273:", data);
|
||||
|
||||
this.bindProductData = data.detail.detail;
|
||||
});
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit: debounce(async function () {
|
||||
this.$refs["dataForm"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.dataForm.appType == 0 || this.dataForm.appType) {
|
||||
if (this.dataForm.type == 0 && this.dataForm.relationId == "") {
|
||||
this.$message.error("请选择关联商品");
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
this.$message.error("请选择发布APP");
|
||||
return;
|
||||
}
|
||||
if (this.dataForm.type == 0 || this.dataForm.type) {
|
||||
} else {
|
||||
this.$message.error("请选择广告类型");
|
||||
return;
|
||||
}
|
||||
if (!this.dataForm.icon || this.dataForm.icon == "") {
|
||||
this.$message.error("请上传图片");
|
||||
return;
|
||||
}
|
||||
console.log("this.dataForm.type at line 332:", this.dataForm);
|
||||
|
||||
this.$http
|
||||
.request({
|
||||
url: this.$http.adornUrl(
|
||||
this.dataForm.id ? this.urlList.edit : this.urlList.add
|
||||
),
|
||||
method: "POST",
|
||||
data: this.dataForm,
|
||||
header: {
|
||||
//默认 无 说明：请求头
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
})
|
||||
.then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.$message({
|
||||
message: "操作成功",
|
||||
type: "success",
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false;
|
||||
this.$emit("refreshDataList");
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$message.error(data.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},200),
|
||||
handlePicSuccess(res, file) {
|
||||
// console.log(res,'res')
|
||||
if (res.msg == "success") {
|
||||
this.dataForm.icon = res.url;
|
||||
this.fileList.push({
|
||||
name: file.name,
|
||||
url: res.url
|
||||
});
|
||||
// console.log(this.dataForm.image,'image')
|
||||
this.$message.success("上传成功");
|
||||
} else {
|
||||
this.$message.error("上传失败");
|
||||
}
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
this.dataForm.icon = "";
|
||||
this.fileList = [];
|
||||
this.dataForm.noneBtnImg = fileList.length >= this.dataForm.limitCountImg;
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dataForm.icon = file.url;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
handleDownload(file) {
|
||||
console.log(file);
|
||||
},
|
||||
handlereset() {
|
||||
(this.fileList = []), (this.fileListNovel = []), (this.visible = false);
|
||||
},
|
||||
handlePreview(file) {
|
||||
console.log(file);
|
||||
},
|
||||
handleExceed(files, fileList) {
|
||||
this.$message.warning(
|
||||
`当前限制选择 3 个文件，本次选择了 ${
|
||||
files.length
|
||||
} 个文件，共选择了 ${files.length + fileList.length} 个文件`
|
||||
);
|
||||
},
|
||||
beforeRemove(file, fileList) {
|
||||
return this.$confirm(`确定移除 ${file.name}？`);
|
||||
},
|
||||
handleRemoveNovel(file) {
|
||||
this.dataForm.novel = "";
|
||||
},
|
||||
handleNovelSuccess(file) {
|
||||
this.dataForm.novel = file.url;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-uploadfeng {
|
||||
/deep/ .el-upload-list__item {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
.el-upload-list__item-thumbnail {
|
||||
object-fit: cover !important;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .el-upload--picture-card {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
line-height: 110px;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .addFormBox.el-form-item {
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
|
||||
/deep/ .ql-container {
|
||||
min-height: 400px !important ;
|
||||
}
|
||||
/deep/ .el-radio {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
/deep/ .iconBox {
|
||||
background: transparent !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user