# 米饭商城
> 商城移动端，米饭公社与米到家都可用，另外微信端已做适配。 接口对接：大鹏

*项目目录 基于vue-cli 百度一下你就知道*
*只摘选有必要的目录进行说明*

```项目目录
  > build            ---------  webpack编译文件
  > config           ---------  配置
  > src              ---------  开发目录 
  * index.html       ---------  默认index.html文件
  * package.json     ---------  依赖等相关json
```
---

*src*

```开发目录
  > assets           ---------  静态文件（图片等文件）
  > bridge           ---------  与原生交互封装
  > components       ---------  组件
  > http             ---------  axios封装目录 
  > plugns           ---------  开发需要用到的插件，比方：vconsole
  > router           ---------  路由 
  > store            ---------  全局状态 
  > views            ---------  vue文件目录 
  * App.vue          ---------  vue指定的root根组件
  * config.js        ---------  依赖等相关json
  * main.js          ---------  入口
```

---

* #### main.js
  1. 移动端需要查看调试信息，开发环境可解开注释
  2. *platForm* 值用来记录是否为米到家 米到家app内时值为2
  ```js
    // platForm看上述 2 
    Vue.prototype.platForm = ''      // 米到家平台值为：2

    // 这个 sharePeopleId 可以全局搜，理清对应的分享逻辑，这块主要是基于米到家分享带的参数
    Vue.prototype.sharePeopleId = '' // 米饭扫描 米到家 的二维码活动分享人（师傅的masterId）

    // 这里只添加了对 X、XS、XS MAX、XR 的匹配，如果后续系列不一致可再这部分进行添加，用来处理刘海和留底
    function isIphonX () {
        /* 省略 */ 
    }

    // 远古无用代码，暂未清理  看情况清除
    Vue.prototype.feEnv = '';
  ```

    *剩余代码皆有良好注释，可自行参考业务进行梳理*

---

* #### store/store.js
  1. userInfo中可自行 [模拟登陆](https://mitm.4zlink.com/login) 进行填写信息进行本地开发
  2. 生成环境务必 *注释所有用户信息*，否则将对线上用户信息紊乱
  3. 另可通过内管进行添加本地地址，在app端开发，具体可与 *测试* 沟通学习，或者参考下图

  ![配置本地开发图示](../assets/配置本地开发到app图示.png)

---

* #### bridge/index.js
  1. 这里对 *ios* 新老webview进行适配，基本稳定，如需更改可与 ios-棕栋 
  2. *plugns* 下的 *Native.js* 如需增加调用原生方法，请于ios-棕栋，Android进行沟通同意方法
  3. 上述2可照搬到缴费模块h5以及订单信息h5模块
  ```js 
    // 适配ios端新的webview
    if (IS_IOS) {
        if (window.WVJBCallbacks) { window.WVJBCallbacks.push(callback) }
        window.WVJBCallbacks = [callback]
        var WVJBIframe = document.createElement('iframe')
        WVJBIframe.style.display = 'none'
        WVJBIframe.src = 'https://__bridge_loaded__'
        document.documentElement.appendChild(WVJBIframe)
        setTimeout(function () { document.documentElement.removeChild(WVJBIframe) }, 0)
    }
  ```

---

* #### view/index.vue
  1. index.vue需要注意两块，社区拼团与社区专享，其余属于远古继承，可自行梳理
      ```js 
        // getCommunity 是用来取store中小区信息，可通过社区专享进入对应页面进行选取切换城市和小区，修改的同样式store中信息
        mapGetters(['getUserInfo', 'getCommunity']),

        // 首页社区专享产品获取
        getCommunityProduct() {
           /* 该方法中取 city 值操作，依次是先从store中 getCommunity 取， 之后到 getUserInfo 中取。 */
           /* 如果在store中取值失败最后会将请求中获取的默认城市小区进行赋值，以及取对应小区下社区专享和社区拼团 */
        }
      ```
  2. mounted中的微信验签，封装在 *utils.js* 中，具体请在该js中查看
  
---

* #### view/各个商品详情页
  1. 商城存在多个商品详情，并未放在一个组件处理，远古遗留，基本很多无法复用，复用的部分基本已经拆离
     * 优选商品详情(GoodProDetail.vue)
     * 拼团商品详情(GroupDetail.vue)
     * 秒杀商品详情(SeckillDetail.vue)
     * 荣盛币详情(RsbDetail.vue)
     * 新社区拼团商品详情(CommunityGroupActivity/ProductDetail.vue)

  2. 优选商品详情
     * 由于社区专享和优选很多部分重叠，因此复用这个详情页
     * 区分社区专享和优选的方法
        * *source == 'CommunityList'*
     * 区分社区专享中线上线下是根据是否自提判断
        * *selfGood字段* 具体可与大鹏沟通交流

  3. 新社区拼团商品详情
     * 这个详情页拆分了倒计时组件，倒计时做了比较多的优化，拼团秒杀等详情的倒计时需要时间同步可以按需取用
     * 社区拼团活动详情 拆分 手势组件，未做太多注释，可在npm搜索这个组件，原本是react内的，改成vue组件进行使用的。代码不多，自行理解

---

*剩余代码基本比较正常业务逻辑，无需注明*
