Merge branch 'dev' of http://120.76.84.145:10101/gitblit/r/H5/xp-robotaxi-m...

hejianhao

2026-02-03 6e4ec0392550df53c03f75df849e2bbaa3120065

Merge branch 'dev' of http://120.76.84.145:10101/gitblit/r/H5/xp-robotaxi-miniprogram into dev

 src/app.config.ts

@@ -21,7 +21,10 @@
      root: 'robotaxi',
      pages: [
        'pages/demo/index',
        'pages/coupon/index'
        'pages/coupon/index',
        'pages/site-search/index',
        'pages/order/index',
        'pages/order/detail/index'
      ],
    }
  ];

 src/robotaxi/assets/address.png

 src/robotaxi/assets/arrow.png

 src/robotaxi/assets/bad.png

 src/robotaxi/assets/close.png

 src/robotaxi/assets/good.png

 src/robotaxi/assets/map.png

 src/robotaxi/assets/normal.png

 src/robotaxi/assets/right.png

 src/robotaxi/pages/coupon/index.less

@@ -44,8 +44,11 @@
    &::-webkit-scrollbar {
      display: none;
    }
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */

    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */

    .coupon-item {
      width: 686px;
@@ -58,9 +61,10 @@
      display: flex;
      align-items: center;
      justify-content: space-between;
      .coupon-price{

      .coupon-price {
        display: flex;
      align-items: center;
        align-items: center;
      }

      .price {
@@ -156,4 +160,90 @@
      }
    }
  }

  .privacy-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;

    .privacy-mask {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
    }

    .privacy-content {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: #ffffff;
      border-radius: 16px 16px 0 0;
      padding: 48px 32px 112px 40px;
      transform: translateY(100%);

      .privacy-header {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-bottom: 66px;

        .title {
          width: 540px;
          height: 48px;
          font-family: PingFang SC;
          font-size: 32px;
          font-weight: bold;
          line-height: 48px;
          color: rgba(0, 0, 0, 0.9);
          text-align: center;
          margin-right: 32px;
        }

        .close {
          width: 40px;
          height: 40px;
        }
      }

      .remark-card {
        display: flex;
        margin-bottom: 28px;

        .remark-label {
          /* 自动布局子元素 */
          width: 112px;
          height: 44px;
          z-index: 0;
          font-family: PingFang SC;
          font-size: 28px;
          font-weight: normal;
          line-height: 44px;
          letter-spacing: normal;
          /* 文字色/黑色/辅助文字 40% */
          color: rgba(0, 0, 0, 0.4);
          margin-right: 24px;
          flex-shrink: 0;
        }

        .remark-value {
          font-family: PingFang SC;
          font-size: 28px;
          font-weight: normal;
          line-height: 44px;
          letter-spacing: normal;
          /* 文字色/黑色/重要字 90% */
          color: rgba(0, 0, 0, 0.9);
        }
      }


    }
  }
}

 src/robotaxi/pages/coupon/index.tsx

@@ -1,111 +1,142 @@
import Taro from '@tarojs/taro';
import { Component } from 'react';
import { View, Text,Image } from '@tarojs/components';
import { Component, useState, useEffect } from 'react';
import { View, Text, Image } from '@tarojs/components';
import './index.less';
import { createPage } from '../../../utils/page';
import { checkOtp } from '../../../utils/tools';
import { CDN } from '../../../constants/api';
import icon from '../../assets/Subtract.png'
import close from '../../assets/close.png'

// @ts-ignore
@createPage()
export default class Toolbox extends Component {
  $app: any = Taro.getApp().$app;
  state={
    couponStatus: [{label:'全部',value:'1'},{label:'未使用',value:'2'},{label:'已使用',value:'3'},{label:'已失效',value:'4'}],
    activeStatus:'1',
    couponList:[{
      id:'1',
      name:'优惠券名称',
      time:'2026-03-04 12:12:01',
      price:'20'
    },{
      id:'2',
      name:'优惠券名称',
      time:'2026-03-04 12:12:01',
      price:'20'
    },{
      id:'3',
      name:'优惠券名称',
      time:'2026-03-04 12:12:01',
      price:'20'
    },{
      id:'4',
      name:'优惠券名称',
      time:'2026-03-04 12:12:01',
      price:'20'
    },{
      id:'5',
      name:'优惠券名称',
      time:'2026-03-04 12:12:01',
      price:'20'
    },{
      id:'6',
      name:'优惠券名称',
      time:'2026-03-04 12:12:01',
      price:'20'
    },{
      id:'7',
      name:'优惠券名称',
      time:'2026-03-04 12:12:01',
      price:'20'
    }]
export default function CouponPage() {
  const [couponStatus, setCouponStatus] = useState([
    { label: '全部', value: '1' },
    { label: '未使用', value: '2' },
    { label: '已使用', value: '3' },
    { label: '已失效', value: '4' }])
  const [activeStatus, setActiveStatus] = useState('1')
  const [couponList, setCouponList] = useState([
    {
      id: '1',
      name: '优惠券名称',
      time: '2026-03-04 12:12:01',
      price: '20'
    }, {
      id: '2',
      name: '优惠券名称',
      time: '2026-03-04 12:12:01',
      price: '20'
    }, {
      id: '3',
      name: '优惠券名称',
      time: '2026-03-04 12:12:01',
      price: '20'
    }, {
      id: '4',
      name: '优惠券名称',
      time: '2026-03-04 12:12:01',
      price: '20'
    }, {
      id: '5',
      name: '优惠券名称',
      time: '2026-03-04 12:12:01',
      price: '20'
    }, {
      id: '6',
      name: '优惠券名称',
      time: '2026-03-04 12:12:01',
      price: '20'
    }, {
      id: '7',
      name: '优惠券名称',
      time: '2026-03-04 12:12:01',
      price: '20'
    }])
  const [animationData, setAnimationData] = useState(null)
  const [visible, setVisible] = useState(false)




  const changeStatus = (value) => {
    setActiveStatus(value)
  }

  componentDidShow() {
    this.$app.xpReportShow();

    const autoLogin = false; // 设置为 true 以启用自动登录
    checkOtp(autoLogin).then(otp => {
      if (otp) {
        // 已登录
        console.log('用户已登录，otp:', otp);
      } else {
        // 没有登录
        console.log('用户未登录');
      }
  const openPopup = () => {
    const animation = Taro.createAnimation({
      duration: 300,
      timingFunction: 'ease-out'
    });
    animation.translateY(0).step();
    setAnimationData(animation.export())
    setVisible(true)
  }
  const closePopup = () => {
    const animation = Taro.createAnimation({
      duration: 300,
      timingFunction: 'ease-in'
    });
    animation.translateY(500).step();
    setAnimationData(animation.export())
    setVisible(false)

  }

  componentDidHide() {
    this.$app.xpReportHide();
  }
  changeStatus(value){
    console.log('111111111',value)
    this.setState({
      activeStatus:value
    })
  }
  return (
    <View className='coupon-page'>
      <View className='tab-card'>
        {couponStatus.map((item, index) => {
          return <View className={`tab-item ${activeStatus === item.value ? 'active-status' : ''}`} key={item.value || index} onClick={() => changeStatus(item.value)}>{item.label}</View>
        })}
      </View>
      <View className='coupon-card'>
        {couponList.map((item, index) => {
          return <View className='coupon-item' key={item.id || index}>

  render() {
const {couponStatus,activeStatus,couponList} = this.state;
    return (
      <View className='coupon-page'>
        <View className='tab-card'>
          {couponStatus.map((item,index)=>{
            return <View className={`tab-item ${activeStatus === item.value ? 'active-status' : ''}`} key={item.value || index} onClick={()=>this.changeStatus(item.value)}>{item.label}</View>
          })}
        </View>
        <View className='coupon-card'>
          {couponList.map((item,index)=>{
            return <View className='coupon-item' key={item.id||index}>

              <View className='coupon-price'>
                <Text className='price'>{item.price}</Text>
                <Text className='unit'>元</Text>
              </View>
              <View className='coupon-info'>
                <Text className='name'>{item.name}</Text>
                <Text className='time'>{item.time}到期</Text>
                <View className='more'>
                  <Text className='more-detail'>查看详情</Text>
                  <Image className='more-img' src={icon}></Image>
                </View>
              </View>
              <View className='receive'>领取</View>
            <View className='coupon-price'>
              <Text className='price'>{item.price}</Text>
              <Text className='unit'>元</Text>
            </View>
          })}
            <View className='coupon-info'>
              <Text className='name'>{item.name}</Text>
              <Text className='time'>{item.time}到期</Text>
              <View className='more' onClick={() => openPopup(item)}>
                <Text className='more-detail'>查看详情</Text>
                <Image className='more-img' src={icon}></Image>
              </View>
            </View>
            <View className='receive'>领取</View>
          </View>
        })}
      </View>

      {/* 优惠券说明 */}
      {visible && <View className='privacy-popup' catchMove>
        <View className='privacy-mask'></View>
        <View className='privacy-content' animation={animationData}>
          {/* 头部：标题 + 关闭*/}
          <View className='privacy-header'>
            <Text className='title'>优惠券说明</Text>
            <Image className='close' src={close} onClick={() => closePopup()}></Image>
          </View>
          {/* 内容文案 */}
          <View className='remark-card'>
            <Text className='remark-label'>有效时间</Text>
            <Text className='remark-value'>2025-12-16 失效</Text>
          </View>
          <View className='remark-card'>
            <Text className='remark-label'>使用时段</Text>
            <Text className='remark-value'>运营时间内可用</Text>
          </View>
          <View className='remark-card'>
            <Text className='remark-label'>使用地区</Text>
            <Text className='remark-value'> 广州、武汉</Text>
          </View>
          <View className='remark-card'>
            <Text className='remark-label'>使用说明</Text>
            <Text className='remark-value'>小鹏Robotaxi用户专享，领取后7天有效 适用于小鹏Robotaxi设定运营区内使用 如有疑问请联系:400-xxx-xxxxxx</Text>
          </View>

        </View>
      </View>
    )}
      }

    </View>
  )
}

 src/robotaxi/pages/order/detail/index.config.ts

New file
@@ -0,0 +1,3 @@
export default {
  navigationBarTitleText: '订单详情',
};

 src/robotaxi/pages/order/detail/index.less

New file
@@ -0,0 +1,259 @@
.order-detail-page {
  background: #F2F3F7;
  min-height: 100vh;
  padding: 32px 0px;
  display: flex;
  flex-direction: column;

  .car-info {
    margin: 0 24px;
    padding: 18px 32px 32px 32px;
    border-radius: 24px;
    background: #FFFFFF;

    .info-top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 36px;

      .car-name {
        font-family: PingFang SC;
        font-size: 28px;
        font-weight: normal;
        line-height: 48px;
        letter-spacing: normal;
        color: rgba(0, 0, 0, 0.9);
        margin-top: 14px;
      }

      .info {
        display: flex;
        align-items: center;
      }

      .car-color {
        font-family: PingFang SC;
        font-size: 24px;
        font-weight: normal;
        line-height: 40px;
        text-align: center;
        letter-spacing: normal;
        color: rgba(0, 0, 0, 0.6);
      }

      .info-line {
        /* 自动布局子元素 */
        width: 1.4px;
        height: 20px;
        z-index: 1;
        margin: 0 14px;
      }

      .car-code {
        text-align: center;
        letter-spacing: normal;
        color: rgba(0, 0, 0, 0.6);
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 24px;
        font-variation-settings: "opsz" auto;
      }

      .code {
        text-align: center;
        letter-spacing: normal;
        color: rgba(0, 0, 0, 0.6);
        font-family: Figtree;
        font-weight: 400;
        font-size: 24px;
        font-variation-settings: "opsz" auto;
      }

      .car-img {
        width: 236px;
        height: 110px;
        margin-right: 4px;
      }
    }

    .evaluate-card {
      width: 638px;
      height: 248px;
      border-radius: 16px;
      background: #F5F6FA;
      padding: 32px 28px 24px 30px;

      .card-title {
        font-family: PingFang SC;
        font-size: 28px;
        font-weight: normal;
        line-height: 40px;
        letter-spacing: normal;
        /* 文字色/黑色/重要字 90% */
        color: rgba(0, 0, 0, 0.9);
        margin: 0px 0px 24px 2px;
      }

      .card-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .evaluate-item {
        /* 自动布局子元素 */
        width: 140px;
        height: 128px;
        /* 自动布局 */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 0px;
        z-index: 2;

        .evaluate-img {
          /* 自动布局子元素 */
          width: 80px;
          height: 80px;
          z-index: 0;
        }

        .evaluate-text {
          /* 辅助文字/辅助文字 常规 12 */
          font-family: PingFang SC;
          font-size: 24px;
          font-weight: normal;
          line-height: 40px;
          text-align: center;
          letter-spacing: normal;
          /* 文字色/黑色/辅助文字 40% */
          color: rgba(0, 0, 0, 0.4);
        }

        .active-text {
          /* 文字色/黑色/重要字 90% */
          color: rgba(0, 0, 0, 0.9);
        }
      }
    }
  }

  .trip-info {
    margin: 24px 38px;
    border-radius: 20.29px;
    background: #FFFFFF;
    padding: 32px 24px;

    .trip-top {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .price-card {
        display: flex;
        align-items: center;

        .price {
          font-family: Figtree;
          font-size: 48px;
          font-weight: 600;
          line-height: 40px;
          letter-spacing: normal;
          color: rgba(0, 0, 0, 0.9);
        }

        .unit {
          font-family: PingFang SC;
          font-size: 24px;
          font-weight: normal;
          line-height: 40px;
          letter-spacing: normal;
          color: rgba(0, 0, 0, 0.9);
          margin: 0 4px;
        }

        .old-price {
          font-family: Figtree;
          font-size: 28px;
          font-weight: normal;
          line-height: 40px;
          letter-spacing: normal;
          text-decoration: line-through;
          color: rgba(0, 0, 0, 0.4);
        }
      }

      .price-remark {
        display: flex;
        align-items: center;

        .remark-text {
          font-family: PingFang SC;
          font-size: 24px;
          font-weight: normal;
          line-height: 40px;
          letter-spacing: normal;
          /* 文字色/黑色/次要文字 60% */
          color: rgba(0, 0, 0, 0.6);
          margin-right: 12px;
        }

        .remark-img {
          width: 26px;
          height: 26px;
        }
      }
    }

    .trip-map {
      margin: 32px 0;
      width: 622px;
      height: 270px;
      border-radius: 16px;
      background: #F2F3F7;
    }

    .trip-line {
      .line-name {
        font-family: PingFang SC;
        font-size: 28px;
        font-weight: 500;
        line-height: 44px;
        letter-spacing: normal;
        /* 文字色/黑色/重要字 90% */
        color: rgba(0, 0, 0, 0.9);
        margin-bottom: 8px;
      }

      .line-address {
        display: flex;
        align-items: center;
        .line-icon {
          /* 自动布局子元素 */
          width: 8px;
          height: 8px;
          z-index: 0;
          background: #65C3FC;
          border-radius: 50%;
          margin-right: 16px;
          flex-shrink: 0;
        }

        .line-text {
          font-family: PingFang SC;
          font-size: 24px;
          font-weight: normal;
          line-height: 44px;
          letter-spacing: normal;
          color: rgba(0, 0, 0, 0.4);
        }
        .first-icon{
          background: #768AFF;
        }

      }
    }
  }

}

 src/robotaxi/pages/order/detail/index.tsx

New file
@@ -0,0 +1,97 @@
import Taro from '@tarojs/taro';
import { Component, useState, useEffect } from 'react';
import { View, Text, Image, Input } from '@tarojs/components';
import './index.less';
import good from '../../../assets/good.png'
import normal from '../../../assets/normal.png'
import bad from '../../../assets/bad.png'
import right from '../../../assets/right.png'

export default function orderDetailPage() {
  const [evaluateList, setEvaluateList] = useState([
    {
      id: '1',
      img: bad,
      activeImg: '',
      text: '很不满意',
    }, {
      id: '2',
      img: normal,
      activeImg: '',
      text: '一般般',
    }, {
      id: '3',
      img: good,
      activeImg: '',
      text: '很满意',
    }
  ])
  const [activeIndex, setActiveIndex] = useState(1)




  return (
    <View className='order-detail-page'>
      {/* 车辆信息 */}
      <View className='car-info'>
        <View className='info-top'>
          <View>
            <View className='car-name'>粤PXV7029</View>
            <View className='info'>
              <Text className='car-color'>白色</Text>
              <Text className='info-line'></Text>
              <Text className='car-code'>车身编码: </Text>
              <Text className='code'>03</Text>
            </View>
          </View>
          <Image src='https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/1bcd9db5-c909-4edc-a3d2-61cc33c54462.jpg' className='car-img' />
        </View>
        <View className='evaluate-card'>
          <View className='card-title'>您对本次行程满意吗？</View>
          <View className='card-content'>
            <View className={`evaluate-item ${activeIndex == 1 ? 'active' : ''}`} onClick={() => { setActiveIndex(1) }}>
              <Image src={bad} className='evaluate-img' />
              <Text className={`evaluate-text ${activeIndex == 1 ? 'active-text' : ''}`}>非常不满意</Text>
            </View>
            <View className={`evaluate-item ${activeIndex == 2 ? 'active' : ''}`} onClick={() => { setActiveIndex(2) }}>
              <Image src={normal} className='evaluate-img' />
              <Text className={`evaluate-text ${activeIndex == 2 ? 'active-text' : ''}`}>一般般</Text>
            </View>
            <View className={`evaluate-item ${activeIndex == 3 ? 'active' : ''}`} onClick={() => { setActiveIndex(3) }}>
              <Image src={good} className='evaluate-img' />
              <Text className={`evaluate-text ${activeIndex == 3 ? 'active-text' : ''}`}>非常满意</Text>
            </View>
          </View>
        </View>
      </View>
      {/* 行程信息 */}
      <View className='trip-info'>
        <View className='trip-top'>
          <View className='price-card'>
            <Text className='price'>34.0</Text>
            <Text className='unit'>元</Text>
            <Text className='old-price'>20.8元</Text>
          </View>
          <View className='price-remark'>
            <Text className='remark-text'>费用说明</Text>
            <Image src={right} className='remark-img' />
          </View>
        </View>
        <View className='trip-map'></View>
        <View className='trip-line'>
          <View className='line-name'>全程2.8公里｜10分钟</View>
          <View className='line-address'>
            <View className='line-icon first-icon'></View>
            <Text className='line-text'>北京南站</Text>
          </View>
          <View className='line-address'>
            <View className='line-icon'></View>
            <Text className='line-text'>北京南站</Text>
          </View>
        </View>
      </View>

    </View>
  )
}

 src/robotaxi/pages/order/index.config.ts

New file
@@ -0,0 +1,3 @@
export default {
  navigationBarTitleText: '订单',
};

 src/robotaxi/pages/order/index.less

New file
@@ -0,0 +1,63 @@
.order-page {
  background: #F2F3F7;
  min-height: 100vh;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;

  .order-item {
    border-radius: 24px;
    background: #FFFFFF;
    margin-bottom: 24px;
    padding: 28px 40px 24px 32px;
    &:last-child{
      margin-bottom: 32px;
    }

    .order-time {
      font-family: PingFang SC;
      font-size: 28px;
      font-weight: 500;
      line-height: 44px;
      letter-spacing: normal;
      /* 文字色/黑色/重要字 90% */
      color: rgba(0, 0, 0, 0.9);
      margin-bottom: 8px;
    }

    .order-start {
      font-family: PingFang SC;
      font-size: 24px;
      font-weight: normal;
      line-height: 40px;
      letter-spacing: normal;
      /* 文字色/黑色/次要文字 60% */
      color: rgba(0, 0, 0, 0.6);
    }

    .order-again {
      margin-top: 4px;
      display: flex;
      justify-content: flex-end;
    }

    .order-again-text {
      width: 144px;
      z-index: 0;
      border-radius: 3112px;
      box-sizing: border-box;
      /* 按钮色/面性线性按钮 */
      border: 1px solid #181916;
      /* 辅助文字/辅助文字 常规 12 */
      font-family: PingFang SC;
      font-size: 24px;
      font-weight: normal;
      line-height: 48px;
      text-align: center;
      letter-spacing: normal;
      /* 按钮色/面性线性按钮 */
      color: #181916;
    }
  }

}

 src/robotaxi/pages/order/index.tsx

New file
@@ -0,0 +1,108 @@
import Taro from '@tarojs/taro';
import { Component, useState, useEffect } from 'react';
import { View, Text, Image, Input } from '@tarojs/components';
import './index.less';

export default function OrderPage() {
  const [orderList,setOrderList] =useState([
    {
      id:'1',
      time:'2026年02月03日 14:30',
      start:'深圳湾科技生态园',
      end:"南山区科技园地铁站"
    },
    {
      id:'2',
      time:'2026年02月02日 09:15',
      start:'腾讯滨海大厦',
      end:"深圳北站"
    },
    {
      id:'3',
      time:'2026年02月01日 18:45',
      start:'华强北商业街',
      end:"福田口岸"
    },
    {
      id:'4',
      time:'2026年01月31日 16:20',
      start:'宝安国际机场T3航站楼',
      end:"前海自贸区管理局"
    },
    {
      id:'5',
      time:'2026年01月30日 11:00',
      start:'深圳市民中心',
      end:"欢乐海岸购物中心"
    },
    {
      id:'6',
      time:'2026年01月29日 20:30',
      start:'世界之窗',
      end:"南山文体中心"
    },
    {
      id:'7',
      time:'2026年01月28日 08:45',
      start:'龙华富士康科技园',
      end:"坂田华为基地"
    },
    {
      id:'8',
      time:'2026年01月27日 13:15',
      start:'罗湖口岸',
      end:"东门老街"
    },
    {
      id:'9',
      time:'2026年01月26日 17:50',
      start:'蛇口邮轮中心',
      end:"海上世界文化艺术中心"
    },
    {
      id:'10',
      time:'2026年01月25日 10:30',
      start:'龙岗大运中心',
      end:"坪山高铁站"
    },
    {
      id:'11',
      time:'2026年01月24日 15:20',
      start:'科技楼2号',
      end:"科技楼2号"
    },
    {
      id:'12',
      time:'2026年01月23日 19:00',
      start:'福田CBD金融中心',
      end:"车公庙地铁站"
    }
  ])

  const toOrderDetail=(item)=>{
    Taro.navigateTo({
      url: '/robotaxi/pages/order/detail/index'
    })
  }




  return (
    <View className='order-page'>
      {
        orderList.map((item,index)=>{
          return <View className='order-item' key={item.id||index} onClick={()=> toOrderDetail(item)}>
            <View className='order-time'>{item.time||'-'}</View>
            <View className='order-start'>起点：{item.start||'-'}</View>
            <View className='order-start'>终点：{item.end||'-'}</View>
            <View className='order-again'>
              <Text className='order-again-text'>再来一单</Text>
            </View>
          </View>
        })
      }

    </View>
  )
}

 src/robotaxi/pages/site-search/index.config.ts

New file
@@ -0,0 +1,4 @@
export default {
  navigationBarTitleText: '',
  navigationBarBackgroundColor: '#F2F3F7'
};

 src/robotaxi/pages/site-search/index.less

New file
@@ -0,0 +1,221 @@
.search-page {
  background: #F2F3F7;
  min-height: 100vh;
  padding: 16px 32px;
  display: flex;
  flex-direction: column;

  .search-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 24px;
    background: #FFFFFF;
    box-sizing: border-box;
    border: 1px solid #F1F1F1;
    box-shadow: 0px 16px 60px 0px rgba(0, 0, 0, 0.05);
    padding: 22px 36px 24px 32px;

    .search-icon {
      /* 自动布局子元素 */
      width: 10px;
      height: 10px;
      z-index: 0;
      background: #768AFF;
      border-radius: 50%;
      margin-right: 16px;
    }

    .end-icon {
      background: #8BB654;
    }

    .search-input {
      flex: 1;
      height: 40px;
      font-size: 28px;
      font-weight: normal;
      line-height: 40px;
      color: rgba(0, 0, 0, 0.9);
      text-align: left;
      padding: 0;
      margin: 0;
    }

    .clear-icon {
      width: 50px;
      height: 50px;
    }
  }

  .history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;

    &:last-child {
      margin-bottom: 0px;
    }

    .history-icon {
      width: 32px;
      height: 32px;
      margin-right: 16px;
    }

    .history-info {
      flex: 1;

      .history-name {
        font-family: PingFang SC;
        font-size: 28px;
        font-weight: 500;
        line-height: normal;
        letter-spacing: normal;
        color: #3D3D3D;
        margin-bottom: 8px;
      }

      .history-address-box {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .history-address {
          font-family: PingFang SC;
          font-size: 24px;
          font-weight: normal;
          line-height: normal;
          letter-spacing: normal;
          color: rgba(0, 0, 0, 0.4);
        }

        .history-distance {
          font-family: PingFang SC;
          font-size: 24px;
          font-weight: normal;
          line-height: normal;
          text-align: right;
          letter-spacing: normal;
          color: rgba(0, 0, 0, 0.4);
        }
      }
    }
  }

  .show-more {
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    .more-text {
      font-family: PingFang SC;
      font-size: 22px;
      font-weight: normal;
      line-height: normal;
      letter-spacing: normal;
      /* 文字色/黑色/辅助文字 40% */
      color: rgba(0, 0, 0, 0.4);
    }

    .more-icon {
      /* 自动布局子元素 */
      width: 24px;
      height: 24px;
      z-index: 1;
      transition: transform 0.3s ease;
      // transform: rotate(90deg);

      &.rotate-up {
        transform: rotate(-180deg);
      }
    }

  }

  .history-card {
    border-radius: 16px;
    background: #FFFFFF;
    margin-top: 32px;

    .card-header {
      background: rgba(0, 0, 0, 0.03);
      padding: 16px 24px;
      font-family: PingFang SC;
      font-size: 24px;
      font-weight: 500;
      line-height: normal;
      letter-spacing: normal;
      color: rgba(0, 0, 0, 0.9);
    }

    .card-content {
      padding: 16px 24px;
    }
  }

  .recommend-card {
    border-radius: 16px;
    background: #FFFFFF;
    border: 2px solid #FFFFFF;
    margin-top: 24px;

    .card-header {
      background: linear-gradient(94deg, rgba(132, 117, 255, 0.15) 0%, rgba(125, 214, 255, 0.15) 104%);
      padding: 16px 24px;
      border-radius: 16px 16px 0 0;
      font-family: PingFang SC;
      font-size: 24px;
      font-weight: 500;
      line-height: normal;
      letter-spacing: normal;
      color: rgba(0, 0, 0, 0.9);
    }

    .card-content {
      padding: 24px;
    }
  }

  .nonOperational-card {
    border-radius: 16px;
    background: #FFFFFF;
    margin-top: 24px;
    margin-bottom: 60px;

    .card-header {
      background: rgba(0, 0, 0, 0.03);
      padding: 16px 24px;
      border-radius: 16px 16px 0 0;
      font-family: PingFang SC;
      font-size: 24px;
      font-weight: 500;
      line-height: normal;
      letter-spacing: normal;
      color: rgba(0, 0, 0, 0.4);
    }

    .card-content {
      padding: 24px;

      .history-name {
        color: rgba(0, 0, 0, 0.25) !important;
      }

      .history-address {
        color: rgba(0, 0, 0, 0.25) !important;
      }

      .history-distance {
        color: rgba(0, 0, 0, 0.25) !important;
      }
    }
  }




}

 src/robotaxi/pages/site-search/index.tsx

New file
@@ -0,0 +1,261 @@
import Taro from '@tarojs/taro';
import { Component, useState, useEffect } from 'react';
import { View, Text, Image, Input } from '@tarojs/components';
import './index.less';
import map from '../../assets/map.png'
import address from '../../assets/address.png'
import arrow from '../../assets/arrow.png'

export default function SiteSearchPage() {
  const [siteList, setSiteList] = useState([
    {
      id: 1,
      name: '天河城购物中心',
      address: '广州市天河区天河路208号',
      distance: '1.2km'
    },
    {
      id: 2,
      name: '珠江新城地铁站',
      address: '广州市天河区珠江新城花城大道',
      distance: '2.8km'
    },
    {
      id: 3,
      name: '广州塔',
      address: '广州市海珠区阅江西路222号',
      distance: '5.6km'
    },
    {
      id: 4,
      name: '白云国际机场T2航站楼',
      address: '广州市白云区机场路',
      distance: '28.5km'
    },
    {
      id: 5,
      name: '广州南站',
      address: '广州市番禺区石壁街道南站北路',
      distance: '18.3km'
    },
    {
      id: 6,
      name: '北京路步行街',
      address: '广州市越秀区北京路',
      distance: '6.7km'
    },
    {
      id: 7,
      name: '长隆欢乐世界',
      address: '广州市番禺区汉溪大道东',
      distance: '15.2km'
    }
  ]) //推荐站点列表
  const [historySite, setHistorySite] = useState([
    {
      id: 1,
      name: '广州岭南职业技术学院（公交站）',
      address: '广州市天河区东圃大观中路492号',
      distance: '3.4km'
    },
    {
      id: 2,
      name: '天河体育中心',
      address: '广州市天河区天河路299号',
      distance: '2.1km'
    },
    {
      id: 3,
      name: '太古汇',
      address: '广州市天河区天河路383号',
      distance: '1.8km'
    },
    {
      id: 4,
      name: '广州东站',
      address: '广州市天河区林和街道东站路1号',
      distance: '4.5km'
    },
    {
      id: 5,
      name: '琶洲会展中心',
      address: '广州市海珠区阅江中路380号',
      distance: '7.2km'
    },
    {
      id: 6,
      name: '万菱汇',
      address: '广州市天河区天河路230号',
      distance: '1.5km'
    },
    {
      id: 7,
      name: '正佳广场',
      address: '广州市天河区天河路228号',
      distance: '1.9km'
    },
    {
      id: 8,
      name: '花城广场',
      address: '广州市天河区花城大道',
      distance: '3.2km'
    }
  ]) //历史记录列表
  const [nonOperationalSite, setNonOperationalSite] = useState([
    {
      id: 1,
      name: '从化温泉度假区',
      address: '广州市从化区温泉镇',
      distance: '65.8km'
    },
    {
      id: 2,
      name: '增城万达广场',
      address: '广州市增城区荔城街道',
      distance: '52.3km'
    },
    {
      id: 3,
      name: '南沙湿地公园',
      address: '广州市南沙区万顷沙镇新港大道',
      distance: '48.6km'
    },
    {
      id: 4,
      name: '花都融创文旅城',
      address: '广州市花都区凤凰北路',
      distance: '42.1km'
    }
  ]) //  非运营区域站点
  const [searchValue, setSearchValue] = useState('') //搜索值
  const [pageType, setPageType] = useState('end') //出发地 start 目的地 end
  const [showAllHistory, setShowAllHistory] = useState(false) // 是否展示全部历史记录
  const [showAllRecommend, setShowAllRecommend] = useState(false) // 是否展示全部推荐站点

  const MAX_SHOW_COUNT = 5 // 默认最多显示5条

  const searchSite = () => {
    console.log(searchValue)
  }
  const changeSearchValue = (e) => {
    console.log('eeeeeeeeeeee', e)
    setSearchValue(e.detail.value)
  }

  // 切换历史记录展示状态
  const toggleHistoryShow = () => {
    setShowAllHistory(!showAllHistory)
  }

  // 切换推荐站点展示状态
  const toggleRecommendShow = () => {
    setShowAllRecommend(!showAllRecommend)
  }

  // 获取要显示的历史记录列表
  const getDisplayHistoryList = () => {
    if (showAllHistory || historySite.length <= MAX_SHOW_COUNT) {
      return historySite
    }
    return historySite.slice(0, MAX_SHOW_COUNT)
  }

  // 获取要显示的推荐站点列表
  const getDisplayRecommendList = () => {
    if (showAllRecommend || siteList.length <= MAX_SHOW_COUNT) {
      return siteList
    }
    return siteList.slice(0, MAX_SHOW_COUNT)
  }





  return (
    <View className='search-page'>
      {/* 搜索区域 */}
      <View className='search-card'>
        <View className={`search-icon ${pageType == 'end' ? 'end-icon' : ''}`}></View>
        <Input className='search-input' placeholder={pageType == 'start' ? '请输入上车点' : '请输入目的地'} value={searchValue}
          onInput={(e) => changeSearchValue(e)}
          onBlur={() => searchSite()}
          onConfirm={() => searchSite()}
        ></Input>
        <Image className='clear-icon' src={map}></Image>
      </View>
      {/* 历史记录 */}
      <View className='history-card'>
        <View className='card-header'>历史记录</View>
        <View className='card-content'>
          {
            getDisplayHistoryList().map((item, index) => {
              return <View className='history-item' key={item.id || index}>
                <Image className='history-icon' src={address}></Image>
                <View className='history-info'>
                  <View className='history-name'>{item.name || '_'}</View>
                  <View className='history-address-box'>
                    <View className='history-address'>{item.address || '-'}</View>
                    <View className='history-distance'>{item.distance}</View>
                  </View>
                </View>
              </View>
            })
          }
        </View>
        {historySite.length > MAX_SHOW_COUNT && (
          <View className='show-more' onClick={toggleHistoryShow}>
            <Text className='more-text'>{showAllHistory ? '收起' : '展示更多'}</Text>
            <Image className={`more-icon ${showAllHistory ? 'rotate-up' : ''}`} src={arrow}></Image>
          </View>
        )}
      </View>
      {/* 推荐站点 */}
      <View className='recommend-card'>
        <View className='card-header'>推荐站点</View>
        <View className='card-content'>
          {
            getDisplayRecommendList().map((item, index) => {
              return <View className='history-item' key={item.id || index}>
                <Image className='history-icon' src={address}></Image>
                <View className='history-info'>
                  <View className='history-name'>{item.name || '_'}</View>
                  <View className='history-address-box'>
                    <View className='history-address'>{item.address || '-'}</View>
                    <View className='history-distance'>{item.distance}</View>
                  </View>
                </View>
              </View>
            })
          }
        </View>
        {siteList.length > MAX_SHOW_COUNT && (
          <View className='show-more' onClick={toggleRecommendShow}>
            <Text className='more-text'>{showAllRecommend ? '收起' : '展示更多'}</Text>
            <Image className={`more-icon ${showAllRecommend ? 'rotate-up' : ''}`} src={arrow}></Image>
          </View>
        )}
      </View>
      {/* 非营运区域 */}
      <View className='nonOperational-card'>
        <View className='card-header'>非运营区域</View>
        <View className='card-content'>
          {
            nonOperationalSite.map((item, index) => {
              return <View className='history-item' key={item.id || index}>
                <Image className='history-icon' src={address}></Image>
                <View className='history-info'>
                  <View className='history-name'>{item.name || '_'}</View>
                  <View className='history-address-box'>
                    <View className='history-address'>{item.address || '-'}</View>
                    <View className='history-distance'>{item.distance}</View>
                  </View>
                </View>
              </View>
            })
          }
        </View>
      </View>
    </View>
  )
}