_

Author: YuezhiLi

pages/driver/driver.js

@@ -1,5 +1,4 @@
 // pages/driver/driver.js
-var tcity = require("../../utils/citys.js");
 var app = getApp()
 Page({
 
@@ -14,15 +13,15 @@ Page({
     truckTypeIndex: 0,
     lengthIndex: 0,
     axlesIndex: 0,
-    provinces: [],
-    originProvince: "",
-    citys: [],
-    originCity: "",
-    countys: [],
-    originCounty: '',
+    cityArray: ['成都', '上海', '深圳', '广州', '重庆', '北京', '石家庄', '天津', '青岛', '昆明', '西安', '乌鲁木齐', '长沙', '武汉', '厦门', '杭州', '南京', '太原', '呼和浩特', '沈阳'],
+    originCityIndex: 0,
     value: [0, 0, 0],
     values: [0, 0, 0],
-    condition: false
+    condition: false,
+    destination: false,
+    destinationCityIndex: 0,
+    originCity: '成都',
+    destinationCity: '成都'
   },
 
 
@@ -47,70 +46,39 @@ Page({
     });
   },
 
-  bindChangeOrigin: function (e) {
-    var val = e.detail.value
-    console.log('val', val)
-    var t = this.data.values;
-    var cityData = this.data.cityData;
-
-    if (val[0] != t[0]) {
-      console.log('province');
-      const citys = [];
-      const countys = [];
-
-      for (let i = 0; i < cityData[val[0]].sub.length; i++) {
-        citys.push(cityData[val[0]].sub[i].name)
-      }
-      for (let i = 0; i < cityData[val[0]].sub[0].sub.length; i++) {
-        countys.push(cityData[val[0]].sub[0].sub[i].name)
-      }
-
-      this.setData({
-        originProvince: this.data.provinces[val[0]],
-        originCity: cityData[val[0]].sub[0].name,
-        citys: citys,
-        originCounty: cityData[val[0]].sub[0].sub[0].name,
-        countys: countys,
-        values: val,
-        value: [val[0], 0, 0]
-      })
-
-      return;
+  chooseDestination: function() {
+    let page = this;
+    if (page.data.destination) {
+      page.setData({destination: false})
+    } else {
+      page.setData({destination: true})
     }
-    if (val[1] != t[1]) {
-      console.log('city');
-      const countys = [];
-
-      for (let i = 0; i < cityData[val[0]].sub[val[1]].sub.length; i++) {
-        countys.push(cityData[val[0]].sub[val[1]].sub[i].name)
-      }
+  },
 
-      this.setData({
-        originCity: this.data.citys[val[1]],
-        originCounty: cityData[val[0]].sub[val[1]].sub[0].name,
-        countys: countys,
-        values: val,
-        value: [val[0], val[1], 0]
-      })
-      return;
-    }
-    if (val[2] != t[2]) {
-      console.log('county');
-      this.setData({
-        originCounty: this.data.countys[val[2]],
-        values: val
-      })
-      return;
-    }
+  bindOriginChange: function(e) {
+    let page = this;
+    this.setData({
+      originCityIndex: e.detail.value
+    })
+    console.log(this.data.cityArray[this.data.originCityIndex])
+    this.setData({
+      originCity: page.data.cityArray[page.data.originCityIndex]
+    })
   },
-  open: function () {
+
+  bindDestinationChange: function (e) {
+    let page = this;
     this.setData({
-      condition: !this.data.condition
+      destinationCityIndex: e.detail.value
+    })
+    console.log(this.data.cityArray[this.data.destinationCityIndex])
+    this.setData({
+      destinationCity: page.data.cityArray[page.data.destinationCityIndex]
     })
   },
 
-  getLocation: function() {
-    var locationString = this.data.originProvince + this.data.originCity + this.data.originCounty
+  getLocation: function(e) {
+    var locationString = this.data.cityArray[e]
 
     let page = this;
     var url = `https://restapi.amap.com/v3/geocode/geo?key=0b085d826757c57521465d4faa3f05be&address=${locationString}`
@@ -119,9 +87,7 @@ Page({
       success(res) {
         console.log(res.data.geocodes.location)
         var location = res.data.geocodes.location
-        page.setData({
-          location: location
-        })
+        return location
       }
     })
   },
@@ -138,35 +104,7 @@ Page({
     console.log("onLoad");
     var that = this;
 
-    tcity.init(that);
-
-    var cityData = that.data.cityData;
-
-    const provinces = [];
-    const citys = [];
-    const countys = [];
-
-    for (let i = 0; i < cityData.length; i++) {
-      provinces.push(cityData[i].name);
-    }
-    console.log('省份完成');
-    for (let i = 0; i < cityData[0].sub.length; i++) {
-      citys.push(cityData[0].sub[i].name)
-    }
-    console.log('城市完成');
-    for (let i = 0; i < cityData[0].sub[0].sub.length; i++) {
-      countys.push(cityData[0].sub[0].sub[i].name)
-    }
-
-    that.setData({
-      'provinces': provinces,
-      'citys': citys,
-      'countys': countys,
-      'originProvince': cityData[0].name,
-      'originCity': cityData[0].sub[0].name,
-      'originCounty': cityData[0].sub[0].sub[0].name
-    })
-    console.log('初始化完成');
+    
   },
 
 

pages/driver/driver.wxml

@@ -1,35 +1,17 @@
 <!--pages/driver/driver.wxml-->
 <view class="container">
+  <view class='city-picker'>
+  <picker bindchange="bindOriginChange" value="{{originCityIndex}}" range="{{cityArray}}">{{originCity}}</picker>
+</view>
+<button bindtap='chooseDestination' class="{{destination ? 'selected' : 'not-selected' }}">选择目的地</button>
+<view wx:if="{{destination}}" class='city-picker'>
+  <picker bindchange="bindDestinationChange" value="{{destinationCityIndex}}" range="{{cityArray}}">{{destinationCity}}
+  </picker>
+</view>
   <form bindsubmit="formSubmit">
     <view class="form-container col">
 
     <view><input name="Driver License" class="" placeholder="Driver License #" /></view>
-    origin destination
-    <view class="loc-picker">
-
-      <view class="input">
-        <input placeholder="选择地址" value="{{originProvince}}-{{originCity}}-{{originCounty}}" focus="{{focus}}" bindfocus="open" />
-      </view>
-    </view>
-
-    <view wx:if="{{condition}}" class="citypicker">
-      <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChangeOrigin" class="citybody">
-        <view class="cityheader">
-          <view bindtap="open" class="city-cancel">取消</view>
-          <view bindtap="open" class="city-true">确定</view>
-        </view>
-        <picker-view-column>
-          <view wx:for="{{provinces}}" wx:key="item" style="line-height: 50px;padding-left:10px;">{{item}}</view>
-        </picker-view-column>
-        <picker-view-column>
-          <view wx:for="{{citys}}" wx:key="item" style="line-height: 50px;padding-left:10px;">{{item}}</view>
-        </picker-view-column>
-        <picker-view-column>
-          <view wx:for="{{countys}}" wx:key="item" style="line-height: 50px;padding-left:10px;">{{item}}</view>
-        </picker-view-column>
-      </picker-view>
-    </view>
-
 <view class="row">
   truck type: 
   <view>

pages/driver/driver.wxss

@@ -8,6 +8,14 @@ input {
   border: 1px solid black;
 }
 
+.selected {
+  background-color: peachpuff;
+}
+
+.not-selected {
+  background-color: white;
+}
+
 .picker-view {
   width: 100%;
   display: flex;