站点搜索页面

董国庆

2026-02-03 195300a53871373451c853a75dd2a7e7bb1780e9

站点搜索页面

 src/app.config.ts

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

 src/robotaxi/assets/address.png

 src/robotaxi/assets/arrow.png

 src/robotaxi/assets/map.png

 src/robotaxi/pages/coupon/index.tsx

@@ -1,22 +1,19 @@
import Taro from '@tarojs/taro';
import { Component,useState, useEffect  } from 'react';
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: [
      {
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',
@@ -51,121 +48,95 @@
      name: '优惠券名称',
      time: '2026-03-04 12:12:01',
      price: '20'
    }],
    animationData: null,
    visible: false
  }
    }])
  const [animationData, setAnimationData] = useState(null)
  const [visible, setVisible] = useState(false)


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

    const autoLogin = false; // 设置为 true 以启用自动登录
    checkOtp(autoLogin).then(otp => {
      if (otp) {
        // 已登录
        console.log('用户已登录，otp:', otp);
      } else {
        // 没有登录
        console.log('用户未登录');
      }
    });
  }

  componentDidHide() {
    this.$app.xpReportHide();
  const changeStatus = (value) => {
    setActiveStatus(value)
  }
  changeStatus(value) {
    console.log('111111111', value)
    this.setState({
      activeStatus: value
    })
  }
  openPopup(){
  const openPopup = () => {
    const animation = Taro.createAnimation({
      duration: 300,
      timingFunction: 'ease-out'
    });
    animation.translateY(0).step();
    this.setState({
      animationData: animation.export(),
      visible:true
    })
    setAnimationData(animation.export())
    setVisible(true)
  }
  closePopup(){
  const closePopup = () => {
    const animation = Taro.createAnimation({
      duration: 300,
      timingFunction: 'ease-in'
    });
    animation.translateY(500).step();
    this.setState({
      animationData: animation.export(),
      visible:false
    })
    setAnimationData(animation.export())
    setVisible(false)

  }

  render() {
    const { couponStatus, activeStatus, couponList,animationData,visible } = 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' onClick={()=>this.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={()=>this.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>
        }

  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}>

            <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/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>
  )
}