.

src/hotel/components/HouseManage/houseManage.jsx

@@ -1,19 +1,20 @@
-import Taro from '@tarojs/taro'
+import Taro, {useDidShow } from '@tarojs/taro'
 import see from '@/assets/icons/landlord/查看入住人.png'
 import share from '@/assets/icons/landlord/分享链接.png'
 import del from '@/assets/icons/landlord/删除.png'
 import addImg from '@/assets/icons/landlord/添加.png'
 import iconsearch from '@/assets/icons/housemantj/search.png'
-import './houseManage.less'
-import {useState, useEffect,useRef } from 'react'
-import {useDidShow } from '@tarojs/taro'
+import React,{useState, useEffect,useRef, useImperativeHandle } from 'react'
 import {getRoomList,deleteRoom} from '@/services/landlord'
 import ShareRoom from '../shareRoom/ShareRoom.jsx'
+import './houseManage.less'
 
-
-export default (props) => {
+export default React.forwardRef((props, ref) => {
   const {hotel}=props
   const [detail, setDetail] = useState([])
+
+  const shareDataRef = useRef()
+
   // 判断是否首次加载
   const mounted = useRef(false)
 
@@ -33,9 +34,9 @@ export default (props) => {
   }
 
   const [showCutover, setShowCutover] = useState(false)
-  const [roomId, setRoomId] = useState()
-  const ShowMoldeOn = (roomId) => {
-    setRoomId(roomId)
+  const [room, setRoom] = useState({})
+  const ShowMoldeOn = (room) => {
+    setRoom(room)
     setShowCutover(true)
   }
   const onClose = () => {
@@ -60,6 +61,24 @@ export default (props) => {
     }
   })
 
+  useImperativeHandle(ref, () => ({
+    getShareMessage: () => {
+      const { shareImage, roomOrderId } = shareDataRef.current
+
+      return {
+        title: '',
+        path: `/pages/index/index?tab=1&roomId=${room.roomId}&roomOrderId=${roomOrderId}`,
+        imageUrl: shareImage,
+      }
+    }
+  }))
+
+  const handleFinish = (val) => {
+    shareDataRef.current = val
+    setShowCutover(false)
+    // 打开分享弹窗
+  }
+
   return (
     <view>
       <view style={{ padding: '0 30rpx', height: '100%' }}>
@@ -68,7 +87,7 @@ export default (props) => {
             <image className='searchicon' src={iconsearch} />
             <view className="searchword">请输入关键字搜索</view>
           </view>
-          <ShareRoom showCutover={showCutover} onClose={onClose}  roomId={roomId}/>
+          <ShareRoom showCutover={showCutover} onClose={onClose}  room={room} onFinish={handleFinish} />
         <scroll-view scroll-y="true" scroll-view='true' bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" style={{ height: 'calc(100vh - 255px)' }}>
 
           <view>
@@ -78,7 +97,7 @@ export default (props) => {
               <view className='houseName'>{item.roomName}</view>
               <view className='operation'>
                 <view><image src={see} />查看入住人</view>
-                <view onClick={()=>ShowMoldeOn(item.roomId)}><image src={share}/>分享链接</view>
+                <view onClick={()=>ShowMoldeOn(item)}><image src={share}/>分享链接</view>
                 <view onClick={()=>{handelDelete(item.roomId)}}><image src={del} />删除房源</view>
               </view>
             </view>
@@ -95,4 +114,4 @@ export default (props) => {
     
       </view>
   )
-}
+})

src/hotel/components/shareRoom/ShareRoom.jsx

@@ -8,24 +8,37 @@ import { useState } from 'react'
 
 export default (props) => {
   const { showCutover, onClose,roomId } = props
-  const [date, setDate] = useState('')
-  const [roomNum, setRoomNum] = useState(0)
-  const handelDate = (e) => {
-    setDate(e.detail.value)
+  const [startDate, setStartDate] = useState('')
+  const [endDate, setEndDate] = useState('')
+  const [roomNum, setRoomNum] = useState()
+  const handelStartDate = (e) => {
+    setStartDate(e.detail.value)
+  }
+  const handelEndDate = (e) => {
+    setEndDate(e.detail.value)
   }
 const handelShare=()=>{
-  if(roomNum!=0&&date!=''){
-    console.log(roomNum,date,roomId)
+  if(roomNum!=''&&startDate!=''&&endDate!=''){
+    console.log(roomNum,startDate,roomId)
   }
 }
   return (
     <Popup show={showCutover} onClose={onClose}>
+      <Label style={{color:'black'}}>请输入入住人信息</Label>
       <View><Label>入住人数：</Label><Input focus dataField='nm' onInput={(e) => setRoomNum(e.detail.value )} value={roomNum} type='number' placeholder='请输入入住人数' /></View>
       <View>
-        <Label>入住时间：</Label>
-        <Picker mode='date' onChange={handelDate}>
+        <Label>入住开始时间：</Label>
+        <Picker mode='date' onChange={handelStartDate}>
+          <View className='picker'  >
+            {startDate == '' ? '请选择入住开始时间' : startDate}
+          </View>
+        </Picker>
+      </View>
+      <View>
+        <Label>入住结束时间：</Label>
+        <Picker mode='date' onChange={handelEndDate}>
           <View className='picker'  >
-            {date == '' ? '请选择入住时间' : date}
+            {endDate == '' ? '请选择入住结束时间' : endDate}
           </View>
         </Picker>
       </View>

src/hotel/pages/landlord/landlord.config.js

@@ -5,5 +5,6 @@ export default {
   usingComponents: {
     "mp-tabbar": "weui-miniprogram/tabbar/tabbar",
     "mp-dialog": "weui-miniprogram/dialog/dialog"
-  }
+  },
+  enableShareAppMessage: true
 }

src/hotel/pages/landlord/landlord.jsx

@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from 'react'
-import { useRouter } from '@tarojs/taro'
+import React, { useState, useEffect, useRef } from 'react'
+import Taro,{ useRouter,useShareAppMessage } from '@tarojs/taro'
 import HouseManage from '../../components/HouseManage/houseManage'
 import Income from '../../components/Income/income'
 import TabBar from '@/components/CustTabBar'
@@ -23,6 +23,8 @@ export default withLayout((props) => {
   const [account, setAccount] = useState()
   const [accountlog, setAccountLog] = useState([])
 
+  const houseRef = useRef()
+
   useEffect(() => {
     getHotelManage().then((res) => {
       const { hotelList: list, account: acc, hotel: current } = res
@@ -59,12 +61,21 @@ export default withLayout((props) => {
     }
   }, [tab])
 
+  useShareAppMessage(() => {
+    return houseRef.current.getShareMessage()
+  })
+
+  useEffect(() => {
+    // 禁止右上角分享
+    Taro.hideShareMenu()
+  }, [])
+
   return (
     <view className='page-index'>
       <CustomNav title={hotel?.hotelName} logo={hotel?.logo} />
       <view className='index-container'>
         {currentTab === 0 && <Income hotelList={hotelList} hotel={hotel} account={account} onHotelChange={handleHotelChange} accountlog={accountlog} />}
-        {currentTab === 1 && <HouseManage hotel={hotel} />}
+        {currentTab === 1 && <HouseManage hotel={hotel} ref={houseRef} />}
       </view>
       <view className='index-tabbar'>
         <TabBar extClass='custom-tabbar bottomTab' current={currentTab} onChange={handleTabChange}>

src/pages/details/components/Extend/extend.jsx

@@ -1,18 +1,21 @@
 import { Video } from '@tarojs/components';
+import './extend.less'
 
 export default (props) => {
   const { item } = props
   return (
-    <>{
+    <>
+    {
       item.contentType == 'image' ?
-        <image src={item.content} mode='widthFix' style={{ width: '100%' }} /> :
+        <image src={item.content} mode='widthFix' style={{ width: '100%'}} /> :
         item.contentType == 'text' ?
           <view className='storezn'>{item.content}</view> :
           <Video
             controls
             autoplay={false}
             loop={false}
-            muted={false} style={{ width: "100%", height: '200px' }} src={item.content}></Video>
+            muted={false} style={{ width: "100%", height: '200px' }} src={item.content}>              
+          </Video>
     }
     </>
   )

src/pages/details/components/Extend/extend.less

@@ -0,0 +1,6 @@
+.storezn{
+  font-size: 28px;    
+  color: #202020;
+  line-height: 54px;
+  margin-bottom: 40px;
+}

src/pages/details/mjDetails/sceneryDetails.less

@@ -110,6 +110,23 @@
     margin-right: 10px;
   }
 }
+.showMore{
+  width: 100%;
+  background: linear-gradient(0deg, rgba(248, 248, 248, 0.58) 42%, rgba(248, 248, 248, 0) 100%);
+  font-size: 28px;
+  font-weight: bold;
+  color: #202020;
+  text-align: center;
+  position: absolute;
+  bottom: -40px;
+  padding-top: 77px;
+  padding-bottom: 20px;
+  .moreTip{
+    width: 38px;
+    height: 19px;
+    margin-top: 14px;
+  }
+}
 .foodCard{
   background: #FFF;
   box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
@@ -245,33 +262,7 @@
     bottom:15%;
   }
 }
-.showMore{
-  width: 100%;
-  background: linear-gradient(0deg, rgba(248, 248, 248, 0.58) 42%, rgba(248, 248, 248, 0) 100%);
-  font-size: 28px;
-  font-weight: bold;
-  color: #202020;
-  text-align: center;
-  position: absolute;
-  bottom: -40px;
-  padding-top: 77px;
-  padding-bottom: 20px;
-  .moreTip{
-    width: 38px;
-    height: 19px;
-    margin-top: 14px;
-  }
-}
-.storezn{
-  font-size: 28px;
-    
-    color: #202020;
-  line-height: 54px;
-  margin-bottom: 40px;
-}
-.storezn+image{
-  width: 100%;
-}  
+
 .bottom{
   font-size: 28px;    
   color: #C0C8D3;

src/services/landlord.js

@@ -53,9 +53,8 @@ import request from '@/utils/request'
 
 
 /**
- * 房源详情
- * @param {*} id 
+ * 分享房源
+ * @param {*} data 
  * @returns 
  */
-export const getRoomDetail = (id) => request(`/taRoom/${id}`)
-
+ export const shareRoom = (data) => request('/roomOrder', { method: 'post', data })