|
|
@@ -0,0 +1,280 @@
|
|
|
+import OEmpty from '@/components/o-empty'
|
|
|
+import request from '@/helpers/request'
|
|
|
+import {
|
|
|
+ ActionSheet,
|
|
|
+ Button,
|
|
|
+ Dialog,
|
|
|
+ Field,
|
|
|
+ Image,
|
|
|
+ List,
|
|
|
+ Popover,
|
|
|
+ Popup,
|
|
|
+ showConfirmDialog,
|
|
|
+ showToast,
|
|
|
+ Sticky
|
|
|
+} from 'vant'
|
|
|
+import { defineComponent, onMounted, reactive } from 'vue'
|
|
|
+import { useRoute, useRouter } from 'vue-router'
|
|
|
+import styles from './photo.module.less'
|
|
|
+import iconPhoneDefaut from '../images/icon-photo-default.png'
|
|
|
+import OHeader from '@/components/o-header'
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ name: 'phone',
|
|
|
+ props: {
|
|
|
+ height: {
|
|
|
+ type: [String, Number],
|
|
|
+ default: 'auto'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ setup(props) {
|
|
|
+ const route = useRoute()
|
|
|
+ const router = useRouter()
|
|
|
+ const state = reactive({
|
|
|
+ oPopover: false,
|
|
|
+ status: false,
|
|
|
+ isLoading: false,
|
|
|
+ photoName: null, // 相册名称
|
|
|
+ list: [] as any,
|
|
|
+ listState: {
|
|
|
+ dataShow: true, // 判断是否有数据
|
|
|
+ loading: false,
|
|
|
+ finished: false
|
|
|
+ },
|
|
|
+ params: {
|
|
|
+ page: 1,
|
|
|
+ rows: 20
|
|
|
+ },
|
|
|
+ selectItem: {} as any,
|
|
|
+ selectType: 'add'
|
|
|
+ })
|
|
|
+
|
|
|
+ const onAddPhoto = async () => {
|
|
|
+ try {
|
|
|
+ if (!state.photoName) {
|
|
|
+ showToast('请输入相册名称')
|
|
|
+ state.status = true
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (state.selectType === 'add') {
|
|
|
+ await request.post('/api-school/orchestraPhotoAlbum/save', {
|
|
|
+ data: {
|
|
|
+ orchestraId: route.query.orchestraId,
|
|
|
+ name: state.photoName,
|
|
|
+ parentId: route.query.parentId
|
|
|
+ }
|
|
|
+ })
|
|
|
+ setTimeout(() => {
|
|
|
+ showToast('添加成功')
|
|
|
+ }, 100)
|
|
|
+ } else {
|
|
|
+ await request.post('/api-school/orchestraPhotoAlbum/update', {
|
|
|
+ data: {
|
|
|
+ id: state.selectItem.id,
|
|
|
+ orchestraId: route.query.id,
|
|
|
+ parentId: route.query.parentId,
|
|
|
+ name: state.photoName
|
|
|
+ }
|
|
|
+ })
|
|
|
+ setTimeout(() => {
|
|
|
+ showToast('修改成功')
|
|
|
+ }, 100)
|
|
|
+ }
|
|
|
+ state.status = false
|
|
|
+ setTimeout(() => {
|
|
|
+ state.photoName = null
|
|
|
+ onSearch()
|
|
|
+ }, 1100)
|
|
|
+ } catch {
|
|
|
+ //
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const onSearch = () => {
|
|
|
+ state.params.page = 1
|
|
|
+ state.list = []
|
|
|
+ state.listState.dataShow = true // 判断是否有数据
|
|
|
+ state.listState.loading = false
|
|
|
+ state.listState.finished = false
|
|
|
+ getList()
|
|
|
+ }
|
|
|
+
|
|
|
+ // 班级列表
|
|
|
+ const getList = async () => {
|
|
|
+ try {
|
|
|
+ if (state.isLoading) return
|
|
|
+ state.isLoading = true
|
|
|
+ const res = await request.post('/api-school/orchestraPhotoAlbum/page', {
|
|
|
+ data: {
|
|
|
+ ...state.params,
|
|
|
+ orchestraId: route.query.orchestraId,
|
|
|
+ parentId: route.query.parentId
|
|
|
+ }
|
|
|
+ })
|
|
|
+ state.listState.loading = false
|
|
|
+ const result = res.data || {}
|
|
|
+ // 处理重复请求数据
|
|
|
+ if (state.list.length > 0 && result.current === 1) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const rows = result.rows || []
|
|
|
+ state.list = state.list.concat(rows)
|
|
|
+ state.listState.finished = result.current >= result.pages
|
|
|
+ state.params.page = result.current + 1
|
|
|
+ state.listState.dataShow = state.list.length > 0
|
|
|
+ state.isLoading = false
|
|
|
+ } catch {
|
|
|
+ state.listState.dataShow = false
|
|
|
+ state.listState.finished = true
|
|
|
+ state.isLoading = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const onDetail = (item: any) => {
|
|
|
+ sessionStorage.setItem('orchestra-detail-tab', 'photo')
|
|
|
+ router.push({
|
|
|
+ path: '/photo-detail',
|
|
|
+ query: {
|
|
|
+ photoId: item.id,
|
|
|
+ name: item.name
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ const onRename = async () => {
|
|
|
+ state.photoName = state.selectItem.name
|
|
|
+ state.status = true
|
|
|
+ }
|
|
|
+
|
|
|
+ const onRemove = async () => {
|
|
|
+ showConfirmDialog({
|
|
|
+ message: '您确认删除该相册吗？'
|
|
|
+ }).then(async () => {
|
|
|
+ try {
|
|
|
+ await request.post('/api-school/orchestraPhotoAlbum/remove', {
|
|
|
+ requestType: 'form',
|
|
|
+ data: {
|
|
|
+ id: state.selectItem.id
|
|
|
+ }
|
|
|
+ })
|
|
|
+ setTimeout(() => {
|
|
|
+ showToast('删除成功')
|
|
|
+ }, 100)
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ onSearch()
|
|
|
+ }, 1100)
|
|
|
+ } catch {
|
|
|
+ //
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ getList()
|
|
|
+ })
|
|
|
+ return () => (
|
|
|
+ <>
|
|
|
+ <Sticky 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>
|
|
|
+ </Sticky>
|
|
|
+ <div class={styles.phone}>
|
|
|
+ {state.listState.dataShow ? (
|
|
|
+ <List
|
|
|
+ v-model:loading={state.listState.loading}
|
|
|
+ finished={state.listState.finished}
|
|
|
+ finishedText=" "
|
|
|
+ onLoad={getList}
|
|
|
+ immediateCheck={false}
|
|
|
+ class={styles.informationGroup}
|
|
|
+ >
|
|
|
+ <div class={styles.phoneContainer}>
|
|
|
+ {state.list.map((item: any) => (
|
|
|
+ <div class={styles.item} onClick={() => onDetail(item)}>
|
|
|
+ {/* <i class={styles.more}></i> */}
|
|
|
+ <i
|
|
|
+ class={styles.more}
|
|
|
+ onClick={(e: any) => {
|
|
|
+ e.stopPropagation()
|
|
|
+ state.oPopover = true
|
|
|
+ state.selectItem = item
|
|
|
+ state.selectType = 'update'
|
|
|
+ }}
|
|
|
+ ></i>
|
|
|
+
|
|
|
+ {item.coverUrl ? (
|
|
|
+ <Image class={styles.img} src={item.coverUrl} fit="cover" />
|
|
|
+ ) : (
|
|
|
+ <div class={[styles.img, styles.default]}>
|
|
|
+ <Image src={iconPhoneDefaut} class={styles.defaultImg} />
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+
|
|
|
+ <p class={[styles.name, 'van-ellipsis']}>{item.name}</p>
|
|
|
+ <p class={styles.num}>{item.photoCount}张</p>
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ </List>
|
|
|
+ ) : (
|
|
|
+ <OEmpty btnStatus={false} tips="暂无相册" />
|
|
|
+ )}
|
|
|
+
|
|
|
+ <Popup v-model:show={state.status} round style={{ width: '80%' }}>
|
|
|
+ <div class={styles.container}>
|
|
|
+ <div class={styles.dialogTitle}>
|
|
|
+ <i></i>
|
|
|
+ {state.selectType === 'add' ? '新建相册' : '重命名相册'}
|
|
|
+ </div>
|
|
|
+ <Field
|
|
|
+ class={styles.phoneName}
|
|
|
+ v-model={state.photoName}
|
|
|
+ placeholder="请输入相册名称"
|
|
|
+ maxlength={15}
|
|
|
+ />
|
|
|
+
|
|
|
+ <div class={['van-hairline--top van-dialog__footer']}>
|
|
|
+ <Button
|
|
|
+ onClick={() => (state.status = false)}
|
|
|
+ class={['van-button van-button--default van-button--large van-dialog__cancel']}
|
|
|
+ >
|
|
|
+ 取消
|
|
|
+ </Button>
|
|
|
+ <Button
|
|
|
+ onClick={onAddPhoto}
|
|
|
+ class={[
|
|
|
+ 'van-button van-button--default van-button--large van-dialog__confirm van-hairline--left'
|
|
|
+ ]}
|
|
|
+ >
|
|
|
+ 确认
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Popup>
|
|
|
+
|
|
|
+ <ActionSheet
|
|
|
+ cancelText="取消"
|
|
|
+ v-model:show={state.oPopover}
|
|
|
+ closeOnClickAction
|
|
|
+ actions={[
|
|
|
+ { name: '重命名', callback: () => onRename() },
|
|
|
+ { name: '删除', color: '#F44541', callback: () => onRemove() }
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </>
|
|
|
+ )
|
|
|
+ }
|
|
|
+})
|
