sourcingForm.vue 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  1. <template>
  2. <div class="form">
  3. <el-form :model="form" ref="ruleFormRef" status-icon :rules="rules">
  4. <el-form-item prop="name">
  5. <el-input v-model="form.name" :placeholder="L['请输入姓名']" />
  6. </el-form-item>
  7. <el-form-item prop="email">
  8. <el-input v-model="form.email" :placeholder="L['请输入邮箱']" />
  9. </el-form-item>
  10. <el-form-item prop="quantity">
  11. <el-input-number
  12. v-model="form.quantity"
  13. :min="0"
  14. :max="199999999"
  15. :controls="false"
  16. :placeholder="L['请输入数量'] + ' ( 0~199999999 ) '"
  17. />
  18. </el-form-item>
  19. <el-form-item prop="message">
  20. <el-input
  21. v-model="form.message"
  22. type="textarea"
  23. :rows="5"
  24. :placeholder="L['请输入留言']"
  25. />
  26. </el-form-item>
  27. <el-form-item>
  28. <el-col :span="12">
  29. <el-button
  30. type="primary"
  31. class="self-btn"
  32. :loading="loading"
  33. block
  34. @click="submitForm(ruleFormRef)"
  35. >{{ L["立即发布您的需求"] }}</el-button
  36. >
  37. </el-col>
  38. </el-form-item>
  39. </el-form>
  40. </div>
  41. </template>
  42. <script setup>
  43. import {
  44. ElForm,
  45. ElFormItem,
  46. ElButton,
  47. ElSelect,
  48. ElOption,
  49. ElInput,
  50. ElCol,
  51. ElMessage,
  52. } from "element-plus";
  53. import { useFiltersStore } from "@/store/filter.js";
  54. import { useRouter } from "vue-router";
  55. const router = useRouter();
  56. const filtersStore = useFiltersStore();
  57. const L = getCurLanguage();
  58. const loading = ref(false);
  59. const ruleFormRef = ref(null);
  60. // do not use same name with ref
  61. const form = reactive({
  62. name: "",
  63. message: "",
  64. email: "",
  65. quantity: undefined,
  66. });
  67. const email = computed(() => filtersStore.getMemberInfo.memberEmail ?? "");
  68. const name = computed(
  69. () =>
  70. filtersStore.getMemberInfo.memberNickName ||
  71. filtersStore.getMemberInfo.memberName
  72. );
  73. const checkEmailFun = (rule, value, callback) => {
  74. if (checkEmail(value) !== true) {
  75. callback(new Error(checkEmail(value)));
  76. }
  77. callback();
  78. };
  79. const rules = reactive({
  80. name: [{ required: true, message: L["请输入姓名"], trigger: "blur" }],
  81. quantity: [
  82. { required: true, message: L["请输入数量"], trigger: "blur" },
  83. ],
  84. email: [
  85. { required: true, message: L["请输入邮箱"], trigger: "blur" },
  86. { validator: checkEmailFun, trigger: "blur" },
  87. ],
  88. message: [
  89. {
  90. required: true,
  91. message: L["请输入留言"],
  92. trigger: "blur",
  93. },
  94. ],
  95. });
  96. // 设置表单缓存
  97. const setFormData2Cache = () => {
  98. localStorage.setItem("quotations", JSON.stringify(form));
  99. };
  100. // 删除表单缓存
  101. const clearFormDataFromCache = () => {
  102. localStorage.removeItem("quotations");
  103. };
  104. // 获取表单缓存
  105. const getFormDataFromCache = () => {
  106. const data = localStorage.getItem("quotations") ?? "";
  107. try {
  108. return JSON.parse(data);
  109. } catch {
  110. return undefined;
  111. }
  112. };
  113. //提交按钮
  114. const submitForm = async (formEl) => {
  115. if (!formEl) return;
  116. await formEl.validate((valid, fields) => {
  117. if (valid) {
  118. let url = apiUrl + "v3/member/front/enquiry/save";
  119. if (!filtersStore.getLoginFlag) {
  120. return openLoginDialog({
  121. onRegister: () => {
  122. setFormData2Cache();
  123. router.push({
  124. path: "/register",
  125. });
  126. },
  127. onForgot: () => {
  128. setFormData2Cache();
  129. router.push({
  130. path: "/member/login/forget",
  131. });
  132. },
  133. });
  134. }
  135. loading.value = true;
  136. form.pageUrl = window.location.href;
  137. form.itemType = "MALL";
  138. post(url, form).then((res) => {
  139. loading.value = false;
  140. if (res.state == 200) {
  141. ElMessage.success(res.msg);
  142. clearFormDataFromCache();
  143. } else {
  144. ElMessage.error(res.msg);
  145. }
  146. });
  147. } else {
  148. console.log("error submit!", fields);
  149. }
  150. });
  151. };
  152. onMounted(() => {
  153. if (getFormDataFromCache() !== undefined) {
  154. const data = getFormDataFromCache();
  155. form.email = data.email;
  156. form.name = data.name;
  157. form.message = data.message;
  158. form.quantity = data.quantity;
  159. } else {
  160. form.email = email.value;
  161. form.name = name.value;
  162. }
  163. });
  164. </script>
  165. <style lang="scss" scoped>
  166. .form {
  167. :deep(.el-input-number) {
  168. width: 100% !important;
  169. .el-input__inner {
  170. text-align: left;
  171. }
  172. .el-input__validateIcon {
  173. display: none;
  174. }
  175. }
  176. }
  177. .self-btn {
  178. width: 100%;
  179. background: #00985e;
  180. }
  181. .self-btn:focus,
  182. .self-btn:hover {
  183. border-color: #1ba66c;
  184. background-color: #1ba66c;
  185. }
  186. </style>