feature_0521
郑皇 6 years ago
parent 70dc6282c6
commit 4b1ca750fc

@ -1,109 +1,89 @@
<template>
<Modal v-model="dispalyModal"
width="1000"
:loading="true"
:mask-closable="false">
<p slot="header"
style="color:#f60;text-align:left">
<Modal v-model="dispalyModal" width="1000" :loading="true" :mask-closable="false">
<p slot="header" style="color:#f60;text-align:left">
<span>配置活动</span>
</p>
<div>基本配置</div>
<Form ref="formValidate"
:model="formValidate"
:rules="ruleValidate"
:label-width="80">
<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;">
<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" />
<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>
<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 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>
<Form-item label="欢迎语" prop="description">
<i-input
v-model="formValidate.welcome"
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 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>
<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-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-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>
<Button style="margin-left: 20px" type="error" @click="delActivityInput(index)"></Button>
</i-col>
</Row>
<Button style="margin-top: 10px"
type="primary"
@click="addActivityInput">+添加活动类型</Button>
<Button style="margin-top: 10px" type="primary" @click="addActivityInput">+</Button>
<div slot="footer">
<Button type="primary"
shape="circle"
:loading="modal_loading"
@click="cancel">取消</Button>
<Button type="primary"
shape="circle"
:loading="modal_loading"
@click="save">确定</Button>
<Button type="primary" shape="circle" :loading="modal_loading" @click="cancel"></Button>
<Button type="primary" shape="circle" :loading="modal_loading" @click="save"></Button>
</div>
</Modal>
</template>
@ -112,7 +92,7 @@ import ActivityManager from "../../services/ActivityManager/ActivityManager";
import axios from "axios";
export default {
name: "addActivity",
data () {
data() {
return {
dispalyModal: false,
currentStep: 0,
@ -122,25 +102,26 @@ export default {
loading: true,
ruleValidate: {
name: [
{ required: true, message: "活动名称不能为空", trigger: "blur" },
{ required: true, message: "活动名称不能为空", trigger: "blur" }
],
description: [
{ required: true, message: "活动描述不能为空", trigger: "blur" },
{ required: true, message: "活动描述不能为空", trigger: "blur" }
],
appId: [{ required: true, message: "appId不能为空", trigger: "blur" }],
uri: [{ required: true, message: "URI不能为空", trigger: "blur" }],
welcome: [{ required: true, message: "请输入欢迎语", trigger: "blur" }]
// uploadImg: [
// { required: true, message: '', trigger: 'blur' }
// ]
},
}
};
},
props: {
addActivityModal: Boolean,
id: String,
id: String
},
watch: {
addActivityModal (val) {
addActivityModal(val) {
this.dispalyModal = val;
if (val === true && this.id) {
this.getActivityData();
@ -162,16 +143,16 @@ export default {
limitLower: "",
limitUpper: "",
name: "",
type: 0,
},
type: 0
}
];
}
this.$forceUpdate();
},
}
},
mounted () { },
mounted() {},
methods: {
addActivityInput () {
addActivityInput() {
let params = [...this.formValidate.params];
params.push({
defaultVal: "",
@ -182,12 +163,12 @@ export default {
limitLower: "",
limitUpper: "",
name: "",
type: 0,
type: 0
});
this.$set(this.formValidate, "params", params);
this.$forceUpdate();
},
delActivityInput (index) {
delActivityInput(index) {
if (this.formValidate.params.length <= 1) {
this.$Message.error("至少需要填写一个活动类型!");
return;
@ -195,22 +176,22 @@ export default {
this.formValidate.params.splice(index, 1);
this.$forceUpdate();
},
cancel () {
cancel() {
this.$emit("dispalyAddActivityModal", false, false);
},
getActivityData () {
getActivityData() {
let that = this;
let data = {
id: that.id,
id: that.id
};
ActivityManager.getActivityInfo(data, function (data) {
ActivityManager.getActivityInfo(data, function(data) {
that.formValidate = data.data.results;
});
},
uploadImgSuccess (res, file) {
uploadImgSuccess(res, file) {
this.imageName = file.name;
},
handleBeforeUpload (res) {
handleBeforeUpload(res) {
const me = this;
let data = new FormData();
data.append("file", res);
@ -219,9 +200,9 @@ export default {
url: "/upload",
data: data,
headers: {
"Content-Type": "multipart/form-data",
},
}).then(function (res) {
"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.localPath);
@ -230,7 +211,7 @@ export default {
});
return false;
},
save () {
save() {
let that = this;
that.modal_loading = true;
let i = 0;
@ -264,13 +245,13 @@ export default {
}
}
}
this.$refs["formValidate"].validate((valid) => {
this.$refs["formValidate"].validate(valid => {
if (valid) {
// param = JSON.stringify(param)
let data = { ...that.formValidate, isGetActivityInfo: true };
data.categoryId = 0;
data.categoryCode = "promotion";
ActivityManager.addOreditActivity(data, function (data) {
ActivityManager.addOreditActivity(data, function(data) {
that.addActivityModal = false;
that.formValidate = {};
that.modal_loading = false;
@ -281,8 +262,8 @@ export default {
that.$Message.error("表单验证失败!");
}
});
},
},
}
}
};
</script>

@ -2,160 +2,140 @@
<div class>
<Row>
<i-col :span="12">
<Form ref="welcomeForm"
:model="welcome"
:rules="welcomeRules">
<FormItem label="欢迎语内容"
prop="content">
<i-input v-model="welcome.content"
type="textarea"
style="height: 220px"
:autosize="{ minRows: 10, maxRows: 10 }"
placeholder="请输入欢迎语内容,最多100个字"></i-input>
<Form ref="welcomeForm" :model="welcome" :rules="welcomeRules">
<FormItem label="欢迎语内容" prop="content">
<i-input
v-model="welcome.content"
type="textarea"
style="height: 220px"
:autosize="{ minRows: 10, maxRows: 10 }"
placeholder="请输入欢迎语内容,最多100个字"
></i-input>
</FormItem>
<Row style="margin-bottom: 10px"
:gutter="10"
class="inputItem"
v-for="(item, index) in welcome.params"
:key="index">
<Row
style="margin-bottom: 10px"
:gutter="10"
class="inputItem"
v-for="(item, index) in welcome.params"
:key="index"
>
<div v-if="item.type == 3">
<i-col style="line-height: 32px"
:span="4">APPID {{ index + 1 }}</i-col>
<i-col :span="6">
<i-input class="inputClass"
type="text"
disabled
v-model="item.defaultVal"></i-input>
<i-col style="line-height: 32px" :span="2">APPID {{ index + 1 }}</i-col>
<i-col :span="4">
<i-input class="inputClass" type="text" disabled v-model="item.defaultVal"></i-input>
</i-col>
<i-col style="line-height: 32px"
:span="4">URI {{ index + 1 }}</i-col>
<i-col :span="6">
<i-input class="inputClass"
type="text"
disabled
v-model="item.description"></i-input>
<i-col style="line-height: 32px" :span="2">URI {{ index + 1 }}</i-col>
<i-col :span="5">
<i-input class="inputClass" type="text" disabled v-model="item.description"></i-input>
</i-col>
<i-col style="line-height: 32px" :span="2">MediaId{{ index + 1 }}</i-col>
<i-col :span="5">
<i-input class="inputClass" type="text" disabled v-model="item.limitLower"></i-input>
</i-col>
</div>
<div v-else>
<i-col style="line-height: 32px"
:span="4">{{ item.name }}{{ index + 1 }}</i-col>
<i-col style="line-height: 32px" :span="4">{{ item.name }}{{ index + 1 }}</i-col>
<i-col :span="16">
<i-input class="inputClass"
type="text"
disabled
v-model="item.defaultVal"></i-input>
<i-input class="inputClass" type="text" disabled v-model="item.defaultVal"></i-input>
</i-col>
</div>
<i-col :span="4">
<Button type="error"
@click="delActivityInput(index)">删除</Button>
<Button type="error" @click="delActivityInput(index)"></Button>
</i-col>
</Row>
<FormItem>
<Button type="text"
@click="() => (showMessageTypes = true)"
icon="md-add">添加图片/网页/小程序消息</Button>
<Button type="text" @click="() => (showMessageTypes = true)" icon="md-add">添加图片/网页/小程序消息</Button>
</FormItem>
<FormItem label="配置范围: ">
<span @click="showStores"
v-if="welcome.stores.length > 0">{{ welcome.stores[0].name }}{{ welcome.stores.length }}家店铺</span>
<Button type="text"
v-if="welcome.stores.length <= 0"
@click="showStores"
icon="md-add">全部店铺</Button>
<span
@click="showStores"
v-if="welcome.stores.length > 0"
>{{ welcome.stores[0].name }}{{ welcome.stores.length }}家店铺</span>
<Button
type="text"
v-if="welcome.stores.length <= 0"
@click="showStores"
icon="md-add"
>全部店铺</Button>
</FormItem>
<FormItem>
<Button type="primary"
long
@click="submit">确定</Button>
<Button type="primary" long @click="submit"></Button>
</FormItem>
</Form>
</i-col>
</Row>
<Modal v-model="showMessageTypes"
title="添加图片/网页/小程序消息"
:footer-hide="true">
<Modal v-model="showMessageTypes" title="添加图片/网页/小程序消息" :footer-hide="true">
<Row :gutter="24">
<i-col :span="8">
<Upload ref="upload"
:show-upload-list="false"
:on-success="uploadImgSuccess"
:format="['jpg', 'jpeg', 'png']"
:max-size="2048"
:on-exceeded-size="onExceededSize"
:before-upload="handleBeforeUpload"
multiple
type="drag"
action
style="width: 100%;">
<Upload
ref="upload"
:show-upload-list="false"
:on-success="uploadImgSuccess"
:format="['jpg', 'jpeg', 'png']"
:max-size="2048"
:on-exceeded-size="onExceededSize"
:before-upload="handleBeforeUpload"
multiple
type="drag"
action
style="width: 100%;"
>
<div style="width: 100%;">
<Button long
type="primary">{{imageUploading ? "上传中..." : "图片"}}</Button>
<Button long type="primary">{{imageUploading ? "上传中..." : "图片"}}</Button>
</div>
</Upload>
</i-col>
<i-col :span="8">
<Button long
@click="doShowWeb"
type="primary">网页</Button>
<Button long @click="doShowWeb" type="primary">网页</Button>
</i-col>
<i-col :span="8">
<Button long
@click="doShowMini"
type="primary">小程序</Button>
<Button long @click="doShowMini" type="primary">小程序</Button>
</i-col>
</Row>
</Modal>
<Modal v-model="showWeb"
title="添加网页消息"
:loading="true">
<Form ref="webForm"
:model="webForm"
:rules="webFormRules">
<FormItem label="添加网页消息"
prop="url">
<i-input v-model="webForm.url"
type="text"
placeholder="以http或https开头"></i-input>
<Modal v-model="showWeb" title="添加网页消息" :loading="true">
<Form ref="webForm" :model="webForm" :rules="webFormRules">
<FormItem label="添加网页消息" prop="url">
<i-input v-model="webForm.url" type="text" placeholder="以http或https开头"></i-input>
</FormItem>
</Form>
<div slot="footer">
<Button type="primary"
@click="cancelWeb">取消</Button>
<Button type="primary"
@click="okWeb">确定</Button>
<Button type="primary" @click="cancelWeb"></Button>
<Button type="primary" @click="okWeb"></Button>
</div>
</Modal>
<Modal v-model="showMini"
title="添加小程序消息"
:loading="true">
<Form ref="miniForm"
:model="miniForm"
:rules="miniFormRules">
<FormItem label="APPID"
prop="appid">
<i-input v-model="miniForm.appid"
type="text"
placeholder="请输入appid"></i-input>
<Modal v-model="showMini" title="添加小程序消息" :loading="true">
<Form ref="miniForm" :model="miniForm" :rules="miniFormRules">
<FormItem label="APPID" prop="appid">
<i-input v-model="miniForm.appid" type="text" placeholder="请输入appid"></i-input>
</FormItem>
<FormItem label="URI"
prop="uri">
<i-input v-model="miniForm.uri"
type="text"
placeholder="请输入URl"></i-input>
<FormItem label="URI" prop="uri">
<i-input v-model="miniForm.uri" type="text" placeholder="请输入URl"></i-input>
</FormItem>
<Upload
ref="upload"
:show-upload-list="false"
:on-success="miniUploadImgSuccess"
:format="['jpg', 'jpeg', 'png']"
:max-size="2048"
:on-exceeded-size="onExceededSize"
:before-upload="handleBeforeUploadMini"
multiple
type="drag"
action
style="width: 100%;"
>
<div style="width: 100%;">
<Button long type="primary">{{imageUploading ? "上传中..." : "上传封面图"}}</Button>
</div>
</Upload>
</Form>
<div slot="footer">
<Button type="primary"
@click="cancelMini">取消</Button>
<Button type="primary"
@click="okMini">确定</Button>
<Button type="primary" @click="cancelMini"></Button>
<Button type="primary" @click="okMini"></Button>
</div>
</Modal>
<selectStoreStep :isModify="id>0"
@doShow="doShow"
:schedule="welcome"
:show="showStoreCheck"></selectStoreStep>
<selectStoreStep :isModify="id>0" @doShow="doShow" :schedule="welcome" :show="showStoreCheck"></selectStoreStep>
</div>
</template>
@ -174,7 +154,7 @@ const validateUrl = (rule, value, callback) => {
}
};
export default {
data () {
data() {
return {
showStoreCheck: false,
showWeb: false,
@ -212,12 +192,12 @@ export default {
appid: [{ required: true, message: "请输入url", trigger: "blur" }],
uri: [{ required: true, message: "请输入url", trigger: "blur" }]
},
miniForm: { appid: "", uri: "" }
miniForm: { appid: "", uri: "", limitLower: "", limitUpper: "" }
};
},
watch: {
welcome: {
handler () {
handler() {
store.commit("SET_useData", {
...store.getters.useData,
...this.welcome
@ -227,7 +207,7 @@ export default {
deep: true
}
},
created () {
created() {
this.id = this.$route.query.id;
// store.commit("SET_useData", { ...store.getters.useData, ...this.welcome });
console.log(this.$route);
@ -239,14 +219,14 @@ export default {
selectStoreStep
},
methods: {
doShow () {
doShow() {
this.showStoreCheck = false;
this.welcome = store.getters.useData;
},
onExceededSize () {
onExceededSize() {
console.log("失败");
},
getDetail (instanceId) {
getDetail(instanceId) {
let _this = this;
ActivityManager.instanceDetail(
{
@ -261,7 +241,7 @@ export default {
}
);
},
showStores () {
showStores() {
console.log({ ...store.getters.useData, ...this.welcome });
store.commit("SET_useData", {
...this.welcome,
@ -269,25 +249,26 @@ export default {
});
this.showStoreCheck = true;
},
uploadImgSuccess (res, file) { },
cancelWeb () {
uploadImgSuccess(res, file) {},
miniUploadImgSuccess(res, file) {},
cancelWeb() {
this.showWeb = false;
},
doShowWeb () {
doShowWeb() {
this.showWeb = true;
this.webForm = { url: "" };
},
doShowMini () {
doShowMini() {
this.showMini = true;
this.miniForm = {
appid: "",
uri: ""
};
},
cancelMini () {
cancelMini() {
this.showMini = false;
},
okWeb () {
okWeb() {
let _this = this;
this.$refs["webForm"].validate(valid => {
if (valid) {
@ -307,7 +288,7 @@ export default {
}
});
},
okMini () {
okMini() {
let _this = this;
this.$refs["miniForm"].validate(valid => {
if (valid) {
@ -317,8 +298,8 @@ export default {
description: this.miniForm.uri,
isRequired: 1,
key: "mini",
limitLower: null,
limitUpper: null,
limitLower: this.miniForm.limitLower,
limitUpper: this.miniForm.limitUpper,
name: "小程序消息",
type: 3
});
@ -327,15 +308,40 @@ export default {
}
});
},
delActivityInput (index) {
delActivityInput(index) {
this.welcome.params.splice(index, 1);
this.$forceUpdate();
},
handleBeforeUpload (res) {
handleBeforeUploadMini(res) {
const me = this;
let data = new FormData();
data.append("file", res);
data.append("needMediaId", "true");
console.log(data);
this.imageUploading = true;
axios({
method: "post",
url: "/upload",
data: data,
headers: {
"Content-Type": "multipart/form-data"
}
}).then(function(res) {
me.imageUploading = false;
if (res.data.success) {
// me.formValidate.logo = res.data.results;
me.miniForm.limitLower = res.data.results.mediaId;
me.miniForm.limitUpper = res.data.results.localPath;
me.showMessageTypes = false;
}
});
return false;
},
handleBeforeUpload(res) {
const me = this;
let data = new FormData();
data.append("file", res);
data.append("needMediaId", "true")
data.append("needMediaId", "true");
console.log(data);
this.imageUploading = true;
axios({
@ -345,7 +351,7 @@ export default {
headers: {
"Content-Type": "multipart/form-data"
}
}).then(function (res) {
}).then(function(res) {
me.imageUploading = false;
if (res.data.success) {
// me.formValidate.logo = res.data.results;
@ -365,7 +371,7 @@ export default {
});
return false;
},
submit () {
submit() {
let _this = this;
if (this.welcome.stores.length <= 0) {
_this.$Message.error("请至少选择一个店铺");

Loading…
Cancel
Save