圆月山庄资源网 Design By www.vgjia.com
本文介绍了vue+element 实现商城主题开发的示例代码,分享给大家,具体如下:
<template> <div> <div class="set-phone"> <el-form :model="theme" :rules="rules" ref="ruleForm" class="demo-ruleForm"> <el-form-item label="主题名称:" prop="name"> <el-input v-model="theme.name" size="small" maxlength="18" show-word-limit></el-input> </el-form-item> <el-form-item label="顶部背景色:" prop="backgroundColor"> <el-input v-model="theme.backgroundColor" placeholder="#000000" size="small" maxlength="7" show-word-limit @change="setBgc" oninput="value=value.replace(/[^0-9abcdefABCDEF#]/g,'')" ></el-input> </el-form-item> <el-row type="flex" justify="space-around"> <el-col :span="6"> <el-form-item prop="shopStreetImg"> <p class="cla-p">店铺街</p> <multiUpload @upImg="res => $set(theme,'shopStreetImg', res)" :value="theme.shopStreetImg" :maxCount="1" ></multiUpload> </el-form-item> </el-col> <el-col :span="6"> <el-form-item prop="classifyImg"> <p class="cla-p">分类</p> <multiUpload @upImg="res => $set(theme,'classifyImg', res)" :value="theme.classifyImg" :maxCount="1" ></multiUpload> </el-form-item> </el-col> <el-col :span="6"> <el-form-item prop="starBagImg"> <p class="cla-p">星级礼包</p> <multiUpload @upImg="res => $set(theme,'starBagImg', res)" :value="theme.starBagImg" :maxCount="1" ></multiUpload> </el-form-item> </el-col> <el-col :span="6"> <el-form-item prop="signInImg"> <p class="cla-p">签到</p> <multiUpload @upImg="res => $set(theme,'signInImg', res)" :value="theme.signInImg" :maxCount="1" ></multiUpload> </el-form-item> </el-col> </el-row> <el-row type="flex" justify="space-around"> <el-col :span="6"> <el-form-item prop="yuanbaoShopImg"> <p class="cla-p">元宝商城</p> <multiUpload @upImg="res => $set(theme,'yuanbaoShopImg', res)" :value="theme.yuanbaoShopImg" :maxCount="1" ></multiUpload> </el-form-item> </el-col> <el-col :span="6"> <el-form-item prop="luckDrawImg"> <p class="cla-p">抽奖</p> <multiUpload @upImg="res => $set(theme,'luckDrawImg', res)" :value="theme.luckDrawImg" :maxCount="1" ></multiUpload> </el-form-item> </el-col> <el-col :span="6"> <el-form-item prop="limitedSeckillImg"> <p class="cla-p">限时秒杀</p> <multiUpload @upImg="res => $set(theme,'limitedSeckillImg', res)" :value="theme.limitedSeckillImg" :maxCount="1" ></multiUpload> </el-form-item> </el-col> <el-col :span="6"> <el-form-item prop="oddsProductImg"> <p class="cla-p">特惠商品</p> <multiUpload @upImg="res => $set(theme,'oddsProductImg', res)" :value="theme.oddsProductImg" :maxCount="1" ></multiUpload> </el-form-item> </el-col> </el-row> <el-form-item label="导航字体颜色:" prop="navigationFontColor"> <el-input v-model="theme.navigationFontColor" size="small" maxlength="7" show-word-limit @change="setNavColor" oninput="value=value.replace(/[^0-9abcdefABCDEF#]/g,'')" ></el-input> </el-form-item> <el-form-item label="导航背景图片:" prop="navigationBackgroundImg"> <multiUpload @upImg="res => $set(theme,'navigationBackgroundImg', res)" :value="theme.navigationBackgroundImg" :maxCount="1" ></multiUpload> </el-form-item> <el-row type="flex" justify="space-around"> <el-col :span="4"> <el-form-item prop="homePageIconUnchecked"> <p class="cla-p">首页未选中图标</p> <multiUpload @upImg="res => $set(theme,'homePageIconUnchecked', res)" :value="theme.homePageIconUnchecked" :maxCount="1" ></multiUpload> </el-form-item> </el-col> <el-col :span="4"> <el-form-item prop="recommendIconUnchecked"> <p class="cla-p">推荐未选中图标</p> <multiUpload @upImg="res => $set(theme,'recommendIconUnchecked', res)" :value="theme.recommendIconUnchecked" :maxCount="1" ></multiUpload> </el-form-item> </el-col> <el-col :span="4"> <el-form-item prop="searchIconUnchecked"> <p class="cla-p">搜索未选中图标</p> <multiUpload @upImg="res => $set(theme,'searchIconUnchecked', res)" :value="theme.searchIconUnchecked" :maxCount="1" ></multiUpload> </el-form-item> </el-col> <el-col :span="4"> <el-form-item prop="chatIconUnchecked"> <p class="cla-p">聊天未选中图标</p> <multiUpload @upImg="res => $set(theme,'chatIconUnchecked', res)" :value="theme.chatIconUnchecked" :maxCount="1" ></multiUpload> </el-form-item> </el-col> <el-col :span="4"> <el-form-item prop="personalCenterIconUnchecked"> <p class="cla-p">个人中心未选中图标</p> <multiUpload @upImg="res => $set(theme,'personalCenterIconUnchecked', res)" :value="theme.personalCenterIconUnchecked" :maxCount="1" ></multiUpload> </el-form-item> </el-col> </el-row> <el-row type="flex" justify="space-around"> <el-col :span="4"> <el-form-item prop="homePageIconChecked"> <p class="cla-p">首页选中图标</p> <multiUpload @upImg="res => $set(theme,'homePageIconChecked', res)" :value="theme.homePageIconChecked" :maxCount="1" ></multiUpload> </el-form-item> </el-col> <el-col :span="4"> <el-form-item prop="recommendIconChecked"> <p class="cla-p">推荐选中图标</p> <multiUpload @upImg="res => $set(theme,'recommendIconChecked', res)" :value="theme.recommendIconChecked" :maxCount="1" ></multiUpload> </el-form-item> </el-col> <el-col :span="4"> <el-form-item prop="searchIconChecked"> <p class="cla-p">搜索选中图标</p> <multiUpload @upImg="res => $set(theme,'searchIconChecked', res)" :value="theme.searchIconChecked" :maxCount="1" ></multiUpload> </el-form-item> </el-col> <el-col :span="4"> <el-form-item prop="chatIconChecked"> <p class="cla-p">聊天选中图标</p> <multiUpload @upImg="res => $set(theme,'chatIconChecked', res)" :value="theme.chatIconChecked" :maxCount="1" ></multiUpload> </el-form-item> </el-col> <el-col :span="4"> <el-form-item prop="personalCenterIconChecked"> <p class="cla-p">个人中心选中图标</p> <multiUpload @upImg="res => $set(theme,'personalCenterIconChecked', res)" :value="theme.personalCenterIconChecked" :maxCount="1" ></multiUpload> </el-form-item> </el-col> </el-row> <el-form-item label="底部选中字体颜色:" prop="bottomSelectFontColor"> <el-input v-model="theme.bottomSelectFontColor" size="small" maxlength="7" show-word-limit placeholder="#000000" @change="setBbgc" oninput="value=value.replace(/[^0-9abcdefABCDEF#]/g,'')" ></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button> </el-form-item> </el-form> </div> <!-- 显示样式 --> <div class="app-phone" :style="'background: ' + theme.backgroundColor"> <img class="header-img" src="/UploadFiles/2021-04-02/app_header.png"><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><style lang="scss" scoped> .set-phone { width: calc(100% - 400px); padding: 5%; .el-form-item { margin-bottom: 18px; } .cla-p { padding: 0; margin: 0; color: #666; line-height: 40px; } } .app-phone { position: fixed; top: 70px; right: 5%; width: 350px; box-shadow: 0 0 10px rgba(50, 50, 50, 0.2); perspective:150; transition: all .2s linear; overflow: hidden; &:hover { transform: translate3d(0,0,4px); box-shadow: 0 4px 8px #e1e1e1; box-shadow: 0 0 20px rgba(50, 50, 50, 0.3); } .header-img { display: block; width: 96%; margin: 4px 2%; } .el-menu-demo { display: flex; justify-content: space-around; margin: 2px 4% 0 4%; border: none; } .el-menu--horizontal > .el-menu-item { height: auto; line-height: normal; padding: 4px 12px; margin: 0; } .banner-img { display: block; width: 100%; height: 100%; } .nav { display: flex; flex-wrap: wrap; justify-content: space-around; padding: 10px 0; background: white; background-size: cover; background-repeat:no-repeat; .nav-item { width: 50px; height: 80px; margin: 0 15px; text-align: center; .item-img { width: 50px; height: 50px; } .item-name { padding: 0; margin: 2px 0; font-size: 12px; } } } .goods { width: 100%; } .footer { display: flex; flex-wrap: wrap; justify-content: space-around; width: 100%; height: 50px; padding: 0; margin: 0; .item { list-style: none; width: 50px; text-align: center; .item-img { width: 30px; height: 30px; } .item-name { padding: 0; margin: 0; font-size: 10px; color: white; } } } } </style>
圆月山庄资源网 Design By www.vgjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
暂无评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新日志
2024年12月24日
2024年12月24日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]