From cce7db4f4ef2ee93722618a7572879d725d2c091 Mon Sep 17 00:00:00 2001
From: ihzero <ihzero@163.com>
Date: Mon, 21 Aug 2023 14:40:12 +0800
Subject: [PATCH] =?UTF-8?q?=E8=81=94=E7=B3=BB=E6=88=91=E4=BB=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/chat/index.vue                      |  10 +-
 .../communication/components/contacts.vue     | 277 ++++++++++++++++++
 src/views/communication/home.vue              |  15 +-
 3 files changed, 295 insertions(+), 7 deletions(-)
 create mode 100644 src/views/communication/components/contacts.vue

diff --git a/src/views/chat/index.vue b/src/views/chat/index.vue
index c61c6a7..9bf76fe 100644
--- a/src/views/chat/index.vue
+++ b/src/views/chat/index.vue
@@ -56,7 +56,7 @@
             <UploadComp @change="handleFileChange">
               <van-button
                 type="primary"
-                class="!rounded-2px !h-53px !mr-14px border-[#414548] text-white !border-none text-22px !leading-53px"
+                class="!rounded-2px !h-53px !mr-14px border-[#414548] text-white !border-none !text-22px !leading-53px"
               >
                 <template #icon>
                   <SvgIcon name="cloud-upload" class="text-25px mr-13px" />
@@ -68,7 +68,7 @@
             <van-button
               @click="handleSubmit"
               type="primary"
-              class="!rounded-2px !h-53px border-[#414548] text-white !border-none text-22px"
+              class="!rounded-2px !h-53px border-[#414548] text-white !border-none !text-22px"
             >
               <template #icon>
                 <SvgIcon name="generated" class="text-25px mr-13px" />
@@ -100,7 +100,7 @@ import UploadComp from './components/upload-comp.vue'
 import extractTextFromPDF from '@/utils/pdfUtils.js'
 import extractDocxText from '@/utils/docxUtils.js'
 import { getFileInfo } from '@/utils/fileUtils.js'
-import { showToast } from "vant";
+import { showToast } from 'vant'
 import { useAuthModal } from '@/stores/authModal'
 import { useUserInfo } from '@/stores/userInfo'
 const userInfo = useUserInfo()
@@ -136,7 +136,7 @@ const currentChart = computed(() => chatStore.getCurrentChat)
 async function handleFileChange(file) {
   if (!isLogin.value) {
     authModal.setAuthModalType('login')
-    authModal.showAuthModal() 
+    authModal.showAuthModal()
     return
   }
 
@@ -248,7 +248,7 @@ function handleSubmit() {
 }
 
 async function onConversation(action = 'next', file, fileText) {
-  let message = inputValue.value  || fileText
+  let message = inputValue.value || fileText
   if (loading.value) return
   if ((!message || message.trim() === '') && action == 'next') return
 
diff --git a/src/views/communication/components/contacts.vue b/src/views/communication/components/contacts.vue
new file mode 100644
index 0000000..e30b359
--- /dev/null
+++ b/src/views/communication/components/contacts.vue
@@ -0,0 +1,277 @@
+<template>
+  <van-popup
+    v-model:show="isShow"
+    position="center"
+    closeable
+    :style="{
+      background: '#161718',
+      borderRadius: '6px',
+      width: '90%',
+    }"
+  >
+    <div class="text-white">
+      <!-- <div class="bg-[#111F63] w-75 p-6 flex-1 flex-none flex flex-col">
+        <div class="text-2xl font-bold">需求留言问卷</div>
+        <div class="mt-9 text-base font-bold flex-1">
+          <p>感谢您对海兔AI的关注</p>
+          <p>请留下您的信息</p>
+          <p>我们会尽快联系您！</p>
+        </div>
+        <div class="w-43 h-43 border"></div>
+        <div class="mt-6 text-base">了解更多，一键扫码咨询</div>
+      </div> -->
+      <div class="flex justify-between pt-40px">
+        <div class="text-22px text-white text-opacity-40">
+          <p class="text-30px font-bold text-white">感谢您对海兔AI的关注</p>
+          <p class="mt-20px">请留下您的信息</p>
+          <p class="mt-10px">我们会尽快联系您！</p>
+        </div>
+        <!-- <div>
+          <div class="w-200px h-200px border"></div>
+        </div> -->
+      </div>
+      <div class="p-17px flex-1 text-white mt-20px">
+        <div class="text-27px mb-22px">
+          <div class="required">需求类型</div>
+          <div class="flex items-center mt-14px">
+            <van-radio-group
+              class="cu-radio"
+              shape="dot"
+              direction="horizontal"
+              v-model="form.type_id"
+            >
+              <van-radio
+                v-for="(item, i) in typeList"
+                :key="i"
+                :name="item.id"
+                >{{ item.name }}</van-radio
+              >
+            </van-radio-group>
+          </div>
+        </div>
+        <div class="text-27px mb-22px">
+          <div class="required">性别</div>
+          <div class="flex items-center mt-14px">
+            <van-radio-group
+              class="cu-radio"
+              shape="dot"
+              direction="horizontal"
+              v-model="form.sex"
+            >
+              <van-radio name="1">男</van-radio>
+              <van-radio name="0">女</van-radio>
+            </van-radio-group>
+          </div>
+        </div>
+        <div class="text-27px mb-22px">
+          <div class="required">姓名</div>
+          <div class="flex items-center mt-14px">
+            <van-field
+              v-model="form.name"
+              placeholder="请输入姓名"
+              class="cu-field-input !text-white"
+            ></van-field>
+          </div>
+        </div>
+        <div class="text-27px mb-22px">
+          <div class="required">联系方式</div>
+          <div class="flex items-center mt-14px">
+            <van-field
+              v-model="form.phone"
+              placeholder="请输入手机号"
+              class="cu-field-input !text-white"
+            ></van-field>
+          </div>
+        </div>
+        <div class="text-27px mb-22px">
+          <div class="">公司名称</div>
+          <div class="flex items-center mt-14px">
+            <van-field
+              v-model="form.company"
+              placeholder="请输入公司名称"
+              class="cu-field-input !text-white"
+            ></van-field>
+          </div>
+        </div>
+        <div class="text-27px mb-22px">
+          <div class="">企业邮箱</div>
+          <div class="flex items-center mt-14px">
+            <van-field
+              v-model="form.email"
+              placeholder="请输入企业邮箱"
+              class="cu-field-input !text-white"
+            ></van-field>
+          </div>
+        </div>
+        <div class="text-27px mb-22px">
+          <div class="">职位</div>
+          <div class="flex items-center mt-14px">
+            <van-field
+              v-model="form.job"
+              placeholder="请输入职位"
+              class="cu-field-input !text-white"
+            ></van-field>
+          </div>
+        </div>
+        <div class="text-27px mb-22px">
+          <div class="">需求描述</div>
+          <div class="flex items-center mt-14px">
+            <van-field
+              v-model="form.content"
+              type="textarea"
+              placeholder="请输入需求描述"
+              class="cu-field-input !text-white"
+            ></van-field>
+          </div>
+        </div>
+        <div class="text-right flex mt-30px">
+          <van-button
+            @click="handleSumbit"
+            type="primary"
+            class="!rounded-2px !h-66px w-full border-[#414548] text-white !border-none !text-27px"
+          >
+            确认
+          </van-button>
+        </div>
+      </div>
+    </div>
+  </van-popup>
+</template>
+<script setup>
+import { ref, reactive, toRaw, onBeforeMount, computed, watch } from 'vue'
+import { showToast } from 'vant'
+import http from '@/io/request'
+const emit = defineEmits(['update:value'])
+
+const telReg = /^1[3-9]\d{9}$/
+const emailReg = /^[\w\.-]+@[a-zA-Z\d\.-]+\.[a-zA-Z]{2,}$/
+
+const props = defineProps({
+  value: {
+    type: Boolean,
+    default: false,
+  },
+})
+const isShow = computed({
+  get() {
+    return props.value
+  },
+  set(val) {
+    emit('update:value', val)
+  },
+})
+
+const defaultForm = {
+  type_id: '',
+  sex: 1,
+  name: '',
+  phone: '',
+  company: '',
+  email: '',
+  job: '',
+  content: '',
+}
+const typeList = ref([])
+const loading = ref(false)
+const form = reactive(Object.assign({}, defaultForm))
+const getTypes = async () => {
+  const res = await http.get('/api/keywords?type_key=feedback')
+  typeList.value = res
+  if (res.length && !form.type_id) {
+    form.type_id = res[0].id
+  }
+}
+
+function handleSumbit() {
+  const _form = toRaw(form)
+  if (!_form.type_id) return showToast('请选择需求类型')
+  if (!_form.name) return showToast('请输入姓名')
+  if (!_form.phone) return showToast('请输入手机号')
+  if (!telReg.test(_form.phone)) return showToast('请输入正确的手机号')
+  if (_form.email && !emailReg.test(_form.email))
+    return showToast('请输入正确的邮箱')
+  if (loading.value) return
+
+  loading.value = true
+  http
+    .post('/api/feedback', _form)
+    .then(() => {
+      showToast('提交成功')
+      form.value = Object.assign({}, defaultForm)
+      isShow.value = false
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+watch(
+  () => isShow.value,
+  (val) => {
+    if (!val) {
+      form.value = Object.assign({}, defaultForm)
+    }
+  }
+)
+
+onBeforeMount(() => {
+  getTypes()
+})
+</script>
+
+<style lang="scss">
+.required {
+  position: relative;
+  &::before {
+    position: absolute;
+    display: inline-block;
+    color: #ff4d4f;
+    font-size: 28px;
+    line-height: 1;
+    left: -20px;
+    top: 50%;
+    transform: translateY(-50%);
+    content: '*';
+  }
+}
+
+.cu-field-input {
+  background: #161718;
+  border: 1px solid #414548;
+  color: #fff !important;
+  font-size: 22px;
+  padding: 0 19px;
+
+  display: flex;
+  align-items: center;
+  &::placeholder {
+    color: #fff;
+    opacity: 0.4;
+  }
+  input {
+    color: #fff;
+    height: 72px;
+  }
+  textarea {
+    color: #fff;
+  }
+}
+.cu-radio {
+  .van-radio__icon--dot {
+    height: 24px;
+    width: 24px;
+    border-radius: 4px;
+    &__icon {
+      width: 80%;
+      height: 80%;
+      border-radius: 4px;
+    }
+  }
+  .van-radio__label {
+    font-size: 22px;
+    color: white;
+    margin-left: 8px !important;
+  }
+}
+</style>
diff --git a/src/views/communication/home.vue b/src/views/communication/home.vue
index 337f10f..520d7ec 100644
--- a/src/views/communication/home.vue
+++ b/src/views/communication/home.vue
@@ -27,7 +27,10 @@
           一些相关的描述文字一些相关的描述文字一些相关的描述文字一些相关的描述文字一些相关的描述文字一些相关的描述文字一些相关的描述文字一些相关的描述文字一些相关的描述文字
         </div>
         <div class="mt-43px">
-          <van-button type="primary" class="!rounded-full !h-56px !text-27px"
+          <van-button
+            @click="isShow = true"
+            type="primary"
+            class="!rounded-full !h-56px !text-27px"
             >立即体验</van-button
           >
         </div>
@@ -63,7 +66,10 @@
           一些相关的描述文字一些相关的描述文字一些相关的描述文字一些相关的描述文字一些相关的描述文字一些相关的描述文字一些相关的描述文字一些相关的描述文字一些相关的描述文字
         </div>
         <div class="mt-43px">
-          <van-button type="primary" class="!rounded-full !h-56px !text-27px"
+          <van-button
+            @click="isShow = true"
+            type="primary"
+            class="!rounded-full !h-56px !text-27px"
             >立即体验</van-button
           >
         </div>
@@ -210,6 +216,7 @@
       </div>
       <div class="mt-54px text-center pb-192px">
         <van-button
+          @click="isShow = true"
           type="primary"
           class="!rounded-full w-300px !h-68px !text-23px"
           >联系我们</van-button
@@ -233,14 +240,18 @@
         </div>
       </div>
     </van-popup>
+
+    <Contacts v-model:value="isShow"></Contacts>
   </div>
 </template>
 <script setup>
+import Contacts from './components/contacts.vue'
 import TagItem from './components/tag-item.vue'
 import videoBg2 from '@/assets/images/stream/l2.png'
 import videoBg3 from '@/assets/images/stream/l3.png'
 import videoBg4 from '@/assets/images/stream/l4.png'
 import { ref } from 'vue'
+const isShow = ref(false)
 const videoShow = ref(false)
 const video = ref(null)
 const videos = ref([