Complete core mini program flows

pets-fe/pages/walk/walk.js

@@ -11,9 +11,12 @@ Page({
     duration: "00:00",
     distance: "0.00",
     share: false,
+    busy: false,
+    locationError: "",
   },
   onShow() {
     this.load();
+    clearInterval(this.clock);
     this.clock = setInterval(() => this.tick(), 1000);
   },
   onHide() {
@@ -25,6 +28,8 @@ Page({
   stopTimers() {
     clearInterval(this.clock);
     clearInterval(this.tracker);
+    this.clock = null;
+    this.tracker = null;
   },
   async load() {
     try {
@@ -41,7 +46,13 @@ Page({
       this.setData({ pets, selected, walk });
       if (walk) {
         this.renderWalk(walk);
-        this.track();
+        if (walk.status === "active") {
+          this.track();
+          this.point();
+        }
+      } else {
+        clearInterval(this.tracker);
+        this.setData({ points: [], polyline: [], duration: "00:00", distance: "0.00", share: false });
       }
     } catch (e) {
       toast(e);
@@ -53,19 +64,33 @@ Page({
     wx.setStorageSync("walk_pet_ids", e.detail.selected);
   },
   async start() {
+    if (this.data.busy) return;
     if (!this.data.selected.length) {
       wx.showToast({ title: "请选择同行的狗狗", icon: "none" });
       return;
     }
+    this.setData({ busy: true, locationError: "" });
+    let position;
+    try {
+      position = await wx.getLocation({ type: "gcj02" });
+    } catch (error) {
+      this.setData({ busy: false, locationError: "请检查小程序定位权限，开启后再试" });
+      toast(new Error("无法取得位置，请检查定位权限"));
+      return;
+    }
+    this.setData({ latitude: position.latitude, longitude: position.longitude });
     try {
       const walk = await secure("/walks", "POST", {
         pet_ids: this.data.selected,
       });
       this.setData({ walk });
       this.track();
-      this.point();
+      await this.savePoint(position);
     } catch (e) {
+      if (this.data.walk) this.setData({ locationError: "轨迹保存失败，请点击重试" });
       toast(e);
+    } finally {
+      this.setData({ busy: false });
     }
   },
   track() {
@@ -73,17 +98,27 @@ Page({
     this.tracker = setInterval(() => this.point(), 15000);
   },
   async point() {
-    if (!this.data.walk || this.data.walk.status !== "active") return;
+    if (!this.data.walk || this.data.walk.status !== "active" || this.locating) return;
+    this.locating = true;
     try {
       const pos = await wx.getLocation({ type: "gcj02" });
-      const walk = await secure(
-        "/walks/" + this.data.walk.id + "/points",
-        "POST",
-        { latitude: pos.latitude, longitude: pos.longitude },
-      );
-      this.renderWalk(walk);
+      await this.savePoint(pos);
+      this.setData({ locationError: "" });
     } catch (e) {
-      console.warn(e);
+      if (this.data.walk) this.setData({ locationError: "定位更新失败，请检查定位权限和网络" });
+    } finally {
+      this.locating = false;
+    }
+  },
+  async savePoint(pos) {
+    const walkId = this.data.walk.id;
+    const walk = await secure(
+      "/walks/" + walkId + "/points",
+      "POST",
+      { latitude: pos.latitude, longitude: pos.longitude },
+    );
+    if (this.data.walk && this.data.walk.id === walkId && this.data.walk.status === "active") {
+      this.renderWalk(walk);
     }
   },
   renderWalk(walk) {
@@ -99,7 +134,7 @@ Page({
         pts.length > 1 ? [{ points: pts, color: "#268e6a", width: 5 }] : [],
       latitude: last ? last.latitude : this.data.latitude,
       longitude: last ? last.longitude : this.data.longitude,
-      distance: (walk.distance_meters / 1000).toFixed(2),
+      distance: ((walk.distance_meters || 0) / 1000).toFixed(2),
       share: walk.share_enabled,
     });
     this.tick();
@@ -125,7 +160,9 @@ Page({
     });
   },
   async action(e) {
+    if (this.data.busy) return;
     const kind = e.currentTarget.dataset.kind;
+    this.setData({ busy: true });
     try {
       const walk = await secure(
         "/walks/" + this.data.walk.id + "/" + kind,
@@ -134,12 +171,23 @@ Page({
       this.renderWalk(walk);
       if (kind === "finish") {
         clearInterval(this.tracker);
+        this.setData({ walk: null, points: [], polyline: [], duration: "00:00", distance: "0.00", share: false });
         wx.showToast({ title: "今天的快乐已记录", icon: "success" });
+      } else if (kind === "resume") {
+        this.track();
+        this.point();
+      } else {
+        clearInterval(this.tracker);
       }
     } catch (err) {
       toast(err);
+    } finally {
+      this.setData({ busy: false });
     }
   },
+  records() {
+    wx.navigateTo({ url: "/pages/walk-records/walk-records" });
+  },
   async shareChange(e) {
     try {
       const walk = await secure(