新增徽章形状，裁剪优化

src/views/badge/index.vue

@@ -12,10 +12,15 @@ const show = ref(false)
 const imgShow = ref(false)
 const router = useRouter()
 const option = ref({
+  canScale: true,
   autoCropWidth: 1024,
   autoCropHeight: 1024,
   ceilbutton: false,
   infoTrue: true,
+  fixed: false,
+  fixedNumber: [3, 4],
+  fixedBox: false,
+  canMoveBox: true,
   enlarge: 6
 })
 const options = ref({
@@ -135,19 +140,23 @@ function getbase64Data(data) {
   img.onload = () => {
     imageWidth.value = img.naturalWidth;
     imageHeight.value = img.naturalHeight;
-    if (imageWidth.value < 800 || imageHeight.value < 800) {
-      showToast('请上传尺寸大于800*800像素的照片')
-      return
+    if (imageWidth.value < 500 || imageHeight.value < 500) {
+      showToast('请上传尺寸大于500*500像素的照片')
+      imgurl.value = null
+      picture.value = null
+      return false;
+    }
+    const blob = base64ToBlob(data);
+    if (blob.size > 1024 * 1024 * 10) {
+      showToast('照片大小不能超过10M')
+      imgurl.value = null
+      picture.value = null
+      return false;
+    }
+    imgurl.value = blob;
+    if (prodId.value == 7) {
+      getUploadUrl()
     }
-  }
-  const blob = base64ToBlob(data);
-  if (blob.size > 1024 * 1024 * 10) {
-    showToast('照片大小不能超过10M')
-    return
-  }
-  imgurl.value = blob;
-  if (prodId.value == 7) {
-    getUploadUrl()
   }
 }
 
@@ -172,8 +181,8 @@ function imgorigoinf(data) {
   img.onload = () => {
     imageWidth.value = img.naturalWidth;
     imageHeight.value = img.naturalHeight;
-    if (imageWidth.value < 800 || imageHeight.value < 800) {
-      showToast('请上传尺寸大于800*800像素的照片')
+    if (imageWidth.value < 500 || imageHeight.value < 500) {
+      showToast('请上传尺寸大于500*500像素的照片')
       setTimeout(() => {
         const btn = document.querySelector('.btn')
         if (btn) {
@@ -795,7 +804,7 @@ onMounted(() => {
 }
 .step-title {
   font-size: 16px;
-  color: #808080;;
+  color: #808080;
 }
 .step-desc {
   font-size: 12px;
@@ -808,6 +817,7 @@ onMounted(() => {
   width: 80vw;
   height: 80vw;
   margin: 16px auto 0 auto;
+  text-align: center;
 }
 .photo-upload-box {
   margin: 16px auto 0 auto;
@@ -833,8 +843,8 @@ onMounted(() => {
   right: 0;
 }
 .photo-upload-img {
-  width: 80vw;
-  height: 80vw;
+  max-width: 80vw;
+  max-height: 80vw;
   border-radius: 12px;
 }
 .photo-upload-header {