留言模块

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
+  })
+}

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>

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;
       }
     }
   }