| 1 |
- {"remainingRequest":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\front\\item\\zyAdmin\\src\\components\\hotpotModal\\index.vue?vue&type=style&index=0&id=7ca5a708&lang=scss&scoped=true","dependencies":[{"path":"D:\\front\\item\\zyAdmin\\src\\components\\hotpotModal\\index.vue","mtime":1761614938956},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\css-loader\\index.js","mtime":1761614929364},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1761614937403},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\postcss-loader\\src\\index.js","mtime":1761614935133},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\sass-loader\\dist\\cjs.js","mtime":1761614936391},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1761614927801},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js","mtime":1761614937402}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQo6OnYtZGVlcCAuZWwtZGlhbG9nIHsNCiAgYm9yZGVyLXJhZGl1czogMHB4ICFpbXBvcnRhbnQ7DQogIC5lbC1hbGVydF9faWNvbi5pcy1iaWcgew0KICAgIGZvbnQtc2l6ZTogMTRweDsNCiAgICB3aWR0aDogMTZweDsNCiAgfQ0KICAuZWwtYWxlcnQgLmVsLWFsZXJ0X19kZXNjcmlwdGlvbiB7DQogICAgbWFyZ2luOiAwOw0KICB9DQp9DQouYnRuIHsNCiAgZGlzcGxheTogZmxleDsNCiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7DQogIGFsaWduLWl0ZW1zOiBjZW50ZXI7DQogIHBhZGRpbmc6IDE2cHggMDsNCn0NCi5kaWFsb2ctZm9vdGVyIHsNCiAgdGV4dC1hbGlnbjogcmlnaHQ7DQogIG1hcmdpbi10b3A6IDIwcHg7DQogIG1hcmdpbi1yaWdodDogMjBweDsNCn0NCi5vcGVyYXRpb25GbG9vciB7DQogIGRpc3BsYXk6IGZsZXg7DQogIHBvc2l0aW9uOiByZWxhdGl2ZTsNCiAgbWF4LWhlaWdodDogODB2aDsNCiAgLmhlYWRlciB7DQogICAgLnRpdGxlQm94IHsNCiAgICAgIGRpc3BsYXk6IGZsZXg7DQogICAgICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47DQogICAgICBhbGlnbi1pdGVtczogY2VudGVyOw0KICAgICAgaGVpZ2h0OiAxMDBweDsNCiAgICAgIC5uYW1lIHsNCiAgICAgICAgZm9udC1zaXplOiAxM3B4Ow0KICAgICAgICBmb250LXdlaWdodDogYm9sZDsNCiAgICAgIH0NCiAgICB9DQogICAgLnRleHRCb3ggew0KICAgICAgZm9udC1zaXplOiAxMnB4Ow0KICAgICAgY29sb3I6ICM3Nzc7DQogICAgICBtYXJnaW4tYm90dG9tOiAxMHB4Ow0KICAgIH0NCiAgfQ0KICAuaW1nQm94Ojotd2Via2l0LXNjcm9sbGJhciB7DQogICAgZGlzcGxheTogbm9uZTsgLyogQ2hyb21lIFNhZmFyaSAqLw0KICB9DQogIC5pbWdCb3ggew0KICAgIGRpc3BsYXk6IGZsZXg7DQogICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7DQogICAgd2lkdGg6IDY1JTsNCiAgICBvdmVyZmxvdy15OiBzY3JvbGw7DQogICAgbWF4LWhlaWdodDogODAwcHg7DQogICAgLmNvbnRhaW5lciB7DQogICAgICBwb3NpdGlvbjogcmVsYXRpdmU7DQogICAgICBib3JkZXI6IDFweCBzb2xpZCAjZjVmNWY1Ow0KICAgIH0NCg0KICAgIGltZyB7DQogICAgICBjdXJzb3I6IGNyb3NzaGFpcjsNCiAgICAgIGRpc3BsYXk6IGJsb2NrOw0KICAgICAgd2lkdGg6IDc1MHB4Ow0KICAgIH0NCiAgICAuYXJlYSB7DQogICAgICBwb3NpdGlvbjogYWJzb2x1dGU7DQogICAgICB3aWR0aDogMjAwcHg7DQogICAgICBoZWlnaHQ6IDIwMHB4Ow0KICAgICAgbGVmdDogMjAwcHg7DQogICAgICB0b3A6IDMwMHB4Ow0KICAgICAgYmFja2dyb3VuZDogcmdiYSgjMjk4MGI5LCAwLjMpOw0KICAgICAgYm9yZGVyOiAxcHggZGFzaGVkICMzNDQ5NWU7DQogICAgfQ0KICB9DQp9DQouZm9ybSB7DQogIGZvbnQtc2l6ZTogMTJweDsNCiAgd2lkdGg6IDMwJTsNCiAgbWF4LWhlaWdodDogODAwcHg7DQogIG92ZXJmbG93LXk6IHNjcm9sbDsNCiAgLmZvcm0tcm93IHsNCiAgICBkaXNwbGF5OiBmbGV4Ow0KICAgIG1hcmdpbjogMTJweCAwOw0KICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7DQogICAgLmZvcm0taXRlbSB7DQogICAgICBkaXNwbGF5OiBmbGV4Ow0KICAgICAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuOw0KICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjsNCiAgICAgIHdoaXRlLXNwYWNlOiBub3dyYXA7DQogICAgICBtYXJnaW46IDAgNXB4Ow0KICAgICAgZm9udC1zaXplOiAxMnB4Ow0KICAgICAgLm51bSB7DQogICAgICAgIHdpZHRoOiA2OXB4Ow0KICAgICAgICBjb2xvcjogIzk5OTsNCiAgICAgICAgZm9udC1zaXplOiAxMnB4Ow0KICAgICAgfQ0KICAgICAgLmxhYmVsIHsNCiAgICAgICAgY29sb3I6ICNjN2M3Yzc7DQogICAgICB9DQogICAgfQ0KICB9DQogIC5lbC1pY29uLWRlbGV0ZSB7DQogICAgZm9udC1zaXplOiAxNnB4Ow0KICAgIGN1cnNvcjogcG9pbnRlcjsNCiAgfQ0KfQ0K"},{"version":3,"sources":["index.vue"],"names":[],"mappings":";AAsVA;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;;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;AACA","file":"index.vue","sourceRoot":"src/components/hotpotModal","sourcesContent":["<template>\r\n <div>\r\n <el-dialog title=\"编辑热区\" :visible.sync=\"dialogVisible\" @opened=\"openModal\" fullscreen>\r\n <div class=\"operationFloor\">\r\n <div class=\"imgBox\" @mouseup.left.stop=\"changeStop()\">\r\n <div ref=\"container\" id=\"img-box-container\" class=\"container\">\r\n <img\r\n ref=\"backgroundImg\"\r\n :src=\"imgs\"\r\n ondragstart=\"return false;\"\r\n oncontextmenu=\"return false;\"\r\n onselect=\"document.selection.empty();\"\r\n alt=\"img\"\r\n @mousedown.left.stop=\"mouseDown($event)\"\r\n />\r\n <!--draw hotpot-->\r\n <div\r\n v-show=\"caseShow\"\r\n :style=\"{\r\n width: areaWidth + 'px',\r\n height: areaHeight + 'px',\r\n left: starX + 'px',\r\n top: starY + 'px',\r\n }\"\r\n class=\"area\"\r\n />\r\n <!--be hotpot-->\r\n <AreaBox\r\n v-for=\"(item, index) in areaData\"\r\n :area-data-index=\"index\"\r\n :key=\"'area' + index\"\r\n :link=\"item.link\"\r\n :title=\"item.title\"\r\n :type=\"parseInt(item.type)\"\r\n :area-init.sync=\"item\"\r\n :parent-width=\"parentWidth\"\r\n :parent-height=\"parentHeight\"\r\n @delAreaBox=\"delAreaBox\"\r\n @addURL=\"addURL\"\r\n />\r\n </div>\r\n </div>\r\n <!-- 热区链接配置 -->\r\n <div class=\"form\">\r\n <h2 class=\"mb20\">图片热区</h2>\r\n <el-alert type=\"warning\" :closable=\"false\" show-icon>框选热区范围，双击设置热区信息</el-alert>\r\n\r\n <div v-for=\"(item, index) in areaData\" :key=\"index\" class=\"form-row\">\r\n <div class=\"form-item\">\r\n <span class=\"num\">热区{{ item.number }}</span>\r\n </div>\r\n <div class=\"form-item label\">\r\n <div>\r\n <el-input\r\n icon=\"ios-arrow-forward\"\r\n v-model=\"item.link\"\r\n :style=\"linkInputStyle\"\r\n placeholder=\"选择跳转链接\"\r\n >\r\n <i class=\"el-icon-link\" slot=\"suffix\" @click=\"getLink(index)\" />\r\n </el-input>\r\n </div>\r\n </div>\r\n <i class=\"el-icon-delete\" @click=\"delAreaBox(index)\" />\r\n </div>\r\n </div>\r\n </div>\r\n <div slot=\"footer\">\r\n <el-button class=\"mr20\" type=\"primary\" @click=\"saveAreaData\"> 完成 </el-button>\r\n </div>\r\n </el-dialog>\r\n <linkaddress ref=\"linkaddres\" @linkUrl=\"linkUrl\"></linkaddress>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport AreaBox from './AreaBox';\r\nimport linkaddress from '@/components/linkaddress';\r\n\r\nexport default {\r\n name: 'OperationFloor',\r\n components: {\r\n AreaBox,\r\n linkaddress,\r\n },\r\n props: {\r\n /**\r\n * @description 图片数据对象\r\n * @type {ImgData}\r\n */\r\n imgs: {\r\n type: String, // 图片类型\r\n default: () => '', // 默认值为空字符串\r\n },\r\n /**\r\n * @description 是否为热门汤品\r\n * @type {boolean}\r\n */\r\n isHotPot: {\r\n type: Boolean, // 布尔类型\r\n default: () => false, // 默认值为false\r\n },\r\n /**\r\n * @description 图片区域数据对象\r\n * @type {AreaData[]}\r\n */\r\n imgAreaData: {\r\n type: Array, // 数组类型\r\n default: () => [], // 默认值为空数组\r\n },\r\n /**\r\n * @description 链接输入框样式对象\r\n * @type {LinkInputStyle}\r\n */\r\n linkInputStyle: {\r\n type: Object, // 对象类型\r\n default: () => ({\r\n // 默认值为一个包含width属性的对象\r\n width: '300px',\r\n }),\r\n },\r\n },\r\n data() {\r\n return {\r\n /**\r\n * @description 对话框是否可见\r\n * @type {boolean}\r\n */\r\n dialogVisible: false,\r\n /**\r\n * @description 开始的x坐标\r\n * @type {number}\r\n */\r\n starX: 0,\r\n /**\r\n * @description 开始的y坐标\r\n * @type {number}\r\n */\r\n starY: 0,\r\n /**\r\n * @description 区域宽度\r\n * @type {number}\r\n */\r\n areaWidth: 0,\r\n /**\r\n * @description 区域高度\r\n * @type {number}\r\n */\r\n areaHeight: 0,\r\n /**\r\n * @description 当前显示的图片索引\r\n * @type {boolean}\r\n */\r\n caseShow: false,\r\n /**\r\n * @description 当前图片的宽度\r\n * @type {null}\r\n */\r\n nowImgWidth: null,\r\n /**\r\n * @description 区域数据\r\n * @type {Array}\r\n */\r\n areaData: [],\r\n /**\r\n * @description 当前显示的图片编号\r\n * @type {number}\r\n */\r\n imgNum: 1,\r\n /**\r\n * @description 父元素宽度\r\n * @type {number}\r\n */\r\n parentWidth: 0,\r\n /**\r\n * @description 父元素高度\r\n * @type {number}\r\n */\r\n parentHeight: 0,\r\n /**\r\n * @description 默认宽度\r\n * @type {number}\r\n */\r\n defaultWidth: 750,\r\n /**\r\n * @description 当前显示的图片索引\r\n * @type {number}\r\n */\r\n itemIndex: 0,\r\n };\r\n },\r\n computed: {},\r\n watch: {\r\n imgAreaData(val) {\r\n this.areaData = [...val];\r\n },\r\n },\r\n mounted() {\r\n this.areaData = [...this.imgAreaData];\r\n },\r\n methods: {\r\n openModal() {\r\n this.$nextTick(() => {\r\n const parentDiv = document.querySelector('#img-box-container');\r\n //获取元素的宽高\r\n this.parentWidth = this.defaultWidth;\r\n // this.parentWidth = parentDiv.clientWidth;\r\n this.parentHeight = parentDiv.clientHeight;\r\n // console.log(\"this.parentWidth\", this.parentWidth, this.parentHeight)\r\n });\r\n },\r\n closeModal() {\r\n this.$confirm('未保存内容，是否在离开前放弃保存？', '提示信息', {\r\n confirmButtonText: '确定',\r\n cancelButtonText: '取消',\r\n type: 'warning',\r\n })\r\n .then(() => {\r\n this.dialogVisible = false;\r\n })\r\n .catch(() => {\r\n this.$message({\r\n type: 'info',\r\n message: '已取消',\r\n });\r\n });\r\n },\r\n // 绘画热区开始\r\n mouseDown(e) {\r\n e.preventDefault();\r\n this.caseShow = true;\r\n // 记录滑动的初始值\r\n this.starX = e.layerX -5;\r\n this.starY = e.layerY -5;\r\n // 鼠标滑动的过程\r\n if (!document.onmousemove) {\r\n let maxWidth = this.defaultWidth - e.layerX;\r\n document.onmousemove = (ev) => {\r\n if (ev.layerX - this.starX < maxWidth) {\r\n this.areaWidth = ev.layerX - this.starX - 5;\r\n } else {\r\n this.areaWidth = maxWidth;\r\n }\r\n this.areaHeight = ev.layerY - this.starY -5;\r\n };\r\n }\r\n },\r\n // 绘画热区结束\r\n changeStop() {\r\n document.onmousemove = null;\r\n this.imgNum = this.areaData.length + 1;\r\n if (this.caseShow && this.areaWidth > 10 && this.areaHeight > 10) {\r\n const data = {\r\n number: this.imgNum,\r\n starX: this.starX,\r\n starY: this.starY,\r\n areaWidth: this.areaWidth,\r\n areaHeight: this.areaHeight,\r\n nowImgWidth: this.defaultWidth,\r\n link: '',\r\n };\r\n this.areaData.push(data);\r\n }\r\n // 初始化绘图\r\n this.caseShow = false;\r\n this.starX = 0;\r\n this.starY = 0;\r\n this.areaWidth = 0;\r\n this.areaHeight = 0;\r\n },\r\n // 删除指定热区\r\n delAreaBox(index) {\r\n /* 删除某个热区 */\r\n this.areaData.splice(index, 1);\r\n this.$emit('delAreaData', this.areaData);\r\n /* 删除后 每个热区按顺序重新编号 */\r\n if (this.areaData) {\r\n const arr = this.areaData.filter((i) => i.number > index);\r\n if (!arr) return;\r\n arr.forEach((i) => i.number--);\r\n if (this.areaData[this.areaData.length - 1]) {\r\n this.imgNum = this.areaData[this.areaData.length - 1].number + 1;\r\n } else {\r\n this.imgNum = 1;\r\n }\r\n }\r\n },\r\n // 添加网址\r\n addURL(index, url) {\r\n let obj = {\r\n ...this.areaData[index],\r\n link: url,\r\n };\r\n this.$set(this.areaData, index, obj);\r\n },\r\n // 保存热区信息\r\n saveAreaData() {\r\n if ((this.areaData && !this.areaData.length) || !this.checkData(this.areaData)) {\r\n this.$message.error('热区是否配置链接、是否至少添加一个热区?');\r\n return;\r\n }\r\n this.$emit('saveAreaData', this.areaData);\r\n this.dialogVisible = false;\r\n this.$message.success('编辑成功!');\r\n },\r\n /**\r\n * 检查列表中每个元素是否都有 link 属性\r\n * @param {Array} list - 待检查的列表\r\n * @returns {Boolean} - 是否所有元素都有 link 属性\r\n */\r\n checkData(list) {\r\n let isCheck = true;\r\n list.some((val) => {\r\n if (!val.link) {\r\n isCheck = false;\r\n }\r\n });\r\n return isCheck;\r\n },\r\n /**\r\n * @description 获取链接地址并打开添加链接的模态框\r\n * @param {number} index - 当前项的索引值\r\n */\r\n getLink(index) {\r\n // 设置当前项的索引值\r\n this.itemIndex = index;\r\n // 打开添加链接的模态框\r\n this.$refs.linkaddres.modals = true;\r\n },\r\n /**\r\n * @description 处理链接地址的输入事件\r\n * @param {string} e - 链接地址\r\n */\r\n linkUrl(e) {\r\n // 将链接地址存储到对应的数据项中\r\n this.areaData[this.itemIndex].link = e;\r\n },\r\n },\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n::v-deep .el-dialog {\r\n border-radius: 0px !important;\r\n .el-alert__icon.is-big {\r\n font-size: 14px;\r\n width: 16px;\r\n }\r\n .el-alert .el-alert__description {\r\n margin: 0;\r\n }\r\n}\r\n.btn {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 16px 0;\r\n}\r\n.dialog-footer {\r\n text-align: right;\r\n margin-top: 20px;\r\n margin-right: 20px;\r\n}\r\n.operationFloor {\r\n display: flex;\r\n position: relative;\r\n max-height: 80vh;\r\n .header {\r\n .titleBox {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n height: 100px;\r\n .name {\r\n font-size: 13px;\r\n font-weight: bold;\r\n }\r\n }\r\n .textBox {\r\n font-size: 12px;\r\n color: #777;\r\n margin-bottom: 10px;\r\n }\r\n }\r\n .imgBox::-webkit-scrollbar {\r\n display: none; /* Chrome Safari */\r\n }\r\n .imgBox {\r\n display: flex;\r\n justify-content: center;\r\n width: 65%;\r\n overflow-y: scroll;\r\n max-height: 800px;\r\n .container {\r\n position: relative;\r\n border: 1px solid #f5f5f5;\r\n }\r\n\r\n img {\r\n cursor: crosshair;\r\n display: block;\r\n width: 750px;\r\n }\r\n .area {\r\n position: absolute;\r\n width: 200px;\r\n height: 200px;\r\n left: 200px;\r\n top: 300px;\r\n background: rgba(#2980b9, 0.3);\r\n border: 1px dashed #34495e;\r\n }\r\n }\r\n}\r\n.form {\r\n font-size: 12px;\r\n width: 30%;\r\n max-height: 800px;\r\n overflow-y: scroll;\r\n .form-row {\r\n display: flex;\r\n margin: 12px 0;\r\n align-items: center;\r\n .form-item {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n white-space: nowrap;\r\n margin: 0 5px;\r\n font-size: 12px;\r\n .num {\r\n width: 69px;\r\n color: #999;\r\n font-size: 12px;\r\n }\r\n .label {\r\n color: #c7c7c7;\r\n }\r\n }\r\n }\r\n .el-icon-delete {\r\n font-size: 16px;\r\n cursor: pointer;\r\n }\r\n}\r\n</style>\r\n"]}]}
|
