QTApp_800/pages/work/record/camera-scan-code.uvue

<template>
  <view style="flex:1">
	<!--
    <camera style="width: 100%; height: 300px;" :resolution="'high'" :mode="'scanCode'" @scancode="handleScanCode">
    </camera> -->
	<swiper class="swiper-box my-swiper" :current="swiperDotIndex" :indicator-dots="true" >
	  <swiper-item v-for="item in data"  >
	    <view class="swiper-item" @tap="previewSingleImage(item.image)">
	      <image class="my-image" :src="item.image" mode="aspectFill"   />
	    </view>
	  </swiper-item>
	</swiper>
	    
    <view class="camera-scan-code-back-wrap">
      <button class="btn block bg-blue lg round" @click="chooseImage">
      	浏览相册
      </button>
    </view>
			
	  <view class="camera-scan-code-back-wrap">
		  <button class="btn block bg-blue lg round" @click="saveImage">
			 保存图片
		  </button>
	  </view>
    	  
	  <view class="camera-scan-code-back-wrap">
	    <button type="default" class="btn bg-blue round" @click="navigateBack">返回拍照</button>
	  </view>
    
  </view>
</template>

<script>
  type CameraScanCodeResult = {
    type : string | null;
    result : string | null;
  }
  type ImageItem={
  	 image:string,
	 name:string
  }
  export default {
    data() {
      return {
        result: null as CameraScanCodeResult | null,
		swiperDotIndex: 0 as number,
		data: [{
		    image: '/static/images/banner/banner01.png',
			name: 'banner01.png'
		  },
		] as ImageItem[] 	
      }
    },
	onLoad(options) {
		let path = options?.['path'] ?? ''
		console.log(path)
		if(path!=''){
			this.data = []
			this.data.push({image:path, name:''})
		}
	},
    methods: {
      navigateBack() {
        uni.navigateBack()
      },
	  chooseImage() {
	  	uni.chooseImage({
	  		success: (res) => {
	  			//this.data = res.tempFilePaths; // 获取选中的图片路径
				this.data = []
				for(let i=0; i<res.tempFilePaths.length; i++){
					this.data.push({image: res.tempFilePaths[i], name:''})
				}
	  		},
	  		fail: (err) => {
	  			console.error('选择图片失败', err);
	  		}
	  	});
	  },
	  saveImage() {
		 uni.chooseImage({
		     count: 1, // 默认9
		     sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图
		     sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机
		     success: (chooseImageRes) => {
		       const tempFilePaths = chooseImageRes.tempFilePaths; // 临时文件路径
		       const tempFiles = chooseImageRes.tempFiles; // 临时文件信息
		       
			   //保存图片信息到数据库
		       
		     }
		   });
	  },
	  previewSingleImage(imageUrl:string) {		 
	    uni.previewImage({
	      urls: [imageUrl], // 需要预览的图片链接列表
	      current: 0, // 当前显示图片的索引
	      indicator: 'number', // 图片指示器样式
	      loop: false // 是否可循环预览
	    });
	  },  	
      handleScanCode(ev : UniCameraScanCodeEvent) {
        const deatil = ev.detail;
        this.result = {
          type: deatil.type,
          result: deatil.result
        } as CameraScanCodeResult
      }
    }
  }
</script>

<style>
  .camera-scan-code-back-wrap {
    display: flex;
    justify-content: center;
    align-items: center;	
  }
  .camera-scan-code-table {
    background-color: white;
    margin-top: 20rpx;
  }
  .camera-scan-code-table-pair {
    height: 60rpx;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .camera-scan-code-table-pair-label {
    flex-grow: 1;
    margin-left: 15px;

  }
  .camera-scan-code-table-pair-value{
    flex-grow: 2;

  }
  .camera-scan-code-table-top-line {
    border-top: 1px solid #eee;
  }
  
  .swiper {
    height: 300rpx;
  }
  
  .swiper-box {
    height: 150px;
  }
  
  .swiper-item {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    height: 300rpx;
    line-height: 300rpx;
  }
  .btn {
	margin-top: 30px;
	height: 45px; 
  }
</style>