xwt
2 天以前 b76e716ff4656191d73eba398e9eb39ee975e13b
pages/QC/SJ/ImageItem.vue
@@ -8,7 +8,7 @@
          <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>
              <text class="click-t">共有{{ qsImage.length }}张图片</text>
            </view>
          </view>
          <view class="uni-flex" style="flex-wrap: wrap;">
@@ -23,7 +23,7 @@
        </view>
      </view>
      <view class="plus-button">
        <button type="warn" @click="save">上传图片</button>
        <button type="primary" class="upImg" @click="save">上传图片</button>
      </view>
    </view>
    <!-- #ifdef APP -->
@@ -107,7 +107,8 @@
      uni.chooseImage({
        sourceType: sourceTypeArray[this.sourceTypeIndex],
        sizeType: sizeTypeArray[this.sizeTypeIndex],
        //sizeType: sizeTypeArray[this.sizeTypeIndex],
       sizeType: ['compressed'], // 强制使用压缩模式
        crop: this.isCrop ? {
          "quality": this.cropPercent,
          "width": this.cropWidth,
@@ -117,24 +118,25 @@
        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 = 1;
                entity.base64Date = base64.split(',')[1];
                this.qsImage.push(entity);
              })
              .catch(error => {
                console.error(error)
              })
        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 = 1;
              entity.base64Date = base64.split(',')[1];
              this.qsImage.push(entity);
            })
            .catch(error => {
              console.error(error)
            })
        },
        fail: (err) => {
          console.log("err: ", JSON.stringify(err));
@@ -142,16 +144,30 @@
      });
    },
    previewImage(index) {
      // console.log(this.qsImage.map(s=>s.img)[0])
      let imagesArry = [];
      base64ToPath(this.qsImage.map(s=>s.img)[index]).then(path => {
                  uni.hideLoading();
                   imagesArry[0] = path
                  console.log(path);
                  uni.previewImage({
                     current: 0,
                     urls: imagesArry
                  })
               })
      // uni.previewImage({
      //   current: index, // 设置当前显示图片的链接
      //   current: '0', // 设置当前显示图片的链接
      //   urls: this.qsImage.map(s=>s.img), // 需要预览的图片链接列表
      //   loop: false, // 是否开启图片轮播,默认为 false
      //   indicator: 'default',// 图片指示器类型,可选值为 "default"、"number"、"pointer",默认为 "default"
      //   indicator: 'pointer',// 图片指示器类型,可选值为 "default"、"number"、"pointer",默认为 "default"
      // });
    },
    init() {
      this.$post({
        url: "/Base/getByFid",
        // url: "/Base/getLljAllImgByFid",
      url: "/Base/getByFid",
        data: {
          fid: this.fid,
          qsType: 1
@@ -215,7 +231,7 @@
  bottom: 0;
  width: 100%;
  background-color: #ffffff; /* 背景颜色 */
  padding: 10px;
  /* padding: 10px; */
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); /* 添加底部阴影效果 */
  z-index: 999; /* 确保按钮位于顶层 */
}
@@ -224,4 +240,10 @@
  max-height: calc(100vh - 240px); /* 屏幕高度减去上传按钮高度 */
  overflow-y: auto; /* 当内容超出高度时出现垂直滚动条 */
}
.upImg{
     background-color: #3498db;
     color: white;
}
</style>