outsource/WorkCamera
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

123

Browse Source
This commit is contained in:
zpc 2025-12-28 19:19:32 +08:00
parent c640b911b1
commit e205e63ff0
1 changed files with 132 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

175
uniapp/WorkCameraf/pages/index/index.vue
View File

@ -35,17 +35,18 @@
<view class="container">
<view style="height: 80rpx"></view>
<!-- 图片预览区域 -->
<!-- 图片列表区域 -->
<view class="preview-box">
<text class="preview-title">图片预览 ({{ imageList.length }}/{{ MAX_IMAGES }})</text>
<text class="preview-title">图片列表 ({{ imageList.length }}/{{ MAX_IMAGES }})</text>
<!-- 多图预览列表 -->
<view class="multi-preview-container" v-if="imageList.length > 0">
<view
class="preview-item"
:class="{ 'preview-item-selected': currentImageIndex === index }"
v-for="(img, index) in imageList"
:key="index"
@click="handlePreviewImage(index)"
@click="handleSelectImage(index)"
>
<image :src="img.watermark" mode="aspectFill" class="preview-thumb"></image>
<view class="delete-btn" @click.stop="removeImage(index)">
@ -61,12 +62,16 @@
@click="handleAddMorePhoto"
>
<text class="add-icon">+</text>
<text class="add-text">继续拍摄</text>
<text class="add-text">添加</text>
</view>
</view>
</view>
<!-- 单图预览（兼容模式，显示当前选中的图片） -->
<view class="preview-img" v-if="imageSrc">
<!-- 当前图片预览区域 -->
<view class="current-preview-box" v-if="imageSrc">
<text class="preview-title">当前图片预览</text>
<!-- 单图预览（显示当前选中的图片） -->
<view class="preview-img">
<image
:src="imageSrc"
@click="handlePreviewCurrentImage"
@ -160,28 +165,35 @@
<!-- 底部操作按钮 -->
<view class="footer">
<button type="primary" class="btn-cancel" @click="handleRetakePhoto">
重拍
</button>
<button type="primary" class="btn-cancel" @click="handleRetakeCancel">
清空
</button>
<button
type="primary"
class="btn-save"
@click="handleSaveImage"
:disabled="isSubmitting"
>
保存图片
</button>
<button
type="primary"
class="btn-submit"
@click="handleSaveAndSubmit"
:disabled="isSubmitting"
>
提交数据
</button>
<view class="footer-row">
<button type="primary" class="btn-action btn-cancel" @click="handleRetakePhoto">
重新开始拍摄
</button>
<button type="primary" class="btn-action btn-continue" @click="handleAddMorePhoto">
继续拍照
</button>
</view>
<view class="footer-row">
<button type="primary" class="btn-action btn-delete" @click="handleDeleteCurrentImage">
删除图片
</button>
<button
type="primary"
class="btn-action btn-save"
@click="handleSaveImage"
:disabled="isSubmitting"
>
保存图片
</button>
<button
type="primary"
class="btn-action btn-submit"
@click="handleSaveAndSubmit"
:disabled="isSubmitting"
>
提交数据
</button>
</view>
</view>
</view>
</uni-popup>
@ -234,6 +246,7 @@ const originalImageSrc = ref("");
// 多图支持
const imageList = ref([]); // 存储多张图片 [{original, watermark, sizeInfo}]
const MAX_IMAGES = 15; // 最大图片数量
const currentImageIndex = ref(0); // 当前选中的图片索引
const imageSizeInfo = ref({
original: {
width: 0,
@ -374,23 +387,56 @@ const addImageToList = async (imgPath) => {
});
};
// 删除图片
// 删除图片（带二次确认弹窗）
const removeImage = (index) => {
if (imageList.value.length > index) {
imageList.value.splice(index, 1);
// 更新当前显示的图片
if (imageList.value.length > 0) {
const newIndex = Math.min(index, imageList.value.length - 1);
imageSrc.value = imageList.value[newIndex].watermark;
originalImageSrc.value = imageList.value[newIndex].original;
} else {
imageSrc.value = "";
originalImageSrc.value = "";
uni.showModal({
title: '提示',
content: '确定要删除该图片吗？',
confirmText: '确定',
cancelText: '取消',
success: (res) => {
if (res.confirm) {
// 用户点击确定，执行删除
if (imageList.value.length > index) {
imageList.value.splice(index, 1);
// 更新当前显示的图片
if (imageList.value.length > 0) {
const newIndex = Math.min(index, imageList.value.length - 1);
currentImageIndex.value = newIndex;
imageSrc.value = imageList.value[newIndex].watermark;
originalImageSrc.value = imageList.value[newIndex].original;
} else {
currentImageIndex.value = 0;
imageSrc.value = "";
originalImageSrc.value = "";
}
}
}
// 用户点击取消，关闭弹窗，不做任何操作
}
}
});
};
// 预览指定索引的图片
// 删除当前选中的图片（底部按钮调用）
const handleDeleteCurrentImage = () => {
if (imageList.value.length === 0) {
uni.showToast({
title: '没有可删除的图片',
icon: 'none'
});
return;
}
removeImage(currentImageIndex.value);
};
// 选中指定索引的图片（点击缩略图）
const handleSelectImage = (index) => {
currentImageIndex.value = index;
imageSrc.value = imageList.value[index].watermark;
originalImageSrc.value = imageList.value[index].original;
};
// 预览指定索引的图片（长按或双击可用）
const handlePreviewImage = (index) => {
const urls = imageList.value.map((img) => img.watermark);
uni.previewImage({
@ -898,6 +944,15 @@ onLoad(async () => {
padding: 20rpx;
margin-bottom: 20rpx;
text-align: center;
border-bottom: 1rpx solid #eee;
}
/* 当前图片预览区域 */
.current-preview-box {
background: #fff;
padding: 20rpx;
margin-bottom: 20rpx;
text-align: center;
}
.preview-title {
@ -924,6 +979,14 @@ onLoad(async () => {
border-radius: 8rpx;
overflow: hidden;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
border: 4rpx solid transparent;
box-sizing: border-box;
}
/* 选中状态 */
.preview-item-selected {
border: 4rpx solid #007aff;
box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.4);
}
.preview-thumb {
@ -1055,8 +1118,23 @@ onLoad(async () => {
.footer {
display: flex;
justify-content: space-between;
flex-direction: column;
gap: 20rpx;
margin-top: 40rpx;
padding-bottom: 40rpx;
}
.footer-row {
display: flex;
justify-content: space-between;
gap: 16rpx;
}
.btn-action {
flex: 1;
font-size: 26rpx;
padding: 16rpx 0;
margin: 0;
}
.btn-cancel {
@ -1064,6 +1142,16 @@ onLoad(async () => {
color: #fff;
}
.btn-continue {
background: #17a2b8;
color: #fff;
}
.btn-delete {
background: #dc3545;
color: #fff;
}
.btn-save {
background: #28a745;
color: #fff;
@ -1075,7 +1163,8 @@ onLoad(async () => {
}
.btn-save:disabled,
.btn-submit:disabled {
.btn-submit:disabled,
.btn-action:disabled {
background: #ccc !important;
color: #999 !important;
opacity: 0.6;