QTApp_800/pages/work/download/PhotoRecord.uvue

<template>
	<scroll-view class="tag-scroll-container" scroll-x="true">
		<view class="record-card2 flex-row">
			<view class="tag-circle" v-for="(item, index) in initRecords" :key="index" @click="tabsClick(item.senum)"
				:class="{'checked-tag' : item.senum == current}">
				<text class="circle" :class="{
								'bg-green': item.photourlSpl.length > 0,
								'bg-black': item.photourlSpl.length == 0
							  }">{{item.senum}}</text>
			</view>
		</view>
	</scroll-view>

	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
		<view class="record-card" v-for="(item, index) in records" :key="index"
			v-show="current == item.senum as number">
			<view class="header-row">
				<text class="label">序号：</text>
				<text class="value">{{ item.senum }}</text>
				<text class="status">{{ item.imgname.length > 0 ? '已拍照' : '未拍照'}}</text>
			</view>

			<view class="info-row">
				<text class="label">产品码：</text>
				<text class="value">{{ item.prodno }}</text>
			</view>

			<view class="info-row">
				<text class="label">拍照点：</text>
				<text class="value">{{ item.processStep }}</text>
			</view>

			<view class="info-row">
				<text class="label">拍照位置：</text>
				<text class="value">{{ item.photographpoint }}</text>
			</view>

			<view class="info-row">
				<text class="label">描述：</text>
				<text class="value">{{ item.photographdescription }}</text>
			</view>

			<button class="cancel-btn" @click="cancel(item.sxid)">
				拍照
			</button>

			<view class="tag-banner" style="" v-if="item.imgname.length > 0">
				<view class="tag-banner" v-for="(tag,index) in item.imgname" :key="index" >
					<text class="img-banner" v-if="item.imgname.length > 0 && closeTags[index]"
						@click="closeTag(index)">{{tag}}</text>
				</view>

			</view>
			<view class="my-page">
				<swiper class="swiper-box my-swiper" :current="0" :indicator-dots="true" v-if="item.photourlSpl.length>0">
					<swiper-item v-for="(url, index) in item.photourlSpl" :key="index" @tap="preview(uni.env.USER_DATA_PATH+url)">
						<view class="swiper-item ">
							<image class="my-image" :src="uni.env.USER_DATA_PATH+url" mode="aspectFill" />
						</view>
						<view v-if="item.imgname.length>0">
							<text class="demo-view-label">{{ item.imgname?.[index] ?? ''}}</text>
						</view>
					</swiper-item>
				</swiper>

				<swiper class="swiper-box my-swiper mg-top" :current="0" :indicator-dots="true"
					v-if="item.exampleurlSpl.length>0">
					<swiper-item v-for="(url, index) in item.exampleurlSpl" :key="index" @tap="preview(url)">
						<view class="swiper-item ">
							<image class="my-image" :src="url" mode="aspectFill" />
						</view>
					</swiper-item>
				</swiper>

				<view v-if="item.exampleurl">
					<text class="demo-view-label">样张</text>
				</view>
			</view>

		</view>

		<view class="info-row btn-panel">
			<button class="btn btn-first" @click="tabsClick(current-1)" v-if="current > 1">
				前一项
			</button>
			<button class="btn btn-second" @click="tabsClick(current+1)" v-if="current < maxcount">
				下一项
			</button>
		</view>

	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import { getListByOrder, TaskPhoto, recordStatusDict, updateData } from '@/api/work';

	// 存储页面参数
	let photoitem = "";
	let pid = "";
	let senum = "";

	//自定义返回行为，覆盖系统默认返回按钮
	const backPressOptions = reactive({
		from: 'backbutton'
	} as OnBackPressOptions)

	onBackPress((options : OnBackPressOptions) : boolean | null => {
		console.log('onBackPress', options)
		uni.navigateTo({
			url: `/pages/work/download/DownloadDetail?id=${pid}`,
			// 修改动画方向为从左到右退回
			animationType: 'slide-in-left', // 使用从左到右滑出的动画效果
			animationDuration: 300 // 动画持续时间，单位ms
		})
		// 返回true表示拦截默认返回行为
		return true
	})

	//检查项目最大数量
	var maxcount = 5
	var current = ref(1)
	var records = ref<TaskPhoto[]>([]);
	const closeTags = ref<boolean[]>([]);
	var initRecords = [] as TaskPhoto[]

	// 定义数据刷新函数
	const refreshRecords = (index : number) => {
		// 清空现有数据
		initRecords = [];
		closeTags.value = [];
		// #ifdef APP-ANDROID
		getListByOrder('app_task_photo', 'pdid', pid, ' order by sxid desc', null).then((res : UTSJSONObject) => {
			let dataList = res?.['data'] as UTSJSONObject[] ?? Array<UTSJSONObject>()
			if (dataList != null && dataList.length > 0) {
				let index = 1
				dataList.forEach(item => {
					if (item != null) {
						const imgnameStr = item?.['imgname'] as string ?? ''
						const photourlStr = item?.['photourl'] as string ?? ''
						const exampleurlStr = item?.['exampleurl'] as string ?? ''
						const imgnameArr = imgnameStr.indexOf(",") > -1 ? imgnameStr.split(",") : (imgnameStr != '' ? [imgnameStr] : [])
						const photourlArr = photourlStr.indexOf(",") > -1 ? photourlStr.split(",") : (photourlStr != '' ? [photourlStr] : [])
						const exampleurlArr = exampleurlStr.indexOf(",") > -1 ? exampleurlStr.split(",") : (exampleurlStr != '' ? [exampleurlStr] : [])
						item['imgname'] = imgnameArr
						item['photourlSpl'] = photourlArr
						item['exampleurlSpl'] = exampleurlArr
						item['senum'] = index
						let record = JSON.parse<TaskPhoto>(item.toJSONString());
						if (record != null) {
							initRecords.push(record)
							// 为每个图片初始化closeTags值为true，表示默认显示
							if (record.imgname != null && record.imgname.length > 0) {
								for (let i = 0; i < record.imgname.length; i++) {
									closeTags.value.push(true);
								}
							}
							index++
						}
					}
				});
				maxcount = index-1;
			}
			if (initRecords.length > 0) {
				if (index > 0) {
					current.value = index
				} else {
					current.value = initRecords[0].senum
				}
				records.value = initRecords.filter(item => item['senum'] == current.value)
				console.log(records)
			}
		});
		// #endif
	}



	onLoad((options) => {
		photoitem = options?.photoitem ?? ""
		pid = options?.pdid ?? "1"
		senum = options?.senum ?? "1"
		
		// 加载初始数据
		refreshRecords(parseInt(senum));
	});

	const tabsClick = (obj : number) => {
		current.value = obj
		records.value = initRecords.filter(item => item['senum'] == current.value)
	}
	
	const closeTag = (index : number) => {
		let record = records.value[0]

		uni.showModal({
			title: '系统提示',
			content: '确认是否删除图片',
			cancelText: '取消',
			confirmText: '确定',
			success: function (res) {
				if (res.confirm) {
					closeTags.value[index] = false
					let imgname = record.imgname.filter((img, i) => i != index)
					let urlpdt = record.photourlSpl.filter((url, i) => i != index)
					let updatedData = ''
					if (imgname.length != urlpdt.length) {
						uni.showToast({
							title: '图片数据不正确',
							icon: 'error',
							duration: 2000
						});
						return;
					}
					if (imgname.length == 0 && urlpdt.length == 0) {
						updatedData = "imgname='',photourl=''"
					} else if (imgname.length == 1 && urlpdt.length == 1) {
						updatedData = "imgname='" + imgname[0] + "',photourl='" + urlpdt[0] + "'"
					} else {
						updatedData = "imgname='" + imgname.join(",") + "',photourl='" + urlpdt.join(",") + "'"
					}

					updateData('app_task_photo', updatedData, 'sxid', record.sxid.toString()).then((res : UTSJSONObject) => {
						let dataRes = res?.['data'] as boolean ?? false
						if (dataRes) {
							uni.showToast({
								title: "删除成功！",
							});
							// 刷新页面数据
							refreshRecords(record.senum);
						}
					});
				}
			}
		})
	}

	const preview = (imageUrl : string) => {
		uni.previewImage({
			urls: [imageUrl], // 需要预览的图片链接列表
			current: 0, // 当前显示图片的索引
			indicator: 'number', // 图片指示器样式
			loop: false // 是否可循环预览
		});
	}

	const cancel = (id : number) => {
		uni.navigateTo({
			url: `/pages/work/download/TaskCamera?id=${id}&num=${current.value}`
		})
	}
	defineExpose({
		backPressOptions
	})
</script>

<style scoped>
	.container {
		padding: 24rpx;
		background-color: #f0f4f8;
		flex: 1;
		display: flex;
		flex-direction: column;
		font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
		/* #ifndef APP-ANDROID */
		min-height: 100vh;
		/* #endif */
	}

	.banner {
		background: linear-gradient(135deg, #6dd5ed, #2193b0);
		border-radius: 24rpx;
		padding: 40rpx 30rpx;
		margin-bottom: 40rpx;
		box-shadow: 0 8rpx 16rpx rgba(33, 147, 176, 0.3);
	}

	.banner-title {
		color: white;
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
	}

	/* 卡片整体 */
	.record-card {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 24rpx 32rpx;
		box-shadow: 0 8rpx 15rpx rgba(0, 43, 92, 0.1);
		display: flex;
		flex-direction: column;
		margin-bottom: 15rpx;
		margin-top: 10rpx;
	}

	/* 卡片整体 */
	.record-card2 {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 24rpx 32rpx;
		display: flex;
		flex-direction: column;
		margin-bottom: 20rpx;
		margin-top: 20rpx;
	}

	/* 头部：科室 和 状态 */
	.header-row {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.department {
		font-size: 32rpx;
		font-weight: 700;
		color: #004a99;
	}

	.status {
		font-size: 28rpx;
		color: #1890ff;
		padding: 6rpx 18rpx;
		border-radius: 16rpx;
		background-color: #e6f7ff;
	}

	.status-cancelled {
		color: #ff4d4f;
		background-color: #fff1f0;
	}

	/* 信息行 */
	.info-row {
		display: flex;
		flex-direction: row;
		font-size: 28rpx;
		color: #33475b;
		align-items: center;
	}

	.label {
		color: #102a43;
		min-width: 100rpx;
		width: 180rpx;
		line-height: 1.5;
	}

	.value {
	flex: 1;
	word-break: break-all;
	word-wrap: break-word;
}

	.fee {
		color: #fa541c;
		font-weight: 700;
	}

	/* 取消按钮 */
	.cancel-btn {
		align-self: flex-end;
		background-color: #ff4d4f;
		color: #fff;
		border: none;
		border-radius: 32rpx;
		padding: 5rpx 30rpx;
		font-size: 28rpx;
		font-weight: 700;
		margin-top: 20rpx;
	}

	.cancel-btn:hover {
		background-color: #d9363e;
	}

	.cancel-btn:active {
		background-color: #a93232;
	}

	.swiper {
		height: 300rpx;
		margin: 20rpx 0;
	}

	.swiper-box {
		height: 500rpx;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		height: 500rpx;
		line-height: 300rpx;
	}

	.my-page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		/* #ifndef APP-ANDROID */
		min-height: 100%;
		/* #endif */
		height: 100%;
	}

	.flex-row {
		flex-direction: row;
		flex-wrap: nowrap;
		width: auto;
		min-width: 100%;
		/* 确保容器宽度至少为屏幕宽度 */
	}

	.demo-view-label {
		text-align: center;
		color: #102a43;
		line-height: 1.5;
		margin-top: 5rpx;
	}

	.tag-circle {
		width: 60rpx;
		height: 60rpx;
		margin: 0 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
	}

	.circle {
		height: 50rpx;
		width: 50rpx;
		background-color: #004a99;
		text-align: center;
		color: #fff;
		line-height: 50rpx;
		border-radius: 50rpx;
	}

	.checked-tag {
		height: 60rpx;
		width: 60rpx;
		line-height: 60rpx;
		border: 2rpx solid #ffffff;
		box-shadow: 0 0 0 2rpx #007aff;
		position: relative;
		z-index: 10;
	}

	.bg-green {
		background-color: seagreen;
	}

	.bg-yellow {
		background-color: yellow;
	}

	.bg-black {
		background-color: #102a43;
	}

	.bg-red {
		background-color: red;
	}

	.btn-panel {
		position: relative;
		width: 100%;
		height: 90rpx;
		overflow: visible;
	}

	.btn {
		position: absolute;
		height: 70rpx;
		line-height: 70rpx;
		padding: 0 20rpx;
		top: 50%;
		transform: translateY(-50%);
		background-color: #00aaff;
		color: #fff;
		border: 0 none;
		border-radius: 25rpx;
	}

	.btn-first {
		left: 15rpx;
	}

	.btn-second {
		right: 15rpx;
	}

	/* 安卓兼容的滚动容器样式 */
	.tag-scroll-container {
		width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		box-sizing: border-box;
		padding: 10rpx 15rpx;
		white-space: nowrap;
		display: flex;
		flex-direction: row;
	}


	.tag-scroll-container::-webkit-scrollbar-thumb {
		background-color: rgba(0, 0, 0, 0.2) !important;
		border-radius: 3rpx !important;
	}

	.img-banner {
		height: 50rpx;
		width: 100%;
		background-color: #004a99;
		text-align: center;
		color: #fff;
		line-height: 50rpx;
		border-radius: 10rpx;
		margin-left: 2rpx;
		font-size: 12px;
		padding: 0 10rpx;
	}

	.tag-banner {
		flex-direction: column;
		flex-wrap: wrap;
		margin: 4px 0;
		font-size: 12px;
	}

	.mg-top {
		margin-top: 20rpx;
	}
</style>