Преглед изворни кода

feat(首页): 新增车抵贷入口

await пре 3 месеци
родитељ
комит
dc821e5f59

+ 31 - 0
src/assets/v1.5.0/badge-car.svg

@@ -0,0 +1,31 @@
+<svg width="73" height="18" viewBox="0 0 73 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#232;&#189;&#166;&#228;&#184;&#187;&#228;&#184;&#147;&#228;&#186;&#171;" clip-path="url(#clip0_26396_9133)">
+<g id="Group 176812">
+<g id="Rectangle 1916">
+<path d="M0.312475 0.703314C0.165523 0.37267 0.407552 0.000244141 0.769381 0.000244141H73V18.0002H0.769377C0.407548 18.0002 0.165522 17.6278 0.312475 17.2972L3.81949 9.40638C3.93441 9.14782 3.93441 8.85267 3.81949 8.59411L0.312475 0.703314Z" fill="#D9D9D9"/>
+<path d="M0.312475 0.703314C0.165523 0.37267 0.407552 0.000244141 0.769381 0.000244141H73V18.0002H0.769377C0.407548 18.0002 0.165522 17.6278 0.312475 17.2972L3.81949 9.40638C3.93441 9.14782 3.93441 8.85267 3.81949 8.59411L0.312475 0.703314Z" fill="url(#paint0_linear_26396_9133)"/>
+</g>
+<g id="checkbox">
+<g id="Group 550">
+<g id="Subtract">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.9601 12.9602C16.9467 13.9736 15.5467 14.6004 14.0003 14.6004C12.4539 14.6004 11.0539 13.9736 10.0405 12.9602C9.02707 11.9468 8.40027 10.5468 8.40027 9.00039C8.40027 7.45401 9.02707 6.05401 10.0405 5.04059C11.0539 4.02719 12.4539 3.40039 14.0003 3.40039C15.5467 3.40039 16.9467 4.02719 17.9601 5.04059C18.1477 5.22825 18.3221 5.42917 18.4817 5.64182C16.1978 6.9303 14.5426 8.48194 13.7786 9.28233L11.8865 7.97689C11.85 7.95193 11.7966 7.95193 11.7601 7.97772L11.0358 8.48858C10.9924 8.51937 10.9884 8.57428 11.027 8.60923L14.2292 11.4739C14.2786 11.518 14.3655 11.5038 14.3932 11.4481C15.0105 10.1557 16.7021 7.82478 18.7775 6.07691C19.2994 6.92788 19.6003 7.929 19.6003 9.00039C19.6003 10.5468 18.9735 11.9468 17.9601 12.9602Z" fill="#00B4D0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.9601 12.9602C16.9467 13.9736 15.5467 14.6004 14.0003 14.6004C12.4539 14.6004 11.0539 13.9736 10.0405 12.9602C9.02707 11.9468 8.40027 10.5468 8.40027 9.00039C8.40027 7.45401 9.02707 6.05401 10.0405 5.04059C11.0539 4.02719 12.4539 3.40039 14.0003 3.40039C15.5467 3.40039 16.9467 4.02719 17.9601 5.04059C18.1477 5.22825 18.3221 5.42917 18.4817 5.64182C16.1978 6.9303 14.5426 8.48194 13.7786 9.28233L11.8865 7.97689C11.85 7.95193 11.7966 7.95193 11.7601 7.97772L11.0358 8.48858C10.9924 8.51937 10.9884 8.57428 11.027 8.60923L14.2292 11.4739C14.2786 11.518 14.3655 11.5038 14.3932 11.4481C15.0105 10.1557 16.7021 7.82478 18.7775 6.07691C19.2994 6.92788 19.6003 7.929 19.6003 9.00039C19.6003 10.5468 18.9735 11.9468 17.9601 12.9602Z" fill="white"/>
+</g>
+</g>
+</g>
+<g id="&#229;&#144;&#131;&#229;&#143;&#175;&#231;&#136;&#177;&#229;&#164;&#154;&#233;&#149;&#191;&#229;&#164;&#167;">
+<path d="M24.913 5.31124H27.454C27.652 4.86024 27.85 4.38724 28.037 3.90324L29.082 4.13424C28.917 4.55224 28.752 4.93724 28.587 5.31124H34.076V6.32324H28.092C27.652 7.15924 27.168 7.89624 26.651 8.55624H29.104V7.08224H30.171V8.55624H33.482V9.51324H30.171V10.9102H34.241V11.9222H30.171V14.1992H29.104V11.9222H24.77V10.9102H29.104V9.51324H25.562L25.32 8.55624C25.903 7.96224 26.442 7.22524 26.937 6.32324H24.913V5.31124ZM39.972 6.78524H35.979V5.76224H39.972C39.796 5.22324 39.587 4.70624 39.345 4.21124L40.357 3.93624C40.632 4.59624 40.841 5.20124 40.995 5.75124L40.962 5.76224H45.032V6.78524H41.028V9.07324H44.504V10.0522H41.028V12.7362H45.417V13.7592H35.594V12.7362H39.972V10.0522H36.507V9.07324H39.972V6.78524ZM46.528 7.23624H49.619C49.707 6.86224 49.806 6.49924 49.894 6.12524H47.276V5.14624H50.114C50.202 4.72824 50.279 4.29924 50.367 3.88124L51.445 3.96924C51.368 4.37624 51.291 4.77224 51.225 5.14624H55.823V6.12524H51.016C50.928 6.51024 50.84 6.88424 50.752 7.23624H56.472V8.23724H50.477C50.345 8.67724 50.224 9.08424 50.092 9.46924H55.185V10.3712C54.679 11.1192 53.898 11.8672 52.842 12.6262C53.436 12.8462 54.008 13.0772 54.558 13.3192L53.986 14.2212C52.347 13.4512 50.664 12.8352 48.948 12.3952L49.498 11.5812C50.268 11.7792 51.005 11.9882 51.709 12.2302C52.644 11.6362 53.381 11.0422 53.92 10.4262H48.596C48.86 9.72224 49.102 8.99624 49.333 8.23724H46.528V7.23624ZM59.101 6.26824H65.91V8.65524H59.101V6.26824ZM64.898 7.76424V7.14824H60.113V7.76424H64.898ZM62.522 3.95824C62.676 4.21124 62.819 4.49724 62.962 4.80524H67.307V5.78424H57.693V4.80524H61.774C61.631 4.56324 61.477 4.34324 61.312 4.14524L62.522 3.95824ZM57.451 11.2292H62.181V10.9102L64.26 10.0742H58.518V9.15024H66.35V9.88724C65.448 10.2832 64.392 10.7122 63.204 11.1742V11.2292H67.549V12.1752H63.204V12.9892C63.204 13.7482 62.83 14.1332 62.093 14.1332H60.564L60.289 13.1872C60.872 13.2312 61.334 13.2642 61.675 13.2642C62.005 13.2642 62.181 13.0662 62.181 12.6922V12.1752H57.451V11.2292Z" fill="#00B4D0"/>
+<path d="M24.913 5.31124H27.454C27.652 4.86024 27.85 4.38724 28.037 3.90324L29.082 4.13424C28.917 4.55224 28.752 4.93724 28.587 5.31124H34.076V6.32324H28.092C27.652 7.15924 27.168 7.89624 26.651 8.55624H29.104V7.08224H30.171V8.55624H33.482V9.51324H30.171V10.9102H34.241V11.9222H30.171V14.1992H29.104V11.9222H24.77V10.9102H29.104V9.51324H25.562L25.32 8.55624C25.903 7.96224 26.442 7.22524 26.937 6.32324H24.913V5.31124ZM39.972 6.78524H35.979V5.76224H39.972C39.796 5.22324 39.587 4.70624 39.345 4.21124L40.357 3.93624C40.632 4.59624 40.841 5.20124 40.995 5.75124L40.962 5.76224H45.032V6.78524H41.028V9.07324H44.504V10.0522H41.028V12.7362H45.417V13.7592H35.594V12.7362H39.972V10.0522H36.507V9.07324H39.972V6.78524ZM46.528 7.23624H49.619C49.707 6.86224 49.806 6.49924 49.894 6.12524H47.276V5.14624H50.114C50.202 4.72824 50.279 4.29924 50.367 3.88124L51.445 3.96924C51.368 4.37624 51.291 4.77224 51.225 5.14624H55.823V6.12524H51.016C50.928 6.51024 50.84 6.88424 50.752 7.23624H56.472V8.23724H50.477C50.345 8.67724 50.224 9.08424 50.092 9.46924H55.185V10.3712C54.679 11.1192 53.898 11.8672 52.842 12.6262C53.436 12.8462 54.008 13.0772 54.558 13.3192L53.986 14.2212C52.347 13.4512 50.664 12.8352 48.948 12.3952L49.498 11.5812C50.268 11.7792 51.005 11.9882 51.709 12.2302C52.644 11.6362 53.381 11.0422 53.92 10.4262H48.596C48.86 9.72224 49.102 8.99624 49.333 8.23724H46.528V7.23624ZM59.101 6.26824H65.91V8.65524H59.101V6.26824ZM64.898 7.76424V7.14824H60.113V7.76424H64.898ZM62.522 3.95824C62.676 4.21124 62.819 4.49724 62.962 4.80524H67.307V5.78424H57.693V4.80524H61.774C61.631 4.56324 61.477 4.34324 61.312 4.14524L62.522 3.95824ZM57.451 11.2292H62.181V10.9102L64.26 10.0742H58.518V9.15024H66.35V9.88724C65.448 10.2832 64.392 10.7122 63.204 11.1742V11.2292H67.549V12.1752H63.204V12.9892C63.204 13.7482 62.83 14.1332 62.093 14.1332H60.564L60.289 13.1872C60.872 13.2312 61.334 13.2642 61.675 13.2642C62.005 13.2642 62.181 13.0662 62.181 12.6922V12.1752H57.451V11.2292Z" fill="white"/>
+</g>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_26396_9133" x1="-8" y1="0.000244413" x2="46.1862" y2="48.1658" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF3D00"/>
+<stop offset="1" stop-color="#FF8A00"/>
+</linearGradient>
+<clipPath id="clip0_26396_9133">
+<rect width="73" height="18" fill="white" transform="translate(0 0.000244141)"/>
+</clipPath>
+</defs>
+</svg>

+ 11 - 0
src/assets/v1.5.0/car-loan-apply-button.svg

@@ -0,0 +1,11 @@
+<svg width="78" height="34" viewBox="0 0 78 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 624773">
+<g id="Frame 624770">
+<rect width="78" height="34" rx="17" fill="#006AFF"/>
+<path id="&#230;&#136;&#145;&#231;&#154;&#132;&#229;&#133;&#179;&#230;&#179;&#168;" d="M23.562 18.01C24.99 19.83 26.082 21.412 26.838 22.756L25.704 23.54C25.494 23.162 25.27 22.784 25.046 22.392C21.812 22.686 18.746 22.91 15.862 23.064L15.624 21.986C16.772 21.37 17.962 19.886 19.166 17.562H14.728V16.26H20.328V13.95H15.61V12.662H20.328V10.548H21.672V12.662H26.362V13.95H21.672V16.26H27.258V17.562H20.636C19.74 19.438 18.83 20.852 17.906 21.818C20.916 21.594 23.058 21.412 24.346 21.286C23.786 20.446 23.17 19.592 22.498 18.696L23.562 18.01ZM34.356 10.576H35.7V12.55H40.138V20.572H38.836V19.83H35.7V23.372H34.356V19.83H31.164V20.67H29.862V12.55H34.356V10.576ZM31.164 18.57H34.356V16.764H31.164V18.57ZM35.7 18.57H38.836V16.764H35.7V18.57ZM31.164 15.574H34.356V13.796H31.164V15.574ZM35.7 15.574H38.836V13.796H35.7V15.574ZM50.442 10.52H51.716V11.332H55.076V12.41H51.716V13.096H54.586V14.146H51.716V14.846H55.426V15.952H46.774V14.846H50.442V14.146H47.754V13.096H50.442V12.41H47.166V11.332H50.442V10.52ZM49.028 19.48V20.264H53.186V19.48H49.028ZM53.186 18.472V17.674H49.028V18.472H53.186ZM49.028 21.272V23.442H47.768V16.596H54.46V22.056C54.46 22.924 54.012 23.358 53.13 23.358H51.968L51.66 22.182L52.752 22.252C53.032 22.252 53.186 22.098 53.186 21.79V21.272H49.028ZM44.436 10.632C45.332 11.318 46.102 12.004 46.718 12.69L45.808 13.614C45.262 12.97 44.492 12.27 43.498 11.542L44.436 10.632ZM42.532 14.692H45.71V20.544C46.074 20.194 46.438 19.816 46.83 19.41L47.18 20.81C46.368 21.65 45.5 22.392 44.59 23.036L44.086 21.832C44.31 21.636 44.436 21.384 44.436 21.09V15.966H42.532V14.692Z" fill="white"/>
+<g id="&#228;&#184;&#139;&#230;&#139;&#137;">
+<path id="Polygon 1" d="M66.5071 16.4612C66.7753 16.6813 66.7753 17.0916 66.5071 17.3116L62.6992 20.4358C62.3403 20.7303 61.8004 20.4749 61.8004 20.0106L61.8004 13.7623C61.8004 13.2979 62.3403 13.0425 62.6992 13.3371L66.5071 16.4612Z" fill="white"/>
+</g>
+</g>
+</g>
+</svg>

Разлика између датотеке није приказан због своје велике величине
+ 4 - 0
src/assets/v1.5.0/icon-car-product.svg


+ 113 - 0
src/pages/home/index.scss

@@ -154,6 +154,119 @@
     }
   }
 
+  .index-car-loan-entrance {
+    width: 100%;
+    height: 284px;
+    background-color: #fff;
+    box-sizing: border-box;
+    border-radius: 16px;
+    margin: 32px 0 60px;
+    box-shadow: 0 12px 24px 0 rgba(5, 23, 77, 0.08);
+    .index-car-loan-entrance-header {
+      width: 100%;
+      height: 84px;
+      box-sizing: border-box;
+      border-bottom: 0.5px solid #f2f2f2;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .index-car-loan-entrance-title {
+        color: #14172f;
+        font-size: 32px;
+        font-weight: 600;
+        flex-shrink: 0;
+        height: 36px;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        padding-left: 24px;
+        border-left: 8px solid #1879fe;
+      }
+
+      .icon-car-badge {
+        aspect-ratio: auto;
+        width: 146px;
+        height: 36px;
+        flex-grow: 0;
+      }
+    }
+
+    .index-car-loan-entrance-body {
+      width: 100%;
+      height: 200px;
+      box-sizing: border-box;
+      padding: 28px 32px;
+      .index-car-loan-entrance-body-p1 {
+        display: flex;
+        align-items: center;
+        margin-bottom: 20px;
+        .icon-car-product {
+          width: 44px;
+          height: 44px;
+        }
+        .index-car-loan-entance-body-p1-product-name {
+          font-size: 26px;
+          font-weight: 600;
+          margin-left: 12px;
+        }
+
+        .product-tag-wrapper {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          margin-left: 24px;
+
+          .product-tag {
+            font-size: 20px;
+            font-weight: 500;
+            color: #1879fe;
+            background-color: #edf4ff;
+            padding: 2px 6px;
+            border-radius: 4px;
+          }
+        }
+      }
+      .index-car-loan-entrance-body-p2 {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .loan-information-item {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          font-size: 0;
+          .money-text {
+            font-size: 52px;
+            font-weight: bold;
+            line-height: 48px;
+            color: #ff4000;
+            .unit {
+              font-size: 36px;
+              margin-left: 2px;
+            }
+          }
+          .rate-text {
+            font-size: 36px;
+            line-height: 48px;
+            color: #14172f;
+            vertical-align: text-bottom;
+            font-weight: bold;
+          }
+          .sub {
+            font-size: 22px;
+            color: #818aa4;
+          }
+        }
+
+        .index-car-loan-apply-button {
+          width: 156px;
+          height: 68px;
+        }
+      }
+    }
+  }
+
   .index-platform-image {
     aspect-ratio: auto;
     margin: 0 auto;

+ 42 - 0
src/pages/home/index.tsx

@@ -96,6 +96,15 @@ const Home = () => {
     }
   };
 
+  const carLoanFlowHandler = async () => {
+    const DEFAULT_CHANNEL_CODE = 'hrqbxcx'
+
+    const url = 'https://m1.h5.hrshuke.cn/carv2/' + (channelCode || DEFAULT_CHANNEL_CODE)
+    RouteUtil.toWebViewPage({
+      url
+    })
+  }
+
   const imgBackStyle = useMemo(() => {
     return {
       ...ImageUtil.calculationHeight(332 / 170, (screenWidth - 64 + 16) / 2),
@@ -272,6 +281,39 @@ const Home = () => {
             {item(3, "信息保密", "严格保护申请人信息")}
           </Flex>
         </Flex> */}
+
+        <Padding padding={EdgeInsets.symmetric({ horizontal: 32 })}>
+          <View className="index-car-loan-entrance">
+            <View className="index-car-loan-entrance-header">
+              <View className="index-car-loan-entrance-title">车抵贷</View>
+              <Image src={require("../../assets/v1.5.0/badge-car.svg")} className="icon-car-badge"  />
+            </View>
+            <View className="index-car-loan-entrance-body">
+              <View className="index-car-loan-entrance-body-p1">
+                <Image className="icon-car-product" src={require('../../assets/v1.5.0/icon-car-product.svg')} />
+                <Text className="index-car-loan-entance-body-p1-product-name">车主贷</Text>
+
+                <View className="product-tag-wrapper">
+                  <View className="product-tag">不押车</View>
+                  <View className="product-tag">大额度</View>
+                  <View className="product-tag">流程快</View>
+                </View>
+              </View>
+              <View className="index-car-loan-entrance-body-p2">
+                <View className="loan-information-item">
+                  <Text className="money-text">3~100<Text className="unit">万</Text></Text>
+                  <Text className="sub">额度范围(元)</Text>
+                </View>
+                <View className="loan-information-item">
+                  <Text className="rate-text">7.20%</Text>
+                  <Text className="sub">参考年化利率</Text>
+                </View>
+                <Image src={require('../../assets/v1.5.0/car-loan-apply-button.svg')} className="index-car-loan-apply-button" onClick={carLoanFlowHandler} />
+              </View>
+            </View>
+          </View>
+        </Padding>
+
         <Padding padding={EdgeInsets.symmetric({ horizontal: 32 })}>
           <Image
             src={require("../../assets/new-edition/platform.png")}

+ 0 - 2
src/pages/user/components/LoginBox.tsx

@@ -21,8 +21,6 @@ import ctyptoUtil from "@/utils/crypto";
 const LoginBox = forwardRef((props, ref) => {
   const channelCode = StorageUtil.get(EStorage.channelCode) || "";
 
-  console.log("channelCode 这会儿是什么? ", channelCode)
-
   useImperativeHandle(ref, () => ({
     handleOpen() {
       handleOpen();

Неке датотеке нису приказане због велике количине промена