<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="image-header">
|
<view class="header-title">
|
<uni-icons color="#3498db" size="20" type="image"></uni-icons>
|
<view class="title-text">图片管理</view>
|
</view>
|
<view class="image-counter">
|
<view class="counter-text">{{ qsImage.length }}/{{ countIndex + 1 }}</view>
|
</view>
|
</view>
|
<view class="description-text">
|
<view>点击图片可预览，点击删除按钮可移除图片</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 :data-src="image.img" :src="image.img"
|
@tap="previewImage(index)"></image>
|
<image class="image-remove" src="/static/plus.png" @click="removeImage(index,image.id)"></image>
|
</view>
|
<image class="uni-uploader__input-box" src="/static/plus.png" @tap="chooseImage"></image>
|
</view>
|
</view>
|
</view>
|
<view class="action-buttons">
|
<button class="save-btn" @click="save">
|
<uni-icons color="#fff" size="16" type="cloud-upload"></uni-icons>
|
保存图片
|
</button>
|
</view>
|
</view>
|
<!-- #ifdef APP -->
|
</scroll-view>
|
<!-- #endif -->
|
</template>
|
|
<script>
|
|
import {pathToBase64} 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 = 1;
|
entity.base64Date = base64.split(',')[1];
|
|
this.qsImage.push(entity);
|
})
|
.catch(error => {
|
console.error(error)
|
})
|
},
|
fail: (err) => {
|
console.log("err: ", JSON.stringify(err));
|
}
|
});
|
},
|
previewImage(index) {
|
// uni.previewImage({
|
// current: index, // 设置当前显示图片的链接
|
// urls: this.qsImage.map(s=>s.img), // 需要预览的图片链接列表
|
// loop: false, // 是否开启图片轮播，默认为 false
|
// indicator: 'default',// 图片指示器类型，可选值为 "default"、"number"、"pointer"，默认为 "default"
|
// });
|
},
|
init() {
|
this.$post({
|
url: "/Base/getByFid",
|
data: {
|
fid: this.fid,
|
qsType: 1
|
}
|
}).then(res => {
|
let tableData = res.data.tbBillList;
|
this.qsImage = tableData;
|
this.qsImage.forEach(s => {
|
s.img = 'data:image/png;base64,' + s.base64Date;
|
});
|
});
|
},
|
save() {
|
this.$post({
|
url: "/Base/saveImage",
|
data: {
|
entity: this.qsImage
|
}
|
}).then(res => {
|
this.init();
|
this.$showMessage("保存成功");
|
});
|
}
|
}
|
}
|
</script>
|
|
<style>
|
/* 头部样式 */
|
.image-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 15px;
|
padding-bottom: 10px;
|
border-bottom: 1px solid #eee;
|
}
|
|
.header-title {
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
}
|
|
.title-text {
|
font-size: 18px;
|
font-weight: 600;
|
color: #2c3e50;
|
}
|
|
.image-counter {
|
background: linear-gradient(135deg, #3498db, #2980b9);
|
color: white;
|
padding: 4px 12px;
|
border-radius: 12px;
|
font-size: 12px;
|
font-weight: bold;
|
}
|
|
.counter-text {
|
color: white;
|
}
|
|
.description-text {
|
color: #7f8c8d;
|
font-size: 14px;
|
margin-bottom: 15px;
|
padding: 8px 12px;
|
background-color: #f8f9fa;
|
border-radius: 4px;
|
border-left: 3px solid #3498db;
|
}
|
|
.list-pd {
|
margin-top: 25px;
|
}
|
|
.uni-uploader__input-box {
|
margin: 5px;
|
border: 2px solid #E8E8E8;
|
border-radius: 8px;
|
overflow: hidden;
|
transition: all 0.3s;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
}
|
|
.uni-uploader__input-box:hover {
|
border-color: #3498db;
|
transform: translateY(-2px);
|
box-shadow: 0 4px 12px rgba(52, 152, 219, 0.2);
|
}
|
|
.image-remove {
|
transform: rotate(45deg);
|
width: 24px;
|
height: 24px;
|
position: absolute;
|
top: -8px;
|
right: -8px;
|
border-radius: 50%;
|
background: linear-gradient(135deg, #e74c3c, #c0392b);
|
box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
|
transition: all 0.2s;
|
z-index: 10;
|
}
|
|
.image-remove:active {
|
transform: rotate(45deg) scale(0.9);
|
}
|
|
.uni-common-mt {
|
background-color: #ffffff;
|
min-height: 100vh;
|
}
|
|
/* 操作按钮样式 */
|
.action-buttons {
|
position: fixed;
|
left: 0;
|
bottom: 0;
|
width: 100%;
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 20%, rgba(255, 255, 255, 1) 100%);
|
padding: 20px 15px 15px;
|
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
|
z-index: 999;
|
}
|
|
.save-btn {
|
width: 100%;
|
background: linear-gradient(135deg, #3498db, #2980b9);
|
color: white;
|
border: none;
|
border-radius: 8px;
|
padding: 12px 20px;
|
font-size: 16px;
|
font-weight: 600;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
gap: 8px;
|
box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
|
transition: all 0.3s;
|
}
|
|
.save-btn:active {
|
transform: translateY(1px);
|
box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
|
}
|
|
.uni-flex {
|
max-height: calc(100vh - 280px);
|
overflow-y: auto;
|
padding-bottom: 20px;
|
}
|
</style>
|
