商品详情页

商品详情页

功能点：

考虑详情页功能比较复杂，把逻辑模块拆分为3部分

1. 商铺信息：处理后台商铺填写时的基本信息

• 直接展示字段：name（商铺名）avatar（商铺icon） mark（公告）delivery_fee（配送费用）mini_delivery_price（起送费用）open_time数组（营业时间）address（商铺地址）
• 需要计算字段：send_time（bd接口计算配送时间）
• 需要ui处理字段：phone（联系商铺 a标签 href="tel:xxx"）

2. 商铺菜单：处理商铺关联的商铺分类以及不同分类下的商品

• 接口拉取关联商铺的商品类比以及所有的对应商品，默认展示一个分类的第一个商品。
• 从 商品分类 到 商品sku 分为3个数据层级 商品类型 -> 商品基本信息 -> 商品规格信息
• 统一维护购物车数据（数组）。每次商品选择/购物车选择的变动需要更新：用户购物车，购物车商品金额，是否达到支付最低状态
• 购物车添加的基本数据结构：

{
  food_category_id: [{
    id: '',
    name: '',
    measure: '',
    image_path: '',
    price: '', // 原价以及库存信息等需从specfoods的第一位中取数据,
    is_discount: '',
    discount_val: ''
  }]
}

3. 商铺评价：处理跟此商铺关联的评价信息

需处理接口(API)：

1. 商铺基本信息接口
2. 商铺关联商品分类以及对应商品的list接口
3. 商铺评价list接口
4. 搜索商铺内对应商品
5. 创建订单 (待确认是否要加先创建购物车再处理订单这系列逻；待确认字段)

ui交互

参考mt，elm以及cangdu的交互

1. 商铺信息部分: 两个地方需要特殊处理：商铺位置，点击在地图中定位商铺位置; 联系商铺，点击拉起电话
2. 每个分类相互之间数据不互通，点击分类切换到该分类的商品列表
3. 商品卡片显示： 类似:

• 展示字段：
• 商品名：name
• 商品图片：image_path
• 商品描述：description
• 几人份：measure
• 是否有折扣：is_discount
• 折扣力度：discount_val
• 商品属性：attrs: [是否新品：is_new，是否招牌：id_hot]，两个互斥的！！！
• 商品规格：数组第一项为默认展示商品！

{
  规格名：name
  本规格打包费：packing_fee
  本规格价格：price
  本规格库存：stock
}

4. 分类右上角显示改分类里已选的商品数量，动态更新
5. 购物车简略信息（当次选择的总金额）置底显示，点击modal显示所有购物车列表的详细信息。购物车根据用户选择动态更新

[note]

1. 待处理模块：商铺的红包体系，特色体系，商铺评价
2. 参考链接:

• mt: https://h5.waimai.meituan.com/waimai/mindex/menu?mtShopId=899698129094764&poi_id_str=RjHjksY-IItcCmyv11H5agI&dishId=&source=shoplist&utm_source=60030&channel=mtib&mtOrderId=&h5_detail_back=&initialLat=39.914798&initialLng=116.516898&actualLat=39.914798&actualLng=116.516898
• cangdu: https://cangdu.org/elm/#/shop?geohash=39.975951,116.317612&id=1