Add AMap location and weather header with warm mini program theme

pets-fe/components/page-layout/index.js

@@ -3,6 +3,8 @@ const { navigationGeometry } = require("../../utils/layout");
 Component({
   properties: {
     title: String,
+    subtitle: String,
+    location: { type: Boolean, value: false },
     back: { type: Boolean, value: false },
   },
   data: navigationGeometry(),
@@ -17,6 +19,9 @@ Component({
     },
   },
   methods: {
+    locate() {
+      this.triggerEvent("locationtap");
+    },
     updateLayout() {
       const info = wx.getWindowInfo ? wx.getWindowInfo() : wx.getSystemInfoSync();
       let menu = {};

pets-fe/components/page-layout/index.wxml

@@ -1,9 +1,13 @@
 <view class="navigation" style="height: {{headerHeight}}px">
   <view class="navigation-row" style="top: {{top}}px; height: {{rowHeight}}px; width: {{titleWidth}}px">
+    <view wx:if="{{location}}" class="local-header" bindtap="locate" aria-role="button" aria-label="更新当前位置和天气">
+      <view class="local-title"><view class="location-pin"></view><text>{{title}}</text><view class="location-chevron"></view></view>
+      <view class="local-meta"><text>{{subtitle}}</text></view>
+    </view>
     <view wx:if="{{back}}" class="back" bindtap="goBack" aria-role="button" aria-label="返回">
       <view class="back-arrow"></view>
     </view>
-    <text class="navigation-title">{{title}}</text>
+    <text wx:if="{{!location}}" class="navigation-title">{{title}}</text>
   </view>
 </view>
 <scroll-view class="content" style="top: {{headerHeight}}px; height: {{scrollHeight}}px" scroll-y="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}">

pets-fe/components/page-layout/index.wxss

@@ -4,7 +4,7 @@
   left: 0;
   right: 0;
   z-index: 25;
-  background: #f6f9f6;
+  background: #fff9f3;
 }
 .navigation-row {
   position: absolute;
@@ -19,11 +19,66 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: #194f42;
+  color: #604a40;
   font-size: 19px;
   font-weight: 600;
   letter-spacing: 0.5px;
 }
+.local-header {
+  width: 100%;
+  min-width: 0;
+}
+.local-title {
+  height: 19px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: #604a40;
+  font-size: 16px;
+  line-height: 19px;
+  font-weight: 600;
+}
+.local-title text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.location-pin {
+  position: relative;
+  width: 9px;
+  height: 9px;
+  flex-shrink: 0;
+  border: 1.5px solid #b95738;
+  border-radius: 50% 50% 50% 0;
+  transform: rotate(-45deg);
+}
+.location-pin::after {
+  content: "";
+  position: absolute;
+  width: 2px;
+  height: 2px;
+  left: 3.5px;
+  top: 3.5px;
+  border-radius: 50%;
+  background: #b95738;
+}
+.location-chevron {
+  width: 4px;
+  height: 4px;
+  flex-shrink: 0;
+  border-right: 1px solid #886c5f;
+  border-bottom: 1px solid #886c5f;
+  transform: rotate(45deg);
+}
+.local-meta {
+  margin-top: 2px;
+  color: #886c5f;
+  font-size: 10px;
+  line-height: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .back {
   width: 28px;
   height: 36px;
@@ -35,8 +90,8 @@
 .back-arrow {
   width: 10px;
   height: 10px;
-  border-left: 2px solid #194f42;
-  border-bottom: 2px solid #194f42;
+  border-left: 2px solid #604a40;
+  border-bottom: 2px solid #604a40;
   transform: rotate(45deg);
 }
 .content {