行程中心-订单

董国庆

2026-02-03 5f3464724089c2f2a612c002d28663145be739f2

行程中心-订单

 src/app.config.ts

@@ -22,7 +22,9 @@
      pages: [
        'pages/demo/index',
        'pages/coupon/index',
        'pages/site-search/index'
        'pages/site-search/index',
        'pages/order/index',
        'pages/order/detail/index'
      ],
    }
  ];

 src/robotaxi/assets/bad.png

 src/robotaxi/assets/good.png

 src/robotaxi/assets/normal.png

 src/robotaxi/assets/right.png

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