H5/xp-robotaxi-miniprogram.git

parent: ffa33b2e | 补丁 | 提交 | ignore whitespace

董国庆

2026-02-06 42c13af3c7dc526548b2c7ecdb9e461b550df8b8

费用说明

1个文件已删除

4个文件已添加

1个文件已修改

	src/app.config.ts	3 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/robotaxi/assets/Subtract@2x.png	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/robotaxi/assets/more.png	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/robotaxi/pages/expense-description/index.config.ts	3 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/robotaxi/pages/expense-description/index.less	262 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/robotaxi/pages/expense-description/index.tsx	159 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 src/app.config.ts

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

 src/robotaxi/assets/Subtract@2x.png

Binary files differ

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

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

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

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

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