caimei-distribution-www/src/views/pay/paymentOnline.vue

<template>
  <div class="online">
    <nav-bar title="收银台" @click-left="$router.back()" />
    <div class="content">
      <div class="payIcon">
        <div class="payList">
          <div class="text" @click="handlerDiscern">支付记录</div>
        </div>
        <div class="shouldPay">
          <div class="payment">
            <div class="label">本次支付金额</div>
            <div class="money"><span>￥</span>{{ totalAmount | handlerPayFixed }}</div>
          </div>
          <div class="payment">
            <div class="label">应付剩余</div>
            <div class="money"><span>￥</span>{{ totalAmount | handlerPayFixed }}</div>
          </div>
        </div>
      </div>
      <div class="payCard">
        <div class="amount">
          <div class="label">待付金额</div>
          <div class="money">￥{{ obligation | handlerPayFixed }}</div>
        </div>
        <div class="amount">
          <div class="label">应付总额</div>
          <div class="money">￥{{ totalAmount | handlerPayFixed }}</div>
        </div>
        <div class="amount">
          <div class="label">已支付金额</div>
          <div class="money">￥{{ shopOrder.receiptAmount | handlerPayFixed }}</div>
        </div>
      </div>
      <div class="bank-pay">
        <van-cell title="添加银行卡快捷支付" is-link to="addBanks?type=2" v-if="false"/>
        <van-radio-group v-model="radio">
          <van-cell-group>
            <div v-if="bankList.length !== 0">
              <van-cell :title="item.bankName" clickable @click="handlerPay(item)" :icon="'https://static.caimei365.com/app/img/pay/icon_' +
              item.bankCode +
              '_@2x.png'" v-for="item in bankList" :key="item.id">
                <template #right-icon>
                  <van-radio :name="item.id" />
                </template>
              </van-cell>
              <van-cell title="添加别的银行卡快捷支付" is-link :to="`addBanks?type=2&userId=${shopOrder.userId}`" />
            </div>
            <van-cell :title="item.title" clickable @click="handlerPay(item)" :icon="item.icon" v-for="item in payList" :key="item.id">
              <template #right-icon>
                <van-radio :name="item.id" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>
      <div class="tips">
        使用任何一种线上支付方式支付全部金额后，供应商会在24
小时后发货（周末、节假日顺延）。
      </div>
    </div>
    <div class="bank-btn">
      <van-button color="#FF5B00" @click="bankQuickPay">{{ payName || '微信支付' }}</van-button>
    </div>
    <bank-link-vue :show="showLink" @handlerShowDialog="handlerShowDialog" :bankLink="handlerPayLink"/>
    <discern-popup :discernReceipt="discernReceipt" ref="discern" />
  </div>
</template>

<script>
import BankLinkVue from './components/bankLinkVue'
import discernPopup from './components/discern-popup'
import { payCheckout, getBankList, bankQuickPay, payLink } from '@/api/institutionApi/pay.js'

export default {

  components: { BankLinkVue, discernPopup },
  data () {
    return {
      bankList: [],
      totalAmount: 0,
      obligation: 0,
      radio: 1,
      shopOrder: {},
      userId: '',
      payName: '',
      bankForm: {
        unpaidAmount: '',
        shopOrderId: '',
        payType: 2
      },
      payForm: {},
      payList: [
        {
          id: 1,
          title: '微信支付',
          icon: 'https://static.caimei365.com/app/mini-distribution/wechat-pay.png'
        },
        {
          id: 2,
          title: '个人网银支付',
          icon: 'https://static.caimei365.com/app/mini-distribution/net-pay.png'
        }
      ],
      discernReceipt: [],
      handlerPayLink: '',
      showLink: false
    }
  },
  filters: {
    handlerPayFixed (val) {
      return (val * 1).toFixed(2)
    }
  },
  computed: {
    shopOrderId () {
      return this.$route.query.shopOrderId
    },
    quickForm () {
      if (this.radio * 1 > 2) {
        return Object.assign(this.payForm, {
          userId: this.shopOrder.userId,
          quickPayFlag: 1,
          payAmount: this.shopOrder.totalAmount,
          shopOrderId: this.shopOrder.shopOrderId
        })
      }
      return {}
    }
  },
  watch: {
    radio (val) {
      if (val * 1 > 2) {
        this.payForm = this.bankList.filter(e => e.id === val)[0]
      }
    }
  },
  mounted () {
    this.payCheckout()
  },
  methods: {
    async payCheckout () {
      const data = await payCheckout({ shopOrderId: this.shopOrderId })
      const data2 = await getBankList({ userId: data.shopOrder.userId })
      this.totalAmount = data.shopOrder.totalAmount.toFixed(2) || 0
      this.obligation = data.shopOrder.obligation.toFixed(2) || 0
      this.userId = data.shopOrder.userId
      this.shopOrder = data.shopOrder
      this.bankList = data2
      this.radio = data2.length > 0 ? this.bankList[0].id : 1
      this.payForm = data2.length > 0 ? this.payForm[0] : {}
      this.discernReceipt = data.discernReceipt
    },
    async bankQuickPay () {
      if (this.radio === 2) {
        try {
          const data = await payLink({ unpaidAmount: this.totalAmount, shopOrderId: this.shopOrderId, payType: 2 })
          this.handlerPayLink = data
          this.showLink = true
        } catch (error) {
          console.log(error)
        }
      } else if (this.radio === 1) {
        this.$router.push(`/wechatpay?shopOrderId=${this.shopOrderId}&payAmount=${this.totalAmount}`)
      } else {
        try {
          await bankQuickPay(this.quickForm)
        } catch (error) {
          console.log(error)
        }
      }
    },
    handlerPay ($event) {
      this.payName = $event.title || $event.bankName
      this.radio = $event.id
    },
    handlerShowDialog ($event) {
      this.showLink = false
    },
    handlerDiscern () {
      this.$refs.discern.show = true
    }
  }
}
</script>

<style lang="scss" scoped>
.online {
  min-height: 100vh;
  .content {
    position: relative;
    .payIcon {
      height: 50vw;
      background: url('https://static.caimei365.com/app/mini-distribution/pay-bg.png');
      background-size: 100% 100%;
      padding: 5.3vw 4.3vw;
      box-sizing: border-box;
      .payList {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        .text {
          font-size: 3.2vw;
          color: #fff;
          margin-right: 1vw;
          position: relative;
          &::after {
            position: absolute;
            right: -2vw;
            top: 0;
            content: '\276D';
          }
        }
      }
      .shouldPay {
        display: grid;
        grid-template-rows: 1;
        grid-template-columns: repeat(2, 1fr);
        margin-top: 5.3vw;
        .payment {
          .label {
            font-size: 3.7vw;
            color: #fff;
            font-size: 3.7vw;
            margin-bottom: 2vw;
          }
          .money {
            display: flex;
            color: #fff;
            font-size: 5.3vw;
            font-weight: 600;
            align-items: center;
            vertical-align: -webkit-baseline-middle;
            span {
              font-size: 3.2vw;
              font-weight: 400;
              margin-right: 0.2vw;
            }
          }
        }
        .payment:nth-child(2) {
          padding-left: 10.7vw;
          box-sizing: border-box;
          position: relative;
          &::before {
            content: '';
            position: absolute;
            height: 8.5vw;
            left: 0;
            top: 0;
            transform: translateY(50%);
            width: 1px;
            background: #fff;
          }
        }
      }
    }
    .payCard {
      position: fixed;
      top: 47vw;
      background: #fff;
      box-shadow: 0px 8px 13px 1px rgba(236,116,47,0.16);
      border-radius: 1.1vw;
      display: grid;
      left: 50%;
      transform: translateX(-50%);
      grid-template-columns: repeat(3, 1fr);
      z-index: 66;
      .amount {
        padding: 6.25vw 7.25vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        .label {
          white-space: nowrap;
          color: #999;
          font-size: 3.2vw;
          margin-bottom: 2.1vw;
        }
        .money {
          color: #333333;
          font-weight: 600;
          font-size: 3.7vw;
        }
        &:nth-child(2) {
          position: relative;
          &::before {
            content: '';
            position: absolute;
            height: 8.3vw;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 1px;
            background: #E1E1E1;
          }
          &::after {
            content: '';
            position: absolute;
            height: 8.3vw;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 1px;
            background: #E1E1E1;
          }
        }
      }
    }
    .bank-pay {
      padding-top: 16vw;
      background: #fff;
      .van-cell {
        .van-cell__title {
          font-weight: 600;
          font-size: 4.3vw;
        }
      }
      .van-radio-group {
        .van-cell {
          .van-cell__title {
            font-weight: 400;
            font-size: 3.7vw;
            color: #333333;
          }
          .van-cell__left-icon {
            width: 6.4vw;
            height: 6.4vw;
            margin-right: 3.2vw;
            .van-icon__image {
              width: 100%;
              height: 100%;
            }
          }
        }
        ::v-deep .van-radio__icon--checked .van-icon {
          border-color: #FF5B00 !important;
          background: #fff;
          position: relative;
          &::before {
            content: '';
            width: 2vw;
            height: 2vw;
            border-radius: 50%;
            background: #FF5B00;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          }
        }
      }
    }
    .tips {
      margin-top: 5.3vw;
      width: 93.6vw;
      margin: 5.3vw auto 0 auto;
      border-radius: 1.1vw;
      border: 1px solid #ccc;
      overflow: hidden;
      line-height: 5.3vw;
      font-size: 3.2vw;
      color: #999;
      padding: 3.6vw 2.7vw 3.6vw 7.1vw;
      box-sizing: border-box;
      position: relative;
      &::before {
        content: '';
        position: absolute;
        top: 4.4vw;
        left: 2.7vw;
        width: 3.2vw;
        height: 3.2vw;
        background: url('https://static.caimei365.com/app/mini-distribution/tips.png');
        background-size: 100% 100%;
      }
    }
  }
  .bank-btn {
    background: #fff;
    position: fixed;
    left: 0;
    height: 13.1vw;
    width: 100%;
    bottom: 0;
    @include display-flex-center;
    .van-button {
      width: 80vw;
      border-radius: 1.1vw;
      font-size: 4vw;
    }
  }
}
</style>