xnzt/xnzt-h5/pages/index/needLoan/index.vue

<template>
  
  <!-- <div class="needLoan">needLoan</div> -->
  <view class="page needLoan">
    
    <view class="banner">
    	<image src="@/static/images/index/b1.png" mode="aspectFill"></image>
    </view>
    
    <view class="page-body" style="margin-top: 10px;" v-if="loanComList !== undefined && loanComList.length > 0">
      <uni-collapse>
        <uni-collapse-item :class="'loan-com ' + index == 0 ? 'frist' : ''" v-for="(loanCom, index) in loanComList"
          :key="index" :title="loanCom.lenderName" :thumb="thumbLink(loanCom.lenderName)" :open="true">
         
          <view class="collapse" style="height: auto">
            <template v-for="(loanPro, index) in loanProductList">
              <view @click="gotoDetail(loanPro, loanCom)"  class="loan-pro" :key="index" v-if="loanPro.lenderName === loanCom.lenderName">
                
                <view class="pic-view">
                  <image class="pic" :src="$config.imageBaseUrl + loanPro.coverImg" />
                </view>

                <view class="loan-pro-info" style="border-top: 1px solid #F0F0F0;">
                  <view class="name" style="color: #333; font-size: 14px; font-weight: bold;">
                    <text>{{ loanPro.loanCommodity }}</text>
                  </view>
                  
                  <view style="display:flex; justify-content: space-between; font-size: 12px; margin-top: 5px;">
                    <view class="limit">
                      <text style="font-size: 14px;">额度：<span style="color: #ff7c12; font-size: 16px; padding: 0px 3px;">{{ loanPro.loanLimit }}</span></text>
                    </view>
                  </view>
                  <view style="display:flex; justify-content: space-between; font-size: 12px;">
                    <view class="limit">
                      <text style="font-size: 14px;">利率：<span style="color: #ff7c12; font-size: 16px; padding: 0px 3px;">{{ loanPro.interestRate }}</span></text>
                    </view>
                  </view>
                  
                <!--  <view class="footer">
                    <view class="max-funds">
                      <view class="">
                        <text>接入方式</text>
                      </view>
                    </view>
                    <view class="loan-pro-loanRatio">
                      <view class="el-tag el-tag--medium">
                        <text>{{loanPro.accessMode === 0 ? "数据对接" : "线下对接"}}</text>
                      </view>
                    </view>
                  </view> -->
                  
                </view>
              </view>
            </template>
          </view>
        </uni-collapse-item>
      </uni-collapse>
    </view>
    <block v-else>
      <view class="empty">
        <view>
          <image src="@/static/images/no.png" />
        </view>
        <view class="text">
          <text>{{ "暂无贷款产品" }}</text>
        </view>
      </view>
    </block>
  </view>

</template>

<script>
import { listLoanProduct } from "@/api/financialCredit/loanProduct";

export default {
  name: "needInsurance",
  components: {},
  props: {},
  data() {
    return {
      loanComList: [],
      loanProductList: [],
      allInstitution: {},
      showLoanComIndex: null,
      playCollCartoonIndex: null,
      waitCartoonTimeOut: null,
      loading: false,
      total: 0,
    };
  },
  methods: {
    getallLoanProduct() {
      this.loading = true;
      listLoanProduct({
        status: 0,//启用的贷款信息
      }).then((response) => {
        this.loanProductList = response.rows;
        let list = [];
        this.loanProductList.forEach((element) => {
          list.push({ lenderName: element.lenderName });
        });
        this.loanComList = [
          ...new Set(list.map((item) => JSON.stringify(item))),
        ].map((i) => JSON.parse(i));
        this.loading = false;
      });
    },
    thumbLink(lenderName) {
      switch (lenderName) {
        case "中国邮政储蓄银行股份有限公司":
          return "../../../static/images/index/zgyz.png";
        case "邮政储蓄银行":
          return "../../../static/images/index/zgyz.png";
        case "中国农业银行":
          return "../../../static/images/index/nyyh.png";
        default:
          return "../../../static/images/index/no-photo.png";
      }
    },
    //详情
    gotoDetail(loanPro, loanCom) {
      uni.navigateTo({
        url: '/pages/index/needLoan/loanProDetail/index?id=' + loanPro.id + '&lenderName=' + loanCom.lenderName
      })
    }
  },

  // 页面周期函数--监听页面加载
  onLoad() {
    this.getallLoanProduct();
  },
  watch: {
    loading: {
      handler: function (val, oldVal) {
        if (val === true) {
          this.$modal.loading("加载中，请耐心等待...");
        } else {
          this.$modal.closeLoading();
        }
      },
      deep: true,
    },
  },
};
</script>

<style scoped lang="scss">
// page {
//   background: white;
// }

.needLoan {
  // background-color: white;
  height: calc(100%);
  
  
  .banner {
  	width: 100%;
  	height: 320rpx;
  
  	image {
  		width: 100%;
  		height: 100%;
  	}
  }
}

.loan-com {
  margin-top: 10px;
}

.frist {
  margin: 0px;
}

.loan-com-accordion {
  background-color: white;
  display: flex;
  justify-content: space-between;
  padding: 2px 5px 2px 5px;
}

.loan-com-name {
  background-color: white;
  display: flex;
  font-size: 13px;
}

.loan-com-name text {
  display: inline-block;
  line-height: 25px;
}

.loan-com-name .icon-view {
  width: 25px;
  height: 20px;
}

.loan-com-name .icon {
  width: 20px;
  height: 20px;
  margin-top: 2.5px;
}

.down-arrow {
  padding-right: 13px;
  position: relative;
}

.down-arrow::after {
  content: " ";
  display: inline-block;
  height: 5px;
  width: 5px;
  border-width: 1px 1px 0 0;
  border-color: #888888;
  border-style: solid;
  transform: matrix(-0.71, 0.71, -0.71, -0.71, 0, 0);
  position: absolute;
  top: 50%;
  margin-top: 8px;
  right: 14px;
  transition: transform 300ms;
  -moz-transition: transform 300ms;
  -webkit-transition: transform 300ms;
  -o-transition: transform 300ms;
}

.up-arrow::after {
  content: "";
  transform: matrix(0.71, -0.71, 0.71, 0.71, 0, 0);
}

.loan-pro {
  display: flex;
  background-color: white;
  color: #a1a1a1;
  padding: 0px 10px;
}

.loan-pro .pic-view {
  padding: 0px 10px 5px 5px;
}

.loan-pro .pic {
  width: 70px;
  height: 70px;
}

.loan-pro-info {
  position: relative;
  width: 100%;
}

.loan-pro .name {
  color: #333;
  font-size: 14px;
  padding-top: 5px;
}

.loan-pro .max-funds {
  display: flex;
  align-items: center;
  font-size: 11px;
}

.loan-pro .max-funds .money {
  margin-left: 2px;
  font-weight: 500;
  color: orange;
}

.loan-pro .footer {
  // position: absolute;
  // position: relative;
  position: unset;
  display: flex;
  width: 100%;
  justify-content: space-between;
  font-size: 11px;
  bottom: 20px;
}

.loan-pro .loan-pro-loanRatio {
  margin-left: 10px;
  display: flex;
  font-size: 11px;
}

.loan-pro .loan-pro-loanRatio .loanRatio {
  color: orange;
}

.disabled {
  * {
    color: #a1a1a1;
  }

  background: #fcfcfc;
}

.collapse {
  overflow: hidden;
  transition: height 300ms;
  -moz-transition: height 300ms;
  /* Firefox 4 */
  -webkit-transition: height 300ms;
  /* Safari and Chrome */
  -o-transition: height 300ms;
  /* Opera */
  overflow: hidden;
}

.empty {
  padding: 20rpx;
  text-align: center;
  transform: translateY(30%);

  image {
    height: 60vw;
    width: 60vw;
  }

  .text {
    color: #888;
  }
}
</style>