|
|
@@ -0,0 +1,189 @@
|
|
|
+<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>
|
zjs_project