完成封装图片预览组件

supplier/components/lf-previewImage/lf-previewImage.vue

@@ -0,0 +1,220 @@
+<template>
+	<view>
+		<swiper class="swiper" :animation="animationData"
+			:style="{'background-color': perspective ? 'rgba(0,0,0,0.5)' : '#000000'}" 
+			:current="swiper_current" :circular="circular"
+			v-if="show_assembly" @click="hideAssembly"
+			@touchmove.stop.prevent="touchmove" 
+			@change="e => switchItem(e.detail.current)">
+			<swiper-item v-for="(item, index) in images" :key="index"
+				class="swiper-item">
+				<!-- 可移动缩放操作的容器 -->
+				<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>
+					</movable-view>
+				</movable-area>
+				<!-- 控制器 -->
+				<view class="controls" v-if="controls">
+					<view>
+						<view @click.stop="switchItem(swiper_current - 1)" v-if="swiper_current != 0">
+							<uni-icons type="arrowleft" size="36" color="#fff"></uni-icons>
+						</view>
+						<view v-else></view>
+					</view>
+					<view>
+						<view @click.stop="switchItem(swiper_current + 1)" v-if="swiper_current != images.length - 1">
+							<uni-icons type="arrowright" size="36" color="#fff"></uni-icons>
+						</view>
+						<view v-else></view>
+					</view>
+				</view>
+				<!-- 指示器 -->
+				<view class="indicators" v-if="indicators && images.length > 1">
+					<view class="number" v-if="indicatorType == 'number'">{{ swiper_current + 1 }} / {{ images.length }}</view>
+					<view class="square" v-else-if="indicatorType == 'square'">
+						<view v-for="(item, index) in images" :key="index" class="indicators-icon" :style="swiper_current == index ? 'background-color:'+ themeColor : ''"></view>
+					</view>
+					<view class="dot" v-else-if="indicatorType == 'dot'">
+						<view v-for="(item, index) in images" :key="index" class="indicators-icon" :style="swiper_current == index ? 'background-color:'+ themeColor : ''"></view>
+					</view>
+				</view>
+			</swiper-item>
+		</swiper>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			controls: {
+				type: Boolean, // 是否显示左右箭头控制
+				default: true
+			},
+			indicators: {
+				type: Boolean,
+				default: true // 是否显示指示器
+			},
+			indicatorType: {
+				type: String, // 指示器类型，dot圆点，square方形，number数字
+				default: 'number'
+			},
+			perspective: {
+				type: Boolean, // 是否开启背景透视，遮罩透明可以看见底下其他元素
+				default: true
+			},
+			circular: {
+				type: Boolean, // 是否可以衔接滑动
+				default: false
+			},
+			themeColor: {
+				type: String, // 主题色
+				default: '#1833F2'
+			}
+		},
+		data(){
+			return {
+				swiper_current: 0, // 当前显示的图片下标
+				images: [],
+				show_assembly: false, // 显示预览图片
+				duration: 500, // 动画持续时间
+				animation: {}, // 动画配置对象
+				animationData: {}, // 动画导出执行对象
+				scale_values: [], // 每张图的缩放比例
+				clientY: 0
+			}
+		},
+		created(){
+			// TODO PC端屏蔽遮罩滚动穿透
+			// TODO PC端滚轮放大缩小
+			// TODO 放大缩小百分比显示
+			// TODO 双击时会被关掉
+		},
+		methods: {
+			// 初始化加载动画
+			initAnimation(){
+				let animation = uni.createAnimation({
+					duration: this.duration
+				});
+				this.animation = animation;
+				animation.opacity(0).step();
+				animation.opacity(1).step();
+				this.animationData = animation.export();
+			},
+			// swiper touchmove事件
+			touchmove(){
+				return false;
+			},
+			// swiper被改变
+			switchItem(current){
+				this.swiper_current = current;
+				// this.clientY = 0; // 切换时需要复位
+			},
+			// movable 缩放事件
+			scale(event){
+				let scale = event.detail.scale;
+				this.$msg(scale); // TODO 轻提示层级不够，没有被显示出来
+			},
+			// 鼠标滚动缩放事件，目前会触发浏览器页面滚动事件，暂时先不要这个功能
+			mousewheel(event){
+				return;
+				let scale = this.scale_values[this.swiper_current];
+				if(this.clientY > event.clientY){
+					if(scale < 10){
+						scale += 0.5;
+					}
+				}else{
+					if(scale > 0.5){
+						scale -= 0.5;
+					}
+				}
+				this.clientY = event.clientY;
+				this.scale_values.splice(this.swiper_current, 1, scale);
+			},
+			// 显示图片
+			show(options){
+				this.images = options.images || [];
+				this.swiper_current = options.current || 0;
+				this.scale_values = this.images.map(item => 1);
+				this.show_assembly = true;
+				this.initAnimation();
+			},
+			// 关闭隐藏图片
+			hideAssembly(){
+				this.animation.opacity(0).step();
+				this.animationData = this.animation.export();
+				setTimeout(() => {
+					this.show_assembly = false;
+				}, this.duration);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	.swiper{
+		width: 100vw;
+		height: 100vh;
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 1000;
+		opacity: 0;
+		.swiper-item{
+			position: relative;
+			.movable-area, .movable-view, .swiper-image{
+				width: 100%;
+				height: 100%;
+			}
+			.controls{
+				position: absolute;
+				padding: 0 16rpx;
+				box-sizing: border-box;
+				display: flex;
+				justify-content: space-between;
+				top: 42vh;
+				left: 0;
+				font-size: 40rpx;
+				width: 100%;
+				z-index: 1002;
+			}
+			.indicators{
+				width: 100%;
+				position: absolute;
+				left: 0;
+				bottom: 10vh;
+				z-index: 1002;
+				display: flex;
+				justify-content: center;
+				.number, .square, .dot{
+					width: max-content;
+					height: max-content;
+					background-color: #dfe4ea;
+				}
+				.number{
+					padding: 4rpx 26rpx;
+					border-radius: 40rpx;
+					color: #555555;
+				}
+				.square{
+					border-radius: 40rpx;
+					display: flex;
+					padding: 2rpx 4rpx;
+					view{
+						border-radius: 50%;
+					}
+				}
+				.dot{
+					display: flex;
+					padding: 4rpx 4rpx;
+				}
+				.indicators-icon{
+					width: 20rpx;
+					height: 20rpx;
+					background-color: #bdc5bd;
+					margin: 2rpx;
+				}
+			}
+		}
+	}
+</style>

supplier/components/wyb-table/wyb-table.vue

@@ -748,7 +748,7 @@
 			},
 			scrollToInput: {
 				type: Boolean, // 是否自动滚动到含有input的位置
-				default: true
+				default: false
 			},
 			searchKey: {
 				type: String,

supplier/main.js

@@ -30,6 +30,9 @@ Vue.component('self-line', selfLine);
 // 将步骤条组件注入全局
 import lfStepbar from '@/components/lf-stepbar/lf-stepbar';
 Vue.component('lf-stepbar', lfStepbar);
+// 预览图片组件
+import lfPreviewImage from '@/components/lf-previewImage/lf-previewImage';
+Vue.component('lf-previewimage', lfPreviewImage);
 
 const app = new Vue({
     ...App

supplier/pages/gonghuo/detail.vue

@@ -137,6 +137,8 @@
 				</view>
 			</view>
 		</u-popup>
+		<!-- 预览图片组件 -->
+		<lf-previewimage ref="previewimage" />
 	</view>
 </template>
 
@@ -281,11 +283,10 @@
 			lookImage(current, list){
 				if(this[list].length <= 0) return;
 				this.$u.throttle(() => {
-					uni.previewImage({
-						urls: this[list],
-						current: current,
-						indicator: "default"
-					})
+					this.$refs.previewimage.show({
+						images: this[list],
+						current: current
+					});
 				}, 500);
 			},
 			// 移除图片