联系我们页面接口对接

src/pages/contact/Index.vue

@@ -19,7 +19,7 @@
                   <img src="@assets/contact-addr.png" alt="地址" class="contact-icon" />
                   <div class="contact-text">
                     <h4>公司地址：</h4>
-                    <p>贵州省贵阳市观山湖区贵阳国际金融中心金融MAX-A座</p>
+                    <p>{{ companyInfo.address }}</p>
                   </div>
                 </div>
 
@@ -27,8 +27,8 @@
                   <img src="@assets/contact-phone.png" alt="电话" class="contact-icon" />
                   <div class="contact-text">
                     <h4>联系电话：</h4>
-                    <p>张先生：18866568888</p>
-                    <p>吴先生：18888888666</p>
+                    <p v-for="item in companyInfo.contactsList" :key="item.id">
+                      {{ item.contactName }}：{{ item.contactMobile }}</p>
                   </div>
                 </div>
 
@@ -36,7 +36,7 @@
                   <img src="@assets/contact-mail.png" alt="邮箱" class="contact-icon" />
                   <div class="contact-text">
                     <h4>公司电话：</h4>
-                    <p>000000000000</p>
+                    <p>{{ companyInfo.mobile }}</p>
                   </div>
                 </div>
               </div>
@@ -44,13 +44,9 @@
               <!-- 右侧信息 -->
               <div class="contact-right">
                 <div class="qr-codes">
-                  <div class="qr-item">
-                    <img src="@assets/contact-wx01.png" alt="微信公众号" />
-                    <p>微信商务号 <br /> <b>达泽科技-张某</b></p>
-                  </div>
-                  <div class="qr-item">
-                    <img src="@assets/contact-wx02.png" alt="企业微信" />
-                    <p>微信商务号 <br /><b>达泽科技-吴某</b></p>
+                  <div class="qr-item" v-for="contact in companyInfo.contactsList" :key="contact.id">
+                    <img :src="imgHost + contact.contactWxQrcode" :alt="getContactTypeLabel(contact.contactType)" />
+                    <p>{{ getContactTypeLabel(contact.contactType) }} <br /> <b>{{ contact.contactName }}</b></p>
                   </div>
                 </div>
 
@@ -58,11 +54,11 @@
                   <img src="@assets/contact-mail.png" alt="网站" class="contact-icon" />
                   <div class="contact-text">
                     <h4>邮箱</h4>
-                    <p>www@dazekg.com</p>
+                    <p>{{ companyInfo.email }}</p>
                   </div>
-                  <div class="contact-text">
+                  <div class="contact-text" v-if="businessCooperationEmail">
                     <h4>商务合作</h4>
-                    <p>www@dazekg.com</p>
+                    <p>{{ businessCooperationEmail }}</p>
                   </div>
                 </div>
               </div>
@@ -70,7 +66,7 @@
 
             <!-- 下半部分：地图 -->
             <div class="map-section">
-              <img src="@assets/contact-map.png" alt="公司位置地图" class="map-image" />
+              <img :src="imgHost + companyInfo.addressImg" alt="公司位置地图" class="map-image" />
               <!-- <iframe style="width: 100%;;height: 350px;border-radius: 10px;" src="https://j.map.baidu.com/ef/0c9k" frameborder="0"></iframe> -->
             </div>
           </div>
@@ -128,8 +124,9 @@
 </template>
 
 <script>
-import { ref, reactive } from 'vue'
+import { ref, reactive, onMounted, computed } from 'vue'
 import DefaultLayout from '@/layouts/DefaultLayout.vue'
+import { getContacts, addDzNotes } from '@/api/modules/home'
 
 export default {
   name: 'ContactPage',
@@ -137,6 +134,8 @@ export default {
     DefaultLayout
   },
   setup() {
+    // 环境变量
+    const imgHost = import.meta.env.VITE_APP_IMG_HOST
     // 留言表单数据
     const messageForm = reactive({
       name: '',
@@ -146,25 +145,68 @@ export default {
       content: ''
     })
 
+    const companyInfo = ref({});
+
+    const handleGetCompanyInfo = async () => {
+      try {
+        const result = await getContacts()
+        const data = result.data;
+        companyInfo.value = data;
+        console.log('公司信息:', companyInfo)
+
+      } catch (error) {
+        console.error('加载首页数据失败:', error)
+      }
+    }
+
     const isSubmitting = ref(false)
 
+    // 计算商务合作邮箱
+    const businessCooperationEmail = computed(() => {
+      if (!companyInfo.value.contactsList) return null
+      const businessContact = companyInfo.value.contactsList.find(contact => contact.contactType === 0)
+      return businessContact ? businessContact.contactEmail : null
+    })
+
+    // 获取联系类型标签
+    const getContactTypeLabel = (contactType) => {
+      const typeMap = {
+        0: '商务合作',
+        1: '产品咨询',
+        2: '研发咨询'
+      }
+      return typeMap[contactType] || '联系我们'
+    }
+
     // 提交留言
     const submitMessage = async () => {
       isSubmitting.value = true
 
       try {
-        // 这里可以调用API提交留言
-        console.log('提交留言:', messageForm)
+        // 构建API请求参数
+        const requestData = {
+          noteName: messageForm.name,
+          noteMobile: messageForm.phone,
+          noteEmail: messageForm.email,
+          noteAddress: messageForm.address,
+          noteContent: messageForm.content
+        }
 
-        // 模拟API调用
-        await new Promise(resolve => setTimeout(resolve, 1000))
+        console.log('提交留言:', requestData)
 
-        alert('留言提交成功！我们会尽快与您联系。')
+        // 调用API提交留言
+        const result = await addDzNotes(requestData)
 
-        // 重置表单
-        Object.keys(messageForm).forEach(key => {
-          messageForm[key] = ''
-        })
+        if (result.code === 200 || result.success) {
+          alert('留言提交成功！我们会尽快与您联系。')
+
+          // 重置表单
+          Object.keys(messageForm).forEach(key => {
+            messageForm[key] = ''
+          })
+        } else {
+          throw new Error(result.message || '提交失败')
+        }
       } catch (error) {
         console.error('提交留言失败:', error)
         alert('提交失败，请稍后重试。')
@@ -173,10 +215,19 @@ export default {
       }
     }
 
+    onMounted(async () => {
+      handleGetCompanyInfo()
+    })
+
     return {
+      imgHost,
       messageForm,
       isSubmitting,
-      submitMessage
+      submitMessage,
+      handleGetCompanyInfo,
+      companyInfo,
+      getContactTypeLabel,
+      businessCooperationEmail
     }
   }
 }
@@ -222,7 +273,7 @@ export default {
 }
 
 .contact-info-card {
-  background: linear-gradient(0deg, #fff 0%, #fff 50%, rgba(255,255,255,.0) 100%);
+  background: linear-gradient(0deg, #fff 0%, #fff 50%, rgba(255, 255, 255, .0) 100%);
   backdrop-filter: blur(10px);
   border-radius: 12px;
   padding: 40px;
@@ -306,7 +357,8 @@ export default {
         color: #666;
         font-size: 16px;
         margin: 0;
-        b{
+
+        b {
           margin-top: 12px;
           display: block;
         }