enquiryModal.vue 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
  1. <!--登录弹框 @zjf-2021-01-08-->
  2. <template>
  3. <div class="enquiry_modal">
  4. <el-dialog
  5. :title="L['发送询盘']"
  6. :model-value="modalVisible"
  7. :close-on-click-modal="false"
  8. :show-close="true"
  9. @close="closeModal"
  10. >
  11. <el-form
  12. ref="ruleFormRef"
  13. :model="form"
  14. label-position="top"
  15. label-width="120px"
  16. :rules="rules"
  17. size="large"
  18. status-icon
  19. >
  20. <el-form-item :label="L['姓名']" prop="name">
  21. <el-input v-model="form.name" :placeholder="L['请输入姓名']" clearable />
  22. </el-form-item>
  23. <el-form-item :label="L['邮箱']" prop="email">
  24. <el-input v-model="form.email" :placeholder="L['请输入邮箱']" />
  25. </el-form-item>
  26. <el-form-item :label="L['电话代码']" prop="phoneCode">
  27. <el-select v-model="form.phoneCode" :placeholder="L['选择国家/地区']" filterable clearable allow-create style="width: 100%">
  28. <el-option
  29. v-for="item in countryPhone"
  30. :key="item.value"
  31. :label="item.label"
  32. :value="(item.label+'/'+item.value)">
  33. <span style="float: left">{{ item.label }}</span>
  34. <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
  35. </el-option>
  36. </el-select>
  37. </el-form-item>
  38. <el-form-item :label="L['电话']" prop="phone">
  39. <el-input v-model="form.phone" :placeholder="L['请输入电话']" />
  40. </el-form-item>
  41. <el-form-item :label="L['采购数量']" prop="quantity">
  42. <el-input v-model="form.quantity" min="0" type="number" :placeholder="L['请输入数量']" />
  43. </el-form-item>
  44. <el-form-item :label="L['公司名称']" prop="company">
  45. <el-input v-model="form.company" :placeholder="L['请输入公司名称']" />
  46. </el-form-item>
  47. <el-form-item :label="L['留言']" prop="message">
  48. <el-input
  49. v-model="form.message"
  50. type="textarea"
  51. :rows="8"
  52. :placeholder="L['请输入留言']"
  53. />
  54. </el-form-item>
  55. <el-form-item>
  56. <el-button type="primary" class="self-btn" @click="submitForm(ruleFormRef)" style="flex:48% 0 0;margin:10px 1% 0" :loading="loading"
  57. >{{ L["发送"]}}</el-button
  58. >
  59. <el-button class="cancel-btn" @click="closeModal(ruleFormRef)" style="flex:48% 0 0;margin:10px 1% 0">{{ L["取消"]}}</el-button>
  60. </el-form-item>
  61. </el-form>
  62. </el-dialog>
  63. </div>
  64. </template>
  65. <script setup>
  66. // import { lang_zn } from "@/assets/language/zh";
  67. import { getCurLanguage } from '@/composables/common.js';
  68. import {
  69. ElSelect,
  70. ElOption,
  71. ElMessage,
  72. ElForm,
  73. ElFormItem,
  74. ElButton,
  75. ElInput,
  76. ElDialog,
  77. } from "element-plus";
  78. import { useFiltersStore } from "@/store/filter.js";
  79. const filtersStore = useFiltersStore();
  80. const countryPhone = ref([]);
  81. const emit = defineEmits(["closeLoingModal"]);
  82. const props = defineProps(['itemType','itemId'])
  83. // const L = lang_zn;
  84. const L = getCurLanguage();
  85. const modalVisible = ref(true);
  86. const loading = ref(false);
  87. const ruleFormRef = ref(null);
  88. const form = reactive({
  89. name: "",
  90. email: "",
  91. phoneCode: "",
  92. phone: "",
  93. quantity: "",
  94. company: "",
  95. message: "",
  96. });
  97. if(filtersStore.getMemberInfo.memberEmail){
  98. form.email = filtersStore.getMemberInfo.memberEmail
  99. }
  100. if(filtersStore.getMemberInfo.memberNickName || filtersStore.getMemberInfo.memberName){
  101. form.name = filtersStore.getMemberInfo.memberNickName || filtersStore.getMemberInfo.memberName
  102. }
  103. const checkEmailFun = (rule, value, callback) => {
  104. if (checkEmail(value) !== true) {
  105. callback(new Error(checkEmail(value)))
  106. }
  107. callback()
  108. }
  109. const checkPhoneFun = (rule, value, callback) => {
  110. if (checkPhone(value) !== true) {
  111. callback(new Error(checkPhone(value)))
  112. }
  113. callback()
  114. }
  115. const rules = reactive({
  116. name: [
  117. { required: true, message: L["请输入姓名"], trigger: "blur" },
  118. ],
  119. email: [
  120. { required: true, message: L["请输入邮箱"], trigger: "blur" },
  121. { validator: checkEmailFun, trigger: 'blur'}
  122. ],
  123. phoneCode: [
  124. {
  125. required: true,
  126. message: L["请选择国家/地区"],
  127. trigger: ['blur','change'],
  128. },
  129. ],
  130. // phone: [
  131. // { required: true, message: L["请输入电话"], trigger: "blur" },
  132. // // { validator: checkPhoneFun, trigger: 'blur'}
  133. // ],
  134. company: [
  135. {
  136. required: true,
  137. message: L["请输入公司名称"],
  138. trigger: "blur",
  139. },
  140. ],
  141. message: [
  142. {
  143. required: true,
  144. message: L["请输入留言"],
  145. trigger: "blur",
  146. },
  147. ],
  148. });
  149. //关闭登录modal
  150. const closeModal = (formEl) => {
  151. emit("closeLoingModal");
  152. if (!formEl) return;
  153. formEl.resetFields();
  154. loading.value = false;
  155. };
  156. const submitForm = async (formEl) => {
  157. if (!formEl) return;
  158. await formEl.validate((valid, fields) => {
  159. if (valid) {
  160. loading.value = true;
  161. let url = ''
  162. if (!filtersStore.getLoginFlag) {
  163. url = apiUrl + "v3/member/front/enquiry/add";
  164. } else {
  165. url = apiUrl + "v3/member/front/enquiry/save";
  166. }
  167. let d = {}
  168. d = Object.assign({},form)
  169. d.pageUrl = window.location.href
  170. d.itemId = props.itemId
  171. d.itemType = props.itemType
  172. let a = d.phoneCode
  173. d.phoneCode = a.split('/')[1] ? a.split('/')[1] : ''
  174. d.country = a.split('/')[0]
  175. post(url,d).then((res) => {
  176. if(res.state == 200){
  177. ElMessage.success(res.msg)
  178. loading.value = false;
  179. closeModal(formEl);
  180. }else{
  181. ElMessage.error(res.msg)
  182. }
  183. }).finally(()=>{
  184. loading.value = false;
  185. })
  186. } else {
  187. console.log("error submit!", fields);
  188. }
  189. });
  190. };
  191. //获取国家电话code
  192. const getPhoneCode = () => {
  193. get('v3/member/front/enquiry/phoneCode').then(res=>{
  194. countryPhone.value = res.data;
  195. })
  196. }
  197. onMounted(() => {
  198. getPhoneCode()
  199. })
  200. </script>
  201. <style lang="scss">
  202. @import "@/assets/style/enquiry.scss";
  203. </style>