// 目前想要搭建一个商城类型的小程序，官方貌似还没有响应计算运费的API；
// 找了半天貌似也都只有描写UI这块怎么写的，关键是运费每家公司的计算标准都不太一样，并且也没有一个准确的价格
// 于是我尝试自己写一了个计算运费的模块。。。

〇、收集数据

• 首先打开自己支持的物流寄件公司（申通呀，圆通呀，中国邮政呀。。。）
• 然后在其运费查询界面挨个查询运费数据（可以根据个人喜好多记录几家，毕竟有些便宜实惠、有些安全高效。。。）

• 等数据收集完毕后可以建立自己的数据库了
  

一、数据库

新建一个 *.json 的文件，在里面输入对应的信息，数据大致分为2部分：

• 第一部分：可以省略，表示的是每个地方支持的快递方式（比方说上海地区支持来店自取，但别的地方暂不支持。。。）

{
 "type": "Region",
 "data": [
   {
     "region": "北京市",
     "company": [
       "申通快递",
       "中国邮政"
     ]
   },
   ... ...
 ]
}

• 第二部分：表示每家物流公司所需要的具体运费

{
  "company": "申通快递",
  "data": [
    {
      "region": "北京市",
      "fare": 12
    },
    ... ...
  ]
}

在云开发中的具体数据：

ps：这里我在代码写完后才发现，上面的数据可以合并成如下形式。。。（emmmm算了，以后有机会再改吧~）

{
  "data": [
    {
      "region": "北京市",
      "company": [
        {
          "type": "申通快递",
          "fare": 12
        },
        {
          "type": "中国邮政",
          "fare": 8
        }
      ]
    },
    ... ...
  ]
}

二、JSON文件

顺带一提，用户的地址信息用的是 <picker mode="region">...</picker> 最后是根据用户填写的省份来判断运费的价格的；
用户的个人地址被存放在 app.globalData.addressData.region 中，其中 region[0] 是省份；region[1] 是市；region[2] 是区

const regeneratorRuntime = require("../../lib/runtime");
const app = getApp();
Page({
  /**
   * 页面的初始数据
   */
  data: {
    productData: "",	// 商品信息
    allData: "",		// 用户的订单信息
    addressData: "",	// 用户的地址信息
    fare: 0,			// 运费
    logistic: [],
    price: 0			// 总价 = 商品金额 + 运费
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.setData({
      productData: app.globalData.productData,
      allData: app.globalData.allData,
      addressData: app.globalData.addressData
    })
    this.getLogistics()
  },

  /**
   * 利用云开发新接口，读取所有物流数据
   */
  async getLogistics() {
    const db = wx.cloud.database();
    const logisticsCollection = await db.collection('logistics')
    const items = []
    let comp = []

    logisticsCollection.get().then(res => {
      let logistic = res.data
      for (const item of logistic) {
        if (item.type === "Region") {
          comp = item.data.filter(region => region.region === app.globalData.addressData.region[0])[0].company
          console.log(comp)
          console.log(item)
        } else {
          items.push({
            company: item.company,
            fare: item.data.filter(region => region.region === app.globalData.addressData.region[0])[0].fare
          })
        }
      }
      // 默认的快递方式为 “中国邮政”
      const fare = items.filter(company => company.company === "中国邮政")[0].fare
      this.setData({
        logistic: items.filter(company => !!~comp.indexOf(company.company)),
        fare: fare,
        price: app.globalData.productData.price * app.globalData.allData.orderNum + fare
      })    
    })
  },

  /**
   * 更改收货方式(选择其他的物流公司)
   */
  chooseLogistic: function(e){
    const logisticList = []
    for (var i = 0; i < this.data.logistic.length; i++) {
      logisticList[i] = this.data.logistic[i].company
    }
    wx.showActionSheet({
      itemList: logisticList,
      success: res => {
        console.log(res.tapIndex)
        this.setData({
          fare: this.data.logistic[res.tapIndex].fare,
          price: app.globalData.productData.price * app.globalData.allData.orderNum + this.data.logistic[res.tapIndex].fare
        })
      }
    })
  },
  ... ...
})

三、WXML文件

{
  "usingComponents": {
    "van-cell": "vant-weapp/cell"
  }
}

<view class="m_book">

  <block wx:if="{{allData.address.length != 0}}">
    ... ...
  </block>
  <block wx:else>
    ... ...
  </block>
  
  ... ...
  
  <van-cell title="运费" value="{{allData.address.length == 0 ? '请选择地址' : '￥' + fare}}" bindtap="chooseLogistic"/>
  <view class="m_bottom-type">
    <view class="m_last-left">
      合计：￥{{price}}
    </view>
    ... ...
  </view>

</view>

四、最终效果