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

hejianhao

2026-02-06 d586eb986fed09ed8a28babd4fb30ad9418fc5a4

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

 src/app.config.ts

@@ -27,7 +27,9 @@
        'pages/order/detail/index',
        'pages/select-city/index',
        'pages/select-map-site/index',
        'pages/begin-route/index'
        'pages/begin-route/index',
        'pages/expense-detail/index',
        'pages/expense-description/index',
      ],
    }
  ];

 src/robotaxi/assets/more.png

 src/robotaxi/pages/expense-description/index.config.ts

New file
@@ -0,0 +1,3 @@
export default {
  navigationBarTitleText: '费用说明',
};

 src/robotaxi/pages/expense-description/index.less

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

  .order-info {
    border-radius: 24px;
    background: #FFFFFF;
    padding: 32px 28px 30px 28px;

    .title {
      font-family: PingFang SC;
      font-size: 32px;
      font-weight: 500;
      line-height: 48px;
      font-variation-settings: "opsz" auto;
      color: rgba(0, 0, 0, 0.9);
      margin-left: 4px;
    }

    .look-rule {
      margin-right: 4px;
      display: flex;
      align-items: center;

      .look-rule-txt {
        font-family: PingFang SC;
        font-size: 24px;
        font-weight: normal;
        line-height: 36px;
        text-align: right;
        color: rgba(0, 0, 0, 0.4);
      }

      .arrow-icon {
        width: 13.6px;
        height: 20px;
        margin-left: 18px;
        flex-shrink: 0;
      }
    }
  }


  .price-card {
    margin-top: 24px;
    border-radius: 16px;
    background: #F5F6FA;
    padding: 24px 32px;

    .mb-16 {
      margin-bottom: 16px;
    }

    .price-label {
      font-family: PingFang SC;
      font-size: 26px;
      font-weight: normal;
      line-height: 40px;
      /* 文字色/黑色/重要字 90% */
      color: rgba(0, 0, 0, 0.9);

    }

    .price-value {
      font-family: PingFang SC;
      font-size: 24px;
      font-weight: 500;
      line-height: 40px;
      text-align: right;
      font-variation-settings: "opsz" auto;
      /* 文字色/黑色/重要字 90% */
      color: rgba(0, 0, 0, 0.9);
    }

    .price-notice-label {

      font-family: PingFang SC;
      font-size: 20px;
      font-weight: normal;
      line-height: 36px;

      font-variation-settings: "opsz" auto;
      /* 文字色/黑色/辅助文字 40% */
      color: rgba(0, 0, 0, 0.4);

    }

    .price-notice-value {
      font-family: PingFang SC;
      font-size: 20px;
      font-weight: normal;
      line-height: 36px;
      text-align: right;
      font-variation-settings: "opsz" auto;
      /* 文字色/黑色/辅助文字 40% */
      color: rgba(0, 0, 0, 0.4);
    }
  }

  .total {
    margin-top: 32px;
    justify-content: flex-end;

    .total-text {
      font-family: PingFang SC;
      font-size: 24px;
      font-weight: normal;
      line-height: 40px;
      font-variation-settings: "opsz" auto;
      color: rgba(0, 0, 0, 0.9);
    }

    .num {
      font-family: Figtree;
      font-size: 48px;
      font-weight: 600;
      line-height: 40px;
      font-variation-settings: "opsz" auto;
      color: rgba(0, 0, 0, 0.9);
      margin: 0 4px;
    }

    .unit {
      font-family: PingFang SC;
      font-size: 24px;
      font-weight: normal;
      line-height: 40px;
      font-variation-settings: "opsz" auto;
      color: rgba(0, 0, 0, 0.9);
    }
  }

  .faq {
    border-radius: 24px;
    background: #FFFFFF;
    padding: 32px;
    margin-top: 24px;

    .title {
      font-family: PingFang SC;
      font-size: 32px;
      font-weight: 500;
      line-height: 48px;
      color: rgba(0, 0, 0, 0.9);

    }

    .faq-item {
      margin-top: 38px;

      .question {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
        cursor: pointer;

        .question-text {
          font-family: PingFang SC;
          font-size: 28px;
          font-weight: normal;
          line-height: 40px;
          font-variation-settings: "opsz" auto;
          /* 文字色/黑色/重要字 90% */
          color: rgba(0, 0, 0, 0.9);
        }

        .arrow-icon {
          width: 20px;
          height: 13.6px;
          transition: transform 0.3s ease;

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

      .answer {
        font-family: PingFang SC;
        font-size: 24px;
        font-weight: normal;
        line-height: 36px;
        color: rgba(0, 0, 0, 0.6);
      }
    }

    .expand-more {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 24px;
      cursor: pointer;

      .expand-more-text {
        font-family: PingFang SC;
        font-size: 24px;
        font-weight: normal;
        line-height: 36px;
        color: rgba(0, 0, 0, 0.4);
      }

      .arrow-icon {
        width: 20px;
        height: 13.6px;
        margin-left: 14px;
        transition: transform 0.3s ease;

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

  .complaint {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;

    .complaint-text {
      padding: 24px 0px;
      box-sizing: border-box;
      border: 1.4px solid #000000;
      width: 548px;
      height: 92px;
      border-radius: 16px;
      font-family: PingFang SC;
      font-size: 28px;
      font-weight: normal;
      line-height: 44px;
      letter-spacing: 0px;
      color: rgba(0, 0, 0, 0.9);
      text-align: center;
    }

  }

}

.relative {
  position: relative;
}

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

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

.color-red {
  color: #FF4D4F !important;
}

 src/robotaxi/pages/expense-description/index.tsx

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

// FAQ数据
const faqData = [
  {
    id: 1,
    question: '为什么我的优惠券用不了？',
    answer: '惊喜特价不可叠加使用优惠券'
  },
  {
    id: 2,
    question: '如何申请发票？',
    answer: '您可以在订单详情页面点击"申请发票"按钮，填写相关信息后提交申请'
  },
  {
    id: 3,
    question: '取消订单会扣费吗？',
    answer: '根据取消时间不同，可能会产生不同的取消费用，具体请查看取消规则'
  },
  {
    id: 4,
    question: '如何联系客服？',
    answer: '您可以在APP首页点击"客服"按钮，或拨打客服热线400-xxx-xxxx'
  },
  {
    id: 5,
    question: '支付失败怎么办？',
    answer: '请检查您的支付方式是否正常，或尝试更换其他支付方式'
  },
  {
    id: 6,
    question: '行程中可以修改目的地吗？',
    answer: '可以的，您可以在行程中联系客服或在APP中修改目的地'
  },
  {
    id: 7,
    question: '如何评价订单？',
    answer: '订单完成后，您可以在订单详情页面进行评价'
  }
];

export default function OrderPage() {
  const [showAllFaq, setShowAllFaq] = useState(false); // 是否显示全部FAQ
  const [expandedItems, setExpandedItems] = useState<number[]>([]); // 展开的FAQ项ID列表

  // 切换FAQ项的展开/收起状态
  const toggleFaqItem = (id: number) => {
    if (expandedItems.includes(id)) {
      setExpandedItems(expandedItems.filter(itemId => itemId !== id));
    } else {
      setExpandedItems([...expandedItems, id]);
    }
  };

  // 切换显示更多/收起
  const toggleShowAll = () => {
    setShowAllFaq(!showAllFaq);
  };

  // 根据showAllFaq状态决定显示的FAQ数量
  const displayedFaq = showAllFaq ? faqData : faqData.slice(0, 5);

  return (
    <View className='expense-detail-page'>
      {/* 账单信息 */}
      <View className='order-info'>
        <View className='flex-between-card'>
          <View className='title'>账单信息</View>
          <View className='look-rule'>
            <Text className='look-rule-txt'>查看计价规则</Text>
            <Image className='arrow-icon' src={Subtract}></Image>
          </View>
        </View>
        <View className='price-card'>
          <View className='flex-between-card mb-16'>
            <View className='price-label'>订单总额</View>
            <View className='price-value'>36.6元</View>
          </View>
          <View className='flex-between-card'>
            <View className='price-label'>起步价</View>
            <View className='price-value'>12.5元</View>
          </View>
          <View className='flex-between-card mb-16'>
            <View className='price-notice-label'>17:00-19:00（3.2公里，12.0分钟）</View>
            <View className='price-notice-value'>12.5元</View>
          </View>
          <View className='flex-between-card'>
            <View className='price-label'>里程费</View>
            <View className='price-value'>8.6元</View>
          </View>
          <View className='flex-between-card mb-16'>
            <View className='price-notice-label'>普通时段（7.2公里）</View>
            <View className='price-notice-value'>8.6元</View>
          </View>
          <View className='flex-between-card'>
            <View className='price-label'>时长费（20分钟）</View>
            <View className='price-value'>8.6元</View>
          </View>
          <View className='flex-between-card mb-16'>
            <View className='price-notice-label'>普通时段（20分钟）</View>
            <View className='price-notice-value'>4.0元</View>
          </View>
          <View className='flex-between-card'>
            <View className='price-label'>优惠券</View>
            <View className='price-value color-red'>-2.3元</View>
          </View>
        </View>
        {/* 总价格 */}
        <View className='flex-card total'>
          <Text className='total-text'>总费用</Text>
          <Text className='num'>34.0</Text>
          <Text className='unit'>元</Text>
        </View>
      </View>
      {/* 常见问题 */}
      <View className='faq'>
        <View className='title'>常见问题</View>

        {displayedFaq.map((item) => (
          <View className='faq-item' key={item.id}>
            <View className='question' onClick={() => toggleFaqItem(item.id)}>
              <Text className='question-text'>{item.question}</Text>
              <Image
                className={`arrow-icon ${expandedItems.includes(item.id) ? 'rotated' : ''}`}
                src={more}
              ></Image>
            </View>
            {expandedItems.includes(item.id) && (
              <View className='answer'>{item.answer}</View>
            )}
          </View>
        ))}

        {/* 展开更多/收起 */}
        {faqData.length > 5 && (
          <View className='expand-more' onClick={toggleShowAll}>
            <Text className='expand-more-text'>{showAllFaq ? '收起' : '展开更多'}</Text>
            <Image
              className={`arrow-icon ${showAllFaq ? 'rotated' : ''}`}
              src={more}
            ></Image>
          </View>
        )}
      </View>
      {/* 去投诉 */}
      <View className='complaint'>
        <Text className='complaint-text'>不认可车费，去投诉</Text>
      </View>



    </View>
  )
}

 src/robotaxi/pages/expense-detail/index.config.ts

New file
@@ -0,0 +1,3 @@
export default {
  navigationBarTitleText: '费用详细',
};

 src/robotaxi/pages/expense-detail/index.less

New file
@@ -0,0 +1,206 @@
.expense-detail-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 38px 32px;

  .car-code {
    font-family: Figtree;
    font-size: 36px;
    font-weight: 600;
    line-height: 48px;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    color: rgba(0, 0, 0, 0.9);
    margin-bottom: 20px;
  }

  .start {
    margin-bottom: 10px;
  }

  .start-icon {
    width: 8px;
    height: 8px;
    opacity: 1;
    background: #768AFF;
    z-index: 0;
    border-radius: 50%;
    margin-right: 18px;
    flex-shrink: 0;
  }

  .start-address {
    font-family: PingFang SC;
    font-size: 28px;
    font-weight: normal;
    line-height: 44px;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    color: rgba(0, 0, 0, 0.9);
  }

  .line {
    position: absolute;
    top: 34px;
    left: 2px;
    width: 0px;
    height: 29px;
    opacity: 1;
    border: 2px dashed rgba(0, 0, 0, 0.1);

  }

  .end-icon {
    width: 8px;
    height: 8px;
    opacity: 1;
    background: #65C3FC;
    z-index: 0;
    border-radius: 50%;
    margin-right: 18px;
    flex-shrink: 0;
  }

  .price-card {
    border-radius: 24px;
    background: #F5F6FA;
    margin-top: 48px;
    padding: 32px;

    .mb-16 {
      margin-bottom: 16px;
    }

    .price-label {
      font-family: PingFang SC;
      font-size: 26px;
      font-weight: normal;
      line-height: 40px;
      /* 文字色/黑色/重要字 90% */
      color: rgba(0, 0, 0, 0.9);

    }

    .price-value {
      font-family: PingFang SC;
      font-size: 24px;
      font-weight: 500;
      line-height: 40px;
      text-align: right;
      font-variation-settings: "opsz" auto;
      /* 文字色/黑色/重要字 90% */
      color: rgba(0, 0, 0, 0.9);
    }

    .price-notice-label {

      font-family: PingFang SC;
      font-size: 20px;
      font-weight: normal;
      line-height: 36px;

      font-variation-settings: "opsz" auto;
      /* 文字色/黑色/辅助文字 40% */
      color: rgba(0, 0, 0, 0.4);

    }

    .price-notice-value {
      font-family: PingFang SC;
      font-size: 20px;
      font-weight: normal;
      line-height: 36px;
      text-align: right;
      font-variation-settings: "opsz" auto;
      /* 文字色/黑色/辅助文字 40% */
      color: rgba(0, 0, 0, 0.4);
    }
  }

  .total {
    margin-top: 24px;
    justify-content: flex-end;

    .total-text {
      font-family: PingFang SC;
      font-size: 24px;
      font-weight: normal;
      line-height: 40px;
      font-variation-settings: "opsz" auto;
      color: rgba(0, 0, 0, 0.9);
    }

    .num {
      font-family: Figtree;
      font-size: 48px;
      font-weight: 600;
      line-height: 40px;
      font-variation-settings: "opsz" auto;
      color: rgba(0, 0, 0, 0.9);
      margin: 0 4px;
    }

    .unit {
      font-family: PingFang SC;
      font-size: 24px;
      font-weight: normal;
      line-height: 40px;
      font-variation-settings: "opsz" auto;
      color: rgba(0, 0, 0, 0.9);
    }
  }

  .notice-txt {
    margin-top: 40px;
    font-family: PingFang SC;
    font-size: 24px;
    font-weight: normal;
    line-height: 40px;
    font-variation-settings: "opsz" auto;
    color: #8E8E8E;
  }

  .look-rule {
    margin-top: 256px;
    display: flex;
    align-items: center;
    justify-content: center;

    .look-rule-txt {
      font-family: PingFang SC;
      font-size: 24px;
      font-weight: normal;
      line-height: 40px;
      color: rgba(0, 0, 0, 0.9);
    }

    .arrow-icon {
      width: 13.6px;
      height: 20px;
      margin-left: 18px;
      flex-shrink: 0;

    }
  }

}

.relative {
  position: relative;
}

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

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

.color-red {
  color: #FF4D4F !important;
}

 src/robotaxi/pages/expense-detail/index.tsx

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

export default function OrderPage() {

  return (
    <View className='expense-detail-page'>
      <View className='car-code'>粤PXV7029</View>
      <View className='relative'>
        <View className='flex-card start'>
          <View className='start-icon'></View>
          <View className='start-address'>广州岭南职业技术学院-南1门(公交站）</View>
        </View>
        <View className='line'></View>
        <View className='flex-card'>
          <View className='end-icon'></View>
          <View className='start-address'>小鹏科技园2号楼</View>
        </View>
      </View>
      {/* 订单价格 */}
      <View className='price-card'>
        <View className='flex-between-card mb-16'>
          <View className='price-label'>订单总额</View>
          <View className='price-value'>36.6元</View>
        </View>
        <View className='flex-between-card'>
          <View className='price-label'>起步价</View>
          <View className='price-value'>12.5元</View>
        </View>
        <View className='flex-between-card mb-16'>
          <View className='price-notice-label'>17:00-19:00（3.2公里，12.0分钟）</View>
          <View className='price-notice-value'>12.5元</View>
        </View>
        <View className='flex-between-card'>
          <View className='price-label'>里程费</View>
          <View className='price-value'>8.6元</View>
        </View>
        <View className='flex-between-card mb-16'>
          <View className='price-notice-label'>普通时段（7.2公里）</View>
          <View className='price-notice-value'>8.6元</View>
        </View>
        <View className='flex-between-card'>
          <View className='price-label'>时长费（20分钟）</View>
          <View className='price-value'>8.6元</View>
        </View>
        <View className='flex-between-card mb-16'>
          <View className='price-notice-label'>普通时段（20分钟）</View>
          <View className='price-notice-value'>4.0元</View>
        </View>
        <View className='flex-between-card'>
          <View className='price-label'>优惠券</View>
          <View className='price-value color-red'>-2.3元</View>
        </View>
      </View>
      {/* 总价格 */}
      <View className='flex-card total'>
        <Text className='total-text'>总费用</Text>
        <Text className='num'>34.0</Text>
        <Text className='unit'>元</Text>
      </View>
      {/* 质疑事项 */}
      <Text className='notice-txt'>
      当前预估价是基于实时交通情况、预估里程和时长等因素得出；若中途发生修改目的地、路线以及加途径点、里程时长偏差较大等场景，订单结算金额将会重新计算。高速路桥费、停车费、超时等待费、远程调度费、跨域费等，将按行驶过程中实际产生的费用额外收取。
      </Text>
      {/* 查看计价规则 */}
      <View className='look-rule'>
        <Text className='look-rule-txt'>查看计价规则</Text>
        <Image className='arrow-icon' src={Subtract}></Image>
      </View>


    </View>
  )
}