<template>
|
<!-- #ifdef APP -->
|
<scroll-view class="page-scroll-view">
|
<!-- #endif -->
|
<view class="page-container">
|
<view class="header-info">
|
<view class="header-text">点击可预览选好的图片</view>
|
<view class="header-count">{{ qsImage.length }}/{{ countIndex + 1 }}</view>
|
</view>
|
|
<view class="image-grid">
|
<view v-for="(image, index) in qsImage" :key="index" class="image-card">
|
<view class="image-wrapper">
|
<image :src="image.img" :data-src="image.img" @tap="previewImage(index)" class="preview-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-image-card" @tap="chooseImage">
|
<image src="/static/plus.png" class="add-icon"></image>
|
<text class="add-text">添加图片</text>
|
</view>
|
</view>
|
|
<view class="upload-button-container">
|
<button type="primary" @click="save" class="upload-button">
|
<text class="button-text">上传图片</text>
|
</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) {
|
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张图片了，请删除部分图片之后重新选择"
|
});
|
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,
|
// indicator: '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>
|
/* 基础配色方案 */
|
:root {
|
--primary-color: #165DFF; /* 主色调 - 蓝色 */
|
--success-color: #00B42A; /* 成功色 - 绿色 */
|
--danger-color: #F53F3F; /* 危险色 - 红色 */
|
--text-color: #1D2129; /* 主文本色 */
|
--text-secondary: #4E5969; /* 次要文本色 */
|
--text-light: #86909C; /* 浅色文本 */
|
--bg-color: #F2F3F5; /* 背景色 */
|
--card-bg: #FFFFFF; /* 卡片背景色 */
|
--border-color: #E5E6EB; /* 边框色 */
|
}
|
|
/* 页面整体样式 */
|
.page-container {
|
padding: 20px;
|
background-color: var(--bg-color);
|
min-height: 100vh;
|
}
|
|
/* 头部信息样式 */
|
.header-info {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 20px;
|
padding: 12px 16px;
|
background-color: var(--card-bg);
|
border-radius: 12px;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
}
|
|
.header-text {
|
font-size: 14px;
|
color: var(--text-color);
|
font-weight: 500;
|
}
|
|
.header-count {
|
font-size: 14px;
|
color: var(--text-secondary);
|
}
|
|
/* 图片网格样式 */
|
.image-grid {
|
display: grid;
|
grid-template-columns: repeat(3, 1fr);
|
gap: 12px;
|
}
|
|
/* 图片卡片样式 */
|
.image-card {
|
position: relative;
|
border-radius: 12px;
|
overflow: hidden;
|
aspect-ratio: 1/1;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
transition: transform 0.2s, box-shadow 0.2s;
|
}
|
|
.image-card:hover {
|
transform: translateY(-2px);
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
}
|
|
.image-wrapper {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
}
|
|
.preview-image {
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
}
|
|
/* 删除按钮样式 */
|
.remove-button {
|
position: absolute;
|
top: 8px;
|
right: 8px;
|
width: 24px;
|
height: 24px;
|
background-color: rgba(245, 63, 63, 0.8);
|
border-radius: 50%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
cursor: pointer;
|
transition: background-color 0.2s;
|
}
|
|
.remove-button:hover {
|
background-color: rgba(245, 63, 63, 1);
|
}
|
|
.remove-icon {
|
width: 14px;
|
height: 14px;
|
filter: brightness(0) invert(1);
|
transform: rotate(45deg);
|
}
|
|
/* 添加图片卡片样式 */
|
.add-image-card {
|
border: 2px dashed var(--border-color);
|
border-radius: 12px;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
background-color: rgba(22, 93, 255, 0.05);
|
cursor: pointer;
|
transition: all 0.2s;
|
}
|
|
.add-image-card:hover {
|
border-color: var(--primary-color);
|
background-color: rgba(22, 93, 255, 0.1);
|
}
|
|
.add-icon {
|
width: 36px;
|
height: 36px;
|
margin-bottom: 8px;
|
opacity: 0.6;
|
transition: opacity 0.2s;
|
}
|
|
.add-image-card:hover .add-icon {
|
opacity: 0.8;
|
}
|
|
.add-text {
|
font-size: 12px;
|
color: var(--text-secondary);
|
}
|
|
/* 上传按钮样式 */
|
.upload-button-container {
|
margin-top: 24px;
|
padding: 0 16px 20px;
|
}
|
|
.upload-button {
|
width: 100%;
|
height: 50px;
|
background-color: var(--primary-color);
|
border: none;
|
border-radius: 25px;
|
color: white;
|
font-size: 16px;
|
font-weight: 500;
|
box-shadow: 0 4px 12px rgba(22, 93, 255, 0.2);
|
transition: all 0.2s;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.upload-button:hover {
|
background-color: #0D47A1;
|
box-shadow: 0 6px 16px rgba(22, 93, 255, 0.3);
|
transform: translateY(-1px);
|
}
|
|
.upload-button:active {
|
transform: translateY(1px);
|
box-shadow: 0 2px 8px rgba(22, 93, 255, 0.2);
|
}
|
|
.button-text {
|
display: flex;
|
align-items: center;
|
}
|
|
/* 滚动视图样式 */
|
.page-scroll-view {
|
height: 100vh;
|
}
|
</style>
|
