pay-entry.vue 21.9 KB
Newer Older
李晓兵's avatar
李晓兵 committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<template>
  <h-view id="pay-entry" class="public-style">
    <transition name="trans">
      <div v-show="downNum" class="modal-show">
        <div class="down">
          <p>提示</p>
          <span>您好,当前余额不足,请重新支付!</span>
          <button @click="downNum=false">确定</button>
        </div>
      </div>
    </transition>
    <transition name="trans">
      <div v-show="show" class="modal-show-bank">
        <div class="down">
          <div class="top">
            <img src="@/assets/payment/back.png" @click="show=false" >
linxin's avatar
linxin committed
17
            <span>选择支付渠道</span>
李晓兵's avatar
李晓兵 committed
18 19 20 21
          </div>
          <scroll>
            <list-item :item-height="56" class="pay-way">
              <item
linxin's avatar
linxin committed
22
                v-for="(item,index) in payTypeList"
李晓兵's avatar
李晓兵 committed
23 24
                :proportion="[7,1,1]"
                :key="index"
李晓兵's avatar
李晓兵 committed
25
                @click.native="isSelect(`three${index}`);ischeck(item)"><!--;confirmToPay(item)-->
李晓兵's avatar
李晓兵 committed
26 27
                <div slot="name" style="flex=3">
                  <img :src="selectImg(item)" alt class="icon" >
linxin's avatar
linxin committed
28
                  {{ item.code_name }}
李晓兵's avatar
李晓兵 committed
29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
                  <img
                    v-show="item.recommand"
                    class="push"
                    src="@/assets/payment/push.png"
                  >
                </div>
                <section slot="content">
                  <img v-show="select === `three${index}`" src="@/assets/payment/select.png" alt >
                  <img v-show="select !== `three${index}`" src="@/assets/payment/unselect.png" alt >
                </section>
              </item>
            </list-item>
          </scroll>
        </div>
      </div>
44
    </transition>
李晓兵's avatar
李晓兵 committed
45 46 47 48 49
    <transition name="trans">
      <div v-show="confirm" class="modal-show-confirm">
        <div class="down">
          <div class="top">
            <img src="@/assets/payment/back.png" @click="confirm=false" >
linxin's avatar
linxin committed
50
            <span>确认付款方式</span>
李晓兵's avatar
李晓兵 committed
51 52 53 54 55 56 57
          </div>
          <div class="info">
            <div class="info-item">
              <span>还款金额</span>
              <span>¥{{ money |currency }}</span>
            </div>
            <div class="interest">
linxin's avatar
linxin committed
58
              <span>本次交易收取{{ rate }}%手续费</span>
李晓兵's avatar
李晓兵 committed
59 60
            </div>
            <div class="info-item">
linxin's avatar
linxin committed
61
              <span>手续费</span>
李晓兵's avatar
李晓兵 committed
62 63
              <span>{{ serviceCharge |currency }}</span>
            </div>
linxin's avatar
linxin committed
64 65
            <div class="info-item" @click="show=true">
              <span>支付渠道</span>
李晓兵's avatar
李晓兵 committed
66
              <span>
linxin's avatar
linxin committed
67 68
                <img :src="payTypeObj.img" >
                <span>{{ payTypeObj.payType_n }}</span>
李晓兵's avatar
李晓兵 committed
69 70
                <img class="arrow" src="@/assets/payment/go.png" >
              </span>
linxin's avatar
linxin committed
71 72
            </div>
            <!-- <list-item :item-height="44">
linxin's avatar
linxin committed
73 74 75 76 77
              <item :showArrow="true" @click.native="selectPayType">
                <div slot="name">支付渠道</div>
                <input
                  slot="content" v-model="payTypeObj.payType_n" readonly>
              </item>
linxin's avatar
linxin committed
78
            </list-item> -->
李晓兵's avatar
李晓兵 committed
79 80
          </div>
          <bottom-tab>
linxin's avatar
linxin committed
81
            <tab-button class="foot" @click.native="checkPay">去支付</tab-button>
李晓兵's avatar
李晓兵 committed
82 83 84 85 86 87 88
          </bottom-tab>
        </div>
      </div>
    </transition>
    <h-header :proportion="[5,1,1]" class="bar-custom">
      <div slot="left" class="h-header-btn">
        <img src="@/assets/userBind/arrow.png" @click="$routeGo()" >
linxin's avatar
linxin committed
89
        <span>{{ title }}</span>
李晓兵's avatar
李晓兵 committed
90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108
      </div>
    </h-header>
    <h-content class="entry-content">
      <div class="amount">
        <p>{{ userName }}</p>
        <div>{{ sumMoney |currency }}</div>
      </div>
      <div class="info">
        <div class="info-item">
          <span>还款金额</span>
          <span>¥{{ parseFloat(money).toFixed(2) |currency }}</span>
        </div>
        <div class="interest">
          <span>本次交易收取{{ rate }}%手续费</span>
        </div>
        <div class="info-item">
          <span>手续费</span>
          <span>{{ serviceCharge }}</span>
        </div>
linxin's avatar
linxin committed
109
        <!-- <list-item :item-height="44">
linxin's avatar
linxin committed
110 111 112 113 114
          <item :showArrow="true" @click.native="selectPayType">
            <div slot="name">支付渠道</div>
            <input
              slot="content" v-model="payTypeObj.payType_n" readonly>
          </item>
linxin's avatar
linxin committed
115 116 117
        </list-item> -->
        <div class="info-item" @click="show=true">
          <span>支付渠道</span>
李晓兵's avatar
李晓兵 committed
118
          <span>
linxin's avatar
linxin committed
119 120
            <img :src="payTypeObj.img" >
            <span>{{ payTypeObj.payType_n }}</span>
李晓兵's avatar
李晓兵 committed
121 122
            <img class="arrow" src="@/assets/payment/go.png" >
          </span>
linxin's avatar
linxin committed
123
        </div>
李晓兵's avatar
李晓兵 committed
124 125 126
      </div>
    </h-content>
    <bottom-tab>
linxin's avatar
linxin committed
127
      <tab-button class="foot" @click.native="affirm">确认订单</tab-button>
李晓兵's avatar
李晓兵 committed
128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149
    </bottom-tab>
  </h-view>
</template>

<script>
import zfb from '@/assets/payment/alipay.png'
import wx from '@/assets/payment/wx.png'
import js from '@/assets/payment/js.png'
import ny from '@/assets/payment/ly.png'
import pf from '@/assets/payment/pf.png'
import gd from '@/assets/payment/gd.png'
import gf from '@/assets/payment/gf.png'
import jt from '@/assets/payment/jt.png'
import gs from '@/assets/payment/gs.png'
import ms from '@/assets/payment/ms.png'
import pa from '@/assets/payment/pa.png'
import xy from '@/assets/payment/xy.png'
import yzcx from '@/assets/payment/yzcx.png'
import zg from '@/assets/payment/zg.png'
import zs from '@/assets/payment/zs.png'
import zx from '@/assets/payment/zx.png'
import bank from '@/assets/payment/bank.png'
linxin's avatar
linxin committed
150
import yinlian from '@/assets/payment/bind.png'
李晓兵's avatar
李晓兵 committed
151 152 153 154 155 156
export default {
  name: 'PayEntry',
  components: {},
  data () {
    return {
      money: '',
linxin's avatar
linxin committed
157
      wayShow: false,
158
      timer: null,
李晓兵's avatar
李晓兵 committed
159 160 161
      select: 'three0',
      name: '',
      sectctNong: false,
linxin's avatar
linxin committed
162 163
      pay_type: '',
      bank_account_id: '',
164
      isNongPay: false,
李晓兵's avatar
李晓兵 committed
165 166 167 168 169
      checkType: {
        img: '',
        bank_full_name: '',
        bank_account_num: '',
      },
linxin's avatar
linxin committed
170 171
      payTypeList: [],
      payTypeObj: {
linxin's avatar
linxin committed
172
        img: ny,
linxin's avatar
linxin committed
173 174 175
        payType: 'ABC_PAY',
        payType_n: '农行支付',
      },
李晓兵's avatar
李晓兵 committed
176 177
      confirm: false,
      show: false,
linxin's avatar
linxin committed
178
      showOutside: false,
李晓兵's avatar
李晓兵 committed
179 180
      downNum: false,
      recommand: false,
linxin's avatar
linxin committed
181
      userName: window.localStorage.getItem('bp_name'),
李晓兵's avatar
李晓兵 committed
182 183 184
      flag: false, // 用于判断是否有农业银行卡
      lists: [],
      nongBank: [], // 存农行卡
linxin's avatar
linxin committed
185 186
      notNongList: [],
      nongPayList: [],
李晓兵's avatar
李晓兵 committed
187 188 189
    }
  },
  computed: {
linxin's avatar
linxin committed
190 191 192 193 194 195 196
    title () {
      if (this.confirm) {
        return '支付中心'
      } else {
        return '确认订单'
      }
    },
linxin's avatar
linxin committed
197
    text () {
linxin's avatar
linxin committed
198
      if (this.payTypeObj.payType_n.indexOf('农行') !== -1) {
linxin's avatar
linxin committed
199
        return 'K码/K令支付'
linxin's avatar
linxin committed
200
      } else if (this.payTypeObj.payType_n.indexOf('农行') === -1) {
linxin's avatar
linxin committed
201 202 203
        return '银联支付'
      }
    },
李晓兵's avatar
李晓兵 committed
204 205 206 207
    serviceCharge () {
      return (this.money * (this.rate / 100)).toFixed(2)
    },
    rate () {
linxin's avatar
linxin committed
208
      return this.payTypeObj.payType_n.indexOf('农行') !== -1 ? 0.0 : 0.18
李晓兵's avatar
李晓兵 committed
209 210 211 212 213 214 215 216 217 218 219
    },
    sumMoney () {
      return (parseFloat(this.serviceCharge) + parseFloat(this.money)).toFixed(
        2
      )
    },
    newList () {
      let vm = this
      let notNong = vm.lists.filter(i => {
        return i.bank_full_name.indexOf('农业') === -1
      })
linxin's avatar
linxin committed
220 221 222 223 224 225
      // else {
      //   vm.select = 'one'
      //   vm.checkType.bank_full_name = '支付宝'
      //   vm.checkType.img = zfb
      //   vm.sectctNong = false
      // }
李晓兵's avatar
李晓兵 committed
226 227 228
      return notNong
    },
  },
linxin's avatar
linxin committed
229 230
  watch: {
    'payTypeObj.payType_n' () {
李晓兵's avatar
李晓兵 committed
231
    //  this.confirmToPay()
linxin's avatar
linxin committed
232 233
    },
  },
李晓兵's avatar
李晓兵 committed
234 235 236 237
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.confirm = false
      vm.show = false
238
      vm.showOutside = false
李晓兵's avatar
李晓兵 committed
239 240 241 242
      vm.downNum = false
      vm.name = from.name
      vm.getType()
      vm.nongBank = []
linxin's avatar
linxin committed
243
      vm.getPayType()
李晓兵's avatar
李晓兵 committed
244 245 246 247 248 249 250
    })
  },

  activated () {
    this.money = this.$route.params.money
  },
  methods: {
linxin's avatar
linxin committed
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
    selectPayType (e) {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.payTypeList,
        code: 'bp_type',
        object: {},
        returnItem: function (index, obj) {
          vm.payTypeObj.payType = obj.bp_type
          vm.payTypeObj.payType_n = obj.bp_type_n
        },
      })
    },
    getPayType () {
      let vm = this
      let url = process.env.basePath + 'payment_type_query'
      let param = {}
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.payTypeList = res.lists.map(item => {
            return {
              code: item.pay_type,
              code_name: item.pay_type_name,
            }
          })
        }
      })
    },
李晓兵's avatar
李晓兵 committed
280
    selectImg (e) {
linxin's avatar
linxin committed
281
      if (e.code_name.indexOf('农行') !== -1) {
李晓兵's avatar
李晓兵 committed
282 283
        e.recommand = true
        return ny
linxin's avatar
linxin committed
284 285
      } else if (e.code_name.indexOf('银联') !== -1) {
        return yinlian
李晓兵's avatar
李晓兵 committed
286 287 288 289 290 291 292 293 294 295
      }
    },
    selectLast (item) {
      let num = item.bank_account_num
      return num.substring(num.length - 4)
    },
    isSelect (way) {
      this.select = way
    },
    ischeck (way) {
linxin's avatar
linxin committed
296 297 298
      this.payTypeObj.payType = way.code
      this.payTypeObj.payType_n = way.code_name
      this.payTypeObj.img = this.selectImg(way)
李晓兵's avatar
李晓兵 committed
299 300
      this.show = false
    },
linxin's avatar
linxin committed
301 302
    confirmToPay (e) {
      let vm = this
linxin's avatar
linxin committed
303 304 305
      let randomString = Math.floor(Math.random() * 21)
      let url = process.env.basePath + 'update_order_info' + '&index' +
        `'${randomString}'`
linxin's avatar
linxin committed
306 307 308 309
      if (e) {
        vm.pay_type = e.pay_type
        vm.bank_account_id = e.bank_account_id
      }
linxin's avatar
linxin committed
310 311 312
      let param = {
        info: {
          order_id: vm.$route.params.order_id,
linxin's avatar
linxin committed
313
          fee: vm.serviceCharge,
linxin's avatar
linxin committed
314
          bank_account_id: '0',
linxin's avatar
linxin committed
315
          pay_type: vm.payTypeObj.payType,
linxin's avatar
linxin committed
316 317 318 319 320
        },
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        if (res.result === 'S') {
linxin's avatar
linxin committed
321
          vm.hlsPopup.hideLoading()
李晓兵's avatar
李晓兵 committed
322
          vm.checkPay()
linxin's avatar
linxin committed
323 324 325 326 327 328 329 330 331
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    checkPay () {
      let vm = this
      if (parseFloat(vm.sumMoney) === 0) {
        hlsPopup.showLongCenter('您支付的金额为0元')
linxin's avatar
linxin committed
332 333
      } else {
        vm.pay()
linxin's avatar
linxin committed
334 335
      }
    },
李晓兵's avatar
李晓兵 committed
336 337
    pay () {
      let vm = this
linxin's avatar
linxin committed
338 339 340 341
      let url = process.env.basePath + 'merchant_payment'
      let param = {
        order_id: vm.$route.params.order_id,
      }
342
      // hlsPopup.showLoading('请稍候')
linxin's avatar
linxin committed
343
      vm.$post(url, param).then(function (res) {
李晓兵's avatar
李晓兵 committed
344
        vm.hlsPopup.hideLoading()
linxin's avatar
linxin committed
345
        if (res.result === 'S') {
linxin's avatar
linxin committed
346 347 348
          if (res.return_code !== '0000') {
            hlsPopup.showLongCenter(res.error_message)
          } else {
linxin's avatar
linxin committed
349 350 351 352 353
            vm.$router.push({
              name: 'PayPage',
              params: {
                url: res.paymentURL,
                order_id: vm.$route.params.order_id,
linxin's avatar
linxin committed
354
                text: vm.text,
李晓兵's avatar
李晓兵 committed
355
                payType: vm.payTypeObj.payType,
linxin's avatar
linxin committed
356 357
              },
            })
linxin's avatar
linxin committed
358
          }
李晓兵's avatar
李晓兵 committed
359
        } else {
linxin's avatar
linxin committed
360
          hlsPopup.showLongCenter(res.message)
李晓兵's avatar
李晓兵 committed
361
        }
linxin's avatar
linxin committed
362
      })
李晓兵's avatar
李晓兵 committed
363 364
    },
    affirm () {
李晓兵's avatar
李晓兵 committed
365
     // this.confirm = true
linxin's avatar
linxin committed
366
      this.confirmToPay()
李晓兵's avatar
李晓兵 committed
367 368 369 370 371 372 373 374 375 376 377 378 379 380
    },
    changePage () {
      this.$router.push({
        name: 'Success',
        params: {
          userName: this.userName,
          money: this.$route.params.money,
        },
      })
    },
    getType () {
      let vm = this
      let url = process.env.basePath + 'payment_method_query'
      let param = {
linxin's avatar
linxin committed
381
        bp_id: window.localStorage.getItem('bp_id'),
李晓兵's avatar
李晓兵 committed
382 383 384 385 386 387
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.lists = res.lists
linxin's avatar
linxin committed
388 389 390 391 392 393 394 395 396 397 398 399 400
          vm.nongBank = []
          vm.lists.forEach((item, i) => {
            if (item.bank_full_name.indexOf('农业') !== -1) {
              vm.nongBank.push(vm.lists[i])
              vm.flag = true
            }
          })
          if (vm.flag) {
            vm.select = 'nong0'
            vm.checkType.bank_full_name = '农业银行'
            vm.checkType.img = ny
            vm.checkType.bank_account_num = vm.nongBank[0].bank_account_num
            vm.sectctNong = true
linxin's avatar
linxin committed
401 402 403
            // vm.confirmToPay(vm.nongBank[0])
            vm.pay_type = vm.nongBank[0].pay_type
            vm.bank_account_id = vm.nongBank[0].bank_account_id
linxin's avatar
linxin committed
404 405 406 407 408 409
          } else if (!vm.flag && vm.lists.length !== 0) {
            vm.select = 'three0'
            vm.checkType.bank_full_name = vm.newList[0].bank_full_name
            vm.checkType.img = vm.selectImg(vm.newList[0])
            vm.checkType.bank_account_num = vm.newList[0].bank_account_num
            vm.sectctNong = true
linxin's avatar
linxin committed
410 411 412
            vm.pay_type = vm.lists[0].pay_type
            vm.bank_account_id = vm.lists[0].bank_account_id
            // vm.confirmToPay(vm.lists[0])
linxin's avatar
linxin committed
413 414 415 416 417
          } else if (!vm.flag && vm.lists === 0) {
            vm.sectctNong = false
            hlsPopup.showLongCenter('请先绑定银行卡')
            vm.checkType.bank_full_name = '(无)'
          }
李晓兵's avatar
李晓兵 committed
418 419 420 421 422 423 424 425 426 427
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
  },
}
</script>
<style lang='less' >
#pay-entry {
428 429 430
  .hls-list-item{
    margin-bottom: 2px !important;
  }
linxin's avatar
linxin committed
431
  .vue-better-scroll__wrapper {
李晓兵's avatar
李晓兵 committed
432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453
    padding: 0;
  }
  .trans-enter-active,
  .trans-leave-active {
    transition: opacity 0.5s;
  }
  .trans-enter,
  .trans-leave-active {
    opacity: 0;
  }
  .modal-show-confirm {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    z-index: 900;
    background-color: rgba(56, 63, 69, 0.3);
    justify-content: center;
    align-items: center;
    .down {
      height: 466px;
      width: 100%;
linxin's avatar
linxin committed
454 455
      position: relative;
      top: 18%;
李晓兵's avatar
李晓兵 committed
456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471
      background: #fff;
      border-radius: 12px 12px 0 0;
      overflow: scroll;
      display: flex;
      align-items: center;
      flex-direction: column;
      .top {
        width: 330px;
        height: 54px;
        display: flex;
        align-items: center;
        background-color: #fff;
        img {
          width: 20px;
        }
        span {
linxin's avatar
linxin committed
472
          margin-left: 30%;
李晓兵's avatar
李晓兵 committed
473 474 475 476 477 478 479 480 481 482 483 484
          font-family: PingFangSC-Semibold;
          font-size: 16px;
          color: #656464;
          letter-spacing: 0.49px;
          text-align: center;
        }
      }
      .info {
        //margin-top: 60px;
      }
    }
  }
linxin's avatar
linxin committed
485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 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 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572
  .modal-show-payWay{
     width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    z-index: 910;
    background-color: rgba(56, 63, 69, 0.3);
    justify-content: center;
    align-items: center;
    .down {
      height: 466px;
      width: 100%;
      position: relative;
      top: 18%;
      background: #fff;
      border-radius: 12px 12px 0 0;
      overflow: scroll;
      display: flex;
      align-items: center;
      flex-direction: column;
      .top {
        left: 24px;
        width: 330px;
        height: 54px;
        display: flex;
        align-items: center;
        background-color: #fff;
        img {
          width: 20px;
        }
        span {
          margin-left: 38%;
          font-family: PingFangSC-Semibold;
          font-size: 16px;
          color: #656464;
          letter-spacing: 0.49px;
          text-align: center;
        }
      }
      .pay-way {
        //width: 350px;
        //margin: 0 auto;
        width: 100%;
        padding: 0 4% 0 4%;
        background: #fff;
        .hls-item {
          padding-left: 12px;
          .add-name {
            flex: 3;
            line-height: 56px;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #656464;
            div {
              display: flex;
              justify-content: center;
              align-items: center;
            }
            .icon1 {
              width: 34px;
              height: 34px;
              display: block;
              float: left;
              margin-top: 10px;
              margin-right: 5px;
            }
            .icon2 {
              width: 32px;
              display: block;
              float: left;
              margin-top: 12px;
              margin-right: 8px;
            }
            .icon {
              width: 30px;
              margin: 0 8px 0 3px;
            }
          }

          .add-content {
            img {
              width: 21px;
            }
          }
        }
      }
    }
  }
李晓兵's avatar
李晓兵 committed
573 574 575 576 577 578 579 580 581 582 583 584
  .modal-show-bank {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    z-index: 910;
    background-color: rgba(56, 63, 69, 0.3);
    justify-content: center;
    align-items: center;
    .down {
      height: 466px;
      width: 100%;
linxin's avatar
linxin committed
585 586
      position: relative;
      top: 18%;
李晓兵's avatar
李晓兵 committed
587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615
      background: #fff;
      border-radius: 12px 12px 0 0;
      overflow: scroll;
      display: flex;
      align-items: center;
      flex-direction: column;
      .top {
        left: 24px;
        width: 330px;
        height: 54px;
        display: flex;
        align-items: center;
        background-color: #fff;
        img {
          width: 20px;
        }
        span {
          margin-left: 38%;
          font-family: PingFangSC-Semibold;
          font-size: 16px;
          color: #656464;
          letter-spacing: 0.49px;
          text-align: center;
        }
      }
      .pay-way {
        //width: 350px;
        //margin: 0 auto;
        width: 100%;
linxin's avatar
linxin committed
616
        padding: 0 4% 0 4%;
李晓兵's avatar
李晓兵 committed
617 618 619 620 621 622 623 624 625
        background: #fff;
        .hls-item {
          padding-left: 12px;
          .add-name {
            flex: 3;
            line-height: 56px;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #656464;
linxin's avatar
linxin committed
626
            div {
李晓兵's avatar
李晓兵 committed
627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647
              display: flex;
              justify-content: center;
              align-items: center;
            }
            .icon1 {
              width: 34px;
              height: 34px;
              display: block;
              float: left;
              margin-top: 10px;
              margin-right: 5px;
            }
            .icon2 {
              width: 32px;
              display: block;
              float: left;
              margin-top: 12px;
              margin-right: 8px;
            }
            .icon {
              width: 30px;
linxin's avatar
linxin committed
648
              /* display: block;
李晓兵's avatar
李晓兵 committed
649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727
              float: left;
              position: relative;*/
              margin: 0 8px 0 3px;
            }
          }

          .add-content {
            img {
              width: 21px;
            }
          }
        }
      }
    }
  }
  .info {
    width: 100%;
    height: 226px;
    background-color: #fff;
    .info-item {
      height: 46px;
      width: 335px;
      margin: 0 auto;
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .arrow {
        margin-right: -10px;
      }
      img {
        width: 17px;
        margin-right: 10px;
      }
      span:first-child {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: rgba(56, 63, 69, 0.6);
        letter-spacing: 0;
        line-height: 18px;
      }
      span:last-child {
        font-family: Verdana;
        font-size: 14px;
        color: #383f45;
        letter-spacing: 0;
        line-height: 18px;
        display: flex;
        align-items: center;
      }
    }
    .info-item:nth-of-type(1)::after {
      content: "";
      display: block;
      position: absolute;
      right: 20px;
      top: 25px;
      border: 10px solid #fff;
      border-left-color: transparent;
      border-right-color: transparent;
      border-top-color: transparent;
      border-bottom-color: rgba(75, 74, 75, 0.1);
    }
    .info-item:nth-of-type(1) {
      border-top: 1px solid #d9dbdf;
    }
    .interest {
      width: 100%;
      height: 37px;
      line-height: 37px;
      font-family: PingFangSC-Medium;
      font-size: 11px;
      color: #4b4a4b;
      letter-spacing: 0;
      text-indent: 215px;
      background-color: rgba(75, 74, 75, 0.1);
    }
  }
  .push {
linxin's avatar
linxin committed
728
    /* position: absolute;
李晓兵's avatar
李晓兵 committed
729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844
    top: 10px;
    margin-left: 10px;*/
    width: 35px;
  }
  .modal-show {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    z-index: 900;
    background-color: rgba(56, 63, 69, 0.3);
    justify-content: center;
    align-items: center;
    .down {
      position: relative;
      width: 301px;
      height: 162px;
      display: flex;
      justify-content: center;
      flex-flow: column wrap;
      align-items: center;
      background-size: 301px 24.7px;
      background-color: #fff;
      border-radius: 8px;
      p {
        font-family: PingFangSC-Semibold;
        font-size: 16px;
        color: #1d3fff;
        margin-top: 16px;
        flex: 2;
      }
      span {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #383f45;
        flex: 3;
        letter-spacing: 0;
        margin-top: 16px;
      }
      button {
        width: 159px;
        flex: 2;
        margin-bottom: 16px;
        height: 40px;
        background-color: @headerColor;
        font-family: PingFangSC-Semibold;
        font-size: 15px;
        color: #fafafa;
        line-height: 20px;
      }
    }
  }
  .entry-content {
    .amount {
      height: 166px;
      background-color: #fff;
      padding-top: 55px;
      text-align: center;
      p {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #656464;
        letter-spacing: 0;
      }

      div {
        font-family: PingFangSC-Semibold;
        font-size: 24px;
        color: #383f45;
        letter-spacing: 0.86px;
        font-weight: 700;
        margin-top: 10px;
      }
    }

    .pay-way {
      .hls-item {
        padding-left: 12px;
        .add-name {
          flex: 3;
          line-height: 56px;
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #656464;

          .icon1 {
            width: 34px;
            height: 34px;
            display: block;
            float: left;
            margin-top: 10px;
            margin-right: 5px;
          }
          .icon2 {
            width: 32px;
            display: block;
            float: left;
            margin-top: 12px;
            margin-right: 8px;
          }
        }

        .add-content {
          img {
            width: 21px;
          }
        }
      }
    }
  }
  .foot {
    color: #fff;
    background-color: @headerColor;
  }
}
</style>