client-miniapp/src/pages/guide/index.jsx

import React, { useEffect, useState } from 'react'
import Taro, { useDidShow } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import ContainerLayout from '../../compents/container/index'
import icon from '../../assets/icon.png'
import './index.scss'
import userRloe from '../../util/userRole'
import { useSelector } from 'react-redux'
import request from '@/util/request'
import uploadicon from '../../assets/uploadicon.png'
const guide = (props) => {

    const user = useSelector(state => state.user)
    // const guide = useSelector(state => state.guide)




    const { value, houseId, ...prop } = props
    const [state, setState] = useState(1)

    const [imgurl, setImgurl] = useState('')
    // const [detail, setDetail] = useState({})
    const detail = props.dataSource || {}

    // useDidShow(() => {
    //     if (houseId) {
    //         getDetail()
    //     }
    // })

    // useEffect(() => {
    //     console.log(houseId, 'params33')
    //     if (houseId) {
    //         getDetail()
    //     }

    // }, [])
    // const getDetail = () => {
    //     request({ url: `/taHouse/${houseId}` }).then((res) => {
    //         setDetail(res.data.data)

    //         wx.setNavigationBarTitle({
    //             title: res.data.data.title
    //         })
    //     })
    // }

    const onOpenLocation = (lngLat) => {
        const [latitude, longitude] = lngLat.split(',')
        console.log(lngLat, latitude, longitude)
        wx.openLocation({
            latitude: Number(latitude),
            longitude: Number(longitude),
            scale: 18,
            fail: (err) => {
                console.log(err)
            }
        })
    }

    const onToMap = (type) => {
        if (user.role == userRloe.customer) return
        switch (type) {
            case 'address': Taro.navigateTo({ url: `/pages/map/index?houseId=${houseId}&type=${type}` }); break;
            case 'park': Taro.navigateTo({ url: `/pages/map/index?houseId=${houseId}&type=${type}` }); break;
            case 'wifi': Taro.navigateTo({ url: `/pages/wifi/index?houseId=${houseId}` }); break;
            case 'image': {
                if (user.role == userRloe.customer) return
                wx.chooseImage({
                    count: 1,
                    sizeType: ['original', 'compressed'],
                    sourceType: ['album',],
                    success: (res) => {
                        // tempFilePath可以作为img标签的src属性显示图片

                        console.log(res)
                        const tempFilePaths = res.tempFilePaths
                        setImgurl(tempFilePaths[0])
                    }
                }); break;
            }
        }
        // Taro.navigateTo({ url: `/pages/map/index?type=${type}` })
    }
    // 
    return <View className='guide'>
        {!!houseId&&<View>
            <View className='guide-view'>
                <Text className='guide-view-info'>房屋位置</Text>
                <ContainerLayout className='guide-view-layout' style={{ display: 'flex', justifyContent: 'space-between' }} onClick={() => onToMap('address')}>
                    <View  >
                        <View className='guide-view-layout-text1' >{detail.address}</View>
                        {/* <View className='guide-view-layout-text2'>{detail.lngLat}</View> */}
                    </View>
                    {user.role == userRloe.customer && <View style={{ float: 'right' }} onClick={() => onOpenLocation(detail.lngLat)}>
                        <Image className='icon' src={icon} />
                        <View className='icontext' >去这里</View>
                    </View>}
                </ContainerLayout>
            </View>
            <View className='guide-view'>
                <Text className='guide-view-info'>停车位置</Text>
                <ContainerLayout className='guide-view-layout' style={{ display: 'flex', justifyContent: 'space-between' }} onClick={() => onToMap('park')}>
                    <View  >
                        <View className='guide-view-layout-text1' >{detail.parking}</View>
                        {/* <View className='guide-view-layout-text2'>{detail.parkLngLat}</View> */}
                    </View>
                    {user.role == userRloe.customer && <View style={{ float: 'right' }} onClick={() => onOpenLocation(detail.parkLngLat)}>
                        <Image className='icon' src={icon} />
                        <View className='icontext'>去这里</View>
                    </View>}
                </ContainerLayout>
            </View>
            <View className='guide-view'>
                <Text className='guide-view-info'>wifi信息</Text>
                <ContainerLayout className='guide-view-layout guide-view-wifi' onClick={() => onToMap('wifi')}>
                    <View>
                        <Text>名称：</Text><Text>{detail.wifiName}</Text>
                    </View>
                    <View>
                        <Text>密码：</Text><Text>{detail.wifiPassword}</Text>
                    </View>
                </ContainerLayout>
            </View>
            <View className='guide-view'>
                <Text className='guide-view-info'>其他指引</Text>
                {/* <ContainerLayout className='guide-view-layout guide-view-img'> */}
                {(detail.desc || imgurl) && <Image className='guide-view-img' mode='widthFix' onClick={() => onToMap('image')} src={imgurl || detail.desc}></Image>}
                {!detail.desc && !imgurl && <View style={{ padding: "300rpx" }} >

                    <Image className='guide-view-img' mode='widthFix' onClick={() => onToMap('image')} src={uploadicon}></Image>
                </View>
                }
            </View>
        </View>}
        {
            !houseId && <View className='recommend-noorder' style={{ marginTop: 'calc(40vh)',textAlign:'center' }}>
                <Text>哎呀</Text>
                <Text>暂时没发现您的入住订单呢~</Text>


            </View>
        }

    </View>
};

export default guide