web/components/Demand.vue

<template>
  <div class="customer-info">
    <n-form require-mark-placement="left" label-width="auto" ref="formRef" :model="formData" :rules="rules">
      <!-- <n-form-item v-show="rowType === '1' && language === 'zh-CN'" > -->
      <div class="info-tips" v-if="rowType === '1' && language === 'zh-CN'">
        注明: 此报告为付费报告，客户可在购买前免费索取样本，样本中不包含关键数据点，仅供客户具体了解报告详细框架和细节。
      </div>
      <!-- </n-form-item> -->
      <n-form-item label="版本" label-placement="left" v-if="rowType === '1' && language === 'zh-CN'" path="version">
        <!-- <n-input :defaultValue="rowRegion === '0'?'中国':'全球与中国'" readonly/> -->
        <n-radio-group bame="version" v-model:value="formData.version" :style="{'width':'100%'}">
          <div class="customer-info-china">
            <n-radio value="0">中国</n-radio>
            <label>中国版本主要关注中国本土市场</label>
          </div>
          <div class="customer-info-global">
            <n-radio value="1">全球与中国</n-radio>
            <label class="global-title">全球及中国版本主要关注全球市场</label>
          </div>
        </n-radio-group>
      </n-form-item>
      <n-form-item :label="t('report.demand.companyName')" label-placement="left" path="companyName">
        <n-input :placeholder="t('report.demand.companyNameTip')" v-model:value="formData.companyName" />
      </n-form-item>
      <n-form-item :label="t('report.demand.address')" label-placement="left" path="addr">
        <n-input :placeholder="t('report.demand.addressTip')" v-model:value="formData.addr" />
      </n-form-item>
      <n-form-item :label="t('report.demand.email')" label-placement="left" path="email">
        <n-input :placeholder="t('report.demand.emailTip')" v-model:value="formData.email" />
      </n-form-item>
      <n-form-item :label="t('report.demand.phone')" label-placement="left" path="contact" :show-require-mark="language ===  'zh-CN'">
        <n-input :placeholder="t('report.demand.phoneTip')" v-model:value="formData.contact" />
      </n-form-item>
      <n-form-item :label="t('report.demand.person')" label-placement="left" path="name">
        <n-input :placeholder="t('report.demand.personTip')" v-model:value="formData.name" />
      </n-form-item>
      <n-form-item :label="t('report.demand.desc')" label-placement="left" path="demand">
        <n-input type="textarea" :placeholder="t('report.demand.descTip')" v-model:value="formData.demand" />
      </n-form-item>
      <div class="form-item-btn">
        <n-button @click="handleClose">{{t('report.demand.cancel')}}</n-button>
        <n-button type="primary" @click="handleSubmit">{{t('report.demand.submit')}}</n-button>
      </div>
    </n-form>
  </div>
</template>

<script setup>
//import { useLocaleStoreWithOut } from '@/store';
import {
  // NForm,
  // NFormItem,
  // NInput,
  // NButton,
  // FormRules,
  createDiscreteApi,
  // NRadio,
  // NRadioGroup,
} from "naive-ui";
import { ref, reactive, onMounted } from "vue";
import { useI18n } from "#imports";
import { useUserStore } from "@/store/user";
const userStore = useUserStore();
const language = ref();
onMounted(() => (language.value = userStore.getLang));

const { t } = useI18n();
const emit = defineEmits(["closeDialog"]);
const prop = defineProps({
  rowId: {
    type: String,
    default: "",
  },
  rowPrice: {
    type: String,
    default: null,
  },
  rowType: {
    type: String,
    default: null,
  },
  rowRegion: {
    type: String,
    default: null,
  },
});

const message = createDiscreteApi(["message"]);
const formRef = ref();
const formData = reactive({
  name: "", // 姓名
  contact: "", // 联系方式
  email: "", // 邮箱
  companyName: "", // 名称
  demand: "", // 需求
  reportId: "", // 报告id
  reportPrice: "", // 报告单价
  addr: "", // 联系地址
  type: "", //类型,1.样本，2.定制
  version: "", //
});
const rules = {
  version: [
    {
      required: true,
      trigger: ["input", "blur"],
      validator (rule, value) {
        if (!value) {
          return new Error("请选择版本");
        }
        return true;
      },
    },
  ],
  companyName: [
    {
      required: true,
      trigger: ["input", "blur"],
      validator (rule, value) {
        if (!value) {
          return new Error(t("report.demand.companyNameTip"));
        }
        return true;
      },
    },
  ],
  // addr: [{
  //     required: true,
  //     trigger: ['input','blur'],
  //     validator(rule: FormItemRule, value: string){
  //         if(!value){
  //             return new Error(t('report.demand.addressTip'));
  //         }
  //         return true;
  //     }
  // }],
  email: [
    {
      required: true,
      trigger: ["blur"],
      validator (rule, value) {
        if (!value) {
          return new Error(t("report.demand.emailTip"));
        } else if (!isEmail(value)) {
          return new Error(t("report.demand.emailFormat"));
        }
        return true;
      },
    },
  ],
  contact: [
    {
      required: true,
      trigger: ["blur"],
      validator (rule, value) {
        if (!value && language.value == "zh-CN") {
          return new Error(t("report.demand.phoneTip"));
        } else if (!isPhoneNumber(value) && language.value === "zh-CN") {
          return new Error(t("report.demand.phoneFormat"));
        }
        return true;
      },
    },
  ],
  name: [
    {
      required: true,
      trigger: ["blur", "input"],
      validator (rule, value) {
        if (!value) {
          return new Error(t("report.demand.personTip"));
        }
        return true;
      },
    },
  ],
  demand: [
    {
      required: true,
      trigger: ["input", "blur"],
      validator (rule, value) {
        if (!value) {
          return new Error(t("report.demand.descTip"));
        }
        return true;
      },
    },
  ],
};

// const rules = {
//     companyName: {
//         required: true,
//         message: '请输入公司名称',
//         trigger: ['input','blur']
//     }
// }

// 提交
function handleSubmit () {
  formRef.value?.validate(async (errors) => {
    if (!errors) {
      formData.reportId = prop.rowId;
      formData.reportPrice = prop.rowPrice;
      formData.type = prop.rowType;
      await customerInfoSave(formData);
      emit("closeDialog");
      message.message.success(t("report.demand.success"));
    }
  });
}

// 关闭
function handleClose () {
  emit("closeDialog");
}
</script>

<style lang="scss" scoped>
.customer-info {
  padding-top: 20px;
  .info-tips {
    padding-bottom: 20px;
    color: #f00;
  }
  .customer-info-china,
  .customer-info-global {
    display: flex;
    justify-content: space-between;
  }
  .customer-info-china {
    padding-bottom: 20px;
  }
}
.form-item-btn {
  display: flex;
  justify-content: center;
  button:nth-child(1) {
    margin-right: 60px;
  }
}
</style>