相册自动生成

src/school/orchestra/compontent/photo-create.tsx

@@ -3,6 +3,7 @@ import request from '@/helpers/request'
 import {
   ActionSheet,
   Button,
+  closeToast,
   Dialog,
   Field,
   Image,
@@ -10,8 +11,11 @@ import {
   Popover,
   Popup,
   showConfirmDialog,
+  showLoadingToast,
   showToast,
-  Sticky
+  Space,
+  Sticky,
+  Uploader
 } from 'vant'
 import { defineComponent, onMounted, reactive } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -19,6 +23,8 @@ import styles from './photo.module.less'
 import iconPhoneDefaut from '../images/icon-photo-default.png'
 import OHeader from '@/components/o-header'
 import OSticky from '@/components/o-sticky'
+import { getOssUploadUrl } from '@/state'
+import umiRequest from 'umi-request'
 
 export default defineComponent({
   name: 'phone',
@@ -33,6 +39,7 @@ export default defineComponent({
     const router = useRouter()
     const state = reactive({
       oPopover: false,
+      showPhoto: false,
       status: false,
       isLoading: false,
       photoName: null, // 相册名称
@@ -47,7 +54,9 @@ export default defineComponent({
         rows: 20
       },
       selectItem: {} as any,
-      selectType: 'add'
+      selectType: 'add',
+      fileList: [] as any,
+      bucket: 'gyt',
     })
 
     const onAddPhoto = async () => {
@@ -180,22 +189,146 @@ export default defineComponent({
     onMounted(() => {
       getList()
     })
+    const beforeRead = (file: any) => {
+      // console.log(file, 'beforeRead')
+      const isLt2M = file.size / 1024 / 1024 < 5
+      if (!isLt2M) {
+        showToast(`上传文件大小不能超过 5MB`)
+        return false
+      }
+      return true
+    }
+    const beforeDelete = (file: any, detail: { index: any }) => {
+      // this.dataModel.splice(detail.index, 1)
+      return true
+    }
+    const afterRead = async (file: any, detail: any) => {
+      try {
+        file.status = 'uploading'
+        file.message = '上传中...'
+        await uploadFile(file)
+      } catch (error) {
+        //
+        closeToast()
+      }
+    }
+
+    const uploadFile = async (files: any) => {
+      // 上传文件
+      try {
+        console.log(files, 'files')
+        const file = files.file
+        // 获取签名
+        const signUrl = '/api-school/open/getUploadSign'
+        const tempName = file.name || ''
+        const fileName = '/orchestra/' + (tempName && tempName.replace(/ /gi, '_'))
+        const key = new Date().getTime() + fileName
+
+        const res = await request.post(signUrl, {
+          data: {
+            filename: fileName,
+            bucketName: state.bucket,
+            postData: {
+              filename: fileName,
+              acl: 'public-read',
+              key: key,
+              unknowValueField: []
+            }
+          }
+        })
+        showLoadingToast({
+          message: '加载中...',
+          forbidClick: true,
+          loadingType: 'spinner',
+          duration: 0
+        })
+        const obj = {
+          policy: res.data.policy,
+          signature: res.data.signature,
+          key: key,
+          KSSAccessKeyId: res.data.kssAccessKeyId,
+          acl: 'public-read',
+          name: fileName
+        }
+        const formData = new FormData()
+        for (const key in obj) {
+          formData.append(key, obj[key])
+        }
+        formData.append('file', file, fileName)
+        await umiRequest(getOssUploadUrl(state.bucket), {
+          method: 'POST',
+          data: formData
+        })
+        // console.log(getOssUploadUrl(state.bucket) + key)
+        const uploadUrl = getOssUploadUrl(state.bucket) + key
+        closeToast()
+
+        // state.fileList.push({ url: uploadUrl })
+        files.src = uploadUrl
+        files.status = 'done'
+      } catch (error) {
+        files.status = 'failed'
+        console.log(error, 'uploadFile')
+      }
+    }
+
+    // 上传图片
+    const onSubmitPhoto = async () => {
+      try {
+        if (state.fileList.length <= 0) {
+          showToast('请上传照片')
+          return
+        }
+        const files = state.fileList.map((file: any) => {
+          return file.src
+        })
+        console.log(files, 'onSubmitPhoto')
+
+        await request.post('/api-school/orchestraPhoto/save', {
+          data: {
+            orchestraId: route.query.orchestraId,
+            orchestraPhotoAlbumId: route.query.parentId,
+            fileUrl: files.join(',')
+          }
+        })
+
+        state.showPhoto = false
+        state.fileList = []
+        state.params.page = 1
+        state.list = []
+        state.listState.dataShow = true // 判断是否有数据
+        state.listState.loading = false
+        state.listState.finished = false
+        getList()
+      } catch {
+        //
+      }
+    }
     return () => (
       <div class={!state.listState.dataShow && 'emptyRootContainer'}>
         <OSticky position="top">
           <OHeader title={'创建相册'}></OHeader>
-          <Button
-            style={{ margin: '12px auto 0 auto', width: '90%' }}
-            icon="plus"
-            block
-            class={styles.addPhone}
-            onClick={() => {
-              state.status = true
-              state.selectType = 'add'
-            }}
-          >
-            新建相册
-          </Button>
+          <div class={styles.btnGroup}>
+            <Button
+              icon="plus"
+              block
+              class={styles.addPhone}
+              onClick={() => {
+                state.status = true
+                state.selectType = 'add'
+              }}
+            >
+              新建相册
+            </Button>
+            <Button
+              icon="plus"
+              block
+              class={styles.addPhone}
+              onClick={() => (state.showPhoto = true)}
+            >
+              上传照片
+            </Button>
+          </div>
         </OSticky>
         <div class={styles.phone}>
           {state.listState.dataShow ? (
@@ -281,6 +414,46 @@ export default defineComponent({
             ]}
           />
         </div>
+
+        <Popup v-model:show={state.showPhoto} round style={{ width: '92%' }}>
+          <div class={styles.container}>
+            <div class={styles.dialogTitle}>
+              <i></i>
+              上传照片
+            </div>
+
+            <div class={styles.photos}>
+              <Uploader
+                v-model={state.fileList}
+                afterRead={afterRead}
+                beforeRead={beforeRead}
+                beforeDelete={beforeDelete}
+                accept="image/*"
+                maxCount={9}
+              />
+            </div>
+
+            <div class={['van-hairline--top van-dialog__footer']}>
+              <Button
+                onClick={() => {
+                  state.showPhoto = false
+                  state.fileList = []
+                }}
+                class={['van-button van-button--default van-button--large van-dialog__cancel']}
+              >
+                取消
+              </Button>
+              <Button
+                onClick={onSubmitPhoto}
+                class={[
+                  'van-button van-button--default van-button--large van-dialog__confirm van-hairline--left'
+                ]}
+              >
+                确认
+              </Button>
+            </div>
+          </div>
+        </Popup>
       </div>
     )
   }

src/school/orchestra/compontent/photo.module.less

@@ -8,7 +8,13 @@
   border-radius: 10px;
   font-size: 16px;
 }
-
+.btnGroup{
+  display: flex;
+  padding: 12px;
+  .addPhone{
+    margin: 0 8px;
+  }
+}
 .phoneContainer {
   display: flex;
   justify-content: space-between;
@@ -81,3 +87,7 @@
   margin: 0 15px 30px;
   width: auto;
 }
+
+.photos {
+  padding: 0 16px 16px;
+}