fix

src/components/Loan/LoanHotSwipe/index.vue

@@ -60,16 +60,19 @@ const fetchList = () => {
       skeLoading.value = false;
       ret.data.uuid.map((uuid) => {
         queryLoanProductInfo({ uuid }).then((ret) => {
-          const { rate_lower, max_amount, max_date, inst_name, product_name } =
+          const { rate_lower, max_amount, max_date, inst_name, product_name,product_status } =
             ret.data;
-          state.hotProductList.push({
-            rate_lower,
-            max_amount,
-            max_date,
-            inst_name,
-            product_name,
-            uuid,
-          });
+          if( product_status == 3){
+            state.hotProductList.push({
+              rate_lower,
+              max_amount,
+              max_date,
+              inst_name,
+              product_name,
+              uuid,
+              product_status
+            });
+          }
         });
       });
     }

src/components/Loan/LoanHotSwipe/type.ts

@@ -4,5 +4,6 @@ export interface hotProduct{
   max_date:number
   inst_name:string
   product_name:string,
-  uuid:string
+  uuid:string,
+  product_status:number
 }
\ No newline at end of file

src/views/LoanDetail/index.vue

@@ -202,28 +202,31 @@ export default defineComponent({
               <span class="word8">产品详情</span>
               <img class="label6" src={leftBg} />
             </div>
-            <div class="block10 flex">
-              <div class="group6 flex-col">
-                <div class="wrap3 flex-col">
-                  <span class="txt11">贷款机构</span>
-                  <span class="info15">产品名称</span>
-                  <span class="word20">贷款利率</span>
-                  <span class="txt12">贷款额度</span>
-                  <span class="txt13">贷款期限</span>
-                  <span class="txt14">担保方式</span>
+            <div class=" bg-white mx-5 rounded-2xl overflow-hidden mt-5">
+                <div class="flex justify-between text-sm text-gray-800 border-b border-product-detail-bg">
+                  <span class=" w-100 align-center bg-product-detail-bg py-4 inline-block text-center">贷款机构</span> 
+                  <span class=" w-235 py-4 pr-5 inline-block break-words text-right">{inst_name.value}</span>
                 </div>
-              </div>
-              <div class="section4 flex-row">
-                <div class="mod1 flex-col" />
-                <div class="mod2 flex-col w-full text-right">
-                  <span class="info8">{inst_name.value}</span>
-                  <span class="info9">{product_name.value}</span>
-                  <span class="info10">{rate_lower.value}%~{rate_upper.value}%</span>
-                  <span class="info11">{min_amount.value}万~{max_amount.value}万</span>
-                  <span class="word9">{min_date.value}个月~{max_date.value}个月</span>
-                  <span class="info12">{filterGuaranteeType(guarantee_type.value)}</span>
+                <div class="flex justify-between text-sm text-gray-800 border-b border-product-detail-bg">
+                  <span class="  w-100 align-center bg-product-detail-bg py-4 inline-block text-center">产品名称</span>
+                  <span class="  w-235 py-4 pr-5 inline-block break-words text-right">{product_name.value}</span>
                 </div>
-              </div>
+                <div class="flex text-sm text-gray-800 border-b border-product-detail-bg justify-between">
+                  <span class="  w-100 align-center bg-product-detail-bg py-4 inline-block text-center">贷款利率</span> 
+                  <span class="  w-235 py-4 pr-5 inline-block break-words text-right">{rate_lower.value}%~{rate_upper.value}%</span>
+                  </div>
+                <div class="flex text-sm text-gray-800 border-b border-product-detail-bg justify-between">
+                  <span class="  w-100 align-center bg-product-detail-bg py-4 inline-block text-center">贷款额度</span> 
+                  <span class="  w-235 py-4 pr-5 inline-block break-words text-right">{min_amount.value}万~{max_amount.value}万</span>
+                </div>
+                <div class="flex text-sm text-gray-800 border-b border-product-detail-bg justify-between">
+                  <span class="  w-100 align-center bg-product-detail-bg py-4 inline-block text-center">贷款期限</span> 
+                  <span class="  w-235 py-4 pr-5 inline-block break-words text-right">{min_date.value}个月~{max_date.value}个月</span>
+                </div>
+                <div class="flex text-sm text-gray-800 border-b border-product-detail-bg justify-between">
+                  <span class="  w-100 align-center bg-product-detail-bg py-4 inline-block text-center">担保方式</span> 
+                  <span class="  w-235 py-4 pr-5 inline-block break-words text-right">{filterGuaranteeType(guarantee_type.value)}</span>
+                </div>     
             </div>
             <LoanDetailDescribe class=" mt-5" products={products.value} features={features.value} apply_to={apply_to.value} apply_cond={apply_cond.value} submit_cond={submit_cond.value} />
             <div class="title mx-5 mt-5" >营业网点</div>
@@ -262,6 +265,7 @@ export default defineComponent({
   },
 });
 </script>
+
 <style lang="less" scoped>
 @import "./index.less";
 .title {
@@ -277,4 +281,35 @@ export default defineComponent({
   font-weight: 600;
   color: #ffffff;
 }
+
+.w-100{
+  width:100px;
+}
+.w-235{
+  width:235px;
+}
+
+// <div class="block10 flex">
+//               <div class="group6 flex-col">
+//                 <div class="wrap3 flex-col">
+//                   <span class="txt11">贷款机构</span>
+//                   <span class="info15">产品名称</span>
+//                   <span class="word20">贷款利率</span>
+//                   <span class="txt12">贷款额度</span>
+//                   <span class="txt13">贷款期限</span>
+//                   <span class="txt14">担保方式</span>
+//                 </div>
+//               </div>
+//               <div class="section4 flex-row">
+//                 <div class="mod1 flex-col" />
+//                 <div class="mod2 flex-col w-full text-right">
+//                   <span class="info8">{inst_name.value}</span>
+//                   <span class="info9">{product_name.value}</span>
+//                   <span class="info10">{rate_lower.value}%~{rate_upper.value}%</span>
+//                   <span class="info11">{min_amount.value}万~{max_amount.value}万</span>
+//                   <span class="word9">{min_date.value}个月~{max_date.value}个月</span>
+//                   <span class="info12">{filterGuaranteeType(guarantee_type.value)}</span>
+//                 </div>
+//               </div>
+//             </div>
 </style>
\ No newline at end of file

src/views/LoanList/index.vue

 <template>
   <div class="page">
-    <NavBar title="全部功能" />
+    <NavBar title="全部贷款" />
     <div class="layer1 flex-col">
       <GroupTitle
         class="mt-4"
@@ -262,10 +262,10 @@ export default defineComponent({
     queryList() {
       this.loading = true;
       queryDirectLoanReq({
-        rate_lower: +this.reqParams.min!,
-        rate_upper: +this.reqParams.max!,
-        min_amount: +this.reqParams.min2!,
-        max_amount: +this.reqParams.max2!,
+        rate_lower: +this.reqParams.min!?+this.reqParams.min!:0,
+        rate_upper: +this.reqParams.max!?+this.reqParams.max!:1000,
+        min_amount: +this.reqParams.min2!?+this.reqParams.min2!:0,
+        max_amount: +this.reqParams.max2!?+this.reqParams.max2!:9999,
         bank_code: this.reqParams.selectedBanks[0],
         max_date: this.reqParams.selectedPerids[0]
           ? this.reqParams.selectedPerids[0].max_date

src/views/withMenu/Loan/index.vue

@@ -60,7 +60,7 @@
         </div>
       </div>
       <!-- 热门贷款 -->
-      <GroupTitle title="热门贷款" class="mt-2.5" iconName="" />
+      <GroupTitle title="热门贷款" class="mt-2.5" v-if="count" />
       <LoanHotSwipe :loanMode="mode" class="mt-5" />
       <!-- 非热门贷款 -->
       <GroupTitle
@@ -68,7 +68,12 @@
         v-if="state.allProductList"
         @seeMore="$router.push({ name: 'LoanList', params: { mode: mode } })"
       />
-      <Skeleton :row="3" :loading="skeLoading" style="margin-top: 20px" v-if="state.allProductList">
+      <Skeleton
+        :row="3"
+        :loading="skeLoading"
+        style="margin-top: 20px"
+        v-if="state.allProductList"
+      >
         <LoanCard
           v-for="item in state.allProductList"
           :key="item.value"
@@ -150,6 +155,7 @@ const limit = reactive({
   max_amount: "",
   state: false,
 });
+const count = ref(0);
 
 watch(mode, () => {
   state.allProductList = [];
@@ -177,30 +183,42 @@ const fetchActivityList = () => {
   skeLoading.value = false;
 };
 const fetchList = () => {
-  // 取从四开始的贷款，即非热门贷款
+  // 取前7贷款产品遍历
   skeLoading.value = true;
   queryLoanProductList({
-    limit: 4,
+    limit: 7,
     loan_type: mode.value,
-    offset: 3,
+    offset: 0,
   }).then((ret) => {
     if (ret.code === 200) {
       skeLoading.value = false;
       ret.data.uuid.map((uuid) => {
         queryLoanProductInfo({ uuid }).then((ret) => {
-          const { max_amount, inst_name, uuid, features, product_name } =
-            ret.data;
-          state.allProductList.push({
+          const {
             max_amount,
-            product_name,
-            features,
             inst_name,
             uuid,
-          });
+            features,
+            product_name,
+            product_status,
+          } = ret.data;
+          if (count.value < 4) {
+            if (product_status == 2) {
+              count.value = count.value + 1;
+              state.allProductList.push({
+                max_amount,
+                product_name,
+                features,
+                inst_name,
+                uuid,
+              });
+            }
+          }
         });
       });
     }
   });
+  count.value = 0
 };
 
 const formatLimit = (limit: string): string => {

src/views/withMenu/Loan/types.ts

@@ -10,5 +10,6 @@ export interface simpleItemInfo{
     product_name:string,
     features:string,
     inst_name:string,
-    uuid:string
+    uuid:string,
+    product_status?:number
 }
\ No newline at end of file

tailwind.config.js

@@ -64,6 +64,7 @@ module.exports = {
       "app-btn-disabled": "#E7E7E7",
       "app-branch-deep-blue": "#2C3C92",
       "branch-tab-bg":"#F9FBFF",
+      "product-detail-bg":"#EAF0FF",
       black: colors.black,
       white: colors.white,
       gray: colors.coolGray,