contract-records.vue 14.7 KB
Newer Older
786817560's avatar
786817560 committed
1 2 3
<!--
 * @Author: your name
 * @Date: 2019-10-31 09:49:57
786817560's avatar
786817560 committed
4
 * @LastEditTime: 2019-11-21 16:41:30
786817560's avatar
786817560 committed
5 6 7 8
 * @LastEditors: Please set LastEditors
 * @Description: 合同查询--记录
 * @FilePath:
 -->
24776's avatar
24776 committed
9 10 11 12 13
<template>
  <h-view id="contract-records" 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()">
786817560's avatar
786817560 committed
14
        <span>合同记录</span>
24776's avatar
24776 committed
15 16
      </div>
    </h-header>
786817560's avatar
786817560 committed
17
    <div v-if="data===null" class="null">
786817560's avatar
786817560 committed
18 19 20 21 22
      <div class="display">
        <img src="@/assets/contractRepayment/null.png" alt="">
        <p>暂时没有还款记录</p>
        <div @click="$routeGo()">返回</div>
      </div>
786817560's avatar
786817560 committed
23 24
    </div>
    <div v-if="data!==null" class="wrap has-header">
786817560's avatar
786817560 committed
25 26
      <div class="tab">
        <p><span :class="{'selected':selected === 'all'}" @click="isSelected('all')">全部</span></p>
786817560's avatar
786817560 committed
27 28
        <p><span :class="{'selected':selected === 'one'}" @click="isSelected('one')">待首付</span></p>
        <p><span :class="{'selected':selected === 'two'}" @click="isSelected('two')">首付还款中</span></p>
786817560's avatar
786817560 committed
29 30 31
        <p><span :class="{'selected':selected === 'three'}" @click="isSelected('three')">还款中</span></p>
        <p><span :class="{'selected':selected === 'four'}" @click="isSelected('four')">已结清</span></p>
      </div>
24776's avatar
24776 committed
32

786817560's avatar
786817560 committed
33
      <div class="search">
786817560's avatar
786817560 committed
34
        <input v-model="searchInput" type="text" placeholder="请输入合同号/承租人名称">
786817560's avatar
786817560 committed
35
      </div>
24776's avatar
24776 committed
36

786817560's avatar
786817560 committed
37
    </div>
786817560's avatar
786817560 committed
38 39
    <!-- 全部合同记录 -->
    <scroll
786817560's avatar
786817560 committed
40
      v-if="data!==null"
786817560's avatar
786817560 committed
41
      ref="scroll"
786817560's avatar
786817560 committed
42
      :updateData="[showLists]"
786817560's avatar
786817560 committed
43
      :pullUp="true"
786817560's avatar
786817560 committed
44
      @pullingUp="loadMore"
786817560's avatar
786817560 committed
45 46
    >
      <div class="pay-content">
786817560's avatar
786817560 committed
47
        <div v-for="(item,index) in showLists" :key="index" class="contract-item">
786817560's avatar
786817560 committed
48 49 50
          <div class="header">
            <img src="@/assets/contractRepayment/contract.png" alt="">
            <h2>{{ item.project_number }}</h2>
786817560's avatar
786817560 committed
51
            <!-- 状态用类名控制  待还款orange,待签约green,还款中blue,已结清black -->
786817560's avatar
786817560 committed
52 53 54 55 56 57 58 59 60 61 62 63
            <div v-if="selected === 'all'">
              <p v-if="item.contract_status_n === '待首付'" class="green">待首付</p>
              <p v-if="item.contract_status_n === '首付还款中'" class="orange">首付还款中</p>
              <p v-if="item.contract_status_n === '还款中'" class="blue">还款中</p>
              <p v-if="item.contract_status_n === '已结清'" class="black">已结清</p>
            </div>
            <div v-if="selected !== 'all'">
              <p v-if="item.contract_status_n === '待首付'" class="green">待首付</p>
              <p v-if="item.contract_status_n === '首付还款中'" class="orange">首付还款中</p>
              <p v-if="item.contract_status_n === '还款中'" class="blue">还款中</p>
              <p v-if="item.contract_status_n === '已结清'" class="black">已结清</p>
            </div>
786817560's avatar
786817560 committed
64 65 66 67 68
          </div>
          <div class="center">
            <div><span>承租人</span><p>{{ item.bp_name }}</p></div>
            <div><span>年利率</span><p>{{ item.int_rate_n }}</p></div>
            <div><span>期限</span><p>{{ item.lease_times }}</p></div>
786817560's avatar
786817560 committed
69
            <div><span>融资金额</span><p class="bold">{{ parseFloat(item.finance_amount).toFixed(2) | currency }}</p></div>
786817560's avatar
786817560 committed
70
            <span class="red">{{ item.con_overdue_status }}</span>
786817560's avatar
786817560 committed
71 72 73 74 75 76
            <section @click="toRepayDetail(item.project_id)">
              <img src="@/assets/contractRepayment/view.png" alt="">
              <span>查看合同明细</span>
            </section>
          </div>
        </div>
786817560's avatar
786817560 committed
77 78
      </div>
    </scroll>
24776's avatar
24776 committed
79 80 81 82 83 84 85 86 87 88 89
  </h-view>
</template>

<script>

export default {
  name: 'ContractRecords',
  components: {
  },
  data () {
    return {
786817560's avatar
786817560 committed
90
      // data: null, // 无记录时
24776's avatar
24776 committed
91
      data: 1,
786817560's avatar
786817560 committed
92
      showLists: [],
786817560's avatar
786817560 committed
93
      lists: [], // 全部记录
24776's avatar
24776 committed
94
      selected: 'all',
786817560's avatar
786817560 committed
95 96 97 98
      unSignedLists: [], // 待签约
      unRepayLists: [], // 待还款
      repayingLists: [], // 还款中
      repayedLists: [], // 已结清
786817560's avatar
786817560 committed
99 100
      pagenum: 1,
      searchInput: '',
786817560's avatar
786817560 committed
101
      contract_status_n: '全部', // 全部/待首付/首付还款中/还款中/已结清
24776's avatar
24776 committed
102 103 104
    }
  },
  computed: {},
786817560's avatar
786817560 committed
105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128
  watch: {
    selected () {
      if (this.selected === 'all') {
        this.showLists = this.lists
      } else if (this.selected === 'one') {
        this.showLists = this.unSignedLists
      } else if (this.selected === 'two') {
        this.showLists = this.unRepayLists
      } else if (this.selected === 'three') {
        this.showLists = this.repayingLists
      } else if (this.selected === 'four') {
        this.showLists = this.repayedLists
      }
    },
    searchInput () {
      let vm = this
      if (vm.timeout) {
        clearTimeout(vm.timeout)
      }
      vm.timeout = setTimeout(() => {
        vm.search()
      }, 1000)
    },
  },
786817560's avatar
786817560 committed
129 130 131
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (from.name === 'HomePage') {
786817560's avatar
786817560 committed
132
        vm.selected = 'all'
786817560's avatar
786817560 committed
133 134
        vm.pagenum = 1
        vm.searchInput = ''
786817560's avatar
786817560 committed
135
        vm.contract_status_n = '全部'
786817560's avatar
786817560 committed
136 137 138 139
        vm.recordQuery()
      }
    })
  },
24776's avatar
24776 committed
140
  methods: {
786817560's avatar
786817560 committed
141 142
    // 合同明细 val: project_id
    toRepayDetail (val) {
24776's avatar
24776 committed
143 144
      this.$router.push({
        name: 'RepayDetail',
786817560's avatar
786817560 committed
145 146 147
        params: {
          project_id: val,
        },
24776's avatar
24776 committed
148 149 150 151 152
      })
    },
    isSelected (name) {
      this.selected = name
    },
786817560's avatar
786817560 committed
153 154 155 156 157 158
    // 合同记录
    recordQuery () {
      let vm = this
      let url = $config.basePath + 'con_contract_list'
      let param = {
        user_phone: window.localStorage.user_phone,
786817560's avatar
786817560 committed
159 160 161
        searchInput: vm.searchInput,
        pagenum: vm.pagenum,
        pagesize: 10,
786817560's avatar
786817560 committed
162
        contract_status_n: vm.contract_status_n,
786817560's avatar
786817560 committed
163 164 165 166 167 168 169 170 171 172 173
      }
      vm.hlsPopup.showLoading('数据加载中')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          if (res.lists.length === 0) {
            vm.data = null
          } else {
            vm.data = 1
          }
          vm.lists = res.lists
786817560's avatar
786817560 committed
174
          vm.classify()
786817560's avatar
786817560 committed
175
          if (res.lists.length >= 0 && res.lists.length < 10) {
176 177
            vm.$refs.scroll.update(true)
          }
786817560's avatar
786817560 committed
178 179 180 181 182
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
786817560's avatar
786817560 committed
183 184 185 186 187 188 189 190 191
    // 分类
    classify () {
      let vm = this
      vm.showLists = vm.lists
      vm.unSignedLists = vm.lists.filter(item => item.contract_status_n === '待首付') // 待签约
      vm.unRepayLists = vm.lists.filter(item => item.contract_status_n === '首付还款中') // 待还款
      vm.repayingLists = vm.lists.filter(item => item.contract_status_n === '还款中') // 还款中
      vm.repayedLists = vm.lists.filter(item => item.contract_status_n === '已结清') // 已结清
    },
786817560's avatar
786817560 committed
192 193 194 195 196 197 198 199 200 201 202 203 204
    loadMore () {
      let vm = this
      vm.pagenum++
      let url = $config.basePath + 'con_contract_list'
      let param = {
        user_phone: window.localStorage.user_phone,
        searchInput: vm.searchInput,
        pagenum: vm.pagenum,
        pagesize: 10,
      }
      vm.hlsPopup.showLoading('数据加载中')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
786817560's avatar
786817560 committed
205
        let returnData = []
786817560's avatar
786817560 committed
206
        if (res.result === 'S') {
786817560's avatar
786817560 committed
207 208 209 210 211 212 213 214 215 216 217 218 219 220 221
          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)
          }
          vm.classify()
786817560's avatar
786817560 committed
222 223 224 225 226
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
786817560's avatar
786817560 committed
227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249
    search () {
      let vm = this
      vm.pagenum = 1
      let url = $config.basePath + 'con_contract_list'
      let param = {
        user_phone: window.localStorage.user_phone,
        searchInput: vm.searchInput,
        pagenum: vm.pagenum,
        pagesize: 10,
      }
      vm.hlsPopup.showLoading('数据加载中')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        vm.selected = 'all'
        vm.lists = res.lists
        vm.classify()
        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)
        }
      })
    },
24776's avatar
24776 committed
250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289
  },
}
</script>
<style lang='less' >
#contract-records {

  .tab {
    display: flex;
    background-color: #fff;
    padding: 6px 8px 4px 6px;

    p {
      text-align: center;
      flex: auto;

      span {
        display: block;
        padding: 6px 0;
        background-color: #fff;
        font-family: PingFangSC-Regular;
        font-size: 15px;
        color: #656464;
      }

      span.selected {
        background: rgba(29,63,255,.2);
        border-radius: 20px;
        color: #1D3FFF;
        font-family: PingFangSC-Semibold;
        font-weight: 700;
      }
    }
  }

  .search {
    background-color: #fff;
    padding: 8px 12px;
    position: relative;

    input {
786817560's avatar
786817560 committed
290 291 292
      background: url("../../assets/contractStart/search1.png") 320px no-repeat;
      background-size: 16px 16px;
      background-color: rgba(239,239,239,0.55);
24776's avatar
24776 committed
293 294 295
      padding-left: 12px;
      border-radius: 4px;
      height: 36px;
786817560's avatar
786817560 committed
296
      width: 100%;
24776's avatar
24776 committed
297 298 299 300 301 302
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #888C8F;
    }

    input::placeholder {
786817560's avatar
786817560 committed
303
      font-family: PingFangSC-Regular;
24776's avatar
24776 committed
304 305
      font-size: 14px;
      color: #888C8F;
786817560's avatar
786817560 committed
306
      letter-spacing: 0;
24776's avatar
24776 committed
307 308
    }

786817560's avatar
786817560 committed
309 310 311 312 313
    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;
24776's avatar
24776 committed
314 315 316 317
    }
  }

  .pay-content {
786817560's avatar
786817560 committed
318
    padding: 8px 8px;
24776's avatar
24776 committed
319 320 321
    .contract-item {
      height: 208px;
      background-color: #fff;
786817560's avatar
786817560 committed
322
      margin-bottom: 8px;
24776's avatar
24776 committed
323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471

      .header {
        position: relative;
        height: 44px;

        img {
          position: absolute;
          width: 30px;
          height: 30px;
          left: 10px;
          top: 8px;
        }

        h2 {
          position: absolute;
          top: 13px;
          left: 50px;
          font-family: PingFangSC-Semibold;
          font-size: 15px;
          color: #4B4A4B;
          letter-spacing: 0;
          margin: 0px;
          font-weight: 700;
        }

        p {
          position: absolute;
          right: 20px;
          top: 13px;
          width: 57px;
          height: 21px;
          line-height: 19px;
          text-align: center;
          border-radius: 2px;
          font-family: PingFangSC-Regular;
          font-size: 14px;
        }

        p.orange {
          border: 1px solid #FDB62F;
          color: #FDB62F;
        }

        p.blue {
          color: #1D3FFF;
          border: 1px solid #1D3FFF;
        }

        p.green {
          color: #1BA261;
          border: 1px solid #1BA261;
        }

        p.black {
          color: #4B4A4B;
          border: 1px solid #4B4A4B;
        }
      }

      .center {
        padding-left: 50px;
        padding-right: 24px;
        position: relative;

        div {
          display: flex;
          padding: 8px 0;

          span {
            flex:1;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #4B4A4B;
          }

          p {
            flex:2;
            text-align: right;
            font-family: Verdana;
            font-size: 14px;
            color: #4B4A4B;
          }

          p.bold {
            font-weight: 700;
            font-family: Verdana-Bold;
          }
        }

        div:first-child {
          border-top: 1px solid #F3F3F7;
        }

        span.red{
          margin-top: 10px;
          position: relative;
          top: 10px;
          color: #F04747;
          font-family: PingFangSC-Regular;
          font-size: 14px;
        }

        span.red::before {
          position: absolute;
          bottom: -1px;
          content: "";
          width: 100%;
          height: 4px;
          background-color: rgb(255, 169, 169);
        }

        section {
          position: absolute;
          width: 123px;
          height: 30px;
          right: 24px;
          bottom: -15px;
          line-height: 30px;
          background: rgba(33, 37, 76,.1);
          border-radius: 4px;

          img {
            width:16px;
            position: absolute;
            top: 8px;
            left: 8px;
          }

          span {
            position: absolute;
            left: 32px;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #21254C;
          }
        }
      }
    }
  }

  .null {
    position: relative;

    .display {
      width:150px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 100px;
786817560's avatar
786817560 committed
472
      z-index: 999;
24776's avatar
24776 committed
473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501
      img {
        width:150px;
      }

      p {
        text-align: center;
        opacity: 0.7;
        font-family: PingFangSC-Semibold;
        font-size: 17px;
        color: #21254C;
        letter-spacing: 0;
        font-weight: 700;
        margin-top: 10px;
      }

      div {
        width: 140px;
        height: 32px;
        background: #1D3FFF;
        border-radius: 4px;
        color: white;
        line-height: 32px;
        text-align: center;
        margin-left: 5px;
        margin-top: 20px;
      }
    }

  }
786817560's avatar
786817560 committed
502 503 504 505 506 507 508 509 510 511 512 513 514
  .wrap {
    width: 100%;
    position: absolute;
    z-index: 100
  }
.content{
    position: absolute;
      top:0;
  }
  .scrollContent{
     padding-top: 2.60rem;
      padding-bottom: 20px;
    }
24776's avatar
24776 committed
515
}
786817560's avatar
786817560 committed
516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542
.platform-ios {
    #contract-records {
      .scrollContent {
        padding-top: 3rem;
      }
    }
  }
  // iPhoneX适配
  @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
    .platform-ios {
      #contract-records {
        .scrollContent {
          padding-top: 3.4rem;
        }
      }
    }
  }
  // iPhoneXR适配
  @media (device-width: 414px) and (device-height: 896px) {
    .platform-ios {
      #contract-records {
        .scrollContent {
          padding-top: 3.8rem;
        }
      }
    }
  }
24776's avatar
24776 committed
543
</style>