miniapp-v2/src/pages/index/tabs/Guide.jsx

import { useState } from "react";
import Taro from '@tarojs/taro'
import image from '@/assets/icons/ProCard/8kb.jpg'
import Pay from '@/assets/icons/GuideCheck/Pay_logo.png'
import food from '@/assets/icons/ProCard/food.png'
import ProCard_hot from '@/assets/icons/ProCard/ProCard_hot.png'
import sleep from '@/assets/icons/GuideCheck/sleep_logo.png'
import Taxi from '@/assets/icons/GuideCheck/taxi.png'
import WiFi from '@/assets/icons/GuideCheck/WiFi.png'
import GoHere from '@/assets/icons/GuideCheck/GoHere.png'
import position from '@/assets/icons/GuideCheck/position_logo.png'
import Cup from '@/assets/icons/GuideCheck/Cup.png'
import BlackSpot from '@/assets/icons/GuideCheck/BlackSpot.png'
import starOn from '@/assets/icons/GuideCheck/starOn.png'
import starOff from '@/assets/icons/GuideCheck/starOff.png'
import loveOn from '@/assets/icons/GuideCheck/loveOn.png'
import Raiders from '@/assets/icons/GuideCheck/Raiders.png'
import RaidersImage from '@/assets/icons/GuideCheck/RaidersImage.jpg'
import AAAAAAAA from '@/assets/icons/GuideCheck/RaidersImage.jpg'

import './GuideCss/style.less'


const scoreList = new Array(5).fill(0)
const score = '3.9'


export default (props) => {
  const [value, setVaule] = useState('已收藏')
  const [imageSrc, setImageSrc] = useState(starOn)




  const Ac = () => {
    setImageSrc(starOff)
    setVaule('加入收藏')
    // console.log('------------', value);

  }

  const handleClick = () => {
    Taro.navigateTo({ url: '/pages/test/index' })
  }
  // onClick={handleClick}
  return (
    <scroll-view scroll-y style='height: 77vh;' >

      <view className='Guide-Home-box'>
        {/* <view className='Guide-image-text-box'>
          <image className='Guide-images' src={sleep} />
          <view className='Guide-text'>休息一下，休息一下~</view>
        </view> */}
        {/* 图片结束 */}
        {/* 有民宿的情况下 */}
        <view className='MessageCard'>
          <view className='MessageCard-title1'>
            <text className='MessageCard-left'>----------</text>
            名称
            <text className='MessageCard-right'>----------</text>
          </view>
          <view className='MessageCard-content'>
            <view className='MessageCard-name' >皇冠假日酒店-2507</view>
            {/* <view className='MessageCard-info' >江苏省南京市秦淮区XXXXXX路</view> */}
          </view>
          {/* <view className='MessageCard-button'>
            <image className='MessageCard-image' src={GoHere} />
            <text className='MessageCard-text'>去这里</text>
          </view> */}
        </view>
        {/* 有民宿的情况下 */}
        <view className='MessageCard'>
          <view className='MessageCard-title1'>
            <text className='MessageCard-left'>----------</text>
            民宿位置
            <text className='MessageCard-right'>----------</text>
          </view>
          <view className='MessageCard-content'>
            <view className='MessageCard-name' >精悦SHOS-北门</view>
            <view className='MessageCard-info' >江苏省南京市秦淮区XXXXXX路</view>
          </view>
          <view className='MessageCard-button'>
            <image className='MessageCard-image' src={GoHere} />
            <text className='MessageCard-text'>去这里</text>
          </view>
        </view>
        {/* 有民宿的情况下 */}
        <view className='MessageCard'>
          <view className='MessageCard-title1'>
            <text className='MessageCard-left'>----------</text>
            停车位置
            <text className='MessageCard-right'>----------</text>
          </view>
          <view className='MessageCard-content'>
            <view className='MessageCard-name' >江苏通讯大厦停车厂</view>
            <view className='MessageCard-info' >江苏省南京市秦淮区集庆路</view>
          </view>
          <view className='MessageCard-button'>
            <image className='MessageCard-image' src={Taxi} />
            <text className='MessageCard-text'>去这里</text>
          </view>
        </view>
        {/* 有民宿的情况下 */}
        <view className='MessageCard'>
          <view className='MessageCard-title1'>
            <text className='MessageCard-left'>----------</text>
            WiFi信息
            <text className='MessageCard-right'>----------</text>
          </view>
          <view className='MessageCard-content'>
            <view className='MessageCard-name' >名称：2507</view>
            <view className='MessageCard-info' >密码：15s1x5s5</view>
          </view>
          <view className='MessageCard-button'>
            <image className='MessageCard-image' src={WiFi} />
            <text className='MessageCard-text'>复制</text>
          </view>
        </view>
        {/* 更多指引开始 */}
        <view className='Guide-Content-box'>
          <view className='title-image'>
            <image mode='scaleToFill' className='title-image-cup' src={BlackSpot} />
            <text className='title-title-boss' >更多指引</text>
          </view>
        </view>
        <view className='articleCard'>
          <view className='articleCard-title'>
            <text className='articleCard-left'>--------</text>
            南京市·普通公寓里的独立房间
            <text className='articleCard-right'>--------</text>
          </view>
          <view className='articleCard-content'>
            <image className='articleCard-image' src={AAAAAAAA} />
          </view>
          <view className='articleCard-textarea'>
            <view className='articleCard-textarea-title' >位置：<text className='articleCard-textarea-content'>地处繁华街区，餐饮、娱乐选择丰富
              毗邻虹桥CBD，世贸商城展馆，百盛城市购物中心金虹桥购物中心，虹桥艺术中心，领馆聚集区，商务活动频繁，购物、聚会、聚餐、观看演出、表演电影，各项活动一应俱全。
            </text></view>
            <view className='articleCard-textarea-title' >出行信息：<text className='articleCard-textarea-content'>地处繁华街区，餐饮、娱乐选择丰富
              地铁2号线娄山关路站下车3号口出步行5分钟可以到达。周边公交车众多，四通八达，叫车也非常便捷快速。2号线去虹桥机场、虹桥高铁站勻为直达，无需换乘，非常便捷快速，耗时在20分钟左右（4-5站即可抵达）.

            </text></view>
          </view>
        </view>
        {/* 更多指引结束 */}
        <view className='Guide-Content-box'>
          <view className='title-image'>
            <image mode='scaleToFill' className='title-image-cup' src={Cup} />
            <text className='title-title-boss' >老板推荐好吃的</text>
          </view>
        </view>
        {/* 小标题结束 */}
        <view class='wrapper'>
          <view class='left-complete-one'>
            <image className='left-image-1' src={ProCard_hot}></image>
            <view className='left-viewText'>
              返现￥16.00
            </view>
            {/* 评分 */}
            <view className='card-box-star'>
              {
                scoreList.map((_, index) => {
                  console.log(index)
                  const src = (index + '0.1') < score ? starOn : starOff
                  return (
                    <image className='card-star-image' key={index} src={src} />
                  )
                })
              }
              <text className='card-star-text' >{score}</text>
            </view>
            <view className='title-image'>
              <image className='image-1' mode='scaleToFill' src={image}></image>
              <image className='image-2' src={food}></image>
            </view>
            <view className='title-content'>
              <view className='Pro-title'>
                <view className='title-text'>【橘里橘啊换行啊啊啊气咖啡店】新鲜出炉啦!</view>
              </view>
              <text className='title-money' >￥6990元<text className='title-money-2'>门市价78元</text></text>
              <view className='title-position-on'>
                <image className='title-position' src={position} />
                <text className='title-position-image'>南京市/秦淮区</text>
                <image className='title-on' src={imageSrc} />
                <text onClick={() => Ac()} className='title-on-text'>{value}</text>
              </view>
            </view>
          </view>
          <view class='right-complete-two'>
            <view className='right-content'>
              <image className='right-image' src={Pay} />
              <view className='right-title'>支付</view>
            </view>
          </view>
        </view>
        {/* 卡片----------------- */}
        <view class='wrapper'>
          <view class='left-complete-one'>
            <image className='left-image-1' src={ProCard_hot}></image>
            <view className='left-viewText'>
              返现￥16.00
            </view>
            {/* 评分 */}
            <view className='card-box-star'>
              {
                scoreList.map((_, index) => {
                  console.log(index)
                  const src = (index + '0.1') < score ? starOn : starOff
                  return (
                    <image className='card-star-image' key={index} src={src} />
                  )
                })
              }
              <text className='card-star-text' >{score}</text>
            </view>
            <view className='title-image'>
              <image className='image-1' mode='scaleToFill' src={image}></image>
              <image className='image-2' src={food}></image>
            </view>
            <view className='title-content'>
              <view className='Pro-title'>
                <view className='title-text'>【橘里橘啊换行啊啊啊气咖啡店】新鲜出炉啦!</view>
              </view>
              <text className='title-money' >￥6990元<text className='title-money-2'>门市价78元</text></text>
              {/* ProCard区域定位 */}
              <view className='title-position-on'>
                <image className='title-position' src={position} />
                <text className='title-position-image'>南京市/秦淮区</text>
                <image className='title-on' src={imageSrc} />
                <text onClick={() => Ac()} className='title-on-text'>{value}</text>
              </view>
            </view>
          </view>
          <view class='right-complete-two'>
            <view className='right-content'>
              {/* <view className='right-number'>×1</view> */}
              <image className='right-image' src={Pay} />
              <view className='right-title'>支付</view>
            </view>
          </view>
        </view>
        {/* 卡片------------- */}
        <view className='Guide-Content-box-two'>
          <view className='title-image-two'>
            <image mode='scaleToFill' className='title-image-cup-two' src={Cup} />
            <text className='title-title-boss-two' >老板推荐的攻略</text>
          </view>
        </view>
        {/* 小标题结束 */}
        {/* 攻略卡片 */}
        <view className='Raiders-box-one'>
          <view className='Raiders-imageLove'>
            <image className='Raiders-image-Raiders' src={Raiders} />
            <image className='Raiders-image-loveOn' src={loveOn} />
          </view>
          <view className='Raiders-box'>
            <image className='Raiders-image' mode='widthFix' src={RaidersImage} />
            <text className='Raiders-text'>南京古称金陵，自东吴孙权迁都南京以来，多个汉字汉字汉字汉字</text>
            <view className='Raiders-kilometer-on'>
              <image className='Raiders-kilometer' src={position} />
              <text className='Raiders-kilometer-image'>12.8公里</text>
              <text className='Raiders-on-text'>￥8888/人</text>
            </view>
          </view>
          <view className='Raiders-box' style='padding-lift:10px'>
            <view className='Raiders-imageLove'>
              <image className='Raiders-image-Raiders' src={Raiders} />
              <image className='Raiders-image-loveOn' src={loveOn} />
            </view>
            <image className='Raiders-image' mode='widthFix' src={RaidersImage} />
            <text className='Raiders-text'>南京古称金陵，自东吴孙权迁都南京以来，多个汉字汉字汉字汉字</text>
            <view className='Raiders-kilometer-on'>
              <image className='Raiders-kilometer' src={position} />
              <text className='Raiders-kilometer-image'>12.8公里</text>
              <text className='Raiders-on-text'>￥8888/人</text>
            </view>
          </view>
          {/* <view className='Raiders-box'></view> */}
        </view>
      </view>
    </scroll-view>

  )
}