assess-app/page_task/credit_upload/camera.vue

<template>
  <view class="camera-box">
    <!-- <Nav textContents=" " navBackgroundColor="transparent"></Nav> -->
    <view class="camera-left" >
      <!-- <uni-icons class="back-icons" color="#000" type="back" size="24" @click="goBack"></uni-icons> -->
      <camera class="camera-item" device-position="back" flash="auto" @error="error"  @initdone="cameraInitdone">
        <!-- <cover-image src="../static/scan-frame/scan-img.png" class="scan-img"></cover-image> -->
        <cover-image src="@/static/img/login/fh.png"  @click="goBack" class="back-icons"></cover-image>
        <cover-view class="camera-bg" @click.stop="focusCamera" >
          <cover-view class="photo-frame">
            <cover-view class="cover-hr">
              <cover-view class="drop" v-for="(item,index) in 30"></cover-view>
            </cover-view>
          </cover-view>
        </cover-view>
        <cover-view class="camera-prompt">
          请以页面顺序扫描。绿色虚线为裁剪线，请对齐征信报告中线
        </cover-view>
      </camera>
    </view>
    <view class="camera-right ">
      <view class="camera-right-top">
        <swiper class="photos-box" circular :indicator-dots="false" :autoplay="false" interval="2000"
                :duration="duration" v-if="srcList.length>0" indicator-dots="true" :current="currentIndex">
          <swiper-item class="swiper-box" v-for="(item,index) in srcList" key="index">
            <image mode="aspectFill" ref="imgRef" id="imgId" class="photos" :src="item"></image>
            <view v-show="srcList.length>0" class="photos-hr"></view>
          </swiper-item>
        </swiper>
        <view class="photos-box-blank" v-else>
          暂无图片
        </view>
      </view>
      <!--      <view class="">
        <view v-show="src" class="photos-hr"></view>

      </view> -->
      <view class="">
        <view class="camera-but" @click.stop="takePhoto()">
          <image class="camera-img" src="/page_task/static/img/information/photograph.png" mode="aspectFill"></image>
        </view>
        <view class="scan-buts">
          <view  class="scan-text" @click="openAlbum(1)">相册</view>
          <view :class="{'scan-no':srcList.length<=0}" class="scan-text" @click="uploadCreditImage()">上传
          </view>
        </view>

      </view>
    </view>

  </view>
</template>

<script>




import txUploadFile from "@/service/txOssSts";
import tools from "@/service/tools";

export default {
  components: {

  },
  data() {
    return {
      srcList: [
        // 'https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/app-serve/2024-2-26/gtrhdaj99s.jpg',
        // 'https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/app-serve/2024-2-26/gtrhdyd39w.jpg',
      ],
      currentIndex: 0,
      uuidKey: '',
      duration: '',
      isAjax: false,
      creditId: '',
    }
  },
  onLoad(data) {

  },
  onShow() {
    this.srcList = uni.getStorageSync('creditImg');
    this.currentIndex = (this.srcList.length - 1)
  },
  mounted() {},
  onUnload() {
    uni.removeStorageSync(this.uuidKey);
  },
  methods: {
    openAlbum(){
      uni.chooseMedia({
        count: this.fileNum, //默认9
        mediaType: 'image', //可以指定是原图还是压缩图
        sourceType:[ 'album'],
        success: (res) => {
          tools.showLoading()
          console.log(res)
          if (res.tempFiles !== undefined) {
            res.tempFiles.forEach((file) => {
              this.uploadingFile(file.tempFilePath);
            })
          }
        },
        fail: (e) => {
          console.log(e)
        }
      });
    },
    cameraInitdone(res){
      console.log(res)
    },

    goBack() {
      tools.leftClick()
    },
    goToUrl(type) {
      if (this.srcList.length < 1) {
        tools.error("请上传征信")
      } else {
        if (type === 1) {
          // if (this.uuidKey) {
          //   // uni.setStorageSync(this.uuidKey, this.srcList);
          //   // uni.navigateTo({
          //   //   url: `/pages-task/add-client/look-img?key=${this.uuidKey}`,
          //   // })
          // } else {
          //   this.uuidKey = uuidv4();
          // }
          // uni.setStorageSync(this.uuidKey, this.srcList);
          uni.setStorageSync('creditImg', this.srcList)
          uni.navigateTo({
            url: `/pages-task/add-client/look-transition`,
          })
        } else {
          console.log(this.srcList);
        }
      }
    },
    uploadCreditImage() {
      // if (this.isAjax) {
      //   return false
      // }
      // this.isAjax = true
      // uploadCreditImage({
      //   'business_id': this.creditId,
      //   'image': this.srcList
      // }).then((res) => {
      //   if (res.code === 1) {
      //     tools.success(res.msg)
      //     uni.$emit('newCreditImage', {
      //       'credit_sn': res.data.credit_sn
      //     })
      //     uni.navigateBack({
      //       delta: 1
      //     })
      //   } else {
      //     tools.error(res.msg)
      //     this.isAjax = false
      //   }
      // })
      uni.setStorageSync('creditImg', this.srcList)
      uni.$emit('creditImg', this.srcList)
      uni.navigateBack({
        delta: 1
      })
    },
    focusCamera(){
      console.log('对焦触发了')
      // const ctx = uni.createCameraContext();
      const cameraContext = uni.createCameraContext();
      // 调用对焦方法
      cameraContext.focus();
    },
    takePhoto() {
      const ctx = uni.createCameraContext();
      ctx.takePhoto({
        quality: 'high',
        success: (res) => {
          this.uploadingFile(res.tempImagePath)
          // this.srcList.push(this.uploadingFile(res.tempImagePath))
          // this.$nextTick(() => {
          // setTimeout(() => {
          // uni.createSelectorQuery().select('#imgId').boundingClientRect((rect) => {
          // rect.height即为目标元素的高度
          // this.imgHeight = rect.height
          // }).exec();
          // },500)
          // });
          console.log(this.srcList);
          /* 返回调用页面并把图片URL传递过去 */
          /* let pages = getCurrentPages();
          let prevPage = pages[pages.length - 2];
          prevPage.setData({
            "image": res.tempImagePath,
          })
          uni.navigateBack(); */

          /* 调用页面获取图片URL方法 */
          /* let pages = getCurrentPages();
          let currPage = pages[pages.length-1];
          if(typeof(currPage.data.image) != undefined && currPage.data.image != null){
            console.log('获取图片：', currPage.data.image)
          } */
        }
      });
    },
    uploadingFile(file) {
      //图片上传
      txUploadFile(file).then((res) => {
        if (res.Location) {
          this.srcList.push(res.Location)
          this.currentIndex = (this.srcList.length - 1)
          // let that = this
          // this.setDate({})
          console.log(this.srcList, '当前图片数组');
          // return res.Location
          // console.log(res,'返回的图片路径');
          tools.hideLoading();
        } else {
          tools.error('上传失败')
        }
      }).catch((err) => {
        tools.hideLoading();
      })
    },
    error(e) {
      console.log(e.detail);
    }
  }
}
</script>

<style lang="scss">
.camera-box {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: space-between;

  .camera-left {
    position: relative;

    .camera-item {
      height: 100vh;
      width: 70vw;
      position: relative;
    }

    .back-icons {
      position: absolute;
      left: 20rpx;
      top: 10rpx;
      z-index: 10;
      width: 25rpx;
      height: 25rpx;
    }

    .scan-img {
      opacity: 0.4;
      height: 100vh;
      width: 70vw;
    }

    .camera-bg {
      opacity: 0.3;
      height: 100vh;
      width: 70vw;
      // border: 34rpx solid #000;
      background: transparent;
      padding: 34rpx;
      box-sizing: border-box;
      pointer-events: none;

      .photo-frame {
        width: 100%;
        height: 100%;
        border-radius: 20rpx;
        border: 8rpx solid #fff;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        // position: relative;

        .cover-hr {
          width: 4rpx;
          height: 100%;

          /* background: green; */
          // position: absolute;
          // left: 50%;
          // top: 0;
          // margin: 0 auto;
          // border-right: 8rpx dashed rgb(0, 255, 0);
          .drop {
            width: 100%;
            height: 8rpx;
            border-radius: 20rpx;
            background: rgb(0, 255, 0);
            margin: 0 0 4rpx 0;
          }

          .drop:last-child {
            margin: 0;
          }
        }
      }
    }

    .camera-prompt {
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 16rpx;
      color: #fff;
      text-align: center;
    }

  }

  .camera-right {
    width: 30vw;
    height: 100%;
    padding: 20rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .camera-right-top {
      width: 100%;
      height: 133rpx;
      overflow: hidden;
      padding: 20rpx 0;

      .photos-box {
        // margin-left: 10rpx;
        // border-radius: 16rpx;
        // width: calc(100vw - 500upx - 20rpx);
        width: 100%;
        height: 100%;
        position: relative;

        .swiper-box {
          border-radius: 20rpx;
        }

        .photos-hr {
          width: 0rpx;
          height: 100%;
          position: absolute;
          left: 50%;
          top: 0;
          border-right: 2rpx dashed rgb(0, 255, 0);
        }

        .photos {
          width: 100%;
          height: 100%;
        }
      }

    }

    .camera-but {
      //width: 80rpx;
      //height: 80rpx;
      //line-height: 80rpx;
      //border-radius: 50%;
      //background-color: red;
      display: flex;
      justify-content: center;
      .camera-img{
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
      }
    }

    .scan-buts {
      display: flex;
      justify-content: space-between;

      .scan-text {
        width: 45%;
        font-size: 13rpx;
        text-align: center;
        color: #fff;
        padding: 10rpx 0;
        background: #0FB160;
        border-radius: 10rpx;
        margin: 15rpx 0 0 0;
        // line-height: 60upx;
      }

      .scan-no {
        opacity: 0.7
      }
    }





    .photos-box-blank {
      width: 100%;
      height: 100%;
      background: #ccc;
      display: flex;
      border-radius: 20rpx;
      align-items: center;
      justify-content: center;
      color: #fff;
    }
  }
}
</style>