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

import OEmpty from '@/components/o-empty'
import request from '@/helpers/request'
import {
  ActionSheet,
  Button,
  Cell,
  CellGroup,
  Dialog,
  Field,
  Image,
  List,
  Picker,
  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 iconOrchestra from '@/views/mine-orchestra/images/icon-or.png'
import OSticky from '@/components/o-sticky'
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',
      schoolStatus: false,
      schoolList: [],
      school: {} as any
    })

    const onAddPhoto = async () => {
      try {
        if (!state.photoName) {
          showToast('请输入相册名称')
          state.status = true
          return
        }
        if (state.selectType === 'add') {
          await request.post('/api-school/orchestraPhotoAlbum/save', {
            data: {
              name: state.photoName
            }
          })
          // setTimeout(() => {
          //   showToast('添加成功')
          // }, 100)
          state.status = false
          state.photoName = null
          onSearch()
        } else {
          await request.post('/api-school/orchestraPhotoAlbum/update', {
            data: {
              id: state.selectItem.id,
              orchestraId: route.query.id,
              name: state.photoName
            }
          })
          state.status = false
          state.photoName = null
          onSearch()
          // setTimeout(() => {
          //   showToast('修改成功')
          // }, 100)
        }
        state.status = false
        state.photoName = null
        onSearch()
        // 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,
            schoolId: state.school.id
          }
        })
        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 getSchoolList = async () => {
    //   try {
    //     const res = await request.post('/api-school/school/page', {
    //       data: {
    //         page: 1,
    //         rows: 999
    //       }
    //     })
    //     if (Array.isArray(res.data?.rows)) {
    //       state.schoolList = res.data.rows.map((n: any) => {
    //         return {
    //           name: n.name || '',
    //           id: n.id || ''
    //         }
    //       })
    //       const tmpSchool = sessionStorage.getItem('school-photo')
    //       state.school = tmpSchool ? JSON.parse(tmpSchool) : state.schoolList[0] || {}
    //     }
    //   } catch {
    //     //
    //   }
    // }

    const onDetail = (item: any) => {
      sessionStorage.setItem('orchestra-detail-tab', 'photo')
      router.push({
        path: '/orchestra-photo-create',
        query: {
          orchestraId: route.query.id,
          name: item.name,
          parentId: item.id
        }
      })
      // 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
            }
          })
          onSearch()
        } catch {
          //
        }
      })
    }

    onMounted(async () => {
      // await getSchoolList()
      await getList()
    })
    return () => (
      <div
        class={[styles.phone, !state.listState.dataShow && 'emptyRootContainer']}
        style={{ minHeight: `calc(100vh - ${props.height}px)` }}
      >
        <OSticky position="top">
          <OHeader>
            {{
              right: () => (
                <span
                  class={styles.addPhotoTop}
                  onClick={() => {
                    state.status = true
                    state.selectType = 'add'
                  }}
                >
                  添加相册
                </span>
              )
            }}
          </OHeader>
        </OSticky>
        {/* <Sticky position="top" offsetTop={props.height} style={{ width: '100%' }}>
          <Cell class={styles.select} center isLink onClick={() => (state.schoolStatus = true)}>
            {{
              icon: () => <img class={styles.icon} src={iconOrchestra} />,
              title: () => <div class="van-ellipsis">{state.school.name}</div>
            }}
          </Cell>
        </Sticky> */}

        {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>

                  <div
                    class={styles.img}
                    style={
                      item.coverUrl
                        ? { backgroundImage: `url(${item.coverUrl})`, backgroundSize: 'cover' }
                        : ''
                    }
                  ></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() }
          ]}
        />

        {/* <Popup v-model:show={state.schoolStatus} position="bottom" round>
          <Picker
            columns={state.schoolList}
            columnsFieldNames={{ text: 'name', value: 'id' }}
            onCancel={() => (state.schoolStatus = false)}
            onConfirm={({ selectedValues }: any) => {
              const val = selectedValues[0] || ''
              state.schoolStatus = false
              if (val == state.school?.id) {
                return
              }
              const active = state.schoolList.find((n: any) => n.id == val) || {}
              state.school = active
              sessionStorage.setItem('school-photo', JSON.stringify(active))
              onSearch()
            }}
          />
        </Popup> */}
      </div>
    )
  }
})