fstarter 2.10.55 → 2.10.57

package/src/plugins/plugins/components/imageCropper.vue

@@ -0,0 +1,299 @@
+<template>
+  <div class="image-cropper-container">
+    <!-- 示例图 如果身份证 银行卡则显示 -->
+    <div style="background-color: #fff; padding: 5px 10px;"
+      v-if="actions === 'ocr_id0' || actions === 'ocr_id1' || actions === 'ocr_bc'">
+      <div class="errorList">
+        <div class="picture" v-for="item in errorLists" :key="'error-' + item.label">
+          <div>
+            <img class="img1" :src="item.img1" />
+            <img class="imgIcon" :src="item.imgIcon" />
+          </div>
+          {{ item.label }}
+        </div>
+      </div>
+      <div class="tips-text">
+        请将证件的四条边缘与示例图中的虚线框完全重合，确保边缘清晰、无多余背景。若图片方向不正，请先使用旋转工具将证件旋转至水平。
+      </div>
+    </div>
+    <div class="cropper-wrapper">
+      <vue-cropper ref="cropper" class="cropper-container" :img="imgSrc" :autoCrop="autoCrop" :canScale="canScale"
+        :canMove="canMove" :canMoveBox="canMoveBox" :fixedBox="fixedBox" :info="info" :autoCropWidth="autoCropWidth"
+        :autoCropHeight="autoCropHeight" :fixed="fixed" :fixedNumber="fixedNumber" :enlarge="enlarge"
+        :outputSize="outputSize" :centerBox="centerBox" :outputType="outputType" :fullscreen="true"></vue-cropper>
+      <div class="toolbar-btn">
+        <svg @click="rotateRight" t="1760325619986" viewBox="0 0 1024 1024" version="1.1"
+          xmlns="http://www.w3.org/2000/svg" p-id="6974" width="40" height="40">
+          <path
+            d="M1023.977013 511.699911a30.10888 30.10888 0 0 1-60.217759 0c-0.120035-230.342933-173.53718-423.701959-402.508709-448.796359S121.097734 189.016745 71.089986 413.867058s77.178762 451.312102 295.199061 525.633021 457.048794-27.308054 554.788619-235.886568a30.115882 30.115882 0 0 1 54.521079 25.596549C864.824076 965.588773 593.935184 1080.758739 346.851314 996.526898S-44.366065 655.642363 12.310651 400.822211 308.315949-25.36148 567.81248 3.078908s456.026492 247.573015 456.164533 508.621003z"
+            fill="#ffffff" p-id="6975"></path>
+          <path
+            d="M1023.977013 503.700552c0 22.077511-14.334227 39.994795-31.996436 39.994796s-31.996436-17.918284-31.996437-39.994796V199.736907c0-22.077511 14.334227-39.994795 31.996437-39.994796s31.996436 17.918284 31.996436 39.994796v303.963645z"
+            fill="#ffffff" p-id="6976"></path>
+          <path
+            d="M415.038424 490.344613a75.331217 75.331217 0 1 1 75.329216-75.329216 74.86708 74.86708 0 0 1-75.329216 75.329216z m0-107.615738c-18.294395 0-32.284521 13.990126-32.284522 32.284522s13.990126 32.284521 32.284522 32.284521 32.284521-13.990126 32.284521-32.284521-13.990126-32.282521-32.284521-32.282521z m312.086041 408.941606H296.660512a64.759099 64.759099 0 0 1-64.569043-64.569043V296.637485A64.759099 64.759099 0 0 1 296.660512 232.068442h430.463953a64.759099 64.759099 0 0 1 64.569043 64.569043v430.463953a64.759099 64.759099 0 0 1-64.569043 64.569043zM296.660512 275.115137a21.586366 21.586366 0 0 0-21.523348 21.523348v430.462953A21.586366 21.586366 0 0 0 296.660512 748.620785h430.463953a21.586366 21.586366 0 0 0 21.519346-21.519347V296.637485a21.586366 21.586366 0 0 0-21.523347-21.523348z m174.338416 374.502449c-17.219078 0-34.437156-7.533222-47.350965-20.44703l-25.827617-26.907936a22.083513 22.083513 0 0 0-31.209204 0l-33.360839 35.510473a21.806431 21.806431 0 0 1-30.132887 1.076318c-8.609539-7.533222-8.609539-21.523348-1.076317-30.132887l33.360838-35.510473a63.618763 63.618763 0 0 1 46.275648-20.443029c17.218078 0 34.437156 7.533222 47.350965 20.44703l25.827617 26.907936a22.083513 22.083513 0 0 0 31.209204 0l107.614738-113.000326a64.206936 64.206936 0 0 1 47.350965-20.447031c18.294395 0 34.437156 7.533222 47.350965 20.447031l97.928881 103.311468a21.320288 21.320288 0 0 1-31.209204 29.05657l-97.928881-103.311469a22.083513 22.083513 0 0 0-31.209205 0L518.349893 630.246874c-12.913809 11.837491-30.132887 19.370713-47.350965 19.370712z"
+            fill="#ffffff" p-id="6977"></path>
+        </svg>
+        <div>图片旋转</div>
+      </div>
+    </div>
+    <div class="cropper-actions">
+      <button class="cancel-btn0" @click="handleCancel">取消</button>
+      <button class="confirm-btn" @click="handleConfirm">使用照片</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { VueCropper } from 'vue-cropper'
+import bzImg from './images/bz.png'
+import qsImg from './images/qs.png'
+import mohuImg from './images/mohu.png'
+import zdImg from './images/zd.png'
+import correctImg from './images/correct.png'
+import errImg from './images/error.png'
+export default {
+  name: 'ImageCropper',
+  components: {
+    VueCropper
+  },
+  props: {
+    actions: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    imgSrc: {
+      type: String,
+      required: true
+    },
+    autoCrop: { // 是否开启自动截图
+      type: Boolean,
+      default: true
+    },
+    canScale: { // 是否可缩放
+      type: Boolean,
+      default: true
+    },
+    canMove: { // 移动图片
+      type: Boolean,
+      default: true
+    },
+    canMoveBox: { // 移动框 是否可拖动
+      type: Boolean,
+      default: false
+    },
+    fixedBox: { // 固定宽高比
+      type: Boolean,
+      default: false
+    },
+    info: { // 是否显示图片信息
+      type: Boolean,
+      default: false
+    },
+    autoCropWidth: { // 输出图片的宽高
+      type: Number,
+      default: 320
+    },
+    autoCropHeight: { // 输出图片的宽高
+      type: Number,
+      default: 210
+    },
+    fixed: { // 固定宽高比
+      type: Boolean,
+      default: true
+    },
+    fixedNumber: { // 固定宽高比
+      type: Array,
+      default: () => [1.6, 1]
+    },
+    enlarge: {
+      type: Number,
+      default: 1
+    },
+    outputSize: {
+      type: Number,
+      default: 1
+    },
+    centerBox: {
+      type: Boolean,
+      default: false
+    },
+    outputType: {
+      type: String,
+      default: 'jpg'
+    }
+  },
+  data() {
+    return {
+      errorLists: [
+        {
+          img1: bzImg,
+          imgIcon: correctImg,
+          label: '标准照片'
+        },
+        {
+          img1: qsImg,
+          imgIcon: errImg,
+          label: '边框缺失'
+        },
+        {
+          img1: mohuImg,
+          imgIcon: errImg,
+          label: '照片模糊'
+        },
+        {
+          img1: zdImg,
+          imgIcon: errImg,
+          label: '照片遮挡'
+        }
+      ],
+    }
+  },
+  methods: {
+    handleConfirm() {
+      console.log('confirm')
+      this.$refs.cropper.getCropData(data => {
+        this.$emit('confirm', data)
+      })
+    },
+    handleCancel() {
+      console.log('cancel', '99999999999999999999999999999')
+      this.$emit('cancel')
+    },
+    // 向左旋转
+    rotateLeft() {
+      this.$refs.cropper.rotateLeft();
+    },
+    // 向右旋转
+    rotateRight() {
+      this.$refs.cropper.rotateRight();
+    },
+    // 重置缩放和旋转
+    scaleReset() {
+      this.$refs.cropper.refresh();
+    }
+  }
+}
+</script>
+
+<style scoped>
+.cropper-container {
+  background-color: #e3e3e3;
+  background-image: none;
+}
+
+.image-cropper-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.9);
+  z-index: 9;
+  display: flex;
+  flex-direction: column;
+}
+
+.cropper-wrapper {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.cropper-actions {
+  padding: 10px 15px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #ffffff;
+  backdrop-filter: blur(10px);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  gap: 15px;
+}
+
+.cancel-btn0,
+.confirm-btn {
+  display: inline-block;
+  padding: 12px 0;
+  border: none;
+  border-radius: 30px;
+  font-size: 16px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  flex: 1;
+}
+
+.cancel-btn0 {
+  border: 1px solid #4A6BBE;
+  color: #4A6BBE;
+  background: #ffffff;
+  width: 45%;
+}
+
+.confirm-btn {
+  background: #4A6BBE;
+  color: white;
+  width: 45%;
+}
+
+.errorList {
+  display: flex;
+  justify-content: space-around;
+}
+
+.errorList .picture {
+  position: relative;
+  width: 78px;
+  height: 78px;
+  margin: 20px 0 30px;
+  text-align: center;
+  font-size: 13px;
+}
+
+.picture div {
+  height: 51px;
+  background: #FFFAF2;
+  padding: 7px 11px;
+  margin-bottom: 15px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.picture .img1 {
+  width: 56px;
+  height: 36px;
+  margin-bottom: 5px;
+}
+
+.picture:nth-of-type(2) .img1 {
+  width: 64px;
+  height: 47px;
+  margin-top: -9px;
+  margin-bottom: 5px;
+}
+
+.picture .imgIcon {
+  width: 13px;
+  height: 13px;
+  position: relative;
+  top: -1px;
+}
+
+.tips-text {
+  color: #666666;
+  font-size: 14px;
+  margin: 10px;
+}
+
+.toolbar-btn {
+  position: absolute;
+  bottom: 20px;
+  text-align: center;
+  color: #ffffff;
+}
+</style>