美团实习总结二--活动录入总结


活动策略录入总结

整体思路
思路yuque_diagram.jpg

(一)功能实现

1、excel读取(学习)

const fileConcent = e.target.file[0]; //fileContent 为文件信息
const reader = new FileReader(); //读取文件方法
reader.readAsBinaryString(fileContent);//执行该方法时,自动触发onload,read结果放在wordbook中,workbook包含excel所有信息,如下图;
image.png
把上图结果workbook转为json(sheet.to_json方法)

2、上传提示框 el-dialog

3、批量删除

image.png

4、数据校验

  • 折扣输入框:一位数字–>num*10; 输入长度maxlength<=2;

  • el-input输入框属性 :rules=”[{type:array, required, message: “不可为空”}]”

  • 提交时判断数字数字是否为空,为空则this.$message.error(‘’);

    5、新建情况下“其他活动”

    变化:单个活动变为->多个活动录入,
    upload:上传图片
    第一个其他活动使用原来的城市日期等


    其他活动,活动参数由对象变为对象数组,难点

  • 添加日期、规则、上传图片等组件需要条件:判断type = 其他

  • 使用新数组(对象–>对象数组)保存信息,各个属性值与原来参数同,以v-for形式展示多个活动;

  • 上传功能:el-upload组件,包含预览、保存url、多个图片、放大和删除

  • 新增活动:日期城市名称等信息push进新数组,列表活动增加一个;

  • 提交处理:数组遍历,每次提交一个对象信息,其中需要拆分城市id数组;


查看和编辑状态–>点击进入详情

  • watch监听:如果为“其他”活动, 对象参数 ->另一个对象数组中;

查看:限制不可用
重新编辑:信息修改或增加活动

  • 再次提交时,根据活动id(后端产生,更新则有id,新增无id)区分为“更新”和“新增”,分开提交
  • 图片回显,fileList将url以对象形式存储,能够在upload中展示;

6、活动录入流程图

yuque_diagram.jpg

7、合并日历展示–table 难点

数据格式处理:按天数据(按列给数据)–>按活动类型展示(分5行展示);一个活动类型–>多个活动(求最大行数); 每一行活动内容相同
tableContent处理–5层循环:
第一层5个活动类型;
每个类型最大行数,行数for循环,每一行活动;
每一行每一个日期:
每一行不同日期的对比;
不同日期中一天的多个活动依次对比,相同则放入同一行,不同则进入下一行;




行合并:行列合并通过span-method实现,在第一列合并;maxlength为合并的行数;
列合并:难点在于多次合并列和合并位置不确定;
image.png)image.png

8、数据处理思路

222.jpg

(二)所遇问题及解决

难点 原因及解决
1、合并后省略号一直显示的问题 原因:不能限制字符长度,限制会所以都省略;
解决:使用弹性盒子,只有内容过多时,才使用ellipsis省略号
display: -webkit-box; /作为弹性伸缩盒子模型显示/
-webkit-line-clamp: 1; /显示的行数;如果要设置2行加…则设置为2/
overflow: hidden; /超出的文本隐藏/
text-overflow: ellipsis; /* 溢出用省略号/
-webkit-box-orient: vertical; /*伸缩盒子的子元素排列:从上到下
/
2、删除图片时urls不存在 原因: urls的索引index 为null,无法定位到哪个活动
解决: 在调用增加和删除方法前,先获取index,根据第几个活动,来删除图片;
获取index:click –>mouseover;
3、第一次可以正常显示在最右侧,第二次位置不对,使用nexttick不起效果 原因:第二次渲染滚动条位置,页面没渲染完,导致位置不对
解决: 使用setTimeOut