<template>
|
<view class="page-container">
|
<!-- 页面头部 -->
|
<view class="page-header">
|
<view class="header-title">检验单图片</view>
|
<view class="header-subtitle">点击可预览图片，最多上传9张</view>
|
</view>
|
|
<!-- 图片上传区域 -->
|
<view class="image-upload-container">
|
<view class="upload-header">
|
<view class="upload-title">已上传图片</view>
|
<view class="upload-count">{{ qsImage.length }}/{{ countIndex + 1 }}</view>
|
</view>
|
|
<view class="image-grid">
|
<!-- 已上传图片 -->
|
<view v-for="(image, index) in qsImage" :key="index" class="image-item">
|
<view class="image-wrapper">
|
<image
|
:src="image.img"
|
:data-src="image.img"
|
@tap="previewImage(index)"
|
class="uploaded-image"
|
></image>
|
<view class="remove-button" @click="removeImage(index, image.id)">
|
<image src="/static/plus.png" class="remove-icon"></image>
|
</view>
|
</view>
|
</view>
|
|
<!-- 上传按钮 -->
|
<view
|
class="add-button"
|
@tap="chooseImage"
|
:class="{ 'disabled': qsImage.length >= 9 }"
|
>
|
<image src="/static/plus.png" class="add-icon"></image>
|
<view class="add-text">添加图片</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 上传按钮 -->
|
<view class="action-button">
|
<button
|
type="primary"
|
@click="save"
|
class="save-button"
|
:disabled="qsImage.length === 0"
|
>
|
上传图片
|
</button>
|
</view>
|
</view>
|
</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) {
|
let params = options;
|
if (params["id"]) {
|
this.fid = params["id"];
|
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张图片",
|
icon: "none"
|
});
|
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 = 2;
|
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,
|
indicator: 'default',
|
});
|
},
|
init() {
|
this.$post({
|
url: "/Base/getByFid",
|
data: {
|
fid: this.fid,
|
qsType: 2
|
}
|
}).then(res => {
|
let tableData = res.data.tbBillList;
|
this.qsImage = tableData;
|
this.qsImage.forEach(s => {
|
s.img = 'data:image/png;base64,' + s.base64Date;
|
});
|
});
|
},
|
save() {
|
if (this.qsImage.length === 0) {
|
uni.showToast({
|
title: '请先选择图片',
|
icon: 'none'
|
});
|
return;
|
}
|
|
this.$post({
|
url: "/Base/saveImage",
|
data: {
|
entity: this.qsImage
|
}
|
}).then(res => {
|
this.init();
|
this.$showMessage("保存成功");
|
});
|
}
|
}
|
}
|
</script>
|
|
<style>
|
/* 基础样式变量 */
|
:root {
|
--primary-color: #4080FF;
|
--secondary-color: #FF7D00;
|
--bg-color: #F5F7FA;
|
--card-bg: #FFFFFF;
|
--border-color: #E5E6EB;
|
--text-primary: #333333;
|
--text-secondary: #666666;
|
--text-hint: #999999;
|
--success-color: #00B42A;
|
--danger-color: #F53F3F;
|
--spacing-sm: 10rpx;
|
--spacing-md: 20rpx;
|
--spacing-lg: 30rpx;
|
--radius-sm: 8rpx;
|
--radius-md: 12rpx;
|
--radius-lg: 16rpx;
|
}
|
|
/* 页面整体样式 */
|
.page-container {
|
padding: var(--spacing-lg);
|
background-color: var(--bg-color);
|
min-height: 100vh;
|
}
|
|
/* 页面头部 */
|
.page-header {
|
margin-bottom: var(--spacing-lg);
|
text-align: center;
|
}
|
|
.header-title {
|
font-size: 32rpx;
|
font-weight: 500;
|
color: var(--text-primary);
|
margin-bottom: var(--spacing-sm);
|
}
|
|
.header-subtitle {
|
font-size: 24rpx;
|
color: var(--text-hint);
|
}
|
|
/* 图片上传容器 */
|
.image-upload-container {
|
background-color: var(--card-bg);
|
border-radius: var(--radius-md);
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
padding: var(--spacing-md);
|
margin-bottom: var(--spacing-lg);
|
}
|
|
.upload-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: var(--spacing-md);
|
}
|
|
.upload-title {
|
font-size: 26rpx;
|
font-weight: 500;
|
color: var(--text-primary);
|
}
|
|
.upload-count {
|
font-size: 24rpx;
|
color: var(--text-hint);
|
}
|
|
/* 图片网格布局 */
|
.image-grid {
|
display: grid;
|
grid-template-columns: repeat(3, 1fr);
|
gap: var(--spacing-md);
|
}
|
|
.image-item {
|
position: relative;
|
aspect-ratio: 1/1;
|
}
|
|
.image-wrapper {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
overflow: hidden;
|
border-radius: var(--radius-md);
|
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
|
}
|
|
.uploaded-image {
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
}
|
|
/* 删除按钮 */
|
.remove-button {
|
position: absolute;
|
top: -8rpx;
|
right: -8rpx;
|
width: 32rpx;
|
height: 32rpx;
|
background-color: var(--danger-color);
|
border-radius: 50%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
|
z-index: 10;
|
}
|
|
.remove-icon {
|
width: 16rpx;
|
height: 16rpx;
|
transform: rotate(45deg);
|
filter: brightness(0) invert(1);
|
}
|
|
/* 添加按钮 */
|
.add-button {
|
width: 100%;
|
height: 100%;
|
background-color: #F5F7FA;
|
border: 2rpx dashed #D9D9D9;
|
border-radius: var(--radius-md);
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
cursor: pointer;
|
transition: all 0.3s;
|
}
|
|
.add-button:hover {
|
background-color: #E6F0FF;
|
border-color: var(--primary-color);
|
}
|
|
.add-button.disabled {
|
opacity: 0.5;
|
cursor: not-allowed;
|
}
|
|
.add-icon {
|
width: 40rpx;
|
height: 40rpx;
|
margin-bottom: var(--spacing-sm);
|
opacity: 0.5;
|
}
|
|
.add-text {
|
font-size: 22rpx;
|
color: var(--text-hint);
|
}
|
|
/* 操作按钮 */
|
.action-button {
|
padding: var(--spacing-lg) 0;
|
}
|
|
.save-button {
|
width: 100%;
|
height: 80rpx;
|
line-height: 80rpx;
|
background-color: var(--primary-color);
|
color: white;
|
border-radius: var(--radius-md);
|
font-size: 28rpx;
|
transition: all 0.3s;
|
}
|
|
.save-button:active {
|
opacity: 0.8;
|
transform: scale(0.99);
|
}
|
|
.save-button:disabled {
|
background-color: #E5E6EB;
|
color: #999999;
|
cursor: not-allowed;
|
}
|
|
/* 响应式设计 */
|
@media (max-width: 768px) {
|
.page-container {
|
padding: var(--spacing-md);
|
}
|
|
.image-grid {
|
grid-template-columns: repeat(3, 1fr);
|
gap: var(--spacing-sm);
|
}
|
|
.header-title {
|
font-size: 28rpx;
|
}
|
|
.header-subtitle {
|
font-size: 22rpx;
|
}
|
|
.upload-title {
|
font-size: 24rpx;
|
}
|
|
.upload-count {
|
font-size: 22rpx;
|
}
|
|
.add-text {
|
font-size: 20rpx;
|
}
|
|
.save-button {
|
height: 70rpx;
|
line-height: 70rpx;
|
font-size: 26rpx;
|
}
|
}
|
</style>
|
