| | |
| | | <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 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 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="warn" @click="save">上传图片</button> |
| | | |
| | | <!-- 上传按钮 --> |
| | | <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> |
| | | <!-- #ifdef APP --> |
| | | </scroll-view> |
| | | <!-- #endif --> |
| | | |
| | | <!-- 上传按钮 --> |
| | | <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' |
| | | import { pathToBase64, base64ToPath } from '../../../js_sdk/mmmm-image-tools/index' |
| | | |
| | | var sourceTypeArray = [ |
| | | ['camera'], |
| | |
| | | ['original'], |
| | | ['compressed', 'original'] |
| | | ] |
| | | |
| | | export default { |
| | | data() { |
| | | return { |
| | |
| | | } |
| | | }, |
| | | 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 |
| | | this.sourceTypeIndex = 2; |
| | | this.sourceType = ['拍照', '相册', '拍照或相册']; |
| | | this.sizeTypeIndex = 2; |
| | | this.sizeType = ['压缩', '原图', '压缩或原图']; |
| | | this.countIndex = 8; |
| | | }, |
| | | methods: { |
| | | removeImage(index, id) { |
| | |
| | | if (this.qsImage.length >= 9) { |
| | | uni.showToast({ |
| | | position: "bottom", |
| | | title: "已经有9张图片了,请删除部分图片之后重新选择" |
| | | title: "最多只能上传9张图片", |
| | | icon: "none" |
| | | }); |
| | | return; |
| | | } |
| | |
| | | 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]; |
| | | .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) |
| | | }) |
| | | 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" |
| | | // }); |
| | | // 图片预览功能 |
| | | uni.previewImage({ |
| | | current: index, |
| | | urls: this.qsImage.map(s => s.img), |
| | | loop: false, |
| | | indicator: 'default', |
| | | }); |
| | | }, |
| | | init() { |
| | | this.$post({ |
| | |
| | | }); |
| | | }, |
| | | save() { |
| | | if (this.qsImage.length === 0) { |
| | | uni.showToast({ |
| | | title: '请先选择图片', |
| | | icon: 'none' |
| | | }); |
| | | return; |
| | | } |
| | | |
| | | this.$post({ |
| | | url: "/Base/saveImage", |
| | | data: { |
| | |
| | | </script> |
| | | |
| | | <style> |
| | | .click-t { |
| | | color: darkgray; |
| | | /* 基础样式变量 */ |
| | | :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; |
| | | } |
| | | |
| | | .list-pd { |
| | | margin-top: 25px; |
| | | /* 页面整体样式 */ |
| | | .page-container { |
| | | padding: var(--spacing-lg); |
| | | background-color: var(--bg-color); |
| | | min-height: 100vh; |
| | | } |
| | | |
| | | .uni-uploader__input-box { |
| | | margin: 5px; |
| | | border: 1px solid #D9D9D9; |
| | | /* 页面头部 */ |
| | | .page-header { |
| | | margin-bottom: var(--spacing-lg); |
| | | text-align: center; |
| | | } |
| | | |
| | | .image-remove { |
| | | transform: rotate(45deg); |
| | | width: 25px; |
| | | height: 25px; |
| | | position: absolute; |
| | | top: 0; |
| | | right: 0; |
| | | border-radius: 13px; |
| | | background-color: #FF0000; |
| | | .header-title { |
| | | font-size: 32rpx; |
| | | font-weight: 500; |
| | | color: var(--text-primary); |
| | | margin-bottom: var(--spacing-sm); |
| | | } |
| | | |
| | | .uni-common-mt { |
| | | background-color: #ffffff; |
| | | /* 红色背景 */ |
| | | .header-subtitle { |
| | | font-size: 24rpx; |
| | | color: var(--text-hint); |
| | | } |
| | | |
| | | .plus-button { |
| | | position: fixed; |
| | | left: 0; |
| | | bottom: 0; |
| | | /* 图片上传容器 */ |
| | | .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%; |
| | | background-color: #ffffff; /* 背景颜色 */ |
| | | padding: 10px; |
| | | box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); /* 添加底部阴影效果 */ |
| | | z-index: 999; /* 确保按钮位于顶层 */ |
| | | height: 100%; |
| | | position: relative; |
| | | overflow: hidden; |
| | | border-radius: var(--radius-md); |
| | | box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1); |
| | | } |
| | | |
| | | .uni-flex { |
| | | max-height: calc(100vh - 240px); /* 屏幕高度减去上传按钮高度 */ |
| | | overflow-y: auto; /* 当内容超出高度时出现垂直滚动条 */ |
| | | .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> |