refactor(components): 将优惠券选择弹窗组件提取到公共组件目录

zjk

2026-04-24 9bf5e91bdd92f523fc77735f45b19a65cb8056fc

refactor(components): 将优惠券选择弹窗组件提取到公共组件目录

重构优惠券页面，将原本在页面目录下的 CouponSelectPopup 组件移动到公共组件目录，便于其他页面复用。同时简化了组件调用时的 onSelect 回调函数。

 src/robotaxi/components/coupon-select-popup/index.less

File was renamed from src/robotaxi/pages/coupon/components/coupon-select-popup/index.less
@@ -224,7 +224,7 @@
      width: 100%;
      min-height: 184px;
      border-radius: 24px;
      background: url("../../../../assets/coupon-bg.png") center center / 100% 100%
      background: url("../../assets/coupon-bg.png") center center / 100% 100%
        no-repeat;
      padding: 28px 24px 28px 28px;
      margin-bottom: 24px;
@@ -340,5 +340,29 @@
          height: 40px;
        }
      }

      .receive {
        flex-shrink: 0;
        width: 128px;
        height: 56px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 110px;
        background: #f58900;
        font-size: 24px;
        font-weight: 500;
        line-height: 56px;
        text-align: center;
        color: #ffffff;
      }

      .status-img {
        width: 132px;
        height: 132px;
        position: absolute;
        right: 16px;
        bottom: 16px;
      }
    }
}

 src/robotaxi/components/coupon-select-popup/index.tsx

File was renamed from src/robotaxi/pages/coupon/components/coupon-select-popup/index.tsx
@@ -2,12 +2,12 @@
import { View, Text, Image, ScrollView, RichText } from '@tarojs/components';
import { useEffect, useState } from 'react';
import './index.less';
import closeIcon from '../../../../assets/close-icon.png';
import icon from "../../../../assets/coupon-arrow.png";
import couponSelectIcon from '../../../../assets/coupon-select.png';
import couponSelectedIcon from '../../../../assets/coupon-selected.png';
import couponArrowRight from '../../../../assets/coupon-arrow-right.png';
import { getCouponList, getCouponDetail, CouponDetail } from '../../../../api/coupon';
import closeIcon from "../../assets/close-icon.png";
import icon from "../../assets/coupon-arrow.png";
import couponSelectIcon from "../../assets/coupon-select.png";
import couponSelectedIcon from "../../assets/coupon-selected.png";
import couponArrowRight from "../../assets/coupon-arrow-right.png";
import { getCouponList, getCouponDetail, CouponDetail } from '../../api/coupon';

type Props = {
  show: boolean;
@@ -23,11 +23,7 @@
  const [canScroll, setCanScroll] = useState(false);
  const [thumbHeight, setThumbHeight] = useState(0);
  const [thumbTop, setThumbTop] = useState(0);
  const [containerHeight, setContainerHeight] = useState(0);
  const [showScrollbar, setShowScrollbar] = useState(false);
  const [current, setCurrent] = useState(1);
  const [hasNextPage, setHasNextPage] = useState(false);
  const [loading, setLoading] = useState(false);
  const [couponCount, setCouponCount] = useState(0);
  const [activeCouponId, setActiveCouponId] = useState('');
  const [detailVisible, setDetailVisible] = useState(false);
@@ -40,36 +36,19 @@
        const res = await getCouponList({ pageNum: page, pageSize: 10, status: 1 });
        const newList = res.list || [];
        setList(newList);
        setCouponCount(res.total || 0);
        // 如果返回数量少于 pageSize，说明没有更多
      } catch (e) {
        console.error(e);
      }
    };

  const handleScrollToLower = () => {
    if (hasNextPage && !loading) {
      getList(current + 1);
    }
  };

  const onScroll = (e) => {
    const { scrollHeight, scrollTop } = e.detail;
    if (containerHeight > 0 && scrollHeight > containerHeight) {
      const newThumbTop = (scrollTop / scrollHeight) * containerHeight;
      setThumbTop(newThumbTop);
    }
  };

  const gotoMyCoupon = () => {
    Taro.navigateTo({ url: '/robotaxi/pages/coupon/index' });
  };

  const getCouponKey = (item: any) => {
    return item?.operationCouponId || item?.couponId || '';
  };

  const handleSelectCoupon = (item: any) => {
    const couponKey = getCouponKey(item);
    const couponKey = item?.operationCouponId
    setActiveCouponId(couponKey);
    onSelect(item);
  };
@@ -144,7 +123,6 @@
            const wrapperHeight = res[0].height;
            const contentHeight = res[1].height;
            const isOverflow = contentHeight > wrapperHeight;
            setContainerHeight(wrapperHeight);
            setCanScroll(isOverflow);
            if (isOverflow) {
              setShowScrollbar(true);
@@ -211,12 +189,7 @@
          <ScrollView
            scrollY={canScroll}
            className='coupon-list'
            enhanced
            lowerThreshold={30}
            upperThreshold={30}
            showScrollbar={false}
            onScroll={onScroll}
            onScrollToLower={handleScrollToLower}
          >
            <View className='coupon-list-inner'>
              {list.map((item, index) => (
@@ -253,12 +226,25 @@
                          <Image className='more-img' src={icon}></Image>
                        </View>
                      </View>
                      <View className='select-box'>
                      {item.status === 1 && <View className='select-box'>
                        <Image
                          className='select-img'
                          src={activeCouponId === getCouponKey(item) ? couponSelectedIcon : couponSelectIcon}
                          src={activeCouponId === item.operationCouponId ? couponSelectedIcon : couponSelectIcon}
                        ></Image>
                      </View>
                      </View>}
                      {/* 状态 1-未使用 2-已使用 3-已过期 0待领取 */}
                      {item.status === 2 && (
                        <Image
                          className='status-img'
                          src={require("../../assets/coupon-used.png")}
                        />
                      ) }
                      { item.status === 3 && (
                        <Image
                          className='status-img'
                          src={require("../../assets/coupon-lost-efficacy.png")}
                        />
                      )}
                    </View>
                  </View>
                </View>

 src/robotaxi/pages/coupon/index.tsx

@@ -11,7 +11,7 @@
  CouponItem,
  CouponDetail
} from "../../../robotaxi/api/coupon";
import CouponSelectPopup from "./components/coupon-select-popup";
import CouponSelectPopup from "../../components/coupon-select-popup";

export default function CouponPage() {
  const [couponStatus] = useState([
@@ -282,13 +282,7 @@
          </View>
        </View>
      )}
      <CouponSelectPopup
        show
        onClose={() => {}}
        onSelect={(item) => {
          console.log(item);
        }}
      />
      <CouponSelectPopup show onClose={() => {}} onSelect={() => {}} />
    </View>
  );
}