【实习】数字营销系统 银行经理端（interact_bank）前端 Vue 移动端页面的 UI 重构与优化

实习日报 - 2026年2月5日-6日

• • 工作内容概述
  • 一、任务列表页面优化 (`taskList.vue`)
  • • [1. 交互改进](#1. 交互改进)
    • [2. 布局重构](#2. 布局重构)
    • [3. 结构修复](#3. 结构修复)
  • 二、活动详情页面优化 (`basicInfo.vue`)
  • • 变更内容
  • 三、首页活动列表优化 (`home.vue`)
  • • 变更内容
  • 四、中奖记录页面优化 (`participants.vue`)
  • • 变更内容
  • 五、页面切换问题修复 (`activeInfo.vue`)
  • • 问题描述
    • 解决方案
  • 技术总结
  • 代码精简统计
  • 遇到的问题与解决

工作内容概述

今日主要完成了银行互动营销系统（interact_bank）前端 Vue 移动端页面的 UI 重构与优化工作。

---

一、任务列表页面优化 (taskList.vue)

1. 交互改进

• 移除"查看详情"按钮，改为点击整个列表项弹出详情抽屉
• 添加 showDetail() 方法实现点击查看详情功能
• 保留"扫码核销"按钮不变，使用 @click.stop 阻止事件冒泡

2. 布局重构

• 使用 Vant 组件 (van-cell-group, van-cell) 替代自定义 div 布局
• 采用紧凑的 cell 布局：标题 (#title) + 多行信息 (#label) + 右侧状态 (#value)
• 添加"任务详情"提示行，带右箭头图标
• 删除约 80 行自定义 CSS，代码更简洁

3. 结构修复

• 修复 van-cell-group 嵌套结构问题
• "任务列表"标题独立为自闭合标签
• 每个任务卡片独立，添加 10px 间距区分

---

二、活动详情页面优化 (basicInfo.vue)

变更内容

• 使用 van-cell 的 #title、#label、#value 插槽合并展示活动信息
• 标题加粗显示在左上角，状态显示在右上角
• 归属、开始/结束时间、预算合并在 label 区域
• 添加 v-if="data" 防止数据未加载时报错

---

三、首页活动列表优化 (home.vue)

变更内容

• 使用 van-cell-group inset + van-cell 替代自定义 div
• 使用 is-link 属性自带右箭头
• 标题、时间、预算信息紧凑展示在一个 cell 中
• 删除了 70+ 行自定义 CSS

---

四、中奖记录页面优化 (participants.vue)

变更内容

• 使用 van-cell-group inset + van-cell 紧凑布局
• 标题（奖品详情）显示在左上角，状态显示在右上角
• 中奖金额、奖品类型、订单ID、手机号合并在 label 区域
• 删除了 80 行自定义 CSS，代码从 135 行减少到约 40 行

---

五、页面切换问题修复 (activeInfo.vue)

问题描述

切换底部导航栏后再回到"活动信息"tab，活动详情丢失，只显示任务列表

解决方案

使用 sessionStorage 保存 activityId：

computed: {
    activityId() {
        const queryId = this.$route.query.activityId;
        if (queryId) {
            sessionStorage.setItem('activityId', queryId);
            return queryId;
        }
        return sessionStorage.getItem('activityId');
    }
}

---

技术总结

技术点	说明
Vant 组件	van-cell-group, van-cell, van-nav-bar, van-field, van-button
公司组件	z-list, z-action, z-dict, z-money, z-form
布局方式	使用 cell 的 #title、#label、#value 插槽实现紧凑布局
状态保存	sessionStorage 保存页面间共享数据

---

代码精简统计

文件	修改前行数	修改后行数	减少
home.vue	~123 行	~46 行	-77 行
participants.vue	~135 行	~40 行	-95 行
taskList.vue	~241 行	~144 行	-97 行

总计减少约 270 行代码，主要是自定义 CSS 样式。

---

遇到的问题与解决

1. 微信 JS SDK 报错 (Cannot read properties of undefined (reading 'send'))

   • 原因：本地浏览器环境无微信 bridge 接口
   • 结论：正常现象，部署到钉钉/微信移动端后不会报错

2. 页面白屏 (Cannot read properties of undefined (reading 'describe'))

   • 原因：data 未加载时就访问属性
   • 解决：添加 v-if="data" 条件判断

3. activityId 丢失

   • 原因：切换 tab 后 URL query 参数丢失
   • 解决：使用 sessionStorage 保存恢复