feat: 首页调整

manifest.json

@@ -51,6 +51,14 @@
     /* 小程序特有相关 */
     "mp-weixin" : {
         "appid" : "wx6172ec67683d31b9",
+        "requiredPrivateInfos" : [
+            "getLocation"
+        ],
+        "permission" : {
+            "scope.userLocation" : {
+                "desc" : "计算接单距离、调用导航功能"
+            }
+        },
         "setting" : {
             "urlCheck" : false
         },

pages/index/index.vue

@@ -29,7 +29,8 @@
             <view class="icon-ctr flex-c">
               <me-icon type="icon-navigation" color="var(--descriptionColor)" size="60rpx"></me-icon>
             </view>
-            <view class="distance flex-c">8.34公里</view>
+            <view class="distance flex-c" v-if="item.order_info.lng == 0 || item.order_info.lat == 0">未知距离</view>
+            <view class="distance flex-c" v-else>{{formatDistance(item.order_info.lat, item.order_info.lng)}}</view>
           </view>
         </view>
         <view class="btn-ctr flex-sb">
@@ -66,7 +67,7 @@ const toDetail = (id) => {
 }
 
 onLoad(() => {
-  getList()
+  init()
 })
 
 const data = reactive({
@@ -99,6 +100,11 @@ const refreshStart = () => {
     return
   }
 
+  if (userLocation.lng === null || userLocation.lat === null) {
+    helpers.showToast('请授权位置权限')
+    return
+  }
+
   refresh.interval = setInterval(() => {
     refresh.rotate_deg -= 12;
   }, 16);
@@ -117,6 +123,36 @@ const refreshComplete = () => {
     })
   }
 }
+
+const userLocation = reactive({
+  lng: null,
+  lat: null,
+})
+
+//初始化
+const init = () => {
+  //获取师傅当前位置
+  uni.getLocation({
+    type: 'gcj02',
+    success(res) {
+      userLocation.lng = res.longitude
+      userLocation.lat = res.latitude
+      data.page = 1
+      getList()
+    },
+    fail(err) {
+      uni.showToast({
+        title: '请授权位置权限',
+        icon: "error"
+      })
+    }
+  });
+}
+
+const formatDistance = (lat, lng) => {
+  const res = helpers.getDistances(userLocation.lat, userLocation.lng, lat, lng);
+  return `${res.distance}${res.unit}`;
+}
 </script>
 
 <style lang="scss" scoped>

utils/helpers.js

@@ -85,5 +85,42 @@ class helpers {
 
 		return `${weekDay} ${year}年${month}月${day}日 ${hours}:${minutes}`;
 	}
+
+	static rad(d) {
+		return d * Math.PI / 180.0;
+	}
+
+	static getDistances(lat1, lng1, lat2, lng2) {
+		var radLat1 = this.rad(lat1);
+		var radLat2 = this.rad(lat2);
+		var a = radLat1 - radLat2;
+		var b = this.rad(lng1) - this.rad(lng2);
+		var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
+			Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
+
+		s = s * 6378.137; // EARTH_RADIUS;
+
+		// 输出为公里
+		s = Math.round(s * 10000) / 10000;
+
+		var distance = s;
+		var unit;
+		if (parseInt(distance) >= 1) {
+			distance = distance.toFixed(2);
+			unit = "公里";
+		} else {
+			distance = (distance * 1000).toFixed(2);
+			if (distance >= 1000) {
+				distance = 999
+			}
+
+			unit = "米";
+		}
+
+		return {
+			distance: distance,
+			unit: unit
+		}
+	}
 }
 export default helpers