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/SJ/ImageItem.vue | 255 +++++++++++++++++++++++++++++++++++++++------------
1 files changed, 195 insertions(+), 60 deletions(-)
diff --git a/pages/QC/SJ/ImageItem.vue b/pages/QC/SJ/ImageItem.vue
index 3eb8e81..f170415 100644
--- a/pages/QC/SJ/ImageItem.vue
+++ b/pages/QC/SJ/ImageItem.vue
@@ -2,28 +2,32 @@
<!-- #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="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 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 class="add-image-card" @tap="chooseImage">
+ <image src="/static/plus.png" class="add-icon"></image>
+ <text class="add-text">娣诲姞鍥剧墖</text>
+ </view>
</view>
- <view class="plus-button">
- <button type="warn" @click="save">涓婁紶鍥剧墖</button>
+
+ <view class="upload-button-container">
+ <button type="primary" @click="save" class="upload-button">
+ <text class="button-text">涓婁紶鍥剧墖</text>
+ </button>
</view>
</view>
<!-- #ifdef APP -->
@@ -32,8 +36,7 @@
</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 +48,7 @@
['original'],
['compressed', 'original']
]
+
export default {
data() {
return {
@@ -65,13 +69,9 @@
}
},
onLoad(options) {
- //options涓寘鍚簡url闄勫甫鐨勫弬鏁�
-
let params = options;
-
if (params["id"]) {
this.fid = params["id"];
- //getQaItemXj02
this.init();
}
},
@@ -119,9 +119,7 @@
let url = res.tempFilePaths[0];
pathToBase64(url)
.then(base64 => {
- // 鎵惧埌鏈�鍚庝竴涓枩鏉犵殑浣嶇疆
let lastSlashIndex = url.lastIndexOf("/");
- // 鎻愬彇鏂囦欢鍚�
let fileName = url.substring(lastSlashIndex + 1);
let entity = {};
entity.img = base64;
@@ -143,10 +141,10 @@
},
previewImage(index) {
// uni.previewImage({
- // current: index, // 璁剧疆褰撳墠鏄剧ず鍥剧墖鐨勯摼鎺�
- // urls: this.qsImage.map(s=>s.img), // 闇�瑕侀瑙堢殑鍥剧墖閾炬帴鍒楄〃
- // loop: false, // 鏄惁寮�鍚浘鐗囪疆鎾紝榛樿涓� false
- // indicator: 'default',// 鍥剧墖鎸囩ず鍣ㄧ被鍨嬶紝鍙�夊�间负 "default"銆�"number"銆�"pointer"锛岄粯璁や负 "default"
+ // current: index,
+ // urls: this.qsImage.map(s=>s.img),
+ // loop: false,
+ // indicator: 'default',
// });
},
init() {
@@ -180,48 +178,185 @@
</script>
<style>
-.click-t {
- color: darkgray;
+/* 鍩虹閰嶈壊鏂规 */
+: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; /* 杈规鑹� */
}
-.list-pd {
- margin-top: 25px;
+/* 椤甸潰鏁翠綋鏍峰紡 */
+.page-container {
+ padding: 20px;
+ background-color: var(--bg-color);
+ min-height: 100vh;
}
-.uni-uploader__input-box {
- margin: 5px;
- border: 1px solid #D9D9D9;
+/* 澶撮儴淇℃伅鏍峰紡 */
+.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);
}
-.image-remove {
- transform: rotate(45deg);
- width: 25px;
- height: 25px;
- position: absolute;
- top: 0;
- right: 0;
- border-radius: 13px;
- background-color: #FF0000;
+.header-text {
+ font-size: 14px;
+ color: var(--text-color);
+ font-weight: 500;
}
-.uni-common-mt {
- background-color: #ffffff;
- /* 绾㈣壊鑳屾櫙 */
+.header-count {
+ font-size: 14px;
+ color: var(--text-secondary);
}
-.plus-button {
- position: fixed;
- left: 0;
- bottom: 0;
+/* 鍥剧墖缃戞牸鏍峰紡 */
+.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%;
- background-color: #ffffff; /* 鑳屾櫙棰滆壊 */
- padding: 10px;
- box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); /* 娣诲姞搴曢儴闃村奖鏁堟灉 */
- z-index: 999; /* 纭繚鎸夐挳浣嶄簬椤跺眰 */
+ height: 100%;
}
-.uni-flex {
- max-height: calc(100vh - 240px); /* 灞忓箷楂樺害鍑忓幓涓婁紶鎸夐挳楂樺害 */
- overflow-y: auto; /* 褰撳唴瀹硅秴鍑洪珮搴︽椂鍑虹幇鍨傜洿婊氬姩鏉� */
+.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>
\ No newline at end of file
--
Gitblit v1.9.3