mirror of
https://gitee.com/myxzgzs/boyuehasfj-vue3-html.git
synced 2025-08-07 22:52:42 +08:00
修改用户需求
This commit is contained in:
luoyu
parent
2bf74587de
commit
031425817e
@ -16,12 +16,8 @@ const error = ref(false)
|
||||
const page = ref<any>(null)
|
||||
|
||||
const feedbackForm = reactive({
|
||||
legalArticle: '',
|
||||
issueDescription: '',
|
||||
userName: '',
|
||||
phoneNumber: '',
|
||||
idCardNumber: '',
|
||||
contactInfoType: 1, // 默认手机号
|
||||
})
|
||||
|
||||
const feedbackSubmitSuccess = ref(false)
|
||||
@ -239,37 +235,19 @@ onMounted(() => {
|
||||
const submitFeedback = async () => {
|
||||
try {
|
||||
// 前端验证
|
||||
if (!feedbackForm.legalArticle.trim()) {
|
||||
alert('有问题的案例不能为空。')
|
||||
return
|
||||
}
|
||||
if (!feedbackForm.issueDescription.trim()) {
|
||||
alert('问题描述不能为空。')
|
||||
return
|
||||
}
|
||||
|
||||
if (feedbackForm.contactInfoType === 1 && !feedbackForm.phoneNumber.trim()) {
|
||||
if (!feedbackForm.phoneNumber.trim()) {
|
||||
alert('手机号不能为空。')
|
||||
return
|
||||
} else if (feedbackForm.contactInfoType === 2 && !feedbackForm.idCardNumber.trim()) {
|
||||
alert('身份证号不能为空。')
|
||||
return
|
||||
} else if (feedbackForm.contactInfoType === 3 && !feedbackForm.userName.trim()) {
|
||||
alert('姓名不能为空。')
|
||||
return
|
||||
}
|
||||
|
||||
const dataToSend = { ...feedbackForm }
|
||||
// 根据选择的联系方式类型设置对应的值，其他值置空
|
||||
if (feedbackForm.contactInfoType === 1) {
|
||||
dataToSend.idCardNumber = ''
|
||||
dataToSend.userName = ''
|
||||
} else if (feedbackForm.contactInfoType === 2) {
|
||||
dataToSend.phoneNumber = ''
|
||||
dataToSend.userName = ''
|
||||
} else if (feedbackForm.contactInfoType === 3) {
|
||||
dataToSend.phoneNumber = ''
|
||||
dataToSend.idCardNumber = ''
|
||||
const dataToSend = {
|
||||
issueDescription: feedbackForm.issueDescription,
|
||||
phoneNumber: feedbackForm.phoneNumber
|
||||
}
|
||||
|
||||
const res = await addFeedback(dataToSend)
|
||||
@ -277,12 +255,8 @@ const submitFeedback = async () => {
|
||||
feedbackSubmitSuccess.value = true
|
||||
feedbackNoReturned.value = res.data?.feedbackNo || '未知'
|
||||
// 清空表单
|
||||
feedbackForm.legalArticle = ''
|
||||
feedbackForm.issueDescription = ''
|
||||
feedbackForm.userName = ''
|
||||
feedbackForm.phoneNumber = ''
|
||||
feedbackForm.idCardNumber = ''
|
||||
feedbackForm.contactInfoType = 1
|
||||
console.log('留言提交成功，查询编号：', feedbackNoReturned.value)
|
||||
} else {
|
||||
alert('提交留言失败：' + (res.msg || '未知错误'))
|
||||
@ -334,16 +308,13 @@ const submitFeedback = async () => {
|
||||
<div class="feedback-section">
|
||||
<h3><i class="icon-chat"></i> 案例咨询与留言</h3>
|
||||
<div v-if="!feedbackSubmitSuccess" class="feedback-form">
|
||||
<p class="section-description">如果您对典型案例有任何疑问或建议，欢迎在此留言。</p>
|
||||
<div class="form-group">
|
||||
<label for="legalArticle">有问题的案例:<span class="required">*</span></label>
|
||||
<input
|
||||
type="text"
|
||||
id="legalArticle"
|
||||
v-model="feedbackForm.legalArticle"
|
||||
placeholder="如：2023年某某案"
|
||||
/>
|
||||
</div>
|
||||
<p class="section-description">
|
||||
如果您有以下问题可以给我们留言，我们会在十个工作日内反馈，
|
||||
</p>
|
||||
<p class="section-description">1.企业经营中遇到的法律问题；</p>
|
||||
<p class="section-description">2.企业遇到行政执法不规范问题；</p>
|
||||
<p class="section-description">3.对我们工作提出的意见和建议。</p>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="issueDescription">问题描述: <span class="required">*</span></label>
|
||||
<textarea
|
||||
@ -355,50 +326,13 @@ const submitFeedback = async () => {
|
||||
></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="contactInfoType">联系方式类型:</label>
|
||||
<select id="contactInfoType" v-model="feedbackForm.contactInfoType">
|
||||
<option :value="1">手机号</option>
|
||||
<option :value="2">身份证号</option>
|
||||
<option :value="3">姓名</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="phoneNumber"
|
||||
>手机号:
|
||||
<span class="required" v-show="feedbackForm.contactInfoType === 1">*</span></label
|
||||
>
|
||||
<label for="phoneNumber">手机号: <span class="required">*</span></label>
|
||||
<input
|
||||
type="text"
|
||||
id="phoneNumber"
|
||||
v-model="feedbackForm.phoneNumber"
|
||||
placeholder="请输入手机号"
|
||||
:required="feedbackForm.contactInfoType === 1"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="idCardNumber"
|
||||
>身份证号:
|
||||
<span class="required" v-show="feedbackForm.contactInfoType === 2">*</span></label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="idCardNumber"
|
||||
v-model="feedbackForm.idCardNumber"
|
||||
placeholder="请输入身份证号"
|
||||
:required="feedbackForm.contactInfoType === 2"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="userNameContact"
|
||||
>姓名:
|
||||
<span class="required" v-show="feedbackForm.contactInfoType === 3">*</span></label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="userNameContact"
|
||||
v-model="feedbackForm.userName"
|
||||
placeholder="请输入您的姓名"
|
||||
:required="feedbackForm.contactInfoType === 3"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<button @click="submitFeedback" class="submit-btn">提交留言</button>
|
||||
|
||||
@ -8,10 +8,7 @@ import { onMounted } from 'vue'
|
||||
// 留言查询表单数据
|
||||
const feedbackQueryForm = reactive({
|
||||
feedbackNo: '',
|
||||
userName: '',
|
||||
idCardNumber: '',
|
||||
phoneNumber: '',
|
||||
contactInfoType: 1, // 默认手机号
|
||||
})
|
||||
|
||||
const feedbackQueryResult = ref<any>(null)
|
||||
@ -39,28 +36,14 @@ const queryFeedback = async () => {
|
||||
return
|
||||
}
|
||||
|
||||
// 确保至少有一个联系方式被填写
|
||||
const hasContactInfo =
|
||||
(feedbackQueryForm.contactInfoType === 1 && feedbackQueryForm.phoneNumber.trim()) ||
|
||||
(feedbackQueryForm.contactInfoType === 2 && feedbackQueryForm.idCardNumber.trim()) ||
|
||||
(feedbackQueryForm.contactInfoType === 3 && feedbackQueryForm.userName.trim())
|
||||
|
||||
if (!hasContactInfo) {
|
||||
queryErrorMessage.value = '手机号、身份证号或姓名至少需要填写一项。'
|
||||
if (!feedbackQueryForm.phoneNumber.trim()) {
|
||||
queryErrorMessage.value = '手机号不能为空。'
|
||||
return
|
||||
}
|
||||
|
||||
const dataToSend = { ...feedbackQueryForm }
|
||||
// 根据选择的联系方式类型设置对应的值，其他值置空
|
||||
if (feedbackQueryForm.contactInfoType === 1) {
|
||||
dataToSend.idCardNumber = ''
|
||||
dataToSend.userName = ''
|
||||
} else if (feedbackQueryForm.contactInfoType === 2) {
|
||||
dataToSend.phoneNumber = ''
|
||||
dataToSend.userName = ''
|
||||
} else if (feedbackQueryForm.contactInfoType === 3) {
|
||||
dataToSend.phoneNumber = ''
|
||||
dataToSend.idCardNumber = ''
|
||||
const dataToSend = {
|
||||
feedbackNo: feedbackQueryForm.feedbackNo,
|
||||
phoneNumber: feedbackQueryForm.phoneNumber
|
||||
}
|
||||
|
||||
const res = await queryFeedbackDetail(dataToSend)
|
||||
@ -133,38 +116,13 @@ const removePTags = (htmlString: string | null | undefined): string => {
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="contactInfoType">联系方式类型:</label>
|
||||
<select id="contactInfoType" v-model="feedbackQueryForm.contactInfoType">
|
||||
<option :value="1">手机号</option>
|
||||
<option :value="2">身份证号</option>
|
||||
<option :value="3">姓名</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group" v-if="feedbackQueryForm.contactInfoType === 1">
|
||||
<label for="phoneNumber">手机号: <span class="required">*</span></label>
|
||||
<input
|
||||
type="text"
|
||||
id="phoneNumber"
|
||||
v-model="feedbackQueryForm.phoneNumber"
|
||||
placeholder="请输入手机号"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group" v-if="feedbackQueryForm.contactInfoType === 2">
|
||||
<label for="idCardNumber">身份证号: <span class="required">*</span></label>
|
||||
<input
|
||||
type="text"
|
||||
id="idCardNumber"
|
||||
v-model="feedbackQueryForm.idCardNumber"
|
||||
placeholder="请输入身份证号"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group" v-if="feedbackQueryForm.contactInfoType === 3">
|
||||
<label for="userName">姓名: <span class="required">*</span></label>
|
||||
<input
|
||||
type="text"
|
||||
id="userName"
|
||||
v-model="feedbackQueryForm.userName"
|
||||
placeholder="请输入您的姓名"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<button @click="queryFeedback" :disabled="isQuerying" class="submit-btn">
|
||||
@ -178,9 +136,9 @@ const removePTags = (htmlString: string | null | undefined): string => {
|
||||
<div class="result-item">
|
||||
<strong>留言编号:</strong> {{ feedbackQueryResult.feedbackNo }}
|
||||
</div>
|
||||
<div class="result-item">
|
||||
<!-- <div class="result-item">
|
||||
<strong>留言标题:</strong> {{ feedbackQueryResult.legalArticle }}
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="result-item">
|
||||
<strong>问题描述:</strong> {{ feedbackQueryResult.issueDescription }}
|
||||
</div>
|
||||
|
||||
@ -15,12 +15,8 @@ const error = ref(false)
|
||||
const page = ref<any>(null)
|
||||
|
||||
const feedbackForm = reactive({
|
||||
legalArticle: '',
|
||||
issueDescription: '',
|
||||
userName: '',
|
||||
phoneNumber: '',
|
||||
idCardNumber: '',
|
||||
contactInfoType: 1, // 默认手机号
|
||||
})
|
||||
|
||||
const feedbackSubmitSuccess = ref(false)
|
||||
@ -370,10 +366,23 @@ function getAttachmentUrl(url: string): string {
|
||||
return `${import.meta.env.VITE_APP_BASE_API}/profile/${processedUrl}`
|
||||
}
|
||||
|
||||
// 添加一个检测当前环境是否为微信浏览器的函数
|
||||
const isWeixinBrowser = () => {
|
||||
const ua = navigator.userAgent.toLowerCase()
|
||||
return /micromessenger/i.test(ua)
|
||||
}
|
||||
|
||||
// 添加一个直接文件下载处理函数，处理点击下载事件
|
||||
function handleDownload(url: string, filename: string) {
|
||||
const fullUrl = getAttachmentUrl(url)
|
||||
|
||||
// 检测是否在微信浏览器中
|
||||
if (isWeixinBrowser()) {
|
||||
// 显示微信浏览器中的提示模态框
|
||||
showWeixinTips(fullUrl, filename)
|
||||
return
|
||||
}
|
||||
|
||||
// 显示下载中状态
|
||||
const downloadStatus = ref('')
|
||||
downloadStatus.value = '下载中...'
|
||||
@ -407,40 +416,61 @@ function handleDownload(url: string, filename: string) {
|
||||
})
|
||||
}
|
||||
|
||||
// 微信浏览器中显示提示信息
|
||||
const showWeixinModal = ref(false)
|
||||
const currentDownloadUrl = ref('')
|
||||
const currentFileName = ref('')
|
||||
|
||||
function showWeixinTips(url: string, filename: string) {
|
||||
currentDownloadUrl.value = url
|
||||
currentFileName.value = filename || getFileName(url)
|
||||
showWeixinModal.value = true
|
||||
}
|
||||
|
||||
// 复制下载链接到剪贴板
|
||||
function copyDownloadLink() {
|
||||
try {
|
||||
navigator.clipboard.writeText(currentDownloadUrl.value)
|
||||
alert('下载链接已复制到剪贴板，请在浏览器中粘贴访问')
|
||||
} catch (err) {
|
||||
// 如果不支持clipboard API，使用传统方法
|
||||
const input = document.createElement('input')
|
||||
input.value = currentDownloadUrl.value
|
||||
document.body.appendChild(input)
|
||||
input.select()
|
||||
document.execCommand('copy')
|
||||
document.body.removeChild(input)
|
||||
alert('下载链接已复制到剪贴板，请在浏览器中粘贴访问')
|
||||
}
|
||||
}
|
||||
|
||||
// 在浏览器中打开
|
||||
function openInBrowser() {
|
||||
// 使用通用方案，在微信中会提示跳转到浏览器
|
||||
window.location.href = currentDownloadUrl.value
|
||||
|
||||
// 关闭弹窗
|
||||
setTimeout(() => {
|
||||
showWeixinModal.value = false
|
||||
}, 100)
|
||||
}
|
||||
|
||||
const submitFeedback = async () => {
|
||||
try {
|
||||
// 前端验证
|
||||
if (!feedbackForm.legalArticle.trim()) {
|
||||
alert('有问题的表单或案例不能为空。')
|
||||
return
|
||||
}
|
||||
if (!feedbackForm.issueDescription.trim()) {
|
||||
alert('问题描述不能为空。')
|
||||
return
|
||||
}
|
||||
|
||||
if (feedbackForm.contactInfoType === 1 && !feedbackForm.phoneNumber.trim()) {
|
||||
if (!feedbackForm.phoneNumber.trim()) {
|
||||
alert('手机号不能为空。')
|
||||
return
|
||||
} else if (feedbackForm.contactInfoType === 2 && !feedbackForm.idCardNumber.trim()) {
|
||||
alert('身份证号不能为空。')
|
||||
return
|
||||
} else if (feedbackForm.contactInfoType === 3 && !feedbackForm.userName.trim()) {
|
||||
alert('姓名不能为空。')
|
||||
return
|
||||
}
|
||||
|
||||
const dataToSend = { ...feedbackForm }
|
||||
// 根据选择的联系方式类型设置对应的值，其他值置空
|
||||
if (feedbackForm.contactInfoType === 1) {
|
||||
dataToSend.idCardNumber = ''
|
||||
dataToSend.userName = ''
|
||||
} else if (feedbackForm.contactInfoType === 2) {
|
||||
dataToSend.phoneNumber = ''
|
||||
dataToSend.userName = ''
|
||||
} else if (feedbackForm.contactInfoType === 3) {
|
||||
dataToSend.phoneNumber = ''
|
||||
dataToSend.idCardNumber = ''
|
||||
const dataToSend = {
|
||||
issueDescription: feedbackForm.issueDescription,
|
||||
phoneNumber: feedbackForm.phoneNumber
|
||||
}
|
||||
|
||||
const res = await addFeedback(dataToSend)
|
||||
@ -448,12 +478,8 @@ const submitFeedback = async () => {
|
||||
feedbackSubmitSuccess.value = true
|
||||
feedbackNoReturned.value = res.data?.feedbackNo || '未知'
|
||||
// 清空表单
|
||||
feedbackForm.legalArticle = ''
|
||||
feedbackForm.issueDescription = ''
|
||||
feedbackForm.userName = ''
|
||||
feedbackForm.phoneNumber = ''
|
||||
feedbackForm.idCardNumber = ''
|
||||
feedbackForm.contactInfoType = 1
|
||||
console.log('留言提交成功，查询编号：', feedbackNoReturned.value)
|
||||
} else {
|
||||
alert('提交留言失败：' + (res.msg || '未知错误'))
|
||||
@ -531,16 +557,13 @@ const queryFeedback = async () => {
|
||||
<div class="feedback-section">
|
||||
<h3><i class="icon-chat"></i> 表单咨询与留言</h3>
|
||||
<div v-if="!feedbackSubmitSuccess" class="feedback-form">
|
||||
<p class="section-description">如果您对表单下载有任何疑问或建议，欢迎在此留言。</p>
|
||||
<div class="form-group">
|
||||
<label for="legalArticle">有问题的表单或案例:<span class="required">*</span></label>
|
||||
<input
|
||||
type="text"
|
||||
id="legalArticle"
|
||||
v-model="feedbackForm.legalArticle"
|
||||
placeholder="如：公司设立登记申请表"
|
||||
/>
|
||||
</div>
|
||||
<p class="section-description">
|
||||
如果您有以下问题可以给我们留言，我们会在十个工作日内反馈，
|
||||
</p>
|
||||
<p class="section-description">1.企业经营中遇到的法律问题；</p>
|
||||
<p class="section-description">2.企业遇到行政执法不规范问题；</p>
|
||||
<p class="section-description">3.对我们工作提出的意见和建议。</p>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="issueDescription">问题描述: <span class="required">*</span></label>
|
||||
<textarea
|
||||
@ -552,50 +575,13 @@ const queryFeedback = async () => {
|
||||
></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="contactInfoType">联系方式类型:</label>
|
||||
<select id="contactInfoType" v-model="feedbackForm.contactInfoType">
|
||||
<option :value="1">手机号</option>
|
||||
<option :value="2">身份证号</option>
|
||||
<option :value="3">姓名</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="phoneNumber"
|
||||
>手机号:
|
||||
<span class="required" v-show="feedbackForm.contactInfoType === 1">*</span></label
|
||||
>
|
||||
<label for="phoneNumber">手机号: <span class="required">*</span></label>
|
||||
<input
|
||||
type="text"
|
||||
id="phoneNumber"
|
||||
v-model="feedbackForm.phoneNumber"
|
||||
placeholder="请输入手机号"
|
||||
:required="feedbackForm.contactInfoType === 1"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="idCardNumber"
|
||||
>身份证号:
|
||||
<span class="required" v-show="feedbackForm.contactInfoType === 2">*</span></label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="idCardNumber"
|
||||
v-model="feedbackForm.idCardNumber"
|
||||
placeholder="请输入身份证号"
|
||||
:required="feedbackForm.contactInfoType === 2"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="userNameContact"
|
||||
>姓名:
|
||||
<span class="required" v-show="feedbackForm.contactInfoType === 3">*</span></label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="userNameContact"
|
||||
v-model="feedbackForm.userName"
|
||||
placeholder="请输入您的姓名"
|
||||
:required="feedbackForm.contactInfoType === 3"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<button @click="submitFeedback" class="submit-btn">提交留言</button>
|
||||
@ -618,6 +604,35 @@ const queryFeedback = async () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 微信浏览器下载提示弹窗 -->
|
||||
<div v-if="showWeixinModal" class="weixin-modal-overlay">
|
||||
<div class="weixin-modal">
|
||||
<div class="weixin-modal-header">
|
||||
<h3>提示</h3>
|
||||
<span class="close-btn" @click="showWeixinModal = false">×</span>
|
||||
</div>
|
||||
<div class="weixin-modal-content">
|
||||
<p>由于微信限制，无法直接下载文件。</p>
|
||||
<p>请选择以下方式下载：</p>
|
||||
<div class="filename-display">
|
||||
<strong>文件名:</strong> {{ currentFileName }}
|
||||
</div>
|
||||
<div class="weixin-modal-actions">
|
||||
<button @click="copyDownloadLink" class="copy-link-btn">复制下载链接</button>
|
||||
<button @click="openInBrowser" class="open-browser-btn">在浏览器中打开</button>
|
||||
</div>
|
||||
<div class="weixin-modal-steps">
|
||||
<p><strong>或按照以下步骤操作：</strong></p>
|
||||
<ol>
|
||||
<li>点击右上角 <span class="icon">⋮</span> 或 <span class="icon">⋯</span> 按钮</li>
|
||||
<li>选择"在浏览器中打开"</li>
|
||||
<li>在浏览器中重新下载文件</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@ -1294,4 +1309,144 @@ const queryFeedback = async () => {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 微信下载弹窗样式 */
|
||||
.weixin-modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.weixin-modal {
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
width: 90%;
|
||||
max-width: 400px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.weixin-modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.weixin-modal-header h3 {
|
||||
margin: 0;
|
||||
color: var(--color-primary);
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.weixin-modal-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.filename-display {
|
||||
background-color: #f5f5f5;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
margin: 15px 0;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.weixin-modal-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.copy-link-btn, .open-browser-btn {
|
||||
padding: 12px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.copy-link-btn {
|
||||
background-color: var(--color-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.open-browser-btn {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.copy-link-btn:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.open-browser-btn:hover {
|
||||
background-color: #3d8b40;
|
||||
}
|
||||
|
||||
.weixin-modal-steps {
|
||||
margin-top: 20px;
|
||||
border-top: 1px dashed #ddd;
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.weixin-modal-steps ol {
|
||||
padding-left: 20px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.weixin-modal-steps li {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
background-color: #f5f5f5;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 在小屏幕上调整弹窗样式 */
|
||||
@media (max-width: 576px) {
|
||||
.weixin-modal {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.weixin-modal-header {
|
||||
padding: 12px 15px;
|
||||
}
|
||||
|
||||
.weixin-modal-content {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.weixin-modal-actions {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.copy-link-btn, .open-browser-btn {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -18,12 +18,8 @@ const expandedCards = ref<Set<number>>(new Set())
|
||||
const cardCount = ref(0)
|
||||
|
||||
const feedbackForm = reactive({
|
||||
legalArticle: '',
|
||||
issueDescription: '',
|
||||
userName: '',
|
||||
phoneNumber: '',
|
||||
idCardNumber: '',
|
||||
contactInfoType: 1, // 默认手机号
|
||||
})
|
||||
|
||||
const feedbackSubmitSuccess = ref(false)
|
||||
@ -32,37 +28,19 @@ const feedbackNoReturned = ref('')
|
||||
const submitFeedback = async () => {
|
||||
try {
|
||||
// 前端验证
|
||||
if (!feedbackForm.legalArticle.trim()) {
|
||||
alert('有问题的法律条例或案例不能为空。')
|
||||
return
|
||||
}
|
||||
if (!feedbackForm.issueDescription.trim()) {
|
||||
alert('问题描述不能为空。')
|
||||
return
|
||||
}
|
||||
|
||||
if (feedbackForm.contactInfoType === 1 && !feedbackForm.phoneNumber.trim()) {
|
||||
if (!feedbackForm.phoneNumber.trim()) {
|
||||
alert('手机号不能为空。')
|
||||
return
|
||||
} else if (feedbackForm.contactInfoType === 2 && !feedbackForm.idCardNumber.trim()) {
|
||||
alert('身份证号不能为空。')
|
||||
return
|
||||
} else if (feedbackForm.contactInfoType === 3 && !feedbackForm.userName.trim()) {
|
||||
alert('姓名不能为空。')
|
||||
return
|
||||
}
|
||||
|
||||
const dataToSend = { ...feedbackForm }
|
||||
// 根据选择的联系方式类型设置对应的值，其他值置空
|
||||
if (feedbackForm.contactInfoType === 1) {
|
||||
dataToSend.idCardNumber = ''
|
||||
dataToSend.userName = ''
|
||||
} else if (feedbackForm.contactInfoType === 2) {
|
||||
dataToSend.phoneNumber = ''
|
||||
dataToSend.userName = ''
|
||||
} else if (feedbackForm.contactInfoType === 3) {
|
||||
dataToSend.phoneNumber = ''
|
||||
dataToSend.idCardNumber = ''
|
||||
const dataToSend = {
|
||||
issueDescription: feedbackForm.issueDescription,
|
||||
phoneNumber: feedbackForm.phoneNumber
|
||||
}
|
||||
|
||||
const res = await addFeedback(dataToSend)
|
||||
@ -70,12 +48,8 @@ const submitFeedback = async () => {
|
||||
feedbackSubmitSuccess.value = true
|
||||
feedbackNoReturned.value = res.data?.feedbackNo || '未知'
|
||||
// 清空表单
|
||||
feedbackForm.legalArticle = ''
|
||||
feedbackForm.issueDescription = ''
|
||||
feedbackForm.userName = ''
|
||||
feedbackForm.phoneNumber = ''
|
||||
feedbackForm.idCardNumber = ''
|
||||
feedbackForm.contactInfoType = 1
|
||||
console.log('留言提交成功，查询编号：', feedbackNoReturned.value)
|
||||
} else {
|
||||
alert('提交留言失败：' + (res.msg || '未知错误'))
|
||||
@ -348,18 +322,13 @@ const formatDate = (dateStr: string | null | undefined): string => {
|
||||
<div class="feedback-section">
|
||||
<h3><i class="icon-chat"></i> 法律咨询与留言</h3>
|
||||
<div v-if="!feedbackSubmitSuccess" class="feedback-form">
|
||||
<p class="section-description">如果您对法律规定有任何疑问或建议，欢迎在此留言。</p>
|
||||
<div class="form-group">
|
||||
<label for="legalArticle"
|
||||
>有问题的法律条例或案例:<span class="required">*</span></label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="legalArticle"
|
||||
v-model="feedbackForm.legalArticle"
|
||||
placeholder="如：公司法第十五条"
|
||||
/>
|
||||
</div>
|
||||
<p class="section-description">
|
||||
如果您有以下问题可以给我们留言，我们会在十个工作日内反馈，
|
||||
</p>
|
||||
<p class="section-description">1.企业经营中遇到的法律问题；</p>
|
||||
<p class="section-description">2.企业遇到行政执法不规范问题；</p>
|
||||
<p class="section-description">3.对我们工作提出的意见和建议。</p>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="issueDescription">问题描述: <span class="required">*</span></label>
|
||||
<textarea
|
||||
@ -371,50 +340,13 @@ const formatDate = (dateStr: string | null | undefined): string => {
|
||||
></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="contactInfoType">联系方式类型:</label>
|
||||
<select id="contactInfoType" v-model="feedbackForm.contactInfoType">
|
||||
<option :value="1">手机号</option>
|
||||
<option :value="2">身份证号</option>
|
||||
<option :value="3">姓名</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="phoneNumber"
|
||||
>手机号:
|
||||
<span class="required" v-show="feedbackForm.contactInfoType === 1">*</span></label
|
||||
>
|
||||
<label for="phoneNumber">手机号: <span class="required">*</span></label>
|
||||
<input
|
||||
type="text"
|
||||
id="phoneNumber"
|
||||
v-model="feedbackForm.phoneNumber"
|
||||
placeholder="请输入手机号"
|
||||
:required="feedbackForm.contactInfoType === 1"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="idCardNumber"
|
||||
>身份证号:
|
||||
<span class="required" v-show="feedbackForm.contactInfoType === 2">*</span></label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="idCardNumber"
|
||||
v-model="feedbackForm.idCardNumber"
|
||||
placeholder="请输入身份证号"
|
||||
:required="feedbackForm.contactInfoType === 2"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="userNameContact"
|
||||
>姓名:
|
||||
<span class="required" v-show="feedbackForm.contactInfoType === 3">*</span></label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="userNameContact"
|
||||
v-model="feedbackForm.userName"
|
||||
placeholder="请输入您的姓名"
|
||||
:required="feedbackForm.contactInfoType === 3"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<button @click="submitFeedback" class="submit-btn">提交留言</button>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user