<template>
|
<!-- #ifdef APP -->
|
<scroll-view class="page-scroll-view">
|
<!-- #endif -->
|
<view>
|
<view class="uni-common-mt">
|
<view class="uni-list list-pd" style="padding: 15px;">
|
<view class="uni-flex" style="margin-bottom: 10px;">
|
<view class="uni-list-cell-left">点击可预览选好的图片</view>
|
<view style="margin-left: auto;">
|
<text class="click-t">{{ qsImage.length }}/{{ countIndex + 1 }}</text>
|
</view>
|
</view>
|
<view class="uni-flex" style="flex-wrap: wrap;">
|
<view v-for="(image,index) in qsImage" :key="index" class="uni-uploader__input-box"
|
style="position: relative; border: 0;">
|
<image :src="image.img" :data-src="image.img"
|
@tap="previewImage(index)"></image>
|
<image src="/static/plus.png" class="image-remove" @click="removeImage(index,image.id)"></image>
|
</view>
|
<image class="uni-uploader__input-box" @tap="chooseImage" src="/static/plus.png"></image>
|
</view>
|
</view>
|
</view>
|
<view class="plus-button">
|
<button type="primary" class="upImg" @click="save">上传图片</button>
|
</view>
|
</view>
|
<!-- #ifdef APP -->
|
</scroll-view>
|
<!-- #endif -->
|
</template>
|
|
<script>
|
|
import {pathToBase64, base64ToPath} from '../../../js_sdk/mmmm-image-tools/index'
|
|
var sourceTypeArray = [
|
['camera'],
|
['album'],
|
['camera', 'album']
|
]
|
var sizeTypeArray = [
|
['compressed'],
|
['original'],
|
['compressed', 'original']
|
]
|
export default {
|
data() {
|
return {
|
title: 'choose/previewImage',
|
sourceTypeIndex: 2,
|
sourceType: ['拍照', '相册', '拍照或相册'],
|
sizeTypeIndex: 2,
|
sizeType: ['压缩', '原图', '压缩或原图'],
|
countIndex: 8,
|
count: [1, 2, 3, 4, 5, 6, 7, 8, 9],
|
isCrop: false,
|
cropPercent: 80,
|
cropWidth: 100,
|
cropHeight: 100,
|
cropResize: false,
|
qsImage: [],
|
fid: 0,
|
}
|
},
|
onLoad(options) {
|
//options中包含了url附带的参数
|
|
let params = options;
|
|
if (params["id"]) {
|
this.fid = params["id"];
|
//getQaItemXj02
|
this.init();
|
}
|
},
|
onUnload() {
|
this.qsImage = [];
|
this.sourceTypeIndex = 2
|
this.sourceType = ['拍照', '相册', '拍照或相册']
|
this.sizeTypeIndex = 2
|
this.sizeType = ['压缩', '原图', '压缩或原图']
|
this.countIndex = 8
|
},
|
methods: {
|
removeImage(index, id) {
|
this.qsImage.splice(index, 1);
|
if (id) {
|
this.$post({
|
url: "/Base/removeImage",
|
data: {
|
id: id
|
}
|
}).then(res => {
|
});
|
}
|
},
|
chooseImage() {
|
if (this.qsImage.length >= 9) {
|
uni.showToast({
|
position: "bottom",
|
title: "已经有9张图片了，请删除部分图片之后重新选择"
|
});
|
return;
|
}
|
|
uni.chooseImage({
|
sourceType: sourceTypeArray[this.sourceTypeIndex],
|
sizeType: sizeTypeArray[this.sizeTypeIndex],
|
crop: this.isCrop ? {
|
"quality": this.cropPercent,
|
"width": this.cropWidth,
|
"height": this.cropHeight,
|
"resize": this.cropResize
|
} : null,
|
count: this.qsImage.length + this.count[this.countIndex] > 9 ? 9 - this.qsImage.length : this.count[this.countIndex],
|
success: (res) => {
|
let url = res.tempFilePaths[0];
|
pathToBase64(url)
|
.then(base64 => {
|
// 找到最后一个斜杠的位置
|
let lastSlashIndex = url.lastIndexOf("/");
|
// 提取文件名
|
let fileName = url.substring(lastSlashIndex + 1);
|
let entity = {};
|
entity.img = base64;
|
entity.Picturename = fileName;
|
entity.fid = this.fid;
|
entity.qsType = 4;
|
entity.base64Date = base64.split(',')[1];
|
|
this.qsImage.push(entity);
|
})
|
.catch(error => {
|
console.error(error)
|
})
|
},
|
fail: (err) => {
|
console.log("err: ", JSON.stringify(err));
|
}
|
});
|
},
|
previewImage(index) {
|
// 检查当前图片是否存在
|
const currentImage = this.qsImage[index];
|
if (!currentImage || !currentImage.img) {
|
uni.showToast({
|
title: '图片数据异常',
|
icon: 'none'
|
});
|
return;
|
}
|
|
// 显示加载提示
|
uni.showLoading({
|
title: '加载中...'
|
});
|
|
// 如果是base64格式，需要转换为临时文件路径
|
if (currentImage.img.startsWith('data:')) {
|
// 转换所有base64图片为临时文件路径
|
const convertPromises = this.qsImage.map(item => {
|
if (item.img.startsWith('data:')) {
|
return base64ToPath(item.img);
|
}
|
return Promise.resolve(item.img);
|
});
|
|
Promise.all(convertPromises)
|
.then(tempFilePaths => {
|
uni.hideLoading();
|
uni.previewImage({
|
current: tempFilePaths[index],
|
urls: tempFilePaths,
|
loop: false,
|
indicator: 'default',
|
fail: (err) => {
|
console.error('预览失败:', err);
|
uni.showToast({
|
title: '预览失败',
|
icon: 'none'
|
});
|
}
|
});
|
})
|
.catch(error => {
|
uni.hideLoading();
|
console.error('转换失败:', error);
|
uni.showToast({
|
title: '图片转换失败',
|
icon: 'none'
|
});
|
});
|
} else {
|
// 如果不是base64格式，直接预览
|
uni.hideLoading();
|
uni.previewImage({
|
current: index,
|
urls: this.qsImage.map(s => s.img),
|
loop: false,
|
indicator: 'default',
|
fail: (err) => {
|
console.error('预览失败:', err);
|
uni.showToast({
|
title: '预览失败',
|
icon: 'none'
|
});
|
}
|
});
|
}
|
},
|
init() {
|
this.$post({
|
url: "/Base/getByFid",
|
data: {
|
fid: this.fid,
|
qsType: 4
|
}
|
}).then(res => {
|
let tableData = res.data.tbBillList;
|
this.qsImage = tableData;
|
this.qsImage.forEach(s => {
|
// 根据文件扩展名判断图片类型，默认为jpeg
|
let imageType = 'jpeg';
|
if (s.Picturename) {
|
const ext = s.Picturename.toLowerCase().split('.').pop();
|
if (ext === 'png') {
|
imageType = 'png';
|
} else if (ext === 'gif') {
|
imageType = 'gif';
|
} else if (ext === 'webp') {
|
imageType = 'webp';
|
}
|
}
|
s.img = `data:image/${imageType};base64,${s.base64Date}`;
|
});
|
});
|
},
|
save() {
|
this.$post({
|
url: "/Base/saveImage",
|
data: {
|
entity: this.qsImage
|
}
|
}).then(res => {
|
this.init();
|
this.$showMessage("保存成功");
|
});
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.click-t {
|
color: darkgray;
|
}
|
|
.list-pd {
|
margin-top: 25px;
|
}
|
|
.uni-uploader__input-box {
|
margin: 5px;
|
border: 1px solid #D9D9D9;
|
}
|
|
.image-remove {
|
transform: rotate(45deg);
|
width: 25px;
|
height: 25px;
|
position: absolute;
|
top: 0;
|
right: 0;
|
border-radius: 13px;
|
background-color: #FF0000;
|
}
|
|
.uni-common-mt {
|
background-color: #ffffff;
|
/* 红色背景 */
|
}
|
|
.plus-button {
|
position: fixed;
|
left: 0;
|
bottom: 0;
|
width: 100%;
|
background-color: #ffffff; /* 背景颜色 */
|
/* padding: 10px; */
|
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); /* 添加底部阴影效果 */
|
z-index: 999; /* 确保按钮位于顶层 */
|
}
|
|
.uni-flex {
|
max-height: calc(100vh - 240px); /* 屏幕高度减去上传按钮高度 */
|
overflow-y: auto; /* 当内容超出高度时出现垂直滚动条 */
|
}
|
.upImg{
|
|
background-color: #3498db;
|
color: white;
|
|
}
|
</style>
|
