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 class="img-name">{{ item.name }}</view>
	    </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-table">
		<view class="camera-scan-code-table-pair">
		     <view class="camera-scan-code-table-pair-label">
		          <text></text>
		        </view>
		        <view class="camera-scan-code-table-pair-value">
					<checkbox-group @change="checkboxChange">
					  <view v-for="(item, index) in data">
						  <checkbox :value="item.name" :checked="true"></checkbox>
						   {{ dyImgName+"-"+(index+1)}}
					  </view>
				    </checkbox-group>
		        </view>
		</view>
    </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 lang="uts">
  type CameraScanCodeResult = {
    type : string | null;
    result : string | null;
  }
  type ImageItem={
  	 image:string,
	 name:string,
	 checked: boolean
  }
  import { getJoinList, JoinRecord, updateData } from '@/api/work';
  export default {
    data() {
      return {
        result: null as CameraScanCodeResult | null,
		swiperDotIndex: 0 as number,
		recordId: 0,
		num:0,
		dyImgName: '',
		data: [{
		    image: '/static/images/banner/banner01.png',
			name: 'banner01.png',
			checked: true,
		  },
		] as ImageItem[] 	
      }
    },
	onLoad(options) { 
		let path = options?.['path'] ?? ''
		let recordId = options?.['recordId'] ?? ''
		let num = options?.['num'] ?? ''
		console.log(path)
		if(path!=''){
			this.data = []
			this.data.push({image:path, name:'', checked:true})
		}
		if(recordId!=''){
			this.recordId = parseInt(recordId)			
			getJoinList('app_media_record as r','app_media_info as i', 'r.*,i.workorder,i.invname', 'r.pid=i.pdid', 'sxid', recordId, null).then((res:UTSJSONObject) => {
				let dataList = res?.['data'] as UTSJSONObject[] ?? Array<UTSJSONObject>()
				if(dataList!=null && dataList.length>0){
					dataList.forEach(item =>{
						if(item!=null){  
						  let record = JSON.parse<JoinRecord>(item.toJSONString());
						  if(record!=null){
						  	this.num = record.num;
							this.dyImgName = record.workorder+record.invname+record.part+record.photoitem+record.partno;
						  }	
						}
					});
				}
			});
		}
		if(num!=''){
			this.num = parseInt(num)
		}
	},
    methods: {
      navigateBack() {
        uni.navigateBack()
      },
	  checkboxChange(){
		  console.log("选择图片名称")
	  },
	  chooseImage() {
	  	uni.chooseImage({
			sourceType: ['album'],
	  		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:'', checked:true})
				}
	  		},
	  		fail: (err) => {
	  			console.error('选择图片失败', err);
	  		}
	  	});
	  },
	  saveImage() {
		 //let data = 'imgname='++',urlpdt='; 
		 let updateImgs = this.data.filter(item=>item.checked == true).map(item=>item.image);
		 let updateNames = this.data.filter(item=>item.checked == true).map(item=>item.name);
		 let updatedData = 'imgname='+ updateNames.join(",") +',urlpdt='+ updateImgs.join(",")
		 updateData('app_media_record',updatedData, 'sxid', this.recordId.toString()).then((res:UTSJSONObject) => {
		 	let dataList = res?.['data'] as UTSJSONObject[] ?? Array<UTSJSONObject>()
		 	if(dataList!=null && dataList.length>0){
		 		console.log(dataList[0])
		 	}
		 });
	  },
	  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: 20px;
  }
  .camera-scan-code-table-pair {
    height: 250px;
    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>