From 1b8ed4768feeb6433cef55ea8e7c4ad7070c151c Mon Sep 17 00:00:00 2001
From: 啊鑫 <t2856754968@163.com>
Date: 星期三, 16 七月 2025 13:42:13 +0800
Subject: [PATCH] OQC检验
---
pages/QC/LLJ/ImageItem.vue | 385 ++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 296 insertions(+), 89 deletions(-)
diff --git a/pages/QC/LLJ/ImageItem.vue b/pages/QC/LLJ/ImageItem.vue
index 944e46a..d6d9449 100644
--- a/pages/QC/LLJ/ImageItem.vue
+++ b/pages/QC/LLJ/ImageItem.vue
@@ -1,39 +1,62 @@
<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'],
@@ -45,6 +68,7 @@
['original'],
['compressed', 'original']
]
+
export default {
data() {
return {
@@ -65,23 +89,19 @@
}
},
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) {
@@ -100,7 +120,8 @@
if (this.qsImage.length >= 9) {
uni.showToast({
position: "bottom",
- title: "宸茬粡鏈�9寮犲浘鐗囦簡锛岃鍒犻櫎閮ㄥ垎鍥剧墖涔嬪悗閲嶆柊閫夋嫨"
+ title: "鏈�澶氬彧鑳戒笂浼�9寮犲浘鐗�",
+ icon: "none"
});
return;
}
@@ -118,23 +139,21 @@
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));
@@ -142,12 +161,13 @@
});
},
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({
@@ -165,6 +185,14 @@
});
},
save() {
+ if (this.qsImage.length === 0) {
+ uni.showToast({
+ title: '璇峰厛閫夋嫨鍥剧墖',
+ icon: 'none'
+ });
+ return;
+ }
+
this.$post({
url: "/Base/saveImage",
data: {
@@ -180,48 +208,227 @@
</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>
\ No newline at end of file
--
Gitblit v1.9.3