feats

config/dev.js

@@ -4,7 +4,7 @@ module.exports = {
   },
   defineConstants: {
     // HOST: '"https://xlk.njyz.tech"',
-    HOST: '"http://127.0.0.1:8567"',
+    HOST: '"http://127.0.0.1:8081"',
     WSS_HOST: '"wss://xlk.njyz.tech"',
     OSS_PATH: '"https://xlk-assets.oss-accelerate.aliyuncs.com/"',
     OSS_FAST_PATH: '"https://xlk-assets.oss-accelerate.aliyuncs.com/"',

config/prod.js

@@ -10,7 +10,7 @@ module.exports = {
     OSS_PATH: '"https://xlk-assets.oss-accelerate.aliyuncs.com/"',
     OSS_FAST_PATH: '"https://xlk-assets.oss-accelerate.aliyuncs.com/"',
     ICON_FONT: '"https://yz-websit.oss-cn-hangzhou.aliyuncs.com/xlk/css/iconfont.ttf"',
-    Version: '"V0.0.26-20210808"'
+    Version: '"V0.0.27-20210808"'
   },
   mini: {},
   h5: {

project.config.json

@@ -2,7 +2,7 @@
 	"miniprogramRoot": "dist/",
 	"projectname": "miniapp",
 	"description": "",
-	"appid": "wxc96058d57e77f373",
+	"appid": "wxe44244d1a5ea3364",
 	"setting": {
 		"urlCheck": false,
 		"es6": false,

src/components/ShareToCircle/index.jsx

@@ -1,14 +1,40 @@
+
+import { useEffect, useState } from 'react'
+import Taro from '@tarojs/taro'
 import classNames from 'classnames'
 import './style.scss'
 
 export default (props) => {
-  const { visible = false, close = () => {} } = props
+  const { visible = false, onClose = () => {} } = props
+  const [style, setStyle] = useState({ right: '50px' })
+
+  useEffect(() => {
+    Taro.nextTick(() => {
+      // https://developers.weixin.qq.com/miniprogram/dev/api/ui/menu/wx.getMenuButtonBoundingClientRect.html
+      const bound = Taro.getMenuButtonBoundingClientRect()
+
+      Taro.getStorage({
+        key: 'systemInfo',
+        success: (res) => {
+          const { screenWidth } = res.data
+          // 胶囊右边距
+          const marginRight = screenWidth - bound.right
+          // 提示的右边距
+          const right = bound.width / 2 + marginRight
+          //
+          setStyle({ right: `${right}px` })
+        }
+      }) || {};
+
+      // 需要依据 bound 来调整位置
+    })
+  }, [])
 
   return (
-    <view className={classNames('components', 'ShareToCircle', { show: visible })}>
-      <view>
+    <view className={classNames('components', 'ShareToCircle', { show: visible })} onClick={onClose}>
+      <view style={style}>
         <text>从这里“分享到朋友圈”~</text>
-        <text className='iconfont icon-guanbi1' onClick={close}></text>
+        <text className='iconfont icon-guanbi1' onClick={onClose}></text>
       </view>
     </view>
   )

src/layout/index.js

@@ -10,6 +10,7 @@ import AuthPage from '@/components/Auth/AuthPage'
 import Spin from '@/components/Spin/Spin2'
 import FixedConsultant from '@/components/FixedConsultant'
 import FirstScreen from '@/components/FirstScreen'
+import ShareToCircle from '@/components/ShareToCircle'
 import { report as reportCustomer } from '@/utils/customer'
 import nav2Target from '@/utils/nav2Target'
 import { ROLE_CODE } from '@/constants/user'
@@ -28,6 +29,7 @@ export default (ChildComponent) => (props) => {
   const page = routes.filter((r) => (router.path.indexOf(r.page) > -1))[0]
   const [loading, setLoading] = useState(false)
   const [authPhone, authAvatar, authPage] = useAuth(person, page)
+  const [shareTimelineVisible, setShareTimelineVisible] = useState(false)
 
   const { id } = router.params
   const showConsultant = page.shortcut && page.shortcut.consultant
@@ -44,6 +46,8 @@ export default (ChildComponent) => (props) => {
     nav2Target(screenInfo)
   }
 
+  const showShareTimeline = (visible) => setShareTimelineVisible(visible)
+
   // 报备客户
   useEffect(() => {
     reportCustomer(person, consultant, false).catch(() => {})
@@ -81,20 +85,32 @@ export default (ChildComponent) => (props) => {
 
   return (
     <>
+      {/* 菊花转 */}
       <Overlay visible={loading} style={{background: '#fff'}}>
         <Loading />
       </Overlay>
+
+      {/* 授权手机 */}
       <Overlay visible={authPhone} aligin='bottom'>
         <View className='auth-wrapper'>
           <AuthPhone consultant={consultant} router={router} page={page} />
         </View>
       </Overlay>
+
+      {/* 授权头像 */}
       <Overlay visible={!authPhone && authAvatar} aligin='bottom'>
         <View className='auth-wrapper'>
           <AuthAvatar />
         </View>
       </Overlay>
+
+      {/* 授权头像-全屏 */}
       { authPage && <AuthPage /> }
+
+      {/* 显示分享朋友圈 */}
+      <ShareToCircle visible={shareTimelineVisible} onClose={() => setShareTimelineVisible(false)} />
+
+      {/* 页面内容 */}
       <Spin size={32} spinning={spinning} />
       {
         person && !!person.personId && (
@@ -106,14 +122,19 @@ export default (ChildComponent) => (props) => {
             city={city}
             shareContent={shareContent}
             trackData={trackData}
+            showShareTimeline={showShareTimeline}
             {...props}
             {...extInfo}
           />
         )
       }
+
+      {/* 当前置业顾问 */}
       {
         !!showConsultant && (<FixedConsultant consultant={consultant} />)
       }
+
+      {/* 开屏广告 */}
       <FirstScreen
         info={screenInfo}
         visible={screenVisible}

src/pages/index/activityDetail/index.jsx

@@ -12,7 +12,6 @@ import {
   Button
 } from '@tarojs/components';
 import Disclaimer from '@/components/Disclaimer';
-import ShareToCircle from '@/components/ShareToCircle'
 import { useSelector } from 'react-redux';
 import {
   signupActivity,
@@ -53,7 +52,7 @@ const activityStatusDict = {
 };
 
 export default withLayout((props) => {
-  const { router, shareContent, trackData, person, page } = props;
+  const { router, shareContent, trackData, person, page, showShareTimeline } = props;
   const { id } = router.params;
 
   const user = useSelector((state) => state.user);
@@ -64,8 +63,6 @@ export default withLayout((props) => {
   const [selectorChecked, setSelectorChecked] = useState('1');
   const [selector, setSelector] = useState('');
 
-  const [ShowShareLayer, setShowShareLayer] = useState(false)
-
   const buildingId = detail?.buildingId;
 
   const [btnText, btnDisabled] = useStatus(detail)
@@ -214,7 +211,7 @@ export default withLayout((props) => {
             <text>分享</text>
             <Button open-type='share' className='ShareBtn'>分享</Button>
           </view>
-          <view onClick={() => { setShowShareLayer(true) }}>
+          <view onClick={() => showShareTimeline(true)}>
             <text className='iconfont icon-pengyouquan1' style='font-size: 32rpx'></text>
             <text>朋友圈</text>
           </view>
@@ -242,7 +239,6 @@ export default withLayout((props) => {
     <>
       {detail && (
         <view className='Page activityDetail flex-v'>
-          <ShareToCircle visible={ShowShareLayer} close={() => { setShowShareLayer(false) }}></ShareToCircle>
           <view className='flex-item'>
             <view>
               <ScrollView scroll-y>

src/pages/index/newsDetail/index.config.js

@@ -1,3 +1,4 @@
 export default {
-  navigationBarTitleText: '资讯详情'
+  navigationBarTitleText: '资讯详情',
+  enableShareAppMessage: true
 }

src/pages/index/newsDetail/index.jsx

@@ -2,19 +2,20 @@ import { useState, useEffect } from "react";
 import Taro from "@tarojs/taro";
 import withLayout from "@/layout";
 import { ScrollView, Image, RichText, WebView } from "@tarojs/components";
+import useParams from '@/utils/hooks/useParams'
 import useFavor from "@/utils/hooks/useFavor";
 import { queryNewsDetail } from "@/services/news";
 import { formatDate } from "@/utils/chatDate";
+import useShare from "@/utils/hooks/useShare";
 import "@/assets/css/iconfont.css";
 import "./index.scss";
 
 export default withLayout((props) => {
-  const { trackData } = props
+  const { router, shareContent, person, trackData, page, showShareTimeline } = props
   const { id } = props.router.params;
 
+  const paramsRef = useParams({person, from: `${page.type}_share`})
   const [data, setData] = useState(null);
-  const [IsPull, setPull] = useState(false);
-  const [PullTimer, setPullTimer] = useState(null);
 
 
   const [isSave, handleFavor] = useFavor(data?.isSave, {
@@ -22,23 +23,17 @@ export default withLayout((props) => {
     buildingId: data?.buildingId,
     ...trackData,
   });
-
-  const PageRefresh = () => {
-    // 页面下拉刷新回调
-    setPull(true);
-  };
-
-  useEffect(() => {
-    // 下拉刷新触发
-    if (IsPull) {
-      clearTimeout(PullTimer);
-      setPullTimer(
-        setTimeout(() => {
-          setPull(false);
-        }, 2000)
-      );
-    }
-  }, [IsPull]);
+  
+  const fullTrackData = { ...trackData, buildingId: data?.buildingId };
+  
+  useShare(
+    {
+      title: shareContent.shareContentTitle || data?.newsName,
+      path: `${router.path}?${paramsRef.current}`,
+      image: shareContent.shareContentImg,
+    },
+    fullTrackData
+  );
 
   const getData = (params) => {
     Taro.showLoading();
@@ -49,14 +44,6 @@ export default withLayout((props) => {
     });
   };
 
-  const shareTimeline = () => {
-    Taro.showToast({
-      title: '请点击右上角分享到朋友圈',
-      icon: 'none',
-      duration: 3000,
-    })
-  }
-
   useEffect(() => {
     if (id) {
       getData(id);
@@ -68,13 +55,7 @@ export default withLayout((props) => {
       {data && (data.newsDetailType === '0' ? <WebView src={data.newsDetail} /> : <>
         <view className='flex-item'>
           <view>
-            <ScrollView
-              scroll-y
-              refresher-enabled
-              refresher-triggered={IsPull}
-              onrefresherrefresh={PageRefresh}
-              refresher-background='#fff'
-            >
+            <ScrollView scrollY>
               <view className='PageContent'>
                 <view className='Info'>
                   <view>
@@ -99,9 +80,9 @@ export default withLayout((props) => {
           </view>
         </view>
         <view className='Bottom'>
-          <view>
-            <text onClick={shareTimeline} className='iconfont icon-pengyouquan1'></text>
-            <text onClick={shareTimeline}>分享朋友圈</text>
+          <view onClick={() => showShareTimeline(true)}>
+            <text className='iconfont icon-pengyouquan1'></text>
+            <text>分享朋友圈</text>
           </view>
           <view>
             <text className='iconfont icon-shoucang' style={isSave ? { color: 'red' } : undefined} onClick={handleFavor}></text>