From efb6960d9a35857d8efa7e40a6e71504b87f5035 Mon Sep 17 00:00:00 2001
From: xwt <2740516069@qq.com>
Date: 星期六, 02 八月 2025 14:51:55 +0800
Subject: [PATCH] 来料检布局修改，查看图片修改
---
pages/QC/LLJ/ImageItem.vue | 529 +++++++++++++++++++++++++++++++++-------------------------
1 files changed, 301 insertions(+), 228 deletions(-)
diff --git a/pages/QC/LLJ/ImageItem.vue b/pages/QC/LLJ/ImageItem.vue
index 48e6605..7554728 100644
--- a/pages/QC/LLJ/ImageItem.vue
+++ b/pages/QC/LLJ/ImageItem.vue
@@ -1,233 +1,306 @@
<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>
+ <!-- #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;
+ }
-<script>
+ // 鏄剧ず鍔犺浇鎻愮ず
+ uni.showLoading({
+ title: '鍔犺浇涓�...'
+ });
-import {pathToBase64, base64ToPath} from '../../../js_sdk/mmmm-image-tools/index'
+ // 濡傛灉鏄痓ase64鏍煎紡锛岄渶瑕佽浆鎹负涓存椂鏂囦欢璺緞
+ if (currentImage.img.startsWith('data:')) {
+ // 杞崲鎵�鏈塨ase64鍥剧墖涓轰复鏃舵枃浠惰矾寰�
+ const convertPromises = this.qsImage.map(item => {
+ if (item.img.startsWith('data:')) {
+ return base64ToPath(item.img);
+ }
+ return Promise.resolve(item.img);
+ });
-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) {
- // 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: 4
- }
- }).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("淇濆瓨鎴愬姛");
- });
- }
+ 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 => {
+ // 鏍规嵁鏂囦欢鎵╁睍鍚嶅垽鏂浘鐗囩被鍨嬶紝榛樿涓簀peg
+ 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>
\ No newline at end of file
+ </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>
\ No newline at end of file
--
Gitblit v1.9.3