ud

src/api/pay.ts

@@ -9,6 +9,7 @@ export type GoodsItem = {
   price: string
   sign_value: string
   weixinMpOriId: string
+  recommend?: boolean
 }
 
 export type OrderPayload = Record<string, unknown> & {

src/index.css

@@ -211,6 +211,42 @@ p {
         background: #FFFFFF;
       }
 
+      .plan-recommend-badge {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 34px;
+        height: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: #FF2D2D;
+        border-radius: 0px 8px 0px 8px;
+        pointer-events: none;
+      }
+
+      .plan-recommend-badge span {
+        width: 24px;
+        height: 16px;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 400;
+        font-size: 12px;
+        color: #FFFFFF;
+        line-height: 16px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+      }
+
+      .plan-selected-icon {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        width: 20px;
+        height: 20px;
+        pointer-events: none;
+      }
+
       .plan-price-symbol {
         font-size: 10px;
         transition: color 320ms ease;

src/pages/PayPage.tsx

@@ -69,6 +69,7 @@ function PayPage() {
       try {
         const { data } = await getGoods()
         const nextGoodsList = Array.isArray(data) ? data : []
+        const recommendIndex = nextGoodsList.findIndex((goods) => goods.recommend)
         const checkedIndex = nextGoodsList.findIndex((goods) => goods.checked)
 
         if (!isMounted) {
@@ -76,7 +77,7 @@ function PayPage() {
         }
 
         setGoodsList(nextGoodsList)
-        setCurrentIndex(checkedIndex >= 0 ? checkedIndex : 0)
+        setCurrentIndex(recommendIndex >= 0 ? recommendIndex : checkedIndex >= 0 ? checkedIndex : 0)
       } catch {
         if (isMounted) {
           setGoodsList([])
@@ -429,6 +430,11 @@ function Plan({
               onClick={() => handlePlanClick(index)}
               type="button"
             >
+              {plan.recommend && (
+                <span className="plan-recommend-badge">
+                  <span>推荐</span>
+                </span>
+              )}
               <div className="plan-name">{plan.goods_name}</div>
               <div className="plan-price">
                 <span className="plan-price-symbol">￥</span>
@@ -438,6 +444,9 @@ function Plan({
                 <span>￥</span>
                 {plan.origin_price}
               </div>
+              {index === currentIndex && (
+                <img className="plan-selected-icon" src="/images/pay/icon-check-footer.png" alt="" />
+              )}
             </button>
           ))}
         </div>