首检巡检来料检入库检

xwt

22 小时以前 62cb247da5cc1cc097c5afea402aabee05260431

 pages/fileView/imageView.vue

@@ -1,7 +1,18 @@
<template>
  <view class="container">
    <!-- 使用 <image> 组件显示图片 -->
    <image :src="imageUrl" mode="widthFix" style="width: 100%;"></image>
    <!-- 使用 <image> 组件显示图片，添加点击事件 -->
    <image 
      :src="imageUrl" 
      mode="aspectFit" 
      class="preview-image"
      @click="previewImage"
      :style="{ width: '100%', height: '100%' }"
    />
    
    <!-- 放大提示 -->
    <view class="zoom-hint">
      <text class="hint-text">点击图片可放大查看</text>
    </view>
  </view>
</template>

@@ -9,13 +20,44 @@
export default {
  data() {
    return {
      imageUrl: "" ,// 用于存储图片的 URL
      imageUrl: "", // 用于存储图片的 URL
    };
  },
  onLoad(options) {
    // 从页面跳转的参数中获取图片 URL
    if (options.url) {
      this.imageUrl = decodeURIComponent(options.url);
    }
  },
  methods: {
    // 图片放大预览
    previewImage() {
      // 使用uni.previewImage API实现图片放大预览
      uni.previewImage({
        current: this.imageUrl, // 当前显示图片的链接
        urls: [this.imageUrl], // 需要预览的图片链接列表
        loop: false, // 是否开启图片轮播
        indicator: 'default', // 图片指示器类型
        longPressActions: {
          itemList: ['发送给朋友', '保存图片', '收藏'],
          success: function (data) {
            console.log('选中了第' + (data.tapIndex + 1) + '个按钮');
          },
          fail: function (err) {
            console.log(err.errMsg);
          }
        },
        success: () => {
          console.log('图片预览成功');
        },
        fail: (err) => {
          console.error('图片预览失败:', err);
          uni.showToast({
            title: '图片预览失败',
            icon: 'none'
          });
        }
      });
    }
  }
};
@@ -24,8 +66,57 @@
<style scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #000;
  position: relative;
}

.preview-image {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.preview-image:hover {
  transform: scale(1.02);
}

.zoom-hint {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  z-index: 10;
}

.hint-text {
  color: #fff;
  font-size: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .preview-image {
    max-height: 70vh;
  }
  
  .zoom-hint {
    bottom: 10px;
    padding: 6px 12px;
  }
  
  .hint-text {
    font-size: 11px;
  }
}
</style>