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

<template>
  <div>
    <common>
      <template #main>
        <el-card style="border-radius: 16px">
          <div class="choose">
            <div class="searchType">贷款金额</div>
            <div :class="{ active: chooseMoney === 0 }" class="chooseAll" @click="changeChoose('money', 0)">不限</div>
            <div :class="{ active: chooseMoney === 1 }" class="chooseItem" @click="changeChoose('money', 1)">50万元及以下</div>
            <div :class="{ active: chooseMoney === 2 }" class="chooseItem" @click="changeChoose('money', 2)">50~100万元</div>
            <div :class="{ active: chooseMoney === 3 }" class="chooseItem" @click="changeChoose('money', 3)">100~300万元</div>
            <div :class="{ active: chooseMoney === 4 }" class="chooseItem" @click="changeChoose('money', 4)">300~500万元</div>
            <div :class="{ active: chooseMoney === 5 }" class="chooseItem" @click="changeChoose('money', 5)">500万元及以下</div>
          </div>
          <div class="choose">
            <div class="searchType">贷款期限</div>
            <div :class="{ active: chooseDate === 0 }" class="chooseAll" @click="changeChoose('date', 0)">不限</div>
            <div :class="{ active: chooseDate === 1 }" class="chooseItem" @click="changeChoose('date', 1)">6个月及以下</div>
            <div :class="{ active: chooseDate === 2 }" class="chooseItem" @click="changeChoose('date', 2)">6~12个月</div>
            <div :class="{ active: chooseDate === 3 }" class="chooseItem" @click="changeChoose('date', 3)">12~24个月</div>
            <div :class="{ active: chooseDate === 4 }" class="chooseItem" @click="changeChoose('date', 4)">24~36个月</div>
            <div :class="{ active: chooseDate === 5 }" class="chooseItem" @click="changeChoose('date', 5)">36个月及以下</div>
          </div>
          <div class="choose">
            <div class="searchType">投保方式</div>
            <div :class="{ active: chooseWay === 0 }" class="chooseAll" @click="changeChoose('way', 0)">不限</div>
            <div :class="{ active: chooseWay === 1 }" class="chooseItem" @click="changeChoose('way', 1)">信用</div>
            <div :class="{ active: chooseWay === 2 }" class="chooseItem" @click="changeChoose('way', 2)">抵押</div>
            <div :class="{ active: chooseWay === 3 }" class="chooseItem" @click="changeChoose('way', 3)">质保</div>
            <div :class="{ active: chooseWay === 4 }" class="chooseItem" @click="changeChoose('way', 4)">保证</div>
            <div :class="{ active: chooseWay === 5 }" class="chooseItem" @click="changeChoose('way', 5)">其他</div>
          </div>
          <div class="choose">
            <div class="searchType">消费主体</div>
            <div :class="{ active: chooseUse === 0 }" class="chooseAll" @click="changeChoose('use', 0)">不限</div>
            <div :class="{ active: chooseUse === 1 }" class="chooseItem" @click="changeChoose('use', 1)">种植</div>
            <div :class="{ active: chooseUse === 2 }" class="chooseItem" @click="changeChoose('use', 2)">养殖</div>
            <div :class="{ active: chooseUse === 3 }" class="chooseItem" @click="changeChoose('use', 3)">加工</div>
            <div :class="{ active: chooseUse === 4 }" class="chooseItem" @click="changeChoose('use', 4)">仓储</div>
            <div :class="{ active: chooseUse === 5 }" class="chooseItem" @click="changeChoose('use', 5)">流通</div>
          </div>
          <div class="choose">
            <div class="searchType">产品类型</div>
            <div :class="{ active: chooseType === 0 }" class="chooseAll" @click="changeChoose('type', 0)">不限</div>
            <div :class="{ active: chooseType === 1 }" class="chooseItem" @click="changeChoose('type', 1)">线上审批</div>
            <div :class="{ active: chooseType === 2 }" class="chooseItem" @click="changeChoose('type', 2)">线下审批</div>
            <div :class="{ active: chooseType === 3 }" class="chooseItem" @click="changeChoose('type', 3)">秒批秒贷</div>
          </div>

          <div style="margin-top: 20px; display: flex; justify-content: space-between; font-size: 18px">
            <div>
              共匹配到 <span style="color: #25bf82">{{ pagination.total }}</span> 个结果
            </div>
            <div class="sort" @click="sortFunction(0)">线下审批<img :src="getAssetsFile('images/finance/default.png')" alt="" /></div>
            <div class="sort" @click="sortFunction(1)">贷款额度<img :src="getAssetsFile('images/finance/default.png')" alt="" /></div>
            <div class="sort" @click="sortFunction(2)">贷款利率<img :src="getAssetsFile('images/finance/default.png')" alt="" /></div>
            <div class="sort" @click="sortFunction(3)">贷款期限<img :src="getAssetsFile('images/finance/default.png')" alt="" /></div>
          </div>
        </el-card>
        <el-card v-for="(item, index) in dataList" :key="index" :body-style="{ padding: '0' }" style="border-radius: 16px; margin-top: 20px">
          <div style="display: flex; justify-content: space-between; padding: 20px">
            <div>
              <img :src="getAssetsFile(item.imgPath)" alt="" style="width: 160px" />
            </div>
            <div style="display: flex; flex-direction: column; justify-content: space-between; padding: 40px 20px">
              <div style="font-size: 20px; font-weight: bold; text-align: left">{{ item.name }}</div>
              <div style="display: flex" class="tags">
                <div>额度高</div>
                <div>政策扶持</div>
              </div>
            </div>
            <div style="display: flex" class="bankInfo">
              <div style="display: flex">
                <div class="infoTitle">最快放款</div>
                <div class="infoValue">{{ item.fast }}</div>
              </div>
              <div style="display: flex">
                <div class="infoTitle">申请额度</div>
                <div>{{ item.maxMoney }}</div>
              </div>
              <div style="display: flex">
                <div class="infoTitle">申请期限</div>
                <div>{{ item.maxDate }}</div>
              </div>
              <div style="display: flex">
                <div class="infoTitle">参考利率</div>
                <div>{{ item.rate }}</div>
              </div>
              <div style="display: flex">
                <div class="infoTitle">担保方式</div>
                <div>{{ item.ways }}</div>
              </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>
            </div>
          </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';

/* --------------- data --------------- */
// #region
const chooseMoney = ref(0);
const chooseDate = ref(0);
const chooseWay = ref(0);
const chooseUse = ref(0);
const chooseType = ref(0);

const pagination = ref({
  total: 2,
  size: 20,
  page: 1,
});

const dataList = ref([
  {
    id: 1,
    name: '惠农e贷',
    fast: '1周',
    maxMoney: '最高100万',
    maxDate: '最长60个月',
    rate: '4.05%起',
    ways: '信用',
    imgPath: 'images/finance/nyyh.png',
  },
  {
    id: 2,
    name: '农贷通',
    fast: '2周',
    maxMoney: '最高50万',
    maxDate: '最长60个月',
    rate: '4.15%起',
    ways: '信用',
    imgPath: 'images/finance/yzcx.png',
  },
]);

// #endregion

/* --------------- methods --------------- */
// #region
const changeChoose = (type, index) => {
  switch (type) {
    case 'money':
      chooseMoney.value = index;
      break;
    case 'date':
      chooseDate.value = index;
      break;
    case 'way':
      chooseWay.value = index;
      break;
    case 'use':
      chooseUse.value = index;
      break;
    case 'type':
      chooseType.value = index;
      break;
  }
  getList();
};

const sortMap = ref({
  currentSorting: '',
  currentStatus: '',
});

const sortFunction = (type) => {};

const getList = () => {
  console.log('刷新数据');
};
// #endregion
</script>

<style lang="scss" scoped>
.bankInfo {
  width: calc(100% - 460px);
  justify-content: space-around;
  padding: 45px 20px;
  .infoValue {
    font-size: 14px;
    font-weight: 400;
  }
  div {
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .infoTitle {
    color: #999999;
    font-size: 14px;
  }
}
.choose {
  display: flex;
  justify-content: flex-start;
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
  .searchType {
    color: #999999;
  }
  .chooseAll {
    margin: 0 30px;
    cursor: pointer;
  }
  .chooseItem {
    cursor: pointer;
    margin-right: 20px;
  }
}
.active {
  color: #25bf82;
  font-weight: bold;
}
.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;
  }
}
.sort {
  display: flex;
  align-items: center;
  cursor: pointer;
  img {
    width: 15px;
    height: 15px;
  }
}
</style>