financing-trial.vue

<!--
 * @Descrip 融资试算
 * @Author: your name
 * @Date: 2019-09-29 17:09:49
 * @LastEditTime: 2019-12-17 11:21:41
 * @LastEditors: Please set LastEditors
   -->
<template>
  <h-view id="trial" class="public-style">
    <h-header :proportion="[5,1,1]" class="bar-custom">
      <div slot="left" class="h-header-btn">
        <img src="@/assets/userBind/arrow.png" @click="$routeGo()">
        <span>融资试算</span>
      </div>
    </h-header>

    <!-- 搜索 -->
    <div class="search has-header">
      <input v-model="searchInput" type="text" placeholder="请输入产品名称">
    </div>
    <scroll
      ref="scroll"
      :updateData="[lists]"
      :pullUp="true"
      @pullingUp="loadMore"
    >
      <section v-for="(item,index) in lists" :key="index">
        <div class="descript" @click="goDetails(item.product_plan_id)">
          <img src="@/assets/trial/product.png" alt="">
          <p class="produc">{{ item.product_plan_id_n }}</p>
          <img class="linkPic" src="@/assets/distributorSign/righticon.png" alt="">
        </div>

        <div class="tario">
          <div class="wrap">
            <p class="ratio">
              <span>保证金比例</span>
              <span>{{ item.deposit_ratio_n }}</span>
            </p>
            <p>
              <span>手续费比例</span>
              <span>{{ item.lease_charge_ratio_n }}</span>
            </p>
          </div>
          <div class="wrap">
            <p>
              <span>年利率</span>
              <span>{{ item.int_rate_n }}</span>
            </p>
            <p>
              <span>首付款比例</span>
              <span>{{ item.down_payment_ratio_n }}</span>
            </p>
          </div>
        </div>
      </section>
    </scroll>
  </h-view>
</template>
<script>
export default {
  name: 'FinancingTrial',
  data () {
    return {
      lists: [],
      pagenum: 1,
      division: '', // 产品线
      plan_price: '',
      searchInput: '',
      price_date_to: '',
      fromProduct: false,
    }
  },
  computed: {},
  watch: {
    searchInput () {
      let vm = this
      if (vm.timeout) {
        clearTimeout(vm.timeout)
      }
      vm.timeout = setTimeout(() => {
        if (vm.fromProduct) {
          vm.search(vm.fromProduct)
        } else {
          vm.search()
        }
      }, 1000)
    },
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.searchInput = ''
      vm.pagenum = 1
      vm.$refs.scroll.scrollToTop()
      vm.$refs.scroll.update(false)
      if (from.name === 'ProDetailed') {
        vm.lists = []
        vm.price_date_to = vm.$route.params.price_date_to // 有效日期
        vm.plan_price = vm.$route.params.plan_price // 参考价
        vm.division = vm.$route.params.division
        vm.calculationQuery('collect')
        vm.fromProduct = true
      } else if (from.name === 'HomePage' || from.name === 'FunctionCenter') {
        vm.fromProduct = false
        vm.calculationQuery()
        vm.price_date_to = '' // 清除缓存（从收藏带来的数据）
        vm.plan_price = ''
      }
    })
    next()
  },
  activated () {

  },
  created () {

  },
  methods:
      {
        goDetails (val) {
          this.$router.push({
            name: 'FinancingDetails',
            params: {
              product_plan_id: val,
              plan_price: this.plan_price,
              price_date_to: this.price_date_to,
            },
          })
        },
        // 初始试算查询
        calculationQuery (val) {
          let vm = this
          if (val) {
            let url = $config.basePath + 'prd_product_calculation_query'
            let param = {
              pagesize: 10,
              searchInput: vm.searchInput,
              pagenum: vm.pagenum,
              division: vm.division, // 收藏到试算通过产品线查询
              bp_id: vm.$route.params.bp_id,
            }
            vm.hlsPopup.showLoading('数据加载中')
            vm.hlsHttp.post(url, param).then(function (res) {
              vm.hlsPopup.hideLoading()
              if (res.result === 'S') {
                vm.lists = res.lists
                if (res.lists.length > 0 && res.lists.length < 10) {
                  vm.$refs.scroll.update(true)
                }
              } else {
                hlsPopup.showLongCenter(res.message)
              }
            })
          } else {
            let url = $config.basePath + 'prd_calculation_query'
            let param = {
              pagesize: 10,
              searchInput: vm.searchInput,
              pagenum: vm.pagenum,
            }
            vm.hlsPopup.showLoading('数据加载中')
            vm.hlsHttp.post(url, param).then(function (res) {
              vm.hlsPopup.hideLoading()
              if (res.result === 'S') {
                vm.lists = res.lists
                if (res.lists.length > 0 && res.lists.length < 10) {
                  vm.$refs.scroll.update(true)
                }
              } else {
                hlsPopup.showLongCenter(res.message)
              }
            })
          }
        },

        loadMore () {
          let vm = this
          if (vm.fromProduct) {
            vm.pagenum = vm.pagenum + 1
            let url = $config.basePath + 'prd_product_calculation_query'
            let param = {
              division: window.localStorage.division, // 收藏到试算通过产品线查询
              searchInput: vm.searchInput,
              pagenum: vm.pagenum,
              pagesize: 10,
            }
            vm.hlsPopup.showLoading('数据加载中')
            vm.$post(url, param).then(function (res) {
              vm.hlsPopup.hideLoading()
              let returnData = []
              if (res.result === 'S') {
                returnData = res.lists
                if (returnData.length === 0) {
                  vm.$refs.scroll.update(true)
                } else if (returnData.length > 0 && returnData.length < 10) {
                  returnData.forEach((data, index, array) => {
                    vm.lists.push(array[index])
                  })
                  vm.$refs.scroll.update(true)
                } else if (returnData.length === 10) {
                  returnData.forEach((data, index, array) => {
                    vm.lists.push(array[index])
                  })
                  vm.$refs.scroll.update(false)
                }
              } else {
                hlsPopup.showLongCenter(res.message)
              }
            })
          } else {
            vm.pagenum = vm.pagenum + 1
            let url = $config.basePath + 'prd_calculation_query'
            let param = {
              searchInput: vm.searchInput,
              pagenum: vm.pagenum,
              pagesize: 10,
            }
            vm.hlsPopup.showLoading('数据加载中')
            vm.$post(url, param).then(function (res) {
              vm.hlsPopup.hideLoading()
              let returnData = []
              if (res.result === 'S') {
                returnData = res.lists
                if (returnData.length === 0) {
                  vm.$refs.scroll.update(true)
                } else if (returnData.length > 0 && returnData.length < 10) {
                  returnData.forEach((data, index, array) => {
                    vm.lists.push(array[index])
                  })
                  vm.$refs.scroll.update(true)
                } else if (returnData.length === 10) {
                  returnData.forEach((data, index, array) => {
                    vm.lists.push(array[index])
                  })
                  vm.$refs.scroll.update(false)
                }
              } else {
                hlsPopup.showLongCenter(res.message)
              }
            })
          }
        },

        search (val) {
          let vm = this
          if (val) {
            vm.pagenum = 1
            let url = $config.basePath + 'prd_product_calculation_query'
            let param = {
              pagesize: 10,
              pagenum: 1,
              searchInput: vm.searchInput,
              division: window.localStorage.division, // 收藏到试算通过产品线查询
            }
            vm.hlsPopup.showLoading('数据加载中')
            vm.hlsHttp.post(url, param).then(function (res) {
              vm.hlsPopup.hideLoading()
              vm.lists = res.lists
              if (vm.lists.length >= 0 && vm.lists.length < 10) {
                vm.$refs.scroll.update(true)
              } else if (vm.lists.length === 10) {
                vm.$refs.scroll.update(false)
              }
            })
          } else {
            vm.pagenum = 1
            let url = $config.basePath + 'prd_calculation_query'
            let param = {
              pagesize: 10,
              pagenum: 1,
              searchInput: vm.searchInput,
            }
            vm.hlsPopup.showLoading('数据加载中')
            vm.hlsHttp.post(url, param).then(function (res) {
              vm.hlsPopup.hideLoading()
              vm.lists = res.lists
              if (vm.lists.length >= 0 && vm.lists.length < 10) {
                vm.$refs.scroll.update(true)
              } else if (vm.lists.length === 10) {
                vm.$refs.scroll.update(false)
              }
            })
          }
        },

      },
}
</script>
<style lang='less'>
  #trial {
    .search {
      background-color: #fff;
      padding: 8px 12px;
      position: absolute;
      width: 100%;
      z-index: 100;
      margin-bottom: 8px;

      input {
        background: url("../../assets/contractStart/search1.png") 320px no-repeat;
        background-size: 16px 16px;
        background-color: rgba(239, 239, 239, 0.55);
        padding-left: 12px;
        border-radius: 4px;
        height: 36px;
        width: 100%;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #888C8F;
        line-height: 36px;
      }

      input::placeholder {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #888C8F;
        letter-spacing: 0;
      }

      input:focus {
      background: url("../../assets/contractStart/search2.png") 320px no-repeat;
      background-size: 16px 16px;
      background-color: rgba(239, 239, 239, 0.55);
      border: 2px solid #bcc6ff;
    }
    }

    section {
      width: 95%;
      margin: 0 auto;
      margin-top: 8px;
      border-radius: 2px;
    }

    .descript {
      width: 100%;
      height: 44px;
      display: flex;
      flex-direction: row;
      background: #fff;

      img {
        width: 30px;
        height: 30px;
        margin-left: 10px;
        margin-top: 8px;
        // margin-right: 8px;
      }

      .linkPic {
        width: 16px;
        height: 16px;
        margin-top: 15px;
        margin-left: -7px;
        margin-right: 10px;
      }

      .produc {
        height: 44px;
        display: flex;
        flex: 1;
        font-size: 15px;
        color: #4B4A4B;
        line-height: 44px;
        font-weight: 500;
        letter-spacing: 0;
        margin-left: 10px;
        font-family: PingFangSC-Semibold;
        border-bottom: 1px solid #F3F3F7;
      }
    }

    .tario {
      width: 100%;
      height: 60px;
      position: relative;
      background: #fff;
      // margin-bottom: 8px;
      .wrap:nth-of-type(1) {
        height: 60px;
        position: absolute;
        left: 50px;
      }

      .wrap:nth-of-type(2) {
        height: 60px;
        position: absolute;
        right: 30px;
      }

      p {
        height: 30px;
        line-height: 30px;
        font-family: PingFangSC-Regular;
        font-size: 13px;
        color: rgba(56, 63, 69, 0.60);

        span:nth-of-type(2) {
          margin-left: 16px;
          color: rgb(56, 63, 69);
        }
      }
    }
    .content{
      position: absolute;
      top:0;
    }
    .scrollContent{
     padding-top: 1.92rem;
      padding-bottom: 20px;
    }
  }
  .platform-ios {
    #trial {
      .scrollContent {
        padding-top: 2.32rem;
      }
    }
  }
  // iPhoneX适配
  @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
    .platform-ios {
      #trial {
        .scrollContent {
          padding-top: 2.72rem;
        }
      }
    }
  }
  // iPhoneXR适配
  @media (device-width: 414px) and (device-height: 896px) {
    .platform-ios {
      #trial {
        .scrollContent {
          padding-top: 2.72rem;
        }
        .search {
        input {
          background: url("../../assets/contractStart/search1.png") 320px
            no-repeat;
          background-size: 16px 16px;
          background-color: rgba(239, 239, 239, 0.55);
          padding: 8px 12px;
          border-radius: 4px;
          width: 100%;
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #888c8f;
        }
      }
      }
    }
  }
</style>