119 lines
2.8 KiB
Vue
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>
|