You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
289 lines
8.4 KiB
Vue
289 lines
8.4 KiB
Vue
<template>
|
|
<Modal v-model="dispalyModal"
|
|
width="1000"
|
|
:loading="loading"
|
|
:mask-closable="false"
|
|
@on-cancel="cancel"
|
|
@on-ok="save">
|
|
<p slot="header"
|
|
style="color:#f60;text-align:left">
|
|
<span>配置活动</span>
|
|
</p>
|
|
<div>基本配置</div>
|
|
<Form ref="formValidate"
|
|
:model="formValidate"
|
|
:rules="ruleValidate"
|
|
:label-width="80">
|
|
<Row>
|
|
<i-col style="text-align: left;"
|
|
span="8">
|
|
<FormItem label=""
|
|
prop="logo">
|
|
<Upload ref="upload"
|
|
:show-upload-list="false"
|
|
:on-success="uploadImgSuccess"
|
|
:format="['jpg', 'jpeg', 'png']"
|
|
:max-size="2048"
|
|
:before-upload="handleBeforeUpload"
|
|
multiple
|
|
type="drag"
|
|
action=""
|
|
style="display: inline-block;">
|
|
<div style="width: 200px;height:200px;line-height: 200px;">
|
|
<span v-if="!formValidate.logo">请上传图片</span>
|
|
<img v-if="formValidate.logo"
|
|
:src="`/kiisoo-ic` + formValidate.logo"
|
|
alt=""
|
|
style="width: 100%; height: auto" />
|
|
</div>
|
|
</Upload>
|
|
</FormItem>
|
|
</i-col>
|
|
<i-col span="15"
|
|
offset="1">
|
|
<FormItem label="活动名称"
|
|
prop="name">
|
|
<i-input type="text"
|
|
v-model="formValidate.name"
|
|
placeholder="请输入活动名称"></i-input>
|
|
</FormItem>
|
|
<Form-item label="活动描述"
|
|
prop="description">
|
|
<i-input v-model="formValidate.description"
|
|
type="textarea"
|
|
:autosize="{ minRows: 3 }"
|
|
placeholder="请输入活动描述"></i-input>
|
|
</Form-item>
|
|
<FormItem label="APPID"
|
|
prop="appId">
|
|
<i-input type="text"
|
|
v-model="formValidate.appId"
|
|
placeholder="请输入appid"></i-input>
|
|
</FormItem>
|
|
<FormItem label="URI"
|
|
prop="uri">
|
|
<i-input type="text"
|
|
v-model="formValidate.uri"
|
|
placeholder="请输入URI"></i-input>
|
|
</FormItem>
|
|
</i-col>
|
|
</Row>
|
|
</Form>
|
|
<div class="topic">活动类型</div>
|
|
<Row :gutter="10"
|
|
class="inputItem"
|
|
v-for="(item, index) in formValidate.params"
|
|
:key="index">
|
|
<i-col :span="2"> 类型{{ index + 1 }} </i-col>
|
|
<i-col :span="9">
|
|
<i-input class="inputClass"
|
|
type="text"
|
|
v-model="item.name"
|
|
placeholder="请输入活动类型名称"></i-input>
|
|
</i-col>
|
|
<i-col :span="9">
|
|
<i-input class="inputClass"
|
|
type="text"
|
|
style="margin-left: 20px"
|
|
v-model="item.defaultVal"
|
|
placeholder="请输入参数"></i-input>
|
|
</i-col>
|
|
<i-col :span="4">
|
|
<Button style="margin-left: 20px"
|
|
type="error"
|
|
@click="delActivityInput(index)">删除</Button>
|
|
</i-col>
|
|
</Row>
|
|
<Button style="margin-top: 10px"
|
|
type="primary"
|
|
@click="addActivityInput">+添加活动类型</Button>
|
|
</Modal>
|
|
</template>
|
|
<script>
|
|
import ActivityManager from "../../services/ActivityManager/ActivityManager";
|
|
import axios from "axios";
|
|
export default {
|
|
name: "addActivity",
|
|
data () {
|
|
return {
|
|
dispalyModal: false,
|
|
currentStep: 0,
|
|
modal_loading: false,
|
|
imageName: "212",
|
|
formValidate: {},
|
|
loading: true,
|
|
ruleValidate: {
|
|
name: [
|
|
{ required: true, message: "活动名称不能为空", trigger: "blur" },
|
|
],
|
|
description: [
|
|
{ required: true, message: "活动描述不能为空", trigger: "blur" },
|
|
],
|
|
appId: [{ required: true, message: "appId不能为空", trigger: "blur" }],
|
|
uri: [{ required: true, message: "URI不能为空", trigger: "blur" }],
|
|
// uploadImg: [
|
|
// { required: true, message: '请上传活动图片', trigger: 'blur' }
|
|
// ]
|
|
},
|
|
};
|
|
},
|
|
props: {
|
|
addActivityModal: Boolean,
|
|
id: String,
|
|
},
|
|
watch: {
|
|
addActivityModal (val) {
|
|
console.log(111, val);
|
|
this.dispalyModal = val;
|
|
if (val === true && this.id) {
|
|
this.getActivityData();
|
|
}
|
|
if (this.id == null || this.id.length <= 0) {
|
|
this.formValidate = {};
|
|
}
|
|
if (
|
|
typeof this.formValidate.params == "undefined" ||
|
|
this.formValidate.params.length <= 0
|
|
) {
|
|
this.formValidate.params = [
|
|
{
|
|
defaultVal: "",
|
|
description: "",
|
|
id: 0,
|
|
isRequired: 0,
|
|
key: "",
|
|
limitLower: "",
|
|
limitUpper: "",
|
|
name: "",
|
|
type: 0,
|
|
},
|
|
];
|
|
}
|
|
},
|
|
},
|
|
mounted () { },
|
|
methods: {
|
|
addActivityInput () {
|
|
let params = [...this.formValidate.params];
|
|
params.push({
|
|
defaultVal: "",
|
|
description: "",
|
|
id: 0,
|
|
isRequired: 0,
|
|
key: "",
|
|
limitLower: "",
|
|
limitUpper: "",
|
|
name: "",
|
|
type: 0,
|
|
});
|
|
this.$set(this.formValidate, "params", params);
|
|
this.$forceUpdate();
|
|
},
|
|
delActivityInput (index) {
|
|
if (this.formValidate.params.length <= 1) {
|
|
this.$Message.error("至少需要填写一个活动类型!");
|
|
return;
|
|
}
|
|
this.formValidate.params.splice(index, 1);
|
|
this.$forceUpdate();
|
|
},
|
|
cancel () {
|
|
this.$emit("dispalyAddActivityModal", false, false);
|
|
},
|
|
getActivityData () {
|
|
let that = this;
|
|
let data = {
|
|
id: that.id,
|
|
};
|
|
ActivityManager.getActivityInfo(data, function (data) {
|
|
that.formValidate = data.data.results;
|
|
});
|
|
},
|
|
uploadImgSuccess (res, file) {
|
|
this.imageName = file.name;
|
|
},
|
|
handleBeforeUpload (res) {
|
|
const me = this;
|
|
let data = new FormData();
|
|
data.append("file", res);
|
|
axios({
|
|
method: "post",
|
|
url: "/upload",
|
|
data: data,
|
|
headers: {
|
|
"Content-Type": "multipart/form-data",
|
|
},
|
|
}).then(function (res) {
|
|
if (res.data.success) {
|
|
// me.formValidate.logo = res.data.results;
|
|
me.$set(me.formValidate, "logo", res.data.results);
|
|
console.log(me.formValidate.logo);
|
|
}
|
|
});
|
|
return false;
|
|
},
|
|
save () {
|
|
let that = this;
|
|
let i = 0;
|
|
this.loading = true;
|
|
if (
|
|
typeof that.formValidate.logo == "undefined" ||
|
|
that.formValidate.logo == "" ||
|
|
that.formValidate.logo.length <= 0
|
|
) {
|
|
that.$Message.error("请上传活动封面!");
|
|
that.loading = false;
|
|
return false;
|
|
}
|
|
if (that.formValidate.params.length <= 0) {
|
|
that.$Message.error("至少需要填写一个活动类型!");
|
|
that.loading = false;
|
|
return false;
|
|
}
|
|
for (const key in that.formValidate.params) {
|
|
i++;
|
|
if (that.formValidate.params.hasOwnProperty(key)) {
|
|
const element = that.formValidate.params[key];
|
|
if (element.name.length <= 0) {
|
|
that.$Message.error(`请输入类型${i}的活动类型名称!`);
|
|
return false;
|
|
}
|
|
if (element.defaultVal.length <= 0) {
|
|
that.$Message.error(`请输入类型${i}的参数!`);
|
|
that.loading = false;
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
this.loading = true;
|
|
this.$refs["formValidate"].validate((valid) => {
|
|
if (valid) {
|
|
// param = JSON.stringify(param)
|
|
let data = { ...that.formValidate, isGetActivityInfo: true };
|
|
ActivityManager.addOreditActivity(data, function (data) {
|
|
that.addActivityModal = false;
|
|
that.formValidate = {};
|
|
that.$emit("dispalyAddActivityModal", false, true);
|
|
});
|
|
} else {
|
|
that.$Message.error("表单验证失败!");
|
|
}
|
|
that.loading = false;
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.inputClass {
|
|
width: 100%;
|
|
}
|
|
.inputItem {
|
|
margin-top: 20px;
|
|
}
|
|
.topic {
|
|
margin-top: 20px;
|
|
}
|
|
</style>
|