designer-hub/packages/merchant/src/pages/agent/designer/archives/award/imgs.vue

<route lang="json">
{ "style": { "navigationBarTitleText": "个人照片", "navigationBarBackgroundColor": "#fff" } }
</route>
<script setup lang="ts">
import { getDesignerBasicInfo, updateDesignerBasicInfo } from '@/core/libs/agent-requests'
import BottomAppBar from '@/components/bottom-app-bar.vue'

const id = ref()
const formData = ref()
const action = ref(`${import.meta.env.VITE_SERVER_BASEURL}/app-api/infra/file/upload`)
const { data: basicData, run: setBasicData } = useRequest(() => getDesignerBasicInfo(id.value))
const urls = computed(() => {
  return basicData.value?.imageUrl && Array.isArray(basicData.value?.imageUrl)
    ? basicData.value?.imageUrl
    : basicData.value?.imageUrl.split(',')
})
const fileList = computed(() => {
  const imgList =
    basicData.value?.imageUrl && Array.isArray(basicData.value?.imageUrl)
      ? basicData.value?.imageUrl
      : basicData.value?.imageUrl.split(',')
  return imgList?.map((item: string) => {
    return { url: item }
  })
})
const submitUpload = async () => {
  if (formData.value) {
    const { code } = await updateDesignerBasicInfo(
      Object.assign({}, { ...basicData.value }, { imageUrl: formData.value }),
    )
    if (code === 0) {
      uni.navigateBack()
    }
  }
}
const handleChange = ({ fileList }) => {
  formData.value = fileList
    .map((m: any) => {
      if (m.response) {
        return JSON.parse(m.response).data
      } else {
        return m.url
      }
    })
    .join(',')
}
onLoad((query?: Record<string | 'id', string>) => {
  if (query?.id) {
    id.value = query?.id
    setBasicData()
    formData.value = basicData.value?.imageUrl
  }
})
</script>

<template>
  <div class="py-12px pl-16px pr-10px">
    <wd-upload
      :file-list="fileList"
      multiple
      image-mode="aspectFill"
      :action="action"
      @change="handleChange"
    ></wd-upload>
    <!-- 保存 按钮 -->
    <BottomAppBar fixed placeholder>
      <wd-button
        type="primary"
        :round="false"
        block
        style="backdrop-filter: blur(10px)"
        class="mt-20px"
        @click="submitUpload"
      >
        保存
      </wd-button>
    </BottomAppBar>
  </div>
</template>

<style scoped lang="scss">
::v-deep .wd-upload {
  justify-content: space-between;
}
::v-deep .wd-upload__preview,
::v-deep .wd-upload__evoke {
  height: 200px !important;
  width: 168px !important;
  border-radius: 8px !important;
}
</style>