feat: add router to detail and ignore css order problem

src/pages/detail/index.scss

@@ -29,6 +29,7 @@
     color: #fff;
     display: flex;
     align-items: center;
+    background: rgba(0, 0, 0, 0.10);
 
     .detail-navigator-back {
       border-right: 1px solid #444;
@@ -984,8 +985,48 @@
         border-radius: 16px;
         border: 1px solid rgba(0, 0, 0, 0.06);
         background: #FFF;
+
+        &-price {
+          font-family: "PoetsenOne";
+          font-size: 28px;
+          font-weight: 400;
+          line-height: 24px; /* 114.286% */
+          letter-spacing: -0.56px;
+          color: #000;
+        }
       }
     }
   }
 }
 
+.share-popup-content {
+  width: 100%;
+  height: 100%;
+  padding: 20px 16px env(safe-area-inset-bottom);
+  box-sizing: border-box;
+  // padding-bottom: env(safe-area-inset-bottom);
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+
+  & > view {
+    width: 100px;
+    height: 64px;
+    border-radius: 12px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+
+    & > image {
+      width: 24px;
+      height: 24px;
+    }
+
+    & > text {
+      color: rgba(0, 0, 0, 0.85);
+    }
+  }
+}
+

src/pages/detail/index.tsx

@@ -1,7 +1,7 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef } from 'react'
 import { View, Text, Button, Swiper, SwiperItem, Image, Map, ScrollView } from '@tarojs/components'
 import { Cell, Avatar, Progress, Popover } from '@nutui/nutui-react-taro'
-import Taro, { useRouter } from '@tarojs/taro'
+import Taro, { useRouter, useShareAppMessage, useShareTimeline } from '@tarojs/taro'
 // 导入API服务
 import DetailService from '../../services/detailService'
 import {
@@ -9,8 +9,9 @@ import {
   useUserActions
 } from '../../store/userStore'
 import img from '../../config/images'
-import { getTextColorOnImage } from '../../utils/processImage'
+import { getTextColorOnImage } from '../../utils'
 import './index.scss'
+import { CommonPopup } from '@/components'
 
 const images = [
   'http://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/images/1a35ebbf-2361-44da-b338-7608561d0b31.png',
@@ -22,9 +23,70 @@ function insertDotInTags(tags: string[]) {
   return tags.join('-·-').split('-')
 }
 
-function handleShare() {
+const SharePopup = forwardRef(({ id, from }: { id: string, from: string }, ref) => {
+  const [visible, setVisible] = useState(false)
 
-}
+  useImperativeHandle(ref, () => ({
+    show: () => {
+      setVisible(true)
+    }
+  }))
+
+  function handleShareToWechat() {
+    useShareAppMessage(() => {
+      return {
+        title: '分享',
+        path: `/pages/detail/index?id=${id}&from=${from}`,
+      }
+    })
+  }
+
+  function handleShareToWechatMoments() {
+    useShareTimeline(() => {
+      return {
+        title: '分享',
+        path: `/pages/detail/index?id=${id}&from=${from}`,
+      }
+    })
+  }
+
+  function handleSaveToLocal() {
+    Taro.saveImageToPhotosAlbum({
+      filePath: images[0],
+      success: () => {
+        Taro.showToast({ title: '保存成功', icon: 'success' })
+      },
+      fail: () => {
+        Taro.showToast({ title: '保存失败', icon: 'none' })
+      },
+    })
+  }
+
+  return (
+    <CommonPopup
+      title="分享"
+      visible={visible}
+      onClose={() => { setVisible(false) }}
+      hideFooter
+      style={{ minHeight: '100px' }}
+    >
+      <View catchMove className='share-popup-content'>
+        <View onClick={handleShareToWechat}>
+          <Image src={img.ICON_DETAIL_SHARE} />
+          <Text>分享到微信</Text>
+        </View>
+        <View onClick={handleShareToWechatMoments}>
+          <Image src={img.ICON_DETAIL_SHARE} />
+          <Text>分享朋友圈</Text>
+        </View>
+        <View onClick={handleSaveToLocal}>
+          <Image src={img.ICON_DETAIL_SHARE} />
+          <Text>保存到本地</Text>
+        </View>
+      </View>
+    </CommonPopup>
+  )
+})
 
 function Index() {
   // 使用Zustand store
@@ -35,10 +97,13 @@ function Index() {
   const [colors, setColors] = useState<string []>([])
   const [detail, setDetail] = useState<any>(null)
   const { params } = useRouter()
-  const { id, share } = params
+  const { id, autoShare, from } = params
+
+  console.log('from', from)
 
   // 本地状态管理
   const [loading, setLoading] = useState(false)
+  const sharePopupRef = useRef<any>(null)
 
   // 页面加载时获取数据
   useEffect(() => {
@@ -63,6 +128,20 @@ function Index() {
     setColors(textcolors)
   }
 
+  function handleShare() {
+    sharePopupRef.current.show()
+  }
+
+  const openMap = () => {
+    Taro.openLocation({
+      latitude: detail?.latitude,   // 纬度（必填）
+      longitude: detail?.longitude, // 经度（必填）
+      name: '上海体育场',   // 位置名（可选）
+      address: '上海市徐汇区肇嘉浜路128号', // 地址详情（可选）
+      scale: 15,            // 地图缩放级别（1-28）
+    })
+  }
+
   const tags = [{
     name: '🕙 急招',
     icon: '',
@@ -143,7 +222,7 @@ function Index() {
       {/* custom navbar */}
       <view className="custom-navbar">
         <View className='detail-navigator'>
-          <View className='detail-navigator-back'>
+          <View className='detail-navigator-back' onClick={() => { Taro.navigateBack() }}>
             <Image className='detail-navigator-back-icon' src={img.ICON_ARROW_LEFT} />
           </View>
           <View className='detail-navigator-icon'>
@@ -238,7 +317,7 @@ function Index() {
               {/* location message */}
               <View className='location-message-text'>
                 {/* venue name and distance */}
-                <View className='location-message-text-name-distance'>
+                <View className='location-message-text-name-distance' onClick={openMap}>
                   <Text>上海体育场</Text>
                   <Text>·</Text>
                   <Text>1.2km</Text>
@@ -461,6 +540,8 @@ function Index() {
             </View>
           </View>
         </View>
+        {/* share popup */}
+        <SharePopup ref={sharePopupRef} id={id} from={from} />
       </View>
     </View>
   )