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>
				<view>
					<text class="demo-view-label">{{ item?.name ?? ''}}</text>
				</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" v-if="joinRecord.imgname!=''" >
				<view class="camera-scan-code-table-pair-label">
					<text>已存图片(最多能存{{joinRecord.num}}张)</text>
				</view>
				<view class="camera-scan-code-table-pair-value">					
					<text class="txt">{{joinRecord.imgname}}</text>
				</view>
			</view>
			
			<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>
							<view>{{ dyImgName+"-"+(index+1)+".jpg"}}</view>		
						</view>
					</checkbox-group>-->
					<text class="txt">{{ dyImgName+"-"+(imgArrLen + 1)+".jpg"}}</text>
				</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 class="camera-scan-code-back-wrap">
			<button type="default" class="btn bg-blue round" @click="navigateExit">退出拍照</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,
				path: '',
				recordId: 0,
				imgArrLen: 0,
				joinRecord: {
					sxid: 0,
					senum: 0,
					photoitem: "",
					productno: "",
					descb:"",
					part: "",
					date: "",
					partno : "",
					num : 0,
					status : 1,
					urlspl : "",
					imgname : "",
					urlpdt : "",
					pid: 0,
					workorder: "",
					invname: ""
				} as JoinRecord,
				num: 0,
				dyImgName: '',
				data: [{
					image: '/static/images/banner/banner01.png',
					name: 'banner01.png',
					checked: true,
				},
				] as ImageItem[]
			}
		},
		onLoad(options) {
			this.path = options?.['path'] ?? ''
			let recordId = options?.['recordId'] ?? ''
			let num = options?.['num'] ?? ''
			console.log(this.path)
			if (this.path != '') {
				this.data = []
				this.data.push({ image: this.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;
								    this.joinRecord = record
									this.imgArrLen = record.imgname.indexOf(",")>-1? record.imgname.split(",").length : (record.imgname!=''?1:0)
									
								}
							}
						});
					}
				});
			}
			if (num != '') {
				this.num = parseInt(num)
			}
		},
		methods: {
			navigateBack() {
				//uni.navigateBack()
				uni.navigateTo({
					url: `/pages/work/record/Camera?id=${this.recordId}&num=${this.num}`
				})
			},
			navigateExit(){
				uni.navigateTo({
					url: `/pages/work/record/InfoDetail?id=${this.joinRecord.pid}`
				})
			},
			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() {
				//保存图片进入相册文件
				if(this.path==''){
					uni.showToast({
					  title: '没有拍照文件',
					  icon: 'error', 
					  duration: 2000 
					});
					return;
				}
				if(this.imgArrLen == this.joinRecord.num){
					uni.showToast({
					  title: '拍照图片已满',
					  icon: 'error', 
					  duration: 2000 
					});
					return;
				}
								
				/*
				uni.saveImageToPhotosAlbum({
					filePath: this.path,
					success: () => {
						uni.showToast({
							title: "保存成功！",
						});
					},
					fail: () => {
						uni.showToast({
							title: "保存失败",
						});
					},
				}); */


				let updateImgs = ''
				let updateNames = ''
				let updateStatus = ''
				if(this.imgArrLen == 0){
					updateImgs = this.path
				    updateNames = this.dyImgName+"-"+(this.imgArrLen + 1)+".jpg"
				}else{
					updateImgs = this.joinRecord.urlpdt + "," + this.path					
					updateNames = this.joinRecord.imgname + "," + (this.dyImgName+"-"+(this.imgArrLen + 1)+".jpg")				
				}
				
				let updatedData = "imgname='" + updateNames + "',urlpdt='" + updateImgs + "'"
				
				if(this.joinRecord.num === this.imgArrLen + 1 ){				
					updateStatus = "status='3'"
					updatedData = updatedData + "," + updateStatus
				}else if(this.joinRecord.status === 1){
					updateStatus = "status='2'"
					updatedData = updatedData + "," + updateStatus
				}
				console.log(updatedData)
				
				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])
						uni.showToast({
							title: "保存成功！",
						});
						/*
						uni.reLaunch({
						    url: '/pages/record/camera-scan-code?path='+this.path+'&recordId='+this.recordId+'&num='+this.num
						}); */
					}
				});
			},
			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: 150px;
		flex-direction: column;
		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-pair-value .txt {
	  font-size: 14px;
	}

	.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>