zhangkai/tuanshiwei-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
tuanshiwei-web/components/AppContactUs.vue

457 lines
13 KiB
Vue
Raw Normal View History

新增留言板页面对接
2025-05-27 09:02:43 +08:00
<template>
<!-- PC端布局 -->
<div class="flex justify-between w-full h-full">
<!-- 左边导航栏 -->
<!-- <div class="bgimg">
<div class="pc-nav">
<div class="pc-nav-item">
<img src="/img/index/home1.png" alt=""></img>
<span class="span" style="color: #FFA234;">官网首页</span>
<img src="/img/index/arrow.png" alt="" style="width: 9px;height: 12px;margin-left: 10px;">
</div>
<div class="pc-nav-item">
<img src="/img/index/aboutus.png" alt=""></img>
<span class="span">关于我们</span>
</div>
<div class="pc-nav-item">
<img src="/img/index/news.png" alt=""></img>
<span class="span">新闻动态</span>
</div>
<div class="pc-nav-item">
<img src="/img/index/message.png" alt=""></img>
<span class="span">信息公开</span>
</div>
<div class="pc-nav-item">
<img src="/img/index/baike.png" alt=""></img>
<span class="span">团务百科</span>
</div>
</div>
<div class="line_h"></div>
<div class="goback">返回首页</div>
<div style="margin-top: 50px;margin-left: 40px;">
<div class="box_1">无障碍阅读</div>
<div class="box_2">进入适老模式</div>
</div>
</div> -->
<!-- 右边内容栏 -->
<div class="rightcon">
<div class="flex top_search ">
<div style="width: 572px;height: 69px;margin-left: 415px;">
<img :src="`/img/index/dlogo.png`" alt="" style="width: 100%;height: 100%;object-fit: cover;">
</div>
修改对接首页，部分详情
2025-05-27 18:33:40 +08:00
<!-- <div class="inputform">
新增留言板页面对接
2025-05-27 09:02:43 +08:00
<input v-model="inputSearch" class="contactInput w-full md:w-[337px]" type="text"
placeholder="请输入搜索关键字" />
<div class="search_rinput">
<img src="/img/index/hmsearch.png" alt="">
</div>
修改对接首页，部分详情
2025-05-27 18:33:40 +08:00
</div> -->
新增留言板页面对接
2025-05-27 09:02:43 +08:00
</div>
<div class="flex flex-col w-full h-full" style="width: 1300px;margin: 0 auto;">
<div
style="z-index: 1;background: #ffffff;padding: 30px;border-radius: 16px;margin-top: 20px;margin-left: 100px;">
<div class="liuyanba">团团留言板</div>
<form class="contactForm w-full" @submit.prevent="submitForm">
<div class="inputforms">
<span>姓名</span>
<input v-model="formData.name"
class="contactInputs mt-[15px] md:mt-[30px] w-full md:w-[600px]" type="text"
placeholder="输入您的姓名" />
<span>电话</span>
<input v-model="formData.mobile"
class="contactInputs mt-[15px] md:ml-[30px] md:mt-[30px] w-full md:w-[600px]"
type="text" placeholder="请输入您的联系电话" />
<span>邮箱</span>
<input v-model="formData.emil"
class="contactInputs mt-[15px] md:ml-[30px] md:mt-[30px] w-full md:w-[600px]"
type="text" placeholder="请输入您的邮箱" />
</div>
<div class="relative mt-4 md:mt-8 w-full md:w-[1100px] flex">
<span style="width: 60px;text-align: right;padding-right: 10px;">描述</span>
<textarea v-model="formData.message" id="myTextarea" placeholder="为了更好地帮助您，请尽量提供详细的信息"
rows="5" maxlength="100"></textarea>
</div>
<button type="submit" class="contactBut">
{{ '提交' }}
</button>
</form>
</div>
<div class="re_top">
<div class="re_col" style="margin-left: 100px;"></div>
<div class="re_tit">精选留言</div>
<div class="re_col"></div>
</div>
<div class="flex justify-between ml-[100px]">
<div class="re_list" v-for="item,index in liuyanList">
<div style="margin: 30px;">
<div class="re_list_tit flex" style="width: 100%;">
<span style="width: 12%">问题：</span>
<span style="color: #323232;width:90% ;">{{ item.question }}</span>
</div>
<div class="re_list_tit flex" style="margin-top: 15px;width: 100%;" >
<span style="width: 12%">描述：</span>
<span :title="item.message" class="three-line-ellipsis" style="font-weight: 400;font-size: 14px;color: #999999;width:88% ;">{{ item.message }}</span>
</div>
<div class="re_list_tit flex" style="margin-top: 15px;">
<span style="color: #368FDF;width: 12%;">回复：</span>
<span :title="item.answer" class="two-line-ellipsis" style="font-weight: 400;font-size: 14px;color: #999999;width:88% ;">{{ item.answer }}</span>
</div>
</div>
</div>
</div>
</div>
<!-- 右分享 -->
<!-- <div style="position: absolute;top: 300px;right:36px;" class="flex flex-col fiximg">
<img :src="`/img/index/douyin.png`" alt="">
<img :src="`/img/index/wb.png`" alt="">
<img :src="`/img/index/wx.png`" alt="">
<img :src="`/img/index/blbl.png`" alt="">
</div> -->
<!-- 底部鼠标 -->
<div style="position: absolute;bottom: 30px;right:30px;">
<img :src="`/img/index/hmouse.png`" alt="">
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { nextTick, ref } from 'vue'
import $api from '@/service/webRequest'
const inputSearch = ref('');
// 表单数据
const formData = reactive({
name: '',
mobile: '',
emil: '',
message: ''
})
const total = ref(0);
const liuyanList = ref([]);
const getLiuyanList = async () => {
const res = await $api.post('/api/home.leave_word/index',
{
limit:2,
page:1,
status:2,
show:1
}
)
total.value = res.data.data.count;
liuyanList.value = res.data.data.list;
}
onMounted(() => {
getLiuyanList();
})
// 表单方法
const submitForm = () => {
console.log(formData);
// 这里可以添加表单验证逻辑
if (!formData.name) {
alert('请输入您的姓名')
return
}
if (!formData.mobile) {
alert('请输入您的手机号码')
return
}
if (!formData.emil) {
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.emil = '';
formData.message = '';
})
.catch((err) => {
console.dir(err)
})
// 重置表单
// formData.name = ''
// formData.mobile = ''
// formData.content = ''
}
</script>
<style lang="scss" scoped>
@import '@/assets/index.scss';
/* pc端样式 */
// .bgimg{
// width: 350px;
// height: 100vh;
// background-image: url('/img/index/leftHead.png');
// background-size: 100% 100%;
// position: absolute;
// .pc-nav {
// margin-left: 70px;
// margin-top: 250px;
// text-align: center;
// }
// .pc-nav-item {
// width: 100%;
// // height: 18px;
// font-family: Microsoft YaHei UI;
// font-weight: bold;
// font-size: 18px;
// color: #FFFFFF;
// text-shadow: 0px 1px 0px rgba(0,0,64,0.4);
// display: flex;
// align-items: center;
// margin-bottom: 25px;
// &:hover{
// cursor: pointer;
// color: #FFA234;
// }
// .span{
// margin-left: 20px;
// }
// }
// .line_h{
// width: 220px;
// height: 1px;
// background: #FFFFFF;
// opacity: 0.2;
// margin-left: 40px;
// }
// .goback{
// width: 72px;
// height: 17px;
// font-family: Microsoft YaHei UI;
// font-weight: 400;
// font-size: 18px;
// color: #FFFFFF;
// margin-left:114px ;
// margin-top: 20px;
// }
// .box_1{
// width: 200px;
// height: 58px;
// line-height: 58px;
// background: #FFA234;
// font-family: Microsoft YaHei UI;
// font-weight: 400;
// font-size: 18px;
// text-align: center;
// color: #FFFFFF;
// cursor: pointer;
// }
// .box_2{
// width: 200px;
// height: 58px;
// line-height: 58px;
// background: #4EB64B;
// margin-top: 16px;
// font-family: Microsoft YaHei UI;
// font-weight: 400;
// font-size: 18px;
// color: #FFFFFF;
// text-align: center;
// cursor: pointer;
// }
// }
.rightcon {
width: 1920px;
height: 919px;
background-image: url('/img/index/rightcon.png');
background-size: 100% 100%;
.fiximg {
img {
margin-bottom: 20px;
}
}
}
.top_search {
margin-top: 50px;
height: 70px;
justify-content: space-between;
align-items: center;
}
.inputform {
position: relative;
width: 340px;
margin-right: 319px;
}
.contactInput {
width: 337px;
height: 50px;
background: #FFFFFF;
border-radius: 8px;
border: 1px solid #DEE4E8;
padding-left: 15px;
}
.contactInput::placeholder {
color: #999999;
}
.contactInput:focus {
outline: none;
}
.search_rinput {
width: 68px;
height: 50px;
background: #E6E6E6;
border-radius: 0px 8px 8px 0px;
position: absolute;
top: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
}
//------------------------------------------
.liuyanba {
width: 1200px;
/* height: 22px; */
margin: 0 auto;
font-family: Microsoft YaHei UI;
font-weight: bold;
font-size: 22px;
color: #358DDE;
}
.contactForm {
width: 100%;
margin-left: 30px;
.inputforms {
display: flex;
justify-content: center;
align-items: center;
width: 1100px;
span {
width: 50px;
margin-top: 30px;
margin-left: 20px;
height: 100%;
}
}
}
.contactInputs {
width: 380px;
height: 50px;
background: #FFFFFF;
border-radius: 6px;
padding-left: 20px;
border: 1px solid #999999;
}
.contactInputs::placeholder {
color: #768597;
}
.contactInputs:focus {
outline: none;
}
#myTextarea {
width: 1100px;
height: 167px;
background: #FFFFFF;
border-radius: 6px 6px 6px 6px;
opacity: 0.8;
修改对接首页，部分详情
2025-05-27 18:33:40 +08:00
padding-left: 10px;
padding-top: 10px;
新增留言板页面对接
2025-05-27 09:02:43 +08:00
resize: none;
border: 1px solid #999999;
}
#myTextarea::placeholder {
color: #768597;
}
#myTextarea:focus {
outline: none;
}
.contactBut {
width: 140px;
border-radius: 4px 4px 4px 4px;
// position: absolute;
// bottom: 20px;
// right: 30px;
height: 50px;
margin-top: 20px;
margin-left: 50px;
background: linear-gradient(0deg, #338CDE 0%, #469CE2 100%);
border: none;
font-weight: bold;
font-size: 18px;
color: #FFFFFF;
}
.re_top {
width: 100%;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
.re_tit {
font-family: Microsoft YaHei;
font-weight: bold;
font-size: 36px;
color: #4E3C3C;
margin: 0 30px;
}
.re_col {
width: 78px;
height: 3px;
background: #348CDD;
}
}
.re_list {
width: 585px;
height: 243px;
margin-top: 20px;
background: #FFFFFF;
border-radius: 8px;
.re_list_tit{
font-family: Microsoft YaHei;
font-weight: bold;
font-size: 18px;
color: #FFA234;
}
}
</style>
Reference in New Issue Copy Permalink