framework7_city_selector

framework7_city_selector.vue

    var location = function (target) {
      let vendors = {
        api: 'http://184.api.kr.xingyuanauto.com/basedata/api?Method=Xy.Kr.BaseData.',
        province: [''],
        provinceDisplay: [''],
        city: [''],
        cityDisplay: [''],
        cities: {},
        citiesDisplay: {},
        type: {
          province: 'GetProvinceData',
          city: 'GetCitiesData&dataProvId=',
          district: 'GetDistrictData&dataProvId='
        }
      }
      let province = function (type) {
        let p = new Promise((resolve, reject) => {
          let url = vendors.api + type + (typeof id === 'undefined' ? '' : id)
          vm.$$.get(url, data => {
            vendors.province = JSON.parse(data).map(item => item.Id).slice(1, -3)
            vendors.provinceDisplay = JSON.parse(data).map(item => item.Name).slice(1, -3)
            resolve(vendors.province)
          })
        })
        return p
      }
      let city = function (list) {
        let c = new Promise((resolve, reject) => {
          resolve(list)
        })
        return c
      }
      let picker = function () {
        let pickerDependent = vm.$f7.picker({
            input: target,
            rotateEffect: true,
            toolbarCloseText: '确定',
            formatValue: function (p, values, displayValues) {
              return displayValues.join(' ')
            },
            cols: [
                {
                  values: vendors.province,
                  displayValues: vendors.provinceDisplay,
                  textAlign: 'center',
                  width: 200,
                  onChange: function (picker, province) {
                    if(picker.cols[1].replaceValues){
                      picker.cols[1].replaceValues(
                        vendors.cities[province],
                        vendors.citiesDisplay[province]
                      )
                    }
                  }
                },
                {
                  values: vendors.cities[vendors.province[0]],
                  displayValues: vendors.citiesDisplay[vendors.province[0]],
                  textAlign: 'center',
                  width: 200
                }
            ]
        })
      }
      province(vendors.type.province)
        .then(data => city(data))
        .then(data => {
          data.forEach(id => {
            vm.$$.get(vendors.api + vendors.type.city + id, data => {
              vendors.cities[id] = JSON.parse(data).map(item => item.Id)
              vendors.citiesDisplay[id] = JSON.parse(data).map(item => item.Name)
              vm.$f7.ls.setItem('vendors', JSON.stringify(vendors))
            })
          })
        })
    }

    var locationWidget = function (target) {
      let vendors = {
        api: 'http://184.api.kr.xingyuanauto.com/basedata/api?Method=Xy.Kr.BaseData.',
        province: [''],
        provinceDisplay: [''],
        city: [''],
        cityDisplay: [''],
        cities: {},
        citiesDisplay: {},
        type: {
          province: 'GetProvinceData',
          city: 'GetCitiesData&dataProvId=',
          district: 'GetDistrictData&dataProvId='
        }
      }
      let getSource = function (type, id) {
        var url = vendors.api + type + (typeof id === 'undefined' ? '' : id)
        vm.$$.get(url, function (data) {
          vendors.province = JSON.parse(data).map(item => item.Id).slice(1, -3)
          vendors.provinceDisplay = JSON.parse(data).map(item => item.Name).slice(1, -3)
          vendors.province.forEach(id => {
            vm.$$.get(vendors.api + vendors.type.city + id, data => {
              vendors.cities[id] = JSON.parse(data).map(item => item.Id)
              vendors.citiesDisplay[id] = JSON.parse(data).map(item => item.Name)
            })
          })
          setTimeout(function(){
            var pickerDependent = vm.$f7.picker({
                input: target,
                rotateEffect: true,
                toolbarCloseText: '确定',
                formatValue: function (p, values, displayValues) {
                  return displayValues.join(' ')
                },
                cols: [
                    {
                      values: vendors.province,
                      displayValues: vendors.provinceDisplay,
                      textAlign: 'center',
                      width: 200,
                      onChange: function (picker, province) {
                        if(picker.cols[1].replaceValues){
                          picker.cols[1].replaceValues(
                            vendors.cities[province],
                            vendors.citiesDisplay[province]
                          )
                        }
                      }
                    },
                    {
                      values: vendors.cities[vendors.province[0]],
                      displayValues: vendors.citiesDisplay[vendors.province[0]],
                      textAlign: 'center',
                      width: 200
                    }
                ]
            })
          }, 100)
        })
      }
      return function () {
        getSource(vendors.type.province)
      }
    }