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(

pets-fe/pages/walk/walk.wxml

@@ -38,6 +38,7 @@
     <pet-picker
       pets="{{pets}}"
       selected="{{walk?walk.pet_ids:selected}}"
+      disabled="{{walk!==null}}"
       bind:change="pick"
     />
     <view wx:if="{{!pets.length}}" class="empty">
@@ -47,6 +48,7 @@
       wx:if="{{!walk||walk.status==='finished'}}"
       class="primary main-button"
       bindtap="start"
+      disabled="{{busy}}"
     >
       开始遛狗 →
     </button>
@@ -55,10 +57,11 @@
         class="secondary"
         data-kind="{{walk.status==='active'?'pause':'resume'}}"
         bindtap="action"
+        disabled="{{busy}}"
       >
         {{walk.status==='active'?'暂停':'继续'}}
       </button>
-      <button class="primary" data-kind="finish" bindtap="action">
+      <button class="primary" data-kind="finish" bindtap="action" disabled="{{busy}}">
         结束遛狗
       </button>
     </view>
@@ -72,9 +75,11 @@
     <button wx:if="{{share}}" class="share-button" open-type="share">
       发给朋友看位置 ↗
     </button>
+    <view wx:if="{{locationError}}" class="location-error" bindtap="point">{{locationError}} · 点击重试</view>
   </view>
+  <button class="records-button" bindtap="records">查看最近的脚印 ›</button>
   <view class="privacy">
-    🔒 只有你主动打开分享时，朋友才能查看这次遛狗的位置。
+    🔒 只有你主动打开分享时，朋友才能查看位置。保持小程序打开，位置才会持续更新。
   </view>
 </view>
 <tab-bar current="/pages/walk/walk" />

pets-fe/pages/walk/walk.wxss

@@ -103,3 +103,15 @@
   padding: 22rpx;
   margin: 20rpx 25rpx;
 }
+.location-error {
+  color: #a4513f;
+  font-size: 23rpx;
+  margin-top: 22rpx;
+}
+.records-button {
+  margin: 28rpx 25rpx 0;
+  color: #2d8261;
+  background: #e6f1e8;
+  border-radius: 20rpx;
+  font-size: 26rpx;
+}