h5-webgl-program/src/components/contrastImg/contrastImg.vue

<template src="./contrastImg.html">

</template>
<script>
    export default {
        name: "contrastImg",
        props: {
            leftSrc: {
                type: String,
                default: '',
            },
            rightSrc: {
                type: String,
                default: '',
            },
            cStyle: {
                type: String,
                default: '',
            },
            mode: {
                type: String,
                default: 'aspectFill',
            },
            type: {
                type: String,
                default: '1',
            },
            modelType: {
                type: String,
                default: '1',
            }
        },
        data() {
            return {
                loaded: false,
                loadNum: 1, //尝试加载次数
                thumbLoaded: false,
                newUrl: '',
                // typeCompressString:"imageMogr2/auto-orient/thumbnail/200x200/blur/1x0/quality/75",
                typeString: "imageMogr2/auto-orient/format/webp/blur/1x0/quality/75",
                showSwiper: false, //是否显示切换视图状态,默认不显示
                unit: 1,
                translateX: 0, //原图左右移动距离
                startX: 0,
                lastX: 0, //上一次的距离
                needAni: false, //回弹动画是否需要
                width: window.innerWidth,
            }
        },
        mounted() { //生命周期不要更换,此处逻辑必须是创建时处理
            this.newUrl = this.webpImage(this.rightSrc);
            // var str = "width: 688rpx;height: 340rpx;";
            let startWidth = window.innerWidth;
            var match = this.cStyle.match(/width:\s*(\d+px)/);
            if (match) {
                this.width = parseFloat(match[1])
            } else {
                console.log("未找到匹配的width属性值");
                this.width = startWidth;
            }
            // this.translateX = this.width;
            if (this.type == '2') { //直接进入拉伸状态
                this.translateX = this.width / 2;
                this.showSwiper = true;
            }
        },
        methods: {
            touchstart(e) {
                this.lastX = e.changedTouches[0].clientX;
                this.startX = e.changedTouches[0].clientX;
                // let currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
                // if(currPage && currPage.hasOwnProperty('contrastAutoPlay')){
                //   currPage.contrastAutoPlay = false;
                // }
            },
            touchmove(e) {
                let touchMoveX = e.changedTouches[0].clientX; //滑动变化坐标
                let moveX = (touchMoveX - this.lastX) * this.unit; //相对于上一次偏移的距离-转为rpx单位
                this.translateX = Number(this.translateX) + moveX;
                if (this.translateX < 0) {
                    this.translateX = 0;
                } else if (this.translateX > this.width) {
                    this.translateX = this.width;
                }
                this.lastX = touchMoveX;
            },
            touchend(e) {
                // let touchMoveX = e.changedTouches[0].clientX; //滑动变化坐标
                // if(touchMoveX == this.startX){//释放时的坐标和开始时一致，表示点击行为
                // 	console.warn("***clickHandle***")
                // 	this.$emit('clickHandle');
                // }
                // let currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
                // if(currPage && currPage.hasOwnProperty('contrastAutoPlay')){
                //   currPage.contrastAutoPlay = true;
                // }
            },
            catchTouchMove: function() {
                return false;
            },
            clear(e) {
                // TODO nvue 取消冒泡
                e.stopPropagation()
            },
            clickHandle(e) {
                this.$emit('clickHandle');
                // let leftDistance = 0; // 获取组件距离屏幕左边的距离
                // 获取当前点击的组件信息
                // const query = uni.createSelectorQuery().in(this);
                // query.select('.containView').boundingClientRect(data => {
                //     if (data) {
                //         leftDistance = data.left; // 获取组件距离屏幕左边的距离-单位px
                //         console.log('组件距离屏幕左边的距离：', leftDistance);
                //         console.warn("***clickHandle***",e,this.translateX,leftDistance)
                //         let pointX = e.detail.x - leftDistance;
                //         let position = "left";
                //         if(pointX < (this.translateX/2)){//点击的是左边
                //           position = "left";
                //         }else{//点击的是右边
                //           position = "right"; 
                //         }
                //         this.$emit('clickHandle',{position});
                //     }
                // }).exec();

            },
            compareAction() {
                this.showSwiper = !this.showSwiper;
                if (this.showSwiper) { //显示
                    this.needAni = true;
                    this.$nextTick(() => {
                        this.translateX = this.width / 2;
                    })
                    // 动画结束后，清除动画的class，确保不影响滑动效果
                    setTimeout(() => {
                        this.needAni = false;
                    }, 510);
                } else {
                    this.needAni = true;
                    this.$nextTick(() => {
                        this.translateX = 0;
                    })
                    // 动画结束后，清除动画的class，确保不影响滑动效果
                    setTimeout(() => {
                        this.needAni = false;
                    }, 510);
                }
                this.$emit('compareAction', this.showSwiper)
            },
            // 获取无损压缩图-webp格式
            webpImage(url) {
                let result = url;
                if (result.indexOf('https://elab-marketing-web.oss') != -1) {
                    this.typeString = "x-oss-process=image/auto-orient,1/quality,Q_46/format,jpg";
                } else if (result.indexOf('https://dm.static') != -1) {
                    this.typeString = "imageMogr2/auto-orient/format/webp/blur/1x0/quality/75";
                }
                if (result) {
                    if (this.typeString) {
                        if (result.indexOf('?') > -1) {
                            return result + "&" + this.typeString;
                        } else {
                            return result + "?" + this.typeString;
                        }
                    } else {
                        return result
                    }
                } else {
                    return ""
                }
            },
            //加载失败,重复三次
            errorLoad(e) {
                this.loadNum++;
                if (this.loadNum > 3) {
                    return false;
                }
                console.log(e);
                let random = Math.random();
                this.error = true;
                // this.src = this.src + (this.src.indexOf('?') > -1 ? '&' + random : '?' + random);
                console.warn("***errorLoad***", this.src);
            },
        }
    }
</script>
<style lang="scss" scoped>
    @import "./contrastImg.scss";
</style>