zhengyiming
1 天以前 1b3d015ebf23534ed2911be8e7ae552793ebfb66
src/views/CPersonManage/components/StaffResumeView.vue
@@ -44,19 +44,56 @@
    <ProFormCol>
      <ProFormColItem :span="12">
        <ProFormItemV2 label="身高:" prop="height">
          <ProFormInputNumber v-model="detail.height"></ProFormInputNumber>
          <ProFormInputNumber v-model="detail.height" unit="cm"></ProFormInputNumber>
        </ProFormItemV2>
      </ProFormColItem>
    </ProFormCol>
    <ProFormCol>
      <ProFormColItem :span="12">
        <ProFormItemV2 label="体重:" prop="weight">
          <ProFormInputNumber v-model="detail.weight"></ProFormInputNumber>
          <ProFormInputNumber v-model="detail.weight" unit="kg"></ProFormInputNumber>
        </ProFormItemV2>
      </ProFormColItem>
    </ProFormCol>
    <ProFormCol>
      <ProFormColItem :span="12">
        <ProFormItemV2 label="鞋码:" prop="shoeSize">
          <ProFormInputNumber v-model="detail.shoeSize" unit="码"></ProFormInputNumber>
        </ProFormItemV2>
      </ProFormColItem>
    </ProFormCol>
    <ProFormItemV2 label="个人照片:" prop="photos">
      <ProFormImageUpload v-model:file-url="detail.photos"> </ProFormImageUpload>
    </ProFormItemV2>
    <ProFormItemV2 label="个人视频:" prop="videos">
      <video-player
        v-for="video in detail.videos"
        :key="video.path"
        class="video-player-box"
        playsinline
        :options="{
          aspectRatio: '16:9',
          autoplay: false,
          muted: false,
          language: 'en',
          fluid: false,
          poster: '', // 封面地址
          controls: true,
          controlBar: {
            timeDivider: false, // 当前时间和持续时间的分隔符
            durationDisplay: false, // 显示持续时间
            remainingTimeDisplay: false, // 是否显示剩余时间功能
            fullscreenToggle: true, // 是否显示全屏按钮
          },
          sources: [
            {
              type: 'video/mp4', // 类型
              src: video.url, // url地址
            },
          ],
        }"
        src="/src/assets/boleclound.png"
      />
    </ProFormItemV2>
  </ProForm>
</template>
@@ -77,6 +114,7 @@
import { useQuery } from '@tanstack/vue-query';
import * as userResumeServices from '@/services/api/userResume';
import { convertApi2FormUrl } from '@/utils';
import { VideoPlayer } from '@videojs-player/vue';
defineOptions({
  name: 'StaffResumeView',
@@ -96,7 +134,9 @@
  workExperience: '',
  height: 0,
  weight: 0,
  shoeSize: 0,
  photos: [] as UploadUserFile[],
  videos: [] as UploadUserFile[],
});
const { isLoading } = useQuery({
@@ -115,9 +155,13 @@
    detail.workExperience = data.workExperience;
    detail.height = data.height ?? 0;
    detail.weight = data.weight ?? 0;
    detail.shoeSize = data.shoeSize ?? 0;
    detail.photos = data.photos
      ? data.photos.map((x) => convertApi2FormUrl(x))
      : ([] as UploadUserFile[]);
    detail.videos = data.videos
      ? data.videos.map((x) => convertApi2FormUrl(x))
      : ([] as UploadUserFile[]);
  },
  enabled: computed(() => !!form.value.id),
});