From 9bfb7c8031ddcfbf1a96bc4b5ae0b427f313c20d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E5=B9=B3=E8=89=BA?= <52643018@qq.com>
Date: Thu, 12 Aug 2021 11:54:01 +0800
Subject: [PATCH] =?UTF-8?q?[=E4=BC=98=E5=8C=96]=20lf-image=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=9C=A8=E5=B0=8F=E7=A8=8B=E5=BA=8F=E7=AB=AF=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E5=BC=82=E5=B8=B8=E9=97=AE=E9=A2=98=20[=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E]=20=E9=A2=84=E8=A7=88=E5=9B=BE=E7=89=87=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=8B=93=E5=B1=95=E8=8F=9C=E5=8D=95=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 canteen/components/lf-image/lf-image.vue      |  4 +
 .../lf-previewImage/lf-previewImage.vue       | 82 ++++++++++++++++++-
 canteen/pages/index/index.vue                 |  4 +-
 supplier/components/lf-image/lf-image.vue     |  4 +
 .../lf-previewImage/lf-previewImage.vue       | 51 +++++++++++-
 supplier/pages/index/index.vue                |  4 +-
 6 files changed, 141 insertions(+), 8 deletions(-)

diff --git a/canteen/components/lf-image/lf-image.vue b/canteen/components/lf-image/lf-image.vue
index a51ba57..ed6358f 100644
--- a/canteen/components/lf-image/lf-image.vue
+++ b/canteen/components/lf-image/lf-image.vue
@@ -53,6 +53,10 @@
 </script>
 
 <style lang="scss" scoped="scoped">
+	image{
+		width: 100%;
+		height: 100%;
+	}
 	.loading{
 		position: relative;
 		// background-color: #e5e5e5;
diff --git a/canteen/components/lf-previewImage/lf-previewImage.vue b/canteen/components/lf-previewImage/lf-previewImage.vue
index a72abee..acfe67e 100644
--- a/canteen/components/lf-previewImage/lf-previewImage.vue
+++ b/canteen/components/lf-previewImage/lf-previewImage.vue
@@ -5,6 +5,7 @@
 				'background-color': perspective ? 'rgba(0,0,0,0.5)' : '#000000'}" 
 			:current="swiper_current" :circular="circular"
 			v-if="show_assembly" @click="hideAssembly"
+			@transition="transition"
 			@touchmove.stop.prevent="touchmove" 
 			@change="e => switchItem(e.detail.current)">
 			<swiper-item v-for="(item, index) in images" :key="index"
@@ -12,7 +13,7 @@
 				<!-- 可移动缩放操作的容器 -->
 				<movable-area class="movable-area" :scale-area="true">
 					<movable-view class="movable-view" direction="all" :scale="true" :inertia="true" @scale="scale" :scale-value="scale_values[swiper_current]">
-						<image :src="item" class="swiper-image" mode="aspectFit" @mousewheel.stop="mousewheel"></image>
+						<image :src="item" class="swiper-image" mode="aspectFit" @mousewheel.stop="mousewheel" @longpress="longpress"></image>
 					</movable-view>
 				</movable-area>
 				<!-- 控制器 -->
@@ -40,6 +41,10 @@
 						<view v-for="(item, index) in images" :key="index" class="indicators-icon" :style="swiper_current == index ? 'background-color:'+ themeColor : ''"></view>
 					</view>
 				</view>
+				<!-- 底部菜单弹出层 -->
+				<view class="menu-popup" v-if="menu && show_menu" @click.stop>
+					<button @click="download">保存图片</button>
+				</view>
 			</swiper-item>
 		</swiper>
 	</view>
@@ -75,6 +80,10 @@
 			animation: {
 				type: Boolean, // 是否开启动画
 				default: false
+			},
+			menu: {
+				type: Boolean, // 长按图片时是否显示菜单按钮，H5不支持，传参无效果
+				default: true
 			}
 		},
 		data(){
@@ -86,7 +95,8 @@
 				animationObj: {}, // 动画配置对象
 				animationData: {}, // 动画导出执行对象
 				scale_values: [], // 每张图的缩放比例
-				clientY: 0
+				clientY: 0,
+				show_menu: false
 			}
 		},
 		created(){
@@ -109,6 +119,12 @@
 			touchmove(){
 				return false;
 			},
+			// swiper 位置发生变化
+			transition(){
+				if(this.show_menu){
+					this.show_menu = false;
+				}
+			},
 			// swiper被改变
 			switchItem(current){
 				this.swiper_current = current;
@@ -151,6 +167,10 @@
 			},
 			// 关闭隐藏图片
 			hideAssembly(){
+				if(this.show_menu){
+					this.show_menu = false;
+					return;
+				}
 				if(this.$props.animation){
 					this.animationObj.opacity(0).step();
 					this.animationData = this.animationObj.export();
@@ -160,6 +180,44 @@
 				}else{
 					this.show_assembly = false;
 				}
+			},
+			// 长按事件
+			longpress(event){
+				// #ifndef H5
+				if(this.$props.menu){
+					this.show_menu = true;
+				}
+				// #endif
+			},
+			// 保存图片
+			download(){
+				uni.showLoading({
+					title: '正在保存'
+				})
+				this.show_menu = false;
+				uni.downloadFile({
+					url: this.images[this.swiper_current],
+					success: res => {
+						let tempFilePath = res.tempFilePath;
+						uni.saveFile({
+							tempFilePath,
+							success: result => {
+								uni.showToast({
+									title: '保存成功',
+									icon: 'success'
+								})
+							},
+							fail: err => {
+								uni.showToast({
+									title: '保存失败',
+									icon: 'none'
+								})
+							},
+							complete: () => uni.hideLoading()
+						})
+					},
+					complete: () => uni.hideLoading()
+				})
 			}
 		}
 	}
@@ -230,6 +288,26 @@
 			}
 		}
 	}
+	.menu-popup{
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		height: max-content;
+		width: 100%;
+		background-color: #FFFFFF;
+		z-index: 1004;
+		padding-bottom: constant(safe-area-inset-bottom);
+		padding-bottom: env(safe-area-inset-bottom);
+		button{
+			height: 100rpx;
+			line-height: 100rpx;
+			background-color: transparent;
+			border-bottom: 1rpx solid #e5e5e5;
+			&:last-child{
+				border-bottom: none;
+			}
+		}
+	}
 	// 轻提示框样式
 	/deep/.uni-sample-toast{
 		z-index: 1002;
diff --git a/canteen/pages/index/index.vue b/canteen/pages/index/index.vue
index 7a8255d..44367a5 100644
--- a/canteen/pages/index/index.vue
+++ b/canteen/pages/index/index.vue
@@ -1,7 +1,7 @@
 <template>
 	<view>
 		<view class="lf-row-center lf-flex-column head" v-if="$isRight(canteen)">
-			<lf-image :src="canteen.avatar" errSrc="../../static/images/default_avatar.png"></lf-image>
+			<lf-image class="image" :src="canteen.avatar" errSrc="../../static/images/default_avatar.png"></lf-image>
 			<view class="lf-m-t-20 lf-font-32 lf-font-bold lf-color-black">{{ canteen.name }}</view>
 			<view class="lf-font-28 lf-color-555 lf-m-t-10">{{ canteen.role }}</view>
 		</view>
@@ -99,7 +99,7 @@
 		width: 750rpx;
 		background-color: #FFFFFF;
 
-		image {
+		.image {
 			width: 200rpx;
 			height: 200rpx;
 			border: 2rpx solid #FFFFFF;
diff --git a/supplier/components/lf-image/lf-image.vue b/supplier/components/lf-image/lf-image.vue
index a51ba57..ed6358f 100644
--- a/supplier/components/lf-image/lf-image.vue
+++ b/supplier/components/lf-image/lf-image.vue
@@ -53,6 +53,10 @@
 </script>
 
 <style lang="scss" scoped="scoped">
+	image{
+		width: 100%;
+		height: 100%;
+	}
 	.loading{
 		position: relative;
 		// background-color: #e5e5e5;
diff --git a/supplier/components/lf-previewImage/lf-previewImage.vue b/supplier/components/lf-previewImage/lf-previewImage.vue
index a72abee..95fd933 100644
--- a/supplier/components/lf-previewImage/lf-previewImage.vue
+++ b/supplier/components/lf-previewImage/lf-previewImage.vue
@@ -12,7 +12,7 @@
 				<!-- 可移动缩放操作的容器 -->
 				<movable-area class="movable-area" :scale-area="true">
 					<movable-view class="movable-view" direction="all" :scale="true" :inertia="true" @scale="scale" :scale-value="scale_values[swiper_current]">
-						<image :src="item" class="swiper-image" mode="aspectFit" @mousewheel.stop="mousewheel"></image>
+						<image :src="item" class="swiper-image" mode="aspectFit" @mousewheel.stop="mousewheel" @longpress="longpress"></image>
 					</movable-view>
 				</movable-area>
 				<!-- 控制器 -->
@@ -40,6 +40,10 @@
 						<view v-for="(item, index) in images" :key="index" class="indicators-icon" :style="swiper_current == index ? 'background-color:'+ themeColor : ''"></view>
 					</view>
 				</view>
+				<!-- 底部菜单弹出层 -->
+				<view class="menu-popup" v-if="menu && show_menu" @click.stop>
+					<button @click="download">保存图片</button>
+				</view>
 			</swiper-item>
 		</swiper>
 	</view>
@@ -75,6 +79,10 @@
 			animation: {
 				type: Boolean, // 是否开启动画
 				default: false
+			},
+			menu: {
+				type: Boolean, // 长按图片时是否显示菜单按钮，H5不支持，传参无效果
+				default: true
 			}
 		},
 		data(){
@@ -86,7 +94,8 @@
 				animationObj: {}, // 动画配置对象
 				animationData: {}, // 动画导出执行对象
 				scale_values: [], // 每张图的缩放比例
-				clientY: 0
+				clientY: 0,
+				show_menu: false
 			}
 		},
 		created(){
@@ -160,6 +169,44 @@
 				}else{
 					this.show_assembly = false;
 				}
+			},
+			// 长按事件
+			longpress(event){
+				// #ifndef H5
+				if(this.$props.menu){
+					this.show_menu = true;
+				}
+				// #endif
+			},
+			// 保存图片
+			download(){
+				uni.showLoading({
+					title: '正在保存'
+				})
+				this.show_menu = false;
+				uni.downloadFile({
+					url: this.images[this.swiper_current],
+					success: res => {
+						let tempFilePath = res.tempFilePath;
+						uni.saveFile({
+							tempFilePath,
+							success: result => {
+								uni.showToast({
+									title: '保存成功',
+									icon: 'success'
+								})
+							},
+							fail: err => {
+								uni.showToast({
+									title: '保存失败',
+									icon: 'none'
+								})
+							},
+							complete: () => uni.hideLoading()
+						})
+					},
+					complete: () => uni.hideLoading()
+				})
 			}
 		}
 	}
diff --git a/supplier/pages/index/index.vue b/supplier/pages/index/index.vue
index 549b22e..b4b5f5e 100644
--- a/supplier/pages/index/index.vue
+++ b/supplier/pages/index/index.vue
@@ -1,7 +1,7 @@
 <template>
 	<view>
 		<view class="lf-row-center lf-flex-column head" v-if="$isRight(supplier)">
-			<lf-image :src="supplier.avatar" errSrc="../../static/images/default_avatar.png"></lf-image>
+			<lf-image class="image" :src="supplier.avatar" errSrc="../../static/images/default_avatar.png"></lf-image>
 			<view class="lf-m-t-20 lf-font-32 lf-font-bold lf-color-black">{{ supplier.name }}</view>
 			<view class="lf-font-28 lf-color-555 lf-m-t-10">{{ supplier.role }}</view>
 		</view>
@@ -101,7 +101,7 @@
 		height: 374rpx;
 		width: 750rpx;
 		background-color: #FFFFFF;
-		image{
+		.image{
 			width: 200rpx;
 			height: 200rpx;
 			border: 2rpx solid #FFFFFF;