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

hejianhao

2026-02-03 ff3da75a6bc1df214aa88595ed50feb9ac66c049

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

 src/robotaxi/assets/Subtract.png

 src/robotaxi/pages/coupon/index.less

@@ -1,3 +1,159 @@
.demo {
  text-align: center;
.coupon-page {
  background: #F2F3F7;
  height: 100vh;
  padding: 32px;
  display: flex;
  flex-direction: column;


  .tab-card {
    padding: 0 4px 30px 4px;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .tab-item {
      width: 118px;
      height: 60px;
      z-index: 1;
      border-radius: 12px;
      background: #FFFFFF;
      padding: 10px 0;
      margin-right: 20px;

      font-family: PingFang SC;
      font-size: 24px;
      font-weight: normal;
      line-height: 40px;
      text-align: center;
      /* 文字色/黑色/重要字 90% */
      color: rgba(0, 0, 0, 0.9);
    }

    .active-status {
      box-sizing: border-box;
      border: 2px solid #000000;
    }
  }

  .coupon-card {
    flex: 1;
    overflow-y: auto;

    /* 隐藏滚动条 */
    &::-webkit-scrollbar {
      display: none;
    }
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */

    .coupon-item {
      width: 686px;
      height: 204px;
      z-index: 0;
      border-radius: 24px;
      background: #FFFFFF;
      padding: 32px;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .coupon-price{
        display: flex;
      align-items: center;
      }

      .price {
        font-family: Figtree;
        font-size: 68px;
        font-weight: 600;
        line-height: 72px;
        letter-spacing: normal;
        /* 功能色/提示色/提示色1 */
        color: #F58900;
      }

      .unit {
        font-family: PingFang SC;
        font-size: 26px;
        font-weight: 500;
        line-height: 72px;
        letter-spacing: normal;
        /* 功能色/提示色/提示色1 */
        color: #F58900;
        margin: 0px 48px 0px 2px;
      }

      .coupon-info {
        .name {
          font-family: PingFang SC;
          font-size: 32px;
          font-weight: 600;
          line-height: 48px;
          display: flex;
          align-items: center;
          letter-spacing: normal;
          color: rgba(0, 0, 0, 0.9);
        }

        .time {
          font-family: PingFang SC;
          font-size: 24px;
          font-weight: normal;
          line-height: 40px;
          display: flex;
          align-items: center;
          letter-spacing: normal;
          color: rgba(0, 0, 0, 0.9);
        }

        .more {
          display: flex;
          align-items: center;

          .more-detail {
            font-family: PingFang SC;
            font-size: 24px;
            font-weight: normal;
            line-height: 40px;
            display: flex;
            align-items: center;
            letter-spacing: normal;
            color: rgba(0, 0, 0, 0.4);
          }

          .more-img {
            width: 9px;
            height: 14px;
            z-index: 1;
            margin-left: 8px;
          }
        }
      }

      .receive {
        width: 104px;
        height: 56px;
        /* 自动布局 */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 25px 0px;
        border-radius: 110px;
        background: #F58900;
        margin-left: 44px;

        /* 辅助文字/辅助文字 常规 12 */
        font-family: PingFang SC;
        font-size: 24px;
        font-weight: normal;
        line-height: 56px;
        text-align: center;
        letter-spacing: normal;
        /* 文字色/白色/白色 100% */
        color: #FFFFFF;
      }
    }
  }
}

 src/robotaxi/pages/coupon/index.tsx

@@ -1,14 +1,56 @@
import Taro from '@tarojs/taro';
import { Component } from 'react';
import { View, Text } from '@tarojs/components';
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'

// @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'
    }]
  }

  componentDidShow() {
    this.$app.xpReportShow();
@@ -28,13 +70,42 @@
  componentDidHide() {
    this.$app.xpReportHide();
  }
  changeStatus(value){
    console.log('111111111',value)
    this.setState({
      activeStatus:value
    })
  }

  render() {

const {couponStatus,activeStatus,couponList} = this.state;
    return (
      <View className='demo'>
        <Text>Demo 页面</Text>
      <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>
          })}
        </View>
      </View>
    )
  }
    )}
}