heli-mes/mes-ui/mini-app/src/pages/pgMaster/components/showpicture.vue
2025-07-11 08:11:12 +08:00

119 lines
2.8 KiB
Vue

<template>
<view>
<!-- <image v-for="(item, index) in src" :key="index" :src="item" @click="preview(item)" mode="aspectFill" @error="imageError"></image> -->
<htz-image-upload v-model="src" :max="9" :remove="false" :add="false"></htz-image-upload>
</view>
</template>
<script setup>
import { reactive, ref, toRefs,nextTick,onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { onLoad, onShow } from '@dcloudio/uni-app'
import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'
const title = ref('图片预览');
const src = ref([]);
const route = useRoute();
const picture = ref('');
const previewImage = ref(null);
const imageError = (event) => {
console.error('Image load error:', event.detail.errMsg);
};
const preview = (url) => {
// #ifdef MP-WEIXIN
this.$nextTick(()=>{
previewImage.value.open(url);
})
// #endif
// #ifndef MP-WEIXIN
previewImage.value.open(url);
// #endif
};
const onLongpress = e =>{
console.log('当前长按的图片是' + e);
uni.showActionSheet({
itemList: ['转发给朋友', '保存到手机'],
success: function (res) {
console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
},
fail: function (res) {
console.log(res.errMsg);
}
});
}
onLoad( (options) => {
picture.value = options.picture;
console.log(picture.value)
if (picture.value) {
try {
var fileUrlList = decodeURIComponent(picture.value);
src.value = JSON.parse(fileUrlList);
console.log(src.value)
} catch (error) {
console.error('Error parsing picture data:', error);
}
}
})
// const previewImage = (index) => {
// const urls = src.value.map(item => item.url);
// uni.previewImage({
// current: index,
// urls: urls,
// longPressActions: {
// itemList: ['保存图片'],
// success: (data) => {
// saveImage(urls[data.index]);
// },
// fail: (err) => {
// console.error(err);
// }
// }
// });
// };
const saveImage = (url) => {
uni.downloadFile({
url: url,
success: (res) => {
if (res.statusCode === 200) {
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: () => {
uni.showToast({
title: '图片保存成功',
icon: 'success'
});
},
fail: () => {
uni.showToast({
title: '图片保存失败',
icon: 'none'
});
}
});
}
}
});
};
</script>
<style>
/* ... other styles ... */
.thumbnail-container {
display: flex;
flex-wrap: wrap;
/* Other styles */
}
.thumbnail-wrapper {
margin: 10px;
/* Other styles */
}
.clickable-image {
cursor: pointer;
}
</style>