feat:update

src/locales/lang/webslate/en.json

@@ -395,7 +395,9 @@
         "nodata": "You don't have a room yet, please create a room first",
         "roomStatus0": "Not Started",
         "roomStatus1": "Live",
-        "roomStatus2": "Finshed"
+        "roomStatus2": "Finshed",
+        "errorTimeLess": "The selected time cannot be less than the current time!",
+        "setPasswordPlaceholder": "Please enter a 4-digit password"
     },
     "statistic": {
         "allStatus": "Overall Overview",

src/locales/lang/webslate/zh.json

@@ -132,7 +132,8 @@
         "roomStatus0": "未开始",
         "roomStatus1": "带看中",
         "roomStatus2": "已结束",
-        "setPasswordPlaceholder": "请输入4位数字密码"
+        "setPasswordPlaceholder": "请输入4位数字密码",
+        "errorTimeLess": "所选时间不能低于当前时间!"
     },
     "statistic": {
         "allStatus": "整体概况",

src/views/room/edit-room/avatar.new.vue.bk

@@ -0,0 +1,185 @@
+<template>
+  <div class="uploader">
+    <div class="add-item-icon scene-sign" v-if="avatarImage">
+      <a-image class="avatar" :src="avatarImage" alt="avatar" />
+      <span class="delete-scene" @click="deleteAvatar">
+        <close-outlined class="delete-scene-icon" />
+      </span>
+    </div>
+    <div class="add-item-icon" v-else  @click="showAvatarUploader">
+      <a-button
+        shape="circle"
+        class="button"
+        type="primary"
+       
+      >
+        <plus-outlined class="add-room-icon" />
+      </a-button>
+    </div>
+
+    <my-upload
+      field="file"
+      name="file"
+      img-format=".png,.jpg,.jpeg"
+      :url="baseURL + '/takelook/upload/file'"
+      :headers="{
+        authorization: 'authorization-text'
+      }"
+      :disabled="file.length > 0"
+      :lang-type="getLocale"
+      v-model="isShowAvatarModel"
+      @crop-upload-success="handleAvatarUpload"
+      @crop-success="cropSuccess"
+    >
+    </my-upload>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { baseURL } from '@/env'
+import { watchEffect } from 'vue'
+import myUpload from 'vue-image-crop-upload'
+import { useI18n } from '@/hook/useI18n'
+import { useLocale } from '@/locales/useLocale'
+
+const emit = defineEmits(['sync'])
+const file = ref<any[]>([])
+const avatarImage = ref('')
+const props = defineProps<{ value: string | undefined }>()
+const { t } = useI18n()
+const isShowAvatarModel = ref(false)
+const { getLocale } = useLocale()
+
+watchEffect(() => {
+  console.log('props.value', props.value)
+  if (props.value?.length) {
+    avatarImage.value = props.value
+  }
+})
+
+const handleAvatarUpload = (res: any) => {
+  const { data } = res
+  console.log('avatarImage', data)
+  avatarImage.value = data
+  emit('sync', data || '')
+  // setTimeout(() => {
+  //   isShowAvatarModel.value = false
+  // }, 1500)
+}
+const cropSuccess = (res: any) => {}
+const cropUploadFail = (res: any) => {
+  console.log('cropUploadFail', res)
+}
+
+const showAvatarUploader = () => {
+  isShowAvatarModel.value = true
+  console.log('show')
+}
+const deleteAvatar = () => {
+  avatarImage.value = ''
+}
+</script>
+<style lang="scss"></style>
+
+<style lang="scss" scoped>
+.add-item-icon {
+  width: 120px;
+  height: 120px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid #ebedf0;
+  overflow: hidden;
+  .avatar {
+    max-width: 100%;
+    // border-radius: 50%;
+  }
+  .button {
+    background: linear-gradient(144deg, #00aefb 0%, #0076f6 100%);
+    width: 40px;
+    height: 40px;
+  }
+}
+.scene-sign {
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+  z-index: 10;
+  img {
+    width: 100%;
+    height: 100%;
+    display: block;
+    object-fit: cover;
+  }
+  .title {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 24px;
+    background: rgba(0, 0, 0, 0.5);
+    padding: 5px;
+    font-size: 12px;
+    color: #fff;
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .delete-scene {
+    z-index: 2;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 52px;
+    height: 52px;
+    background-color: rgba(0, 0, 0, 0.5);
+    color: #fa5555;
+    font-size: 14px;
+    border-radius: 50%;
+    display: flex;
+    align-items: flex-end;
+    transform: translate(100%, -100%);
+    transition: all 0.3s ease;
+    opacity: 0;
+    cursor: pointer;
+
+    .delete-scene-icon {
+      padding: 10px;
+    }
+  }
+
+  &:hover .delete-scene {
+    transform: translate(50%, -50%);
+    opacity: 1;
+  }
+  .status-cover {
+    z-index: 1;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    p {
+      color: #fff;
+    }
+  }
+}
+
+// .vue-image-crop-upload {
+//   .vicp-wrap .vicp-operate {
+//     color: #0076f6 !important;
+//   }
+// }
+</style>
+<style>
+.vue-image-crop-upload .vicp-wrap .vicp-operate a {
+  color: #0076f6;
+}
+</style>

src/views/room/edit-room/avatar.vue

@@ -1,85 +1,95 @@
 <template>
-  <div class="uploader">
-    <div class="add-item-icon scene-sign" v-if="avatarImage">
-      <a-image class="avatar" :src="avatarImage" alt="avatar" />
-      <span class="delete-scene" @click="deleteAvatar">
+  <a-upload
+    v-model:file-list="avatarFile"
+    name="file"
+    accept=".png,.jpg,.jpeg"
+    :show-upload-list="false"
+    :action="baseURL + '/takelook/upload/file'"
+    :max-count="1"
+    class="uploader"
+    :headers="{
+      authorization: 'authorization-text'
+    }"
+    :disabled="avatarFile.length > 0"
+    @change="handleAvatarChange"
+    :before-upload="handleAvatarBeforeUpload"
+  >
+    <div
+      class="add-item-icon scene-sign"
+      v-if="avatarFile.length > 0 && avatarFile[0].response"
+    >
+      <a-image class="avatar" :src="avatarFile[0].response.data" alt="avatar" />
+      <span class="delete-scene" @click="deleteAvatar(avatarFile[0])">
         <close-outlined class="delete-scene-icon" />
       </span>
     </div>
     <div class="add-item-icon" v-else>
-      <a-button
-        shape="circle"
-        class="button"
-        type="primary"
-        @click="showAvatarUploader"
-      >
+      <a-button shape="circle" class="button" type="primary">
         <plus-outlined class="add-room-icon" />
       </a-button>
     </div>
-
-    <my-upload
-      field="file"
-      name="file"
-      img-format=".png,.jpg,.jpeg"
-      :url="baseURL + '/takelook/upload/file'"
-      :headers="{
-        authorization: 'authorization-text'
-      }"
-      :disabled="file.length > 0"
-      :lang-type="getLocale"
-      v-model="isShowAvatarModel"
-      @crop-upload-success="handleAvatarUpload"
-      @crop-success="cropSuccess"
-    >
-    </my-upload>
-  </div>
+  </a-upload>
 </template>
 <script lang="ts" setup>
 import { ref } from 'vue'
+import { message, type UploadChangeParam } from 'ant-design-vue'
+import type { FileItem } from './album-list.vue'
 import { baseURL } from '@/env'
 import { watchEffect } from 'vue'
-import myUpload from 'vue-image-crop-upload'
 import { useI18n } from '@/hook/useI18n'
-import { useLocale } from '@/locales/useLocale'
-
 const emit = defineEmits(['sync'])
-const file = ref<any[]>([])
-const avatarImage = ref('')
+const avatarFile = ref<any[]>([])
 const props = defineProps<{ value: string | undefined }>()
 const { t } = useI18n()
-const isShowAvatarModel = ref(false)
-const { getLocale } = useLocale()
 
 watchEffect(() => {
   if (props.value?.length) {
-    debugger
+    const tempData = {} as FileItem
+    tempData.uid = `data-0`
+    tempData.response = {
+      data: props.value,
+      ok: 0
+    }
+    if (!avatarFile.value?.length) {
+      console.log('mapper', tempData)
+      avatarFile.value = [tempData]
+    }
+  } else {
+    avatarFile.value = []
   }
 })
 
-const handleAvatarUpload = (res: any) => {
-  const { data } = res
-  console.log('avatarImage', data)
-  avatarImage.value = data
-  // setTimeout(() => {
-  //   isShowAvatarModel.value = false
-  // }, 1500)
-}
-const cropSuccess = (res: any) => {
-
-}
-const cropUploadFail = (res: any) => {
-  console.log('cropUploadFail', res)
+const handleAvatarChange = (info: UploadChangeParam) => {
+  if (info.file.status === 'done') {
+    const { code, data } = info.file.response
+    if (code === 0) {
+      emit('sync', data || '')
+    }
+  } else if (info.file.status === 'error') {
+    message.error(`${info.file.name} file upload failed.`)
+  }
 }
-
-const showAvatarUploader = () => {
-  isShowAvatarModel.value = true
-  console.log('show')
+const deleteAvatar = (item: any) => {
+  const index = avatarFile.value.findIndex(i => i.uid === item.uid)
+  if (index > -1) {
+    avatarFile.value.splice(index, 1)
+  }
+  emit('sync', '')
 }
-const deleteAvatar = () => {
-  avatarImage.value = ''
+const handleAvatarBeforeUpload = (file: File) => {
+  const max = file.size / 1024 / 1024 <= 1
+  if (!max) {
+    message.error(t('room.oneMPicLimit'))
+    // debugger;
+    setTimeout(() => {
+      avatarFile.value = []
+    }, 50)
+    return false
+  } else {
+    return true
+  }
 }
 </script>
-<style lang="scss"></style>
 
 <style lang="scss" scoped>
 .add-item-icon {
@@ -171,15 +181,4 @@ const deleteAvatar = () => {
     }
   }
 }
-
-// .vue-image-crop-upload {
-//   .vicp-wrap .vicp-operate {
-//     color: #0076f6 !important;
-//   }
-// }
-</style>
-<style>
-.vue-image-crop-upload .vicp-wrap .vicp-operate a {
-  color: #0076f6;
-}
 </style>

src/views/room/edit-room/index.vue

@@ -493,7 +493,8 @@ export default defineComponent({
         })
       }
       if (breakTime) {
-        message.error('所选时间不能少于当前系统时间！')
+        // message.error('所选时间不能少于当前系统时间！')
+        message.error(t('room.errorTimeLess'))
         return
       }
 

src/vite-env.d.ts

@@ -5,9 +5,13 @@ declare module '*.vue' {
   const component: DefineComponent<{}, {}, unknown>
   export default component
 }
-
+declare module 'vue-image-crop-upload' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, unknown>
+  export default component
+}
 interface ComponentConstructor<P = any> {
-  new (...args: any[]): {
+  new(...args: any[]): {
     $props: P
   }
 }