fix: 图片预览1

src/apis/home.ts

@@ -14,5 +14,5 @@ export const trayOut = (): Promise<null> => http.post('tray/out')
 export const photoList = (params: System.Page): Promise<null> => http.get('/photo/list', { params })
 export const takePhoto = (params?: { lightIntensity: number | null }): Promise<string> => http.post('/photo/take', params)
 export const savePhoto = (params: any): Promise<null> => http.post('/photo/save', params)
-export const getPhoto = (id: number): Promise<string> => http.get(`/photo/id=${id}`)
+export const getPhoto = (id: number): Promise<string> => http.get(`/photo/${id}`)
 export const delPhoto = (ids: string): Promise<string> => http.delete(`/photo/${ids}`)

src/components/home/EditPhoto/index.vue

@@ -2,6 +2,7 @@
 import { getPhoto, savePhoto } from 'apis/home'
 import { getOreList } from 'apis/ore'
 import { FtMessage } from 'libs/message'
+import { ImageViewer as TImageViewer } from 'tdesign-mobile-vue'
 import { onMounted, ref } from 'vue'
 
 const props = defineProps({
@@ -71,6 +72,16 @@ const mousedownHandle = async (e: Event) => {
 }
 
 const activeTube = ref(Array.from({ length: 16 }).fill(false))
+
+const previewVisible = ref(false)
+const photos = ref<string[]>([])
+const previewHandle = () => {
+  if (!form.value.url) {
+    return
+  }
+  photos.value = [form.value.url]
+  previewVisible.value = true
+}
 </script>
 
 <template>
@@ -83,11 +94,8 @@ const activeTube = ref(Array.from({ length: 16 }).fill(false))
           </div>
           <el-image
             :src="form.url"
-            :zoom-rate="1.2"
-            :max-scale="7"
-            :min-scale="0.2"
-            :preview-src-list="[form.url]"
             fit="contain"
+            @click="previewHandle"
           >
             <template #error>
               <div class="image-slot">
@@ -110,6 +118,7 @@ const activeTube = ref(Array.from({ length: 16 }).fill(false))
         </el-input>
       </el-form-item>
     </el-form>
+    <TImageViewer v-model:images="photos" v-model:visible="previewVisible" />
   </FtDialog>
 </template>
 

src/components/home/SavePhoto/index.vue

@@ -2,6 +2,7 @@
 import { savePhoto } from 'apis/home'
 import { getOreList } from 'apis/ore'
 import { FtMessage } from 'libs/message'
+import { ImageViewer as TImageViewer } from 'tdesign-mobile-vue'
 import { onMounted, ref } from 'vue'
 
 const props = defineProps({
@@ -68,6 +69,15 @@ const mousedownHandle = async (e: Event) => {
 }
 
 const activeTube = ref(Array.from({ length: 16 }).fill(false))
+const previewVisible = ref(false)
+const photos = ref<string[]>([])
+const previewHandle = () => {
+  if (!props.url) {
+    return
+  }
+  photos.value = [props.url]
+  previewVisible.value = true
+}
 </script>
 
 <template>
@@ -80,11 +90,8 @@ const activeTube = ref(Array.from({ length: 16 }).fill(false))
           </div>
           <el-image
             :src="url"
-            :zoom-rate="1.2"
-            :max-scale="7"
-            :min-scale="0.2"
-            :preview-src-list="[url]"
             fit="contain"
+            @click="previewHandle"
           >
             <template #error>
               <div class="image-slot">
@@ -107,6 +114,7 @@ const activeTube = ref(Array.from({ length: 16 }).fill(false))
         </el-input>
       </el-form-item>
     </el-form>
+    <TImageViewer v-model:images="photos" v-model:visible="previewVisible" />
   </FtDialog>
 </template>
 

src/views/home/index.vue

@@ -313,7 +313,7 @@ const warmUpStart = async () => {
 
 const lightVisible = ref(false)
 
-const photoUrl = ref('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg')
+const photoUrl = ref('')
 
 const take_photo = async () => {
   const params = {
@@ -328,7 +328,7 @@ const savePhoto = () => {
 }
 
 const previewVisible = ref(false)
-const photos = ref([])
+const photos = ref<string[]>([])
 const previewHandle = () => {
   if (!photoUrl.value) {
     return

src/views/taskLog/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { delPhoto, photoList } from 'apis/home'
 import EditPhoto from 'components/home/EditPhoto/index.vue'
-import { ElMessageBox } from 'element-plus'
+import { ElButton, ElMessageBox } from 'element-plus'
 import { FtMessage } from 'libs/message'
 import { h, ref, useTemplateRef } from 'vue'
 
@@ -40,7 +40,7 @@ const columns = [
     title: '操作',
     render: (row: any) => {
       return h(
-        'el-button',
+        ElButton,
         {
           type: 'primary',
           size: 'small',