From fbeaefee07bd5245a0053d4659ebe6b94b100e21 Mon Sep 17 00:00:00 2001
From: qingyiay <2386314947@qq.com>
Date: 星期五, 08 九月 2023 16:58:51 +0800
Subject: [PATCH] 提交遗漏文件
---
components/kxj-previewImage/kxj-previewImage.vue | 398 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 398 insertions(+), 0 deletions(-)
diff --git a/components/kxj-previewImage/kxj-previewImage.vue b/components/kxj-previewImage/kxj-previewImage.vue
new file mode 100644
index 0000000..12d4f58
--- /dev/null
+++ b/components/kxj-previewImage/kxj-previewImage.vue
@@ -0,0 +1,398 @@
+<template>
+ <view class="previewImage"
+ :style="{ 'background-color': 'rgba(0,0,0,' + opacity + ')' }"
+ v-if="show"
+ @tap="close"
+ @touchmove.stop.prevent>
+ <swiper class="swiper"
+ :current="index"
+ @change="swiperChange"
+ :disable-touch="swiper"
+ :circular="circular">
+ <swiper-item v-for="(img, i) in imgs"
+ :key="'swiper-item-'+i"
+ :id="'swiper-item-'+i">
+ <movable-area class="marea"
+ scale-area>
+ <movable-view :id="'movable-view-'+i"
+ :key="'movable-view-'+i"
+ class="mview"
+ direction="all"
+ :out-of-bounds="false"
+ :inertia="true"
+ damping="90"
+ friction="2"
+ scale="true"
+ scale-min="1"
+ scale-max="4"
+ :scale-value="scale"
+ @scale="onScale"
+ @change="movableChange">
+ <image :id="'image-'+i"
+ :key="'movable-view'+i"
+ class="image"
+ :src="img"
+ :style="{ transform: 'rotateZ(' + deg + 'deg)' }"
+ :data-index="i"
+ :data-src="img"
+ mode="widthFix"
+ @touchmove="handletouchmove"
+ @touchstart="handletouchstart"
+ @touchend="handletouchend" />
+ </movable-view>
+ </movable-area>
+ </swiper-item>
+ </swiper>
+ <view class="page"
+ v-if="imgs.length > 0">
+ <text class="text">{{ index + 1 }} / {{ imgs.length }}</text>
+ </view>
+ <view class="save"
+ v-if="saveBtn"
+ @click.stop.prevent="save"><text class="text">淇濆瓨</text></view>
+ <view class="rotate"
+ v-if="rotateBtn"
+ @click.stop.prevent="rotate"><text class="text">鏃嬭浆</text></view>
+ <view class="desc"
+ v-if="descs.length > 0 && descs.length == imgs.length && descs[index].length > 0">{{ descs[index] }}</view>
+ </view>
+</template>
+
+<script>
+ export default {
+ name: 'ksj-previewImage', //鎻掍欢鍚嶇О
+ props: {
+ imgs: {
+ //鍥剧墖鍒楄〃
+ type: Array,
+ required: true,
+ default: () => {
+ return [];
+ }
+ },
+ descs: {
+ //鎻忚堪鍒楄〃
+ type: Array,
+ required: false,
+ default: () => {
+ return [];
+ }
+ },
+ //閫忔槑搴�,0鍒�1涔嬮棿銆�
+ opacity: {
+ type: Number,
+ default: 0.8
+ },
+ //淇濆瓨鎸夐敭
+ saveBtn: {
+ type: Boolean,
+ default: true
+ },
+ //鏃嬭浆鎸夐敭
+ rotateBtn: {
+ type: Boolean,
+ default: true
+ },
+ //寰幆棰勮
+ circular: {
+ type: Boolean,
+ default: false
+ }
+ },
+ data() {
+ return {
+ swiper: false, //鏄惁绂佺敤
+ show: false, //鏄剧ず鐘舵��
+ index: 0, //褰撳墠椤�
+ deg: 0, //鏃嬭浆瑙掑害
+ time: 0, //瀹氭椂鍣�
+ interval: 1000, //闀挎寜浜嬩欢
+ scale: 1 //缂╂斁姣斾緥
+ };
+ },
+ methods: {
+ //姣斾緥鍙樺寲
+ onScale(e) {
+
+ },
+
+ //闀挎寜浜嬩欢鐩稿叧鍐呭---------寮�濮�-------------------
+ //鎺ヨЕ寮�濮�
+ handletouchstart(e) {
+ var tchs = e.touches.length;
+ if (tchs != 1) {
+ return false;
+ }
+ this.time = setTimeout(() => {
+ this.onLongPress(e);
+ }, this.interval);
+ return false;
+ },
+ //娓呴櫎瀹氭椂鍣�
+ handletouchend() {
+ clearTimeout(this.time);
+ if (this.time != 0) {
+ //澶勭悊鐐瑰嚮鏃堕棿
+ }
+ return false;
+ },
+ //娓呴櫎瀹氭椂鍣�
+ handletouchmove() {
+ clearTimeout(this.time);
+ this.time = 0;
+ },
+ // 澶勭悊闀挎寜浜嬩欢
+ onLongPress(e) {
+ var src = e.currentTarget.dataset.src;
+ var index = e.currentTarget.dataset.index;
+ var data = { src: src, index: index };
+ this.$emit('longPress', data);
+ },
+ //闀挎寜浜嬩欢鐩稿叧鍐呭---------缁撴潫-------------------
+
+ //鍥剧墖鏀瑰彉
+ swiperChange(e) {
+ this.index = e.target.current; //鏇存柊褰撳墠鍥剧墖index
+
+ this.$nextTick(function() {
+ this.scale = 1;
+ })
+
+ //this.deg = 0; //鏃嬭浆瑙掑害
+ //this.swiper=true;
+ },
+
+ //绉诲姩鍙樺寲
+ movableChange(e) {
+ //console.log(e);
+ /* if(this.old.scale <= 1){
+ this.swiper=false;
+ }else if(e.detail.x===0){
+ this.swiper=false;
+ } */
+ },
+
+
+ //淇濆瓨
+ save(e) {
+ var _this = this;
+ var src = this.imgs[this.index];
+ //#ifdef MP-WEIXIN
+ //鎻愬墠鍚戠敤鎴峰彂璧锋巿鏉冭姹�
+ uni.authorize({
+ scope: 'scope.writePhotosAlbum',
+ success() {
+ console.log('kxj-previewImage:鍏佽鍌ㄥ瓨');
+ _this.downloadImg(src);
+ }
+ });
+ //#endif
+
+ //#ifdef APP-PLUS
+ this.downloadImg(src);
+ //#endif
+
+ //#ifdef H5
+ //闈炲悓婧愬浘鐗囧皢鐩存帴鎵撳紑
+ var abtn = document.createElement('a');
+ abtn.href = src;
+ abtn.download = '';
+ abtn.target = '_blank';
+ abtn.click();
+ //#endif
+ },
+
+ //涓嬭浇骞朵繚瀛樻枃浠�
+ downloadImg(src) {
+ //涓嬭浇鍥剧墖鏂囦欢
+ uni.showLoading({
+ title: '澶у浘鎻愬彇涓�'
+ });
+ uni.downloadFile({
+ url: src,
+ success: function(res) {
+ console.log('kxj-previewImage:涓嬭浇鎴愬姛');
+ uni.hideLoading();
+ uni.saveImageToPhotosAlbum({
+ filePath: res.tempFilePath,
+ success: () => {
+ uni.showToast({
+ title: '宸蹭繚瀛樿嚦鐩稿唽',
+ duration: 1000
+ });
+ }
+ });
+ },
+ fail: function() {
+ uni.hideLoading();
+ uni.showToast({
+ title: '鍥剧墖涓嬭浇澶辫触',
+ icon: 'none',
+ duration: 1000
+ });
+ }
+ });
+ },
+
+ //鏃嬭浆
+ rotate(e) {
+ this.deg = this.deg == 270 ? 0 : this.deg + 90;
+ },
+ //鎵撳紑
+ open(e) {
+ if (e === null || e === '') {
+ console.log('kxj-previewImage:鎵撳紑鍙傛暟鏃犳晥');
+ return;
+ }
+
+ if (!isNaN(e)) {
+ if (e >= this.imgs.length) {
+ console.log('kxj-previewImage:鎵撳紑鍙傛暟鏃犳晥');
+ } else {
+ this.index = e;
+ }
+ } else {
+ var index = this.imgs.indexOf(e);
+ if (index === -1) {
+ this.imgs = [e];
+ this.index = 0;
+ console.log('kxj-previewImage:鏈湪鍥剧墖鍦板潃鏁扮粍涓壘鍒颁紶鍏ョ殑鍥剧墖锛屽凡涓轰綘鑷姩鎵撳紑鍗曞紶棰勮妯″紡')
+ } else {
+ this.index = this.imgs.indexOf(e);
+ }
+ }
+ console.log('kxj-previewImage:褰撳墠棰勮鍥剧墖搴忓彿' + this.index);
+ this.show = true;
+ },
+ //鍏抽棴
+ close(e) {
+ this.show = false;
+ this.index = 0; //褰撳墠椤�
+ this.deg = 0; //鏃嬭浆瑙掑害
+ this.time = 0; //瀹氭椂鍣�
+ this.interval = 1000; //闀挎寜浜嬩欢
+ this.scale = 1; //缂╂斁姣斾緥
+ }
+ }
+ };
+</script>
+
+<!--浣跨敤scss,鍙湪鏈粍浠剁敓鏁�-->
+<style lang="scss"
+ scoped>
+ .previewImage {
+ z-index: 999;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: #000000;
+ user-select: none;
+
+ .swiper {
+ width: 100%;
+ height: 100%;
+
+ .marea {
+ height: 100%;
+ width: 100%;
+ position: fixed;
+ overflow: hidden;
+
+ .mview {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: auto;
+ min-height: 100%;
+
+ .image {
+ width: 100%;
+ }
+ }
+ }
+ }
+
+ .page {
+ position: absolute;
+ width: 100%;
+ bottom: 20rpx;
+ text-align: center;
+
+ .text {
+ color: #fff;
+ font-size: 26rpx;
+ background-color: rgba(0, 0, 0, 0.5);
+ padding: 3rpx 16rpx;
+ border-radius: 20rpx;
+ user-select: none;
+ }
+ }
+
+ .save {
+ position: absolute;
+ left: 10rpx;
+ width: 120rpx;
+ height: 56rpx;
+ bottom: 10rpx;
+ text-align: center;
+ padding: 10rpx;
+
+ .text {
+ background-color: rgba(0, 0, 0, 0.5);
+ color: #fff;
+ font-size: 30rpx;
+ border-radius: 20rpx;
+ border: 1rpx solid #f1f1f1;
+ padding: 6rpx 22rpx;
+ user-select: none;
+ }
+
+ .text:active {
+ background-color: rgba(100, 100, 100, 0.5);
+ }
+ }
+
+ .rotate {
+ position: absolute;
+ right: 10rpx;
+ width: 120rpx;
+ height: 56rpx;
+ bottom: 10rpx;
+ text-align: center;
+ padding: 10rpx;
+
+ .text {
+ background-color: rgba(0, 0, 0, 0.5);
+ color: #fff;
+ font-size: 30rpx;
+ border-radius: 20rpx;
+ border: 1rpx solid #f1f1f1;
+ padding: 6rpx 22rpx;
+ user-select: none;
+ }
+
+ .text:active {
+ background-color: rgba(100, 100, 100, 0.5);
+ }
+ }
+
+ .desc {
+ position: absolute;
+ top: 0;
+ width: 100%;
+ padding: 5rpx 10rpx;
+ text-align: center;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ background-color: rgba(0, 0, 0, 0.5);
+ color: #fff;
+ font-size: 28rpx;
+ letter-spacing: 3rpx;
+ user-select: none;
+ }
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.9.1