涉农金融详情页

sub-operation-service/src/router/index.js

@@ -184,13 +184,13 @@ export const constantRoutes = [
             path: 'detail',
             component: () => import('@/views/ruralFinance/integratedSector/detail.vue'),
             name: 'integratedSectorDetail',
-            meta: { title: '查看详情', hideInBread: true },
+            meta: { title: '查看详情' },
           },
           {
             path: 'loan',
             component: () => import('@/views/ruralFinance/integratedSector/loan.vue'),
             name: 'integratedSectorLoan',
-            meta: { title: '我要贷款', hideInBread: true },
+            meta: { title: '我要贷款' },
           },
         ],
       },

sub-operation-service/src/views/ruralFinance/integratedSector/detail.vue

@@ -1,19 +1,160 @@
 <template>
-  <div></div>
+  <div>
+    <common>
+      <template #main>
+        <el-card style="border-radius: 16px" :body-style="{ padding: 0 }">
+          <div class="product-card">
+            <div style="padding: 20px; display: flex; justify-content: space-between">
+              <div style="display: flex">
+                <img :src="getAssetsFile('images/finance/nyyh.png')" width="120px" alt="" />
+                <div style="display: flex; align-items: center">
+                  <div style="font-size: 20px; font-weight: bold; margin: 0 20px">惠农e贷</div>
+                  <div style="display: flex" class="tags">
+                    <div>额度高</div>
+                    <div>政策扶持</div>
+                  </div>
+                </div>
+              </div>
+              <div style="margin: auto 0">
+                <el-button style="background-color: #25bf82; color: #ffffff; padding: 20px; font-size: 20px" @click="goLoan">我要贷款</el-button>
+              </div>
+            </div>
+            <div style="display: flex; margin-top: 40px; justify-content: space-around; text-align: center">
+              <div>
+                <div class="subTitle">最高50万</div>
+                <div class="subContent">货款额度</div>
+              </div>
+              <div>
+                <div class="subTitle">4.15%起</div>
+                <div class="subContent">产品利率</div>
+              </div>
+              <div>
+                <div class="subTitle">最长60个月</div>
+                <div class="subContent">货款期限</div>
+              </div>
+            </div>
+            <div style="display: flex; justify-content: space-between; padding: 40px">
+              <div style="font-size: 18px">
+                <div class="subs">最快放款：<span>即时放款</span></div>
+                <div class="subs">适用范围：<span>临沧市</span></div>
+              </div>
+              <div style="font-size: 18px">
+                <div class="subs">担保方式：<span>信用、抵押</span></div>
+                <div class="subs">所属机构：<span>农业银行</span></div>
+              </div>
+              <div style="font-size: 18px">
+                <div class="subs">还款方式：<span>等额本息、先息后本</span></div>
+                <div class="subs">&nbsp;</div>
+              </div>
+            </div>
+          </div>
+          <div style="margin-top: 40px; padding: 20px">
+            <div style="display: flex">
+              <img :src="getAssetsFile('images/finance/productInt.png')" alt="" height="40" />
+              <div class="titles">
+                <div>产品介绍</div>
+                <div class="underLine"></div>
+              </div>
+            </div>
+          </div>
+          <div class="contents">
+            惠农e贷是中国农业银行依托互联网大数据技术，专门为农民设计的一款线上化、批量化、便捷化、普惠化的贷款产品。创新运用互联网大数据分析技术，采取线上线下相结合方式办理贷款。
+          </div>
+          <div style="padding: 20px">
+            <div style="display: flex">
+              <img :src="getAssetsFile('images/finance/customs.png')" alt="" height="40" />
+              <div class="titles">
+                <div>适用客户</div>
+                <div class="underLine"></div>
+              </div>
+            </div>
+          </div>
+          <div class="contents" style="text-indent: 0">
+            广泛覆盖从事特色产业经营、农村电商购销、农业产业链供销以及在农行有金融资产或信贷关系等客户，贷款可用于生产经营和消费，包括但不限于以下范围：<br />1.在农行存款、理财、基金等金融资产达到一定标准的农户。<br />2.在农行办理住房贷款且尚未结清的农户。<br />3.在农行办理过农户贷款且信用记录良好的农户。<br />4.从事茶叶、林果、蔬菜、烟草、谷物种植和畜牧、家禽、渔业养殖等农行认可的特色产业经营农户。<br />5.农行认可的信用村内有资产、有收入、有诚信的农户。<br />6.与农行合作的农业产业化龙头企业上下游农户。<br />7.与农行合作的电商平台上下游购销农户。<br />8.纳入政府增信机制或融资性担保公司担保的农户。
+          </div>
+        </el-card>
+      </template>
+    </common>
+  </div>
 </template>
 
 <script setup>
 import { ref } from 'vue';
+import common from '../components/common.vue';
+import { getAssetsFile } from '../../../utils/index.js';
+import { useRoute, useRouter } from 'vue-router';
 
 /* --------------- data --------------- */
 // #region
-
+const router = useRouter();
+const route = useRoute();
 // #endregion
 
 /* --------------- methods --------------- */
 // #region
-
+const goLoan = () => {
+  router.push({
+    path: '/sub-operation-service/finance/integratedSector/loan',
+  });
+};
 // #endregion
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.contents {
+  text-indent: 2em;
+  font-size: 18px;
+  text-align: left;
+  padding: 20px;
+}
+.product-card {
+  border-radius: 16px;
+  width: 100%;
+  background: linear-gradient(to top, #25bf82 -100%, #ffffff 90%);
+}
+.tags {
+  font-size: 14px;
+  color: #25bf82;
+  div {
+    margin-right: 10px;
+    padding: 5px;
+    border: 1px solid #25bf82;
+    background-color: rgba(37, 191, 130, 0.1);
+    border-radius: 8px;
+  }
+}
+.subs {
+  text-align: left;
+  span {
+    font-size: 18px;
+    color: #25bf82;
+    font-weight: bold;
+    display: inline-block;
+    max-width: 8em; /* 大约6个汉字的宽度 */
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: bottom;
+  }
+}
+.subTitle {
+  font-size: 26px;
+  color: #25bf82;
+  font-weight: bold;
+}
+.subContent {
+  font-size: 18px;
+}
+.titles {
+  display: flex;
+  flex-direction: column;
+  font-size: 20px;
+  font-weight: bold;
+}
+.underLine {
+  background-color: #25bf82;
+  width: 100%;
+  border-radius: 4px;
+  height: 8px;
+}
+</style>

sub-operation-service/src/views/ruralFinance/integratedSector/index.vue

@@ -92,7 +92,7 @@
               </div>
             </div>
             <div style="margin: auto 0">
-              <el-button style="background-color: #25bf82; color: #ffffff; border-radius: 11px; padding: 20px; font-size: 18px"> 查看详情 </el-button>
+              <el-button class="detailBtn" @click="goDetail(item.id)"> 查看详情 </el-button>
             </div>
           </div>
         </el-card>
@@ -104,8 +104,8 @@
 <script setup>
 import { ref } from 'vue';
 import common from '../components/common.vue';
-import { getAssetsFile } from '../../../utils/index.js';
+import { getAssetsFile } from '@/utils/index.js';
-
+import { useRoute, useRouter } from 'vue-router';
 /* --------------- data --------------- */
 // #region
 const chooseMoney = ref(0);
@@ -113,6 +113,8 @@ const chooseDate = ref(0);
 const chooseWay = ref(0);
 const chooseUse = ref(0);
 const chooseType = ref(0);
+const router = useRouter();
+const route = useRoute();
 
 const pagination = ref({
   total: 2,
@@ -178,6 +180,14 @@ const sortFunction = (type) => {};
 const getList = () => {
   console.log('刷新数据');
 };
+
+const goDetail = (id) => {
+  router.push({
+    path: '/sub-operation-service/finance/integratedSector/detail',
+    query: { id: id },
+  });
+};
+
 // #endregion
 </script>
 
@@ -245,4 +255,11 @@ const getList = () => {
     height: 15px;
   }
 }
+.detailBtn {
+  background-color: #25bf82;
+  color: #ffffff;
+  border-radius: 11px;
+  padding: 20px;
+  font-size: 18px;
+}
 </style>

sub-operation-service/src/views/ruralFinance/integratedSector/loan.vue

@@ -1,13 +1,29 @@
 <template>
-  <div></div>
+  <div>
+    <common>
+      <template #main>
+        <el-card style="border-radius: 16px" :body-style="{ padding: 0 }">
+          <div style="padding: 20px">
+            <img :src="getAssetsFile('images/finance/wydk.png')" style="width: 100%" alt="" />
+          </div>
+        </el-card>
+      </template>
+    </common>
+  </div>
 </template>
 
 <script setup>
 import { ref } from 'vue';
+import common from '../components/common.vue';
+import { getAssetsFile } from '@/utils/index.js';
+import { useRoute, useRouter } from 'vue-router';
 
 /* --------------- data --------------- */
 // #region
 
+const router = useRouter();
+const route = useRoute();
+
 // #endregion
 
 /* --------------- methods --------------- */