vue+element 实现商城主题开发的示例代码(2)

<script> import { createThemeColor, updateThemeColor, getThemeColor } from "@/api/scs/themeColor"; import { getRotationChart } from "@/api/sms/homeAdvertise"; import MultiUpload from "@/components/Upload/multiUpload"; export default { name: "EditColor", props: { isEdit: { type: Boolean, default: false } }, components: { MultiUpload }, data() { return { theme: { backgroundColor: "#000000", bottomSelectFontColor: "#ffffff", navigationFontColor: '#000000' }, activeIndex: "1", activeIndex2: "1", bottomIndex: 1, banner: [], rules: { name: [ { required: true, message: "请输入主题名称", trigger: "blur" }, { min: 2, max: 18, message: "值为2 - 18位数", trigger: "blur" } ], backgroundColor: [ { required: true, message: "请输入颜色值", trigger: "blur" }, { min: 7, max: 7, message: "值为7位数", trigger: "blur" } ], bottomSelectFontColor: [ { required: true, message: "请输入颜色值", trigger: "blur" }, { min: 7, max: 7, message: "值为7位数", trigger: "blur" } ], navigationFontColor: [ { required: true, message: "请输入颜色值", trigger: "blur" }, { min: 7, max: 7, message: "值为7位数", trigger: "blur" } ], shopStreetImg: [ { required: true, message: "请上传图片", trigger: "blur" } ], classifyImg: [ { required: true, message: "请上传图片", trigger: "blur" } ], starBagImg: [ { required: true, message: "请上传图片", trigger: "blur" } ], signInImg: [{ required: true, message: "请上传图片", trigger: "blur" }], yuanbaoShopImg: [ { required: true, message: "请上传图片", trigger: "blur" } ], luckDrawImg: [ { required: true, message: "请上传图片", trigger: "blur" } ], limitedSeckillImg: [ { required: true, message: "请上传图片", trigger: "blur" } ], oddsProductImg: [ { required: true, message: "请上传图片", trigger: "blur" } ], navigationBackgroundImg: [ { required: true, message: "请上传图片", trigger: "blur" } ], homePageIconUnchecked: [ { required: true, message: "请上传图片", trigger: "blur" } ], recommendIconUnchecked: [ { required: true, message: "请上传图片", trigger: "blur" } ], searchIconUnchecked: [ { required: true, message: "请上传图片", trigger: "blur" } ], chatIconUnchecked: [ { required: true, message: "请上传图片", trigger: "blur" } ], personalCenterIconUnchecked: [ { required: true, message: "请上传图片", trigger: "blur" } ], homePageIconChecked: [ { required: true, message: "请上传图片", trigger: "blur" } ], recommendIconChecked: [ { required: true, message: "请上传图片", trigger: "blur" } ], searchIconChecked: [ { required: true, message: "请上传图片", trigger: "blur" } ], chatIconChecked: [ { required: true, message: "请上传图片", trigger: "blur" } ], personalCenterIconChecked: [ { required: true, message: "请上传图片", trigger: "blur" } ] } }; }, created() { this.getBanner(); if (this.isEdit) { getThemeColor(this.$route.query.id).then(response => { this.theme = response.data; }); } }, methods: { getBanner() { getRotationChart({ pageNum: 1, pageSize: 50 }).then(res => { this.banner = res.data.records; }); }, setBgc(res) { if (res.split("")[0] !== "#" || res.match(/#/g).length > 1) { this.$message.error("颜色格式错误，请从新填写。"); this.$set(this.theme, "backgroundColor", "#000000"); return false; } this.$set(this.theme, "backgroundColor", res); }, setBbgc(res) { if (res.split("")[0] !== "#" || res.match(/#/g).length > 1) { this.$message.error("颜色格式错误，请从新填写。"); this.$set(this.theme, "bottomSelectFontColor", "#ffffff"); return false; } this.$set(this.theme, "bottomSelectFontColor", res); }, setNavColor(res) { if (res.split("")[0] !== "#" || res.match(/#/g).length > 1) { this.$message.error("颜色格式错误，请从新填写。"); this.$set(this.theme, "navigationFontColor", "#000000"); return false; } this.$set(this.theme, "navigationFontColor", res); }, selectProductInfo(res) { this.product = Object.assign(res, this.product); }, submitForm(formName) { this.$refs[formName].validate(valid => { if (valid) { this.$confirm("是否提交数据", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(() => { if (this.isEdit) { updateThemeColor(this.$route.query.id, this.theme).then( response => { if (response.code == 200) { this.$message({ message: "修改成功", type: "success", duration: 1000 }); this.$router.back(); } else { this.$message({ message: response.msg, type: "error", duration: 1000 }); } } ); } else { createThemeColor(this.theme).then(response => { if (response.code == 200) { this.$message({ message: "提交成功", type: "success", duration: 1000 }); this.$router.back(); } else { this.$message({ message: response.msg, type: "error", duration: 1000 }); } }); } }); } else { this.$message({ message: "验证失败", type: "error", duration: 1000 }); return false; } }); } } }; </script>