caimei365-www/src/main/resources/static/js/document/beautyArchiveDetailMixin.js

//商品资料库vue混入对象

var beautyArchiveDetailMixin = {
    data: {
        isRequest: false,
        //用户信息相关
        permission: 5, //用户权限  0可查看，1未登录，2需升级会员机构，3需升级医美会员机构，4需要抵扣采美豆，5无权限查看
        //页面配置
        archiveId: '',  //资料列表id
        currentVideoUrl: '', //正在播放的视频链接（上一个播放的的视频）
        showVideoDialog: false,
        isPlayer: false, //是否正在播放
        imageGroup: {},
        keyword: '',
        imageArchiveList: [],  // 图片资料列表
        videoArchiveList: [], // 视频资料列表
        fileArchiveList: [], // 文件资料列表
        defaultImage: 'https://static.caimei365.com/app/img/icon2/PC-default.png',  // 默认图片
        videoCover: 'https://static.caimei365.com/app/img/icon2/video-cover.png', //默认视频封面
        archiveProductInfo: {}
    },
    filters: {
        // 时间格式化
        formatTime: function (val) {
            return moment(new Date(val)).format('YYYY-MM-DD hh:mm:ss');
        }
    },
    computed: {
        //资料查看状态提示
        TipStatus: function () {
            // 资料权限
            var statusText = [
                false,
                {text: '请登录后查看！', btn: '去登录', redirect: '/login.html'},
                {text: '请升级成为会员机构后方可查看！', btn: '去升级', redirect: '/user/setting/upgrade.html'},
                {text: '请升级成为医美会员机构后方可查看！', btn: '去升级', redirect: '/user/setting/upgrade.html'},
                {text: '需抵扣100采美豆方可查看！', btn: '去查看', redirect: 10},
                {text: '无权限查看！', btn: ''}
            ];
            // 0可查看，1未登录，2需升级会员机构，3需升级医美会员机构，4需要抵扣采美豆，5无权限查看
            return statusText[this.permission];
        }
    },
    methods: {
        // 图片点击事件
        handleShowImage: function () {
            if (this.checkPermission() !== 0) return;
        },
        //初始化预览图片配置
        initPreviewImage: function () {
            var imageGroup = {};
            var imageEls = document.querySelectorAll('.cm-images');
            imageEls.forEach(function (imageEl, index) {
                imageGroup['cm-images-' + index] = new Viewer(imageEl);
            });
            this.imageGroup = imageGroup;
        },
        //显示视频播放窗口
        handleShowPlayer: function (url) {
            if (this.checkPermission() !== 0) return;
            //暂停上一个正在播放的播放器
            this.currentVideoUrl = url;
            this.showVideoDialog = true;
        },
        //隐藏视频播放窗口
        handleClosePlayer: function () {
            this.$refs.videoRef.pause();
            this.currentVideoUrl = '';
            this.showVideoDialog = false;
        },
        //播放视频
        handlePlayer: function () {
            var _self = this;
            var video = this.$refs.videoRef;
            video.addEventListener('pause', function () {
                _self.isPlayer = false
            });
            video.addEventListener('ended', function () {
                _self.isPlayer = false
            });
            video.addEventListener('error', function () {
                _self.isPlayer = false
            });
            video.addEventListener('play', function () {
                _self.isPlayer = true
            });
            if (!_self.isPlayer) video.play();
        },
        //预览office文件 word ppt pdf
        handlePreviewOffice: function (file) {
            if (this.checkPermission() !== 0) return;
            var index = file.fileName.lastIndexOf('.');
            var suffix = file.fileName.substring(index);
            if (suffix === '.doc' || suffix === '.ppt') {
                // 如果是 doc 或 ppt 直接打开链接预览
                window.open(file.fileUrl, '_blank');
            } else if (suffix === '.pdf') {
                // 如果是 pdf 需要跳转到预览页面并设置type为1，src为pdf预览链接
                if (isPC) {
                    window.open(file.fileUrl, '_blank');
                } else {
                    var url = '/document/pdfdetails.html?type=1&src=' + file.fileUrl;
                    window.open(url, '_blank');
                }
            } else {
                CAIMEI.Popup({
                    content: suffix + '类型文件暂时无法预览',
                    confitmBtnText: '确定',
                    cancelBtnText: '取消'
                }, function () {
                }, function () {
                });
            }
        },
        /*
        * 下一步操作 链接跳转 支付支付采美豆
        * redirect:
        *   链接： 链接跳转
        *   10:   支付采美豆
        * */
        handleClickToPage: function (redirect) {
            var _self = this;
            if (typeof redirect == "string") {
                // 跳转链接
                return window.open(redirect, '_blank');
            }
            if (redirect === 10) {
                // 调用接口
                CAIMEI.Popup({
                    content: '确认使用采美豆',
                    confitmBtnText: '确定',
                    cancelBtnText: '取消'
                }, function () {
                    _self.SearchArchiveByBeans()
                }, function () {
                });
            }
        },
        //用户权限配置 操作前拦截：预览图片，播放视频，预览文件的拦截
        checkPermission: function () {
            //permission:查看权限:0可查看，1未登录，2需升级会员机构，3需升级医美会员机构，4需要抵扣采美豆，5无权限查看
            var _self = this;
            // 如果 TipStatus 返回false 就放行
            if (!_self.TipStatus) return 0;
            CAIMEI.Popup({
                content: _self.TipStatus.text,
                confitmBtnText: _self.TipStatus.btn,
                cancelBtnText: '取消'
            }, function () {
                // 确认 执行 下一步  链接跳转 支付支付采美豆
                _self.handleClickToPage(_self.TipStatus.redirect);
            }, function () {
            });
            return -1;
        },
        //采美豆抵扣查看资料
        SearchArchiveByBeans: function () {
            BeautyArchiveApi.SearchArchiveByBeans({
                userId: GLOBAL_USER_ID,
                archiveId: this.archiveId
            }, function (res) {
                if (res.code) return CAIMEI.dialog(res.msg);
                // 支付采美豆成功，刷新页面
                CAIMEI.dialog(res.msg, true, function () {
                        window.location.reload();
                    }
                );
            });
        },
        // 对图片列表格式化处理
        formatImage: function (list) {
            var resultList = [];
            for (var i = 0; i < list.length; i++) {
                var imageUrl = list[i];
                var index = imageUrl.indexOf('?');
                var size = imageUrl.substring(index + 1).replace(/\&|\=/g, '-').split('-');
                var width = parseInt(size[1]);
                var height = parseInt(size[3]);
                var style = '';
                if (list.length > 1) {
                    if (width >= height) {
                        style = 'height:100%;width:auto;max-width:unset;';
                    } else {
                        style = 'width:100%;height: auto;max-width:unset;';
                    }
                }
                if (list.length === 1) {
                    if (width >= height) {
                        style = 'max-width:800px;height:auto';
                    } else {
                        style = 'max-height:800px;width:auto';
                    }
                }
                resultList.push({
                    imageUrl: imageUrl,
                    style: style
                })
            }
            return resultList;
        },
        //获取资料列表
        getProdcutArchiveDetails: function () {
            const _self = this;
            _self.isRequest = true;
            if (this.archiveId === 0) return;
            BeautyArchiveApi.GetProdcutArchiveDetails({
                userId: GLOBAL_USER_ID,
                archiveId: this.archiveId
            }, function (res) {
                if (res.code !== 0) return false;
                _self.imageArchiveList = res.data.imageArchiveList;
                _self.videoArchiveList = res.data.videoArchiveList;
                _self.fileArchiveList = res.data.fileArchiveList;
                _self.permission = res.data.permission;
                _self.archiveProductInfo.productImage = res.data.productImage;
                _self.archiveProductInfo.productName = res.data.productName;
                _self.archiveProductInfo.productType = res.data.productType;
                _self.archiveProductInfo.shopName = res.data.shopName;
                _self.isRequest = false;
                // 只有当前用户权限为0时初始化图片预览
                if (_self.permission === 0) {
                    setTimeout(function () {
                        _self.initPreviewImage()
                    })
                }
            })
        }
    }
};