wupengfei
11 小时以前 c2463c02a17f92df55ec77ed2da3fb724290c072
apps/cMiniApp/src/subpackages/curriculum/mineDetailedInfo/InnerPage.vue
@@ -14,10 +14,34 @@
      <nut-form-item
        label="个人生活照(单张照片不超过5m,最多不超过6张):"
        class="bole-form-item person-photo"
        prop="photo"
        prop="photos"
        label-position="top"
      >
        <Uploader v-model:file-list="form.photo" :maximum="6" class="bole-uploader"> </Uploader>
        <Uploader v-model:file-list="form.photos" :maximum="6" class="bole-uploader"> </Uploader>
      </nut-form-item>
      <nut-form-item
        label="个人视频:"
        class="bole-form-item person-photo"
        prop="videos"
        label-position="top"
      >
        <Uploader
          v-model:file-list="form.videos"
          :maximum="1"
          class="bole-uploader"
          :media-type="['video']"
        >
          <template #item="{ item }">
            <video class="editor-video" :src="item.url" />
          </template>
          <template #upload-icon>
            <UploaderIcon color="#808080" />
          </template>
        </Uploader>
        <div class="video-demo">
          <div class="video-demo-title">视频模板</div>
          <video class="editor-video" :src="OssAssets.mine.UseResumeVideo" />
        </div>
      </nut-form-item>
    </nut-form>
  </ContentScrollView>
@@ -27,35 +51,98 @@
</template>
<script setup lang="ts">
import { useUser } from '@/hooks';
import { goBack } from '@/utils';
import { NumberInput } from '@12333/components';
import { useUpdateResume } from '@12333/hooks';
import * as userResumeServices from '@12333/services/apiV2/userResume';
import { convertApiPath2Url, convertFormUrl2Api, Message } from '@12333/utils';
import { FileItem } from '@nutui/nutui-taro/dist/types/__VUE/uploader/type';
import { useQuery } from '@tanstack/vue-query';
import { Uploader as UploaderIcon } from '@nutui/icons-vue-taro';
import { OssAssets } from '@/constants';
defineOptions({
  name: 'InnerPage',
});
const { userDetail } = useUser();
const { updateUserResume } = useUpdateResume();
const form = reactive({
  height: '',
  weight: '',
  photo: [],
const {
  isLoading,
  isError,
  data: detail,
  refetch,
} = useQuery({
  queryKey: ['userResumeServices/getUserResumeDetail'],
  queryFn: async () => {
    return await userResumeServices.getUserResumeDetail(
      {},
      {
        showLoading: false,
      }
    );
  },
  placeholderData: () => ({} as API.GetUserResumeDetailQueryResult),
  onSuccess(data) {
    form.height = data.height;
    form.weight = data.weight;
    form.photos = data.photos?.length ? data.photos.map(convertApiPath2Url) : [];
    form.videos = data.videos?.length ? data.videos.map(convertApiPath2Url) : [];
  },
});
function handleConfirm() {}
const form = reactive({
  height: 0,
  weight: 0,
  photos: [] as FileItem[],
  videos: [] as FileItem[],
});
async function handleConfirm() {
  try {
    let params: API.SaveUserResumeDetailCommand = {
      weight: form.weight,
      height: form.height,
      photos: convertFormUrl2Api(form.photos),
      videos: convertFormUrl2Api(form.videos),
    };
    let res = await userResumeServices.saveUserResumeDetail(params);
    if (res) {
      Message.success('保存成功', {
        onClosed() {
          goBack();
          updateUserResume();
        },
      });
    }
  } catch (error) {}
}
</script>
<style lang="scss">
@import '@/styles/common.scss';
.person-photo {
  .nut-form-item__label {
    padding-right: 0;
.mineDetailedInfo-page-wrapper {
  .person-photo {
    .nut-form-item__label {
      padding-right: 0;
    }
  }
}
.nut-form .nut-cell.bole-form-item:not(.alignTop),
page .nut-form .nut-cell.bole-form-item:not(.alignTop) {
  align-items: flex-start !important;
  .nut-form .nut-cell.bole-form-item:not(.alignTop),
  page .nut-form .nut-cell.bole-form-item:not(.alignTop) {
    align-items: flex-start !important;
  }
  .editor-video {
    width: 200px;
    height: 200px;
  }
  .video-demo {
    .video-demo-title {
      margin: 12px 0;
    }
  }
}
</style>