national-motion-web/src/views/informationManagement/shopInfo/index.vue

<template>
  <div class="p-8px bg-white">
    <div class="px-4">
      <BasicForm @register="registerForm">
        <template #title1>
          <TypographyTitle :level="4">基础信息</TypographyTitle>
          <Divider></Divider>
        </template>
        <template #address="{ model }">
          <JAreaSelect v-model:province="model['province']" v-model:city="model['city']" v-model:area="model['area']"> </JAreaSelect>
        </template>
        <template #phone="{ model, field }">
          <Input v-model:value="model[field]"></Input>
          <span class="text-gray">用户拨打商家电话时，拨打的号码为该号码。</span>
        </template>

        <template #title3>
          <TypographyTitle :level="4">视频/图片</TypographyTitle>
          <Divider></Divider>
        </template>
        <template #VideoUpload="{ model, field }">
          <uploadVideo v-model:model-value="model[field]"></uploadVideo>
          <span class="text-gray">单个视频；时长10s ~ 5分钟以内；宽高比为5:4。单个文件不超过100M；</span>
        </template>

        <template #title4>
          <div class="flex items-center">
            <TypographyTitle :level="4">VR实景 </TypographyTitle>
            <span class="ml-8 text-gray">找一个能呈现体育馆特点的站点，拍摄前、后，左、右，上、下6张图片。 </span>
          </div>
          <Divider></Divider>
        </template>

        <template #formFooter>
          <div style="margin: 0 auto">
            <a-button type="primary" @click="save" class="mr-2" :loading="isLoading"> 保存 </a-button>
            <a-button type="error" @click="back" class="mr-2"> 关闭 </a-button>
          </div>
        </template>
      </BasicForm>
      <div class="h-20px"></div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { TypographyTitle, Divider, FormItem, Textarea, Input, message } from 'ant-design-vue';
  import { BasicForm, useForm, JAreaSelect } from '/@/components/Form/index';
  import uploadVideo from '@/components/uploadVideo/index.vue';
  import { onUnmounted, ref, watch } from 'vue';
  import { useUserStore } from '/@/store/modules/user';
  const { userInfo } = storeToRefs(useUserStore());

  import { formSchema } from './shopInfo.data';
  import { isCertified, queryById, saveOrUpdate } from './shopInfo.api';
  import { router } from '/@/router';
  import { storeToRefs } from 'pinia';
  const [registerForm, { setProps, resetFields, setFieldsValue, updateSchema, validate, clearValidate, getSchemaByField, getFieldsValue }] = useForm({
    schemas: formSchema,
    showActionButtonGroup: false,
    labelWidth: 200,
    labelCol: { span: 4 },
    wrapperCol: { span: 18 },
  });
  const isEdit = ref(false);
  const isLoading = ref(false);
  function back() {
    router.back();
  }

  async function getisCertified() {
    const res = await isCertified(userInfo.value?.orgCode);
    console.log(res, 'rens ');
    if (res) {
      setFieldsValue({ isCertified: true });
      updateSchema({ field: 'isCertified', componentProps: { disabled: true } });
    }
  }
  getisCertified();
  async function getData(id) {
    const res = await queryById(id);
    console.log(res, 'asdsad');
    if (!res.id) return;
    const vr = res.vr ? res.vr.split(',') : null;
    isEdit.value = true;
    setFieldsValue({
      ...res,
      categoryId: res.categoryId ? res.categoryId.split(',') : null,
      Time: res.startTime ? [res.startTime, res.endTime].join(',') : null,
      down: vr ? vr[vr.length - 1] : null,
      up: vr ? vr[4] : null,
      before: vr ? vr[0] : null,
      after: vr ? vr[1] : null,
      left: vr ? vr[2] : null,
      right: vr ? vr[3] : null,
    });
  }
  getData(userInfo.value?.orgCode);
  async function save() {
    const res = await isCertified(userInfo.value?.orgCode);
    if (!res) return message.error('请完成企业认证！');
    await validate();
    isLoading.value = true;
    const form = await getFieldsValue();
    console.log(form, 'av');

    const obj = {
      ...form,
      startTime: form.Time ? form.Time.split(',')[0] : '',
      endTime: form.Time ? form.Time.split(',')[1] : '',
      vr: '',
    };
    if (form.before || form.after || form.left || form.right || form.up || form.down) {
      if (!form.before || !form.after || !form.left || !form.right || !form.up || !form.down) return message.error('请上传完整VR实景');
      obj.vr = [form.before, form.after, form.left, form.right, form.up, form.down].join(',');
    }
    try {
      await saveOrUpdate(obj, isEdit.value);
      getData(userInfo.value?.orgCode);
      isLoading.value = false;
    } catch (error) {
      isLoading.value = false;
    }
  }
</script>