联系我们

src/App.vue

@@ -65,7 +65,11 @@ const { x, y, isScrolling, arrivedState, directions } = useScroll(appRef)
                 <span data-v-301b55a5="">返回</span>
             </div>
         </div>
-        ]
+
+
+        
+
+
     </NConfigProvider>
 </template>
 

src/api/index.ts

@@ -2,8 +2,6 @@ import type { AxiosProgressEvent, GenericAbortSignal } from 'axios'
 import { post, get } from '@/utils/request'
 import { useAuthStore, useSettingStore } from '@/store'
 
-
-
 export function fetchCase<T>() {
     return get<T>({
         url: '/web/cases'
@@ -33,3 +31,10 @@ export function fetchAbility<T>(id: any) {
         url: `/web/ability/${id}`
     })
 }
+
+export function fetchConnect<T>(data: any) {
+    return post<T>({
+        url: `/web/connect/save`,
+        data: data
+    })
+}

src/components/common/ConnectForm.vue

@@ -22,15 +22,33 @@
 </template>
 
 <script setup lang="ts">
-import { reactive } from 'vue'
+import { reactive, ref, Ref } from 'vue'
+import { FormInstance, ElMessageBox } from 'element-plus'
+import { fetchConnect } from '@/api'
 
 const formVal = reactive({
     phone: '',
     industry: ''
 })
 
+const form: Ref<FormInstance | null> = ref(null)
+
 const rules = {
-    phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
+    phone: [
+        { required: true, message: '请输入手机号', trigger: 'blur' },
+        {
+            validator(rule: any, value: any) {
+                if (!value) {
+                    return new Error('请输入手机号')
+                } else if (!/^1[3-9]\d{9}$/.test(value)) {
+                    return new Error('手机号格式错误')
+                }
+
+                return true
+            },
+            trigger: ['blur']
+        }
+    ],
     industry: [{ required: true, message: '请选择所属行业', trigger: 'change' }]
 }
 
@@ -60,7 +78,21 @@ const industries = [
     '其他'
 ]
 
-function onSubmit() {}
+function onSubmit() {
+    form.value?.validate(valid => {
+        if (valid) {
+            fetchConnect(formVal).then(res => {
+                ElMessageBox.alert('已收到您提交的信息，客服会在稍后与您联系。', '提交成功', {
+                    confirmButtonText: 'OK',
+                    callback: () => {}
+                })
+            })
+        } else {
+            console.log('error submit!')
+            return false
+        }
+    })
+}
 </script>
 
 <style lang="less" scoped></style>

src/components/common/ConnectPannel.vue

@@ -0,0 +1,12 @@
+<template>
+    <div>
+        <connect-form>
+            
+        </connect-form>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import {ConnectForm} from '@/components/common'
+
+</script>

src/components/common/index.ts

@@ -1,4 +1,5 @@
 import AppHeader from './AppHeader.vue'
 import ConnectForm from './ConnectForm.vue'
+import ConnectPannel from './ConnectPannel.vue'
 
-export { AppHeader, ConnectForm }
+export { AppHeader, ConnectForm, ConnectPannel }

src/router/index.ts

@@ -15,12 +15,12 @@ export const router = createRouter({
             component: HomeView
         },
         {
-            path: '/about',
-            name: 'about',
+            path: '/connect',
+            name: 'connect',
             // route level code-splitting
             // this generates a separate chunk (About.[hash].js) for this route
             // which is lazy-loaded when the route is visited.
-            component: () => import('../views/AboutView.vue')
+            component: () => import('../views/ConnectView.vue')
         },
         {
             path: '/case',

src/views/AboutView.vue

@@ -1,15 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
-
-<style>
-@media (min-width: 1024px) {
-  .about {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-  }
-}
-</style>

src/views/ConnectView.vue

@@ -0,0 +1,29 @@
+<template>
+    <div data-v-7534886b="" class="w-full h-full overflow-hidden bg-white flex justify-center items-center">
+        <div class="max-w-[360px] w-full p-8 pb-10">
+            <div class="flex items-center  justify-center">
+                <img data-v-7534886b="" src="@/assets/zouma.png" alt="" class="logo w-[40px]" />
+
+                <span class="text-[32px] font-bold ml-3">ZOUMAAI</span>
+            </div>
+            <div data-v-7534886b="" class="intro"><p data-v-7534886b="">基于 AI 技术轻松创建对话机器人</p></div>
+            <div data-v-7534886b="" class="form pt-20">
+                <connect-form></connect-form>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ConnectForm } from '@/components/common'
+</script>
+
+<style lang="less" scoped>
+.intro {
+    margin-top: 16px;
+    line-height: 1.5;
+    text-align: center;
+    font-size: 18px;
+    color: #3d3d3d;
+}
+</style>

src/views/HomeView.vue

@@ -28,7 +28,7 @@
                     aria-disabled="false"
                     type="button"
                     class="el-button el-button--primary w-[228px] !h-[60px] !text-lg font-medium tracking-[0.08em] !rounded-lg mt-7 !ml-0 hover:!scale-105 lg:!text-sm lg:w-[153px] lg:!h-[45px] lg:mt-5 !border-none btn-grad shadow-lg"
-                    id="Chato_top_create_click"
+                    @click="goConnect()"
                 >
                     <!--v-if--><span class=""> 20S快速创建机器人 </span>
                 </button>
@@ -141,7 +141,7 @@
                         aria-disabled="false"
                         type="button"
                         class="el-button el-button--primary !border-none font-bold !h-12 w-40 lg:!h-10 lg:w-28"
-                        id="Chato_tranning_more_click"
+                        @click="goConnect()"
                     >
                         <!--v-if--><span class=""> 了解更多 </span>
                     </button>
@@ -203,7 +203,7 @@
                     aria-disabled="false"
                     type="button"
                     class="el-button el-button--primary !h-[60px] w-[273px] !text-lg font-medium tracking-[0.08em] !border-none lg:!h-10 lg:w-32 lg:!text-sm"
-                    id="Chato_customize_click"
+                    @click="goConnect()"
                 >
                     <!--v-if--><span class=""> 立即体验 </span>
                 </button>
@@ -242,7 +242,7 @@
                         aria-disabled="false"
                         type="button"
                         class="el-button el-button--primary is-link"
-                        id="Chato_know_more_click_1"
+                        @click="goConnect()"
                     >
                         <!--v-if--><span class=""> 进一步了解 </span>
                     </button>
@@ -309,7 +309,7 @@
                             type="button"
                             class="el-button el-button--primary advantage-btn"
                             data-inner-type="1"
-                            id="Chato_service_more_click_1"
+                            @click="goConnect()"
                         >
                             <!--v-if--><span class=""> 进一步了解 </span>
                         </button>
@@ -358,8 +358,8 @@
                         class="miSans el-button el-button--primary w-[150px] !h-10 !border-none !bg-white !text-[#7C5CFC] rounded-lg !text-sm font-medium tracking-[0.08em] lg:w-24 lg:!h-9 lg:!text-xs hover:!scale-105"
                         id="Chato_bottom_create_click"
                     >
-                        <!--v-if--><span class=""> 体验 走马AI </span></button
-                    >
+                        <!--v-if--><span class=""> 体验 走马AI </span>
+                    </button>
                 </div>
                 <div class="flex justify-between items-center w-full max-w-[90%] lg:mb-6 lg:gap-4 lg:max-w-none">
                     <div class="text-sm">
@@ -386,7 +386,7 @@
                 </div>
             </div>
             <div class="w-[400px] box-border rounded-2xl px-7 py-6 bg-white lg:w-full shrink-0">
-                <p class="text-[#303133] text-lg font-medium mb-4 flex items-center">
+                <p class="text-[#303133] text-lg font-medium mb-4 flex items-center" @click="goConnect()">
                     <svg class="w-[22px] h-[22px] mr-1" aria-hidden="true">
                         <use href="#icon-phone"></use>
                     </svg>
@@ -394,7 +394,6 @@
                 </p>
                 <p class="text-[#596780] text-sm leading-5 mb-6">将有专人为您提供产品解决方案，专业答疑等</p>
                 <connect-form></connect-form>
-                
             </div>
         </div>
     </main>
@@ -405,7 +404,8 @@ import { ref, computed } from 'vue'
 import useRolling from '@/hooks/useRolling'
 import { fetchHomeCase, fetchBase, fetchQuestion, fetchAbility } from '@/api'
 import { CircleCheck } from '@element-plus/icons-vue'
-import {ConnectForm} from '@/components/common'
+import { ConnectForm } from '@/components/common'
+import { router } from '@/router'
 
 const rollingList = ref([])
 const { rollingText, startRolling } = useRolling(rollingList.value)
@@ -474,6 +474,11 @@ fetchQuestion().then((res: any) => {
     questions.value = res || []
 })
 
+function goConnect() {
+    router.push({
+        name: 'connect'
+    })
+}
 </script>
 
 <style lang="less" scoped>