tuanshiwei-web/components/PhoneContactUs.vue
2025-07-23 18:27:42 +08:00

111 lines
2.4 KiB
Vue

<template>
<!-- PC端布局 -->
<div class="w-full h-full" style="padding: 20px;">
<div>
</div>
</div>
</template>
<script lang="ts" setup>
import { defineEmits } from 'vue'
import $api from '@/service/webRequest'
const inputSearch = ref('');
// 表单数据
const formData = reactive({
name: '',
mobile: '',
question: '',
message: ''
})
const total = ref(0);
const liuyanList = ref([]);
const getLiuyanList = async () => {
const res = await $api.post('/api/home.leave_word/index',
{
limit: 4,
page: 1,
status: 2,
show: 1
}
)
total.value = res.data.data.count;
liuyanList.value = res.data.data.list;
}
onMounted(() => {
getLiuyanList();
})
const toSearch = () => {
// emit('toSwpe',9);
// emitter.emit('inputSea', {
// keywords:inputSearch.value,
// type: 1,
// });
window.open(`/search_info?type=1&keywords=${inputSearch.value}`)
}
const emit = defineEmits(['toSwpe'])
const toMore = (index:number) => {
emit('toSwpe', index);
}
const hmScroll = () => {
let home = document.getElementById('contid');
console.log(home.scrollTop);
if (home.scrollTop == 0) {
emit('toSwpe', 6);
}
}
// 表单方法
const submitForm = () => {
console.log(formData);
// 这里可以添加表单验证逻辑
if (!formData.name) {
alert('请输入您的姓名')
return
}
if (!formData.mobile) {
alert('请输入您的手机号码')
return
}
if (!formData.question) {
alert('请输入您的问题')
return
}
if (!formData.message) {
alert('请输入您的留言内容')
return
}
$api.post("/api/home.leave_word/add", formData)
.then((res: any) => {
console.log(res)
if (res.status == 200) {
alert('留言成功')
} else {
alert('失败')
}
formData.name = '';
formData.mobile = '';
formData.question = '';
formData.message = '';
})
.catch((err) => {
console.dir(err)
})
// 重置表单
// formData.name = ''
// formData.mobile = ''
// formData.content = ''
}
</script>
<style lang="scss" scoped>
@import '@/assets/index.scss';
</style>