From 52a068bf7d9d29b1a49b42cd79518f930b3f4a50 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=86=8A=E4=B8=BD=E5=90=9B?= <664953382@qq.com>
Date: Tue, 25 Jan 2022 09:30:32 +0800
Subject: [PATCH] =?UTF-8?q?=E7=95=99=E8=A8=80=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/config.js                     |   9 +++
 src/components/webContact/index.vue   | 105 ++++++++++++++++++++++++++
 src/views/website/innovate/detail.vue |   8 +-
 3 files changed, 120 insertions(+), 2 deletions(-)
 create mode 100644 src/api/config.js
 create mode 100644 src/components/webContact/index.vue

diff --git a/src/api/config.js b/src/api/config.js
new file mode 100644
index 0000000..5194aaa
--- /dev/null
+++ b/src/api/config.js
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function launch(data) {
+  return request({
+    url: '/v1/message/launch',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/components/webContact/index.vue b/src/components/webContact/index.vue
new file mode 100644
index 0000000..5d9c2b1
--- /dev/null
+++ b/src/components/webContact/index.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-form
+    label-position="top"
+    ref="formRef"
+    :model="form"
+    :rules="rules"
+    label-width="100px"
+  >
+    <div style="margin-bottom: 15px">
+      <span
+        class="x_bg_blue"
+        style="
+          display: inline-block;
+          width: 5px;
+          height: 5px;
+          margin: 0 5px;
+          vertical-align: middle;
+        "
+      ></span>
+      联系我
+    </div>
+    <el-form-item label="" prop="content">
+      <el-input
+        v-model="form.content"
+        type="textarea"
+        :autosize="{ minRows: 4, maxRows: 6 }"
+        placeholder="请输入需求"
+      ></el-input>
+    </el-form-item>
+    <el-form-item label="姓名" prop="name">
+      <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
+    </el-form-item>
+    <el-form-item label="单位" prop="company">
+      <el-input v-model="form.company" placeholder="请输入所在单位"></el-input>
+    </el-form-item>
+    <el-form-item label="联系电话" prop="mobile">
+      <el-input
+        v-model="form.mobile"
+        maxlength="11"
+        placeholder="请输入联系电话"
+      ></el-input>
+    </el-form-item>
+    <el-form-item label="邮箱">
+      <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
+    </el-form-item>
+    <el-form-item>
+      <el-button class="x_btns" @click="submitForm">提交</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+<script setup>
+import { launch } from "@/api/config";
+const { proxy } = getCurrentInstance();
+const data = reactive({
+  form: {},
+  rules: {
+    content: [{ required: true, message: "需求内容不能为空", trigger: "blur" }],
+    name: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
+    company: [{ required: true, message: "单位不能为空", trigger: "blur" }],
+    mobile: [
+      { required: true, message: "联系电话不能为空", trigger: "blur" },
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+const { form, rules } = toRefs(data);
+/** 表单重置 */
+function reset() {
+  form.value = {
+    content: undefined,
+    name: undefined,
+    company: undefined,
+    mobile: undefined,
+    email: undefined,
+  };
+  proxy.resetForm("formRef");
+}
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["formRef"].validate((valid) => {
+    if (valid) {
+      launch(form.value).then((res) => {
+        proxy.$modal.msgSuccess(res.message);
+        reset();
+      });
+    }
+  });
+}
+</script>
+<style lang="scss" scoped>
+.el-form-item {
+  margin-bottom: 15px;
+}
+::v-deep .el-form-item--medium .el-form-item__label {
+  line-height: 22px;
+  padding-bottom: 5px;
+}
+.x_btns {
+  width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/website/innovate/detail.vue b/src/views/website/innovate/detail.vue
index 7c9a174..4f0d183 100644
--- a/src/views/website/innovate/detail.vue
+++ b/src/views/website/innovate/detail.vue
@@ -1,4 +1,4 @@
-<template>
+<template>
   <div class="innovate">
     <div class="box conter1000" v-loading="loading">
       <div class="head">
@@ -26,7 +26,9 @@
         <div class="_l">
           <div class="html" v-html="state.data.content"></div>
         </div>
-        <div class="_r">联系我</div>
+        <div class="_r">
+          <webContact />
+        </div>
       </div>
     </div>
     <webFooter></webFooter>
@@ -36,6 +38,7 @@
 <script setup>
 import webFooter from "@/components/webFooter/index.vue";
 import webBreadcrumb from "@/components/webBreadcrumb/index.vue";
+import webContact from "@/components/webContact/index.vue";
 import request from '@/utils/request'
 // to do 创新服务详情
 function detail (id) {
@@ -143,6 +146,7 @@ function getData () {
       ._r {
         flex: 1;
         background-color: #fff;
+        padding: 15px;
       }
     }
   }