首检，巡检，入库检

啊鑫

3 天以前 97af26e2ad64d7974367df80a900c1f680bd19c5

 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>