Browse Source

fix:1.修改写游记的头图图片上传功能

suwenjiang 3 months ago
parent
commit
7b5ee2498a

BIN
src/assets/img/note-create/user_xian.png


BIN
src/assets/img/note-create/userinfo_modal_h.png


+ 53 - 48
src/components/CreateNote/HeaderBanner.vue

@@ -29,10 +29,10 @@
       </div>
     </div>
 
-    <van-dialog title="图片剪裁" v-model:show="cropperDialogVisible" width="375">
-      <div class="h-full w-full">
-        <img ref="cropperRef" :src="cropperImageBase64" alt="" />
-        <!-- <vueCropper
+    <!-- <van-dialog title="图片剪裁" v-model:show="cropperDialogVisible" width="375"> -->
+    <!-- <div class="h-full w-full"> -->
+    <!-- <img ref="cropperRef" :src="cropperImageBase64" alt="" /> -->
+    <!-- <vueCropper
           ref="cropperRef"
           :img="cropperImageBase64"
           autoCrop
@@ -44,8 +44,8 @@
           :full="true"
           :fixedNumber="[3.2, 1]"
         ></vueCropper> -->
-      </div>
-      <template #footer>
+    <!-- </div> -->
+    <!-- <template #footer>
         <div class="flex items-center justify-center space-x-20 pt-10 pb-10">
           <van-button
             round
@@ -66,8 +66,8 @@
             确认
           </van-button>
         </div>
-      </template>
-    </van-dialog>
+      </template> -->
+    <!-- </van-dialog> -->
   </div>
 </template>
 
@@ -75,63 +75,68 @@
 import { useFileDialog } from '@vueuse/core'
 import icon_image_fill from '~/assets/img/note-create/icon-image-fill.png'
 import image from '~/assets/img/note-create/image.svg'
-import { VueCropper } from 'vue-cropper'
-import 'vue-cropper/dist/index.css'
+// import { VueCropper } from 'vue-cropper'
+// import 'vue-cropper/dist/index.css'
 
 const bannerUrl = defineModel('bannerUrl')
 
-// const emit = defineEmits(['onSelectImage'])
-
 const { open, onChange } = useFileDialog({
   accept: '.png,.png,.jpeg,.JPG,Png '
 })
 
-const cropperImageBase64 = ref('')
-const fileList = ref({})
-onChange((files) => {
-  if (!files.length) return
-  const reader = new FileReader()
-  reader.readAsDataURL(files[0])
-  reader.onload = () => {
-    console.log(reader.result, '123')
-
-    cropperDialogVisible.value = true
-    cropperImageBase64.value = reader.result
-    fileList.value = files[0]
-  }
-})
+// const cropperImageBase64 = ref('')
 
 function handleSelectImage() {
   open()
 }
 
-const cropperRef = ref(null)
-const cropperDialogVisible = ref(false)
-const loading = ref(false)
-// async
+onChange(async (files) => {
+  if (!files.length) return
+  // const reader = new FileReader()
+  // reader.readAsDataURL(files[0])
+  // reader.onload = () => {
 
-async function handleCropperOk() {
-  // cropperRef.value.getCropBlob(async (data) => {
+  //   cropperDialogVisible.value = true
+  //   fileList.value = files[0]
+  // }
+  const formData = new FormData()
+  formData.append('uploadFile', files[0])
+  formData.append('asImage', true)
+  formData.append('fieldName', 'travelNotesBanner')
   try {
-    // loading.value = true
-    // 此处需上传图片,保存URL
-    const formData = new FormData()
-
-    formData.append('uploadFile', fileList.value)
-    formData.append('asImage', true)
-    formData.append('fieldName', 'travelNotesBanner')
-    const res = await request('/admin/app/tourismProjectTravelNotesWrite/upload', {
+    let { data } = await request('/admin/app/tourismProjectTravelNotesWrite/upload', {
       method: 'post',
       body: formData
     })
-    const url = res.data.fileUrl
-    bannerUrl.value = url
-    cropperDialogVisible.value = false
-  } finally {
-    loading.value = false
-  }
-  // })
-}
+    bannerUrl.value = data.fileUrl
+  } catch (error) {}
+})
+
+// const cropperRef = ref(null)
+// const cropperDialogVisible = ref(false)
+// const loading = ref(false)
+// async
+
+// async function handleCropperOk() {
+//   try {
+//     // 此处需上传图片,保存URL
+//     const formData = new FormData()
+
+//     formData.append('uploadFile', fileList.value)
+//     formData.append('asImage', true)
+//     formData.append('fieldName', 'travelNotesBanner')
+//     const res = await request('/admin/app/tourismProjectTravelNotesWrite/upload', {
+//       method: 'post',
+//       body: formData
+//     })
+//     const url = res.data.fileUrl
+//     bannerUrl.value = url
+//     cropperDialogVisible.value = false
+//   } finally {
+//     loading.value = false
+//   }
+//   // })
+// }
 </script>
 
 <style lang="scss" scoped></style>

+ 1 - 1
src/components/CreateNote/PublishResultModal.client.vue

@@ -20,7 +20,7 @@
         <img
           @click="visible = false"
           class="w-full h-full"
-          src="../../assets/img/note-create/close.svg"
+          src="~/assets/img/note-create/close.svg"
           alt=""
         />
       </div>

+ 11 - 14
src/components/CreateNote/UserInfoModal.client.vue

@@ -13,11 +13,18 @@
         class="flex w-full flex-col items-center rounded-[20px] bg-gradient-to-b from-[#ffe6c0] to-[#fffffe] py-30"
       >
         <img
-          src="~/assets/img/note-create/userinfo_modal.jpg"
-          class="w-70 absolute right-13 top-5"
+          src="~/assets/img/note-create/userinfo_modal_h.png"
+          class="w-70 absolute left-10 top-5"
         />
+        <img
+          src="~/assets/img/note-create/user_xian.png"
+          class="w-114 absolute left-1/2 -translate-x-1/2 top-57 -tan z-50"
+        />
+        <div class="absolute top-10 right-10 z-100">
+          <img class="w-32 h-32" @click="visible = false" :src="close_circle" alt="" />
+        </div>
         <div class="text-xl font-semibold text-black-3">请完善您的个人信息</div>
-        <div class="mt-20 w-255 relative">
+        <div class="mt-20 w-255">
           <van-form
             ref="formRef"
             style="--van-cell-background: transparent !important"
@@ -98,24 +105,14 @@
           >
             提交
           </button>
-          <button
-            native-type="submit"
-            @click="visible = false"
-            class="flex h-40 w-110 cursor-pointer items-center justify-center rounded-full bg-primary text-xl font-semibold text-white hover:opacity-80"
-          >
-            取消
-          </button>
         </div>
       </template>
-      <!-- <div class="border fixed -bottom-20 left-1/2 z-100">
-        <img class="w-40 h-40" :src="close_circle" alt="" />
-      </div> -->
     </van-dialog>
   </div>
 </template>
 
 <script setup>
-import close_circle from '~/assets/img/note-create/close-circle.svg'
+import close_circle from '~/assets/img/note-create/close.svg'
 const visible = defineModel('visible', false)
 
 const emit = defineEmits(['submitOk'])

+ 1 - 13
src/components/Profile/Notes/Auditing/Item.vue

@@ -1,6 +1,6 @@
 <template>
   <van-swipe-cell>
-    <div class="relative group flex space-x-10 p-10 transition-all rounded-xl bg-[#FFF]">
+    <div class="relative flex mb-10 border-[#fff] space-x-10 p-10 rounded-xl bg-[#FFF]">
       <img
         :src="formatImgSrc(data?.tourismUrlsAfterConvert) || noteDraftCoverBg"
         class="aspect-[4/3] h-109 shrink-0 object-cover"
@@ -19,18 +19,6 @@
         <div class="absolute top-1/2 right-0 -translate-y-1/2 z-1 w-11 h-10">
           <img class="w-full h-full" :src="left_arrow" alt="" />
         </div>
-        <!-- <div @click="$emit('onRevoke')" class="flex mb-10 items-center space-x-5">
-          <div class="flex cursor-pointer items-center p-5 text-primary">
-            <span class="w-15 h-15">
-              <img
-                class="w-full h-full shrink-0 object-cover"
-                src="~/assets/img/note-create/cancel.svg"
-                alt=""
-              />
-            </span>
-            <span class="text-base">撤销审核</span>
-          </div>
-        </div> -->
       </div>
     </div>
 

+ 1 - 0
src/components/Profile/Notes/Auditing/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="w-full min-h-400 pb-10">
+    <!-- 审核中 -->
     <ProfileNotesEmpty v-if="!loading && !draftList.length" />
 
     <div v-else-if="draftList.length" class="flex flex-col divide-y">

+ 1 - 1
src/components/Profile/Notes/Draft/Item.vue

@@ -1,6 +1,6 @@
 <template>
   <van-swipe-cell>
-    <div class="relative group flex space-x-10 p-10 transition-all mb-10 bg-[#fff] rounded-xl">
+    <div class="relative group flex space-x-10 p-10 mb-10 bg-[#fff] rounded-xl">
       <img
         :src="formatImgSrc(data?.tourismUrlsAfterConvert) || noteDraftCoverBg"
         class="aspect-[4/3] h-109 shrink-0 rounded-xl object-cover"

+ 1 - 1
src/components/Profile/Notes/Published/Item.vue

@@ -1,6 +1,6 @@
 <template>
   <van-swipe-cell>
-    <div class="relative group flex border-box p-10 transition-all mb-10 bg-[#fff] rounded-xl">
+    <div class="relative group flex border-box p-10 mb-10 bg-[#fff] rounded-xl">
       <div class="aspect-[4/3] h-109 border-box">
         <van-image
           width="100%"

+ 9 - 6
src/components/Profile/Notes/Published/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="w-full box-border min-h-400 pb-10 px-1">
+    <!-- 发布中 -->
     <ProfileNotesEmpty v-if="!noteList.length" />
     <div v-else-if="noteList.length">
       <ProfileNotesPublishedItem
@@ -20,11 +21,11 @@
 const showShare = ref(false)
 
 const options = [
-  { name: '微信', icon: 'wechat' },
-  { name: '微博', icon: 'weibo' },
-  { name: '复制链接', icon: 'link' },
-  { name: '分享海报', icon: 'poster' },
-  { name: '二维码', icon: 'qrcode' }
+  // { name: '微信', icon: 'wechat' },
+  // { name: '微博', icon: 'weibo' },
+  { name: '复制链接', icon: 'link' }
+  // { name: '分享海报', icon: 'poster' },
+  // { name: '二维码', icon: 'qrcode' }
 ]
 
 const yjId = ref(null)
@@ -39,7 +40,9 @@ const onSelectShare = (option) => {
     shareToWeChat('friend')
   } else if (option.name === '朋友圈') {
     shareToWeChat('timeline')
-  } else if (option.name === '复制链接') {
+  } else if (option.name == '复制链接') {
+    console.log(123)
+
     copyLink()
   }
   showShare.value = false

+ 1 - 1
src/components/Profile/Notes/Rejected/Item.vue

@@ -1,6 +1,6 @@
 <template>
   <van-swipe-cell>
-    <div class="relative group flex space-x-10 p-10 transition-all mb-10 bg-[#fff] rounded-xl">
+    <div class="relative group flex space-x-10 p-10 mb-10 bg-[#fff] rounded-xl">
       <img
         :src="formatImgSrc(data?.tourismUrlsAfterConvert) || noteDraftCoverBg"
         class="aspect-[4/3] h-109 shrink-0 object-cover"

+ 1 - 0
src/components/Profile/Notes/Rejected/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="min-h-400 pb-10">
+    <!-- 未通过 -->
     <ProfileNotesEmpty v-if="!loading && !draftList.length" />
 
     <div v-else-if="draftList.length" class="grid grid-cols-1">

+ 6 - 3
src/pages/note-create/index.client.vue

@@ -35,8 +35,8 @@
       </div>
       <VueDraggable v-model="noteJson.travelNotesContent" :options="dragOptions">
         <template v-for="(item, index) in noteJson.travelNotesContent" :key="item.tmpId">
-          <div v-if="item.type === defaultSectionTitle.type" class="h-50 mb-12 relative box-border">
-            <van-cell-group class="border h-full" inset>
+          <div v-if="item.type === defaultSectionTitle.type" class="h-50 mb-12 box-border">
+            <van-cell-group class="border h-full focus:border-[#FF9300]" inset>
               <van-field
                 v-model="item.content"
                 rows="1"
@@ -68,7 +68,10 @@
             class="h-100 mb-12 relative box-border"
           >
             <!-- focus:outline-none focus:caret-[#FF9300] active:border-[#FF9300]  focus:border-[#FF9300]-->
-            <van-cell-group class="border h-full" inset>
+            <van-cell-group
+              class="border h-full active:shadow-[_0px_6px_4px_0px_rgba(0,0,0,0.25)]"
+              inset
+            >
               <van-field
                 autofocus
                 v-model="item.content"