|
@@ -2,7 +2,7 @@
|
|
|
<div id="">
|
|
|
<el-dialog
|
|
|
:visible.sync="dialogVisible"
|
|
|
- width="960px"
|
|
|
+ width="1060px"
|
|
|
:show-close="false"
|
|
|
:close-on-click-modal="false"
|
|
|
>
|
|
@@ -12,94 +12,118 @@
|
|
|
<img src="@/assets/images/Close@2x.png" alt="" @click="close" />
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div id="content">
|
|
|
- <modelView
|
|
|
- ref="modelView"
|
|
|
- :modelData="modelData"
|
|
|
- @changeModelData="changeModelData"
|
|
|
- ></modelView>
|
|
|
- <div class="right">
|
|
|
- <div class="lis">
|
|
|
- <el-checkbox v-model="modelData.title.checked">标题:</el-checkbox
|
|
|
- ><el-input v-model="modelData.title.name"></el-input
|
|
|
- ><el-color-picker
|
|
|
- v-model="modelData.title.css.color"
|
|
|
- show-alpha
|
|
|
- ></el-color-picker>
|
|
|
- <el-input
|
|
|
- placeholder="请输入字体大小"
|
|
|
- v-model="modelData.title.css.fontSize"
|
|
|
- >
|
|
|
- <template slot="prepend">字体大小</template></el-input
|
|
|
- >
|
|
|
- </div>
|
|
|
- <div class="lis">
|
|
|
- <el-checkbox v-model="modelData.background.checked"
|
|
|
- >背景图:</el-checkbox
|
|
|
- ><el-select
|
|
|
- v-model="modelData.background.name"
|
|
|
- placeholder="请选择"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="(item, index) in backImgList"
|
|
|
- :key="index"
|
|
|
- :label="item.label"
|
|
|
- :value="item.name"
|
|
|
- >
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- <div class="lis">
|
|
|
- <el-checkbox v-model="modelData.goods.checked">商品图:</el-checkbox
|
|
|
- ><input id="goods" type="file" @change="uploadImg" />
|
|
|
- </div>
|
|
|
- <div class="lis">
|
|
|
- <el-checkbox v-model="modelData.distribution.checked"
|
|
|
- >分销码</el-checkbox
|
|
|
- >
|
|
|
- <el-checkbox v-model="modelData.cardCode.checked"
|
|
|
- >电子名片码</el-checkbox
|
|
|
- >
|
|
|
- </div>
|
|
|
- <div class="lis">
|
|
|
- <el-checkbox v-model="modelData.advertise.checked"
|
|
|
- >广告语:</el-checkbox
|
|
|
- ><el-input v-model="modelData.advertise.name"></el-input
|
|
|
- ><el-color-picker
|
|
|
- v-model="modelData.advertise.css.color"
|
|
|
- show-alpha
|
|
|
- ></el-color-picker>
|
|
|
- <el-input
|
|
|
- placeholder="请输入字体大小"
|
|
|
- v-model="modelData.advertise.css.fontSize"
|
|
|
- >
|
|
|
- <template slot="prepend">字体大小</template></el-input
|
|
|
- >
|
|
|
- </div>
|
|
|
- <div class="lis">
|
|
|
- <el-checkbox v-model="modelData.mechanism.checked"
|
|
|
- >机构:</el-checkbox
|
|
|
- ><el-input v-model="modelData.mechanism.name"></el-input
|
|
|
- ><el-color-picker
|
|
|
- v-model="modelData.mechanism.css.color"
|
|
|
- show-alpha
|
|
|
- ></el-color-picker>
|
|
|
- <el-input
|
|
|
- placeholder="请输入字体大小"
|
|
|
- v-model="modelData.mechanism.css.fontSize"
|
|
|
- >
|
|
|
- <template slot="prepend">字体大小</template></el-input
|
|
|
- >
|
|
|
- </div>
|
|
|
- <el-button @click="submits">保存</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <el-form
|
|
|
+ :model="ruleForm"
|
|
|
+ :rules="rules"
|
|
|
+ ref="ruleForm"
|
|
|
+ label-width="100px"
|
|
|
+ class="demo-ruleForm"
|
|
|
+ ><el-form-item label="模板名称" prop="name">
|
|
|
+ <el-input v-model="ruleForm.name"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="模板配置">
|
|
|
+ <div id="content">
|
|
|
+ <modelView
|
|
|
+ ref="modelView"
|
|
|
+ :modelData="modelData"
|
|
|
+ @changeModelData="changeModelData"
|
|
|
+ ></modelView>
|
|
|
+ <div class="right">
|
|
|
+ <div class="lis">
|
|
|
+ <el-checkbox v-model="modelData.title.checked"
|
|
|
+ >标题:</el-checkbox
|
|
|
+ ><el-input v-model="modelData.title.name"></el-input
|
|
|
+ ><el-color-picker
|
|
|
+ v-model="modelData.title.css.color"
|
|
|
+ show-alpha
|
|
|
+ ></el-color-picker>
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入字体大小"
|
|
|
+ v-model="modelData.title.css.fontSize"
|
|
|
+ >
|
|
|
+ <template slot="prepend">字体大小</template></el-input
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="lis">
|
|
|
+ <el-checkbox v-model="modelData.background.checked"
|
|
|
+ >背景图:</el-checkbox
|
|
|
+ ><el-select
|
|
|
+ v-model="modelData.background.name"
|
|
|
+ placeholder="请选择"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in backImgList"
|
|
|
+ :key="index"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.url"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="lis">
|
|
|
+ <el-checkbox v-model="modelData.goods.checked"
|
|
|
+ >商品图:</el-checkbox
|
|
|
+ ><input id="goods" type="file" @change="uploadImg" />
|
|
|
+ </div>
|
|
|
+ <div class="lis">
|
|
|
+ <el-checkbox v-model="modelData.distribution.checked"
|
|
|
+ >分销码</el-checkbox
|
|
|
+ >
|
|
|
+ <el-checkbox v-model="modelData.cardCode.checked"
|
|
|
+ >电子名片码</el-checkbox
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="lis">
|
|
|
+ <el-checkbox v-model="modelData.advertise.checked"
|
|
|
+ >广告语:</el-checkbox
|
|
|
+ ><el-input v-model="modelData.advertise.name"></el-input
|
|
|
+ ><el-color-picker
|
|
|
+ v-model="modelData.advertise.css.color"
|
|
|
+ show-alpha
|
|
|
+ ></el-color-picker>
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入字体大小"
|
|
|
+ v-model="modelData.advertise.css.fontSize"
|
|
|
+ >
|
|
|
+ <template slot="prepend">字体大小</template></el-input
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="lis">
|
|
|
+ <el-checkbox v-model="modelData.mechanism.checked"
|
|
|
+ >机构:</el-checkbox
|
|
|
+ ><el-input v-model="modelData.mechanism.name"></el-input
|
|
|
+ ><el-color-picker
|
|
|
+ v-model="modelData.mechanism.css.color"
|
|
|
+ show-alpha
|
|
|
+ ></el-color-picker>
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入字体大小"
|
|
|
+ v-model="modelData.mechanism.css.fontSize"
|
|
|
+ >
|
|
|
+ <template slot="prepend">字体大小</template></el-input
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div> </el-form-item
|
|
|
+ ><el-form-item label="状态" prop="status">
|
|
|
+ <el-radio-group v-model="ruleForm.status">
|
|
|
+ <el-radio :label="1">开启</el-radio>
|
|
|
+ <el-radio :label="0">关闭</el-radio>
|
|
|
+ </el-radio-group> </el-form-item
|
|
|
+ ><el-form-item label="备注" prop="remark">
|
|
|
+ <el-input
|
|
|
+ type="textarea"
|
|
|
+ v-model="ruleForm.remark"
|
|
|
+ :rows="4"
|
|
|
+ ></el-input> </el-form-item
|
|
|
+ ></el-form>
|
|
|
+
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
<el-button @click="close">取 消</el-button>
|
|
|
<el-button
|
|
|
type="primary"
|
|
|
:loading="disabledBtn"
|
|
|
- @click="submit('listData')"
|
|
|
+ @click="submit('ruleForm')"
|
|
|
>确 定</el-button
|
|
|
>
|
|
|
</span>
|
|
@@ -116,13 +140,13 @@ export default {
|
|
|
dialogVisible: false,
|
|
|
disabledBtn: false,
|
|
|
// 弹窗数据
|
|
|
- listData: {},
|
|
|
-
|
|
|
- backImgList: [
|
|
|
- { label: "模板1", name: require("@/assets/model_images/model1.png") },
|
|
|
- { label: "模板2", name: require("@/assets/model_images/model2.png") },
|
|
|
- { label: "模板3", name: require("@/assets/model_images/model3.png") },
|
|
|
- ],
|
|
|
+ ruleForm: {},
|
|
|
+ rules: {
|
|
|
+ name: [{ required: true, message: "请输入模板名称", trigger: "blur" }],
|
|
|
+ status: [{ required: true, message: "请选择状态", trigger: "change" }],
|
|
|
+ remark: [{ required: false, message: "请输入备注", trigger: "blur" }],
|
|
|
+ },
|
|
|
+ backImgList: [],
|
|
|
modelData: {
|
|
|
background: {
|
|
|
name: "",
|
|
@@ -206,25 +230,144 @@ export default {
|
|
|
},
|
|
|
};
|
|
|
},
|
|
|
+ created() {
|
|
|
+ this.getPosterBackgroundImgList();
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ //获取模板底图
|
|
|
+ getPosterBackgroundImgList() {
|
|
|
+ this.$api.inquiredistributionposterimagelist().then((res) => {
|
|
|
+ this.backImgList = res.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
showBox(e) {
|
|
|
+ if (e) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.ruleForm = {
|
|
|
+ name: e.name,
|
|
|
+ posterTempId: e.posterTempId,
|
|
|
+ posterUrl: e.posterUrl,
|
|
|
+ remark: e.remark,
|
|
|
+ status: e.status,
|
|
|
+ };
|
|
|
+ this.modelData = JSON.parse(e.posterConfig);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.modelData = {
|
|
|
+ background: {
|
|
|
+ name: "",
|
|
|
+ css: {
|
|
|
+ top: "0px",
|
|
|
+ left: "0px",
|
|
|
+ width: "375px",
|
|
|
+ height: "667px",
|
|
|
+ position: "absolute",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ name: "",
|
|
|
+ top: 38,
|
|
|
+ left: 0,
|
|
|
+ width: 375,
|
|
|
+ height: 50,
|
|
|
+ css: {
|
|
|
+ textAlign: "center",
|
|
|
+ fontSize: "30px",
|
|
|
+ margin: "0px",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ goods: {
|
|
|
+ // name: require("@/assets/model_images/model1.png"),
|
|
|
+ name: "",
|
|
|
+ top: 126,
|
|
|
+ left: 28,
|
|
|
+ width: 330,
|
|
|
+ height: 330,
|
|
|
+ css: {
|
|
|
+ width: "100%",
|
|
|
+ height: "100%",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ distribution: {
|
|
|
+ name: "",
|
|
|
+ top: 476,
|
|
|
+ left: 114,
|
|
|
+ width: 121,
|
|
|
+ height: 111,
|
|
|
+ css: {
|
|
|
+ width: "100%",
|
|
|
+ height: "100%",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ cardCode: {
|
|
|
+ name: "",
|
|
|
+ top: 476,
|
|
|
+ left: 244,
|
|
|
+ width: 125,
|
|
|
+ height: 112,
|
|
|
+ css: {
|
|
|
+ width: "100%",
|
|
|
+ height: "100%",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ advertise: {
|
|
|
+ name: "",
|
|
|
+ top: 490,
|
|
|
+ left: 0,
|
|
|
+ width: 102,
|
|
|
+ height: 96,
|
|
|
+ css: {
|
|
|
+ fontSize: "20px",
|
|
|
+ margin: "0px",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mechanism: {
|
|
|
+ name: "",
|
|
|
+ top: 623,
|
|
|
+ left: 0,
|
|
|
+ width: 375,
|
|
|
+ height: 44,
|
|
|
+ css: {
|
|
|
+ fontSize: "16px",
|
|
|
+ textAlign: "center",
|
|
|
+ margin: "0px",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
+ this.ruleForm = {};
|
|
|
+ });
|
|
|
+ }
|
|
|
this.dialogVisible = true;
|
|
|
},
|
|
|
- submit() {
|
|
|
- this.disabledBtn = true;
|
|
|
- setTimeout(() => {
|
|
|
- this.$message.success("提交成功");
|
|
|
- this.disabledBtn = false;
|
|
|
- this.dialogVisible = false;
|
|
|
- this.search();
|
|
|
- }, 500);
|
|
|
- },
|
|
|
close() {
|
|
|
+ this.$refs["ruleForm"].clearValidate();
|
|
|
this.dialogVisible = false;
|
|
|
},
|
|
|
- async submits() {
|
|
|
- const imgUrl = await this.$refs.modelView.changeFile();
|
|
|
- console.log(imgUrl, this.modelData);
|
|
|
+ submit(formName) {
|
|
|
+ this.$refs[formName].validate(async (valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.disabledBtn = true;
|
|
|
+ this.ruleForm.posterUrl = await this.$refs.modelView.changeFile();
|
|
|
+ this.ruleForm.posterConfig = JSON.stringify(this.modelData);
|
|
|
+ this.$api[
|
|
|
+ this.ruleForm.posterTempId
|
|
|
+ ? "editdistributionposter"
|
|
|
+ : "distributionpostersave"
|
|
|
+ ](this.ruleForm)
|
|
|
+ .then((res) => {
|
|
|
+ this.dialogVisible = false;
|
|
|
+ console.log(this.$parent);
|
|
|
+ this.$parent.search();
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ this.disabledBtn = false;
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ console.log("error submit!!");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
changeModelData(data) {
|
|
|
const { name, left, top, width, height } = data;
|
|
@@ -245,7 +388,7 @@ export default {
|
|
|
var self = this;
|
|
|
var file = e.target.files[0];
|
|
|
if (file === undefined) {
|
|
|
- self.$set(self.listData, "coverUrl", "");
|
|
|
+ self.$set(self.modelData.goods, "name", "");
|
|
|
return;
|
|
|
}
|
|
|
if (file.size > 0.3 * 1024 * 1024) {
|
|
@@ -266,7 +409,7 @@ export default {
|
|
|
this.$upload
|
|
|
.upload(file, 0)
|
|
|
.then((res) => {
|
|
|
- this.$set(this.modelData.goods, "name", res);
|
|
|
+ this.$set(self.modelData.goods, "name", res);
|
|
|
})
|
|
|
.finally(() => {
|
|
|
e.target.value = "";
|