web/components/Demand.vue

<template>
  <div class="customer-info">
    <div class="info-title">
      {{$t('report.detail.subscribe')}}
      <div></div>
    </div>
    <n-form require-mark-placement="left" label-align="left" 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 :placeholder="t('report.demand.descTip')" v-model:value="formData.demand" />
      </n-form-item>
      <div class="form-item-btn">
        <n-button class="blue" @click="handleClose">{{t('report.demand.cancel')}}</n-button>
        <n-button class="green" 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: 20px 58px;
  background: #ffffff;
  border-radius: 20px;
  .info-title {
    font-size: 38px;
    font-family: Arial, Arial-Bold;
    font-weight: 700;
    text-align: center;
    color: #1a1a1a;
    > div {
      width: 71px;
      height: 6px;
      background: linear-gradient(90deg, #719d59 2%, #479f82 98%);
      border-radius: 3px;
      margin: auto;
    }
  }
  .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;
  .n-button {
    width: 144px;
    height: 48px;
    border-radius: 8px;
    font-size: 14px;
    font-family: Arial, Arial-Regular;
    text-align: center;
    color: #ffffff;
    line-height: 48px;
    margin-right: 14px;
    cursor: pointer;
    &:last-child {
      margin-right: 0;
    }
  }
  .blue {
    color: #666666;
  }
  // .green {
  //   background: #84a86c;
  // }
}
:deep(.n-form-item-label) {
  color: #666666;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  line-height: var(--size-34);
  border-bottom: 1px solid #e6e6e6;
  padding: 10px 10px 20px 0;
}
:deep(.n-input-wrapper) {
  font-size: var(--size-14);
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  border-bottom: var(--size-1) solid #e6e6e6;
  line-height: var(--size-34);
  padding: 10px 0 20px;
}
:deep(.n-form-item-blank--error .n-input) {
  --n-border-error: var(--size-1) solid transparent !important;
  --n-border-focus-error: var(--size-1) solid transparent !important;
  --n-border-hover-error: var(--size-1) solid transparent !important;
  --n-box-shadow-focus-error: var(--size-1) solid transparent !important;
}
.area {
  width: 100%;
  :deep(.n-form-item-label),
  :deep(.n-input-wrapper) {
    border-bottom: none;
  }
  :deep(.n-input--textarea) {
    background: #fafafa;
    border: var(--size-1) solid #e6e6e6;
    border-radius: var(--size-10);
    padding: 0 var(--size-5);
  }
  :deep(.n-input.n-input--textarea.n-input--resizable .n-input-wrapper) {
    min-height: var(--size-260);
  }
}
</style>