| 1 |
- {"remainingRequest":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\src\\pages\\app\\wechat\\menus\\index.vue?vue&type=style&index=0&id=54b330c0&scoped=true&lang=scss","dependencies":[{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\src\\pages\\app\\wechat\\menus\\index.vue","mtime":1761185180074},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\css-loader\\index.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\postcss-loader\\src\\index.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\sass-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQoqIHsNCiAgLW1vei11c2VyLXNlbGVjdDogbm9uZTsgLyrngavni5AqLw0KICAtd2Via2l0LXVzZXItc2VsZWN0OiBub25lOyAvKndlYmtpdOa1j+iniOWZqCovDQogIC1tcy11c2VyLXNlbGVjdDogbm9uZTsgLypJRTEwKi8NCiAgLWtodG1sLXVzZXItc2VsZWN0OiBub25lOyAvKuaXqeacn+a1j+iniOWZqCovDQogIHVzZXItc2VsZWN0OiBub25lOw0KfQ0KDQoubGVmdCB7DQogIG1pbi13aWR0aDogMzkwcHg7DQogIG1pbi1oZWlnaHQ6IDU1MHB4Ow0KICBwb3NpdGlvbjogcmVsYXRpdmU7DQogIHBhZGRpbmctbGVmdDogNDBweDsNCn0NCg0KLnRvcCB7DQogIHBvc2l0aW9uOiBhYnNvbHV0ZTsNCiAgdG9wOiAwcHg7DQp9DQoNCi5ib3R0b20gew0KICBwb3NpdGlvbjogYWJzb2x1dGU7DQogIGJvdHRvbTogMHB4Ow0KfQ0KDQoudGV4dGJvdCB7DQogIHBvc2l0aW9uOiBhYnNvbHV0ZTsNCiAgYm90dG9tOiAwcHg7DQogIGxlZnQ6IDU1cHg7DQogIHdpZHRoOiAxMDAlOw0KfQ0KLmFjdGl2ZSB7DQogIGJvcmRlcjogMXB4IHNvbGlkIHZhcigtLXByZXYtY29sb3ItcHJpbWFyeSkgIWltcG9ydGFudDsNCiAgY29sb3I6IHZhcigtLXByZXYtY29sb3ItcHJpbWFyeSkgIWltcG9ydGFudDsNCn0NCi5saSB7DQogIGZsb2F0OiBsZWZ0Ow0KICB3aWR0aDogOTJweDsNCiAgaGVpZ2h0OiA0OHB4Ow0KICBsaW5lLWhlaWdodDogNDhweDsNCiAgYm9yZGVyLWxlZnQ6IDFweCBzb2xpZCAjZTdlN2ViOw0KICBiYWNrZ3JvdW5kOiAjZmFmYWZhOw0KICB0ZXh0LWFsaWduOiBjZW50ZXI7DQogIGN1cnNvcjogcG9pbnRlcjsNCiAgY29sb3I6ICM5OTk7DQogIHBvc2l0aW9uOiByZWxhdGl2ZTsNCn0NCi50ZXh0IHsNCiAgaGVpZ2h0OiA1MHB4Ow0KICB3aGl0ZS1zcGFjZTogbm93cmFwOw0KICB3aWR0aDogMTAwJTsNCiAgb3ZlcmZsb3c6IGhpZGRlbjsNCiAgdGV4dC1vdmVyZmxvdzogZWxsaXBzaXM7DQogIHBhZGRpbmc6IDAgNXB4Ow0KfQ0KLnRleHQ6aG92ZXIgew0KICBjb2xvcjogIzAwMDsNCn0NCg0KLmFkZCB7DQogIHBvc2l0aW9uOiBhYnNvbHV0ZTsNCiAgYm90dG9tOiA2NXB4Ow0KICB3aWR0aDogMTAwJTsNCiAgbGluZS1oZWlnaHQ6IDQwcHg7DQogIC8vIGJvcmRlcjogMXB4IHNvbGlkICNlN2U3ZWI7DQogIGJhY2tncm91bmQ6ICNmYWZhZmE7DQp9DQouYXJyb3cgew0KICBwb3NpdGlvbjogYWJzb2x1dGU7DQogIGJvdHRvbTogLTE2cHg7DQogIGxlZnQ6IDM2cHg7DQogIC8qIOWchuinkueahOS9jee9rumcgOimgee7huW/g+iwg+ivleWTpiAqLw0KICB3aWR0aDogMDsNCiAgaGVpZ2h0OiAwOw0KICBmb250LXNpemU6IDA7DQogIGJvcmRlcjogc29saWQgOHB4Ow0KICBib3JkZXItY29sb3I6ICNmYWZhZmEgI2Y0ZjVmOSAjZjRmNWY5ICNmNGY1Zjk7DQp9DQoudGlhbmppYSB7DQogIHBvc2l0aW9uOiBhYnNvbHV0ZTsNCiAgYm90dG9tOiAxMDdweDsNCiAgd2lkdGg6IDEwMCU7DQogIGxpbmUtaGVpZ2h0OiA0OHB4Ow0KICBiYWNrZ3JvdW5kOiAjZmFmYWZhOw0KICA6Zmlyc3QtY2hpbGQgew0KICAgIGJvcmRlcjogbm9uZTsNCiAgfQ0KfQ0KLmFkZGFkZCB7DQogIHdpZHRoOiAxMDAlOw0KICBsaW5lLWhlaWdodDogNDBweDsNCiAgYm9yZGVyLXRvcDogMXB4IHNvbGlkICNmMGYwZjA7DQogIGJhY2tncm91bmQ6ICNmYWZhZmE7DQogIGhlaWdodDogNDBweDsNCn0NCi5yaWdodCB7DQogIGJhY2tncm91bmQ6ICNmZmY7DQogIG1pbi1oZWlnaHQ6IDQwMHB4Ow0KfQ0KLnNwd2lkdGggew0KICB3aWR0aDogMTAwJTsNCn0NCi51c2VyQWxlcnQgew0KICBtYXJnaW4tdG9wOiAxNnB4ICFpbXBvcnRhbnQ7DQp9DQo="},{"version":3,"sources":["index.vue"],"names":[],"mappings":";AAuVA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"index.vue","sourceRoot":"src/pages/app/wechat/menus","sourcesContent":["<template>\r\n <div class=\"article-manager\">\r\n <!-- <div class=\"i-layout-page-header header-title\">\r\n <span class=\"ivu-page-header-title\">{{ $route.meta.title }}</span>\r\n </div> -->\r\n <pages-header ref=\"pageHeader\" :title=\"$route.meta.title\"></pages-header>\r\n <el-card :bordered=\"false\" shadow=\"never\" class=\"ivu-mt mt16\">\r\n <!-- 公众号设置 -->\r\n <el-row :gutter=\"24\">\r\n <el-col :span=\"24\" class=\"ml40\">\r\n <!-- 预览功能 -->\r\n <el-col :span=\"24\">\r\n <el-col :xl=\"7\" :lg=\"7\" :md=\"22\" :sm=\"22\" :xs=\"22\" class=\"left mb15\">\r\n <img class=\"top\" src=\"../../../../assets/images/mobilehead.png\" />\r\n <img class=\"bottom\" src=\"@/assets/images/mobilefoot.png\" />\r\n <div style=\"background: #f4f5f9; min-height: 438px; position: absolute; top: 63px; width: 320px\"></div>\r\n <div class=\"textbot\">\r\n <div class=\"li\" v-for=\"(item, indx) in list\" :key=\"indx\" :class=\"{ active: item === formValidate }\">\r\n <div>\r\n <div class=\"add\" v-db-click @click=\"add(item, indx)\">\r\n <i class=\"el-icon-plus\"></i>\r\n <div class=\"arrow\"></div>\r\n </div>\r\n <div class=\"tianjia\">\r\n <div\r\n class=\"addadd\"\r\n v-for=\"(j, index) in item.sub_button\"\r\n :key=\"index\"\r\n :class=\"{ active: j === formValidate }\"\r\n v-db-click\r\n @click=\"gettem(j, index, indx)\"\r\n >\r\n {{ j.name || '二级菜单' }}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"text\" v-db-click @click=\"gettem(item, indx, null)\">{{ item.name || '一级菜单' }}</div>\r\n </div>\r\n <div class=\"li\" v-show=\"list.length < 3\">\r\n <div class=\"text\" v-db-click @click=\"addtext\"><i class=\"el-icon-plus\"></i></div>\r\n </div>\r\n </div>\r\n </el-col>\r\n <el-col :xl=\"11\" :lg=\"12\" :md=\"22\" :sm=\"22\" :xs=\"22\">\r\n <el-tabs value=\"name1\" v-if=\"checkedMenuId !== null\">\r\n <el-tab-pane label=\"菜单信息\" name=\"name1\">\r\n <el-col :span=\"24\" class=\"userAlert\">\r\n <div class=\"box-card right\">\r\n <el-alert type=\"info\" show-icon closable title=\"已添加子菜单，仅可设置菜单名称\"></el-alert>\r\n <el-form\r\n ref=\"formValidate\"\r\n :model=\"formValidate\"\r\n :rules=\"ruleValidate\"\r\n label-width=\"100px\"\r\n class=\"mt20\"\r\n >\r\n <el-form-item label=\"菜单名称\" prop=\"name\">\r\n <el-input v-model=\"formValidate.name\" placeholder=\"请填写菜单名称\" class=\"spwidth\"></el-input>\r\n </el-form-item>\r\n <el-form-item label=\"规则状态\" prop=\"type\">\r\n <el-select v-model=\"formValidate.type\" placeholder=\"请选择规则状态\" class=\"spwidth\">\r\n <el-option value=\"click\" label=\"关键字\"></el-option>\r\n <el-option value=\"view\" label=\"跳转网页\"></el-option>\r\n <el-option value=\"miniprogram\" label=\"小程序\"></el-option>\r\n </el-select>\r\n </el-form-item>\r\n <div v-if=\"formValidate.type === 'click'\">\r\n <el-form-item label=\"关键字\" prop=\"key\">\r\n <el-input v-model=\"formValidate.key\" placeholder=\"请填写关键字\" class=\"spwidth\"></el-input>\r\n </el-form-item>\r\n </div>\r\n <div v-if=\"formValidate.type === 'miniprogram'\">\r\n <el-form-item label=\"appid\" prop=\"appid\">\r\n <el-input v-model=\"formValidate.appid\" placeholder=\"请填写appid\" class=\"spwidth\"></el-input>\r\n </el-form-item>\r\n <el-form-item label=\"小程序路径\" prop=\"pagepath\">\r\n <el-input\r\n v-model=\"formValidate.pagepath\"\r\n placeholder=\"请填写小程序路径\"\r\n class=\"spwidth\"\r\n ></el-input>\r\n </el-form-item>\r\n <el-form-item label=\"备用网页\" prop=\"url\">\r\n <el-input\r\n v-model=\"formValidate.url\"\r\n placeholder=\"请填写备用网页\"\r\n class=\"spwidth\"\r\n ></el-input>\r\n </el-form-item>\r\n </div>\r\n <div v-if=\"formValidate.type === 'view'\">\r\n <el-form-item label=\"跳转地址\" prop=\"url\">\r\n <el-input\r\n v-model=\"formValidate.url\"\r\n placeholder=\"请填写跳转地址\"\r\n class=\"spwidth\"\r\n ></el-input>\r\n </el-form-item>\r\n </div>\r\n </el-form>\r\n </div>\r\n </el-col>\r\n </el-tab-pane>\r\n </el-tabs>\r\n <el-col :span=\"24\" v-if=\"isTrue\">\r\n <el-button size=\"small\" type=\"danger\" v-db-click @click=\"deltMenus\">删除</el-button>\r\n <el-button type=\"primary\" v-db-click @click=\"submenus('formValidate')\">保存并发布</el-button>\r\n </el-col>\r\n </el-col>\r\n </el-col>\r\n </el-col>\r\n </el-row>\r\n </el-card>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport { wechatMenuApi, MenuApi } from '@/api/app';\r\nexport default {\r\n name: 'wechatMenus',\r\n data() {\r\n return {\r\n modal2: false,\r\n formValidate: {\r\n name: '',\r\n type: 'click',\r\n appid: '',\r\n url: '',\r\n key: '',\r\n pagepath: '',\r\n id: 0,\r\n },\r\n ruleValidate: {\r\n name: [\r\n { required: true, message: '请填写菜单名称', trigger: 'blur' },\r\n { min: 1, max: 14, message: '长度在 1 到 14 个字符', trigger: 'blur' },\r\n ],\r\n key: [{ required: true, message: '请填写关键字', trigger: 'blur' }],\r\n appid: [{ required: true, message: '请填写appid', trigger: 'blur' }],\r\n pagepath: [{ required: true, message: '请填写备用网页', trigger: 'blur' }],\r\n url: [{ required: true, message: '请填写跳转地址', trigger: 'blur' }],\r\n type: [{ required: true, message: '请选择规则状态', trigger: 'change' }],\r\n },\r\n parentMenuId: null,\r\n list: [],\r\n checkedMenuId: null,\r\n isTrue: false,\r\n };\r\n },\r\n mounted() {\r\n this.getMenus();\r\n if (this.list.length) {\r\n this.formValidate = this.list[this.activeClass];\r\n } else {\r\n return this.formValidate;\r\n }\r\n },\r\n methods: {\r\n // 添加一级字段函数\r\n defaultMenusData() {\r\n return {\r\n type: 'click',\r\n name: '',\r\n sub_button: [],\r\n };\r\n },\r\n // 添加二级字段函数\r\n defaultChildData() {\r\n return {\r\n type: 'click',\r\n name: '',\r\n };\r\n },\r\n // 获取 菜单\r\n getMenus() {\r\n wechatMenuApi()\r\n .then(async (res) => {\r\n let data = res.data;\r\n this.list = data.menus;\r\n })\r\n .catch((res) => {\r\n this.$message.error(res.msg);\r\n });\r\n },\r\n // 点击保存提交\r\n submenus(name) {\r\n if (this.isTrue && !this.checkedMenuId && this.checkedMenuId !== 0) {\r\n this.putData();\r\n } else {\r\n this.$refs[name].validate((valid) => {\r\n if (valid) {\r\n this.putData();\r\n } else {\r\n if (!this.check()) return false;\r\n }\r\n });\r\n }\r\n },\r\n // 新增data\r\n putData() {\r\n let data = {\r\n button: this.list,\r\n };\r\n MenuApi(data)\r\n .then(async (res) => {\r\n this.$message.success(res.msg);\r\n this.checkedMenuId = null;\r\n this.formValidate = {};\r\n this.isTrue = false;\r\n })\r\n .catch((res) => {\r\n this.$message.error(res.msg);\r\n });\r\n },\r\n // 点击元素\r\n gettem(item, index, pid) {\r\n this.checkedMenuId = index;\r\n this.formValidate = item;\r\n this.parentMenuId = pid;\r\n this.isTrue = true;\r\n },\r\n // 增加二级\r\n add(item, index) {\r\n if (!this.check()) return false;\r\n if (item.sub_button.length < 5) {\r\n let data = this.defaultChildData();\r\n let id = item.sub_button.length;\r\n item.sub_button.push(data);\r\n this.formValidate = data;\r\n this.checkedMenuId = id;\r\n this.parentMenuId = index;\r\n this.isTrue = true;\r\n } else {\r\n this.$message.warning('二级菜单最多只能添加5个!');\r\n return false;\r\n }\r\n },\r\n // 增加一级\r\n addtext() {\r\n if (!this.check()) return false;\r\n let data = this.defaultMenusData();\r\n let id = this.list.length;\r\n this.list.push(data);\r\n this.formValidate = data;\r\n this.checkedMenuId = id;\r\n this.parentMenuId = null;\r\n this.isTrue = true;\r\n },\r\n // 判断函数\r\n check: function () {\r\n let reg = /[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\\.?/;\r\n if (this.checkedMenuId === null) return true;\r\n if (!this.isTrue) return true;\r\n if (!this.formValidate.name) {\r\n this.$message.warning('请输入按钮名称!');\r\n return false;\r\n }\r\n if (this.formValidate.type === 'click' && !this.formValidate.key) {\r\n this.$message.warning('请输入关键字!');\r\n return false;\r\n }\r\n if (this.formValidate.type === 'view' && !reg.test(this.formValidate.url)) {\r\n this.$message.warning('请输入正确的跳转地址!');\r\n return false;\r\n }\r\n if (\r\n this.formValidate.type === 'miniprogram' &&\r\n (!this.formValidate.appid || !this.formValidate.pagepath || !this.formValidate.url)\r\n ) {\r\n this.$message.warning('请填写完整小程序配置!');\r\n return false;\r\n }\r\n return true;\r\n },\r\n // 删除\r\n deltMenus() {\r\n if (this.isTrue) {\r\n this.$confirm('确认删除此菜单吗?', '提示', {\r\n confirmButtonText: '确定',\r\n cancelButtonText: '取消',\r\n type: 'warning',\r\n beforeClose(action, instance, done) {\r\n if (action == 'confirm') {\r\n instance.$refs.confirm.$el.onclick = a();\r\n function a(e) {\r\n e = e || window.event;\r\n if (e.detail != 0) {\r\n done();\r\n }\r\n }\r\n } else {\r\n done();\r\n }\r\n },\r\n })\r\n .then(() => {\r\n this.parentMenuId === null\r\n ? this.list.splice(this.checkedMenuId, 1)\r\n : this.list[this.parentMenuId].sub_button.splice(this.checkedMenuId, 1);\r\n this.parentMenuId = null;\r\n this.formValidate = {\r\n name: '',\r\n type: 'click',\r\n appid: '',\r\n url: '',\r\n key: '',\r\n pagepath: '',\r\n id: 0,\r\n };\r\n this.isTrue = true;\r\n this.modal2 = false;\r\n this.checkedMenuId = null;\r\n this.$refs['formValidate'].resetFields();\r\n })\r\n .catch(() => {});\r\n } else {\r\n this.$message.warning('请选择菜单!');\r\n }\r\n },\r\n // 确认删除\r\n del() {\r\n this.parentMenuId === null\r\n ? this.list.splice(this.checkedMenuId, 1)\r\n : this.list[this.parentMenuId].sub_button.splice(this.checkedMenuId, 1);\r\n this.parentMenuId = null;\r\n this.formValidate = {\r\n name: '',\r\n type: 'click',\r\n appid: '',\r\n url: '',\r\n key: '',\r\n pagepath: '',\r\n id: 0,\r\n };\r\n this.isTrue = true;\r\n this.modal2 = false;\r\n this.checkedMenuId = null;\r\n this.$refs['formValidate'].resetFields();\r\n },\r\n },\r\n};\r\n</script>\r\n<style scoped lang=\"scss\">\r\n* {\r\n -moz-user-select: none; /*火狐*/\r\n -webkit-user-select: none; /*webkit浏览器*/\r\n -ms-user-select: none; /*IE10*/\r\n -khtml-user-select: none; /*早期浏览器*/\r\n user-select: none;\r\n}\r\n\r\n.left {\r\n min-width: 390px;\r\n min-height: 550px;\r\n position: relative;\r\n padding-left: 40px;\r\n}\r\n\r\n.top {\r\n position: absolute;\r\n top: 0px;\r\n}\r\n\r\n.bottom {\r\n position: absolute;\r\n bottom: 0px;\r\n}\r\n\r\n.textbot {\r\n position: absolute;\r\n bottom: 0px;\r\n left: 55px;\r\n width: 100%;\r\n}\r\n.active {\r\n border: 1px solid var(--prev-color-primary) !important;\r\n color: var(--prev-color-primary) !important;\r\n}\r\n.li {\r\n float: left;\r\n width: 92px;\r\n height: 48px;\r\n line-height: 48px;\r\n border-left: 1px solid #e7e7eb;\r\n background: #fafafa;\r\n text-align: center;\r\n cursor: pointer;\r\n color: #999;\r\n position: relative;\r\n}\r\n.text {\r\n height: 50px;\r\n white-space: nowrap;\r\n width: 100%;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n padding: 0 5px;\r\n}\r\n.text:hover {\r\n color: #000;\r\n}\r\n\r\n.add {\r\n position: absolute;\r\n bottom: 65px;\r\n width: 100%;\r\n line-height: 40px;\r\n // border: 1px solid #e7e7eb;\r\n background: #fafafa;\r\n}\r\n.arrow {\r\n position: absolute;\r\n bottom: -16px;\r\n left: 36px;\r\n /* 圆角的位置需要细心调试哦 */\r\n width: 0;\r\n height: 0;\r\n font-size: 0;\r\n border: solid 8px;\r\n border-color: #fafafa #f4f5f9 #f4f5f9 #f4f5f9;\r\n}\r\n.tianjia {\r\n position: absolute;\r\n bottom: 107px;\r\n width: 100%;\r\n line-height: 48px;\r\n background: #fafafa;\r\n :first-child {\r\n border: none;\r\n }\r\n}\r\n.addadd {\r\n width: 100%;\r\n line-height: 40px;\r\n border-top: 1px solid #f0f0f0;\r\n background: #fafafa;\r\n height: 40px;\r\n}\r\n.right {\r\n background: #fff;\r\n min-height: 400px;\r\n}\r\n.spwidth {\r\n width: 100%;\r\n}\r\n.userAlert {\r\n margin-top: 16px !important;\r\n}\r\n</style>\r\n"]}]}
|
