{"version":3,"sources":["webpack:///./src/views/imgLibrary/detail.vue?1292","webpack:///src/views/imgLibrary/detail.vue","webpack:///./src/views/imgLibrary/detail.vue?2fb9","webpack:///./src/views/imgLibrary/detail.vue","webpack:///./src/views/imgLibrary/detail.vue?3270","webpack:///./node_modules/vant/es/image-preview/style/index.js"],"names":["render","_vm","this","_h","$createElement","_c","_self","directives","name","rawName","value","$route","meta","expression","staticClass","_v","_s","detail","description","CategoryName","Total","_f","createtime","attrs","finished","on","onLoad","model","callback","$$v","loading","col","list","itemWidth","gutterWidth","_l","item","index","key","$event","getImg","wxconfig","_e","staticRenderFns","data","page","title","link","desc","imgUrl","isWxSdk","computed","components","wxsdk","created","mounted","methods","window","that","images","startPosition","showIndicators","lazyLoad","onClose","$","imgLibraryImagePreview","getDetail","id","message","getData","parentid","arr","resolve","catch","reject","component"],"mappings":"yHAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,WAAW,CAAC,CAACC,KAAK,eAAeC,QAAQ,iBAAiBC,MAAOT,EAAIU,OAAOC,KAAU,MAAEC,WAAW,sBAAsBC,YAAY,cAAc,CAACT,EAAG,MAAM,CAACS,YAAY,QAAQ,CAACT,EAAG,MAAM,CAACS,YAAY,SAAS,CAACb,EAAIc,GAAG,iBAAiBd,EAAIe,GAAGf,EAAIgB,OAAOC,aAAa,gBAAgBb,EAAG,MAAM,CAACS,YAAY,OAAO,CAACT,EAAG,OAAO,CAACJ,EAAIc,GAAG,IAAId,EAAIe,GAAGf,EAAIgB,OAAOE,iBAAiBd,EAAG,MAAM,CAACS,YAAY,aAAa,CAACT,EAAG,IAAI,CAACJ,EAAIc,GAAGd,EAAIe,GAAGf,EAAImB,OAAO,SAASf,EAAG,OAAO,CAACJ,EAAIc,GAAGd,EAAIe,GAAGf,EAAIoB,GAAG,eAAPpB,CAAuBA,EAAIgB,OAAOK,WAAW,wBAAwBjB,EAAG,MAAM,CAACS,YAAY,QAAQ,CAACT,EAAG,WAAW,CAACkB,MAAM,CAAC,SAAWtB,EAAIuB,SAAS,gBAAgB,SAASC,GAAG,CAAC,KAAOxB,EAAIyB,QAAQC,MAAM,CAACjB,MAAOT,EAAW,QAAE2B,SAAS,SAAUC,GAAM5B,EAAI6B,QAAQD,GAAKhB,WAAW,YAAY,CAACR,EAAG,YAAY,CAACkB,MAAM,CAAC,IAAMtB,EAAI8B,IAAI,KAAO9B,EAAI+B,KAAK,MAAQ/B,EAAIgC,UAAU,YAAchC,EAAIiC,cAAc,CAACjC,EAAIkC,GAAIlC,EAAQ,MAAE,SAASmC,EAAKC,GAAO,OAAOhC,EAAG,MAAM,CAACiC,IAAID,EAAMvB,YAAY,aAAa,CAACT,EAAG,MAAM,CAACE,WAAW,CAAC,CAACC,KAAK,OAAOC,QAAQ,SAASC,MAAO0B,EAAQ,IAAEvB,WAAW,aAAaU,MAAM,CAAC,IAAM,IAAIE,GAAG,CAAC,MAAQ,SAASc,GAAQ,OAAOtC,EAAIuC,OAAOH,aAAgB,IAAI,IAAI,GAAIpC,EAAW,QAAEI,EAAG,QAAQ,CAACkB,MAAM,CAAC,UAAW,EAAK,OAAStB,EAAIwC,YAAYxC,EAAIyC,MAAM,IACjzCC,EAAkB,G,qEC4CP,GACfnC,iBACAoC,KAFA,WAGA,OACAb,MACAC,QACAF,WACAN,YACAJ,QACAyB,OACA5B,UACAwB,UACAK,gBACAC,wCACAC,iBACAC,yDAEAC,aAGAC,UACAlB,UADA,WAEA,uDAEAC,YAJA,WAKA,oDAGAkB,YACAC,iBAAA,yDAEAC,QA/BA,aAkCAC,QAlCA,WAmCA,kBAEAC,SAEAhB,OAFA,SAEAH,GACA,WAGA,+BACAoB,sCAEAC,aACAA,wBACAA,gBAMA,kBACAC,kCACA,gBAEAC,gBACAC,kBACAC,YACAC,qBAGA,2CACAN,yBAOA,0CAEAO,sCAIAC,cAKAC,UA9CA,WA8CA,WAEA,GACAC,yBAEA,2DACA,UAEA,kBAEA,gBAEAC,wBAMAC,QAhEA,WAgEA,WACA,GACAC,8BACAzB,gBAEA,kCACA,+CACA,cACA,oBAIA0B,uBACA,kBAGA,uBAGAC,QAEAC,OAAA,YAEA,WACAC,WAKAhD,OA7FA,WA6FA,WACA,aAEA,gCAEA,aAEA,yBACA,qBCvL+V,I,wBCQ3ViD,EAAY,eACd,EACA3E,EACA2C,GACA,EACA,KACA,WACA,MAIa,aAAAgC,E,2CCnBf,W,kCCAA,qG","file":"static/js/jschunk-263fe612.1742971736012.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:\"wechat-title\",rawName:\"v-wechat-title\",value:(_vm.$route.meta.title),expression:\"$route.meta.title\"}],staticClass:\"img_detail\"},[_c('div',{staticClass:\"head\"},[_c('div',{staticClass:\"title\"},[_vm._v(\"\\n            \"+_vm._s(_vm.detail.description)+\"\\n        \")]),_c('div',{staticClass:\"con\"},[_c('span',[_vm._v(\"@\"+_vm._s(_vm.detail.CategoryName))]),_c('div',{staticClass:\"time_wrap\"},[_c('p',[_vm._v(_vm._s(_vm.Total)+\"张图片\")]),_c('span',[_vm._v(_vm._s(_vm._f(\"momentFormat\")(_vm.detail.createtime,'YYYY/MM/DD')))])])])]),_c('div',{staticClass:\"list\"},[_c('van-list',{attrs:{\"finished\":_vm.finished,\"finished-text\":\"没有更多了\"},on:{\"load\":_vm.onLoad},model:{value:(_vm.loading),callback:function ($$v) {_vm.loading=$$v},expression:\"loading\"}},[_c('waterfall',{attrs:{\"col\":_vm.col,\"data\":_vm.list,\"width\":_vm.itemWidth,\"gutterWidth\":_vm.gutterWidth}},[_vm._l((_vm.list),function(item,index){return _c('div',{key:index,staticClass:\"cell-item\"},[_c('img',{directives:[{name:\"lazy\",rawName:\"v-lazy\",value:(item.url),expression:\"item.url\"}],attrs:{\"alt\":\"\"},on:{\"click\":function($event){return _vm.getImg(index)}}})])})],2)],1)],1),(_vm.isWxSdk)?_c('wxsdk',{attrs:{\"isHidden\":true,\"config\":_vm.wxconfig}}):_vm._e()],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n    <div class=\"img_detail\" v-wechat-title=\"$route.meta.title\">\r\n        <div class=\"head\">\r\n            <div class=\"title\">\r\n                {{detail.description}}\r\n            </div>\r\n            <div class=\"con\">\r\n                <span>@{{detail.CategoryName}}</span>\r\n                <div class=\"time_wrap\">\r\n                    <p>{{Total}}张图片</p>\r\n                    <span>{{detail.createtime | momentFormat('YYYY/MM/DD')}}</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"list\">\r\n            <van-list v-model=\"loading\" :finished=\"finished\" finished-text=\"没有更多了\" @load=\"onLoad\">\r\n\r\n                <waterfall :col='col' :data=\"list\" :width=\"itemWidth\" :gutterWidth=\"gutterWidth\">\r\n                    <template >\r\n                        <div \r\n                            class=\"cell-item\" \r\n                            v-for=\"(item,index) in list\" \r\n                            :key=\"index\">\r\n\r\n                            <img \r\n                                v-lazy=\"item.url\" \r\n                                alt=\"\" \r\n                                @click=\"getImg(index)\">\r\n\r\n                        </div>\r\n                    </template>\r\n                </waterfall>\r\n                \r\n            </van-list>\r\n        </div>\r\n        <wxsdk v-if=\"isWxSdk\" :isHidden=\"true\" :config=\"wxconfig\"></wxsdk>\r\n    </div>\r\n</template>\r\n\r\n<script>\r\nimport $ from 'jquery'\r\nimport { Toast } from 'vant';\r\nimport { ImagePreview } from 'vant';\r\n\r\nexport default {\r\n    name: 'imgDetail',\r\n    data(){\r\n        return {\r\n            col: 2,\r\n            list: [],\r\n            loading: false,\r\n            finished: false,\r\n            Total: 0,\r\n            page: 0,\r\n            detail: {},\r\n            wxconfig:{\r\n                title: '业之峰环保装饰', // 分享标题\r\n                link: window.location.href.split('#')[0], // 分享链接\r\n                desc: '诺云出品，营销神器', // 分享描述\r\n                imgUrl: 'https://picfw.yzf.com.cn/shadow/20200215084744', // 分享图标\r\n            },\r\n            isWxSdk: true,\r\n        }\r\n    },\r\n    computed:{\r\n        itemWidth(){  \r\n            return (345*0.5*(document.documentElement.clientWidth/375))  //#rem布局 计算宽度\r\n        },\r\n        gutterWidth(){\r\n            return (10*0.5*(document.documentElement.clientWidth/375))   //#rem布局 计算x轴方向margin(y轴方向的margin自定义在css中即可)\r\n        }\r\n    },\r\n    components: {\r\n        wxsdk: () => import('@/components/Wxsdk'),\r\n    },\r\n    created(){\r\n        \r\n    },\r\n    mounted(){\r\n        this.getDetail()\r\n    },\r\n    methods:{\r\n        //点击预览大图，index是点击的图片index，listIndex是信息的index\r\n        getImg(index){\r\n            let that = this\r\n\r\n            // 为url添加参数\r\n            var lookUrl = window.location.href + '&look';\r\n            window.history.pushState(null, null, lookUrl);\r\n            // 重启jsdk\r\n            that.isWxSdk = false;\r\n            that.$nextTick(()=>{\r\n                that.isWxSdk = true;\r\n            })\r\n            \r\n            // console.log(index)\r\n            // console.log(this.list)\r\n            // 开启大图预览\r\n            let imgLibraryImagePreview = new ImagePreview({\r\n                images: this.list.map(e=>{\r\n                    return e.url\r\n                }),\r\n                startPosition: index,\r\n                showIndicators: true,\r\n                lazyLoad: true,\r\n                onClose: (e)=>{\r\n                    // console.log(e)\r\n                    // 清除url的参数\r\n                    if (window.location.href.indexOf('&look') !== -1) {\r\n                        window.history.back();\r\n                    }\r\n                    // console.log('关闭图片预览模式')\r\n                    \r\n                }\r\n            });\r\n\r\n            if (window.history && window.history.pushState) {\r\n                //监听浏览器前进后退事件\r\n                $(window).on('popstate', function () {\r\n                    //do something...\r\n                    // console.log(imgLibraryImagePreview)\r\n                    // 关闭大图预览\r\n                    imgLibraryImagePreview.close()\r\n                });\r\n            }\r\n\r\n        },\r\n        getDetail(){\r\n            // console.log(this.$route.query.id)\r\n            var data = {\r\n                id: this.$route.query.id\t//是\tlong\t图片库id\r\n            }\r\n            this.$get(\"/api/PictureDepot/Details\",data).then((res)=>{\r\n                if (res.Success) {\r\n                    // console.log(res.Object)\r\n                    this.detail = res.Object\r\n                }else{\r\n                    Toast.success({\r\n                        \r\n                        message: res.Message\r\n                    });\r\n                }\r\n            })\r\n        },\r\n        //获取列表\r\n        getData(){\r\n            var params = {\r\n                parentid: this.$route.query.id, \t//是\tlong\t图片库id\r\n                page: this.page\t//否\tint\t页码 （默认1）\r\n            };\r\n            return new Promise((resolve, reject)=>{\r\n                this.$get(\"/api/Picture/Get\", params).then(res => {\r\n                    if (res.Success) {\r\n                        var arr = res.Object.Data;\r\n                        // 瀑布流的尺寸计算有问题，必须遍历\r\n                        // this.list = [...this.list, ...res.Object.Data]\r\n                        \r\n                        arr.forEach(e => {\r\n                            this.list.push(e)\r\n                        });\r\n\r\n                        this.Total = res.Object.Total;\r\n                        // console.log(this.total)\r\n                        // console.log(res.Object.Data)\r\n                        resolve()\r\n                    }\r\n                }).catch(res => {\r\n                    // console.log(res)\r\n                    this.error = true;\r\n                    reject()\r\n                });\r\n            })\r\n        },\r\n        //滚动加载更多数据\r\n        onLoad() {\r\n            this.page += 1;\r\n            // 异步更新数据\r\n            this.getData().then(()=>{\r\n                // 加载状态结束\r\n                this.loading = false;\r\n                // 数据全部加载完成\r\n                if (this.list.length >= this.Total) {\r\n                    this.finished = true;\r\n                }\r\n            })\r\n        },\r\n    }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.img_detail{\r\n    width: 100vw;\r\n    .head{\r\n        padding: 30px 25px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        .title{\r\n            font-size: 37px;\r\n            line-height: 57px;\r\n            color: #333333;\r\n            margin-bottom: 40px;\r\n        }\r\n        .con{\r\n            display: flex;\r\n            flex-direction: row;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            font-size: 25px;\r\n            color: #999999;\r\n            .time_wrap{\r\n                display: flex;\r\n                flex-direction: row;\r\n                justify-content: space-between;\r\n                align-items: center;\r\n                p{\r\n                    margin-right: 20px;\r\n                }\r\n            }\r\n\r\n        }\r\n    }\r\n\r\n    .list{\r\n        width: 100vw;\r\n        display: flex;\r\n        justify-content: center;\r\n        .vue-waterfall{\r\n            overflow-y: hidden;\r\n        }\r\n        .cell-item{\r\n            img{\r\n                width: 100%;\r\n                margin-bottom: 9px;\r\n            }\r\n        }\r\n\r\n    }\r\n}\r\n</style>","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./detail.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./detail.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./detail.vue?vue&type=template&id=474283ac&scoped=true&\"\nimport script from \"./detail.vue?vue&type=script&lang=js&\"\nexport * from \"./detail.vue?vue&type=script&lang=js&\"\nimport style0 from \"./detail.vue?vue&type=style&index=0&id=474283ac&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"474283ac\",\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../../node_modules/@vue/cli-service/node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./detail.vue?vue&type=style&index=0&id=474283ac&lang=scss&scoped=true&\"","import '../../style/base.css';\nimport '../../overlay/index.css';\nimport '../../info/index.css';\nimport '../../icon/index.css';\nimport '../../image/index.css';\nimport '../../popup/index.css';\nimport '../../loading/index.css';\nimport '../../swipe/index.css';\nimport '../../swipe-item/index.css';\nimport '../index.css';"],"sourceRoot":""}