Add AMap location and weather header with warm mini program theme

pets-fe/pages/home/home.js

@@ -1,7 +1,13 @@
 const { secure, toast } = require("../../utils/api");
 const { localDate } = require("../../utils/date");
+function dateLabel() {
+  const now = new Date();
+  return `${now.getMonth() + 1}月${now.getDate()}日 周${"日一二三四五六"[now.getDay()]}`;
+}
 Page({
   data: {
+    locationName: "当前位置",
+    headerSubtitle: dateLabel() + " · 轻触获取天气",
     pets: [],
     selected: [],
     tasks: [],
@@ -11,6 +17,49 @@ Page({
   },
   onShow() {
     this.load();
+    this.updateEnvironmentLabel();
+    if (!this.environmentAt || Date.now() - this.environmentAt > 15 * 60 * 1000) {
+      this.refreshEnvironment();
+    }
+  },
+  updateEnvironmentLabel() {
+    this.setData({ headerSubtitle: dateLabel() + " · " + (this.weatherLabel || "轻触获取天气") });
+  },
+  async refreshEnvironment(event) {
+    if (this.environmentBusy) return;
+    this.environmentBusy = true;
+    const tapped = !!event;
+    let positioned = false;
+    try {
+      const settings = await new Promise((resolve, reject) => wx.getSetting({ success: resolve, fail: reject }));
+      if (settings.authSetting["scope.userLocation"] === false) {
+        if (!tapped) throw new Error("location-denied");
+        const enabled = await new Promise((resolve, reject) => wx.openSetting({ success: resolve, fail: reject }));
+        if (!enabled.authSetting["scope.userLocation"]) throw new Error("location-denied");
+      }
+      this.weatherLabel = "正在获取天气";
+      this.updateEnvironmentLabel();
+      const point = await new Promise((resolve, reject) => wx.getLocation({
+        type: "gcj02",
+        success: resolve,
+        fail: reject,
+      }));
+      positioned = true;
+      const result = await secure("/environment", "GET", { latitude: point.latitude, longitude: point.longitude });
+      this.setData({ locationName: result.location_name });
+      this.weatherLabel = result.weather
+        ? `${result.weather.description} ${result.weather.temperature}°C`
+        : "天气暂不可用";
+      this.environmentAt = result.weather ? Date.now() : 0;
+    } catch (error) {
+      const denied = /denied|deny|auth/.test(error.errMsg || error.message || "");
+      this.setData({ locationName: positioned ? "位置暂不可用" : denied ? "开启定位" : "定位暂不可用" });
+      this.weatherLabel = denied ? "轻触开启定位" : "轻触重试";
+      if (tapped && !denied) wx.showToast({ title: positioned ? "位置和天气获取失败，请重试" : "定位失败，请重试", icon: "none" });
+    } finally {
+      this.environmentBusy = false;
+      this.updateEnvironmentLabel();
+    }
   },
   async load() {
     try {

pets-fe/pages/home/home.wxml

@@ -1,4 +1,4 @@
-<page-layout id="page-layout" title="早安，{{name}}">
+<page-layout id="page-layout" title="{{locationName}}" subtitle="{{headerSubtitle}}" location="{{true}}" bind:locationtap="refreshEnvironment">
 <view class="screen">
   <view class="hero">
     <view class="hero-copy">

pets-fe/pages/home/home.wxss

@@ -1,12 +1,12 @@
 .hero {
   min-height: 330rpx;
-  background: #194f42;
+  background: linear-gradient(135deg, #fff0dd, #ffdec7);
   border-radius: 38rpx;
   display: flex;
   align-items: center;
   gap: 12rpx;
   padding: 35rpx;
-  color: white;
+  color: #694c3f;
 }
 .hero-copy {
   display: flex;
@@ -15,7 +15,7 @@
   min-width: 0;
 }
 .hero-small {
-  color: #abd9b8;
+  color: #7c5b46;
   font-size: 23rpx;
   font-weight: 600;
 }
@@ -26,11 +26,11 @@
 }
 .hero-meta {
   font-size: 23rpx;
-  color: #d9eadd;
+  color: #7c5b46;
 }
 .hero-caption {
   font-size: 20rpx;
-  color: #b5e2be;
+  color: #7c5b46;
   margin-top: 36rpx;
 }
 .hero image {
@@ -43,7 +43,7 @@
 }
 .link {
   font-size: 24rpx;
-  color: #398668;
+  color: #b95738;
   font-weight: 600;
 }
 .walk-card {
@@ -58,7 +58,7 @@
   width: 145rpx;
   height: 145rpx;
   border-radius: 26rpx;
-  background: #dfeedd;
+  background: #fff0e2;
   display: grid;
   place-items: center;
   font-size: 72rpx;
@@ -73,7 +73,7 @@
 }
 .picker-label {
   font-size: 23rpx;
-  color: #7d9989;
+  color: #886c5f;
   margin: 27rpx 0 16rpx;
 }
 .start {
@@ -95,11 +95,11 @@
   background: #f7eadc;
 }
 .stats > view:nth-child(3) {
-  background: #e8efea;
+  background: #edf2fb;
 }
 .stats text {
   display: block;
-  color: #8da49a;
+  color: #886c5f;
   font-size: 22rpx;
 }
 .stats strong {
@@ -109,7 +109,7 @@
 }
 .stats small {
   font-size: 22rpx;
-  color: #94a69d;
+  color: #886c5f;
 }
 .tasks {
   padding: 12rpx 25rpx;
@@ -119,7 +119,7 @@
   align-items: center;
   gap: 17rpx;
   padding: 22rpx 0;
-  border-bottom: 1rpx solid #edf1ed;
+  border-bottom: 1rpx solid #ece2d8;
 }
 .task:last-child {
   border: 0;
@@ -127,21 +127,21 @@
 .check {
   width: 40rpx;
   height: 40rpx;
-  border: 3rpx solid #cfdfd2;
+  border: 3rpx solid #ece2d8;
   border-radius: 13rpx;
   text-align: center;
   line-height: 37rpx;
   color: white;
 }
 .check.done {
-  background: #3b9164;
-  border-color: #3b9164;
+  background: #b95738;
+  border-color: #b95738;
 }
 .task-icon {
   width: 65rpx;
   height: 65rpx;
   border-radius: 16rpx;
-  background: #f0f5ee;
+  background: #fff0e2;
   display: grid;
   place-items: center;
   font-size: 34rpx;

pets-fe/pages/meetups/meetups.wxss

@@ -1,5 +1,5 @@
 .banner {
-  background: #dfeee2;
+  background: #edf2fb;
   border-radius: 34rpx;
   min-height: 245rpx;
   padding: 30rpx;
@@ -16,7 +16,7 @@
   display: block;
 }
 .banner-copy text {
-  color: #549375;
+  color: #576c88;
   font-size: 22rpx;
 }
 .banner-title {
@@ -35,7 +35,7 @@
 }
 .add {
   font-size: 24rpx;
-  color: #328965;
+  color: #b95738;
   font-weight: 600;
 }
 .meetup strong {
@@ -44,30 +44,30 @@
   margin: 15rpx 0;
 }
 .badge {
-  background: #e8f4ea;
-  color: #429369;
+  background: #edf2fb;
+  color: #b95738;
   border-radius: 99rpx;
   padding: 8rpx 15rpx;
   font-size: 22rpx;
 }
 .arrow {
   font-size: 39rpx;
-  color: #a1b2a8;
+  color: #9d8779;
 }
 .meta {
   font-size: 24rpx;
-  color: #748c7d;
+  color: #886c5f;
   margin-top: 9rpx;
 }
 .desc {
   font-size: 24rpx;
-  color: #9aaa9f;
+  color: #886c5f;
   margin-top: 15rpx;
 }
 .overlay {
   position: fixed;
   inset: 0;
-  background: #102a24a0;
+  background: #604a40a0;
   z-index: 30;
   display: flex;
   align-items: flex-end;
@@ -86,7 +86,7 @@
 }
 .detail {
   font-size: 25rpx;
-  color: #61816e;
+  color: #886c5f;
   line-height: 2;
   margin: 25rpx 0;
 }

pets-fe/pages/pet-edit/pet-edit.wxml

@@ -22,11 +22,11 @@
     <view class="field-label">性别</view>
     <radio-group bindchange="gender">
       <label>
-        <radio value="male" checked="{{gender==='male'}}" color="#194f42" />
+        <radio value="male" checked="{{gender==='male'}}" color="#b95738" />
         男孩
       </label>
       <label>
-        <radio value="female" checked="{{gender==='female'}}" color="#194f42" />
+        <radio value="female" checked="{{gender==='female'}}" color="#b95738" />
         女孩
       </label>
     </radio-group>

pets-fe/pages/pet-edit/pet-edit.wxss

@@ -19,7 +19,7 @@
   bottom: 0;
   left: 0;
   right: 0;
-  background: #194f42b5;
+  background: #b95738b5;
   color: white;
   text-align: center;
   font-size: 18rpx;

pets-fe/pages/pets/pets.wxss

@@ -1,7 +1,7 @@
 .family {
-  background: #194f42;
+  background: #f0e8f7;
   border-radius: 35rpx;
-  color: white;
+  color: #746086;
   min-height: 220rpx;
   padding: 35rpx;
   display: flex;
@@ -17,7 +17,7 @@
   display: block;
 }
 .family text {
-  color: #a4d6b8;
+  color: #765984;
   font-size: 23rpx;
 }
 .family strong {
@@ -31,7 +31,7 @@
 }
 .add {
   font-weight: 600;
-  color: #368764;
+  color: #b95738;
 }
 .pet {
   display: flex;
@@ -64,11 +64,11 @@
 }
 .pet-info text {
   font-size: 23rpx;
-  color: #8a9c90;
+  color: #886c5f;
 }
 .arrow {
   font-size: 42rpx;
-  color: #97a99d;
+  color: #886c5f;
 }
 .add-button {
   margin-top: 25rpx;

pets-fe/pages/share/share.wxss

@@ -1,5 +1,5 @@
 page {
-  background: #f6f9f6;
+  background: #fff9f3;
 }
 .card {
   margin-top: 20rpx;

pets-fe/pages/tasks/tasks.wxml

@@ -78,14 +78,14 @@
       <view class="field-label">类型</view>
       <radio-group bindchange="categoryChange">
         <label>
-          <radio value="food" checked="{{category==='food'}}" color="#194f42" />
+          <radio value="food" checked="{{category==='food'}}" color="#b95738" />
           喂食
         </label>
         <label>
           <radio
             value="water"
             checked="{{category==='water'}}"
-            color="#194f42"
+            color="#b95738"
           />
           喝水
         </label>
@@ -93,7 +93,7 @@
           <radio
             value="other"
             checked="{{category==='other'}}"
-            color="#194f42"
+            color="#b95738"
           />
           其他
         </label>
@@ -112,7 +112,7 @@
           <radio
             value="daily"
             checked="{{repeat_rule==='daily'}}"
-            color="#194f42"
+            color="#b95738"
           />
           每天
         </label>
@@ -120,7 +120,7 @@
           <radio
             value="weekdays"
             checked="{{repeat_rule==='weekdays'}}"
-            color="#194f42"
+            color="#b95738"
           />
           工作日
         </label>
@@ -128,7 +128,7 @@
           <radio
             value="weekends"
             checked="{{repeat_rule==='weekends'}}"
-            color="#194f42"
+            color="#b95738"
           />
           周末
         </label>

pets-fe/pages/tasks/tasks.wxss

@@ -1,12 +1,12 @@
 .summary {
-  background: #194f42;
-  color: white;
+  background: #e8f0fa;
+  color: #526986;
   border-radius: 34rpx;
   padding: 34rpx;
 }
 .summary > view:first-child {
   font-size: 24rpx;
-  color: #bbe3c4;
+  color: #576c88;
 }
 .summary strong {
   display: block;
@@ -15,28 +15,28 @@
 }
 .summary strong text {
   font-size: 30rpx;
-  color: #b4d8be;
+  color: #576c88;
 }
 .progress {
   height: 13rpx;
-  background: #3f7566;
+  background: #dbe4f2;
   border-radius: 99rpx;
   overflow: hidden;
 }
 .progress view {
   height: 100%;
-  background: #e9ad6a;
+  background: #e49b75;
   border-radius: 99rpx;
 }
 .add {
-  color: #2b8a63;
+  color: #b95738;
   font-size: 24rpx;
   font-weight: 600;
 }
 .date-nav {
   display: flex;
   justify-content: space-between;
-  color: #327c5e;
+  color: #b95738;
   font-size: 23rpx;
   margin: 0 0 22rpx;
 }
@@ -48,7 +48,7 @@
   align-items: center;
   gap: 15rpx;
   padding: 22rpx 0;
-  border-bottom: 1rpx solid #eef2ee;
+  border-bottom: 1rpx solid #ece2d8;
 }
 .task:last-child {
   border: 0;
@@ -56,20 +56,20 @@
 .check {
   width: 42rpx;
   height: 42rpx;
-  border: 3rpx solid #cbdcd1;
+  border: 3rpx solid #ece2d8;
   border-radius: 13rpx;
   text-align: center;
   line-height: 37rpx;
   color: white;
 }
 .check.done {
-  background: #389867;
-  border-color: #389867;
+  background: #b95738;
+  border-color: #b95738;
 }
 .icon {
   width: 65rpx;
   height: 65rpx;
-  background: #eff5ee;
+  background: #fff0e2;
   border-radius: 18rpx;
   display: grid;
   place-items: center;
@@ -84,24 +84,24 @@
 }
 .info text {
   font-size: 21rpx;
-  color: #92a498;
+  color: #886c5f;
   margin-top: 5rpx;
 }
 .remove {
   font-size: 36rpx;
-  color: #c4d0c7;
+  color: #9d8779;
 }
 .overlay {
   position: fixed;
   inset: 0;
-  background: #102a24a0;
+  background: #604a40a0;
   z-index: 30;
   display: flex;
   align-items: flex-end;
 }
 .sheet {
   width: 100%;
-  background: #f6f9f6;
+  background: #fff9f3;
   border-radius: 35rpx 35rpx 0 0;
   padding: 32rpx 32rpx calc(env(safe-area-inset-bottom) + 30rpx);
   max-height: 85vh;

pets-fe/pages/walk-records/walk-records.js

@@ -23,7 +23,7 @@ Page({
           petNames: (walk.pet_ids || []).map((id) => names[id] || "已归档宠物").join("、"),
           polyline: walk.points && walk.points.length > 1 ? [{
             points: walk.points.map((point) => ({ latitude: point.latitude, longitude: point.longitude })),
-            color: "#268e6a",
+            color: "#b95738",
             width: 5,
           }] : [],
           lastPoint: walk.points && walk.points.length ? walk.points[walk.points.length - 1] : null,

pets-fe/pages/walk-records/walk-records.wxss

@@ -1,10 +1,10 @@
-.back { display: block; color: #327c5e; margin-bottom: 34rpx; font-size: 26rpx; }
+.back { display: block; color: #b95738; margin-bottom: 34rpx; font-size: 26rpx; }
 .record strong, .detail strong { font-size: 28rpx; }
-.record .row text { font-size: 38rpx; color: #8da89a; }
-.pet-names, .detail > text { display: block; color: #547b65; margin-top: 16rpx; }
-.record-stats { color: #91a59a; font-size: 24rpx; margin-top: 12rpx; }
-.metrics { display: flex; gap: 28rpx; margin-top: 28rpx; border-top: 1rpx solid #e8efe9; padding-top: 22rpx; }
+.record .row text { font-size: 38rpx; color: #886c5f; }
+.pet-names, .detail > text { display: block; color: #886c5f; margin-top: 16rpx; }
+.record-stats { color: #886c5f; font-size: 24rpx; margin-top: 12rpx; }
+.metrics { display: flex; gap: 28rpx; margin-top: 28rpx; border-top: 1rpx solid #ece2d8; padding-top: 22rpx; }
 .metrics view { flex: 1; }
 .metrics strong, .metrics text { display: block; }
-.metrics text { color: #8da89a; font-size: 22rpx; margin-top: 7rpx; }
+.metrics text { color: #886c5f; font-size: 22rpx; margin-top: 7rpx; }
 .route-map { width: 100%; height: 600rpx; border-radius: 30rpx; overflow: hidden; }

pets-fe/pages/walk/walk.js

@@ -131,7 +131,7 @@ Page({
       walk,
       points: pts,
       polyline:
-        pts.length > 1 ? [{ points: pts, color: "#268e6a", width: 5 }] : [],
+        pts.length > 1 ? [{ points: pts, color: "#b95738", width: 5 }] : [],
       latitude: last ? last.latitude : this.data.latitude,
       longitude: last ? last.longitude : this.data.longitude,
       distance: ((walk.distance_meters || 0) / 1000).toFixed(2),

pets-fe/pages/walk/walk.wxml

@@ -69,7 +69,7 @@
         <strong>分享实时位置</strong>
         <text>打开后可分享给朋友，结束遛狗会自动关闭</text>
       </view>
-      <switch color="#278465" checked="{{share}}" bindchange="shareChange" />
+      <switch color="#b95738" checked="{{share}}" bindchange="shareChange" />
     </view>
     <button wx:if="{{share}}" class="share-button" open-type="share">
       发给朋友看位置 ↗

pets-fe/pages/walk/walk.wxss

@@ -12,11 +12,11 @@
   top: 25rpx;
   left: 30rpx;
   background: white;
-  color: #288363;
+  color: #b95738;
   padding: 12rpx 21rpx;
   border-radius: 99rpx;
   font-size: 23rpx;
-  box-shadow: 0 8rpx 25rpx #173e3622;
+  box-shadow: 0 8rpx 25rpx #604a4022;
 }
 .session {
   margin: -30rpx 25rpx 0;
@@ -31,12 +31,12 @@
 }
 .stats {
   display: flex;
-  border-bottom: 2rpx solid #edf1eb;
+  border-bottom: 2rpx solid #ece2d8;
   padding-bottom: 25rpx;
 }
 .stats > view {
   flex: 1;
-  border-right: 2rpx solid #e9efea;
+  border-right: 2rpx solid #ece2d8;
   padding-left: 22rpx;
 }
 .stats > view:first-child {
@@ -51,7 +51,7 @@
 }
 .stats text {
   font-size: 22rpx;
-  color: #99aa9d;
+  color: #886c5f;
 }
 .picker-title {
   font-weight: 600;
@@ -80,21 +80,21 @@
 }
 .share-row text {
   font-size: 21rpx;
-  color: #90a199;
+  color: #886c5f;
   max-width: 450rpx;
   margin-top: 5rpx;
 }
 .share-button {
   margin-top: 20rpx;
-  background: #e6f1e8;
-  color: #267d59;
+  background: #fff0e2;
+  color: #b95738;
   border-radius: 20rpx;
   font-size: 25rpx;
 }
 .privacy {
   font-size: 22rpx;
-  color: #739180;
-  background: #e9f3e7;
+  color: #886c5f;
+  background: #edf2fb;
   border-radius: 22rpx;
   padding: 22rpx;
   margin: 20rpx 25rpx;
@@ -106,8 +106,8 @@
 }
 .records-button {
   margin: 28rpx 25rpx 0;
-  color: #2d8261;
-  background: #e6f1e8;
+  color: #b95738;
+  background: #fff0e2;
   border-radius: 20rpx;
   font-size: 26rpx;
 }