优惠券页面

董国庆

2026-02-03 d66ac0140d29bed9eba75f688207c79176e71418

优惠券页面

 src/robotaxi/assets/close.png

 src/robotaxi/pages/coupon/index.less

@@ -44,8 +44,11 @@
    &::-webkit-scrollbar {
      display: none;
    }
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */

    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */

    .coupon-item {
      width: 686px;
@@ -58,9 +61,10 @@
      display: flex;
      align-items: center;
      justify-content: space-between;
      .coupon-price{

      .coupon-price {
        display: flex;
      align-items: center;
        align-items: center;
      }

      .price {
@@ -156,4 +160,90 @@
      }
    }
  }

  .privacy-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;

    .privacy-mask {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
    }

    .privacy-content {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: #ffffff;
      border-radius: 16px 16px 0 0;
      padding: 48px 32px 112px 40px;
      transform: translateY(100%);

      .privacy-header {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-bottom: 66px;

        .title {
          width: 540px;
          height: 48px;
          font-family: PingFang SC;
          font-size: 32px;
          font-weight: bold;
          line-height: 48px;
          color: rgba(0, 0, 0, 0.9);
          text-align: center;
          margin-right: 32px;
        }

        .close {
          width: 40px;
          height: 40px;
        }
      }

      .remark-card {
        display: flex;
        margin-bottom: 28px;

        .remark-label {
          /* 自动布局子元素 */
          width: 112px;
          height: 44px;
          z-index: 0;
          font-family: PingFang SC;
          font-size: 28px;
          font-weight: normal;
          line-height: 44px;
          letter-spacing: normal;
          /* 文字色/黑色/辅助文字 40% */
          color: rgba(0, 0, 0, 0.4);
          margin-right: 24px;
          flex-shrink: 0;
        }

        .remark-value {
          font-family: PingFang SC;
          font-size: 28px;
          font-weight: normal;
          line-height: 44px;
          letter-spacing: normal;
          /* 文字色/黑色/重要字 90% */
          color: rgba(0, 0, 0, 0.9);
        }
      }


    }
  }
}

 src/robotaxi/pages/coupon/index.tsx

@@ -1,56 +1,61 @@
import Taro from '@tarojs/taro';
import { Component } from 'react';
import { View, Text,Image } from '@tarojs/components';
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:[{
      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'
    }]
  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'
    }],
    animationData: null,
    visible: false
  }


  componentDidShow() {
    this.$app.xpReportShow();
@@ -70,25 +75,47 @@
  componentDidHide() {
    this.$app.xpReportHide();
  }
  changeStatus(value){
    console.log('111111111',value)
  changeStatus(value) {
    console.log('111111111', value)
    this.setState({
      activeStatus:value
      activeStatus: value
    })
  }
  openPopup(){
    const animation = Taro.createAnimation({
      duration: 300,
      timingFunction: 'ease-out'
    });
    animation.translateY(0).step();
    this.setState({
      animationData: animation.export(),
      visible:true
    })
  }
  closePopup(){
    const animation = Taro.createAnimation({
      duration: 300,
      timingFunction: 'ease-in'
    });
    animation.translateY(500).step();
    this.setState({
      animationData: animation.export(),
      visible:false
    })
  }

  render() {
const {couponStatus,activeStatus,couponList} = this.state;
    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>
          {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}>
          {couponList.map((item, index) => {
            return <View className='coupon-item' key={item.id || index}>

              <View className='coupon-price'>
                <Text className='price'>{item.price}</Text>
@@ -97,7 +124,7 @@
              <View className='coupon-info'>
                <Text className='name'>{item.name}</Text>
                <Text className='time'>{item.time}到期</Text>
                <View className='more'>
                <View className='more' onClick={()=>this.openPopup(item)}>
                  <Text className='more-detail'>查看详情</Text>
                  <Image className='more-img' src={icon}></Image>
                </View>
@@ -106,6 +133,39 @@
            </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>
        }

      </View>
    )}
    )
  }
}