From 97af26e2ad64d7974367df80a900c1f680bd19c5 Mon Sep 17 00:00:00 2001
From: 啊鑫 <t2856754968@163.com>
Date: 星期三, 23 七月 2025 10:38:08 +0800
Subject: [PATCH] 首检，巡检，入库检
---
pages/QC/SJ/ImageItem.vue | 157 +++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 124 insertions(+), 33 deletions(-)
diff --git a/pages/QC/SJ/ImageItem.vue b/pages/QC/SJ/ImageItem.vue
index 9660916..d2f00ed 100644
--- a/pages/QC/SJ/ImageItem.vue
+++ b/pages/QC/SJ/ImageItem.vue
@@ -5,25 +5,34 @@
<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="image-header">
+ <view class="header-title">
+ <uni-icons color="#3498db" size="20" type="image"></uni-icons>
+ <view class="title-text">鍥剧墖绠＄悊</view>
</view>
+ <view class="image-counter">
+ <view class="counter-text">{{ qsImage.length }}/{{ countIndex + 1 }}</view>
+ </view>
+ </view>
+ <view class="description-text">
+ <view>鐐瑰嚮鍥剧墖鍙瑙堬紝鐐瑰嚮鍒犻櫎鎸夐挳鍙Щ闄ゅ浘鐗�</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"
+ <image :data-src="image.img" :src="image.img"
@tap="previewImage(index)"></image>
- <image src="/static/plus.png" class="image-remove" @click="removeImage(index,image.id)"></image>
+ <image class="image-remove" src="/static/plus.png" @click="removeImage(index,image.id)"></image>
</view>
- <image class="uni-uploader__input-box" @tap="chooseImage" src="/static/plus.png"></image>
+ <image class="uni-uploader__input-box" src="/static/plus.png" @tap="chooseImage"></image>
</view>
</view>
</view>
- <view class="plus-button">
- <button type="warn" @click="save">涓婁紶鍥剧墖</button>
+ <view class="action-buttons">
+ <button class="save-btn" @click="save">
+ <uni-icons color="#fff" size="16" type="cloud-upload"></uni-icons>
+ 淇濆瓨鍥剧墖
+ </button>
</view>
</view>
<!-- #ifdef APP -->
@@ -33,7 +42,7 @@
<script>
-import {pathToBase64, base64ToPath} from '../../../js_sdk/mmmm-image-tools/index'
+import {pathToBase64} from '../../../js_sdk/mmmm-image-tools/index'
var sourceTypeArray = [
['camera'],
@@ -142,12 +151,12 @@
});
},
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, // 鏄惁寮�鍚浘鐗囪疆鎾紝榛樿涓� false
+ // indicator: 'default',// 鍥剧墖鎸囩ず鍣ㄧ被鍨嬶紝鍙�夊�间负 "default"銆�"number"銆�"pointer"锛岄粯璁や负 "default"
+ // });
},
init() {
this.$post({
@@ -180,8 +189,49 @@
</script>
<style>
-.click-t {
- color: darkgray;
+/* 澶撮儴鏍峰紡 */
+.image-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 15px;
+ padding-bottom: 10px;
+ border-bottom: 1px solid #eee;
+}
+
+.header-title {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.title-text {
+ font-size: 18px;
+ font-weight: 600;
+ color: #2c3e50;
+}
+
+.image-counter {
+ background: linear-gradient(135deg, #3498db, #2980b9);
+ color: white;
+ padding: 4px 12px;
+ border-radius: 12px;
+ font-size: 12px;
+ font-weight: bold;
+}
+
+.counter-text {
+ color: white;
+}
+
+.description-text {
+ color: #7f8c8d;
+ font-size: 14px;
+ margin-bottom: 15px;
+ padding: 8px 12px;
+ background-color: #f8f9fa;
+ border-radius: 4px;
+ border-left: 3px solid #3498db;
}
.list-pd {
@@ -190,38 +240,79 @@
.uni-uploader__input-box {
margin: 5px;
- border: 1px solid #D9D9D9;
+ border: 2px solid #E8E8E8;
+ border-radius: 8px;
+ overflow: hidden;
+ transition: all 0.3s;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.uni-uploader__input-box:hover {
+ border-color: #3498db;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(52, 152, 219, 0.2);
}
.image-remove {
transform: rotate(45deg);
- width: 25px;
- height: 25px;
+ width: 24px;
+ height: 24px;
position: absolute;
- top: 0;
- right: 0;
- border-radius: 13px;
- background-color: #FF0000;
+ top: -8px;
+ right: -8px;
+ border-radius: 50%;
+ background: linear-gradient(135deg, #e74c3c, #c0392b);
+ box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
+ transition: all 0.2s;
+ z-index: 10;
+}
+
+.image-remove:active {
+ transform: rotate(45deg) scale(0.9);
}
.uni-common-mt {
background-color: #ffffff;
- /* 绾㈣壊鑳屾櫙 */
+ min-height: 100vh;
}
-.plus-button {
+/* 鎿嶄綔鎸夐挳鏍峰紡 */
+.action-buttons {
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; /* 纭繚鎸夐挳浣嶄簬椤跺眰 */
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 20%, rgba(255, 255, 255, 1) 100%);
+ padding: 20px 15px 15px;
+ box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
+ z-index: 999;
+}
+
+.save-btn {
+ width: 100%;
+ background: linear-gradient(135deg, #3498db, #2980b9);
+ color: white;
+ border: none;
+ border-radius: 8px;
+ padding: 12px 20px;
+ font-size: 16px;
+ font-weight: 600;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
+ transition: all 0.3s;
+}
+
+.save-btn:active {
+ transform: translateY(1px);
+ box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
}
.uni-flex {
- max-height: calc(100vh - 240px); /* 灞忓箷楂樺害鍑忓幓涓婁紶鎸夐挳楂樺害 */
- overflow-y: auto; /* 褰撳唴瀹硅秴鍑洪珮搴︽椂鍑虹幇鍨傜洿婊氬姩鏉� */
+ max-height: calc(100vh - 280px);
+ overflow-y: auto;
+ padding-bottom: 20px;
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3