46 行
4.3 KiB
Markdown
46 行
4.3 KiB
Markdown
# 联系我们页面重构
|
||
|
||
页面：https://www.gynhc.com/official/online_message/list/18/18.html
|
||
|
||
## 页面策划与文案
|
||
|
||
以业务咨询为核心，提供电话、邮箱和在线留言三种沟通方式。页面包括首屏介绍、项目需求表单、直接联系、资料准备建议、到访地址和常见问答。沿用现有电话、邮箱、工作时间与办公地址；地图按地点关键词查询，不使用未经核实的坐标或伪地图。
|
||
|
||
撤下两小时回访、24 小时方案等未确认承诺，改为根据需求和工作安排沟通。说明初次咨询的资料范围、脱敏建议及保密安排，不以 ISO 字样作无依据背书。电话与邮箱读取站点配置，点击即可拨号或打开邮件应用。
|
||
|
||
## 设计与资产
|
||
|
||
浅色商务风，1280px 容器、科技蓝、细线及紧凑布局。桌面采用表单与联系方式双列，手机端单列。保留站点当前字体规范。新增石材门框与蓝色玻璃桥抽象主视觉，配图明确标注示意。
|
||
|
||
页面模板：`addons/official/view/web/official_online_message/list.html`、`list_e.html`。
|
||
|
||
独立样式：`public/assets/addons/official/css/contact-nhc.css`；独立脚本：`public/assets/addons/official/js/contact-nhc.js`。未修改后端控制器、模型及全站公共样式。
|
||
|
||
图片使用内置 image_gen 生成，保存于 `public/assets/addons/official/images/contact/connection.webp` 与 `connection.jpg`，1440×960。WebP 66,562 字节，JPEG 151,461 字节，首屏优先加载。提示词见 `contact-image-prompt.json`。
|
||
|
||
## 表单行为
|
||
|
||
- 称呼、联系电话、主题及需求说明必填，标签与输入控件显式关联；错误显示在对应字段并聚焦首项错误。
|
||
- 咨询方向使用按钮，支持键盘及选中状态，可快速填入主题，也可自行编辑。
|
||
- 图片验证码支持键盘更换，继续使用原站验证码和令牌机制。
|
||
- 使用原有 `name`、`phone`、`title`、`content`、`captcha`、`__token__` 字段及原提交接口。每次提交前从现有 `/hhome/get_token.html` 获取新令牌，避免单次令牌失效后无法重试。
|
||
- 提交中禁用按钮，输入设为只读，避免重复提交及输入变化。仅服务端明确成功时清空内容；失败保留正文，校验返回后刷新验证码。
|
||
- 网络异常或超时后不自动重复 POST。若无法确认提交结果，显示电话或邮箱确认提示并保留输入。
|
||
- 移除页面对外部 Axios CDN 及专属弹层脚本的依赖，使用原生 Fetch 与内联状态反馈。公共模板依赖保持不变。
|
||
|
||
## 验证
|
||
|
||
文案 5 项、配图 2 项、联系页结构 12 项检查通过。`tests/contact_form_browser.js` 在本地真实浏览器中执行 13 项模拟检查，覆盖空表单、电话校验、方向选择、重复点击、请求字段与令牌、服务器拒绝、验证码刷新、成功重置、失败重试及网络异常。所有成功路径采用本地模拟响应，未发送真实咨询留言。
|
||
|
||
检查 1440px 桌面、375px 手机、812px 横屏、125% 缩放及减少动态效果，无横向溢出。发现旧移动样式以 `!important` 覆盖输入框，已在页面独立作用域内修复为 16px 字号、48px 高度，文本域至少 125px。标签、主要按钮、验证码按钮与输入控件触控尺寸通过检查，菜单和问答支持键盘操作。
|
||
|
||
发布后桌面和 iPhone 请求为 200，模板、脚本、样式与图片引用正确，四个资源内容与本地一致。iPhone 15 模拟环境 393px 宽度无溢出，主题选择、菜单、问答和主视觉正常，无浏览器错误。验证码接口返回图片，令牌接口返回有效响应；使用空必填字段验证线上接口拒绝缺失令牌及空内容，未创建留言。未向线上写入成功测试记录，成功反馈与重试流程通过模拟验证。
|
||
|
||
UI/UX Pro Max 本地搜索脚本为失效路径指针，依据技能正文完成布局、表单、可访问性与响应式检查，保留现有 ThinkPHP 技术栈。
|
||
|
||
## 发布与回退
|
||
|
||
发布 6 个文件，静态资源先于模板，上传校验 SHA-256，覆盖前检查远端未在核对后变更，清理编译模板缓存。未执行 Git reset 或修改其他业务页面。
|
||
|
||
服务器原版备份：`/www/backup/nhc-contact-redesign-20261105-153734`。清单：`runtime/contact-deployment.json`。本地旧模板与远端快照：`runtime/contact-backup/`。
|