| 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\\components\\diyComponents\\c_tab_bar.vue?vue&type=script&lang=js","dependencies":[{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\src\\components\\diyComponents\\c_tab_bar.vue","mtime":1761185179963},{"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\\babel-loader\\lib\\index.js","mtime":456789000000},{"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:DQppbXBvcnQgdnVlZHJhZ2dhYmxlIGZyb20gJ3Z1ZWRyYWdnYWJsZSc7DQppbXBvcnQgdXBsb2FkUGljdHVyZXMgZnJvbSAnQC9jb21wb25lbnRzL3VwbG9hZFBpY3R1cmVzJzsNCmV4cG9ydCBkZWZhdWx0IHsNCiAgbmFtZTogJ2NfdGFiX2JhcicsDQogIHByb3BzOiB7DQogICAgbmFtZTogew0KICAgICAgdHlwZTogU3RyaW5nLA0KICAgIH0sDQogICAgY29uZmlnRGF0YTogew0KICAgICAgdHlwZTogbnVsbCwNCiAgICB9LA0KICAgIGNvbmZpZ051bTogew0KICAgICAgdHlwZTogTnVtYmVyIHwgU3RyaW5nLA0KICAgICAgZGVmYXVsdDogJ2RlZmF1bHQnLA0KICAgIH0sDQogIH0sDQogIGNvbXBvbmVudHM6IHsNCiAgICB1cGxvYWRQaWN0dXJlcywNCiAgICBkcmFnZ2FibGU6IHZ1ZWRyYWdnYWJsZSwNCiAgfSwNCiAgZGF0YSgpIHsNCiAgICByZXR1cm4gew0KICAgICAgbW9kYWxQaWM6IGZhbHNlLA0KICAgICAgaXNDaG9pY2U6ICfljZXpgIknLA0KICAgICAgZ3JpZEJ0bjogew0KICAgICAgICB4bDogNCwNCiAgICAgICAgbGc6IDgsDQogICAgICAgIG1kOiA4LA0KICAgICAgICBzbTogOCwNCiAgICAgICAgeHM6IDgsDQogICAgICB9LA0KICAgICAgZ3JpZFBpYzogew0KICAgICAgICB4bDogNiwNCiAgICAgICAgbGc6IDgsDQogICAgICAgIG1kOiAxMiwNCiAgICAgICAgc206IDEyLA0KICAgICAgICB4czogMTIsDQogICAgICB9LA0KICAgICAgYWN0aXZlSW5kZXg6IDAsDQogICAgICBpc1NlbGVjdDogMCwNCiAgICAgIGRhdGFzOiB0aGlzLmNvbmZpZ0RhdGFbdGhpcy5jb25maWdOdW1dLA0KICAgICAgbGFzdE9iajoge30sDQogICAgfTsNCiAgfSwNCiAgbW91bnRlZCgpIHt9LA0KICB3YXRjaDogew0KICAgIGNvbmZpZ0RhdGE6IHsNCiAgICAgIGhhbmRsZXIoblZhbCwgb1ZhbCkgew0KICAgICAgICB0aGlzLmRhdGFzID0gblZhbFt0aGlzLmNvbmZpZ051bV07DQogICAgICB9LA0KICAgICAgZGVlcDogdHJ1ZSwNCiAgICB9LA0KICB9LA0KICBtZXRob2RzOiB7DQogICAgLy8g5re75Yqg5qih5Z2XDQogICAgYWRkTWVudSgpIHsNCiAgICAgIGlmICh0aGlzLmNvbmZpZ0RhdGFbdGhpcy5jb25maWdOdW1dW3RoaXMubmFtZV0ubGlzdC5sZW5ndGggPT0gMCkgew0KICAgICAgICB0aGlzLmNvbmZpZ0RhdGFbdGhpcy5jb25maWdOdW1dW3RoaXMubmFtZV0ubGlzdC5wdXNoKHRoaXMubGFzdE9iaik7DQogICAgICB9IGVsc2Ugew0KICAgICAgICBsZXQgb2JqID0gSlNPTi5wYXJzZSgNCiAgICAgICAgICBKU09OLnN0cmluZ2lmeSgNCiAgICAgICAgICAgIHRoaXMuY29uZmlnRGF0YVt0aGlzLmNvbmZpZ051bV1bdGhpcy5uYW1lXS5saXN0W3RoaXMuY29uZmlnRGF0YVt0aGlzLmNvbmZpZ051bV1bdGhpcy5uYW1lXS5saXN0Lmxlbmd0aCAtIDFdLA0KICAgICAgICAgICksDQogICAgICAgICk7DQogICAgICAgIHRoaXMuY29uZmlnRGF0YVt0aGlzLmNvbmZpZ051bV1bdGhpcy5uYW1lXS5saXN0LnB1c2gob2JqKTsNCiAgICAgIH0NCiAgICB9LA0KICAgIGRlbGV0ZU1lbnUoaW5kZXgpIHsNCiAgICAgIHRoaXMuJG1zZ2JveCh7DQogICAgICAgIHRpdGxlOiAn5o+Q56S6JywNCiAgICAgICAgbWVzc2FnZTogJ+aYr+WQpuehruWumuWIoOmZpOivpeiPnOWNlScsDQogICAgICAgIHNob3dDYW5jZWxCdXR0b246IHRydWUsDQogICAgICAgIGNhbmNlbEJ1dHRvblRleHQ6ICflj5bmtognLA0KICAgICAgICBjb25maXJtQnV0dG9uVGV4dDogJ+WIoOmZpCcsDQogICAgICAgIGljb25DbGFzczogJ2VsLWljb24td2FybmluZycsDQogICAgICAgIGNvbmZpcm1CdXR0b25DbGFzczogJ2J0bi1jdXN0b20tY2FuY2VsJywNCiAgICAgIH0pDQogICAgICAgIC50aGVuKCgpID0+IHsNCiAgICAgICAgICBpZiAodGhpcy5jb25maWdEYXRhW3RoaXMuY29uZmlnTnVtXVt0aGlzLm5hbWVdLmxpc3QubGVuZ3RoID09IDEpIHsNCiAgICAgICAgICAgIHRoaXMubGFzdE9iaiA9IHRoaXMuY29uZmlnRGF0YVt0aGlzLmNvbmZpZ051bV1bdGhpcy5uYW1lXS5saXN0WzBdOw0KICAgICAgICAgIH0NCiAgICAgICAgICB0aGlzLmNvbmZpZ0RhdGFbdGhpcy5jb25maWdOdW1dW3RoaXMubmFtZV0ubGlzdC5zcGxpY2UoaW5kZXgsIDEpOw0KICAgICAgICB9KQ0KICAgICAgICAuY2F0Y2goKCkgPT4ge30pOw0KICAgIH0sDQogICAgLy8g54K55Ye75Zu+5paH5bCB6Z2iDQogICAgbW9kYWxQaWNUYXAodGl0bGUsIGluZGV4LCBzZWxlY3QpIHsNCiAgICAgIHRoaXMuYWN0aXZlSW5kZXggPSBpbmRleDsNCiAgICAgIHRoaXMubW9kYWxQaWMgPSB0cnVlOw0KICAgICAgdGhpcy5pc1NlbGVjdCA9IHNlbGVjdDsNCiAgICB9LA0KICAgIC8vIOiOt+WPluWbvueJh+S/oeaBrw0KICAgIGdldFBpYyhwYykgew0KICAgICAgdGhpcy4kbmV4dFRpY2soKCkgPT4gew0KICAgICAgICB0aGlzLmNvbmZpZ0RhdGFbdGhpcy5jb25maWdOdW1dW3RoaXMubmFtZV0ubGlzdFt0aGlzLmFjdGl2ZUluZGV4XS5pbWdMaXN0W3RoaXMuaXNTZWxlY3RdID0gcGMuYXR0X2RpcjsNCiAgICAgICAgdGhpcy5tb2RhbFBpYyA9IGZhbHNlOw0KICAgICAgfSk7DQogICAgfSwNCiAgfSwNCn07DQo="},{"version":3,"sources":["c_tab_bar.vue"],"names":[],"mappings":";AAuEA;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;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"c_tab_bar.vue","sourceRoot":"src/components/diyComponents","sourcesContent":["<template>\r\n <div class=\"tabBars\">\r\n <div class=\"title\">{{ datas[name].title }}</div>\r\n <draggable class=\"dragArea list-group\" :list=\"datas[name].list\" group=\"peoples\" handle=\".iconfont\">\r\n <div class=\"box-item\" v-for=\"(item, index) in datas[name].list\" :key=\"index\">\r\n <div class=\"left-tool\">\r\n <span class=\"iconfont icondrag2\"></span>\r\n </div>\r\n <div class=\"right-wrapper\">\r\n <div class=\"img-wrapper\">\r\n <div class=\"img-item\" v-for=\"(img, j) in item.imgList\" v-db-click @click=\"modalPicTap('单选', index, j)\">\r\n <img :src=\"img\" alt=\"\" v-if=\"img\" />\r\n <p class=\"txt\" v-if=\"img\">{{ j == 0 ? '选中' : '未选中' }}</p>\r\n <div class=\"empty-img\" v-else>\r\n <span class=\"iconfont iconjiahao\"></span>\r\n <p>{{ j == 0 ? '选中' : '未选中' }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"c_row-item\">\r\n <el-col class=\"label\" :span=\"4\"> 名称 </el-col>\r\n <el-col :span=\"19\" class=\"slider-box\">\r\n <el-input v-model=\"item.name\" placeholder=\"选填不超过10个字\" />\r\n </el-col>\r\n </div>\r\n <div class=\"c_row-item\">\r\n <el-col class=\"label\" :span=\"4\"> 链接 </el-col>\r\n <el-col :span=\"19\" class=\"slider-box\">\r\n <el-input v-model=\"item.link\" placeholder=\"选填不超过10个字\" />\r\n </el-col>\r\n </div>\r\n </div>\r\n <div class=\"del-box\" v-db-click @click=\"deleteMenu(index)\">\r\n <span class=\"iconfont iconcha\"></span>\r\n </div>\r\n </div>\r\n </draggable>\r\n <div class=\"add-btn\" v-if=\"datas[name].list.length < 5\">\r\n <el-button\r\n type=\"primary\"\r\n ghost\r\n style=\"width: 100%; height: 40px; border-color: var(--prev-color-primary); color: var(--prev-color-primary)\"\r\n v-db-click\r\n @click=\"addMenu\"\r\n >添加图文导航\r\n </el-button>\r\n </div>\r\n <div>\r\n <el-dialog\r\n :visible.sync=\"modalPic\"\r\n width=\"950px\"\r\n scrollable\r\n footer-hide\r\n :show-close=\"true\"\r\n title=\"上传商品图\"\r\n :mask-closable=\"false\"\r\n :z-index=\"888\"\r\n >\r\n <uploadPictures\r\n :isChoice=\"isChoice\"\r\n @getPic=\"getPic\"\r\n :gridBtn=\"gridBtn\"\r\n :gridPic=\"gridPic\"\r\n v-if=\"modalPic\"\r\n ></uploadPictures>\r\n </el-dialog>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport vuedraggable from 'vuedraggable';\r\nimport uploadPictures from '@/components/uploadPictures';\r\nexport default {\r\n name: 'c_tab_bar',\r\n props: {\r\n name: {\r\n type: String,\r\n },\r\n configData: {\r\n type: null,\r\n },\r\n configNum: {\r\n type: Number | String,\r\n default: 'default',\r\n },\r\n },\r\n components: {\r\n uploadPictures,\r\n draggable: vuedraggable,\r\n },\r\n data() {\r\n return {\r\n modalPic: false,\r\n isChoice: '单选',\r\n gridBtn: {\r\n xl: 4,\r\n lg: 8,\r\n md: 8,\r\n sm: 8,\r\n xs: 8,\r\n },\r\n gridPic: {\r\n xl: 6,\r\n lg: 8,\r\n md: 12,\r\n sm: 12,\r\n xs: 12,\r\n },\r\n activeIndex: 0,\r\n isSelect: 0,\r\n datas: this.configData[this.configNum],\r\n lastObj: {},\r\n };\r\n },\r\n mounted() {},\r\n watch: {\r\n configData: {\r\n handler(nVal, oVal) {\r\n this.datas = nVal[this.configNum];\r\n },\r\n deep: true,\r\n },\r\n },\r\n methods: {\r\n // 添加模块\r\n addMenu() {\r\n if (this.configData[this.configNum][this.name].list.length == 0) {\r\n this.configData[this.configNum][this.name].list.push(this.lastObj);\r\n } else {\r\n let obj = JSON.parse(\r\n JSON.stringify(\r\n this.configData[this.configNum][this.name].list[this.configData[this.configNum][this.name].list.length - 1],\r\n ),\r\n );\r\n this.configData[this.configNum][this.name].list.push(obj);\r\n }\r\n },\r\n deleteMenu(index) {\r\n this.$msgbox({\r\n title: '提示',\r\n message: '是否确定删除该菜单',\r\n showCancelButton: true,\r\n cancelButtonText: '取消',\r\n confirmButtonText: '删除',\r\n iconClass: 'el-icon-warning',\r\n confirmButtonClass: 'btn-custom-cancel',\r\n })\r\n .then(() => {\r\n if (this.configData[this.configNum][this.name].list.length == 1) {\r\n this.lastObj = this.configData[this.configNum][this.name].list[0];\r\n }\r\n this.configData[this.configNum][this.name].list.splice(index, 1);\r\n })\r\n .catch(() => {});\r\n },\r\n // 点击图文封面\r\n modalPicTap(title, index, select) {\r\n this.activeIndex = index;\r\n this.modalPic = true;\r\n this.isSelect = select;\r\n },\r\n // 获取图片信息\r\n getPic(pc) {\r\n this.$nextTick(() => {\r\n this.configData[this.configNum][this.name].list[this.activeIndex].imgList[this.isSelect] = pc.att_dir;\r\n this.modalPic = false;\r\n });\r\n },\r\n },\r\n};\r\n</script>\r\n<style lang=\"scss\" scoped>\r\n.tabBars .box-item:last-child {\r\n margin-bottom: 20px;\r\n}\r\n.tabBars {\r\n .title {\r\n margin-bottom: 10px;\r\n padding-bottom: 10px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.05);\r\n font-size: 12px;\r\n color: #999;\r\n }\r\n .box-item {\r\n position: relative;\r\n display: flex;\r\n margin-top: 15px;\r\n padding: 20px 30px 20px 0;\r\n border: 1px solid #dddddd;\r\n border-radius: 3px;\r\n .del-box {\r\n position: absolute;\r\n right: -13px;\r\n top: -18px;\r\n cursor: pointer;\r\n .iconfont {\r\n color: #999;\r\n font-size: 30px;\r\n }\r\n }\r\n .left-tool {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 72px;\r\n .iconfont {\r\n color: #999;\r\n font-size: 36px;\r\n cursor: move;\r\n }\r\n }\r\n .right-wrapper {\r\n flex: 1;\r\n .img-wrapper {\r\n display: flex;\r\n .img-item {\r\n position: relative;\r\n width: 80px;\r\n height: 80px;\r\n margin-right: 20px;\r\n cursor: pointer;\r\n img {\r\n display: block;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n .empty-img {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n width: 100%;\r\n height: 100%;\r\n background: #f7f7f7;\r\n font-size: 12px;\r\n color: #bfbfbf;\r\n .iconfont {\r\n font-size: 16px;\r\n }\r\n }\r\n .txt {\r\n position: absolute;\r\n left: 0;\r\n bottom: 0;\r\n width: 100%;\r\n height: 22px;\r\n line-height: 22px;\r\n text-align: center;\r\n background: rgba(0, 0, 0, 0.4);\r\n color: #fff;\r\n font-size: 12px;\r\n }\r\n }\r\n }\r\n .c_row-item {\r\n margin-top: 10px;\r\n }\r\n }\r\n }\r\n .add-btn {\r\n margin-bottom: 20px;\r\n width: 100%;\r\n height: 40px;\r\n }\r\n}\r\n</style>\r\n"]}]}
|
