单图徽章代码提交

src/views/badge/index.vue

@@ -1,19 +1,18 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { useRouter } from 'vue-router'
+import H5Cropper  from 'vue-cropper-h5'
+import "vue-cropper-h5/dist/style.css"
+import * as badgeApi from '@/api/badge'
+import { onMounted, ref } from 'vue';
+
 const show = ref(false)
 const imgShow = ref(false)
 const router = useRouter()
-const imgurl = ref('') // 头像地址
-const fileInput = ref<HTMLInputElement | null>(null)
-function onUploadClick() {
-  if (fileInput.value)
-    fileInput.value.click()
-}
-function myUpload(rsp) {
-  const self = this
-  self.imgurl = rsp.path // 更新头像方式一
-}
+const option = ref({})
+const options = ref({})
+const imgurl = ref('')
+const imgBgUrl = ref('')
+const isBgShow = ref(true)
 function goToRecord() {
   router.push('/badge/record')
 }
@@ -23,7 +22,59 @@ function goToMyOrder() {
 function goToPreview() {
   router.push('/badge/preview')
 }
-function onFileChange
+function getbase64Data(data) {
+  imgurl.value = data;
+  console.log('图片地址', data)
+}
+function getBgbase64Data(data) {
+  imgBgUrl.value = data;
+  console.log('背景图片地址', data)
+}
+const getKindList = () => {
+  badgeApi.getKindList({
+    page: 1,
+    size: 20,
+    scale: 20,
+  }).then((res: any) => {
+    const data = res || []
+  }).catch((err) => {
+    
+  }).finally((err) => {
+    
+  })
+}
+const getSundryList = () => {
+  badgeApi.getSundryList({
+    page: 1,
+    size: 6,
+    group: 'gp',
+  }).then((res: any) => {
+    const data = res || []
+  }).catch((err) => {
+    
+  }).finally((err) => {
+    
+  })
+}
+const getList = () => {
+  badgeApi.getSundryList({
+    page: 1,
+    size: 5,
+    group: 'case',
+    ids: '6,7,8,9,19'
+  }).then((res: any) => {
+    const data = res || []
+  }).catch((err) => {
+    
+  }).finally((err) => {
+    
+  })
+}
+onMounted(() => {
+  getKindList()
+  getSundryList()
+  getList()
+})
 </script>
 
 <template>
@@ -98,31 +149,30 @@ function onFileChange
         </div>
       </div>
     </div>
-    <div class="photo-upload-box">
-      <div class="photo-upload-header" @click="imgShow = true">
-        <van-icon name="question-o" size="16px" class="photo-upload-guide-icon" />
-        <span class="photo-upload-guide-text">图片上传指南</span>
-      </div>
-      <div class="photo-upload-area" @click="onUploadClick">
-        <input
-          ref="fileInput"
-          type="file"
-          accept="image/*"
-          style="display: none"
-          @change="onFileChange"
-        >
-        <div class="photo-upload-plus">
-          +
+    <div class="photo-upload-body">
+      <div v-if="!imgurl" class="photo-upload-box">
+        <div class="photo-upload-header" @click="imgShow = true">
+          <van-icon name="question-o" size="16px" class="photo-upload-guide-icon" />
+          <span class="photo-upload-guide-text">图片上传指南</span>
         </div>
-        <div class="photo-upload-text">
-          点击上传照片
+        <div class="photo-upload-area">
+          <div class="photo-upload-plus">
+            +
+          </div>
+          <div class="photo-upload-text">
+            点击上传照片
+          </div>
+          <div class="photo-upload-tip">
+            *上传照片时建议勾选[原图]
+          </div>
         </div>
-        <div class="photo-upload-tip">
-          *上传照片时建议勾选[原图]
+        <div class="photo-upload-footer">
+          请确定您对上传的照片拥有合法使用权利或已取得他人合法授权，且同意本平台分析图片信息以提供生成服务
         </div>
       </div>
-      <div class="photo-upload-footer">
-        请确定您对上传的照片拥有合法使用权利或已取得他人合法授权，且同意本平台分析图片信息以提供生成服务
+      <img class="photo-upload-img" v-if="imgurl" :src="imgurl" alt="" srcset="">
+      <div class="photo-upload-box-1">
+        <h5-cropper :option="option" @getbase64Data="getbase64Data"></h5-cropper>
       </div>
     </div>
     <div class="style-section">
@@ -198,38 +248,40 @@ function onFileChange
       </div>
       <div class="bg-style-tabs">
         <button
-          class="bg-style-tab active"
-          type="button"
+          class="bg-style-tab" :class="isBgShow == true ? 'active' : ''"
+          type="button" @click="isBgShow = true"
         >
           照片原图背景
         </button>
         <button
-          class="bg-style-tab"
-          type="button"
-          disabled
+          class="bg-style-tab" :class="isBgShow == false ? 'active' : ''"
+          type="button" @click="isBgShow = false"
         >
           补充背景照片
         </button>
       </div>
-      <div class="bg-style-tip">
+      <div v-if="isBgShow == true" class="bg-style-tip">
         选择该选项设计的徽章会根据上传的肖像照片背景进行生成效果
       </div>
-      <div class="bg-style-tip">
+      <div v-if="isBgShow == false" class="bg-style-tip">
         选择该选项需要额外上传一张照片作为背景
       </div>
     </div>
-    <div class="bg-photo-upload-section">
+    <div class="bg-photo-upload-section" v-if="isBgShow == false">
       <div class="bg-photo-upload-header">
         <span>补充背景照片</span>
       </div>
       <div class="bg-photo-upload-area">
-        <label class="bg-photo-upload-label">
-          <input type="file" accept="image/*" style="display:none">
+        <div v-if="!imgBgUrl" class="bg-photo-upload-label">
           <div class="bg-photo-upload-box">
             <div class="bg-photo-upload-plus">+</div>
             <div class="bg-photo-upload-text">上传照片</div>
           </div>
-        </label>
+        </div>
+        <img v-if="imgBgUrl" class="bg-photo-upload-img" :src="imgBgUrl" alt="">
+        <div class="bg-photo-upload-label-1">
+          <h5-cropper :option="options" @getbase64Data="getBgbase64Data"></h5-cropper>
+        </div>
       </div>
     </div>
     <div style="height: 90px;" />
@@ -477,6 +529,12 @@ function onFileChange
   margin-top: 2px;
 }
 
+.photo-upload-body {
+  position: relative;
+  width: 80vw;
+  height: 80vw;
+  margin: 16px auto 0 auto;
+}
 .photo-upload-box {
   margin: 16px auto 0 auto;
   width: 80vw;
@@ -489,6 +547,22 @@ function onFileChange
   align-items: center;
   box-sizing: border-box;
 }
+.photo-upload-box-1 {
+  width: 80vw;
+  height: 70vw;
+  border-radius: 12px;
+  /* background: #F0F2F5; */
+  background: rgba(0, 0, 0, 0);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.photo-upload-img {
+  width: 80vw;
+  height: 80vw;
+  border-radius: 12px;
+}
 .photo-upload-header {
   width: 100%;
   display: flex;
@@ -687,10 +761,20 @@ function onFileChange
 .bg-photo-upload-area {
   display: flex;
   align-items: center;
+  position: relative;
 }
 .bg-photo-upload-label {
   display: inline-block;
 }
+.bg-photo-upload-label-1 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 120px;
+  height: 120px;
+  background: none;
+}
 .bg-photo-upload-box {
   width: 120px;
   height: 120px;
@@ -704,6 +788,11 @@ function onFileChange
   background: #fafafa;
   transition: border 0.2s;
 }
+.bg-photo-upload-img {
+  width: 120px;
+  height: 120px;
+  border-radius: 12px;
+}
 .bg-photo-upload-plus {
   font-size: 32px;
   color: #b0b0b0;