项目需求
- 结构化行程中添加地图
- 移除上门接里现有的添加图片功能
- 添加地图新功能（标注的新字在上线后两个月下掉）
角色区分：（供应商支持关联接送范围模板，业务不支持） 范围设置前设置后
供应商点击：弹出【选择接送范围模板】
业务点击：弹出【编辑接送范围】 - 新增超范围说明（必填项，并且补充说明必填，保存时候出提示，文本框最多输入200字）
- 录好接送范围地图后，鼠标点击其它位置，进入预览模式
- 返程的逻辑同上门接一样
- 保存校验逻辑
- 非结构化行程中添加地图
- 需要新加一个模块，具体内容同结构化行程
- 模板选组与编辑
- 供应商角色时候，弹出选择接送范围模板
无模板情况
有模板情况,一页20条模板 有两种模板 地图绘制模板+上传表格模板,选择接送范围模板为单选，选中状态，非选中状态，切换选中的模板弹窗确认 - 业务角色，弹出编辑接送范围
新建模板按钮
模板编辑
模块名称：只有供应商角色登录才可看到模板名称字段
接送地点类型选择： 选择范围内所有地点或者仅范围内酒店 时下方显示地图，，，当选择仅部分酒店/地址时，下方显示excel表
绘制地图：
（1）地图选择
（2）绘制地图（地图定位，主城市，无上海、香港，地图高度5km，支持搜索，闭环，300点）
（3）绘制操作： 开始绘制按钮和清除绘制按钮 鼠标左击 右击
维护列表： 当显示的Excel时，可手动添加酒店信息，当非酒店类型时，可自行维护地址和名称
列表最多500 超出弹窗提示
下载或者上传表格，只有业务角色可操作
接送范围列表： 表格最多展示10条，超出滚动条
保存校验
-
VBK模板管理
-
相关技术调研
地图功能：
定位功能 搜索功能 路线规划功能
Android定位SDK ios 定位SDK
SDK与API的区别
进入开发
1. 相关业务
按照登录角色做两个弹窗（选择接送范围弹窗+编辑接送范围）
本次项目主要针对集合设置和返程设置，无行程结构， vbk模板管理
行程描述下面：
两个模板 isEdit ? <EditBox /> : <ViewBox />
然后在Route下面文件中用到：
集合设置 Route/CollectionSetting/index.js
行程设置 Route/TripSetting/index.js
返程设置Route/ReturnSetting/index.js
2. ant控件选择
- Button, 竟然支持href属性
<Button type="primary"
disabled={disabledInput}
className={`${styles['btnLinkMap']} ${styles['btn-itinitem']}`}
onClick={() => this.correlateMap()}>
{false ? "已关联上门接范围" : "+关联上门接范围"}
</Button>
- Select控件 VS Autocomplete控件
- Input
- RadioGroup
- lodash
执行onSelect事件后会把所选项的下标返回给e、
<Option key={index + item.name} id={`${index}${item.name}-noHandle`} value={index.toString()}>
{item.name}
</Option>
<Option key={index + item.name} id={`${index}${item.name}-noHandle`} value={JSON.stringify(item)} >
{item.name}
</Option>
option 的value属性,<select ><option value = "A">B</option></select> 其中“A”“B”有何区别，各自代表什么意思？
B是显示在网页上的内容
A是实际传给后台表单处理程序
option的两个重要属性value和text,text返回的就是B
JSON对象的两个方法：JSON.parse() 和 JSON.stringify() 通常用做JSON对象和字符串之间的相互转换
对于Input组件的输入字数限制：直接用maxLength={100}即可，那对那些没有这个属性的呢？可以根据 onChange函数对value做字符串截取：
handleChange: function(event) {
this.setState({value: event.target.value.substr(0, 100)});
}
下拉框或者复选框与单选按钮的潜在问题
当心，在力图标准化复选框与单选按钮的变换处理中，React使用click 事件代替 change 事件。在大多数情况下它们表现的如同预期，除了在change handler中调用preventDefault 。preventDefault 阻止了浏览器视觉上更新输入，即使checked被触发。变通的方式是要么移除preventDefault的调用，要么把checked 的触发放在一个setTimeout里。
handleSelectAddress = (e, item) => {
let { verifyAddress } = this.state;
let _verifyAddress = Object.assign(verifyAddress, {
isShowVerifyAddress: false
});
console.log('选中下啦框选项', [e, item])
setTimeout(()=>{
this.setState({
selectItem: item,
verifyAddress: _verifyAddress
})
},50);
}
[href="#"与href="javascript:void(0)"的区别]
// 点击链接偶不做任何跳转
1.<a href="javascript:void(0);" >test</a>
2.<a href="javascript:;" >test</a>
3.<a href="####" >test</a> //使用2个到4个#，见的大多是"####"，也有使用"#all"等其他的
// 点击链接后，相应用户自定义的事件
1.<a href="javascript:void(0)" onclick="doSomething()">test</a>
2.<a href="#" onclick="doSomething();return false;">什么问题都解决了,包括浏览器不兼容问题</a> //或者直接使用href=""
3.<a href="#" onclick="alert();event.returnValue=false;">test</a>
网友评论