{"remainingRequest":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\front\\item\\zyAdmin\\src\\components\\newsCategory\\index.vue?vue&type=style&index=0&id=5e8ffa44&lang=scss&scoped=true","dependencies":[{"path":"D:\\front\\item\\zyAdmin\\src\\components\\newsCategory\\index.vue","mtime":1761614938982},{"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:DQouY29udGVudEJveCB7DQogIGhlaWdodDogNjAwcHg7DQogIHdpZHRoOiAxMDAlOw0KICBwb3NpdGlvbjogcmVsYXRpdmU7DQogICNjb250ZW50IHsNCiAgICBwb3NpdGlvbjogYWJzb2x1dGU7DQogICAgLyogdG9wOiAyODBweDsgKi8NCiAgICBib3R0b206IDA7DQogICAgd2lkdGg6IDg2JTsNCiAgICAvKiBoZWlnaHQgMTAwMHB4OyAqLw0KICB9DQp9DQouY29udGVudEJveCA6OnYtZGVlcCAudnVlLXdhdGVyZmFsbC1lYXN5IHsNCiAgd2lkdGg6IDEwMCUgIWltcG9ydGFudDsNCiAgbGVmdDogMCAhaW1wb3J0YW50Ow0KICBtYXJnaW4tbGVmdDogMCAhaW1wb3J0YW50Ow0KfQ0KLmNvbnRlbnRCb3ggOjp2LWRlZXAgLnZ1ZS13YXRlcmZhbGwtZWFzeS1zY3JvbGw6Oi13ZWJraXQtc2Nyb2xsYmFyIHsNCiAgZGlzcGxheTogbm9uZTsNCn0NCi5jb250ZW50Qm94IDo6di1kZWVwIC52dWUtd2F0ZXJmYWxsLWVhc3ktc2Nyb2xsIHsNCiAgc2Nyb2xsYmFyLXdpZHRoOiBub25lOyAvKiBmaXJlZm94ICovDQogIC1tcy1vdmVyZmxvdy1zdHlsZTogbm9uZTsgLyogSUUgMTArICovDQogIG92ZXJmbG93LXg6IGhpZGRlbjsNCiAgb3ZlcmZsb3cteTogYXV0bzsNCn0NCi5zb21lLWluZm8gew0KICBwYWRkaW5nOiA3cHg7DQogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7DQogIHRleHQtYWxpZ246IGNlbnRlcjsNCiAgd2hpdGUtc3BhY2U6IG5vd3JhcDsNCiAgb3ZlcmZsb3c6IGhpZGRlbjsNCiAgdGV4dC1vdmVyZmxvdzogZWxsaXBzaXM7DQp9DQouUmVmcmVzaCB7DQogIGZvbnQtc2l6ZTogMTJweDsNCiAgY29sb3I6IHZhcigtLXByZXYtY29sb3ItcHJpbWFyeSk7DQogIGN1cnNvcjogcG9pbnRlcjsNCiAgbGluZS1oZWlnaHQ6IDM1cHg7DQogIGRpc3BsYXk6IGlubGluZS1ibG9jazsNCn0NCi5uZXdzX3BpYyB7DQogIHdpZHRoOiAxMDAlOw0KICBoZWlnaHQ6IDE1MHB4Ow0KICBvdmVyZmxvdzogaGlkZGVuOw0KICBwb3NpdGlvbjogcmVsYXRpdmU7DQogIGJhY2tncm91bmQtc2l6ZTogY292ZXI7DQogIGJvcmRlci1yYWRpdXM6IDVweCA1cHggMCAwOw0KICBwYWRkaW5nOiAxMHB4Ow0KICBib3gtc2l6aW5nOiBib3JkZXItYm94Ow0KICBkaXNwbGF5OiBmbGV4Ow0KICBmbGV4LWRpcmVjdGlvbjogY29sdW1uOw0KICBhbGlnbi1pdGVtczogZmxleC1lbmQ7DQp9DQoubmV3c19zcCB7DQogIGZvbnQtc2l6ZTogMTJweDsNCiAgY29sb3I6ICMwMDAwMDA7DQogIGJhY2tncm91bmQ6ICNmZmY7DQogIHdpZHRoOiAxMDAlOw0KICBoZWlnaHQ6IDM4cHg7DQogIGxpbmUtaGVpZ2h0OiAzOHB4Ow0KICBwYWRkaW5nOiAwIDEycHg7DQogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7DQogIGRpc3BsYXk6IGJsb2NrOw0KfQ0KLm5ld3NfY2VudCB7DQogIHdpZHRoOiAxMDAlOw0KICBoZWlnaHQ6IGF1dG87DQogIGJhY2tncm91bmQ6ICNmZmY7DQogIGJvcmRlci10b3A6IDFweCBkYXNoZWQgI2VlZTsNCiAgZGlzcGxheTogZmxleDsNCiAgcGFkZGluZzogMTBweDsNCiAgYm94LXNpemluZzogYm9yZGVyLWJveDsNCiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuOw0KICAubmV3c19zcDEgew0KICAgIGZvbnQtc2l6ZTogMTJweDsNCiAgICBjb2xvcjogIzAwMDAwMDsNCiAgICB3aWR0aDogNzElOw0KICB9DQogIC5uZXdzX2NlbnRfaW1nIHsNCiAgICB3aWR0aDogODFweDsNCiAgICBoZWlnaHQ6IDQ2cHg7DQogICAgYm9yZGVyLXJhZGl1czogNnB4Ow0KICAgIG92ZXJmbG93OiBoaWRkZW47DQoNCiAgICBpbWcgew0KICAgICAgd2lkdGg6IDEwMCU7DQogICAgICBoZWlnaHQ6IDEwMCU7DQogICAgfQ0KICB9DQp9DQoubmV3c19waWMgOjp2LWRlZXAgLml2dS1idG4tZXJyb3Igew0KICB3aWR0aDogMjRweCAhaW1wb3J0YW50Ow0KICBoZWlnaHQ6IDI0cHggIWltcG9ydGFudDsNCiAgYmFja2dyb3VuZDogI2ZmNWQ1ZiAhaW1wb3J0YW50Ow0KICBjb2xvcjogI2ZmZiAhaW1wb3J0YW50Ow0KICBib3JkZXI6IDFweCBzb2xpZCAjZWVlICFpbXBvcnRhbnQ7DQp9DQoubmV3c19waWMgOjp2LWRlZXAgLml2dS1idG4tZXJyb3I6aG92ZXIgew0KICBiYWNrZ3JvdW5kOiAjZmY1ZDVmICFpbXBvcnRhbnQ7DQogIGJvcmRlcjogMXB4IHNvbGlkICNmZmYgIWltcG9ydGFudDsNCiAgY29sb3I6ICNmZmYgIWltcG9ydGFudDsNCn0NCi5uZXdzX3BpYyA6OnYtZGVlcCAuaXZ1LWJ0bi1zdWNjZXNzIHsNCiAgd2lkdGg6IDI0cHggIWltcG9ydGFudDsNCiAgaGVpZ2h0OiAyNHB4ICFpbXBvcnRhbnQ7DQogIGJvcmRlcjogMXB4IHNvbGlkICNlZWUgIWltcG9ydGFudDsNCn0NCg=="},{"version":3,"sources":["index.vue"],"names":[],"mappings":";AA+RA;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;;AAEA;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/newsCategory","sourcesContent":["<template>\r\n  <div :style=\"{ height: scrollerHeight + 'px' || '' }\">\r\n    <div>\r\n      <el-form\r\n        ref=\"formValidate\"\r\n        inline\r\n        :model=\"formValidate\"\r\n        label-width=\"80px\"\r\n        label-position=\"right\"\r\n        class=\"tabform\"\r\n      >\r\n        <el-form-item label=\"图文搜索：\" prop=\"cate_name\" label-for=\"cate_name\">\r\n          <el-input clearable placeholder=\"请输入\" v-model=\"formValidate.cate_name\" class=\"form_content_width\" />\r\n        </el-form-item>\r\n        <el-form-item>\r\n          <el-button type=\"primary\" v-db-click @click=\"userSearchs\">查询</el-button>\r\n          <router-link :to=\"routePre + '/app/wechat/news_category/save/0'\">\r\n            <el-button type=\"primary\" class=\"bnt ml15\">添加图文消息</el-button>\r\n          </router-link>\r\n        </el-form-item>\r\n      </el-form>\r\n    </div>\r\n    <div class=\"contentBox\">\r\n      <div id=\"content\" :style=\"{ top: contentTop + 'px' || '', width: contentWidth }\" ref=\"content\">\r\n        <vue-waterfall-easy\r\n          :imgsArr=\"imgsArr\"\r\n          :maxCols=\"maxCol\"\r\n          :width=\"screenWidth\"\r\n          v-db-click\r\n          @click=\"clickFn\"\r\n          @scrollReachBottom=\"getData\"\r\n          ref=\"waterfall\"\r\n          :reachBottomDistance=\"30\"\r\n        >\r\n          <div class=\"img-info\" slot-scope=\"props\" v-if=\"props.value.new.length !== 0\">\r\n            <div v-for=\"(j, i) in props.value.new\" :key=\"i\">\r\n              <div v-if=\"i === 0\">\r\n                <div\r\n                  class=\"news_pic\"\r\n                  :style=\"{\r\n                    backgroundImage: 'url(' + j.image_input[0] + ')',\r\n                    backgroundSize: '100% 100%',\r\n                  }\"\r\n                  @mouseenter=\"mouseenterOut(j)\"\r\n                  @mouseleave=\"mouseenterOver(j)\"\r\n                >\r\n                  <el-button\r\n                    type=\"success\"\r\n                    icon=\"el-icon-edit\"\r\n                    v-show=\"props.value.new[i].isDel && isShow\"\r\n                    v-db-click\r\n                    @click=\"clkk(props.value)\"\r\n                  ></el-button>\r\n                  <el-button\r\n                    type=\"error\"\r\n                    icon=\"el-icon-delete\"\r\n                    v-show=\"props.value.new[i].isDel && isShow\"\r\n                    v-db-click\r\n                    @click=\"del(props.value, '删除图文', i)\"\r\n                    style=\"margin-top: 5px\"\r\n                  ></el-button>\r\n                  <el-button\r\n                    type=\"primary\"\r\n                    icon=\"el-icon-s-promotion\"\r\n                    v-show=\"props.value.new[i].isDel && isShowSend\"\r\n                    v-db-click\r\n                    @click=\"send(props.value, '发送', i)\"\r\n                    >推送</el-button\r\n                  >\r\n                </div>\r\n                <span class=\"news_sp\">{{ j.title }}</span>\r\n              </div>\r\n              <div v-else class=\"news_cent\">\r\n                <span class=\"news_sp1\" v-if=\"j.synopsis\">{{ j.title }}</span>\r\n                <div class=\"news_cent_img\" v-if=\"j.image_input.length !== 0\">\r\n                  <img :src=\"j.image_input[0]\" />\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <p class=\"some-info\">{{ props.value.id }}</p>\r\n          </div>\r\n          <div slot=\"waterfall-over\"></div>\r\n        </vue-waterfall-easy>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport vueWaterfallEasy from 'vue-waterfall-easy';\r\nimport { wechatNewsListApi } from '@/api/app';\r\nimport { mapState } from 'vuex';\r\nimport settings from '@/setting';\r\nexport default {\r\n  name: 'newsCategory',\r\n  props: {\r\n    scrollerHeight: {\r\n      type: String,\r\n      default: '100%',\r\n    },\r\n    contentTop: {\r\n      type: String,\r\n      default: '0',\r\n    },\r\n    contentWidth: {\r\n      type: String,\r\n      default: '100%',\r\n    },\r\n    maxCols: {\r\n      type: Number,\r\n      default: 5,\r\n    },\r\n    isShow: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    isShowSend: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    userIds: {\r\n      type: Array,\r\n      default: () => {\r\n        [];\r\n      },\r\n    },\r\n  },\r\n  components: {\r\n    vueWaterfallEasy,\r\n  },\r\n  data() {\r\n    return {\r\n      routePre: settings.routePre,\r\n      isDel: false,\r\n      imgsArr: [],\r\n      group: 0, // 当前加载的加载图片的次数\r\n      fetchImgsArr: [], // 存放每次滚动时下一批要加载的图片的数组\r\n      orderData: {},\r\n      cols: NaN, // 需要根据窗口宽度初始化\r\n      gridPic: {\r\n        xl: 6,\r\n        lg: 8,\r\n        md: 8,\r\n        sm: 24,\r\n        xs: 24,\r\n      },\r\n      grid: {\r\n        xl: 8,\r\n        lg: 8,\r\n        md: 8,\r\n        sm: 24,\r\n        xs: 24,\r\n      },\r\n      formValidate: {\r\n        cate_name: '',\r\n        page: 1,\r\n        limit: 10,\r\n      },\r\n      screenWidth: document.body.clientWidth - 200,\r\n      maxCol: 1,\r\n    };\r\n  },\r\n  created() {\r\n    if (this.maxCols === 5) {\r\n      this.$set(this, 'maxCol', this.screenWidth / 240);\r\n    } else {\r\n      this.maxCol = this.maxCols;\r\n    }\r\n    this.getData();\r\n  },\r\n  mounted() {},\r\n  computed: {},\r\n  methods: {\r\n    // 发送图文消息\r\n    send(row, tit, num) {\r\n      let delfromData = {\r\n        title: tit,\r\n        num: num,\r\n        url: `app/wechat/push`,\r\n        method: 'post',\r\n        ids: {\r\n          id: row.id,\r\n          user_ids: this.userIds,\r\n        },\r\n      };\r\n      this.$modalSure(delfromData)\r\n        .then((res) => {\r\n          this.$message.success(res.msg);\r\n        })\r\n        .catch((res) => {\r\n          this.$message.error(res.msg);\r\n        });\r\n    },\r\n    clickFn(event, { index, value }) {\r\n      event.preventDefault();\r\n      if (event.target.tagName.toLowerCase() === 'div') {\r\n        this.$emit('getCentList', value);\r\n      }\r\n    },\r\n    // 删除\r\n    del(row, tit, num) {\r\n      let delfromData = {\r\n        title: tit,\r\n        num: num,\r\n        url: `app/wechat/news/${row.id}`,\r\n        method: 'DELETE',\r\n        ids: '',\r\n      };\r\n      this.$modalSure(delfromData)\r\n        .then((res) => {\r\n          this.$message.success(res.msg);\r\n          this.$nextTick(() => {\r\n            this.imgsArr = [];\r\n          });\r\n          this.formValidate.page = 1;\r\n          this.getData();\r\n        })\r\n        .catch((res) => {\r\n          this.$message.error(res.msg);\r\n        });\r\n    },\r\n    // 删除成功\r\n    // submitModel () {\r\n    //     if (this.delfromData.title === '删除图文') {\r\n    //         // this.imgsArr.splice(this.delfromData.num, 1)\r\n    //         this.$nextTick(() => {\r\n    //             this.imgsArr = [];\r\n    //         })\r\n    //         this.formValidate.page = 1;\r\n    //         this.getData();\r\n    //     }\r\n    // },\r\n    // 编辑\r\n    clkk(item) {\r\n      this.$router.push({\r\n        path: this.routePre + '/app/wechat/news_category/save/' + item.id,\r\n      });\r\n    },\r\n    // 鼠标移进\r\n    mouseenterOut(item) {\r\n      this.$set(item, 'isDel', true);\r\n    },\r\n    // 鼠标移出\r\n    mouseenterOver(item) {\r\n      this.$set(item, 'isDel', false);\r\n    },\r\n    // 搜索\r\n    userSearchs() {\r\n      this.$nextTick(() => {\r\n        this.imgsArr = [];\r\n      });\r\n      this.formValidate.page = 1;\r\n      this.getData();\r\n    },\r\n    // 瀑布流数据\r\n    getData() {\r\n      wechatNewsListApi(this.formValidate)\r\n        .then(async (res) => {\r\n          if (res.data.list.length === 0) {\r\n            // 模拟已经无新数据，显示 slot=\"waterfall-over\"\r\n            this.imgsArr = [];\r\n            this.$nextTick(() => {\r\n              this.$refs.waterfall.waterfallOver();\r\n            });\r\n          } else {\r\n            let num = Math.ceil(res.data.count / this.formValidate.limit) + 1;\r\n            res.data.list.map((item) => {\r\n              item.isDel = false;\r\n            });\r\n            this.imgsArr = this.imgsArr.concat(res.data.list) || [];\r\n            this.formValidate.page++;\r\n            if (this.formValidate.page === num) {\r\n              // 模拟已经无新数据，显示 slot=\"waterfall-over\"\r\n              this.$refs.waterfall.waterfallOver();\r\n              return;\r\n            }\r\n          }\r\n        })\r\n        .catch((res) => {\r\n          this.$message.error(res.msg);\r\n        });\r\n    },\r\n  },\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.contentBox {\r\n  height: 600px;\r\n  width: 100%;\r\n  position: relative;\r\n  #content {\r\n    position: absolute;\r\n    /* top: 280px; */\r\n    bottom: 0;\r\n    width: 86%;\r\n    /* height 1000px; */\r\n  }\r\n}\r\n.contentBox ::v-deep .vue-waterfall-easy {\r\n  width: 100% !important;\r\n  left: 0 !important;\r\n  margin-left: 0 !important;\r\n}\r\n.contentBox ::v-deep .vue-waterfall-easy-scroll::-webkit-scrollbar {\r\n  display: none;\r\n}\r\n.contentBox ::v-deep .vue-waterfall-easy-scroll {\r\n  scrollbar-width: none; /* firefox */\r\n  -ms-overflow-style: none; /* IE 10+ */\r\n  overflow-x: hidden;\r\n  overflow-y: auto;\r\n}\r\n.some-info {\r\n  padding: 7px;\r\n  box-sizing: border-box;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n}\r\n.Refresh {\r\n  font-size: 12px;\r\n  color: var(--prev-color-primary);\r\n  cursor: pointer;\r\n  line-height: 35px;\r\n  display: inline-block;\r\n}\r\n.news_pic {\r\n  width: 100%;\r\n  height: 150px;\r\n  overflow: hidden;\r\n  position: relative;\r\n  background-size: cover;\r\n  border-radius: 5px 5px 0 0;\r\n  padding: 10px;\r\n  box-sizing: border-box;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: flex-end;\r\n}\r\n.news_sp {\r\n  font-size: 12px;\r\n  color: #000000;\r\n  background: #fff;\r\n  width: 100%;\r\n  height: 38px;\r\n  line-height: 38px;\r\n  padding: 0 12px;\r\n  box-sizing: border-box;\r\n  display: block;\r\n}\r\n.news_cent {\r\n  width: 100%;\r\n  height: auto;\r\n  background: #fff;\r\n  border-top: 1px dashed #eee;\r\n  display: flex;\r\n  padding: 10px;\r\n  box-sizing: border-box;\r\n  justify-content: space-between;\r\n  .news_sp1 {\r\n    font-size: 12px;\r\n    color: #000000;\r\n    width: 71%;\r\n  }\r\n  .news_cent_img {\r\n    width: 81px;\r\n    height: 46px;\r\n    border-radius: 6px;\r\n    overflow: hidden;\r\n\r\n    img {\r\n      width: 100%;\r\n      height: 100%;\r\n    }\r\n  }\r\n}\r\n.news_pic ::v-deep .ivu-btn-error {\r\n  width: 24px !important;\r\n  height: 24px !important;\r\n  background: #ff5d5f !important;\r\n  color: #fff !important;\r\n  border: 1px solid #eee !important;\r\n}\r\n.news_pic ::v-deep .ivu-btn-error:hover {\r\n  background: #ff5d5f !important;\r\n  border: 1px solid #fff !important;\r\n  color: #fff !important;\r\n}\r\n.news_pic ::v-deep .ivu-btn-success {\r\n  width: 24px !important;\r\n  height: 24px !important;\r\n  border: 1px solid #eee !important;\r\n}\r\n</style>\r\n"]}]}